lightview 1.8.1-b → 2.0.0

package/middleware/locale.js

@@ -0,0 +1,25 @@
+/**
+ * Locale Prefix Handler
+ * Extracts locale from path (e.g. /en/about -> /about with locale='en')
+ */
+export const localeHandler = (ctx) => {
+    const path = typeof ctx === 'string' ? ctx : ctx.path;
+
+    // Match /en/ or /en at start of path
+    const match = path.match(/^\/([a-z]{2})($|\/)/);
+
+    if (match) {
+        const locale = match[1];
+        // Remove locale prefix
+        let newPath = path.substring(3);
+        if (!newPath.startsWith('/')) newPath = '/' + newPath;
+
+        return {
+            ...ctx,
+            path: newPath,
+            locale: locale
+        };
+    }
+
+    return ctx;
+};

package/middleware/markdown.js

@@ -0,0 +1,44 @@
+/**
+ * Markdown Handler
+ * Intercepts .md requests, loads marked.js on demand, and renders HTML
+ */
+let marked = null;
+
+export const markdownHandler = async (ctx) => {
+    const path = typeof ctx === 'string' ? ctx : ctx.path;
+
+    // Only process .md files
+    if (!path.endsWith('.md')) return ctx;
+
+    try {
+        // 1. Load marked if needed
+        if (!marked) {
+            console.log('[Markdown] Loading processor...');
+            const module = await import('https://cdn.jsdelivr.net/npm/marked/+esm');
+            marked = module.marked;
+        }
+
+        // 2. Fetch the raw markdown content
+        const response = await fetch(path);
+        if (!response.ok) return null; // Let other handlers try or 404
+
+        const text = await response.text();
+
+        // 3. Convert to HTML
+        // marked.parse can be synchronous or async depending on extensions, 
+        // but usually synchronous for standard usage.
+        const html = marked.parse(text);
+
+        // 4. Wrap the HTML in a container if needed, or just return it.
+        // For Lightview docs, we might want a wrapper, but raw HTML is fine for now.
+        // We'll return a Response object which the router understands as a final result.
+        return new Response(html, {
+            status: 200,
+            headers: { 'Content-Type': 'text/html' }
+        });
+
+    } catch (err) {
+        console.error('[Markdown] Error processing file:', err);
+        return null; // Fallthrough
+    }
+};

package/middleware/notFound.js

@@ -0,0 +1,37 @@
+/**
+ * 404 Not Found Middleware
+ * 
+ * Returns a configured Not Found handler that renders a 404 page
+ * into a target element or returns a 404 response.
+ * 
+ * Usage:
+ * appRouter.use(notFound({ 
+ *   contentEl: document.getElementById('content'),
+ *   html: '<h1>404 Not Found</h1>' // Optional custom HTML
+ * }));
+ */
+export const notFound = (options = {}) => {
+    const {
+        contentEl = null,
+        html = `
+            <div class="error-page" style="text-align: center; padding: 4rem 1rem;">
+                <h1 style="font-size: 3rem; margin-bottom: 1rem;">404</h1>
+                <p style="font-size: 1.25rem; margin-bottom: 2rem;">Page not found</p>
+                <a href="/" class="btn btn-primary">Go Home</a>
+            </div>
+        `
+    } = options;
+
+    return async (ctx) => {
+        const targetEl = contentEl || ctx.contentEl;
+
+        // If contentEl is provided (either via options or context), render directly
+        if (targetEl) {
+            targetEl.innerHTML = html;
+            return new Response(html, { status: 404, statusText: 'Not Found' });
+        }
+
+        // Otherwise return a response and let the caller handle it
+        return new Response(html, { status: 404, statusText: 'Not Found' });
+    };
+};

package/package.json

