lightview 2.0.9 → 2.1.0

package/tests/cdom/loader.test.js

@@ -0,0 +1,125 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import Lightview from '../../src/lightview.js';
+import LightviewX from '../../src/lightview-x.js';
+import LightviewCDOM from '../../src/lightview-cdom.js';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+describe('cdom Full Loader Tests', () => {
+    let handleSrc;
+
+    beforeEach(() => {
+        globalThis.window = globalThis;
+        globalThis.__DEBUG__ = true;
+        globalThis.Lightview = Lightview;
+        globalThis.LightviewX = LightviewX;
+        globalThis.LightviewCDOM = LightviewCDOM;
+
+        if (typeof document !== 'undefined') {
+            document.body.innerHTML = '';
+        }
+
+        Lightview.registry.clear();
+        LightviewX.state({
+            user: {
+                name: 'Alice',
+                age: 30,
+                role: 'Admin',
+                status: 'Available',
+                score: 100,
+                level: 5,
+                points: [10, 20, 30],
+                isVip: true,
+                account: { type: 'Premium' },
+                details: { city: 'NYC', zip: '10001' },
+                discount: 10,
+                activity: {
+                    purchases: [5, 10, 15]
+                }
+            }
+        }, 'app');
+
+        if (globalThis.LightviewX?.internals?.handleSrcAttribute) {
+            handleSrc = globalThis.LightviewX.internals.handleSrcAttribute;
+        }
+
+        globalThis.fetch = vi.fn().mockImplementation((url) => {
+            const fileName = url.toString().split('/').pop();
+            const filePath = path.join(__dirname, 'fixtures', fileName);
+            if (!fs.existsSync(filePath)) return Promise.resolve({ ok: false, status: 404 });
+            const content = fs.readFileSync(filePath, 'utf8');
+            return Promise.resolve({
+                ok: true,
+                text: () => Promise.resolve(content),
+                json: () => Promise.resolve(JSON.parse(content)),
+                url: url.toString()
+            });
+        });
+    });
+
+    const cleanHTML = (html) => html.replace(/<!--lv:[se]-->/g, '').replace(/\s+/g, ' ').trim();
+
+    it('should load and parse user.vdom with cdom expressions', async () => {
+        const container = Lightview.tags.div({ src: '/user.vdom' });
+        await handleSrc(container, '/user.vdom', 'div', {
+            element: Lightview.element,
+            setupChildren: Lightview.internals.setupChildren
+        });
+
+        const html = cleanHTML(container.domEl.innerHTML);
+        expect(html).toContain('Alice');
+        expect(html).toContain('Age: 30');
+        expect(html).toContain('Account: Premium');
+        expect(html).toContain('VIP Status: Yes');
+        expect(html).toContain('Location: NYC');
+    });
+
+    it('should load and parse user.odom with cdom expressions', async () => {
+        const container = Lightview.tags.div({ src: '/user.odom' });
+        await handleSrc(container, '/user.odom', 'div', {
+            element: Lightview.element,
+            setupChildren: Lightview.internals.setupChildren
+        });
+
+        const html = cleanHTML(container.domEl.innerHTML);
+        expect(html).toContain('Alice');
+        expect(html).toContain('Score: 100');
+        expect(html).toContain('Level: 5');
+        // Activity: purchases [5, 10, 15] -> sum = 30
+        expect(html).toContain('Activity Total: 30');
+        // Relative path: ../discount (10) * sum(purchases...) (30) = 300
+        expect(html).toContain('With Discount: 300');
+    });
+
+    it('should load and parse user.cdom (JSON ODOM file)', async () => {
+        const container = Lightview.tags.div({ src: '/user.cdom' });
+        await handleSrc(container, '/user.cdom', 'div', {
+            element: Lightview.element,
+            setupChildren: Lightview.internals.setupChildren
+        });
+
+        const html = cleanHTML(container.domEl.innerHTML);
+        expect(html).toContain('cdom-card');
+        expect(html).toContain('Welcome, Alice');
+        expect(html).toContain('(VIP)');
+        expect(html).toContain('Discount: 20%');
+    });
+
+    it('should load and parse user.cdomc (Unquoted Properties/Expressions)', async () => {
+        const container = Lightview.tags.div({ src: '/user.cdomc' });
+        await handleSrc(container, '/user.cdomc', 'div', {
+            element: Lightview.element,
+            setupChildren: Lightview.internals.setupChildren
+        });
+
+        const html = cleanHTML(container.domEl.innerHTML);
+        if (__DEBUG__) console.log('ACTUAL HTML:', html);
+        expect(html).toContain('profile-compiled');
+        expect(html).toContain('Alice');
+        expect(html).toContain('Available');
+        expect(html).toContain('Tier: Platinum');
+    });
+});

