lightview 2.1.0 → 2.2.2

package/build-bundles.mjs

@@ -10,6 +10,7 @@ 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' }
 ];
 
@@ -44,12 +45,7 @@ async function runBuilds() {
                     rollupOptions: {
                         external: (id) => id.includes('/components/') || id.includes('/docs/')
                     },
-                    minify: 'terser',
-                    terserOptions: {
-                        compress: {
-                            drop_console: false
-                        }
-                    }
+                    minify: false // No minification for easier debugging
                 }
             });
         }

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/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/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-input/checkbox.js

@@ -242,7 +242,29 @@ const Checkbox = (props = {}) => {
 globalThis.Lightview.tags.Checkbox = Checkbox;
 
 // Register as Custom Element
-if (globalThis.LightviewX?.createCustomElement) {
+if (globalThis.LightviewX?.customElementWrapper) {
+    const CheckboxElement = globalThis.LightviewX.customElementWrapper(Checkbox, {
+        attributeMap: {
+            checked: Boolean,
+            defaultChecked: Boolean,
+            indeterminate: Boolean,
+            size: String,
+            color: String,
+            disabled: Boolean,
+            required: Boolean,
+            label: String,
+            description: String,
+            error: String,
+            name: String,
+            id: String,
+            value: String,
+            class: String
+        }
+    });
+    if (!customElements.get('lv-checkbox')) {
+        customElements.define('lv-checkbox', CheckboxElement);
+    }
+} else if (globalThis.LightviewX?.createCustomElement) {
     const CheckboxElement = globalThis.LightviewX.createCustomElement(Checkbox);
     if (!customElements.get('lv-checkbox')) {
         customElements.define('lv-checkbox', CheckboxElement);

package/components/data-input/input.js

@@ -254,7 +254,30 @@ const Input = (props = {}) => {
 globalThis.Lightview.tags.Input = Input;
 
 // Register as Custom Element
-if (globalThis.LightviewX?.createCustomElement) {
+if (globalThis.LightviewX?.customElementWrapper) {
+    const InputElement = globalThis.LightviewX.customElementWrapper(Input, {
+        attributeMap: {
+            type: String,
+            value: String,
+            defaultValue: String,
+            placeholder: String,
+            size: String,
+            color: String,
+            ghost: Boolean,
+            disabled: Boolean,
+            required: Boolean,
+            label: String,
+            helper: String,
+            error: String,
+            name: String,
+            id: String,
+            class: String
+        }
+    });
+    if (!customElements.get('lv-input')) {
+        customElements.define('lv-input', InputElement);
+    }
+} else if (globalThis.LightviewX?.createCustomElement) {
     const InputElement = globalThis.LightviewX.createCustomElement(Input);
     if (!customElements.get('lv-input')) {
         customElements.define('lv-input', InputElement);

package/components/data-input/radio.js

@@ -168,7 +168,7 @@ const RadioGroup = (props = {}) => {
     } = props;
 
     // Normalize options
-    const normalizedOptions = options.map(opt =>
+    const normalizedOptions = (Array.isArray(options) ? options : []).map(opt =>
         typeof opt === 'string' ? { value: opt, label: opt } : opt
     );
 
@@ -323,7 +323,42 @@ globalThis.Lightview.tags.Radio = Radio;
 globalThis.Lightview.tags.RadioGroup = RadioGroup;
 
 // Register as Custom Elements
-if (globalThis.LightviewX?.createCustomElement) {
+if (globalThis.LightviewX?.customElementWrapper) {
+    if (!customElements.get('lv-radio')) {
+        customElements.define('lv-radio', globalThis.LightviewX.customElementWrapper(Radio, {
+            attributeMap: {
+                name: String,
+                value: String,
+                checked: Boolean,
+                size: String,
+                color: String,
+                disabled: Boolean,
+                label: String,
+                id: String,
+                class: String
+            }
+        }));
+    }
+    if (!customElements.get('lv-radio-group')) {
+        customElements.define('lv-radio-group', globalThis.LightviewX.customElementWrapper(RadioGroup, {
+            attributeMap: {
+                options: Array,
+                value: String,
+                defaultValue: String,
+                name: String,
+                label: String,
+                helper: String,
+                error: String,
+                color: String,
+                size: String,
+                horizontal: Boolean,
+                disabled: Boolean,
+                required: Boolean,
+                class: String
+            }
+        }));
+    }
+} else if (globalThis.LightviewX?.createCustomElement) {
     const RadioElement = globalThis.LightviewX.createCustomElement(Radio);
     if (!customElements.get('lv-radio')) {
         customElements.define('lv-radio', RadioElement);

package/components/data-input/select.js

@@ -277,7 +277,30 @@ const Select = (props = {}) => {
 globalThis.Lightview.tags.Select = Select;
 
 // Register as Custom Element
-if (globalThis.LightviewX?.createCustomElement) {
+if (globalThis.LightviewX?.customElementWrapper) {
+    const SelectElement = globalThis.LightviewX.customElementWrapper(Select, {
+        attributeMap: {
+            options: Array,
+            value: String,
+            defaultValue: String,
+            placeholder: String,
+            size: String,
+            color: String,
+            ghost: Boolean,
+            disabled: Boolean,
+            required: Boolean,
+            label: String,
+            helper: String,
+            error: String,
+            name: String,
+            id: String,
+            class: String
+        }
+    });
+    if (!customElements.get('lv-select')) {
+        customElements.define('lv-select', SelectElement);
+    }
+} else if (globalThis.LightviewX?.createCustomElement) {
     const SelectElement = globalThis.LightviewX.createCustomElement(Select);
     if (!customElements.get('lv-select')) {
         customElements.define('lv-select', SelectElement);

package/components/data-input/toggle.js

@@ -191,7 +191,27 @@ const Toggle = (props = {}) => {
 globalThis.Lightview.tags.Toggle = Toggle;
 
 // Register as Custom Element
-if (globalThis.LightviewX?.createCustomElement) {
+if (globalThis.LightviewX?.customElementWrapper) {
+    const ToggleElement = globalThis.LightviewX.customElementWrapper(Toggle, {
+        attributeMap: {
+            checked: Boolean,
+            defaultChecked: Boolean,
+            size: String,
+            color: String,
+            disabled: Boolean,
+            label: String,
+            labelPosition: String,
+            description: String,
+            name: String,
+            id: String,
+            class: String,
+            theme: String
+        }
+    });
+    if (!customElements.get('lv-toggle')) {
+        customElements.define('lv-toggle', ToggleElement);
+    }
+} else if (globalThis.LightviewX?.createCustomElement) {
     const ToggleElement = globalThis.LightviewX.createCustomElement(Toggle);
     if (!customElements.get('lv-toggle')) {
         customElements.define('lv-toggle', ToggleElement);

package/components/navigation/breadcrumbs.js

@@ -74,18 +74,58 @@ Breadcrumbs.Item = (props = {}, ...children) => {
     if (!tags) return null;
 
     const { href, class: className = '', ...rest } = props;
+    const allChildren = children.flat(Infinity);
 
     if (href) {
         return tags.li({ class: className, ...rest },
-            tags.a({ href }, ...children)
+            tags.a({ href }, ...allChildren)
         );
     }
 
-    return tags.li({ class: className, ...rest }, ...children);
+    return tags.li({ class: className, ...rest }, ...allChildren);
 };
 
 
 const tags = globalThis.Lightview.tags;
 tags.Breadcrumbs = Breadcrumbs;
 tags['Breadcrumbs.Item'] = Breadcrumbs.Item;
+
+// Register as custom elements
+if (globalThis.LightviewX?.customElementWrapper) {
+    const BreadcrumbsElement = globalThis.LightviewX.customElementWrapper(Breadcrumbs, {
+        attributeMap: {
+            items: Array,
+            useShadow: Boolean,
+            class: String
+        },
+        childElements: {
+            'lv-breadcrumbs-item': {
+                component: Breadcrumbs.Item,
+                attributeMap: {
+                    href: String,
+                    class: String
+                }
+            }
+        }
+    });
+
+    if (!customElements.get('lv-breadcrumbs')) {
+        customElements.define('lv-breadcrumbs', BreadcrumbsElement);
+    }
+
+    const BreadcrumbsItemElement = globalThis.LightviewX.customElementWrapper(Breadcrumbs.Item, {
+        attributeMap: {
+            href: String,
+            class: String
+        }
+    });
+
+    if (!customElements.get('lv-breadcrumbs-item')) {
+        customElements.define('lv-breadcrumbs-item', BreadcrumbsItemElement);
+    }
+} else if (globalThis.LightviewX?.createCustomElement) {
+    globalThis.LightviewX.createCustomElement(Breadcrumbs, { tagName: 'lv-breadcrumbs' });
+    globalThis.LightviewX.createCustomElement(Breadcrumbs.Item, { tagName: 'lv-breadcrumbs-item' });
+}
+
 export default Breadcrumbs;