Tevinthuku

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);

Tevinthuku

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);

Tevinthuku

// ...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;
}

Tevinthuku

export class Component {
  constructor(props) {
    this.props = props;
    this.state = this.state || {};
  }
  setState(partialState) {
    this.state = Object.assign({}, this.state, partialState);
  }
}

Tevinthuku

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... */

Tevinthuku

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]);

Tevinthuku

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;
}

Tevinthuku

const instance = {
  dom: HTMLElement, // the rendered dom element
  element: {type: String, props: object}, 
  childInstances: Array<instance> // array of child instances
 }

Tevinthuku

    <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>
      )

Tevinthuku

import { render } from "./reconciler";
import { createElement } from "./element";

export { createElement, render };

export default {
  render,
  createElement
};