npm - lego-dom - Versions diffs - 0.0.7 → 0.0.8 - Mend

lego-dom 0.0.7 → 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (143) hide show

package/examples/vite-app/src/components/greeting-card.lego ADDED Viewed

@@ -0,0 +1,41 @@
+<template>
+  <style>
+    self {
+      display: block;
+      padding: 1rem;
+      background: #f3f4f6;
+      border-radius: 0.5rem;
+      margin: 0.5rem 0;
+    }
+    input {
+      padding: 0.5rem;
+      border: 1px solid #d1d5db;
+      border-radius: 0.25rem;
+      margin-right: 0.5rem;
+      font-size: 1rem;
+    }
+    .greeting {
+      margin-top: 1rem;
+      padding: 1rem;
+      background: white;
+      border-radius: 0.25rem;
+      font-size: 1.25rem;
+      color: #1f2937;
+    }
+  </style>
+  <div>
+    <input b-sync="name" type="text" placeholder="Enter your name">
+    <div class="greeting" b-if="name">
+      Hello, {{ name }}! 👋
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: ''
+}
+</script>

package/examples/vite-app/src/components/sample-component.lego ADDED Viewed

@@ -0,0 +1,75 @@
+<template>
+  <style>
+    self {
+      display: block;
+      padding: 1.5rem;
+      margin: 1rem 0;
+      border: 2px solid #4f46e5;
+      border-radius: 0.5rem;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: white;
+      font-family: system-ui, -apple-system, sans-serif;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    }
+    .header {
+      font-size: 1.5rem;
+      font-weight: bold;
+      margin-bottom: 0.5rem;
+    }
+    .content {
+      margin: 1rem 0;
+      line-height: 1.6;
+    }
+    button {
+      background: white;
+      color: #4f46e5;
+      border: none;
+      padding: 0.5rem 1rem;
+      border-radius: 0.25rem;
+      font-weight: 600;
+      cursor: pointer;
+      transition: transform 0.2s;
+    }
+    button:hover {
+      transform: scale(1.05);
+    }
+    .count {
+      display: inline-block;
+      background: rgba(255, 255, 255, 0.2);
+      padding: 0.25rem 0.75rem;
+      border-radius: 0.25rem;
+      margin-left: 0.5rem;
+    }
+  </style>
+  <div class="header">{{ title }}</div>
+  <div class="content">
+    <p>This is a sample LegoJS component loaded from a .lego file!</p>
+    <p>Message: {{ message }}</p>
+  </div>
+  <button @click="incrementCount()">
+    Click me!
+    <span class="count">{{ count }}</span>
+  </button>
+</template>
+<script>
+export default {
+  title: 'Sample Component',
+  message: 'Hello from .lego file!',
+  count: 0,
+  incrementCount() {
+    this.count++;
+  },
+  mounted() {
+    console.log('Sample component mounted!');
+  }
+}
+</script>

package/examples/vite-app/src/main.js ADDED Viewed

@@ -0,0 +1,11 @@
+// Import LegoJS core
+import { Lego } from 'lego-dom/main.js';
+// Import virtual module that auto-discovers and registers all .lego components
+import registerComponents from 'virtual:lego-components';
+// Register all auto-discovered components
+registerComponents();
+// Initialize LegoJS
+console.log('LegoJS initialized with auto-discovered components!');

package/examples/vite-app/vite.config.js ADDED Viewed

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite';
+import legoPlugin from 'lego-dom/vite-plugin';
+export default defineConfig({
+  plugins: [
+    legoPlugin({
+      componentsDir: './src/components',
+      include: ['**/*.lego']
+    })
+  ],
+  resolve: {
+    alias: {
+      'lego-dom/main.js': new URL('../../main.js', import.meta.url).pathname
+    }
+  }
+});

package/examples.js ADDED Viewed

@@ -0,0 +1,99 @@
+export const examples = {
+  counter: `<!DOCTYPE html>
+<html>
+<head>
+  <title>LegoJS Counter</title>
+</head>
+<body>
+  <template b-id="click-counter">
+    <style>
+      button { font-size: 1.2rem; padding: 0.5rem 1rem; }
+    </style>
+    <p>Count: {{ count }}</p>
+    <button @click="count++">Increment</button>
+  </template>
+  <click-counter b-data="{ count: 0 }"></click-counter>
+  <script src="https://unpkg.com/lego-dom/main.js"></script>
+</body>
+</html>`,
+  todo: `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Todo App - LegoJS</title>
+  <style>
+    body {
+      font-family: system-ui, -apple-system, sans-serif;
+      max-width: 600px;
+      margin: 2rem auto;
+      padding: 0 1rem;
+      background: #f5f5f5;
+    }
+    h1 {
+      text-align: center;
+      color: #333;
+    }
+  </style>
+</head>
+<body>
+  <script src="https://unpkg.com/lego-dom/main.js"></script>
+  <script>
+  </script>
+</body>
+</html>`,
+  form: `<!DOCTYPE html>
+<html>
+<head>
+  <title>LegoJS Form</title>
+</head>
+<body>
+  <template b-id="login-form">
+    <form @submit.prevent="login()">
+      <div>
+        <label>Email:</label>
+        <input type="email" b-sync="email">
+      </div>
+      <div>
+        <label>Password:</label>
+        <input type="password" b-sync="password">
+      </div>
+      <p b-if="error" style="color: red">{{ error }}</p>
+      <button type="submit">Login</button>
+    </form>
+  </template>
+  <login-form></login-form>
+  <script src="https://unpkg.com/lego-dom/main.js"></script>
+  <script>
+    Lego.define('login-form', document.querySelector('template[b-id="login-form"]').innerHTML, {
+      email: '',
+      password: '',
+      error: '',
+      login() {
+        if (!this.email || !this.password) {
+          this.error = 'Please fill in all fields';
+          return;
+        }
+        alert(\`Logging in as \${this.email}\`);
+        this.error = '';
+      }
+    });
+  </script>
+</body>
+</html>`
+};

package/package.json CHANGED Viewed

@@ -1,16 +1,44 @@
 {
   "name": "lego-dom",
-  "version": "0.0.7",
+  "version": "0.0.8",
+  "license": "MIT",
   "description": "A feature-rich web components + SFC frontend framework",
   "main": "main.js",
   "type": "module",
-  "keywords": ["framework", "sfc", "components", "lego", "legokit"],
+  "exports": {
+    ".": "./main.js",
+    "./main.js": "./main.js",
+    "./vite-plugin": "./vite-plugin.js",
+    "./parse-lego": "./parse-lego.js"
+  },
+  "keywords": [
+    "framework",
+    "sfc",
+    "components",
+    "lego",
+    "legokit"
+  ],
   "author": "",
   "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"
   }
 }

package/parse-lego.js ADDED Viewed

@@ -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 ADDED Viewed

@@ -0,0 +1,107 @@
+import { describe, it, expect } from 'vitest';
+import { parseLego, generateDefineCall, validateLego, deriveComponentName } from './parse-lego.js';
+describe('LegoJS 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 ADDED Viewed

@@ -0,0 +1,133 @@
+/**
+ * Vite plugin for LegoJS 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 LegoJS 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
+        };
+      }
+    }
+  };
+}