Skip to content

Instantly share code, notes, and snippets.

@rmccue
Created Aug 26, 2017
Embed
What would you like to do?
not-react.js
// Resolve custom components by calling .render() recursively.
const resolveComponents = element => {
// If the "component" is a string, it's static text.
if ( typeof element === 'string' ) {
return element;
}
// If the type is a string, it's already in DOM node form.
if ( typeof element.type === 'string' ) {
return element;
}
// The type is a component class, instantiate it with props
// and call .render()
const inst = new element.type( element.props || {} );
return resolveComponents( inst.render() );
};
// Turn a list of elements (possibly with children) into a list of DOM nodes.
const treeToElements = tree => {
return tree.map( node => {
// First, resolve custom components with .render()
const element = resolveComponents( node );
// If the element is just a string, it's text.
if ( typeof element === 'string' ) {
return document.createTextNode( element );
}
// Create a DOM element of the given type.
const domEl = document.createElement( element.type );
// Extract special props, and collect the rest to set on the element.
const { children, key, ref, ...props } = element.props;
if ( props ) {
// If the element has properties, set them on the DOM element now.
Object.keys( props ).forEach( key => {
domEl[ key ] = props[ key ];
});
}
if ( children ) {
// If the element has children, resolve them also.
const childElements = treeToElements( children );
// Then append to our node.
childElements.forEach( child => domEl.appendChild( child ) );
}
return domEl;
} );
};
const ReactDOM = {
render: ( component, root ) => {
// Take our main component and turn it into a tree of DOM elements.
const toRender = treeToElements( [ component ] );
// Then, add the main DOM element to the root.
root.appendChild( toRender[0] );
},
};
export default ReactDOM;
// Base component class.
export class Component {
constructor( props ) {
this.props = props;
this.state = {};
}
render() {}
}
// Build an element (typically called from JSX)
const createElement = (type, props, ...children) => {
return {
type,
props: { ...props, children },
};
};
const React = {
Component,
createElement,
};
export default React;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment