npm - @adaas/are-html - Versions diffs - 0.0.20 → 0.0.22 - Mend

@adaas/are-html 0.0.20 → 0.0.22

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 (109) hide show

package/examples/for-perf/public/index.html ADDED Viewed

@@ -0,0 +1,270 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>ARE $for Performance Lab</title>
+  <style>
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: #0f0f17;
+      color: #e5e7eb;
+    }
+    are-root {
+      display: block;
+      min-height: 100vh;
+    }
+    .app {
+      max-width: 1100px;
+      margin: 0 auto;
+      padding: 24px 20px 60px;
+    }
+    /* ---------- header ---------- */
+    .header {
+      display: flex;
+      align-items: baseline;
+      justify-content: space-between;
+      gap: 16px;
+      padding-bottom: 16px;
+      border-bottom: 1px solid #23232f;
+      flex-wrap: wrap;
+    }
+    .brand {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    .logo {
+      font-size: 22px;
+      color: #7c3aed;
+    }
+    .title {
+      font-size: 20px;
+      font-weight: 700;
+    }
+    .subtitle {
+      font-size: 12px;
+      color: #8b8b9b;
+    }
+    /* ---------- legend ---------- */
+    .legend {
+      display: flex;
+      gap: 10px;
+      flex-wrap: wrap;
+      margin: 18px 0 10px;
+    }
+    .legend-card {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      background: #181824;
+      border: 1px solid #23232f;
+      border-radius: 8px;
+      padding: 8px 12px;
+      min-width: 130px;
+    }
+    .legend-key {
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+      color: #7c3aed;
+      font-weight: 700;
+    }
+    .legend-label {
+      font-size: 12px;
+      color: #b6b6c6;
+    }
+    /* ---------- hint ---------- */
+    .hint {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 12px;
+      color: #8b8b9b;
+      margin-bottom: 18px;
+    }
+    .hint-icon {
+      color: #7c3aed;
+    }
+    /* ---------- toolbar ---------- */
+    .toolbar {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-bottom: 12px;
+    }
+    .btn {
+      background: #1f1f2e;
+      color: #e5e7eb;
+      border: 1px solid #2d2d3d;
+      border-radius: 6px;
+      padding: 8px 14px;
+      font-size: 13px;
+      cursor: pointer;
+      transition: background 0.15s, border-color 0.15s;
+    }
+    .btn:hover {
+      background: #2a2a3e;
+      border-color: #7c3aed;
+    }
+    .btn-danger:hover {
+      border-color: #ef4444;
+    }
+    .sep {
+      width: 1px;
+      height: 22px;
+      background: #2d2d3d;
+      margin: 0 4px;
+    }
+    /* ---------- meta ---------- */
+    .meta {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+      margin-bottom: 14px;
+    }
+    .pill {
+      background: #181824;
+      border: 1px solid #23232f;
+      border-radius: 999px;
+      padding: 4px 12px;
+      font-size: 12px;
+      color: #b6b6c6;
+    }
+    .empty {
+      padding: 30px;
+      text-align: center;
+      color: #6b6b7b;
+      border: 1px dashed #2d2d3d;
+      border-radius: 8px;
+    }
+    /* ---------- grid ---------- */
+    .grid {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+    .row {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      background: #15151f;
+      border: 1px solid #1f1f2b;
+      border-radius: 6px;
+      padding: 6px 12px;
+      font-size: 13px;
+    }
+    .row-active {
+      border-color: #7c3aed;
+      background: #1a1626;
+    }
+    .row-id {
+      width: 64px;
+      color: #6b6b7b;
+      font-variant-numeric: tabular-nums;
+    }
+    .row-label {
+      width: 90px;
+      font-weight: 600;
+    }
+    .badge {
+      font-size: 11px;
+      font-weight: 600;
+      padding: 2px 8px;
+      border-radius: 999px;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+    }
+    .badge-ok {
+      background: #064e3b;
+      color: #6ee7b7;
+    }
+    .badge-warn {
+      background: #4d3c06;
+      color: #fcd34d;
+    }
+    .badge-error {
+      background: #4c0519;
+      color: #fda4af;
+    }
+    .badge-idle {
+      background: #1f2937;
+      color: #9ca3af;
+    }
+    .star {
+      color: #fbbf24;
+    }
+    .cells {
+      display: flex;
+      gap: 4px;
+      margin-left: auto;
+    }
+    .cell {
+      background: #1f1f2e;
+      border-radius: 4px;
+      padding: 2px 8px;
+      font-size: 12px;
+      color: #b6b6c6;
+      font-variant-numeric: tabular-nums;
+    }
+    .row-value {
+      width: 70px;
+      text-align: right;
+      color: #8b8b9b;
+      font-variant-numeric: tabular-nums;
+    }
+  </style>
+</head>
+<body>
+  <are-root id="app">
+    <perf-app></perf-app>
+  </are-root>
+  <script type="module" src="./{{BUNDLE_ID}}.js"></script>
+</body>
+</html>

package/examples/for-perf/src/components/PerfApp.component.ts ADDED Viewed

@@ -0,0 +1,37 @@
+import { A_Inject } from "@adaas/a-concept";
+import { A_Caller } from "@adaas/a-concept";
+import { Are } from "@adaas/are";
+import { AreNode } from "@adaas/are";
+import { AreStore } from "@adaas/are";
+/**
+ * Application shell. Composes the page out of several child components so the
+ * scene contains "many components" while the heavy $for stress test lives in
+ * <perf-grid>.
+ */
+export class PerfApp extends Are {
+    @Are.Template
+    template(
+        @A_Inject(A_Caller) node: AreNode,
+    ) {
+        node.setContent(`
+            <div class="app">
+                <perf-header></perf-header>
+                <perf-stats></perf-stats>
+                <perf-controls></perf-controls>
+                <perf-grid></perf-grid>
+            </div>
+        `);
+    }
+    @Are.Data
+    data(
+        @A_Inject(AreStore) store: AreStore,
+    ) {
+        store.set({
+            appName: 'ARE $for Performance Lab',
+        });
+    }
+}

package/examples/for-perf/src/components/PerfControls.component.ts ADDED Viewed

@@ -0,0 +1,34 @@
+import { A_Inject } from "@adaas/a-concept";
+import { A_Caller } from "@adaas/a-concept";
+import { Are } from "@adaas/are";
+import { AreNode } from "@adaas/are";
+import { AreStore } from "@adaas/are";
+/**
+ * Static informational strip. Kept presentational so the scene has more
+ * components without competing for the grid's store.
+ */
+export class PerfControls extends Are {
+    @Are.Template
+    template(
+        @A_Inject(A_Caller) node: AreNode,
+    ) {
+        node.setContent(`
+            <section class="hint">
+                <span class="hint-icon">ℹ</span>
+                <span class="hint-text">{{hint}}</span>
+            </section>
+        `);
+    }
+    @Are.Data
+    data(
+        @A_Inject(AreStore) store: AreStore,
+    ) {
+        store.set({
+            hint: 'Each button below mutates the store; the $for directive re-renders synchronously and the timing is logged.',
+        });
+    }
+}

package/examples/for-perf/src/components/PerfGrid.component.ts ADDED Viewed

@@ -0,0 +1,225 @@
+import { A_Inject } from "@adaas/a-concept";
+import { A_Caller } from "@adaas/a-concept";
+import { A_Logger } from "@adaas/a-utils/a-logger";
+import { Are } from "@adaas/are";
+import { AreContext } from "@adaas/are";
+import { AreEvent } from "@adaas/are";
+import { AreNode } from "@adaas/are";
+import { AreStore } from "@adaas/are";
+const STATUSES = ['ok', 'warn', 'error', 'idle'];
+let ROW_SEQ = 0;
+function makeCells(rowId: number): Array<{ id: string; v: number }> {
+    const cells: Array<{ id: string; v: number }> = [];
+    for (let c = 0; c < 4; c++) {
+        cells.push({ id: `${rowId}:${c}`, v: Math.floor(Math.random() * 1000) });
+    }
+    return cells;
+}
+function makeRows(count: number): Array<any> {
+    const rows: Array<any> = [];
+    for (let i = 0; i < count; i++) {
+        const id = ++ROW_SEQ;
+        rows.push({
+            id,
+            label: `Row ${id}`,
+            status: STATUSES[id % STATUSES.length],
+            value: Math.floor(Math.random() * 10000),
+            active: id % 7 === 0,
+            cells: makeCells(id),
+        });
+    }
+    return rows;
+}
+/**
+ * Wraps the store mutation with wall-clock + engine timers and dumps every
+ * captured performance metric to the browser console.
+ */
+function commit(
+    action: string,
+    rows: Array<any>,
+    context: AreContext,
+    store: AreStore,
+    logger: A_Logger,
+) {
+    const label = `$for: ${action}`;
+    console.group(`%c${label}`, 'color:#7c3aed;font-weight:bold');
+    const t0 = performance.now();
+    context.startPerformance(label);
+    // Synchronous: dispatch -> notify -> $for watcher update happens here.
+    store.set('rows', rows);
+    store.set('count', rows.length);
+    context.endPerformance(label);
+    const wall = (performance.now() - t0).toFixed(2);
+    store.set('lastAction', action);
+    store.set('lastWall', wall);
+    logger.debug(`${label} | rows=${rows.length} | wall=${wall}ms`);
+    logger.info(`${label} done in ${wall}ms`, ...context.performance);
+    console.log('%cWall time:', 'font-weight:bold', `${wall} ms`);
+    console.log('%cEngine performance:', 'font-weight:bold');
+    context.performance.forEach((line) => console.log('  ' + line));
+    console.log('%cScene stats:', 'font-weight:bold');
+    context.stats.forEach((line) => console.log('  ' + line));
+    console.groupEnd();
+}
+/**
+ * The heavy component. Holds the action buttons AND the $for grid in a single
+ * store so mutations re-render the directive synchronously, which lets us wrap
+ * each mutation with performance timers and dump the result to the console.
+ *
+ * NOTE: $if and $for are intentionally kept on separate elements.
+ */
+export class PerfGrid extends Are {
+    @Are.Template
+    template(
+        @A_Inject(A_Caller) node: AreNode,
+    ) {
+        node.setContent(`
+            <section class="grid-panel">
+                <div class="toolbar">
+                    <button class="btn" @click="$render(100)">Render 100</button>
+                    <button class="btn" @click="$render(1000)">Render 1000</button>
+                    <button class="btn" @click="$render(5000)">Render 5000</button>
+                    <span class="sep"></span>
+                    <button class="btn" @click="$append(100)">Append 100</button>
+                    <button class="btn" @click="$prepend(100)">Prepend 100</button>
+                    <button class="btn" @click="$shuffle()">Shuffle</button>
+                    <button class="btn" @click="$updateInPlace()">Update in place</button>
+                    <button class="btn btn-danger" @click="$clear()">Clear</button>
+                </div>
+                <div class="meta">
+                    <span class="pill">Rows: {{count}}</span>
+                    <span class="pill">Last action: {{lastAction}}</span>
+                    <span class="pill">Wall time: {{lastWall}} ms</span>
+                </div>
+                <div class="empty" $if="count == 0">No rows. Pick a "Render N" button to start.</div>
+                <div class="grid">
+                    <div class="row" $for="row in rows track row.id" :class="row.active ? 'row-active' : ''">
+                        <span class="row-id">#{{row.id}}</span>
+                        <span class="row-label">{{row.label}}</span>
+                        <span class="badge" :class="'badge-' + row.status">{{row.status}}</span>
+                        <span class="star" $if="row.active">★</span>
+                        <span class="cells">
+                            <span class="cell" $for="cell in row.cells track cell.id">{{cell.v}}</span>
+                        </span>
+                        <span class="row-value">{{row.value}}</span>
+                    </div>
+                </div>
+            </section>
+        `);
+    }
+    @Are.Data
+    data(
+        @A_Inject(AreStore) store: AreStore,
+    ) {
+        const initial = makeRows(25);
+        store.set({
+            rows: initial,
+            count: initial.length,
+            lastAction: 'initial',
+            lastWall: '0.00',
+        });
+    }
+    @Are.EventHandler
+    render(
+        @A_Inject(A_Caller) node: AreNode,
+        @A_Inject(AreEvent) event: AreEvent,
+        @A_Inject(AreContext) context: AreContext,
+        @A_Inject(AreStore) store: AreStore,
+        @A_Inject(A_Logger) logger: A_Logger,
+    ) {
+        const n = Number(event.get('args')?.[0]) || 100;
+        const rows = makeRows(n);
+        commit(`Render ${n}`, rows, context, store, logger);
+    }
+    @Are.EventHandler
+    append(
+        @A_Inject(A_Caller) node: AreNode,
+        @A_Inject(AreEvent) event: AreEvent,
+        @A_Inject(AreContext) context: AreContext,
+        @A_Inject(AreStore) store: AreStore,
+        @A_Inject(A_Logger) logger: A_Logger,
+    ) {
+        const n = Number(event.get('args')?.[0]) || 100;
+        const rows = (store.get('rows') || []).concat(makeRows(n));
+        commit(`Append ${n}`, rows, context, store, logger);
+    }
+    @Are.EventHandler
+    prepend(
+        @A_Inject(A_Caller) node: AreNode,
+        @A_Inject(AreEvent) event: AreEvent,
+        @A_Inject(AreContext) context: AreContext,
+        @A_Inject(AreStore) store: AreStore,
+        @A_Inject(A_Logger) logger: A_Logger,
+    ) {
+        const n = Number(event.get('args')?.[0]) || 100;
+        const rows = makeRows(n).concat(store.get('rows') || []);
+        commit(`Prepend ${n}`, rows, context, store, logger);
+    }
+    @Are.EventHandler
+    shuffle(
+        @A_Inject(A_Caller) node: AreNode,
+        @A_Inject(AreEvent) event: AreEvent,
+        @A_Inject(AreContext) context: AreContext,
+        @A_Inject(AreStore) store: AreStore,
+        @A_Inject(A_Logger) logger: A_Logger,
+    ) {
+        const rows = (store.get('rows') || []).slice();
+        for (let i = rows.length - 1; i > 0; i--) {
+            const j = Math.floor(Math.random() * (i + 1));
+            [rows[i], rows[j]] = [rows[j], rows[i]];
+        }
+        commit('Shuffle', rows, context, store, logger);
+    }
+    @Are.EventHandler
+    updateInPlace(
+        @A_Inject(A_Caller) node: AreNode,
+        @A_Inject(AreEvent) event: AreEvent,
+        @A_Inject(AreContext) context: AreContext,
+        @A_Inject(AreStore) store: AreStore,
+        @A_Inject(A_Logger) logger: A_Logger,
+    ) {
+        const rows = (store.get('rows') || []).map((row: any) => ({
+            ...row,
+            value: Math.floor(Math.random() * 10000),
+            status: STATUSES[Math.floor(Math.random() * STATUSES.length)],
+            cells: makeCells(row.id),
+        }));
+        commit('Update in place', rows, context, store, logger);
+    }
+    @Are.EventHandler
+    clear(
+        @A_Inject(A_Caller) node: AreNode,
+        @A_Inject(AreEvent) event: AreEvent,
+        @A_Inject(AreContext) context: AreContext,
+        @A_Inject(AreStore) store: AreStore,
+        @A_Inject(A_Logger) logger: A_Logger,
+    ) {
+        commit('Clear', [], context, store, logger);
+    }
+}

package/examples/for-perf/src/components/PerfHeader.component.ts ADDED Viewed

@@ -0,0 +1,34 @@
+import { A_Inject } from "@adaas/a-concept";
+import { A_Caller } from "@adaas/a-concept";
+import { Are } from "@adaas/are";
+import { AreNode } from "@adaas/are";
+import { AreStore } from "@adaas/are";
+export class PerfHeader extends Are {
+    @Are.Template
+    template(
+        @A_Inject(A_Caller) node: AreNode,
+    ) {
+        node.setContent(`
+            <header class="header">
+                <div class="brand">
+                    <span class="logo">▦</span>
+                    <span class="title">{{title}}</span>
+                </div>
+                <span class="subtitle">{{subtitle}}</span>
+            </header>
+        `);
+    }
+    @Are.Data
+    data(
+        @A_Inject(AreStore) store: AreStore,
+    ) {
+        store.set({
+            title: 'ARE $for Performance Lab',
+            subtitle: 'Open DevTools console — logger is at debug, perf metrics are printed on every action',
+        });
+    }
+}

package/examples/for-perf/src/components/PerfStats.component.ts ADDED Viewed

@@ -0,0 +1,43 @@
+import { A_Inject } from "@adaas/a-concept";
+import { A_Caller } from "@adaas/a-concept";
+import { Are } from "@adaas/are";
+import { AreNode } from "@adaas/are";
+import { AreStore } from "@adaas/are";
+/**
+ * Presentational cards describing the available scenarios. Uses its own $for
+ * over a small static list so the scene exercises the directive in more than
+ * one place.
+ */
+export class PerfStats extends Are {
+    @Are.Template
+    template(
+        @A_Inject(A_Caller) node: AreNode,
+    ) {
+        node.setContent(`
+            <section class="legend">
+                <div class="legend-card" $for="card in cards track card.key">
+                    <span class="legend-key">{{card.key}}</span>
+                    <span class="legend-label">{{card.label}}</span>
+                </div>
+            </section>
+        `);
+    }
+    @Are.Data
+    data(
+        @A_Inject(AreStore) store: AreStore,
+    ) {
+        store.set({
+            cards: [
+                { key: 'render', label: 'Replace the whole list' },
+                { key: 'append', label: 'Add rows at the end' },
+                { key: 'prepend', label: 'Add rows at the start' },
+                { key: 'shuffle', label: 'Reorder existing rows' },
+                { key: 'update', label: 'Mutate every row in place' },
+            ],
+        });
+    }
+}