add example

Author: Gerard Moreno-Torres Bertran

.vscode/launch.json

@@ -0,0 +1,14 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Launch Program",
+            "program": "${workspaceFolder}/src/index.js"
+        }
+    ]
+}

dist/example.js

@@ -3,21 +3,18 @@
   "version": "0.1.4",
   "main": "./src/index.js",
   "dependencies": {
-    "react-reconciler": "^0.22.2"
-  },
-  "peerDependencies": {
+    "react-reconciler": "^0.22.2",
     "react": "^16.10.2"
   },
   "eslintConfig": {
     "extends": "react-app"
   },
   "babel": {
-    "presets": [
-      "react-app"
-    ]
+    "presets": []
   },
   "devDependencies": {
     "@babel/core": "^7.6.4",
+    "@babel/runtime": "^7.6.3",
     "babel-preset-react-app": "^9.0.2",
     "parcel-bundler": "^1.12.4"
   }

dist/example.js.map

@@ -1,6 +1,6 @@
 import Reconciler from "react-reconciler";
 
-const createHostConfig = () => ({
+const createHostConfig = callback => ({
   now: Date.now,
   getRootHostContext: () => {
     let rootContext = {};
@@ -24,7 +24,7 @@ const createHostConfig = () => ({
           acc[key] = newProps[key];
           return acc;
         },
-        { type }
+        { type, children: [] }
       );
   },
   appendChildToContainer: (parent, child) => {
@@ -57,7 +57,9 @@ const createHostConfig = () => ({
   commitTextUpdate: (textInstance, oldText, newText) => {
     textInstance.value = newText;
   },
-  commitUpdate: () => {},
+  commitUpdate: () => {
+    callback();
+  },
   appendChild: (parentInstance, child) => {
     parentInstance.children.push(child);
   },
@@ -87,7 +89,7 @@ const createHostConfig = () => ({
 const ReactJSON = {
   mount(element, renderDom, callback) {
     const isAsync = false;
-    const reconcilerInstance = Reconciler(createHostConfig());
+    const reconcilerInstance = Reconciler(createHostConfig(callback));
     const container = reconcilerInstance.createContainer(renderDom, isAsync);
 
     const parentComponent = null;

package-lock.json

@@ -0,0 +1,141 @@
+import React, { useEffect, useState } from "react";
+import ReactJSON from "./ReactJSON";
+
+const root = {};
+
+const usePlayerState = () => {
+  const [hand, setHand] = useState([]);
+  const [graveyard, setGraveyard] = useState([]);
+
+  return {
+    hand,
+    setHand,
+    graveyard,
+    setGraveyard
+  };
+};
+
+const Events = createEvents();
+
+function createEvents() {
+  const subscriptions = {};
+
+  return {
+    subscribe(key, callback) {
+      if (!subscriptions[key]) {
+        subscriptions[key] = [];
+      }
+
+      const subscriptionsForKey = subscriptions[key];
+
+      const callbackWithUniqueHash = () => callback();
+
+      subscriptionsForKey.push(callbackWithUniqueHash);
+
+      return {
+        cancel: () => {
+          subscriptionsForKey.splice(
+            subscriptionsForKey.indexOf(callbackWithUniqueHash),
+            1
+          );
+        }
+      };
+    },
+    inform(key) {
+      const subscriptionsForKey = subscriptions[key];
+
+      if (!subscriptionsForKey || !subscriptionsForKey.length) {
+        return;
+      }
+
+      subscriptionsForKey.forEach(callback => callback());
+    }
+  };
+}
+
+const useDeckState = () => {
+  const [cards, setCards] = useState([
+    "Ace of hearts",
+    "Tow of hearts",
+    "Three of hearts",
+    "Four of hearts",
+    "Five of hearts",
+    "Six of hearts",
+    "Seven of hearts",
+    "Eight of hearts",
+    "Nine of hearts",
+    "Ten of hearts",
+    "Jack of hearts",
+    "Queen of hearts",
+    "King of hearts"
+  ]);
+
+  return {
+    draw: () => {
+      const poppedCard = cards.pop();
+      setCards(cards);
+      return poppedCard;
+    },
+    cards
+  };
+};
+
+const App = () => {
+  const [turn, setTurn] = useState(0);
+
+  const deckState = useDeckState();
+
+  const firstPlayerState = usePlayerState();
+  const secondPlayerState = usePlayerState();
+
+  const activePlayer = turn % 2 === 0 ? firstPlayerState : secondPlayerState;
+
+  useEffect(() => {
+    activePlayer.setHand(hand => [...hand, deckState.draw()]);
+  }, [turn]);
+
+  useEffect(() => {
+    const subscription = Events.subscribe("NEXT_TURN", () => {
+      setTurn(turn => turn + 1);
+    });
+
+    return () => subscription.cancel();
+  }, []);
+
+  return (
+    <root>
+      <firstPlayer>
+        <hand>
+          {firstPlayerState.hand.map((card, index) => (
+            <card key={index}>{card}</card>
+          ))}
+        </hand>
+      </firstPlayer>
+      <secondPlayer>
+        <hand>
+          {secondPlayerState.hand.map((card, index) => (
+            <card key={index}>{card}</card>
+          ))}
+        </hand>
+      </secondPlayer>
+      <deck>
+        {deckState.cards.map((card, index) => (
+          <card key={index}>{card}</card>
+        ))}
+      </deck>
+    </root>
+  );
+};
+
+const log = () => {
+  console.log(JSON.stringify(root, null, 2));
+  console.log("----------");
+};
+
+ReactJSON.mount(<App />, root, log);
+
+setTimeout(log, 1000);
+
+Events.inform("NEXT_TURN");
+
+setTimeout(log, 1000);