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

2026-04-27 19:15:53 -05:00
commit 3bf3c02854
25 changed files with 4642 additions and 0 deletions
@@ -0,0 +1,108 @@
+import { Component, Graph, Renderer, Router, mount } from './el-ui.js';
+
+class TodoItem extends Component {
+    constructor(props = {}) {
+        super();
+        this.props = props;
+        this._graph = new Graph();
+        this._stateNodes = {};
+        this._state = {};
+        // Props
+        this._props_text = props.text !== undefined ? props.text : undefined;
+        this._props_done = props.done !== undefined ? props.done : false;
+        // State nodes (Engram graph seeds)
+        this._stateNodes['completed'] = this._graph.seed({ type: 'state', name: 'completed', content: false });
+        this._state['completed'] = false;
+        // 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 completed = this._state['completed'];
+        const text = this._props_text;
+        const done = this._props_done;
+        return `<li class="${completed ? "item done" : "item"  }" data-el-tag="li"><input type="checkbox" data-el-change="() => __self.setState(&#39;completed&#39;, !completed)" data-el-tag="input"></input><span data-el-tag="span">${text  }</span></li>`;
+    }
+
+}
+
+class TodoApp extends Component {
+    constructor(props = {}) {
+        super();
+        this.props = props;
+        this._graph = new Graph();
+        this._stateNodes = {};
+        this._state = {};
+        // State nodes (Engram graph seeds)
+        this._stateNodes['newItem'] = this._graph.seed({ type: 'state', name: 'newItem', content: "" });
+        this._state['newItem'] = "";
+        this._stateNodes['items'] = this._graph.seed({ type: 'state', name: 'items', content: "" });
+        this._state['items'] = "";
+        // 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);
+        }
+    }
+
+    addItem() {
+        const newItem = this._state['newItem'];
+        const items = this._state['items'];
+        if newItem != "" { items = items + newItem + ";" newItem = "" }
+    }
+
+    render() {
+        const __self = this;
+        const newItem = this._state['newItem'];
+        const items = this._state['items'];
+        return `<div class="todo-app" data-el-tag="div"><h1 data-el-tag="h1">Todos</h1><div class="input-row" data-el-tag="div"><input type="text" value="${newItem  }" data-el-input="(e) => __self.setState(&#39;newItem&#39;, e.target.value)" placeholder="Add a todo..." data-el-tag="input"></input><button data-el-click="() => addItem()" data-el-tag="button">Add</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(TodoApp, {  })}</div>`;
+    }
+
+}
+
+export { TodoItem, TodoApp, App };
+
+// Mount the app
+mount(App, '#app');