lightview 2.0.9 → 2.2.1

package/build-bundles.mjs

@@ -0,0 +1,105 @@
+import { build } from 'vite';
+import { resolve } from 'path';
+import { fileURLToPath } from 'url';
+import { copyFileSync, rmSync, existsSync } from 'fs';
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
+const isWatch = process.argv.includes('--watch');
+
+const builds = [
+    { entry: 'src/lightview.js', name: 'lightview', globalName: 'Lightview' },
+    { entry: 'src/lightview-x.js', name: 'lightview-x', globalName: 'LightviewX' },
+    { entry: 'src/lightview-cdom.js', name: 'lightview-cdom', globalName: 'LightviewCDOM' },
+    { entry: 'src/lightview-router.js', name: 'lightview-router', globalName: 'LightviewRouter' },
+    { entry: 'src/lightview-all.js', name: 'lightview-all', globalName: 'LightviewAll' }
+];
+
+let building = false;
+let queued = false;
+
+async function runBuilds() {
+    if (building) {
+        queued = true;
+        return;
+    }
+    building = true;
+
+    console.log(isWatch ? 'Change detected. Rebuilding bundled files...' : 'Building bundles...');
+
+    try {
+        for (const b of builds) {
+            // console.log(`Building ${b.name}...`);
+            await build({
+                configFile: false,
+                logLevel: 'silent', // Reduce noise
+                build: {
+                    lib: {
+                        entry: resolve(__dirname, b.entry),
+                        name: b.globalName,
+                        formats: ['iife'],
+                        fileName: () => `${b.name}.js`
+                    },
+                    outDir: 'build_tmp',
+                    // Don't clean here, clean manually
+                    emptyOutDir: false,
+                    rollupOptions: {
+                        external: (id) => id.includes('/components/') || id.includes('/docs/')
+                    },
+                    minify: false // No minification for easier debugging
+                }
+            });
+        }
+
+        // Copy files
+        for (const b of builds) {
+            try {
+                const src = resolve(__dirname, `build_tmp/${b.name}.js`);
+                const dest = resolve(__dirname, `${b.name}.js`);
+                if (existsSync(src)) {
+                    copyFileSync(src, dest);
+                    console.log(`Updated ${b.name}.js`);
+                } else {
+                    console.error(`Missing built file: ${src}`);
+                }
+            } catch (e) {
+                console.error(`Failed to copy ${b.name}.js`, e);
+            }
+        }
+
+        // Cleanup
+        if (existsSync(resolve(__dirname, 'build_tmp'))) {
+            rmSync(resolve(__dirname, 'build_tmp'), { recursive: true, force: true });
+        }
+    } catch (e) {
+        console.error('Build error:', e);
+    }
+
+    building = false;
+    if (queued) {
+        queued = false;
+        runBuilds();
+    } else {
+        if (isWatch) console.log('Waiting for changes...');
+    }
+}
+
+// Initial run
+runBuilds();
+
+if (isWatch) {
+    console.log('Watching src/ for changes...');
+    // Dynamic import to avoid errors if run in environment without fs (unlikely here but good practice)
+    const { watch } = await import('fs');
+    let debounceTimer;
+
+    // Watch src directory
+    // Note: recursive option for Linux requires Node 20+, Windows/macOS supported earlier.
+    watch(resolve(__dirname, 'src'), { recursive: true }, (event, filename) => {
+        if (filename && !filename.includes('~')) {
+            clearTimeout(debounceTimer);
+            debounceTimer = setTimeout(() => {
+                runBuilds();
+            }, 300); // 300ms debounce
+        }
+    });
+}

package/build.js

@@ -1,70 +1,260 @@
 const fs = require('fs');
 const path = require('path');