package/tests/cdom/parser.test.js

@@ -0,0 +1,108 @@
+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';
+
+describe('cdom Parser', () => {
+    beforeEach(() => {
+        // Clear registry before each test
+        Lightview.registry.clear();
+        // Register standard helpers
+        registerMathHelpers(registerHelper);
+        registerLogicHelpers(registerHelper);
+        registerStringHelpers(registerHelper);
+        registerArrayHelpers(registerHelper);
+        registerCompareHelpers(registerHelper);
+        registerConditionalHelpers(registerHelper);
+        registerDateTimeHelpers(registerHelper);
+        registerFormatHelpers(registerHelper);
+        registerLookupHelpers(registerHelper);
+        registerStatsHelpers(registerHelper);
+        registerStateHelpers((name, fn) => registerHelper(name, fn, { pathAware: true }));
+
+        // Attach to global for the parser to find it
+        globalThis.Lightview = Lightview;
+    });
+
+    describe('Path Resolution', () => {
+        it('resolves absolute global paths', () => {
+            Lightview.signal('Alice', 'userName');
+            expect(resolvePath('$/userName')).toBe('Alice');
+        });
+
+        it('resolves deep global paths in state', () => {
+            LightviewX.state({ profile: { name: 'Bob' } }, 'user');
+            expect(resolvePath('$/user/profile/name')).toBe('Bob');
+        });
+
+        it('resolves relative paths against context', () => {
+            const context = { age: 30, city: 'London' };
+            expect(resolvePath('./age', context)).toBe(30);
+        });
+
+        it('resolves array indices', () => {
+            const context = { items: ['apple', 'banana'] };
+            expect(resolvePath('./items/1', context)).toBe('banana');
+        });
+    });
+
+    describe('Expression Parsing', () => {
+        it('creates a computed signal for a path', () => {
+            const sig = Lightview.signal(10, 'count');
+            const expr = parseExpression('$/count');
+
+            expect(expr.value).toBe(10);
+
+            sig.value = 20;
+            expect(expr.value).toBe(20);
+        });
+
+        it('supports math helpers', () => {
+            Lightview.signal(5, 'a');
+            Lightview.signal(10, 'b');
+            const expr = parseExpression('$/+(a, b)');
+
+            expect(expr.value).toBe(15);
+        });
+
+        it('supports logical helpers', () => {
+            Lightview.signal(true, 'isVip');
+            const expr = parseExpression('$/if(isVip, "Gold", "Silver")');
+
+            expect(expr.value).toBe('Gold');
+
+            Lightview.get('isVip').value = false;
+            expect(expr.value).toBe('Silver');
+        });
+
+        it('supports the explosion operator (...)', () => {
+            LightviewX.state({ scores: [10, 20, 30] }, 'game');
+            const expr = parseExpression('$/sum(game/scores...)');
+
+            expect(expr.value).toBe(60);
+
+            const scores = Lightview.get('game').scores;
+            scores.push(40);
+            expect(expr.value).toBe(100);
+        });
+
+        it('handles nested navigation with helpers ($/user/upper(name))', () => {
+            LightviewX.state({ user: { name: 'charlie' } }, 'app');
+            // This tests: navigate to app/user, then call upper() on app/user.name
+            const expr = parseExpression('$/app/user/upper(name)');
+
+            expect(expr.value).toBe('CHARLIE');
+        });
+    });
+});

package/tests/cdom/reactivity.test.js

