lightview 2.4.4 → 2.4.7

package/docs/dom-benchmark.html

@@ -161,9 +161,14 @@
                                 class="btn btn-outline btn-benchmark border-slate-300">Run Raw oDOM</button>
                             <button onclick="runBenchmark('vDOM')"
                                 class="btn btn-outline btn-benchmark border-slate-300">Run Lightview vDOM</button>
+                            <button onclick="runBenchmark('JurisODOM')"
+                                class="btn btn-outline btn-benchmark border-slate-300">Run JurisJS oDOM</button>
                             <button onclick="runBenchmark('TaggedScript')"
                                 class="btn btn-outline btn-benchmark border-slate-300">Run Lightview Tagged
                                 Script</button>
+                            <button onclick="runBenchmark('BauTaggedScript')"
+                                class="btn btn-outline btn-benchmark border-slate-300">Run Bau Tagged
+                                Script</button>
                             <div class="divider"></div>
                             <button onclick="runAll()" class="btn btn-primary text-white">Run All Benchmarks</button>
                             <button onclick="clearTarget()" class="btn btn-ghost">Clear Target</button>
@@ -303,6 +308,31 @@
                         </div>
                     </div>
 
+                    <div class="result-card" id="res-JurisODOM">
+                        <div class="flex justify-between items-start mb-2">
+                            <h3 class="font-bold text-slate-500 uppercase text-xs tracking-widest">JurisJS oDOM</h3>
+                            <div class="flex flex-col items-end gap-1">
+                                <div class="badge badge-outline badge-xs opacity-50"><span class="size">--</span> KB
+                                </div>
+                                <div class="badge badge-accent badge-xs text-white opacity-70"><span
+                                        class="gzip-size">--</span> KB gzip</div>
+                                <div class="badge badge-ghost badge-sm opacity-50">ms</div>
+                            </div>
+                        </div>
+                        <div class="text-3xl font-black text-slate-800 mb-4"><span class="time">--</span></div>
+
+                        <div class="grid grid-cols-4 gap-2 text-[10px] uppercase font-bold text-slate-400 mb-3">
+                            <div>Min <span class="min block text-slate-600">--</span></div>
+                            <div>Avg <span class="avg block text-slate-600">--</span></div>
+                            <div>Max <span class="max block text-slate-600">--</span></div>
+                            <div class="text-right">±SD <span class="std block text-slate-600">--</span></div>
+                        </div>
+
+                        <div class="progress-bar-custom">
+                            <div class="progress-fill" id="fill-JurisODOM"></div>
+                        </div>
+                    </div>
+
                     <div class="result-card" id="res-TaggedScript">
                         <div class="flex justify-between items-start mb-2">
                             <h3 class="font-bold text-slate-500 uppercase text-xs tracking-widest">Lightview Tagged
@@ -328,6 +358,32 @@
                             <div class="progress-fill" id="fill-TaggedScript"></div>
                         </div>
                     </div>
+
+                    <div class="result-card" id="res-BauTaggedScript">
+                        <div class="flex justify-between items-start mb-2">
+                            <h3 class="font-bold text-slate-500 uppercase text-xs tracking-widest">Bau Tagged
+                                Script</h3>
+                            <div class="flex flex-col items-end gap-1">
+                                <div class="badge badge-outline badge-xs opacity-50"><span class="size">--</span> KB
+                                </div>
+                                <div class="badge badge-accent badge-xs text-white opacity-70"><span
+                                        class="gzip-size">--</span> KB gzip</div>
+                                <div class="badge badge-ghost badge-sm opacity-50">ms</div>
+                            </div>
+                        </div>
+                        <div class="text-3xl font-black text-slate-800 mb-4"><span class="time">--</span></div>
+
+                        <div class="grid grid-cols-4 gap-2 text-[10px] uppercase font-bold text-slate-400 mb-3">
+                            <div>Min <span class="min block text-slate-600">--</span></div>
+                            <div>Avg <span class="avg block text-slate-600">--</span></div>
+                            <div>Max <span class="max block text-slate-600">--</span></div>
+                            <div class="text-right">±SD <span class="std block text-slate-600">--</span></div>
+                        </div>
+
+                        <div class="progress-bar-custom">
+                            <div class="progress-fill" id="fill-BauTaggedScript"></div>
+                        </div>
+                    </div>
                 </div>
 
                 <div class="card bg-white shadow-sm border border-slate-200">