+const { minify } = require('terser');
+
+// Parse command line arguments
+const args = process.argv.slice(2);
+const envArg = args.find(arg => arg.startsWith('--env='));
+const env = envArg ? envArg.split('=')[1] : 'prod';
+
+// Validate env
+const validEnvs = ['prod', 'test', 'dev'];
+if (!validEnvs.includes(env)) {
+    console.error(`Invalid env "${env}". Allowed values: ${validEnvs.join(', ')}`);
+    process.exit(1);
+}
+
+const shouldMinify = env === 'prod';
 
 const rootDir = __dirname;
 const distDir = path.join(rootDir, 'dist');
 const docsDir = path.join(rootDir, 'docs');
 const componentsDir = path.join(rootDir, 'components');
 const middlewareDir = path.join(rootDir, 'middleware');
+const jprxDir = path.join(rootDir, 'jprx');
 
 // Configuration
 // Files in root that should be copied
 const allowedExtensions = ['.html', '.js', '.css', '.txt', '.xml', '.ico', '.png', '.svg', '.jpg', '.jpeg', '.md'];
 const includeFiles = ['_headers']; // specific files to always include
-const excludeFiles = ['build.js', 'package.json', 'package-lock.json', 'wrangler.toml'];
+const excludeFiles = ['build.js', 'build-bundles.mjs', 'package.json', 'package-lock.json', 'wrangler.toml'];
 
-console.log('Building for deployment...');
+/**
+ * Minify a JavaScript file using terser
+ * @param {string} code - The JavaScript source code
+ * @returns {Promise<string>} - The minified code
+ */
+async function minifyJS(code) {
+    if (!shouldMinify) {
+        return code; // Skip minification in dev mode
+    }
+    try {
+        const result = await minify(code, {
+            module: true, // Handle ES6 module syntax
+            compress: {
+                drop_console: false
+            },
+            mangle: {
+                reserved: ['examplify', 'examplifyIdCounter'] // Preserve global function names called from HTML
+            }
+        });
+        return result.code;
+    } catch (e) {
+        console.error('Minification error:', e);
+        return code; // Return original on error
+    }
+}
 