@@ -0,0 +1,186 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import Lightview from '../../src/lightview.js';
+import LightviewX from '../../src/lightview-x.js';
+import LightviewCDOM from '../../src/lightview-cdom.js';
+
+describe('cdom Reactivity', () => {
+    beforeEach(() => {
+        Lightview.registry.clear();
+        globalThis.Lightview = Lightview;
+        globalThis.LightviewCDOM = LightviewCDOM;
+    });
+
+    it('should update DOM-like values when signals change', () => {
+        const title = Lightview.signal('Hello', 'pageTitle');
+        const expr = LightviewCDOM.parseExpression('$/pageTitle');
+
+        expect(expr.value).toBe('Hello');
+
+        title.value = 'World';
+        expect(expr.value).toBe('World');
+    });
+
+    it('should handle deep state reactivity within a collection', () => {
+        const bills = LightviewX.state([
+            { id: 1, amount: 100 },
+            { id: 2, amount: 200 }
+        ], 'bills');
+
+        const totalExpr = LightviewCDOM.parseExpression('$/sum(bills/amount...)');
+        expect(totalExpr.value).toBe(300);
+
+        // Update an existing item
+        bills[0].amount = 150;
+        expect(totalExpr.value).toBe(350);
+
+        // Add a new item
+        bills.push({ id: 3, amount: 50 });
+        expect(totalExpr.value).toBe(400);
+
+        // Remove an item
+        bills.pop();
+        expect(totalExpr.value).toBe(350);
+    });
+
+    it('should handle conditional logic reactively', () => {
+        const user = LightviewX.state({ loggedIn: false, name: 'Guest' }, 'user');
+        const greeting = LightviewCDOM.parseExpression('$/user/if(loggedIn, concat("Welcome, ", ./name), "Please Login")');
+
+        expect(greeting.value).toBe('Please Login');
+
+        user.loggedIn = true;
+        user.name = 'Alice';
+        expect(greeting.value).toBe('Welcome, Alice');
+    });
+    it('should handle reactivity on multi-level nested objects', () => {
+        const settings = LightviewX.state({
+            theme: {
+                colors: {
+                    primary: 'blue',
+                    secondary: 'gray'
+                },
+                font: {
+                    size: '16px'
+                }
+            },
+            notifications: {
+                email: true
+            }
+        }, 'settings');
+
+        const colorExpr = LightviewCDOM.parseExpression('$/settings/theme/colors/primary');
+        const sizeExpr = LightviewCDOM.parseExpression('$/settings/theme/font/size');
+        const deepExpr = LightviewCDOM.parseExpression('$/concat(settings/theme/colors/primary, "-", settings/theme/font/size)');
+
+        expect(colorExpr.value).toBe('blue');
+        expect(sizeExpr.value).toBe('16px');
+        expect(deepExpr.value).toBe('blue-16px');
+
+        // Update deep property
+        settings.theme.colors.primary = 'red';
+        expect(colorExpr.value).toBe('red');
+        expect(deepExpr.value).toBe('red-16px');
+
+        // Update another deep branch
+        settings.theme.font.size = '18px';
+        expect(sizeExpr.value).toBe('18px');
+        expect(deepExpr.value).toBe('red-18px');
+
+        // Update via swapping nested object
+        settings.theme.colors = { primary: 'green', secondary: 'white' };
+        expect(colorExpr.value).toBe('green');
+        expect(deepExpr.value).toBe('green-18px');
+    });
+
+    it('should handle reactivity in a multi-level cdomC structure', () => {
+        // 1. Setup Multi-level State
+        const profile = LightviewX.state({
+            user: {
+                details: {
+                    name: 'Bob',
+                    avatar: { src: 'img.png', alt: 'Profile' }
+                },
+                stats: {
+                    posts: 10,
+                    followers: 50
+                }
+            },
+            ui: {
+                theme: 'dark'
+            }
+        }, 'profile');
+
+        // 2. Define Multi-level cdomC Structure using expressions
+        // This simulates parsing a nested .cdomc file
+        const cdomcStructure = {
+            div: {
+                id: 'profile-card',
+                class: '$/profile/ui/theme', // Bound to ui.theme
+                children: [
+                    {
+                        div: {
+                            class: 'header',
+                            children: [
+                                { h1: { children: ['$/profile/user/details/name'] } }, // Bound to user.details.name
+                                { img: { src: '$/profile/user/details/avatar/src', alt: '$/profile/user/details/avatar/alt' } }
+                            ]
+                        }
+                    },
+                    {
+                        div: {
+                            class: 'stats',
+                            children: [
+                                { span: { children: ["Posts: ", '$/profile/user/stats/posts'] } }, // Bound to user.stats.posts
+                                { span: { children: ["Followers: ", '$/profile/user/stats/followers'] } }
+                            ]
+                        }
+                    },
+                    // New section with reactive helpers
+                    {
+                        div: {
+                            class: 'helpers-test',
+                            children: [
+                                // Logic + String helpers: "HELLO BOB" or "HELLO USER"
+                                { p: { children: ['$/upper(if(profile/user/details/name, profile/user/details/name, "User"))'] } },
+                                // Math + Stats helpers: Sum of posts and followers
+                                { p: { children: ['Total interactions: ', '$/sum(profile/user/stats/posts, profile/user/stats/followers)'] } }
+                            ]
+                        }
+                    }
+                ]
+            }
+        };
+
+        // 3. Hydrate the structure
+        const hydrated = LightviewCDOM.hydrate(cdomcStructure);
+
+        // 4. Inspect & Assert Initial State
+        const root = hydrated.div;
+        const header = root.children[0].div;
+        const stats = root.children[1].div;
+        const helpers = root.children[2].div;
+
+        expect(root.class.value).toBe('dark');
+        expect(header.children[0].h1.children[0].value).toBe('Bob');
+        expect(header.children[1].img.src.value).toBe('img.png');
+        expect(stats.children[0].span.children[1].value).toBe(10);
+
+        // Assert Helpers Initial State
+        expect(helpers.children[0].p.children[0].value).toBe('BOB'); // upper('Bob')
+        expect(helpers.children[1].p.children[1].value).toBe(60); // sum(10, 50)
+
+        // 5. Trigger Deep Updates
+        profile.user.details.name = 'Robert';
+        profile.ui.theme = 'light';
+        profile.user.stats.posts = 20;
+
+        // 6. Assert Updates Propagated to cdomC Structure
+        expect(root.class.value).toBe('light'); // Top-level attr
+        expect(header.children[0].h1.children[0].value).toBe('Robert'); // Deep nested text
+        expect(stats.children[0].span.children[1].value).toBe(20); // Deep nested sibling
+
+        // Assert Helpers Updated State
+        expect(helpers.children[0].p.children[0].value).toBe('ROBERT'); // upper('Robert')
+        expect(helpers.children[1].p.children[1].value).toBe(70); // sum(20, 50)
+    });
+});

