feat: el-ui — activation-based frontend framework, spreading activation reactivity, graph state
This commit is contained in:
Will Anderson
@@ -0,0 +1,23 @@
|
||||
component Counter {
|
||||
state {
|
||||
count: Int = 0
|
||||
}
|
||||
|
||||
template {
|
||||
<div class="counter">
|
||||
<h1 class="count">{count}</h1>
|
||||
<div class="buttons">
|
||||
<button on:click={() => count = count + 1}>+</button>
|
||||
<button on:click={() => count = count - 1}>-</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
component App {
|
||||
template {
|
||||
<div class="app">
|
||||
<Counter />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -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('count', count + 1)" data-el-tag="button">+</button><button data-el-click="() => __self.setState('count', 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');
|
||||
@@ -0,0 +1,107 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Counter — el-ui</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #080b0f;
|
||||
--bg2: #0d1117;
|
||||
--text: #e8edf3;
|
||||
--text2: #7a8a9a;
|
||||
--accent: #38bdf8;
|
||||
--accent-dim: rgba(56,189,248,0.12);
|
||||
--accent-glow: rgba(56,189,248,0.4);
|
||||
--border: rgba(255,255,255,0.08);
|
||||
--radius: 8px;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: 'DM Mono', 'JetBrains Mono', 'Fira Code', monospace;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.app {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.counter {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 32px;
|
||||
padding: 48px 64px;
|
||||
background: var(--bg2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.count {
|
||||
font-size: 72px;
|
||||
font-weight: 700;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--accent);
|
||||
text-shadow: 0 0 40px var(--accent-glow);
|
||||
min-width: 120px;
|
||||
text-align: center;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
button {
|
||||
background: var(--accent-dim);
|
||||
border: 1px solid var(--accent);
|
||||
color: var(--accent);
|
||||
font-size: 24px;
|
||||
font-family: inherit;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: var(--radius);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, box-shadow 0.15s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: rgba(56,189,248,0.22);
|
||||
box-shadow: 0 0 16px var(--accent-glow);
|
||||
}
|
||||
|
||||
button:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.el-badge {
|
||||
position: fixed;
|
||||
bottom: 16px;
|
||||
right: 16px;
|
||||
font-size: 10px;
|
||||
color: var(--text2);
|
||||
opacity: 0.5;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<div class="el-badge">el-ui · spreading activation</div>
|
||||
<script type="module" src="./app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user