first commit

Author: Gerard Moreno-Torres Bertran

package-lock.json

@@ -1,10 +1,11 @@
 {
-  "name": "reactjson",
+  "name": "react-json",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
     "react": "^16.10.2",
     "react-dom": "^16.10.2",
+    "react-reconciler": "^0.22.2",
     "react-scripts": "3.2.0"
   },
   "scripts": {

package.json

@@ -0,0 +1,106 @@
+import Reconciler from "react-reconciler";
+
+const createHostConfig = callback => ({
+  now: Date.now,
+  getRootHostContext: () => {
+    let rootContext = {};
+    return rootContext;
+  },
+  getChildHostContext: (parentContext, fiberType) => {
+    let context = { type: fiberType };
+    return context;
+  },
+  shouldSetTextContent: () => {
+    return false;
+  },
+  createTextInstance: newText => {
+    return { type: "text", value: newText };
+  },
+  createInstance: (type, newProps) => {
+    return Object.keys(newProps)
+      .filter(key => key !== "children")
+      .reduce(
+        (acc, key) => {
+          acc[key] = newProps[key];
+          return acc;
+        },
+        { type }
+      );
+  },
+  appendChildToContainer: (parent, child) => {
+    if (!parent.children) {
+      parent.children = [];
+    }
+
+    parent.children.push(child);
+  },
+  finalizeInitialChildren: () => {
+    return false;
+  },
+  prepareForCommit: () => {},
+  resetAfterCommit: () => {},
+  commitMount: () => {},
+  appendInitialChild: (parent, child) => {
+    if (!parent.children) {
+      parent.children = [];
+    }
+
+    parent.children.push(child);
+  },
+  supportsMutation: true,
+  removeChildFromContainer: (container, child) => {
+    if (container.children) {
+      container.children.splice(container.children.indexOf(child), 1);
+    }
+  },
+  prepareUpdate: () => {},
+  commitTextUpdate: (textInstance, oldText, newText) => {
+    textInstance.value = newText;
+    callback();
+  },
+  commitUpdate: () => {
+    callback();
+  },
+  appendChild: (parentInstance, child) => {
+    parentInstance.children.push(child);
+  },
+  removeChild: (parentInstance, child) => {
+    parentInstance.children.splice(parentInstance.children.indexOf(child), 1);
+  },
+  resetTextContent: () => {},
+  shouldDeprioritizeSubtree: () => {
+    return false;
+  },
+  insertInContainerBefore: (container, child, beforeChild) => {
+    container.children.splice(
+      container.children.indexOf(beforeChild) - 1,
+      0,
+      child
+    );
+  },
+  insertBefore: (parentInstance, child, beforeChild) => {
+    parentInstance.children.splice(
+      parentInstance.children.indexOf(beforeChild) - 1,
+      0,
+      child
+    );
+  }
+});
+
+const ReactJSON = {
+  mount(element, renderDom, callback) {
+    const isAsync = false;
+    const reconcilerInstance = Reconciler(createHostConfig(callback));
+    const container = reconcilerInstance.createContainer(renderDom, isAsync);
+
+    const parentComponent = null;
+    reconcilerInstance.updateContainer(
+      element,
+      container,
+      parentComponent,
+      callback
+    );
+  }
+};
+
+export default ReactJSON;

src/ReactJSON.js

@@ -0,0 +1,34 @@
+import React from "react";
+
+const Player = () => {
+  const [life, setLife] = React.useState(20);
+  const [mana, setMana] = React.useState(20);
+
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      setLife(x => x - 1);
+      setMana(x => x - 1);
+    }, 100);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <player>
+      <life>{life}</life>
+      <mana>{mana}</mana>
+      {life < 10 && life > 0 ? "Running out of mana" : null}
+    </player>
+  );
+};
+
+const State = () => {
+  return (
+    <state>
+      <Player active={true} />
+      <Player active={false} />
+    </state>
+  );
+};
+
+export default State;

src/State.js

@@ -1,12 +1,10 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
+import React from "react";
 
-ReactDOM.render(<App />, document.getElementById('root'));
+import ReactJSON from "./ReactJSON";
+import State from "./State";
 
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+const root = {};
+
+ReactJSON.mount(<State />, root, () => {
+  console.log(root);
+});