package/tests/text-tag.test.js

@@ -0,0 +1,77 @@
+
+import { describe, it, expect, beforeEach } from 'vitest';
+import { parseHTML } from 'linkedom';
+import Lightview from '../src/lightview.js';
+
+describe('text tag', () => {
+    let document;
+
+    beforeEach(() => {
+        const dom = parseHTML('<!DOCTYPE html><html><body></body></html>');
+        document = dom.document;
+        globalThis.document = document;
+        globalThis.Text = dom.Text;
+        globalThis.HTMLElement = dom.HTMLElement;
+        globalThis.ShadowRoot = dom.ShadowRoot;
+        globalThis.MutationObserver = class { observe() { } disconnect() { } };
+        globalThis.requestAnimationFrame = (fn) => setTimeout(fn, 0);
+        globalThis.CSSStyleSheet = class { };
+
+        Lightview.registry.clear();
+    });
+
+    it('should create a single text node with space-separated children', () => {
+        const el = Lightview.tags.text('Hello', 'World');
+        expect(el.domEl).toBeInstanceOf(globalThis.Text);
+        expect(el.domEl.textContent).toBe('Hello World');
+    });
+
+    it('should handle reactive children', async () => {
+        const name = Lightview.signal('Alice');
+        const el = Lightview.tags.text('Hello', () => name.value);
+
+        expect(el.domEl.textContent).toBe('Hello Alice');
+
+        name.value = 'Bob';
+        // Lightview effects run in a microtask or immediately depending on configuration
+        // Usually, Lightview signals in this project run synchronously if triggered? 
+        // Let's check reactivity.
+
+        expect(el.domEl.textContent).toBe('Hello Bob');
+    });
+
+    it('should handle nested arrays and other types', () => {
+        const el = Lightview.tags.text('Count:', [1, 2, 3], true);
+        expect(el.domEl.textContent).toBe('Count: 1 2 3 true');
+    });
+
+    it('should ignore null and undefined values but keep the space', () => {
+        // Based on my implementation: .map(c => ... return val === null ? '' : String(val)).join(' ')
+        const el = Lightview.tags.text('a', null, 'b');
+        expect(el.domEl.textContent).toBe('a  b');
+    });
+
+    it('should work with Lightview.tags.text(...) as a child of another element', () => {
+        const div = Lightview.tags.div(
+            Lightview.tags.text('Part', '1'),
+            ' ',
+            Lightview.tags.text('Part', '2')
+        );
+
+        expect(div.domEl.childNodes.length).toBe(3);
+        expect(div.domEl.childNodes[0]).toBeInstanceOf(globalThis.Text);
+        expect(div.domEl.childNodes[2]).toBeInstanceOf(globalThis.Text);
+        expect(div.domEl.textContent).toBe('Part 1 Part 2');
+    });
+
+    it('should use standard SVG text element when in SVG context', () => {
+        const svg = Lightview.element('svg', {}, [
+            { tag: 'text', children: ['Hello SVG'] }
+        ]);
+
+        const textElement = svg.domEl.firstChild;
+        expect(textElement.tagName.toLowerCase()).toBe('text');
+        expect(textElement.namespaceURI).toBe('http://www.w3.org/2000/svg');
+        expect(textElement).not.toBeInstanceOf(globalThis.Text);
+    });
+});