-// 1. Clean/Create dist
-if (fs.existsSync(distDir)) {
-    fs.rmSync(distDir, { recursive: true, force: true });
+/**
+ * Copy a file, minifying if it's a JS file (and minification is enabled)
+ * @param {string} srcPath - Source file path
+ * @param {string} destPath - Destination file path
+ */
+async function copyFile(srcPath, destPath) {
+    const ext = path.extname(srcPath).toLowerCase();
+
+    if (ext === '.js' && shouldMinify) {
+        // Read, minify, and write JS files
+        const code = fs.readFileSync(srcPath, 'utf8');
+        const minified = await minifyJS(code);
+        fs.writeFileSync(destPath, minified);
+    } else {
+        // Copy other files directly
+        fs.copyFileSync(srcPath, destPath);
+    }
 }
-fs.mkdirSync(distDir);
-console.log('Created dist directory.');
-
-// 2. Copy Root Files
-const files = fs.readdirSync(rootDir);
-files.forEach(file => {
-    const srcPath = path.join(rootDir, file);
-    const stat = fs.statSync(srcPath);
-
-    if (stat.isFile()) {
-        const ext = path.extname(file).toLowerCase();
-
-        // Check if file should be copied
-        const isAllowedExt = allowedExtensions.includes(ext);
-        const isExplicitInclude = includeFiles.includes(file);
-        const isExcluded = excludeFiles.includes(file) || file.startsWith('.');
-
-        if ((isAllowedExt || isExplicitInclude) && !isExcluded) {
-            fs.copyFileSync(srcPath, path.join(distDir, file));
-            console.log(`Copied: ${file}`);
-        }
+
+/**
+ * Recursively copy a directory, minifying JS files if enabled
+ * @param {string} srcDir - Source directory
+ * @param {string} destDir - Destination directory
+ */
+async function copyDirWithMinify(srcDir, destDir) {
+    if (!fs.existsSync(destDir)) {
+        fs.mkdirSync(destDir, { recursive: true });
     }
-});
 
-// 3. Copy Docs Directory
-if (fs.existsSync(docsDir)) {
-    fs.cpSync(docsDir, path.join(distDir, 'docs'), { recursive: true });
-    console.log('Copied: docs directory');
-} else {
-    console.warn('Warning: docs directory not found.');
+    const entries = fs.readdirSync(srcDir, { withFileTypes: true });
+
+    for (const entry of entries) {
+        const srcPath = path.join(srcDir, entry.name);
+        const destPath = path.join(destDir, entry.name);
+
+        if (entry.isDirectory()) {
+            await copyDirWithMinify(srcPath, destPath);
+        } else {
+            await copyFile(srcPath, destPath);
+        }
+    }
 }
 
-// 4. Copy Components Directory
-if (fs.existsSync(componentsDir)) {
-    fs.cpSync(componentsDir, path.join(distDir, 'components'), { recursive: true });
-    console.log('Copied: components directory');
-} else {
-    console.warn('Warning: components directory not found.');
+async function build() {
+    console.log(`Building for deployment (env: ${env}, minify: ${shouldMinify})...`);
+
+    // 1. Clean/Create dist - continue even if deletion fails (e.g., file locks on Windows)
+    if (fs.existsSync(distDir)) {
+        try {
+            fs.rmSync(distDir, { recursive: true, force: true });
+            console.log('Cleaned dist directory.');
+        } catch (e) {
+            console.warn('Warning: Could not delete dist directory (files may be locked). Overwriting files instead.');
+        }
+    }
+
+    if (!fs.existsSync(distDir)) {
+        fs.mkdirSync(distDir);
+        console.log('Created dist directory.');
+    }
+
+    // 2. Copy Root Files (with minification for JS if enabled)
+    const files = fs.readdirSync(rootDir);
+    for (const file of files) {
+        const srcPath = path.join(rootDir, file);
+        const stat = fs.statSync(srcPath);
+
+        if (stat.isFile()) {
+            const ext = path.extname(file).toLowerCase();
+
+            // Check if file should be copied
+            const isAllowedExt = allowedExtensions.includes(ext);
+            const isExplicitInclude = includeFiles.includes(file);
+            const isExcluded = excludeFiles.includes(file) || file.startsWith('.');
+
+            if ((isAllowedExt || isExplicitInclude) && !isExcluded) {
+                await copyFile(srcPath, path.join(distDir, file));
+                const suffix = ext === '.js' && shouldMinify ? ' (minified)' : '';
+                console.log(`Copied: ${file}${suffix}`);
+            }
+        }
+    }
+
+    // 3. Copy Docs Directory
+    if (fs.existsSync(docsDir)) {
+        await copyDirWithMinify(docsDir, path.join(distDir, 'docs'));
+        console.log(`Copied: docs directory${shouldMinify ? ' (JS files minified)' : ''}`);
+    } else {
+        console.warn('Warning: docs directory not found.');
+    }
+
+    // 4. Copy Components Directory
+    if (fs.existsSync(componentsDir)) {
+        await copyDirWithMinify(componentsDir, path.join(distDir, 'components'));
+        console.log(`Copied: components directory${shouldMinify ? ' (JS files minified)' : ''}`);
+    } else {
+        console.warn('Warning: components directory not found.');
+    }
+
+    // 5. Copy Middleware Directory
+    if (fs.existsSync(middlewareDir)) {
+        await copyDirWithMinify(middlewareDir, path.join(distDir, 'middleware'));
+        console.log(`Copied: middleware directory${shouldMinify ? ' (JS files minified)' : ''}`);
+    } else {
+        console.warn('Warning: middleware directory not found.');
+    }
+
+
+
+    // 7. Copy JPRX Directory
+    if (fs.existsSync(jprxDir)) {
+        await copyDirWithMinify(jprxDir, path.join(distDir, 'jprx'));
+        console.log(`Copied: jprx directory${shouldMinify ? ' (JS files minified)' : ''}`);
+    } else {
+        console.warn('Warning: jprx directory not found.');
+    }
+
+    console.log('Build complete! Assets are ready in ./dist');
 }
 
-// 5. Copy Middleware Directory
-if (fs.existsSync(middlewareDir)) {
-    fs.cpSync(middlewareDir, path.join(distDir, 'middleware'), { recursive: true });
-    console.log('Copied: middleware directory');
+// Check for --watch flag
+const isWatch = args.includes('--watch');
+
+if (isWatch) {
+    // Watch mode
+    const { watch } = require('fs');
+    const { execSync } = require('child_process');
+    let debounceTimer;
+    let building = false;
+    let queued = false;
+    let needsBundleRebuild = false;
+
+    const runBuildBundles = () => {
+        console.log('Rebuilding bundles...');
+        try {
+            execSync('node build-bundles.mjs', { cwd: rootDir, stdio: 'inherit' });
+            console.log('Bundles rebuilt successfully.');
+        } catch (e) {
+            console.error('Bundle rebuild failed:', e.message);
+        }
+    };
+
+    const runBuild = async () => {
+        if (building) {
+            queued = true;
+            return;
+        }
+        building = true;
+        try {
+            if (needsBundleRebuild) {
+                runBuildBundles();
+                needsBundleRebuild = false;
+            }
+            await build();
+        } catch (e) {
+            console.error('Build failed:', e);
+        }
+        building = false;
+        if (queued) {
+            queued = false;
+            runBuild();
+        }
+    };
+
+    const watchDir = (dir, name, triggersBundleRebuild = false) => {
+        if (fs.existsSync(dir)) {
+            watch(dir, { recursive: true }, (event, filename) => {
+                if (filename && !filename.includes('~') && !filename.includes('.git')) {
+                    clearTimeout(debounceTimer);
+                    if (triggersBundleRebuild) {
+                        needsBundleRebuild = true;
+                    }
+                    debounceTimer = setTimeout(() => {
+                        console.log(`\nChange detected in ${name}: ${filename}`);
+                        runBuild();
+                    }, 300);
+                }
+            });
+            console.log(`Watching: ${name}${triggersBundleRebuild ? ' (triggers bundle rebuild)' : ''}`);
+        }
+    };
+
+    console.log('Starting watch mode...\n');
+
+    // Initial build (bundles already built by npm script)
+    runBuild().then(() => {
+        // Watch all relevant directories
+        // src/ and jprx/ trigger bundle rebuilds
+        watchDir(path.join(rootDir, 'src'), 'src/', true);
+        watchDir(jprxDir, 'jprx/', true);
+        // Other directories just get copied
+        watchDir(docsDir, 'docs/');
+        watchDir(componentsDir, 'components/');
+        watchDir(middlewareDir, 'middleware/');
+        console.log('\nWaiting for changes...');
+    });
 } else {
-    console.warn('Warning: middleware directory not found.');
+    // Single build
+    build().catch(e => {
+        console.error('Build failed:', e);
+        process.exit(1);
+    });
 }
-
-console.log('Build complete! Assets are ready in ./dist');

package/components/actions/button.js

@@ -139,9 +139,22 @@ const Button = (props = {}, ...children) => {
 
 globalThis.Lightview.tags.Button = Button;
 
-// Register as Custom Element
-if (globalThis.LightviewX?.createCustomElement) {
-    const ButtonElement = globalThis.LightviewX.createCustomElement(Button);
+// Register as Custom Element using customElementWrapper
+if (globalThis.LightviewX && typeof customElements !== 'undefined') {
+    const ButtonElement = globalThis.LightviewX.customElementWrapper(Button, {
+        attributeMap: {
+            color: String,
+            size: String,
+            variant: String,
+            disabled: Boolean,
+            loading: Boolean,
+            active: Boolean,
+            glass: Boolean,
+            noAnimation: Boolean
+        },
+        childElements: {} // No child components for Button, uses slot
+    });
+
     if (!customElements.get('lv-button')) {
         customElements.define('lv-button', ButtonElement);
     }

package/components/actions/swap.js

@@ -34,8 +34,9 @@ const Swap = (props = {}, ...children) => {
     else if (effect === 'flip') classes.push('swap-flip');
     if (className) classes.push(className);
 
-    // Handle reactive active state
-    const isActive = typeof active === 'function' ? active : () => active;
+    // Handle internal state for non-reactive/uncontrolled usage
+    const internalActive = signal(active);
+    const isActive = typeof active === 'function' ? active : () => internalActive.value;
 
     const swapEl = label({
         class: () => {
@@ -49,7 +50,11 @@ const Swap = (props = {}, ...children) => {
             type: 'checkbox',
             checked: isActive,
             onchange: (e) => {
-                if (onChange) onChange(e.target.checked);
+                const checked = e.target.checked;
+                if (typeof active !== 'function') {
+                    internalActive.value = checked;
+                }
+                if (onChange) onChange(checked);
             }
         }),
         ...children
@@ -115,4 +120,22 @@ tags.Swap = Swap;
 tags['Swap.On'] = Swap.On;
 tags['Swap.Off'] = Swap.Off;
 
+// Register as Custom Element using customElementWrapper
+if (globalThis.LightviewX && typeof customElements !== 'undefined') {
+    const SwapElement = globalThis.LightviewX.customElementWrapper(Swap, {
+        attributeMap: {
+            active: Boolean,
+            effect: String
+        },
+        childElements: {
+            'on': Swap.On,
+            'off': Swap.Off
+        }
+    });
+
+    if (!customElements.get('lv-swap')) {
+        customElements.define('lv-swap', SwapElement);
+    }
+}
+
 export default Swap;

package/components/daisyui.js

@@ -3,7 +3,7 @@
  * This module ensures DaisyUI CSS is loaded and provides utilities for components
  */
 
-const DAISYUI_CDN = 'https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css';
+const DAISYUI_CDN = 'https://cdn.jsdelivr.net/npm/daisyui@5.5.14/daisyui.min.css';
 const TAILWIND_CDN = 'https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4';
 
 let daisyLoaded = false;

package/components/data-display/alert.js

@@ -101,9 +101,19 @@ function getAlertIcon(type) {
 
 globalThis.Lightview.tags.Alert = Alert;
 
-// Register as Custom Element
-if (globalThis.LightviewX?.createCustomElement) {
-    const AlertElement = globalThis.LightviewX.createCustomElement(Alert);
+// Register as Custom Element using customElementWrapper
+if (globalThis.LightviewX && typeof customElements !== 'undefined') {
+    const AlertElement = globalThis.LightviewX.customElementWrapper(Alert, {
+        attributeMap: {
+            color: String,
+            soft: Boolean,
+            dash: Boolean,
+            outline: Boolean,
+            icon: String
+        },
+        childElements: {} // No child components for Alert
+    });
+
     if (!customElements.get('lv-alert')) {
         customElements.define('lv-alert', AlertElement);
     }

package/components/data-display/avatar.js

@@ -158,7 +158,31 @@ tags.Avatar = Avatar;
 tags['Avatar.Group'] = Avatar.Group;
 
 // Register as Custom Elements
-if (globalThis.LightviewX?.createCustomElement) {
+if (globalThis.LightviewX?.customElementWrapper) {
+    if (!customElements.get('lv-avatar')) {
+        customElements.define('lv-avatar', globalThis.LightviewX.customElementWrapper(Avatar, {
+            attributeMap: {
+                src: String,
+                alt: String,
+                placeholder: String,
+                size: String,
+                shape: String,
+                ring: Boolean,
+                ringColor: String,
+                online: Boolean,
+                offline: Boolean,
+                class: String
+            }
+        }));
+    }
+    if (!customElements.get('lv-avatar-group')) {
+        customElements.define('lv-avatar-group', globalThis.LightviewX.customElementWrapper(Avatar.Group, {
+            attributeMap: {
+                class: String
+            }
+        }));
+    }
+} else if (globalThis.LightviewX?.createCustomElement) {
     if (!customElements.get('lv-avatar')) {
         customElements.define('lv-avatar', globalThis.LightviewX.createCustomElement(Avatar));
     }

package/components/data-display/badge.js

@@ -71,9 +71,17 @@ const Badge = (props = {}, ...children) => {
 
 globalThis.Lightview.tags.Badge = Badge;
 
-// Register as Custom Element
-if (globalThis.LightviewX?.createCustomElement) {
-    const BadgeElement = globalThis.LightviewX.createCustomElement(Badge);
+// Register as Custom Element using customElementWrapper
+if (globalThis.LightviewX && typeof customElements !== 'undefined') {
+    const BadgeElement = globalThis.LightviewX.customElementWrapper(Badge, {
+        attributeMap: {
+            color: String,
+            size: String,
+            variant: String
+        },
+        childElements: {} // No child components for Badge, uses slot
+    });
+
     if (!customElements.get('lv-badge')) {
         customElements.define('lv-badge', BadgeElement);
     }

package/components/data-display/chart.js

@@ -24,9 +24,22 @@ import '../daisyui.js';
  */
 const CHARTS_CSS_URL = 'https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css';
 
+// Register stylesheet for Shadow DOM usage (Adopted StyleSheets)
+// Using top-level await in module to ensure it's loaded before any component renders
+if (globalThis.LightviewX?.registerStyleSheet) {
+    await LightviewX.registerStyleSheet(CHARTS_CSS_URL);
+}
+
 // Auto-load charts.css for Global/Light DOM usage
 if (typeof document !== 'undefined') {
-    if (!document.querySelector(`link[href^="https://cdn.jsdelivr.net/npm/charts.css"]`)) {
+    if (!document.querySelector(`link[href^="${CHARTS_CSS_URL}"]`)) {
+        // Preload for better performance
+        const preload = document.createElement('link');
+        preload.rel = 'preload';
+        preload.as = 'style';
+        preload.href = CHARTS_CSS_URL;
+        document.head.appendChild(preload);
+
         const link = document.createElement('link');
         link.rel = 'stylesheet';
         link.href = CHARTS_CSS_URL;
@@ -48,8 +61,8 @@ const Chart = (props = {}, ...children) => {
         labels = false,
         dataOnHover = false,
         primaryAxis = false,
+        secondaryAxesCount,
         secondaryAxis = false,
-        spacing,
         reverse = false,
         multiple = false,
         stacked = false,
@@ -65,10 +78,14 @@ const Chart = (props = {}, ...children) => {
     if (heading) classes.push('show-heading');
     if (primaryAxis) classes.push('show-primary-axis');
 
-    if (secondaryAxis === true) classes.push('show-10-secondary-axes');
-    else if (typeof secondaryAxis === 'string') classes.push(secondaryAxis);
+    if (secondaryAxesCount) {
+        classes.push(`show-${secondaryAxesCount}-secondary-axes`);
+    } else if (secondaryAxis === true) {
+        classes.push('show-10-secondary-axes');
+    } else if (typeof secondaryAxis === 'string') {
+        classes.push(secondaryAxis);
+    }
 
-    if (spacing) classes.push(`data-spacing-${spacing}`);
     if (reverse) classes.push('reverse');
     if (multiple) classes.push('multiple');
     if (stacked) classes.push('stacked');

package/components/data-display/countdown.js

@@ -30,12 +30,13 @@ const Countdown = (props = {}, ...children) => {
 
     const countdownEl = span({
         class: `countdown ${className}`.trim(),
+        style: 'line-height: 1.2em; height: 1.2em; vertical-align: middle;',
         ...rest
     },
         span({
             style: typeof value === 'function'
-                ? () => `--value:${getValue()};`
-                : `--value:${value};`
+                ? () => `--value:${getValue()}; height: 1.2em;`
+                : `--value:${value}; height: 1.2em;`
         })
     );
 

package/components/data-display/kbd.js

@@ -54,9 +54,15 @@ const Kbd = (props = {}, ...children) => {
 
 globalThis.Lightview.tags.Kbd = Kbd;
 
-// Register as Custom Element
-if (globalThis.LightviewX?.createCustomElement) {
-    const KbdElement = globalThis.LightviewX.createCustomElement(Kbd);
+// Register as Custom Element using customElementWrapper
+if (globalThis.LightviewX && typeof customElements !== 'undefined') {
+    const KbdElement = globalThis.LightviewX.customElementWrapper(Kbd, {
+        attributeMap: {
+            size: String
+        },
+        childElements: {} // No child components, uses slot for key text
+    });
+
     if (!customElements.get('lv-kbd')) {
         customElements.define('lv-kbd', KbdElement);
     }