@evgkch/reactive-dom 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/README.md +71 -92
  2. package/dist/create-element.js +2 -2
  3. package/dist/index.d.ts +2 -2
  4. package/dist/index.d.ts.map +1 -1
  5. package/dist/index.js +1 -1
  6. package/dist/list.js +4 -4
  7. package/dist/log.d.ts +9 -14
  8. package/dist/log.d.ts.map +1 -1
  9. package/dist/log.js +20 -78
  10. package/dist/slot.js +4 -4
  11. package/dist/unmount.js +2 -2
  12. package/examples/index.html +4 -4
  13. package/examples/pages/console/index.css +73 -0
  14. package/examples/pages/console/index.html +13 -0
  15. package/examples/pages/console/index.ts +11 -0
  16. package/examples/pages/console/model/state.ts +25 -0
  17. package/examples/pages/console/ui/App.ts +57 -0
  18. package/examples/pages/console/ui/LineItem.ts +13 -0
  19. package/examples/pages/monitor/index.css +297 -0
  20. package/examples/pages/monitor/index.html +13 -0
  21. package/examples/pages/monitor/index.ts +24 -0
  22. package/examples/pages/monitor/model/state.ts +30 -0
  23. package/examples/pages/monitor/ui/App.ts +207 -0
  24. package/examples/pages/monitor/ui/TaskItem.ts +41 -0
  25. package/examples/{stream/styles.css → pages/stream/index.css} +1 -75
  26. package/examples/pages/stream/index.html +13 -0
  27. package/examples/pages/stream/index.ts +15 -0
  28. package/examples/pages/stream/model/state.ts +45 -0
  29. package/examples/pages/stream/ui/App.ts +70 -0
  30. package/examples/pages/stream/ui/LogLine.ts +27 -0
  31. package/examples/shared/lib/index.ts +19 -0
  32. package/examples/{console/styles.css → shared/styles/common.css} +5 -77
  33. package/examples/tsconfig.json +13 -0
  34. package/package.json +10 -8
  35. package/examples/console/app.js +0 -97
  36. package/examples/console/index.html +0 -23
  37. package/examples/monitor/app.js +0 -260
  38. package/examples/monitor/index.html +0 -23
  39. package/examples/monitor/styles.css +0 -425
  40. package/examples/stream/app.js +0 -136
  41. package/examples/stream/index.html +0 -23
