This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { reconcile } from "./reconciler" | |
export class Component { | |
constructor(props) { | |
this.props = props; | |
this.state = this.state || {}; | |
} | |
setState(partialState) { | |
this.state = Object.assign({}, this.state, partialState); | |
updateInstance(this.__internalInstance); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function instantiate(element) { | |
const { type, props } = element; | |
const isDomElement = typeof type === "string"; | |
if (isDomElement) { | |
// Instantiate DOM element | |
const isTextElement = type === TEXT_ELEMENT; | |
const dom = isTextElement | |
? document.createTextNode("") | |
: document.createElement(type); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ...code | |
function createPublicInstance(element, internalInstance) { | |
const { type, props } = element; | |
const publicInstance = new type(props); // the type is a class so we use the *new* keyword | |
publicInstance.__internalInstance = internalInstance; | |
return publicInstance; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export class Component { | |
constructor(props) { | |
this.props = props; | |
this.state = this.state || {}; | |
} | |
setState(partialState) { | |
this.state = Object.assign({}, this.state, partialState); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function reconcile(parentDom, instance, element) { | |
/** code... */ | |
else if (instance.element.type === element.type) { | |
// perform props update here | |
updateDomProperties(instance.dom, instance.element.props, element.props); | |
instance.childInstances = reconcileChildren(instance, element); | |
instance.element = element; | |
return instance; | |
} | |
/** code... */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export function updateDomProperties(dom, prevProps, nextProps) { | |
const isEvent = name => name.startsWith("on"); | |
const isAttribute = name => !isEvent(name) && name != "children"; | |
// Remove event listeners | |
Object.keys(prevProps) | |
.filter(isEvent) | |
.forEach(name => { | |
const eventType = name.toLowerCase().substring(2); | |
dom.removeEventListener(eventType, prevProps[name]); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { updateDomProperties } from "./dom-utils"; | |
import { TEXT_ELEMENT } from "./element"; | |
let rootInstance = null; // will keep the reference to the instance rendered on the dom | |
export function render(element, parentDom) { | |
const prevInstance = rootInstance; | |
const nextInstance = reconcile(parentDom, prevInstance, element); | |
rootInstance = nextInstance; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const instance = { | |
dom: HTMLElement, // the rendered dom element | |
element: {type: String, props: object}, | |
childInstances: Array<instance> // array of child instances | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script type="text/jsx"> | |
/** @jsx tevreact.createElement */ | |
/** In the comment above we are telling babel which function it should | |
use the default is React.createElement and we want to use | |
our own createElement function*/ | |
const appElement = ( | |
<div> | |
<h1>Hello Tev, Have you watched John Wick</h1> | |
</div> | |
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { render } from "./reconciler"; | |
import { createElement } from "./element"; | |
export { createElement, render }; | |
export default { | |
render, | |
createElement | |
}; |