lightview 2.1.0 → 2.2.2

package/src/lightview-x.js

@@ -92,7 +92,7 @@ const convertObjectDOM = (obj) => {
 // ============= COMPONENT CONFIGURATION =============
 // Global configuration for Lightview components
 
-const DAISYUI_CDN = 'https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css';
+const DAISYUI_CDN = 'https://cdn.jsdelivr.net/npm/daisyui@4.12.23/dist/full.min.css';
 
 // Component configuration (set by initComponents)
 const componentConfig = {
@@ -101,7 +101,8 @@ const componentConfig = {
     daisyStyleSheet: null,
     themeStyleSheet: null, // Global theme stylesheet
     componentStyleSheets: new Map(),
-    customStyleSheets: new Map() // Registry for named custom stylesheets
+    customStyleSheets: new Map(), // Registry for named custom stylesheets
+    customStyleSheetPromises: new Map() // Cache for pending stylesheet fetches
 };
 
 /**
@@ -111,36 +112,45 @@ const componentConfig = {
  * @returns {Promise<void>}
  */
 const registerStyleSheet = async (nameOrIdOrUrl, cssText) => {
-    if (componentConfig.customStyleSheets.has(nameOrIdOrUrl)) return;
+    if (componentConfig.customStyleSheets.has(nameOrIdOrUrl)) return componentConfig.customStyleSheets.get(nameOrIdOrUrl);
+    if (componentConfig.customStyleSheetPromises.has(nameOrIdOrUrl)) return componentConfig.customStyleSheetPromises.get(nameOrIdOrUrl);
 
-    try {
-        let finalCss = cssText;
-
-        if (finalCss === undefined) {
-            if (nameOrIdOrUrl.startsWith('#')) {
-                // ID selector - search synchronously
-                const el = document.querySelector(nameOrIdOrUrl);
-                if (el) {
-                    finalCss = el.textContent;
+    const promise = (async () => {
+        try {
+            let finalCss = cssText;
+
+            if (finalCss === undefined) {
+                if (nameOrIdOrUrl.startsWith('#')) {
+                    // ID selector - search synchronously
+                    const el = document.querySelector(nameOrIdOrUrl);
+                    if (el) {
+                        finalCss = el.textContent;
+                    } else {
+                        throw new Error(`Style block '${nameOrIdOrUrl}' not found`);
+                    }
                 } else {
-                    throw new Error(`Style block '${nameOrIdOrUrl}' not found`);
+                    // Assume URL
+                    const response = await fetch(nameOrIdOrUrl);
+                    if (!response.ok) throw new Error(`Fetch failed: ${response.status}`);
+                    finalCss = await response.text();
                 }
-            } else {
-                // Assume URL
-                const response = await fetch(nameOrIdOrUrl);
-                if (!response.ok) throw new Error(`Fetch failed: ${response.status}`);
-                finalCss = await response.text();
             }
-        }
 
-        if (finalCss !== undefined) {
-            const sheet = new CSSStyleSheet();
-            sheet.replaceSync(finalCss);
-            componentConfig.customStyleSheets.set(nameOrIdOrUrl, sheet);
+            if (finalCss !== undefined) {
+                const sheet = new CSSStyleSheet();
+                sheet.replaceSync(finalCss);
+                componentConfig.customStyleSheets.set(nameOrIdOrUrl, sheet);
+                return sheet;
+            }
+        } catch (e) {
+            console.error(`LightviewX: Failed to register stylesheet '${nameOrIdOrUrl}':`, e);
+        } finally {
+            componentConfig.customStyleSheetPromises.delete(nameOrIdOrUrl);
         }
-    } catch (e) {
-        console.error(`LightviewX: Failed to register stylesheet '${nameOrIdOrUrl}':`, e);
-    }
+    })();
+
+    componentConfig.customStyleSheetPromises.set(nameOrIdOrUrl, promise);
+    return promise;
 };
 
 // Theme Signal
@@ -1043,7 +1053,11 @@ const activateReactiveSyntax = (root, LV) => {
             try {
                 const val = fn(LV.state, LV.signal);
                 if (isAttr) {
-                    (val === null || val === undefined || val === false) ? node.removeAttribute(attrName) : node.setAttribute(attrName, val);
+                    if (attrName.startsWith('cdom-')) {
+                        node[attrName] = val;
+                    } else {
+                        (val === null || val === undefined || val === false) ? node.removeAttribute(attrName) : node.setAttribute(attrName, val);
+                    }
                 } else node.textContent = val !== undefined ? val : '';
             } catch (e) { /* Effect execution failed */ }
         });
@@ -1399,11 +1413,28 @@ const customElementWrapper = (Component, config = {}) => {
         }
 
         connectedCallback() {
-            // Load DaisyUI stylesheet into shadow DOM
-            const link = document.createElement('link');
-            link.rel = 'stylesheet';
-            link.href = 'https://cdn.jsdelivr.net/npm/daisyui@5.5.14/daisyui.min.css';
-            this.shadowRoot.appendChild(link);
+            let adopted = false;
+            // Attempt to use pre-parsed adopted stylesheets for performance
+            if (componentConfig.daisyStyleSheet) {
+                try {
+                    const sheets = [componentConfig.daisyStyleSheet];
+                    if (componentConfig.themeStyleSheet) {
+                        sheets.push(componentConfig.themeStyleSheet);
+                    }
+                    this.shadowRoot.adoptedStyleSheets = sheets;
+                    adopted = true;
+                } catch (e) {
+                    // Browser might not support adoptedStyleSheets
+                }
+            }
+
+            // Fallback to link tag if adoption failed or sheet wasn't loaded yet
+            if (!adopted) {
+                const link = document.createElement('link');
+                link.rel = 'stylesheet';
+                link.href = DAISYUI_CDN;
+                this.shadowRoot.appendChild(link);
+            }
 
             // Sync theme from document
             const themeWrapper = document.createElement('div');
@@ -1458,22 +1489,30 @@ const customElementWrapper = (Component, config = {}) => {
 
                 if (!componentInfo) return null;
 
-                const { component, attributeMap = {}, innerHTML = false } = componentInfo;
+                const { component, attributeMap = {} } = componentInfo;
                 const attributes = {};
 
-                // Parse attributes based on map
-                Object.entries(attributeMap).forEach(([attr, type]) => {
-                    const value = child.getAttribute(attr);
-                    if (value !== null) {
-                        if (type === Boolean) {
-                            attributes[attr] = value === 'true' || value === '';
-                        } else if (type === Number) {
-                            attributes[attr] = Number(value);
-                        } else {
-                            attributes[attr] = value;
+                // Parse all attributes
+                for (const attr of child.attributes) {
+                    const name = attr.name.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+                    const type = attributeMap[name];
+                    const value = attr.value;
+
+                    if (type === Boolean) {
+                        attributes[name] = value === 'true' || value === '';
+                    } else if (type === Number) {
+                        attributes[name] = Number(value);
+                    } else if (type === Array || type === Object) {
+                        try {
+                            attributes[name] = JSON.parse(value);
+                        } catch (e) {
+                            console.warn(`[Lightview] Failed to parse child attribute ${name} as JSON:`, value);
+                            attributes[name] = value;
                         }
+                    } else {
+                        attributes[name] = value;
                     }
-                });
+                }
 
                 // Copy event handlers
                 if (child.onclick) attributes.onclick = child.onclick.bind(child);
@@ -1481,7 +1520,7 @@ const customElementWrapper = (Component, config = {}) => {
                 return {
                     tag: component,
                     attributes,
-                    children: innerHTML ? [child.innerHTML] : [child.textContent]
+                    children: Array.from(child.childNodes)
                 };
             }).filter(Boolean);
         }
@@ -1489,18 +1528,28 @@ const customElementWrapper = (Component, config = {}) => {
         render() {
             // Build props from attributes
             const props = { useShadow: false }; // Wrapper already created shadow DOM
-            Object.entries(attributeMap).forEach(([attr, type]) => {
-                const value = this.getAttribute(attr);
-                if (value !== null) {
-                    if (type === Boolean) {
-                        props[attr] = value === 'true' || value === '';
-                    } else if (type === Number) {
-                        props[attr] = Number(value);
-                    } else {
-                        props[attr] = value;
+
+            // Collect all attributes
+            for (const attr of this.attributes) {
+                const name = attr.name.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+                const type = attributeMap[name];
+                const value = attr.value;
+
+                if (type === Boolean) {
+                    props[name] = value === 'true' || value === '';
+                } else if (type === Number) {
+                    props[name] = Number(value);
+                } else if (type === Array || type === Object) {
+                    try {
+                        props[name] = JSON.parse(value);
+                    } catch (e) {
+                        console.warn(`[Lightview] Failed to parse ${name} as JSON:`, value);
+                        props[name] = value;
                     }
+                } else {
+                    props[name] = value;
                 }
-            });
+            }
 
             const vdomChildren = this.parseChildrenToVDOM();
             // If no child elements are mapped, use a slot to project light DOM

package/src/lightview.js

@@ -270,7 +270,7 @@ const setAttributeValue = (domNode, key, value) => {
         value = 'javascript:void(0)'; // Safer fallback than # which might trigger scroll or router
     }
 
-    if (NODE_PROPERTIES.has(key) || isBool) {
+    if (NODE_PROPERTIES.has(key) || isBool || key.startsWith('cdom-')) {
         domNode[key] = isBool ? (value !== null && value !== undefined && value !== false && value !== 'false') : value;
     } else if (value === null || value === undefined) {
         domNode.removeAttribute(key);
@@ -428,6 +428,17 @@ const processChildren = (children, targetNode, clearExisting = true) => {
             // Static text
             targetNode.appendChild(document.createTextNode(child));
             childElements.push(child);
+        } else if (child instanceof Node) {
+            // Raw DOM node
+            const node = child.domEl || child;
+            if (node instanceof HTMLElement || node instanceof SVGElement) {
+                const wrapped = wrapDomElement(node, node.tagName.toLowerCase());
+                targetNode.appendChild(node);
+                childElements.push(wrapped);
+            } else {
+                targetNode.appendChild(node);
+                childElements.push(child);
+            }
         } else if (child && type === 'object' && child.tag) {
             // Child element (already wrapped or plain object) - tag can be string or function
             const childEl = child.domEl ? child : element(child.tag, child.attributes || {}, child.children || []);

package/{watch.js → start-dev.js}

@@ -14,7 +14,8 @@ const allowedDirs = ['docs', 'components', 'middleware'];
 function build() {
     try {
         console.log('Running full build...');
-        execSync('node build.js', { stdio: 'inherit' });
+        execSync('node build-bundles.mjs',, { stdio: 'inherit' });
+        execSync('node build.js --env=dev', { stdio: 'inherit' });
     } catch (e) {
         console.error('Build failed:', e);
     }

package/tests/cdom/parser.test.js

@@ -1,18 +1,19 @@
 import { describe, it, expect, beforeEach } from 'vitest';
 import Lightview from '../../src/lightview.js';
 import LightviewX from '../../src/lightview-x.js';
-import { resolvePath, parseExpression, registerHelper } from '../../cdom/parser.js';
-import { registerMathHelpers } from '../../cdom/helpers/math.js';
-import { registerLogicHelpers } from '../../cdom/helpers/logic.js';
-import { registerStringHelpers } from '../../cdom/helpers/string.js';
-import { registerArrayHelpers } from '../../cdom/helpers/array.js';
-import { registerCompareHelpers } from '../../cdom/helpers/compare.js';
-import { registerConditionalHelpers } from '../../cdom/helpers/conditional.js';
-import { registerDateTimeHelpers } from '../../cdom/helpers/datetime.js';
-import { registerFormatHelpers } from '../../cdom/helpers/format.js';
-import { registerLookupHelpers } from '../../cdom/helpers/lookup.js';
-import { registerStatsHelpers } from '../../cdom/helpers/stats.js';
-import { registerStateHelpers } from '../../cdom/helpers/state.js';
+import { resolvePath, parseExpression, registerHelper, parseCDOMC } from '../../jprx/parser.js';
+import { registerMathHelpers } from '../../jprx/helpers/math.js';
+import { registerLogicHelpers } from '../../jprx/helpers/logic.js';
+import { registerStringHelpers } from '../../jprx/helpers/string.js';
+import { registerArrayHelpers } from '../../jprx/helpers/array.js';
+import { registerCompareHelpers } from '../../jprx/helpers/compare.js';
+import { registerConditionalHelpers } from '../../jprx/helpers/conditional.js';
+import { registerDateTimeHelpers } from '../../jprx/helpers/datetime.js';
+import { registerFormatHelpers } from '../../jprx/helpers/format.js';
+import { registerLookupHelpers } from '../../jprx/helpers/lookup.js';
+import { registerStatsHelpers } from '../../jprx/helpers/stats.js';
+import { registerStateHelpers } from '../../jprx/helpers/state.js';
+import { hydrate } from '../../src/lightview-cdom.js';
 
 describe('cdom Parser', () => {
     beforeEach(() => {
@@ -105,4 +106,74 @@ describe('cdom Parser', () => {
             expect(expr.value).toBe('CHARLIE');
         });
     });
+
+    describe('CDOMC Parser', () => {
+        it('parses unquoted $ expressions as strings', () => {
+            const input = '{ button: { onclick: $increment($/count), children: "Click" } }';
+            const result = parseCDOMC(input);
+
+            expect(result).toEqual({
+                button: {
+                    onclick: '$increment($/count)',
+                    children: 'Click'
+                }
+            });
+        });
+
+        it('parses unquoted cdom-state with object value', () => {
+            const input = '{ div: { cdom-state: { count: 0 }, children: [] } }';
+            const result = parseCDOMC(input);
+
+            expect(result).toEqual({
+                div: {
+                    'cdom-state': { count: 0 },
+                    children: []
+                }
+            });
+        });
+
+        it('preserves $ prefix in simple paths', () => {
+            const input = '{ input: { cdom-bind: $/user/name } }';
+            const result = parseCDOMC(input);
+
+            expect(result).toEqual({
+                input: {
+                    'cdom-bind': '$/user/name'
+                }
+            });
+        });
+    });
+
+    describe('Hydration', () => {
+        it('converts event handler $ expressions to functions', () => {
+
+            const input = {
+                button: {
+                    onclick: '$increment($/count)',
+                    children: ['Click']
+                }
+            };
+
+            const result = hydrate(input);
+
+            // onclick should now be a function
+            expect(typeof result.button.onclick).toBe('function');
+            expect(result.button.children).toEqual(['Click']);
+        });
+
+        it('preserves non-$ event handlers as strings', () => {
+
+            const input = {
+                button: {
+                    onclick: 'alert("hello")',
+                    children: ['Click']
+                }
+            };
+
+            const result = hydrate(input);
+
+            // onclick should remain a string (non-$ expression)
+            expect(result.button.onclick).toBe('alert("hello")');
+        });
+    });
 });

package/wrangler.toml

@@ -1,9 +1,6 @@
 name = "lightview"
 compatibility_date = "2024-01-01"
 
-# Enable eval() and new Function() for SSR script processing
-[unsafe]
-eval = true
 
 # [build]
 # command = "npm run build"