lightview 2.2.2 → 2.3.5

package/docs/about.html

@@ -38,15 +38,15 @@
             something that felt more like regular HTML than even HTMX does.
             This would also require thorough and fully interactive documentation accessible via direct URLs and an SPA
             like experience.
-            This manadated a router with at least partial "automatic" SSR—where code could execute and replace itself on
+            This mandated a router with at least partial "automatic" SSR—where code could execute and replace itself on
             the server with a simple
-            DOM emulation and "have-your-cake-and-eat-it-too" single page apps that are SEO enabled without any extra
+            DOM emulation and "have-your-cake-and-eat-it-too" single page apps that are SEO-enabled without any extra
             work.
         </p>
 
         <p>
-            In today's age, the ability of an LLM to generate cohensive applications using the library is also important
-            to me. If figured that if an LLM generated it and it followed conventional patterns, it will be able to use
+            In today's age, the ability of an LLM to generate cohesive applications using the library is also important
+            to me. I figured that if an LLM generated it and it followed conventional patterns, it will be able to use
             it well and perhaps generate a little less slop.
         </p>
 
@@ -55,8 +55,8 @@
             combo of HTMX, Bau, and
             Juris with no special attribute names plus HTML template literals, and an SPA router. And, give me a UI
             component library like
-            Bau's with automatic custom elment creation but don't build it from scratch. Finally, make it possible to
-            create SEO enabled apps with no extra work" I also provied a few examples of the kind of code I wanted to
+            Bau's with automatic custom element creation but don't build it from scratch. Finally, make it possible to
+            create SEO-enabled apps with no extra work." I also provided a few examples of the kind of code I wanted to
             write
             using the library.
         </p>
@@ -64,16 +64,19 @@
         <p>
             Naturally, it took a little iterating, but the basic framework was in place after just a few hours of
             working with both Claude Opus 4.5 and Gemini 3 Pro. I then asked for
-            an extensive interactive website for documenting and promoting Lightview that also used Lightview, despsite
+            an extensive interactive website for documenting and promoting Lightview that also used Lightview, despite
             the fact that in the age of LLM code generation the need for extensive documentation websites is limited.
             This took a lot more work, 3
-            weeks in fact. Very little of this time was spent addressing issues with or enhancing Ligntview. Most of it
-            was spent adding, debugginng and testing all the UI components. The LLM would get locked in on a particular
-            approach that worked form simple components bu no more complex ones.
-            But, that is a story for another time. Here we are 3 weeks later with about 2,000 lines of code for
+            weeks in fact. Very little of this time was spent addressing issues with or enhancing Lightview. Most of it
+            was spent adding, debugging, and testing all the UI components. The LLM would get locked in on a particular
+            approach that worked for simple components but not more complex ones.
+            But, that is a story for another time. So, 3 weeks later I had about 2,000 lines of code for
             Lightview
             as a whole across three
-            files, 25,000 lines of component code, and 30,000 lines of documentation.
+            files, 25,000 lines of component code, and 30,000 lines of documentation. Lightview has grown a lot since
+            then! You can see my article about initial development after week 4 on <a
+                href="https://hackernoon.com/lightview-a-lightweight-javascript-framework-for-building-single-page-applications-1768144869105"
+                target="_blank">Hackernoon</a>.
         </p>
 
         <p>

package/docs/api/computed.html

@@ -2,7 +2,7 @@
 <script src="/lightview-router.js?base=/index.html"></script>
 
 <div class="docs-layout">
-    <aside class="docs-sidebar" src="./nav.html"></aside>
+    <aside class="docs-sidebar" src="./nav.html" data-preserve-scroll="docs-nav"></aside>
 
     <main class="docs-content">
         <h1>Computed</h1>

package/docs/api/effects.html

@@ -1,7 +1,7 @@
 <!-- SEO-friendly SPA Shim -->
 <script src="/lightview-router.js?base=/index.html"></script>
 <div class="docs-layout">
-    <aside class="docs-sidebar" src="./nav.html"></aside>
+    <aside class="docs-sidebar" src="./nav.html" data-preserve-scroll="docs-nav"></aside>
     <main class="docs-content">
         <h1>Effects</h1>
         <p>

package/docs/api/elements.html

@@ -4,7 +4,7 @@
 <link rel="stylesheet" href="../components/index.css">
 
 <div class="docs-layout">
-    <aside class="docs-sidebar" src="./nav.html"></aside>
+    <aside class="docs-sidebar" src="./nav.html" data-preserve-scroll="docs-nav"></aside>
 
     <main class="docs-content">
         <h1>Elements</h1>
