Graph JSON -> rendered HTML node

bfollington · bfollington · commit a2eee8434ad9 · 2024-05-30T14:17:46.000-07:00
diff --git a/static/2024-05-30-interpreted-graph-2/index.html b/static/2024-05-30-interpreted-graph-2/index.html
@@ -4,20 +4,38 @@
         <title>rxjs</title>
     </head>
     <style type="text/css">
-        .columns {
-            display: flex;
-            gap: 16px;
-        }
+    .columns {
+        display: flex;
+        gap: 16px;
+    }
 
-        .columns > * {
-            flex: 1;
-        }
+    .columns > * {
+        flex: 1;
+    }
+
+    pre {
+        font-size: 0.8rem;
+    }
     </style>
     <body>
         <div id="app">
         </div>
 
-        <pre id="tree"></pre>
+        <hr />
+        <div class="columns">
+            <div>
+                <label>UI Tree</label>
+                <pre id="tree"></pre>
+            </div>
+            <div>
+                <label>Context</label>
+                <pre id="ctx"></pre>
+            </div>
+            <div>
+                <label>System</label>
+                <pre id="system"></pre>
+            </div>
+        </div>
 
         <script type="module">
             import "./index.js";
diff --git a/static/2024-05-30-interpreted-graph-2/index.js b/static/2024-05-30-interpreted-graph-2/index.js
@@ -1,5 +1,95 @@
 import { BehaviorSubject, combineLatest } from 'https://cdn.jsdelivr.net/npm/rxjs@7.8.1/+esm';
 