@@ -347,6 +403,7 @@
     <!-- Core Libraries -->
     <script src="/lightview.js"></script>
     <script src="/lightview-x.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/juris@0.9.0/juris.min.js"></script>
 
     <script>
         function generateHTML(count) {
@@ -468,6 +525,55 @@
             return el;
         }
 
+        function odomToDOM_Juris(onode) {
+            if (typeof onode !== 'object' || onode === null) {
+                return document.createTextNode(onode);
+            }
+
+            // Create a temporary container for Juris to render into
+            const tempContainer = document.createElement('div');
+
+            // Temporarily disable all console methods to prevent Juris logging from affecting benchmark
+            const originalConsole = {
+                log: console.log,
+                dir: console.dir,
+                warn: console.warn,
+                error: console.error,
+                info: console.info,
+                debug: console.debug
+            };
+            const noop = () => { };
+            console.log = noop;
+            console.dir = noop;
+            console.warn = noop;
+            console.error = noop;
+            console.info = noop;
+            console.debug = noop;
+
+            try {
+                // Create a Juris instance with the oDOM structure as the layout
+                const jurisInstance = new Juris({
+                    debug: false,  // Disable logging for performance
+                    layout: onode
+                });
+
+                // Render to the temporary container
+                jurisInstance.render(tempContainer);
+            } finally {
+                // Restore original console methods
+                console.log = originalConsole.log;
+                console.dir = originalConsole.dir;
+                console.warn = originalConsole.warn;
+                console.error = originalConsole.error;
+                console.info = originalConsole.info;
+                console.debug = originalConsole.debug;
+            }
+
+            // Return the first child (the actual rendered content)
+            return tempContainer.firstChild || tempContainer;
+        }
+
+
         async function getGzipSize(str) {
             try {
                 const stream = new Blob([str]).stream();
@@ -518,7 +624,7 @@
         function clearTarget() {
             target.replaceChildren();
             target.innerHTML = '<div class="p-8 text-center text-slate-400 italic">Target is empty.</div>';
-            ['innerHTML', 'DOMParser', 'vDOM', 'RawVDOM', 'RawoDOM', 'TaggedScript'].forEach(id => {
+            ['innerHTML', 'DOMParser', 'vDOM', 'RawVDOM', 'RawoDOM', 'JurisODOM', 'TaggedScript', 'BauTaggedScript'].forEach(id => {
                 const card = document.getElementById(`res-${id}`);
                 card.classList.remove('active');
                 card.querySelector('.time').innerText = '--';
@@ -568,6 +674,12 @@
                 const domEl = odomToDOM(json);
                 target.replaceChildren(domEl);
                 time = performance.now() - start;
+            } else if (type === 'JurisODOM') {
+                const start = performance.now();
+                const json = JSON.parse(data);
+                const domEl = odomToDOM_Juris(json);
+                target.replaceChildren(domEl);
+                time = performance.now() - start;
             } else if (type === 'TaggedScript') {
                 const existing = document.getElementById('tagged-script-tag');
                 if (existing) existing.remove();
@@ -580,6 +692,19 @@
                     document.body.appendChild(script);
                 });
                 time = window.__taggedBenchmarkTime;
+            } else if (type === 'BauTaggedScript') {
+                const existing = document.getElementById('bau-tagged-script-tag');
+                if (existing) existing.remove();
+
+                await new Promise(resolve => {
+                    window.__resolveBauTaggedBenchmark = resolve;
+                    const script = document.createElement('script');
+                    script.type = 'module';
+                    script.id = 'bau-tagged-script-tag';
+                    script.src = `./benchmarks/bau-tagged-fragment.js?count=${count}&t=${Date.now()}`;
+                    document.body.appendChild(script);
+                });
+                time = window.__bauTaggedBenchmarkTime;
             }
             return time;
         }
@@ -592,10 +717,10 @@
             let data = preGeneratedData;
 
             // 1. Preparation phase (outside of timing)
-            if (!data && type !== 'TaggedScript') {
+            if (!data && type !== 'TaggedScript' && type !== 'BauTaggedScript') {
                 if (type === 'innerHTML' || type === 'DOMParser') data = generateHTML(count);
                 if (type === 'vDOM' || type === 'RawVDOM') data = generateVDOM(count);
-                if (type === 'RawoDOM') data = generateODOM(count);
+                if (type === 'RawoDOM' || type === 'JurisODOM') data = generateODOM(count);
             }
 
             console.log(`Starting ${cycles} cycles for ${type}...`);
@@ -628,7 +753,9 @@
                 { id: 'RawVDOM', data: vdomData },
                 { id: 'RawoDOM', data: odomData },
                 { id: 'vDOM', data: vdomData },
-                { id: 'TaggedScript', data: null }
+                { id: 'JurisODOM', data: odomData },
+                { id: 'TaggedScript', data: null },
+                { id: 'BauTaggedScript', data: null }
             ];
 
             for (const config of configs) {

package/docs/getting-started/index.html

@@ -15,6 +15,7 @@
             <button class="btn btn-secondary step-btn" onclick="switchStep(4)">4. Hypermedia</button>
             <button class="btn btn-secondary step-btn" onclick="switchStep(5)">5. Components</button>
             <button class="btn btn-secondary step-btn" onclick="switchStep(6)">6. Gating</button>
+            <button class="btn btn-secondary step-btn" onclick="switchStep(7)">7. cDOM</button>
         </div>
 
         <!-- Tutorial Layout: Preview on top, Code & Concepts below -->
@@ -679,6 +680,45 @@ $('#app').content(App);`,
                     <li style="margin-bottom: 0.75rem;"><strong>Write your own</strong> — Write your own functions and add the to <code>globalThis</code> to make them available to all templates. They have access to <code>this</code> (the element) and can accept arguments like <code>event</code>.</li>
                 </ul>
                 <p><strong>Try it:</strong> Click the Spam Me button rapidly, or type quickly into the search box to see the limiters in action!</p>`
+            },
+            7: {
+                options: {
+                    autoRun: true
+                },
+                code: `// STEP 7: cDOM - Compressed DOM & JPRX
+await import('/lightview-cdom.js');
+const { parseJPRX, hydrate } = globalThis.LightviewCDOM;
+const { $ } = Lightview;
+
+const cdomString = \`{
+    div: {
+        onmount: =signal(0,"count"),        
+        children: [
+            { h3: ["Standard JPRX Counter"] },
+            { p: { children: ["Count: ", =/count] }},
+            { div: { children: [
+                { button: { onclick: =decrement(/count), children: ["-"] } },
+                { button: { onclick: =/count++, children: ["+"] } }
+            ]}}
+        ]
+    }
+}\`;
+
+const hydrated = hydrate(parseJPRX(cdomString));
+$('#app').content(hydrated);`,
+                concepts: `
+                <h3 style="margin-top: 0; color: var(--site-primary);">Step 7: cDOM & JPRX</h3>
+                <p><strong><a href="/docs/cdom.html">cDOM</a></strong> (compressed DOM) combined with <strong><a href="/docs/cdom.html#JPRX">JPRX</a></strong> (JSON Path Reactive eXpressions) allows you to define entire reactive UIs as pure JSON-compatible strings.</p>
+                
+                <h4>Key Concepts:</h4>
+                <ul style="padding-left: 1.25rem; color: var(--site-text-secondary);">
+                    <li style="margin-bottom: 0.75rem;"><strong>Portability</strong> — Since the UI is a string, it can be easily stored in databases, sent over the wire, or generated by an LLM without security risks of <code>eval()</code>.</li>
+                    <li style="margin-bottom: 0.75rem;"><strong>JPRX Expressions</strong> — Use <code>=</code> to denote reactive expressions within the string. For example, <code>=/count</code> binds to a signal.</li>
+                    <li style="margin-bottom: 0.75rem;"><strong>Flexible Syntax</strong> — Operators and helpers can be called as functions (<code>=decrement(/count)</code>) or using prefix (<code>=--/count</code>), infix (<code>=/count - 1</code>), or postfix (<code>=/count--</code>) notation.</li>
+                    <li style="margin-bottom: 0.75rem;"><strong>Hydration</strong> — <code>hydrate()</code> turns the parsed JPRX into a live, reactive DOM tree.</li>
+                </ul>
+                <p><strong>Try it:</strong> Edit the <code>cdomString</code> to change the labels or add new elements!</p>
+            `
             }
         };
 

package/docs/index.html

@@ -11,7 +11,7 @@
             More power. Less energy.
             <br>
             <a id="link-hero-ai-safe" href="#ai-safe"
-                style="color: var(--site-primary); font-size: 1.25rem; font-weight: 700; text-decoration: none; display: inline-block; margin-top: 0.5rem; border-bottom: 2px solid var(--site-primary); padding-bottom: 2px;">AI
+                style="color: var(--site-primary); font-size: 1.25rem; font-weight: 700; text-decoration: none; display: inline-block; margin-top: 0.25rem; border-bottom: 2px solid var(--site-primary); padding-bottom: 2px;">AI
                 Safe</a>
         </p>
         <div class="hero-actions">
@@ -23,12 +23,15 @@
                 <div class="hero-stat-label">Build Steps</div>
             </div>
             <div class="hero-stat">
-                <div class="hero-stat-value">4</div>
+                <div class="hero-stat-value"><a id="link-hero-ways-to-build"
+                        href="http://localhost:3000/docs/api/elements"
+                        style="color: inherit; text-decoration: none;">5</a></div>
                 <div class="hero-stat-label">Ways to Build</div>
             </div>
             <div class="hero-stat">
                 <div class="hero-stat-value">40+</div>
-                <div class="hero-stat-label">Components</div>
+                <div class="hero-stat-label"><a id="link-hero-components" href="http://localhost:3000/docs/components/"
+                        style="color: inherit; text-decoration: none;">Components</a></div>
             </div>
         </div>
     </div>
@@ -38,79 +41,84 @@
 <section class="section">
     <div class="section-content">
         <div class="section-header">
-            <h2 class="section-title">Heavy? Not Our Thing.</h2>
-            <p class="section-subtitle">
-                Have fun, stay light.
-            </p>
+            <h2 class="section-title">Why Lightview</h2>
         </div>
         <div class="feature-grid">
-            <div class="feature-card">
+            <a id="link-feature-signals" href="./api/signals.html" class="feature-card">
                 <div class="feature-icon">
                     <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
                         <circle cx="12" cy="12" r="10" />
                         <path d="M12 6v6l4 2" />
                     </svg>
                 </div>
-                <h3><a id="link-feature-signals" href="./api/signals.html" class="feature-title">Signals and Object
-                        State Reactivity</a></h3>
+                <h3 class="feature-title">Signals and Object State Reactivity</h3>
                 <p class="feature-description">
-                    Fine-grained reactivity with signals and obejct state. Updates propagate automatically—no virtual
-                    DOM diffing needed. As a bonus, session and local storage are also supported.
+                    Fine-grained reactivity with signals and object state. Updates propagate automatically—no virtual
+                    DOM diffing needed. Arrays and Dates are directly reactive without destructing or copying. As a
+                    bonus, session and local storage are also supported.
                 </p>
-            </div>
-            <div class="feature-card">
+            </a>
+            <a id="link-feature-elements" href="./api/elements.html" class="feature-card">
                 <div class="feature-icon">
                     <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
                         <rect x="3" y="3" width="18" height="18" rx="2" />
                         <path d="M3 9h18M9 21V9" />
                     </svg>
                 </div>
-                <h3><a id="link-feature-elements" href="./api/elements.html" class="feature-title">Multiple Syntaxes</a>
-                </h3>
+                <h3 class="feature-title">Multiple Syntaxes</h3>
                 <p class="feature-description">
                     Tagged API, vDOM, Object DOM, HTML. Pick your style—they all work together.
                 </p>
-            </div>
-            <div class="feature-card">
+            </a>
+            <a id="link-feature-hypermedia" href="/docs/hypermedia/" class="feature-card">
                 <div class="feature-icon">
                     <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
                         <path
                             d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.66 0 3-4 3-9s-1.34-9-3-9m0 18c-1.66 0-3-4-3-9s1.34-9 3-9" />
                     </svg>
                 </div>
-                <h3><a id="link-feature-hypermedia" href="/docs/hypermedia/" class="feature-title">Hypermedia
-                        Ready</a></h3>
+                <h3 class="feature-title">Hypermedia Ready</h3>
                 <p class="feature-description">
                     Fetch HTML, vDOM, or Object DOM with the <code>src</code> attribute. HTMX-like patterns for
                     <code>src</code> and <code>href</code> built right
                     in.
                 </p>
-            </div>
-            <div class="feature-card">
+            </a>
+            <a id="link-feature-components" href="./components/index.html" class="feature-card">
                 <div class="feature-icon">
                     <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
                         <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
                     </svg>
                 </div>
-                <h3><a id="link-feature-components" href="./components/index.html" class="feature-title">Component
-                        Library</a></h3>
+                <h3 class="feature-title">Component Library</h3>
                 <p class="feature-description">
                     Beautiful, accessible components ready to use. Buttons, modals, forms, charts, and more.
                 </p>
-            </div>
-            <div class="feature-card">
+            </a>
+            <a id="link-feature-zerobuild" href="./getting-started/index.html" class="feature-card">
                 <div class="feature-icon">
                     <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
                         <path
                             d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z" />
                     </svg>
                 </div>
-                <h3><a id="link-feature-zerobuild" href="./getting-started/index.html" class="feature-title">Zero Build
-                        Step</a></h3>
+                <h3 class="feature-title">Zero Build Step</h3>
                 <p class="feature-description">
                     No bundler required. Drop in a script tag and start building. Works everywhere.
                 </p>
-            </div>
+            </a>
+            <a id="link-feature-aisafe" href="#ai-safe" class="feature-card">
+                <div class="feature-icon">
+                    <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+                    </svg>
+                </div>
+                <h3 class="feature-title">AI Safe</h3>
+                <p class="feature-description">
+                    Build reactive UIs with pure JSON or JSON like data. No eval(), no risky code generation. Safe for
+                    AI agents.
+                </p>
+            </a>
 
         </div>
     </div>
@@ -150,7 +158,8 @@
                     <h3 style="color: white; font-size: 1.5rem; margin-bottom: 1rem;">Execution Safety</h3>
                     <p style="color: rgba(255, 255, 255, 0.75); line-height: 1.6;">AI-generated UIs usually require
                         risky JavaScript strings. cDOM creates reactive interfaces using <strong>pure JSON
-                            data</strong> and <a id="link-ai-safe-cdom-helpers" href="/docs/cdom.html#helpers"
+                            or JSON like data</strong> and <a id="link-ai-safe-cdom-helpers"
+                            href="/docs/cdom.html#helpers"
                             style="color: #a78bfa; text-decoration: underline; font-weight: 600;">over 50 built-in
                             functions</a> that bring spreadsheet-like
                         functionality to the DOM. No <code>eval()</code>, no <code>new Function()</code>, and <strong>no
@@ -223,7 +232,7 @@
 <section class="section">
     <div class="section-content">
         <div class="section-header">
-            <h2 class="section-title">Heavy, Complex Frameworks? Lighten Up.</h2>
+            <h2 class="section-title">Lighten Up.</h2>
             <p class="section-subtitle">
                 Get started in minutes. No npm install. No webpack or vite build process. Just code.
             </p>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lightview",
-  "version": "2.4.4",
-  "description": "An reactive UI library with features of Bau, Juris, and HTMX plus safe LLM UI generation",
+  "version": "2.4.7",
+  "description": "A reactive UI library with features of Bau, Juris, and HTMX plus safe LLM UI generation",
   "main": "lightview.js",
   "workspaces": [
     "jprx"