@@ -1,41 +1,27 @@
-{
-  "name": "lightview",
-  "version": "1.8.1b",
-  "description": "Small, simple, powerful web UI and micro front end creation ... Great ideas from Svelte, React, Vue and Riot combined.",
-  "main": "lightview.js",
-  "scripts": {
-    "test": "set NODE_OPTIONS=--experimental-vm-modules && jest ./test"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/anywhichway/lightview.git"
-  },
-  "keywords": [
-    "svelte",
-    "react",
-    "angular",
-    "riot",
-    "vue",
-    "moon",
-    "hyperapp",
-    "hyperhtml",
-    "micro front end",
-    "custom elements",
-    "web components"
-  ],
-  "author": "Simon Y. Blackwell",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/anywhichway/lightview/issues"
-  },
-  "homepage": "https://lightview.dev",
-  "devDependencies": {
-    "@editorjs/editorjs": "^2.16.0",
-    "editorjs-inline-tool": "^0.4.0",
-    "jest": "^27.5.1",
-    "jest-puppeteer": "^6.1.0"
-  },
-  "dependencies": {
-    "froala-editor": "^4.0.11"
-  }
-}
+{
+  "name": "lightview",
+  "version": "2.0.0",
+  "description": "A lightweight reactive UI library with features of Bau, Juris, and HTMX",
+  "main": "lightview.js",
+  "directories": {
+    "doc": "docs"
+  },
+  "scripts": {
+    "dev": "wrangler pages dev . --port 3000",
+    "preview": "npm run build && wrangler pages dev ./dist --port 8788",
+    "build": "node build.js",
+    "watch": "node watch.js",
+    "deploy": "npm run build && wrangler pages deploy dist",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "type": "commonjs",
+  "devDependencies": {
+    "wrangler": "^4.54.0"
+  },
+  "dependencies": {
+    "marked": "^17.0.1"
+  }
+}

package/watch.js

@@ -0,0 +1,92 @@
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+
+const rootDir = __dirname;
+const distDir = path.join(rootDir, 'dist');
+
+// Configuration (must match build.js)
+const allowedExtensions = ['.html', '.js', '.css', '.txt', '.xml', '.ico', '.png', '.svg', '.jpg', '.jpeg', '.md'];
+const includeFiles = ['_headers'];
+const excludeFiles = ['build.js', 'watch.js', 'package.json', 'package-lock.json', 'wrangler.toml'];
+const allowedDirs = ['docs', 'components', 'middleware'];
+
+function build() {
+    try {
+        console.log('Running full build...');
+        execSync('node build.js', { stdio: 'inherit' });
+    } catch (e) {
+        console.error('Build failed:', e);
+    }
+}
+
+function copyFile(srcPath, relativePath) {
+    try {
+        const destPath = path.join(distDir, relativePath);
+        const destDir = path.dirname(destPath);
+
+        if (!fs.existsSync(destDir)) {
+            fs.mkdirSync(destDir, { recursive: true });
+        }
+
+        fs.copyFileSync(srcPath, destPath);
+        console.log(`Updated: ${relativePath}`);
+    } catch (err) {
+        // Ignore errors for deleted files or temporary locks
+        if (err.code !== 'ENOENT' && err.code !== 'EBUSY') {
+            console.error(`Error copying ${relativePath}:`, err.message);
+        }
+    }
+}
+
+// Initial build
+build();
+
+console.log('Watching for changes...');
+
+fs.watch(rootDir, { recursive: true }, (eventType, filename) => {
+    if (!filename) return;
+
+    // Ignore .git, node_modules, dist, etc.
+    if (filename.startsWith('.git') ||
+        filename.startsWith('node_modules') ||
+        filename.startsWith('dist') ||
+        filename.startsWith('.gemini')) {
+        return;
+    }
+
+    const srcPath = path.join(rootDir, filename);
+    const parts = filename.split(path.sep);
+    const topLevel = parts[0];
+
+    // Check if it's in one of the allowed directories
+    if (allowedDirs.includes(topLevel)) {
+        // Check if file exists to handle deletions gracefully
+        if (fs.existsSync(srcPath)) {
+            // Check if it's a directory
+            try {
+                const stat = fs.statSync(srcPath);
+                if (stat.isDirectory()) return;
+            } catch (e) {
+                return; // Ignore if stat fails
+            }
+
+            copyFile(srcPath, filename);
+        }
+        return;
+    }
+
+    // Check if it's a file in the root directory
+    if (parts.length === 1) {
+        const ext = path.extname(filename).toLowerCase();
+        const isAllowedExt = allowedExtensions.includes(ext);
+        const isExplicitInclude = includeFiles.includes(filename);
+        const isExcluded = excludeFiles.includes(filename) || filename.startsWith('.');
+
+        if ((isAllowedExt || isExplicitInclude) && !isExcluded) {
+            if (fs.existsSync(srcPath)) {
+                copyFile(srcPath, filename);
+            }
+        }
+    }
+});

package/wrangler.toml

@@ -0,0 +1,12 @@
+name = "lightview"
+compatibility_date = "2024-01-01"
+
+# [build]
+# command = "npm run build"
+
+# Cloudflare Pages configuration
+# Note: Static asset headers are now defined in _headers file
+# and the build directory is specified in the deploy command or dashboard.
+
+[assets]
+directory = "./dist"

package/.idea/lightview.iml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

package/.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/lightview.iml" filepath="$PROJECT_DIR$/.idea/lightview.iml" />
-    </modules>
-  </component>
-</project>

package/.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
-  </component>
-</project>

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2022 Simon Y. Blackwell
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/codepen-no-tabs-embed.css

@@ -1,2 +0,0 @@
-body.split-output #output > .active { width: 75%; }
-body.split-output #output > #result-box.active { width: 25% }

package/components/chart/chart.html

@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="UTF-8">
-    <title>Lightview:Component:Chart</title>
-</head>
-<body>
-<div id="target"></div>
-<script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
-<script id="lightview">
-    (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
-        const {chart} = await import(new URL("../components.js", this.componentBaseURI).href);
-        chart(self);
-    }
-</script>
-</body>
-</html>

package/components/chart/example.html

@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<head>
-    <title>Lightview:Chart:Example</title>
-    <link href="./chart.html" rel="module">
-    <script src="../../lightview.js"></script>
-</head>
-<body>
-<l-chart id="myPieChart" type="PieChart" style="height:500px;" title="How Much Pizza I Ate Last Night">
-    {
-    options: { },
-    columns: [
-    {label: "Topping", type: "string"},
-    {label: "Slices", type: "number"}
-    ],
-    rows: [
-    ["Mushrooms", 3],
-    ["Onions", 1],
-    ["Olives", 1],
-    ["Zucchini", 1],
-    ["Pepperoni", 2]
-    ]
-    }
-</l-chart>
-<script>
-    const el = document.getElementById("myPieChart");
-    el.addEventListener("mounted",() => {
-        chart = el.chart;
-        chart.addRow(["Anchovies",1]);
-    });
-</script>
-</body>
-</html>

package/components/chart.html

@@ -1,83 +0,0 @@
-<html>
-<head>
-    <meta charset="UTF-8">
-    <title>Lightview:Chart</title>
-</head>
-<body hidden>
-<div id="target"></div>
-<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
-<script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
-<script id="lightview">
-    (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
-        let table = JSON5.parse(self.firstChild.textContent.trim()),
-            chart,
-            datatable,
-            options = {};
-        const target = self.getElementById("target"),
-            resizeObserver = new ResizeObserver(entries => {
-                for (let entry of entries) {
-                    if (entry.contentBoxSize) {
-                        // Firefox implements `contentBoxSize` as a single content rect, rather than an array
-                        const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize;
-                        options.width = contentBoxSize.inlineSize;
-                    } else {
-                        options.width = entry.contentRect.width;
-                    }
-                }
-                chart.draw(datatable, options);
-            }),
-            callback = (textNode, oldValue, newValue) => {
-                datatable = new google.visualization.DataTable();
-                try {
-                    table = table || JSON5.parse(newValue.trim());
-                    datatable = google.visualization.arrayToDataTable(table);
-                    chart.draw(datatable, options);
-                    table = null;
-                } catch (e) {
-                    target.innerText = e + newValue;
-                }
-            };
-        self.firstChild.innerText = "Loading ...";
-        self.variables({type: "string", title: "string", style: "string"}, {observed});
-        if (style) target.setAttribute("style", style);
-        self.addRow = (row) => {
-            datatable.addRows([row]);
-            chart.draw(datatable, options);
-        };
-        self.setValue = (row, col, value) => {
-            if (datatable) {
-                datatable.setValue(row, col, value);
-                chart.draw(datatable, options);
-            }
-        };
-        self.setOptions = (newOptions) => {
-            Object.assign(options, newOptions);
-        };
-        self.init = () => {
-            if (!options.title && title) options.title = title;
-            chart = new google.visualization[type](target);
-            addEventListener("change", ({target, value}) => {
-                if (target === "type") {
-                    chart = new google.visualization[type](target);
-                } else if (target === "title") {
-                    options.title = value;
-                } else if (target === "style") {
-                    target.setAttribute("style", value);
-                }
-                chart.draw(datatable, options);
-            });
-            const node = self.firstChild;
-            callback(node, node.textContent, node.textContent);
-            // Will be used by the Lightview global observer
-            node.characterDataMutationCallback = callback;
-            // resized charts if window resizes
-            resizeObserver.observe(target);
-        };
-        self.addEventListener("connected", ({target}) => {
-            google.charts.load("current", {"packages": ["corechart", "gauge"]});
-            google.charts.setOnLoadCallback(self.init);
-        });
-    }
-</script>
-</body>
-</html>

package/components/components.js

@@ -1,113 +0,0 @@
-const chart = (self,{packages = ["corechart"],options={},columns=[],rows=[],type,optionsTransform, rowTransform}={}) => {
-    options = {...options};
-    columns = [...columns];
-    let chart,
-        datatable;
-    const chartProxy = (chart) => {
-        const extras = {
-            setOption(name,value) {
-                options[name] = value;
-                chart.draw(datatable, options);
-            },
-            setOptions(newOptions) {
-                options = {...newOptions};
-                chart.draw(datatable, options);
-            }
-        };
-        return new Proxy(chart,{
-            get(target,property) {
-                let value = extras[property];
-                if(value!==undefined) return value;
-                value = target[property];
-                if(value!==undefined) return Reflect.get(target,property);
-                value = datatable[property];
-                if(typeof(value)==="function") {
-                    if(["add","insert","remove","set"].some((prefix) => property.startsWith(prefix))) {
-                        return (...args) => { value.call(datatable,...args); chart.draw(datatable,options); };
-                    };
-                    return value.bind(datatable);
-                };
-            }
-        });
-    };
-    const target = self.getElementById("target"),
-        resizeObserver = new ResizeObserver(entries => {
-            for (let entry of entries) {
-                if(entry.contentBoxSize) {
-                    // Firefox implements `contentBoxSize` as a single content rect, rather than an array
-                    const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize;
-                    if(options.width !== contentBoxSize.inlineSize) {
-                        options.width = contentBoxSize.inlineSize;
-                        chart.draw(datatable, options);
-                    }
-                } else {
-                    if(options.width !== entry.contentRect.width) {
-                        options.width = entry.contentRect.width;
-                        chart.draw(datatable, options);
-                    }
-                }
-            }
-        }),
-        callback = (textNode, oldValue, newValue) => {
-            datatable = new google.visualization.DataTable();
-            try {
-                const config = JSON5.parse(newValue.trim());
-                if(config.options) Object.assign(options,config.options);
-                if(config.columns) columns=config.columns;
-                if(config.rows) rows=config.rows;
-                columns.forEach((column) => {
-                    datatable.addColumn(column);
-                });
-                if(optionsTransform) options = optionsTransform(options);
-                if(rowTransform) rows = rows.map((row,index) => rowTransform(row,index,options));
-                datatable.addRows(rows);
-                const {selectedStyle,style} = options;
-                rows.forEach((row,index) => {
-                    if(selectedStyle) datatable.setRowProperty(index,"selectedStyle",selectedStyle);
-                    if(style) datatable.setRowProperty(index,"style",style);
-                });
-                chart.draw(datatable, options);
-            } catch (e) {
-                console.error(e + newValue);
-                target.innerText = e + newValue;
-            }
-        };
-    self.firstChild.innerText = "Loading ...";
-    self.variables({type: "string", title: "string", style: "string"}, {observed:true});
-    if(self.hasAttribute("style")) target.setAttribute("style",self.getAttribute("style"));
-    self.init = () => {
-        if(!options.title && self.hasAttribute("title")) options.title = self.getAttribute("title");
-        self.chart = chart = chartProxy(new google.visualization[type||self.getAttribute("type")](target));
-        addEventListener("change",({target,value}) => {
-            if (target === "type") {
-                chart = new google.visualization[type](target);
-            } else if (target === "title") {
-                options.title = value;
-            } else if(target === "style") {
-                target.setAttribute("style",value);
-            }
-            chart.draw(datatable, options);
-        });
-        const node = self.firstChild;
-        callback(node, node.textContent, node.textContent);
-        // Will be used by the Lightview global observer
-        node.characterDataMutationCallback = callback;
-        // resized charts if window resizes
-        resizeObserver.observe(document.body);
-        self.dispatchEvent(new Event("mounted"));
-    };
-    self.addEventListener("connected", ({target}) => {
-        const gscript = document.createElement("script");
-        gscript.setAttribute("src","https://www.gstatic.com/charts/loader.js");
-        gscript.onload = () => {
-            google.charts.load("current", {"packages":packages});
-            google.charts.setOnLoadCallback(self.init);
-        };
-        self.appendChild(gscript);
-    });
-    const jscript = document.createElement("script");
-    jscript.setAttribute("src","https://unpkg.com/json5@^2.0.0/dist/index.min.js");
-    document.head.appendChild(jscript);
-}
-
-export {chart};

package/components/gantt/example.html

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Lightview:Component:Gantt:Example</title>
-    <link href="./gantt.html" rel="module">
-    <script src="../../lightview.js"></script>
-</head>
-<body>
-<l-gantt id="myChart" style="height:500px;" title="Research Project">
-    {
-    options: { },
-    rows: [
-    ['Research', 'Find sources',"2015-01-01", "2015-01-05", null,  100,  null],
-    ['Write', 'Write paper',null,"2015-01-09", "3d", 25, 'Research,Outline'],
-    ['Cite', 'Create bibliography',null, "2015-01-07","1d" , 20, 'Research'],
-    ['Complete', 'Hand in paper', null, "2015-01-10", "1d" , 0, 'Cite,Write'],
-    ['Outline', 'Outline paper', null, "2015-01-06", "1d" , 100, 'Research']
-    ]
-    }
-</l-gantt>
-</body>
-</html>

package/components/gantt/gantt.html

@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Lightview:Component:Gantt</title>
-</head>
-<body>
-<div id="target"></div>
-<script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
-<script id="lightview">
-    (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
-        const {chart} = await import("../components.js"),
-            {duration} = await import("/types.js");
-        chart(self, {
-            packages: ["gantt"],
-            columns: [
-                {label: "Task ID", type: "string"},
-                {label: "Task Name", type: "string"},
-                {label: "Start Date", type: "date"},
-                {label: "End Date", type: "date"},
-                {label: "Duration", type: "number"},
-                {label: "% Complete", type: "number"},
-                {label: "Dependencies", type: "string"}
-            ],
-            type: "Gantt",
-            rowTransform(row, i) {
-                return row.map((item, index) => {
-                    if (item && (index === 2 || index === 3)) {
-                        const date = new Date(item);
-                        if (!date || typeof (date) !== "object" || !(date instanceof Date)) {
-                            throw new TypeError(`row:${i} col:${index} is not a date`);
-                        }
-                        return date;
-                    }
-                    if (item && index === 4) return duration.parse(item);
-                    return item;
-                })
-            }
-        });
-    }
-</script>
-</body>
-</html>