feat: el-ui — activation-based frontend framework, spreading activation reactivity, graph state

ui/examples/counter/app.js

@@ -0,0 +1,61 @@
+import { Component, Graph, Renderer, Router, mount } from './el-ui.js';
+
+class Counter extends Component {
+    constructor(props = {}) {
+        super();
+        this.props = props;
+        this._graph = new Graph();
+        this._stateNodes = {};
+        this._state = {};
+        // State nodes (Engram graph seeds)
+        this._stateNodes['count'] = this._graph.seed({ type: 'state', name: 'count', content: 0 });
+        this._state['count'] = 0;
+        // Subscribe to graph activation events
+        for (const [key, nodeId] of Object.entries(this._stateNodes)) {
+            this._graph.subscribe(nodeId, (node) => {
+                this._state[key] = node.content;
+                if (this._renderer) this._renderer.patch();
+            });
+        }
+    }
+
+    setState(name, value) {
+        if (this._stateNodes[name] !== undefined) {
+            this._graph.update(this._stateNodes[name], value);
+        }
+    }
+
+    render() {
+        const __self = this;
+        const count = this._state['count'];
+        return `<div class="counter" data-el-tag="div"><h1 class="count" data-el-tag="h1">${count  }</h1><div class="buttons" data-el-tag="div"><button data-el-click="() => __self.setState(&#39;count&#39;, count + 1)" data-el-tag="button">+</button><button data-el-click="() => __self.setState(&#39;count&#39;, count - 1)" data-el-tag="button">-</button></div></div>`;
+    }
+
+}
+
+class App extends Component {
+    constructor(props = {}) {
+        super();
+        this.props = props;
+        this._graph = new Graph();
+        this._stateNodes = {};
+        this._state = {};
+    }
+
+    setState(name, value) {
+        if (this._stateNodes[name] !== undefined) {
+            this._graph.update(this._stateNodes[name], value);
+        }
+    }
+
+    render() {
+        const __self = this;
+        return `<div class="app" data-el-tag="div">${__self._child(Counter, {  })}</div>`;
+    }
+
+}
+
+export { Counter, App };
+
+// Mount the app
+mount(App, '#app');