+const STREAM = 'https://common.tools/stream-binding.schema.json'
+const CELL = 'https://common.tools/cell-binding.schema.json'
+
+function createElement(node, context) {
+  if (typeof node === 'string') {
+    const textNode = document.createTextNode(node);
+    return textNode;
+  }
+
+  if (!node || typeof node !== 'object') return null;
+
+  // Handle text nodes
+  if (!node.tag && node.$id && node.name) {
+    // Bind the reactive source to update the text node if it changes
+    if (context[node.name] && context[node.name].subscribe) {
+      if (node.type == 'slot') {
+        const uiNode = createElement(context[node.name].getValue(), context)
+        context[node.name].subscribe(newValue => {
+          uiNode.innerHTML = '';
+          uiNode.appendChild(createElement(newValue, context));
+        });
+        return uiNode;
+      } else {
+        const textNode = document.createTextNode(context[node.name] || '');
+        context[node.name].subscribe(newValue => {
+          textNode.textContent = newValue;
+        });
+        return textNode;
+      }
+    }
+  }
+
+  // Handle element nodes
+  if (!node.tag && node.type == 'repeat') {
+    const container = document.createElement('div');
+    const items = context[node.binding] || [];
+    items.forEach(item => {
+      container.appendChild(createElement(node.template, item));
+    });
+    return container
+  }
+
+  const element = document.createElement(node.tag);
+
+  // Set properties
+  for (const [key, value] of Object.entries(node.props || {})) {
+    if (typeof value === 'object' && value.type) {
+      // Handle specific types and bind reactive sources from context
+      if (value.type && value["$id"] && value["$id"] === CELL) {
+        let name = value.name || key;
+        if (!context[name]) continue;
+        element[key] = context[name].getValue();
+        context[name].subscribe(newValue => element[key] = newValue);
+      } else {
+        if (value.binding) {
+          element[key] = context[value.binding];
+        }
+      }
+    } else if (value["$id"] && value["$id"] === STREAM && value.name) {
+      // Handle event binding to a stream
+      if (context[value.name]) {
+        element.addEventListener(key, context[value.name]);
+      }
+    } else {
+      element[key] = value;
+    }
+  }
+
+  let children = node.children || [];
+  if (!Array.isArray(children)) {
+    children = [children];
+  }
+
+  // Recursively create and append child elements
+  children.forEach(childNode => {
+    if (childNode.binding && childNode.type == 'literal') {
+      const node = document.createTextNode(context[childNode.binding])
+      element.appendChild(node);
+      return
+    }
+
+    const childElement = createElement(childNode, context);
+    if (childElement) {
+      element.appendChild(childElement);
+    }
+  });
+
+  return element;
+}
+
 // Example usage with a simplified system.get function
 const system = {
   get: (key) => {
@@ -16,28 +106,31 @@ const system = {
 
 // Function to create the RxJS network from the new JSON graph format
 function createRxJSNetworkFromJson(graph) {
-  const context = {};
+  const context = {
+    inputs: {},
+    outputs: {}
+  };
 
   // Create subjects for each node
   graph.nodes.forEach(node => {
     const nodeName = node.definition.name;
-    context[nodeName] = {};
-    context[nodeName]['out'] = new BehaviorSubject(null);
+    context.outputs[nodeName] = new BehaviorSubject(null);
 
     // foreach input in the signature, create a subject
     if (node.definition.signature) {
       const { inputs } = node.definition.signature;
+      context.inputs[nodeName] = {};
       for (const inputName in inputs) {
-        context[nodeName][inputName] = new BehaviorSubject(null);
+        context.inputs[nodeName][inputName] = new BehaviorSubject(null);
       }
     }
   });
 
   // Set up reactive bindings based on edges
   graph.edges.forEach(edge => {
     const [source, target] = Object.entries(edge)[0];
-    const sourceSubject = context[source]['out'];
-    const targetSubject = context[target[0]][target[1]];
+    const sourceSubject = context.outputs[source];
+    const targetSubject = context.inputs[target[0]][target[1]];
 
     sourceSubject.subscribe(value => {
       targetSubject.next(value);
@@ -53,18 +146,18 @@ function createRxJSNetworkFromJson(graph) {
       // Evaluate the JavaScript content and bind it to the subject
       const func = new Function('system', body);
       const result = func(system, {
-        get: (key) => context[key]['out'].getValue(),
-        set: (key, value) => context[key]['out'].next(value)
+        get: (key) => context.outputs[nodeName].getValue(),
+        set: (key, value) => context.outputs[nodeName].next(value)
       });
-      context[nodeName]['out'].next(result);
+      context.outputs[nodeName].next(result);
     } else if (contentType === 'application/json+vnd.common.ui') {
       // Set up template rendering
       const { inputs } = signature;
       const inputObservables = [];
 
       for (const inputName in inputs) {
-        if (context[inputName]) {
-          inputObservables.push(context[inputName].out);
+        if (context.outputs[inputName]) {
+          inputObservables.push(context.outputs[inputName]);
         }
       }
 
@@ -75,8 +168,8 @@ function createRxJSNetworkFromJson(graph) {
           return acc;
         }, {});
 
-        const renderedTemplate = renderTemplate(node.definition.body, inputValues);
-        context[nodeName]['out'].next(renderedTemplate);
+        const renderedTemplate = createElement(node.definition.body, inputValues);
+        context.outputs[nodeName].next(renderedTemplate);
       });
     }
   });
@@ -162,25 +255,35 @@ const jsonDocument = {
           }
         },
         "body": {
-          "tag": "todos",
+          "tag": "ul",
           "props": {
             "className": "todo"
           },
           "children": {
             "type": "repeat",
             "binding": "todos",
-            "template": [
-              {
-                "tag": "li",
-                "props": {
-                  "todo": {
-                    "$id": "https://common.tools/cell.json",
-                    "type": "todo"
+            "template": {
+              "tag": "li",
+              "props": {},
+              "children": [
+                {
+                  "tag": "input",
+                  "props": {
+                    "type": "checkbox",
+                    "checked": { type: 'boolean', binding: 'checked' }
                   }
                 },
-                "children": []
-              }
-            ]
+                {
+                  "tag": "span",
+                  "props": {
+                    "className": "todo-label"
+                  },
+                  "children": [
+                    { type: 'literal', binding: 'label' }
+                  ]
+                }
+              ]
+            }
           }
         }
       }
@@ -198,8 +301,42 @@ const jsonDocument = {
 // Create the RxJS network
 const context = createRxJSNetworkFromJson(jsonDocument);
 
+function debug() {
+  document.querySelector('#tree').innerHTML = JSON.stringify(jsonDocument, null, 2);
+  document.querySelector('#ctx').innerHTML = JSON.stringify(snapshot(context), null, 2);
+  document.querySelector('#system').innerHTML = JSON.stringify(system.get('todos'), null, 2);
+}
+
+function snapshot(ctx) {
+  // grab values of behavior subjects
+  // preserve literals
+
+  const snapshot = {
+    inputs: {},
+    outputs: {}
+  }
+  for (const key in ctx.outputs) {
+    const value = ctx.outputs[key].getValue()
+    snapshot.outputs[key] = value
+  }
+
+  for (const key in ctx.inputs) {
+    snapshot.inputs[key] = {}
+    for (const inputKey in ctx.inputs[key]) {
+      const value = ctx.inputs[key][inputKey].getValue()
+      snapshot.inputs[key][inputKey] = value
+    }
+  }
+
+  return snapshot
+
+}
+
 // Example output for the UI component
-context['ui'].out.subscribe(renderedTemplate => {
+context.outputs.ui.subscribe(renderedTemplate => {
   console.log(renderedTemplate);
-  document.getElementById('app').innerHTML = renderedTemplate;
+  document.getElementById('app').replaceChildren(renderedTemplate)
+  debug()
 });
+
+debug()
