Skip to content

Instantly share code, notes, and snippets.

@spudly
spudly / Smiley.js
Created October 4, 2017 23:26
An experimental prototype showing how you can use a react-style reconciler to render web components
const reconcileProps = (vElement, element) => {
Object.keys(vElement.props).forEach(prop => {
const eventMatch = prop.match(/^on([A-Z]\w+)/);
if (eventMatch) {
// TODO: need a way to remove event listeners when they change or are removed
element.addEventListener(eventMatch[1].toLowerCase(), vElement.props[prop]);
} else if (element[prop] !== vElement.props[prop]) {
element[prop] = vElement.props[prop]; // eslint-disable-line no-param-reassign
}
});