package/vite.config.mjs

@@ -0,0 +1,52 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+
+export default defineConfig({
+    build: {
+        lib: {
+            // Define multiple entry points
+            entry: {
+                'lightview': resolve(__dirname, 'src/lightview.js'),
+                'lightview-x': resolve(__dirname, 'src/lightview-x.js'),
+                'lightview-cdom': resolve(__dirname, 'src/lightview-cdom.js'),
+                'lightview-all': resolve(__dirname, 'src/lightview-all.js')
+            },
+            name: 'Lightview',
+            formats: ['iife', 'es'],
+            fileName: (format, entryName) => `${entryName}.${format === 'iife' ? 'js' : 'mjs'}`
+        },
+        outDir: 'build_tmp',
+        emptyOutDir: false,
+        rollupOptions: {
+            // Ensure components and docs are NOT part of the library bundle
+            external: (id) => id.includes('/components/') || id.includes('/docs/'),
+            output: {
+                // Handle global names for IIFE builds
+                globals: {
+                    'lightview': 'Lightview',
+                    'lightview-x': 'LightviewX',
+                    'lightview-cdom': 'LightviewCDOM'
+                },
+                extend: true
+            }
+        },
+        minify: 'terser',
+        terserOptions: {
+            compress: {
+                drop_console: false, // Keep console warnings for now
+                pure_funcs: ['console.debug']
+            }
+        }
+    },
+    test: {
+        environment: 'jsdom',
+        globals: true,
+        include: ['tests/**/*.test.js']
+    },
+    server: {
+        open: '/docs/index.html',
+        watch: {
+            usePolling: true
+        }
+    }
+});

package/components/data-display/skeleton.js

@@ -1,66 +0,0 @@
-/**
- * Lightview Skeleton Component (DaisyUI)
- * @see https://daisyui.com/components/skeleton/
- */
-
-import '../daisyui.js';
-
-/**
- * Skeleton Component - loading placeholder
- * @param {Object} props
- * @param {string} props.shape - 'circle' | 'rect'
- * @param {string} props.width - Width class or value
- * @param {string} props.height - Height class or value
- * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
- */
-const Skeleton = (props = {}, ...children) => {
-    const { tags } = globalThis.Lightview || {};
-    const LVX = globalThis.LightviewX || {};
-
-    if (!tags) return null;
-
-    const { div, shadowDOM } = tags;
-
-    const {
-        shape,
-        width = 'w-full',
-        height = 'h-4',
-        useShadow,
-        class: className = '',
-        ...rest
-    } = props;
-
-    const classes = ['skeleton', width, height];
-    if (shape === 'circle') classes.push('rounded-full');
-    if (className) classes.push(className);
-
-    const skeletonEl = div({ class: classes.join(' '), ...rest }, ...children);
-
-    // Check if we should use shadow DOM
-    let usesShadow = false;
-    if (LVX.shouldUseShadow) {
-        usesShadow = LVX.shouldUseShadow(useShadow);
-    } else {
-        usesShadow = useShadow === true;
-    }
-
-    if (usesShadow) {
-        const adoptedStyleSheets = LVX.getAdoptedStyleSheets ? LVX.getAdoptedStyleSheets() : [];
-
-        const themeValue = LVX.themeSignal ? () => LVX.themeSignal.value : 'light';
-
-        return div({ class: 'contents' },
-            shadowDOM({ mode: 'open', adoptedStyleSheets },
-                div({ 'data-theme': themeValue },
-                    skeletonEl
-                )
-            )
-        );
-    }
-
-    return skeletonEl;
-};
-
-globalThis.Lightview.tags.Skeleton = Skeleton;
-
-export default Skeleton;