lightview 2.0.1 → 2.0.3

package/README.md

@@ -1,26 +1,23 @@
-<!-- SEO-friendly SPA Shim -->
-<script src="./lightview-router.js"></script>
-<script>
-    if (window.LightviewRouter) {
-        LightviewRouter.base('index.html');
-    }
-</script>
+
 # Lightview: README.md
 
 A lightweight reactive UI library with signal-based reactivity and a clean API. Build dynamic UIs with automatic DOM synchronization.
 
-Access the full documentaion at [lightview.dev](/index.html).
+Access the full documentaion at [lightview.dev](https://lightview.dev).
+
+This NPM package is both the library and the website supporting the library. The website is built using Lightview. The core library files are in the root directory. The Website entry point is index.html and the restr of the site is under ./docs. The site is served by a Cloudflare pages deployment.
 
-**Core**: ~6KB | **With Hypermedia Extensions and Component Library Support**: ~18KB total
+**Core**: ~8KB | **With Hypermedia Extensions and Component Library Support**: ~18KB total
 
-Fast: This [gallery of components](/docs/components) loads in about 1 second: 
+Fast: This [gallery of components](https://lightview.dev/docs/components/) loads in about 1 second: 
 
 ## Modular Architecture
 
-Lightview is split into two files:
+Lightview is split into three files:
 
 - **`lightview.js`** - Core reactivity (signals, state, effects, elements)
 - **`lightview-x.js`** - Hypermedia extension (src fetching, href navigation, template literals, named registries, Object DOM syntax, UI component library support)
+- **`lightview-router.js`** - Router (src fetching, href navigation, template literals, named registries, Object DOM syntax, UI component library support)
 
 ### API Behavior
 
@@ -49,6 +46,11 @@ Lightview is split into two files:
 <!-- Full features (hypermedia + templates) -->
 <script src="lightview.js"></script>
 <script src="lightview-x.js"></script>
+
+<!-- Full features (hypermedia + templates + router) -->
+<script src="lightview.js"></script>
+<script src="lightview-x.js"></script>
+<script src="lightview-router.js"></script>
 ```
 
 ## Core Concepts
@@ -56,11 +58,11 @@ Lightview is split into two files:
 **Lightview** provides four ways to build UIs:
 
 1. **Tagged API** - Concise, Bau.js-style syntax: `tags.div(...)`
-2. **Element Function** - Explicit: `element('div', {}, [...])`
-3. **vDOM Syntax** - JSON data structures: `{ tag: "div", attributes: {}, children: [] }`
-4. **Object DOM Syntax** *(lightview-x)* - Compact: `{ div: { class: "foo", children: [] } }`
+2. **vDOM Syntax** - JSON data structures: `{ tag: "div", attributes: {}, children: [] }`
+3. **Object DOM Syntax** *(lightview-x)* - Compact: `{ div: { class: "foo", children: [] } }`
+4. **HTML** *(lightview-x)* - Custom HTML elements.
 
-All four approaches use the same underlying reactive system based on **signals**.
+All four approaches use the same underlying reactive system based on **signals** and **state**.
 
 ## Installation
 
@@ -91,25 +93,7 @@ const app = div({ class: 'container' },
 document.body.appendChild(app.domEl);
 ```
 
-### Style 2: Element Function
-
-```javascript
-const { signal, element } = new Lightview();
-
-const count = signal(0);
-
-const app = element('div', { class: 'container' }, [
-  element('h1', {}, ['Counter App']),
-  element('p', {}, [() => `Count: ${count.value}`]),
-  element('button', { 
-    onclick: () => count.value++ 
-  }, ['Increment'])
-]);
-
-document.body.appendChild(app.domEl);
-```
-
-### Style 3: vDOM Syntax (Plain JSON)
+### Style 2: vDOM Syntax (Plain JSON)
 
 ```javascript
 const { signal, element } = new Lightview();
@@ -138,7 +122,7 @@ const app = element('div', { class: 'container' }, [
 document.body.appendChild(app.domEl);
 ```
 
-### Style 4: Object DOM Syntax (lightview-x)
+### Style 3: Object DOM Syntax (lightview-x)
 
 Object DOM syntax provides a more compact way to define elements. Instead of `{ tag, attributes, children }`, you use `{ tag: { ...attributes, children } }`.
 

package/docs/getting-started/index.html

@@ -142,7 +142,7 @@ const { tags, $ } = Lightview;
 const { div, h1, p, style } = tags;
 
 // 1. Build UI using Tagged Functions
-// These functions return standard DOM elements
+// These functions return Lightview elements (access raw DOM via .domEl)
 const App = div({ class: 'hero' },
     h1('Welcome to Lightview'),
     p('Lightview is a tiny library for building modern web interfaces.')
@@ -171,11 +171,11 @@ $('#app').content(style({}, \`
                 
                 <h4>Key Concepts:</h4>
                 <ul style="padding-left: 1.25rem; color: var(--site-text-secondary);">
-                    <li style="margin-bottom: 0.75rem;"><code>tags</code> — Every HTML tag is available as a function. <code>div(...)</code> returns a real <code>HTMLDivElement</code>.</li>
+                    <li style="margin-bottom: 0.75rem;"><code>tags</code> — Every HTML tag is available as a function. <code>div(...)</code> returns a virtual proxy; the real DOM element is accessible via <code>.domEl</code>.</li>
                     <li style="margin-bottom: 0.75rem;"><code>$(selector)</code> — A powerful utility for selecting elements and manipulating them.</li>
-                    <li style="margin-bottom: 0.75rem;"><code>.content(node, location)</code> — Replaces or appends content. Locations like <code>'beforeend'</code> allow injecting styles or scripts dynamicly.</li>
+                    <li style="margin-bottom: 0.75rem;"><code>.content(node, location)</code> — Replaces or appends content. It automatically unboxes <code>.domEl</code> for you.</li>
                 </ul>
-                <p>This approach results in standard, lightweight DOM elements with no overhead.</p>
+                <p>Lightview elements are thin proxies over standard DOM elements, providing reactivity with minimal overhead.</p>
             `
             },
             2: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lightview",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "description": "A lightweight reactive UI library with features of Bau, Juris, and HTMX",
   "main": "lightview.js",
   "directories": {