@@ -119,9 +119,58 @@ $('#example').content(app);</code></pre>
 
         <h2 id="object-dom">Object DOM (oDOM)</h2>
         <p>
-            A more compact JSON representation provided by <strong>Lightview X</strong>. It uses the tag name as a key
-            to reduce verbosity.
+            A more compact JSON representation provided by <strong>Lightview X</strong>. In oDOM, an object with a
+            <strong>single key</strong> and an <strong>object value</strong> represents an element. The key is the
+            <strong>tag name</strong> (e.g., <code>"div"</code>, <code>"span"</code>) or a <strong>custom element
+                function name</strong>. The value object contains the element's attributes.
         </p>
+
+        <h3>Reserved Keys</h3>
+        <p>
+            Certain keys on the value object are reserved and have special meaning instead of being treated as
+            attributes:
+        </p>
+        <table class="api-table">
+            <thead>
+                <tr>
+                    <th>Key</th>
+                    <th>Purpose</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td><code>children</code></td>
+                    <td>An array of child elements, strings, or reactive functions.</td>
+                </tr>
+                <tr>
+                    <td><code>attributes</code></td>
+                    <td>An explicit attributes object (not needed in oDOM since non-reserved keys are attributes). If
+                        you use this attribute, Lighview MAY assume you are trying to use vDOM not oDOM. Avoid its use
+                        except for vDOM.
+                    </td>
+                </tr>
+                <tr>
+                    <td><code>tag</code></td>
+                    <td>Explicitly sets the tag name. If you use this attribute, Lighview MAY assume you are trying to
+                        use vDOM not oDOM. Avoid its use except for vDOM.</td>
+                </tr>
+            </tbody>
+        </table>
+        <p>
+            All other keys on the value object are treated as <strong>attribute names</strong>. Keys starting with
+            <code>on</code> (like <code>onclick</code>, <code>onmouseenter</code>) are bound as event handlers.
+        </p>
+
+        <h3>Array Shorthand</h3>
+        <p>
+            If a tag key has an <strong>array</strong> as its value instead of an object, it is shorthand for
+            <code>{ &lt;key&gt;: { children: &lt;array&gt; } }</code>:
+        </p>
+        <pre><code>// These are equivalent:
+{ ul: [{ li: ['Item 1'] }, { li: ['Item 2'] }] }
+{ ul: { children: [{ li: { children: ['Item 1'] } }, { li: { children: ['Item 2'] } }] } }</code></pre>
+
+        <h3>Example</h3>
         <div id="syntax-object">
             <pre><script>
                 examplify(document.currentScript.nextElementSibling, {
@@ -134,7 +183,7 @@ $('#example').content(app);</code></pre>
             </script><code contenteditable="true">const { signal, tags, $ } = Lightview;
 const count = signal(0);
 const app = { div: { class: 'container', children: [
-    { h1: { children: ['Hello Lightview'] } },
+    { h1: ['Hello Lightview'] },
     { p: { children: [() => `Count: ${count.value}`] } },
     { button: { onclick: () => count.value++, children: ['Click me'] } }
 ]}};
@@ -197,27 +246,9 @@ const greeting = div(
 );
 // Initial result: <div>Hello, John Doe !</div></code></pre>
 
-        <h2 id="attributes-events">Attributes & Events</h2>
-        <p>
-            Pass attributes as the first argument (Tagged API) or in the attributes object (others):
-        </p>
-        <pre><code>// Standard attributes
-div({ 
-    id: 'my-div',
-    class: 'container active',
-    style: 'color: red;',
-    'data-value': '42'
-})
-
-// Reactive attributes - use functions!
-div({
-    class: () => isActive.value ? 'active' : 'inactive',
-    style: () => `opacity: ${visible.value ? 1 : 0}`,
-    disabled: () => isLoading.value
-})
-
-// Event handlers - use "on" prefix
-button({
+        <h2 id="attributes-events">Events</h2>
+        <p>Use standard event handlers prefixed with "on".</p>
+        <pre><code>button({
     onclick: (e) => handleClick(e),
     onmouseenter: () => setHovered(true),
     onmouseleave: () => setHovered(false)

package/docs/api/enhance.html

@@ -4,7 +4,7 @@
 <link rel="stylesheet" href="../components/index.css">
 
 <div class="docs-layout">
-    <aside class="docs-sidebar" src="./nav.html"></aside>
+    <aside class="docs-sidebar" src="./nav.html" data-preserve-scroll="docs-nav"></aside>
 
     <main class="docs-content">
         <h1>Enhance</h1>

package/docs/api/hypermedia.html

@@ -2,7 +2,7 @@
 <script src="/lightview-router.js?base=/index.html"></script>
 
 <div class="docs-layout">
-    <aside class="docs-sidebar" src="./nav.html"></aside>
+    <aside class="docs-sidebar" src="./nav.html" data-preserve-scroll="docs-nav"></aside>
 
     <main class="docs-content">
         <h1>Hypermedia</h1>

package/docs/api/index.html

@@ -4,7 +4,7 @@
 </script>
 
 <div class="docs-layout">
-    <aside class="docs-sidebar" src="./nav.html"></aside>
+    <aside class="docs-sidebar" src="./nav.html" data-preserve-scroll="docs-nav"></aside>
 
     <main class="docs-content">
         <h1>API Reference</h1>

package/docs/api/nav.html

@@ -1,4 +1,4 @@
-<nav class="docs-nav">
+<nav data-preserve-scroll="docs-nav" class="docs-nav">
     <div class="docs-nav-section">
         <div class="docs-nav-title">Elements</div>
         <a href="./elements.html" class="docs-nav-link">Comparison</a>
@@ -13,7 +13,7 @@
                 <a href="./elements.html#text" class="docs-nav-link" style="font-size: 0.85em;">text</a>
             </div>
         </div>
-        <a href="./elements.html#attributes-events" class="docs-nav-link">Attributes & Events</a>
+        <a href="./elements.html#attributes-events" class="docs-nav-link">Events</a>
         <a href="./elements.html#children" class="docs-nav-link">Children</a>
         <a href="./elements.html#dom-el" class="docs-nav-link">The domEl Property</a>
     </div>
@@ -28,7 +28,32 @@
     </div>
     <div class="docs-nav-section">
         <div class="docs-nav-title">Lightview X</div>
-        <a href="./state.html" class="docs-nav-link">State (Deep Reactivity)</a>
+        <div class="docs-nav-item">
+            <a href="./state.html" class="docs-nav-link">State (Deep Reactivity)</a>
+            <div class="docs-nav-subsection" style="margin-left: 1rem; border-left: 1px solid var(--site-border);">
+                <a href="./state.html#shortcomings" class="docs-nav-link" style="font-size: 0.85em;">Shortcomings of
+                    Signals</a>
+                <a href="./state.html#state-to-the-rescue" class="docs-nav-link" style="font-size: 0.85em;">State to the
+                    Rescue</a>
+                <a href="./state.html#state-function" class="docs-nav-link" style="font-size: 0.85em;">State
+                    Function</a>
+                <a href="./state.html#nested-objects" class="docs-nav-link" style="font-size: 0.85em;">Nested
+                    Objects</a>
+                <a href="./state.html#in-the-ui" class="docs-nav-link" style="font-size: 0.85em;">In the UI</a>
+                <a href="./state.html#array-methods" class="docs-nav-link" style="font-size: 0.85em;">Array Methods</a>
+                <a href="./state.html#date-methods" class="docs-nav-link" style="font-size: 0.85em;">Date Methods</a>
+                <a href="./state.html#named-state" class="docs-nav-link" style="font-size: 0.85em;">Named State</a>
+                <a href="./state.html#stored-state" class="docs-nav-link" style="font-size: 0.85em;">Stored State</a>
+                <a href="./state.html#schema-validation" class="docs-nav-link" style="font-size: 0.85em;">Schema
+                    Validation</a>
+                <a href="./state.html#json-schema-lite" class="docs-nav-link" style="font-size: 0.85em;">JSON Schema
+                    Lite</a>
+                <a href="./state.html#transformations" class="docs-nav-link"
+                    style="font-size: 0.85em;">Transformations</a>
+                <a href="./state.html#lite-vs-full" class="docs-nav-link" style="font-size: 0.85em;">Lite vs. Full
+                    Validators</a>
+            </div>
+        </div>
         <div class="docs-nav-item">
             <a href="./hypermedia.html" class="docs-nav-link">Hypermedia</a>
             <div class="docs-nav-subsection" style="margin-left: 1rem; border-left: 1px solid var(--site-border);">

package/docs/api/signals.html

@@ -2,7 +2,7 @@
 <script src="/lightview-router.js?base=/index.html"></script>
 
 <div class="docs-layout">
-    <aside class="docs-sidebar" src="./nav.html"></aside>
+    <aside class="docs-sidebar" src="./nav.html" data-preserve-scroll="docs-nav"></aside>
 
     <main class="docs-content">
         <h1>Signals</h1>