lego-dom 0.0.7 → 0.0.9

package/main.js

@@ -1,7 +1,7 @@
 const Lego = (() => {
   const registry = {}, proxyCache = new WeakMap(), privateData = new WeakMap();
   const forPools = new WeakMap();
-  
+
   const sfcLogic = new Map();
   const sharedStates = new Map(); // Track singleton states for $registry
   const routes = [];
@@ -17,22 +17,22 @@ const Lego = (() => {
     let queued = false;
     const componentsToUpdate = new Set();
     let isProcessing = false;
-    
+
     return {
       add: (el) => {
-        if (!el || isProcessing) return; 
+        if (!el || isProcessing) return;
         componentsToUpdate.add(el);
         if (queued) return;
         queued = true;
-        
+
         requestAnimationFrame(() => {
           isProcessing = true;
           const batch = Array.from(componentsToUpdate);
           componentsToUpdate.clear();
           queued = false;
-          
+
           batch.forEach(el => render(el));
-          
+
           setTimeout(() => {
             batch.forEach(el => {
               const state = el._studs;
@@ -124,7 +124,7 @@ const Lego = (() => {
   const safeEval = (expr, context) => {
     try {
       const scope = context.state || {};
-      
+
       const helpers = {
         $ancestors: (tag) => findAncestorState(context.self, tag),
         // Helper to access shared state by tag name
@@ -146,7 +146,7 @@ const Lego = (() => {
           }
         }
       `);
-      
+
       const result = func.call(scope, context.global, context.self, context.event, helpers);
       if (typeof result === 'function') return result.call(scope, context.event);
       return result;
@@ -167,10 +167,10 @@ const Lego = (() => {
   const bind = (container, componentRoot, loopCtx = null) => {
     const state = componentRoot._studs;
     const elements = container instanceof Element ? [container, ...container.querySelectorAll('*')] : container.querySelectorAll('*');
-    
+
     elements.forEach(child => {
       const childData = getPrivateData(child);
-      if (childData.bound) return; 
+      if (childData.bound) return;
 
       [...child.attributes].forEach(attr => {
         if (attr.name.startsWith('@')) {
@@ -234,14 +234,14 @@ const Lego = (() => {
         if (node.hasAttribute('b-for')) {
           const match = node.getAttribute('b-for').match(/^\s*(\w+)\s+in\s+(.+)\s*$/);
           if (match) {
-            bindings.push({ 
-              type: 'b-for', 
-              node, 
-              itemName: match[1], 
-              listName: match[2].trim(), 
-              template: node.innerHTML 
+            bindings.push({
+              type: 'b-for',
+              node,
+              itemName: match[1],
+              listName: match[2].trim(),
+              template: node.innerHTML
             });
-            node.innerHTML = ''; 
+            node.innerHTML = '';
           }
         }
         if (node.hasAttribute('b-text')) bindings.push({ type: 'b-text', node, path: node.getAttribute('b-text') });
@@ -326,12 +326,12 @@ const Lego = (() => {
             }
             const localScope = Object.assign(Object.create(state), { [b.itemName]: item });
             updateNodeBindings(child, localScope);
-            
+
             child.querySelectorAll('[b-sync]').forEach(input => {
-                const path = input.getAttribute('b-sync');
-                if (path.startsWith(b.itemName + '.')) {
-                    syncModelValue(input, resolve(path.split('.').slice(1).join('.'), item));
-                }
+              const path = input.getAttribute('b-sync');
+              if (path.startsWith(b.itemName + '.')) {
+                syncModelValue(input, resolve(path.split('.').slice(1).join('.'), item));
+              }
             });
             if (b.node.children[i] !== child) b.node.insertBefore(child, b.node.children[i] || null);
           });
@@ -349,23 +349,23 @@ const Lego = (() => {
     if (!el || el.nodeType !== 1) return;
     const data = getPrivateData(el);
     const name = el.tagName.toLowerCase();
-    
+
     if (registry[name] && !data.snapped) {
       data.snapped = true;
       const tpl = registry[name].content.cloneNode(true);
       const shadow = el.attachShadow({ mode: 'open' });
-      
+
       const defaultLogic = sfcLogic.get(name) || {};
       const attrLogic = parseJSObject(el.getAttribute('b-data') || '{}');
       el._studs = reactive({ ...defaultLogic, ...attrLogic }, el);
-      
+
       shadow.appendChild(tpl);
-      
+
       const style = shadow.querySelector('style');
       if (style) {
         style.textContent = style.textContent.replace(/\bself\b/g, ':host');
       }
-      
+
       bind(shadow, el);
       render(el);
 
@@ -373,9 +373,9 @@ const Lego = (() => {
         try { el._studs.mounted.call(el._studs); } catch (e) { console.error(`[Lego] Error in mounted <${name}>:`, e); }
       }
     }
-    
+
     let provider = el.parentElement;
-    while(provider && !provider._studs) provider = provider.parentElement;
+    while (provider && !provider._studs) provider = provider.parentElement;
     if (provider && provider._studs) bind(el, provider);
 
     [...el.children].forEach(snap);
@@ -399,7 +399,7 @@ const Lego = (() => {
 
     if (match.middleware) {
       const allowed = await match.middleware(params, Lego.globals);
-      if (!allowed) return; 
+      if (!allowed) return;
     }
 
     Lego.globals.params = params;
@@ -409,13 +409,19 @@ const Lego = (() => {
   return {
     init: () => {
       document.querySelectorAll('template[b-id]').forEach(t => registry[t.getAttribute('b-id')] = t);
-      const observer = new MutationObserver(m => m.forEach(r => { 
-        r.addedNodes.forEach(n => n.nodeType === 1 && snap(n)); 
-        r.removedNodes.forEach(n => n.nodeType === 1 && unsnap(n)); 
+      const observer = new MutationObserver(m => m.forEach(r => {
+        r.addedNodes.forEach(n => n.nodeType === 1 && snap(n));
+        r.removedNodes.forEach(n => n.nodeType === 1 && unsnap(n));
       }));
       observer.observe(document.body, { childList: true, subtree: true });
+
+      // Also snap the root element (body) to catch attributes like @event
       snap(document.body);
 
+      // Bind body specifically to catch global listeners like @todo-added in go.html
+      // We pass a mock componentRoot that points to Lego.globals
+      bind(document.body, { _studs: Lego.globals, _data: { bound: false } });
+
       if (routes.length > 0) {
         window.addEventListener('popstate', _matchRoute);
         document.addEventListener('click', e => {
@@ -436,10 +442,10 @@ const Lego = (() => {
       t.innerHTML = templateHTML;
       registry[tagName] = t;
       sfcLogic.set(tagName, logic);
-      
+
       // Initialize shared state for $registry singleton
       sharedStates.set(tagName.toLowerCase(), reactive({ ...logic }, document.body));
-      
+
       document.querySelectorAll(tagName).forEach(snap);
     },
     route: (path, tagName, middleware = null) => {

package/package.json

@@ -1,16 +1,49 @@
 {
   "name": "lego-dom",
-  "version": "0.0.7",
+  "version": "0.0.9",
+  "license": "MIT",
   "description": "A feature-rich web components + SFC frontend framework",
   "main": "main.js",
   "type": "module",
-  "keywords": ["framework", "sfc", "components", "lego", "legokit"],
-  "author": "",
+  "exports": {
+    ".": "./lego.js",
+    "./main.js": "./main.js",
+    "./lego.js": "./lego.js",
+    "./vite-plugin": "./vite-plugin.js",
+    "./parse-lego": "./parse-lego.js"
+  },
+  "keywords": [
+    "framework",
+    "sfc",
+    "components",
+    "lego",
+    "legokit"
+  ],
+  "author": "Tersoo Ortserga",
   "scripts": {
-    "test": "vitest run"
+    "test": "vitest run",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs"
   },
   "devDependencies": {
-    "vitest": "^1.0.0",
-    "jsdom": "^22.0.0"
+    "jsdom": "^22.0.0",
+    "vitepress": "^1.6.4",
+    "vitest": "^1.0.0"
+  },
+  "peerDependencies": {
+    "vite": "^4.0.0 || ^5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vite": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "fast-glob": "^3.3.2"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rayattack/legodom.git"
   }
 }

package/parse-lego.js

@@ -0,0 +1,119 @@
+/**
+ * Parser for .lego Single File Components
+ * Extracts template, script, and style sections from .lego files
+ */
+
+/**
+ * Parse a .lego file content into structured sections
+ * @param {string} content - Raw .lego file content
+ * @param {string} filename - Filename for error reporting
+ * @returns {{template: string, script: string, style: string, componentName: string}}
+ */
+export function parseLego(content, filename = 'component.lego') {
+  const result = {
+    template: '',
+    script: '',
+    style: '',
+    componentName: deriveComponentName(filename)
+  };
+
+  // Extract template section
+  const templateMatch = content.match(/<template>([\s\S]*?)<\/template>/);
+  if (templateMatch) {
+    result.template = templateMatch[1].trim();
+  }
+
+  // Extract script section
+  const scriptMatch = content.match(/<script>([\s\S]*?)<\/script>/);
+  if (scriptMatch) {
+    result.script = scriptMatch[1].trim();
+  }
+
+  // Extract style section
+  const styleMatch = content.match(/<style>([\s\S]*?)<\/style>/);
+  if (styleMatch) {
+    result.style = styleMatch[1].trim();
+  }
+
+  return result;
+}
+
+/**
+ * Derive component name from filename
+ * e.g., "sample-component.lego" -> "sample-component"
+ * @param {string} filename
+ * @returns {string}
+ */
+export function deriveComponentName(filename) {
+  const basename = filename.split('/').pop();
+  return basename.replace(/\.lego$/, '');
+}
+
+/**
+ * Generate Lego.define() code from parsed .lego file
+ * @param {object} parsed - Parsed .lego file object
+ * @returns {string} - JavaScript code string
+ */
+export function generateDefineCall(parsed) {
+  const { componentName, template, script, style } = parsed;
+
+  // Build template HTML
+  let templateHTML = '';
+  if (style) {
+    templateHTML += `<style>${style}</style>\n`;
+  }
+  if (template) {
+    templateHTML += template;
+  }
+
+  // Extract logic object from script
+  let logicCode = '{}';
+  if (script) {
+    // Try to extract default export
+    const defaultExportMatch = script.match(/export\s+default\s+({[\s\S]*})/);
+    if (defaultExportMatch) {
+      logicCode = defaultExportMatch[1];
+    } else {
+      // If no export default, assume entire script is the logic object
+      logicCode = script;
+    }
+  }
+
+  // Generate the Lego.define call
+  return `Lego.define('${componentName}', \`${escapeTemplate(templateHTML)}\`, ${logicCode});`;
+}
+
+/**
+ * Escape backticks and ${} in template strings
+ * @param {string} str
+ * @returns {string}
+ */
+function escapeTemplate(str) {
+  return str.replace(/`/g, '\\`').replace(/\$/g, '\\$');
+}
+
+/**
+ * Validate .lego file structure
+ * @param {object} parsed - Parsed .lego file object
+ * @returns {{valid: boolean, errors: string[]}}
+ */
+export function validateLego(parsed) {
+  const errors = [];
+
+  if (!parsed.template && !parsed.script && !parsed.style) {
+    errors.push('Component must have at least one section: <template>, <script>, or <style>');
+  }
+
+  if (!parsed.componentName) {
+    errors.push('Unable to derive component name from filename');
+  }
+
+  if (parsed.componentName && !/^[a-z][a-z0-9]*(-[a-z0-9]+)+$/.test(parsed.componentName)) {
+    errors.push(`Component name "${parsed.componentName}" must be kebab-case with at least one hyphen (e.g., "my-component")`);
+  }
+
+  return {
+    valid: errors.length === 0,
+    errors
+  };
+}

package/parse-lego.test.js

@@ -0,0 +1,107 @@
+import { describe, it, expect } from 'vitest';
+import { parseLego, generateDefineCall, validateLego, deriveComponentName } from './parse-lego.js';
+
+describe('Lego SFC Parser', () => {
+  describe('deriveComponentName', () => {
+    it('should derive component name from filename', () => {
+      expect(deriveComponentName('sample-component.lego')).toBe('sample-component');
+      expect(deriveComponentName('path/to/my-button.lego')).toBe('my-button');
+    });
+  });
+
+  describe('parseLego', () => {
+    it('should parse all three sections', () => {
+      const content = `
+<template>
+  <h1>{{ title }}</h1>
+</template>
+
+<script>
+export default {
+  title: 'Hello'
+}
+</script>
+
+<style>
+  self { color: red; }
+</style>
+      `;
+
+      const result = parseLego(content, 'test-component.lego');
+      expect(result.componentName).toBe('test-component');
+      expect(result.template).toContain('<h1>{{ title }}</h1>');
+      expect(result.script).toContain('export default');
+      expect(result.style).toContain('self { color: red; }');
+    });
+
+    it('should handle components with only template', () => {
+      const content = '<template><p>Hello</p></template>';
+      const result = parseLego(content, 'simple.lego');
+      expect(result.template).toBe('<p>Hello</p>');
+      expect(result.script).toBe('');
+      expect(result.style).toBe('');
+    });
+
+    it('should handle components with only script', () => {
+      const content = '<script>export default { count: 0 }</script>';
+      const result = parseLego(content, 'logic.lego');
+      expect(result.script).toContain('count: 0');
+      expect(result.template).toBe('');
+    });
+  });
+
+  describe('validateLego', () => {
+    it('should validate correct component name', () => {
+      const parsed = {
+        componentName: 'my-component',
+        template: '<div>Test</div>',
+        script: '',
+        style: ''
+      };
+      const result = validateLego(parsed);
+      expect(result.valid).toBe(true);
+      expect(result.errors).toHaveLength(0);
+    });
+
+    it('should reject invalid component names', () => {
+      const parsed = {
+        componentName: 'MyComponent',  // Not kebab-case
+        template: '<div>Test</div>',
+        script: '',
+        style: ''
+      };
+      const result = validateLego(parsed);
+      expect(result.valid).toBe(false);
+      expect(result.errors.length).toBeGreaterThan(0);
+    });
+
+    it('should require at least one section', () => {
+      const parsed = {
+        componentName: 'empty-component',
+        template: '',
+        script: '',
+        style: ''
+      };
+      const result = validateLego(parsed);
+      expect(result.valid).toBe(false);
+    });
+  });
+
+  describe('generateDefineCall', () => {
+    it('should generate valid Lego.define call', () => {
+      const parsed = {
+        componentName: 'test-comp',
+        template: '<button>Click</button>',
+        script: 'export default { count: 0 }',
+        style: 'self { color: blue; }'
+      };
+
+      const result = generateDefineCall(parsed);
+      expect(result).toContain('Lego.define');
+      expect(result).toContain('test-comp');
+      expect(result).toContain('<button>Click</button>');
+      expect(result).toContain('{ count: 0 }');
+      expect(result).toContain('self { color: blue; }');
+    });
+  });
+});

package/vite-plugin.js

@@ -0,0 +1,133 @@
+/**
+ * Vite plugin for Lego Single File Components
+ * Auto-discovers and transforms .lego files
+ */
+
+import { parseLego, generateDefineCall, validateLego } from './parse-lego.js';
+import path from 'path';
+import fg from 'fast-glob';
+
+const VIRTUAL_MODULE_ID = 'virtual:lego-components';
+const RESOLVED_VIRTUAL_MODULE_ID = '\0' + VIRTUAL_MODULE_ID;
+
+/**
+ * Vite plugin for Lego SFC support
+ * @param {object} options - Plugin options
+ * @param {string} options.componentsDir - Directory to search for .lego files
+ * @param {string[]} options.include - Glob patterns to include
+ * @returns {import('vite').Plugin}
+ */
+export default function legoPlugin(options = {}) {
+  const {
+    componentsDir = './src/components',
+    include = ['**/*.lego']
+  } = options;
+
+  let config;
+  let legoFiles = [];
+
+  return {
+    name: 'vite-plugin-lego',
+
+    configResolved(resolvedConfig) {
+      config = resolvedConfig;
+    },
+
+    async buildStart() {
+      // Auto-discover .lego files
+      const root = config?.root || process.cwd();
+      const searchPath = path.resolve(root, componentsDir);
+
+      try {
+        legoFiles = await fg(include, {
+          cwd: searchPath,
+          absolute: true
+        });
+
+        if (legoFiles.length > 0) {
+          console.log(`[vite-plugin-lego] Discovered ${legoFiles.length} component(s):`);
+          legoFiles.forEach(file => {
+            const name = path.basename(file);
+            console.log(`  - ${name}`);
+          });
+        }
+      } catch (err) {
+        console.warn(`[vite-plugin-lego] Could not scan for .lego files in ${searchPath}:`, err.message);
+        legoFiles = [];
+      }
+    },
+
+    resolveId(id) {
+      if (id === VIRTUAL_MODULE_ID) {
+        return RESOLVED_VIRTUAL_MODULE_ID;
+      }
+    },
+
+    async load(id) {
+      // Handle virtual module that imports all .lego components
+      if (id === RESOLVED_VIRTUAL_MODULE_ID) {
+        const imports = legoFiles.map((file, index) =>
+          `import component${index} from '${file}?lego-component';`
+        ).join('\n');
+
+        const exports = `export default function registerComponents() {\n  // Components are auto-registered when imported\n}`;
+
+        return `${imports}\n\n${exports}`;
+      }
+
+      // Handle individual .lego files
+      if (id.endsWith('.lego') || id.includes('.lego?')) {
+        const filePath = id.split('?')[0];
+        const fs = await import('fs');
+        const content = fs.readFileSync(filePath, 'utf-8');
+        const filename = path.basename(filePath);
+
+        const parsed = parseLego(content, filename);
+        const validation = validateLego(parsed);
+
+        if (!validation.valid) {
+          throw new Error(`Invalid .lego file "${filename}":\n${validation.errors.join('\n')}`);
+        }
+
+        const defineCall = generateDefineCall(parsed);
+
+        // Return as module that executes the define call
+        return `
+import { Lego } from 'lego-dom/main.js';
+
+${defineCall}
+
+export default '${parsed.componentName}';
+`;
+      }
+    },
+
+    handleHotUpdate({ file, server }) {
+      if (file.endsWith('.lego')) {
+        console.log(`[vite-plugin-lego] Hot reload: ${path.basename(file)}`);
+        // Trigger full reload for .lego files
+        server.ws.send({
+          type: 'full-reload',
+          path: '*'
+        });
+      }
+    },
+
+    transform(code, id) {
+      // Transform .lego files during build
+      if (id.endsWith('.lego') && !id.includes('?')) {
+        const parsed = parseLego(code, path.basename(id));
+        const validation = validateLego(parsed);
+
+        if (!validation.valid) {
+          throw new Error(`Invalid .lego file:\n${validation.errors.join('\n')}`);
+        }
+
+        return {
+          code: generateDefineCall(parsed),
+          map: null
+        };
+      }
+    }
+  };
+}