package/examples/console/app.js DELETED
@@ -1,97 +0,0 @@
1
- import * as R from "@evgkch/reactive";
2
- import * as UI from "@evgkch/reactive-dom";
3
-
4
- if (typeof document !== "undefined" && document.getElementById("app")) {
5
- R.configure({ log: true });
6
- UI.configure({ log: true });
7
- }
8
-
9
- // Reactive state: list of { type: 'in'|'out'|'err', text }
10
- const lines = R.List([
11
- R.Struct({ type: "out", text: "Welcome. Type help, ping, or echo <msg>." }),
12
- ]);
13
-
14
- const replies = {
15
- help: "Commands: help, ping, echo <msg>, clear.",
16
- ping: "pong",
17
- clear: "",
18
- };
19
-
20
- function respond(cmd) {
21
- const t = cmd.trim().toLowerCase();
22
- if (t === "clear") return null;
23
- if (t === "help") return replies.help;
24
- if (t === "ping") return replies.ping;
25
- if (t.startsWith("echo ")) return cmd.slice(5).trim() || "(empty)";
26
- return `Unknown: ${cmd}`;
27
- }
28
-
29
- const LineItem = UI.List(
30
- `<div class="line"></div>`,
31
- (props, refs, ctx) => {
32
- ctx.batch(() => {
33
- const { type, text } = props.item;
34
- refs.el.textContent = text;
35
- refs.el.className = "line " + type;
36
- });
37
- }
38
- );
39
-
40
- const App = UI.Struct(
41
- `<div class="panel">
42
- <div class="titlebar">
43
- <div class="titlebar-left">
44
- <span class="dot dot-red"></span>
45
- <span class="dot dot-yellow"></span>
46
- <span class="dot dot-green"></span>
47
- <span class="titlebar-title">SYS://CONSOLE</span>
48
- </div>
49
- <div class="titlebar-right" data-ref="count">0 lines</div>
50
- </div>
51
- <div class="output" data-ref="output"></div>
52
- <div class="input-row">
53
- <span class="prompt">$</span>
54
- <input class="console-input" data-ref="input" placeholder="command..." />
55
- </div>
56
- </div>`,
57
- (props, refs, ctx) => {
58
- const input = refs.input;
59
-
60
- ctx.list(refs.output, lines, (item) => ({ item }), LineItem, {
61
- onAdd: () => {
62
- requestAnimationFrame(() => {
63
- requestAnimationFrame(() => {
64
- refs.output.scrollTop = refs.output.scrollHeight;
65
- });
66
- });
67
- },
68
- });
69
-
70
- ctx.batch(() => {
71
- refs.count.textContent = lines.length + " line" + (lines.length !== 1 ? "s" : "");
72
- });
73
-
74
- function submit() {
75
- const text = input.value.trim();
76
- if (!text) return;
77
- lines.push(R.Struct({ type: "in", text }));
78
- input.value = "";
79
- const out = respond(text);
80
- if (out !== null) {
81
- lines.push(R.Struct({ type: "out", text: out }));
82
- } else {
83
- lines.splice(0, lines.length);
84
- lines.push(R.Struct({ type: "out", text: "Welcome. Type help, ping, or echo <msg>." }));
85
- }
86
- }
87
-
88
- input.addEventListener("keydown", (e) => {
89
- if (e.key === "Enter") submit();
90
- });
91
- }
92
- );
93
-
94
- export { App, lines };
95
- if (typeof document !== "undefined" && document.getElementById("app")) {
96
- document.getElementById("app").appendChild(App({}));
97
- }
package/examples/console/index.html DELETED
@@ -1,23 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1">
6
- <title>Console — reactive-dom</title>
7
- <script type="importmap">
8
- {
9
- "imports": {
10
- "@evgkch/reactive": "/node_modules/@evgkch/reactive/dist/index.js",
11
- "@evgkch/reactive-dom": "/dist/index.js"
12
- }
13
- }
14
- </script>
15
- <link rel="preconnect" href="https://fonts.googleapis.com">
16
- <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
17
- <link rel="stylesheet" href="./styles.css">
18
- </head>
19
- <body>
20
- <div id="app"></div>
21
- <script type="module" src="./app.js"></script>
22
- </body>
23
- </html>
package/examples/monitor/app.js DELETED
@@ -1,260 +0,0 @@
1
- import * as R from "@evgkch/reactive";
2
- import * as UI from "@evgkch/reactive-dom";
3
-
4
- if (typeof document !== "undefined" && document.getElementById("app")) {
5
- R.configure({ log: true });
6
- UI.configure({ log: true });
7
- }
8
-
9
- // ── состояние ──────────────────────────────────────────────────────────────
10
-
11
- const filter = R.Value("all");
12
- const cpu = R.Value(42);
13
- const mem = R.Value(61);
14
- const uptime = R.Value(0);
15
-
16
- const tasks = R.List([
17
- R.Struct({ text: "infiltrate server", done: false }),
18
- R.Struct({ text: "extract data", done: true }),
19
- R.Struct({ text: "cover tracks", done: false }),
20
- ]);
21
-
22
- // fake metrics — change every second (only in browser)
23
- if (typeof document !== "undefined" && document.getElementById("app")) {
24
- setInterval(() => {
25
- cpu.set(Math.max(10, Math.min(99, cpu.get() + Math.floor(Math.random() * 11) - 5)));
26
- mem.set(Math.max(20, Math.min(95, mem.get() + Math.floor(Math.random() * 7) - 3)));
27
- uptime.update((n) => n + 1);
28
- }, 1000);
29
- }
30
-
31
- // ── утилиты ───────────────────────────────────────────────────────────────
32
-
33
- function fmtUptime(s) {
34
- const h = String(Math.floor(s / 3600)).padStart(2, '0');
35
- const m = String(Math.floor((s % 3600) / 60)).padStart(2, '0');
36
- const sec = String(s % 60).padStart(2, '0');
37
- return `${h}:${m}:${sec}`;
38
- }
39
-
40
- function barClass(val) {
41
- if (val >= 85) return 'crit';
42
- if (val >= 65) return 'warn';
43
- return '';
44
- }
45
-
46
- // ── TaskItem ──────────────────────────────────────────────────────────────
47
-
48
- const TaskItem = UI.List(
49
- `<li>
50
- <input type="checkbox" class="task-check" data-ref="check" />
51
- <span class="task-text" data-ref="text"></span>
52
- <span class="task-status" data-ref="status"></span>
53
- <button class="task-remove" data-ref="remove">kill</button>
54
- </li>`,
55
- (props, refs, ctx) => {
56
- const check = refs.check;
57
-
58
- ctx.batch(() => {
59
- refs.text.textContent = props.item.text;
60
- check.checked = props.item.done;
61
- refs.el.className = props.item.done ? "done" : "";
62
- refs.status.textContent = props.item.done ? "DONE" : "RUNNING";
63
-
64
- const f = filter.get();
65
- refs.el.style.display =
66
- f === "all" ? "" :
67
- f === "active" ? (props.item.done ? "none" : "") :
68
- f === "done" ? (props.item.done ? "" : "none") : "";
69
- });
70
-
71
- check.onchange = () => { props.item.done = check.checked; };
72
- refs.remove.onclick = () => tasks.splice(tasks.indexOf(props.item), 1);
73
- }
74
- );
75
-
76
- // ── App ───────────────────────────────────────────────────────────────────
77
-
78
- const App = UI.Struct(
79
- `<div class="monitor">
80
-
81
- <div class="titlebar">
82
- <div class="titlebar-left">
83
- <span class="dot dot-red"></span>
84
- <span class="dot dot-yellow"></span>
85
- <span class="dot dot-green"></span>
86
- <span class="titlebar-title">SYS://TASK_MONITOR</span>
87
- </div>
88
- <div class="titlebar-right" data-ref="uptime">UP 00:00:00</div>
89
- </div>
90
-
91
- <div class="metrics">
92
- <div class="metric">
93
- <div class="metric-label">CPU</div>
94
- <div class="metric-bar"><div class="metric-fill" data-ref="cpu-bar"></div></div>
95
- <div class="metric-val" data-ref="cpu-val">0%</div>
96
- </div>
97
- <div class="metric">
98
- <div class="metric-label">MEM</div>
99
- <div class="metric-bar"><div class="metric-fill" data-ref="mem-bar"></div></div>
100
- <div class="metric-val" data-ref="mem-val">0%</div>
101
- </div>
102
- <div class="metric">
103
- <div class="metric-label">PROCS</div>
104
- <div class="metric-bar"><div class="metric-fill" data-ref="procs-bar" style="background:#4488ff"></div></div>
105
- <div class="metric-val" data-ref="procs-val">0</div>
106
- </div>
107
- </div>
108
-
109
- <div class="input-row">
110
- <span class="prompt">$</span>
111
- <input class="new-input" data-ref="input" placeholder="spawn process..." />
112
- <span class="kbd-hint">↵ enter</span>
113
- </div>
114
-
115
- <ul class="task-list" data-ref="list"></ul>
116
- <p class="empty" data-ref="empty">no processes running</p>
117
-
118
- <div class="statusbar">
119
- <div class="status-left" data-ref="stats">
120
- <span>procs: <span data-ref="total">0</span></span>
121
- <span>running: <span data-ref="running">0</span></span>
122
- <span>done: <span data-ref="done-count">0</span></span>
123
- </div>
124
- <div class="filters" data-ref="filters">
125
- <button data-filter="all">all</button>
126
- <button data-filter="active">running</button>
127
- <button data-filter="done">done</button>
128
- </div>
129
- </div>
130
-
131
- <div class="hotkeys">
132
- <div class="hotkey"><kbd>↵</kbd> spawn</div>
133
- <div class="hotkey"><kbd>1</kbd> all</div>
134
- <div class="hotkey"><kbd>2</kbd> running</div>
135
- <div class="hotkey"><kbd>3</kbd> done</div>
136
- <div class="hotkey"><kbd>⌫</kbd> kill last</div>
137
- <div class="hotkey"><kbd>ESC</kbd> clear</div>
138
- </div>
139
-
140
- </div>`,
141
-
142
- (props, refs, ctx) => {
143
- const input = refs.input;
144
-
145
- // ── список ──────────────────────────────────────────────────────────
146
- ctx.list(refs.list, tasks, (item) => ({ item }), TaskItem, {
147
- onAdd: (el) =>
148
- el.animate([
149
- { opacity: 0, transform: "translateX(-8px)" },
150
- { opacity: 1, transform: "translateX(0)" }
151
- ], 160),
152
- onRemove: (el, done) =>
153
- el.animate([
154
- { opacity: 1, transform: "translateX(0)" },
155
- { opacity: 0, transform: "translateX(8px)" }
156
- ], 130).finished.then(done),
157
- });
158
-
159
- // ── метрики ──────────────────────────────────────────────────────────
160
- ctx.batch(() => {
161
- const v = cpu.get();
162
- refs['cpu-bar'].style.width = v + '%';
163
- refs['cpu-bar'].className = 'metric-fill ' + barClass(v);
164
- refs['cpu-val'].textContent = v + '%';
165
- });
166
-
167
- ctx.batch(() => {
168
- const v = mem.get();
169
- refs['mem-bar'].style.width = v + '%';
170
- refs['mem-bar'].className = 'metric-fill ' + barClass(v);
171
- refs['mem-val'].textContent = v + '%';
172
- });
173
-
174
- ctx.batch(() => {
175
- const total = tasks.length;
176
- const max = Math.max(total, 1);
177
- refs['procs-bar'].style.width = Math.min(total / 10 * 100, 100) + '%';
178
- refs['procs-val'].textContent = total;
179
- });
180
-
181
- ctx.batch(() => {
182
- refs.uptime.textContent = 'UP ' + fmtUptime(uptime.get());
183
- });
184
-
185
- // ── статистика ────────────────────────────────────────────────────────
186
- ctx.batch(() => {
187
- let running = 0;
188
- tasks.forEach(t => { if (!t.done) running++ });
189
- const total = tasks.length;
190
- const done = total - running;
191
- refs.total.textContent = total;
192
- refs.running.textContent = running;
193
- refs['done-count'].textContent = done;
194
- refs.empty.style.display = total === 0 ? 'block' : 'none';
195
- });
196
-
197
- // ── фильтры ──────────────────────────────────────────────────────────
198
- ctx.batch(() => {
199
- refs.filters.querySelectorAll('[data-filter]').forEach(btn => {
200
- btn.className = filter.get() === btn.getAttribute('data-filter') ? 'active' : '';
201
- });
202
- });
203
-
204
- refs.filters.addEventListener('click', e => {
205
- const f = e.target?.getAttribute?.('data-filter');
206
- if (f) filter.set(f);
207
- });
208
-
209
- // ── добавление ───────────────────────────────────────────────────────
210
- function addTask() {
211
- const text = input.value.trim();
212
- if (!text) return;
213
- tasks.push(R.Struct({ text, done: false }));
214
- input.value = '';
215
- }
216
-
217
- input.addEventListener('keydown', e => {
218
- if (e.key === 'Enter') addTask();
219
- });
220
-
221
- // ── горячие клавиши ──────────────────────────────────────────────────
222
- document.addEventListener('keydown', e => {
223
- // не перехватываем когда фокус в инпуте (кроме ESC и Backspace)
224
- const inInput = document.activeElement === input;
225
-
226
- if (e.key === 'Escape') {
227
- input.value = '';
228
- input.blur();
229
- return;
230
- }
231
-
232
- if (inInput) return;
233
-
234
- if (e.key === '1') { filter.set('all'); return; }
235
- if (e.key === '2') { filter.set('active'); return; }
236
- if (e.key === '3') { filter.set('done'); return; }
237
-
238
- if (e.key === 'Backspace') {
239
- // kill last — удалить последний незавершённый процесс
240
- for (let i = tasks.length - 1; i >= 0; i--) {
241
- if (!tasks[i].done) {
242
- tasks.splice(i, 1);
243
- break;
244
- }
245
- }
246
- return;
247
- }
248
-
249
- // любой printable символ → фокус на инпут
250
- if (e.key.length === 1 && !e.ctrlKey && !e.metaKey) {
251
- input.focus();
252
- }
253
- });
254
- }
255
- );
256
-
257
- export { App, filter, tasks };
258
- if (typeof document !== "undefined" && document.getElementById("app")) {
259
- document.getElementById("app").appendChild(App({}));
260
- }
package/examples/monitor/index.html DELETED
@@ -1,23 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1">
6
- <title>Monitor — reactive-dom</title>
7
- <script type="importmap">
8
- {
9
- "imports": {
10
- "@evgkch/reactive": "/node_modules/@evgkch/reactive/dist/index.js",
11
- "@evgkch/reactive-dom": "/dist/index.js"
12
- }
13
- }
14
- </script>
15
- <link rel="preconnect" href="https://fonts.googleapis.com">
16
- <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@700;900&display=swap" rel="stylesheet">
17
- <link rel="stylesheet" href="./styles.css">
18
- </head>
19
- <body>
20
- <div id="app"></div>
21
- <script type="module" src="./app.js"></script>
22
- </body>
23
- </html>