pulse-js-framework 1.7.25 → 1.7.26

package/README.md

@@ -48,6 +48,27 @@ npm install
 npm run dev
 ```
 
+### Or from a template
+
+Create projects from built-in example apps:
+
+```bash
+# E-commerce app (products, cart, checkout)
+npx pulse-js-framework create my-shop --ecommerce
+
+# Todo app (filtering, local storage)
+npx pulse-js-framework create my-todos --todo
+
+# Blog (posts, sidebar, navigation)
+npx pulse-js-framework create my-blog --blog
+
+# Chat app (messages, users, emoji picker)
+npx pulse-js-framework create my-chat --chat
+
+# Dashboard (data visualization)
+npx pulse-js-framework create my-dashboard --dashboard
+```
+
 ### Or use directly
 
 ```javascript
@@ -139,6 +160,11 @@ See [Pulse DSL documentation](docs/pulse-dsl.md) for full syntax reference.
 # Project Creation
 pulse create <name>              # Create new project
 pulse create <name> --typescript # Create TypeScript project
+pulse create <name> --ecommerce  # Create from E-Commerce template
+pulse create <name> --todo       # Create from Todo App template
+pulse create <name> --blog       # Create from Blog template
+pulse create <name> --chat       # Create from Chat template
+pulse create <name> --dashboard  # Create from Dashboard template
 pulse init --typescript          # Initialize in current directory
 
 # Development

package/cli/help.js

@@ -29,18 +29,29 @@ Creates a new Pulse project with a complete starter template including:
 - Project structure (src/, public/)
 - Vite configuration for development and building
 - Sample App.pulse component with counter example
-- Package.json with all necessary scripts`,
+- Package.json with all necessary scripts
+
+You can also create projects from built-in example templates using
+the template flags (--ecommerce, --todo, --blog, --chat, --dashboard).`,
     arguments: [
       { name: '<name>', description: 'Name of the project directory to create' }
     ],
     options: [
       { flag: '--typescript, --ts', description: 'Create a TypeScript project with tsconfig.json' },
-      { flag: '--minimal', description: 'Create minimal project structure without extras' }
+      { flag: '--minimal', description: 'Create minimal project structure without extras' },
+      { flag: '--ecommerce', description: 'Use E-Commerce template (products, cart, checkout)' },
+      { flag: '--todo', description: 'Use Todo App template (filtering, local storage)' },
+      { flag: '--blog', description: 'Use Blog template (posts, sidebar, navigation)' },
+      { flag: '--chat', description: 'Use Chat template (messages, users, emoji picker)' },
+      { flag: '--dashboard', description: 'Use Dashboard template (data visualization)' }
     ],
     examples: [
       { cmd: 'pulse create my-app', desc: 'Create a new JavaScript project' },
       { cmd: 'pulse create my-app --typescript', desc: 'Create a new TypeScript project' },
-      { cmd: 'pulse create my-app --minimal', desc: 'Create a minimal project' }
+      { cmd: 'pulse create my-app --minimal', desc: 'Create a minimal project' },
+      { cmd: 'pulse create my-shop --ecommerce', desc: 'Create from E-Commerce template' },
+      { cmd: 'pulse create my-todos --todo', desc: 'Create from Todo App template' },
+      { cmd: 'pulse create my-blog --blog', desc: 'Create from Blog template' }
     ]
   },
 

package/cli/index.js

@@ -6,7 +6,7 @@
 
 import { fileURLToPath } from 'url';
 import { dirname, join, resolve, relative } from 'path';
-import { existsSync, mkdirSync, writeFileSync, readFileSync, readdirSync, watch } from 'fs';
+import { existsSync, mkdirSync, writeFileSync, readFileSync, readdirSync, watch, cpSync, statSync } from 'fs';
 import { log } from './logger.js';
 import { findPulseFiles, parseArgs } from './utils/file-utils.js';
 import { runHelp } from './help.js';
@@ -18,6 +18,15 @@ const __dirname = dirname(__filename);
 const pkg = JSON.parse(readFileSync(join(__dirname, '..', 'package.json'), 'utf-8'));
 const VERSION = pkg.version;
 
+// Available example templates
+const TEMPLATES = {
+  ecommerce: { name: 'E-Commerce', description: 'Shopping cart with products, checkout, and cart management' },
+  todo: { name: 'Todo App', description: 'Classic todo list with filtering and local storage' },
+  blog: { name: 'Blog', description: 'Blogging platform with posts, sidebar, and navigation' },
+  chat: { name: 'Chat', description: 'Real-time chat with messages, users, and emoji picker' },
+  dashboard: { name: 'Dashboard', description: 'Analytics dashboard with data visualization' }
+};
+
 // Command handlers
 const commands = {
   help: showHelp,
@@ -191,6 +200,87 @@ function showVersion() {
   log.info(`Pulse Framework v${VERSION}`);
 }
 
+/**
+ * Copy example template to project directory
+ * Transforms imports from /runtime/index.js to pulse-js-framework/runtime
+ * @param {string} templateName - Name of the template (ecommerce, todo, blog, chat, dashboard)
+ * @param {string} projectPath - Destination project path
+ * @param {string} projectName - Name of the project
+ */
+function copyExampleTemplate(templateName, projectPath, projectName) {
+  const examplesDir = join(__dirname, '..', 'examples');
+  const templateDir = join(examplesDir, templateName);
+
+  if (!existsSync(templateDir)) {
+    throw new Error(`Template "${templateName}" not found at ${templateDir}`);
+  }
+
+  /**
+   * Recursively copy directory, transforming JS files
+   */
+  function copyDir(src, dest) {
+    if (!existsSync(dest)) {
+      mkdirSync(dest, { recursive: true });
+    }
+
+    const entries = readdirSync(src, { withFileTypes: true });
+
+    for (const entry of entries) {
+      const srcPath = join(src, entry.name);
+      const destPath = join(dest, entry.name);
+
+      // Skip node_modules and dist directories
+      if (entry.name === 'node_modules' || entry.name === 'dist') {
+        continue;
+      }
+
+      if (entry.isDirectory()) {
+        copyDir(srcPath, destPath);
+      } else {
+        // Read file content
+        let content = readFileSync(srcPath, 'utf-8');
+
+        // Transform imports in JS files
+        if (entry.name.endsWith('.js') || entry.name.endsWith('.ts')) {
+          // Transform /runtime/index.js imports to pulse-js-framework/runtime
+          content = content.replace(
+            /from\s+['"]\/runtime\/index\.js['"]/g,
+            "from 'pulse-js-framework/runtime'"
+          );
+          content = content.replace(
+            /from\s+['"]\/runtime['"]/g,
+            "from 'pulse-js-framework/runtime'"
+          );
+          // Transform other runtime submodule imports
+          content = content.replace(
+            /from\s+['"]\/runtime\/([^'"]+)['"]/g,
+            "from 'pulse-js-framework/runtime/$1'"
+          );
+        }
+
+        writeFileSync(destPath, content);
+      }
+    }
+  }
+
+  // Copy src directory
+  const srcDir = join(templateDir, 'src');
+  if (existsSync(srcDir)) {
+    copyDir(srcDir, join(projectPath, 'src'));
+  }
+
+  // Copy index.html if exists
+  const indexHtml = join(templateDir, 'index.html');
+  if (existsSync(indexHtml)) {
+    let content = readFileSync(indexHtml, 'utf-8');
+    // Update title to project name
+    content = content.replace(/<title>[^<]*<\/title>/, `<title>${projectName}</title>`);
+    writeFileSync(join(projectPath, 'index.html'), content);
+  }
+
+  return true;
+}
+
 /**
  * Create a new project
  */
@@ -200,7 +290,16 @@ async function createProject(args) {
 
   if (!projectName) {
     log.error('Please provide a project name.');
-    log.info('Usage: pulse create <project-name>');
+    log.info('Usage: pulse create <project-name> [options]');
+    log.info('');
+    log.info('Options:');
+    log.info('  --typescript, --ts    Create TypeScript project');
+    log.info('  --minimal             Create minimal project');
+    log.info('');
+    log.info('Templates (use existing example apps):');
+    for (const [key, info] of Object.entries(TEMPLATES)) {
+      log.info(`  --${key.padEnd(12)} ${info.description}`);
+    }
     process.exit(1);
   }
 
@@ -214,6 +313,93 @@ async function createProject(args) {
   const useTypescript = options.typescript || options.ts || false;
   const minimal = options.minimal || false;
 
+  // Check for template options
+  let selectedTemplate = null;
+  for (const templateName of Object.keys(TEMPLATES)) {
+    if (options[templateName]) {
+      selectedTemplate = templateName;
+      break;
+    }
+  }
+
+  // If a template is selected, use the template-based creation
+  if (selectedTemplate) {
+    const templateInfo = TEMPLATES[selectedTemplate];
+    log.info(`Creating new Pulse project: ${projectName} (${templateInfo.name} template)`);
+
+    // Create project directory
+    mkdirSync(projectPath);
+    mkdirSync(join(projectPath, 'public'));
+
+    // Copy template files
+    try {
+      copyExampleTemplate(selectedTemplate, projectPath, projectName);
+      log.info(`  ✓ Copied ${templateInfo.name} template files`);
+    } catch (err) {
+      log.error(`Failed to copy template: ${err.message}`);
+      process.exit(1);
+    }
+
+    // Create package.json for template project
+    const packageJson = {
+      name: projectName,
+      version: '0.1.0',
+      type: 'module',
+      scripts: {
+        dev: 'pulse dev',
+        build: 'pulse build',
+        preview: 'vite preview',
+        test: 'pulse test',
+        lint: 'pulse lint'
+      },
+      dependencies: {
+        'pulse-js-framework': '^1.0.0'
+      },
+      devDependencies: {
+        vite: '^5.0.0'
+      }
+    };
+
+    writeFileSync(
+      join(projectPath, 'package.json'),
+      JSON.stringify(packageJson, null, 2)
+    );
+
+    // Create vite.config.js
+    const viteConfig = `import { defineConfig } from 'vite';
+import pulse from 'pulse-js-framework/vite';
+
+export default defineConfig({
+  plugins: [pulse()]
+});
+`;
+    writeFileSync(join(projectPath, 'vite.config.js'), viteConfig);
+
+    // Create .gitignore
+    const gitignore = `node_modules
+dist
+.DS_Store
+*.local
+`;
+    writeFileSync(join(projectPath, '.gitignore'), gitignore);
+
+    log.info(`
+Project created successfully!
+
+Next steps:
+  cd ${projectName}
+  npm install
+  npm run dev
+
+Template: ${templateInfo.name}
+  ${templateInfo.description}
+
+Happy coding with Pulse!
+    `);
+    return;
+  }
+
+  // Standard project creation (no template)
   log.info(`Creating new Pulse project: ${projectName}${useTypescript ? ' (TypeScript)' : ''}`);
 
   // Create project structure

package/compiler/transformer/view.js

@@ -355,8 +355,17 @@ function parseBalancedExpression(str, start) {
  * @param {string} selector - CSS selector with potential dynamic attributes
  * @returns {Object} { cleanSelector, dynamicAttrs }
  */
+/**
+ * Extract all attributes (static and dynamic) from a selector string.
+ * Static attributes become part of the attrs object passed to el().
+ * Dynamic attributes (with {expr} values) are bound via bind().
+ *
+ * @param {string} selector - Element selector like "div.class[href=url][value={expr}]"
+ * @returns {{cleanSelector: string, staticAttrs: Array<{name: string, value: string}>, dynamicAttrs: Array<{name: string, expr: string}>}}
+ */
 function extractDynamicAttributes(selector) {
   const dynamicAttrs = [];
+  const staticAttrs = [];
   let cleanSelector = '';
   let i = 0;
 
@@ -367,7 +376,7 @@ function extractDynamicAttributes(selector) {
 
       // Parse attribute name
       let attrName = '';
-      while (i < selector.length && /[a-zA-Z0-9-]/.test(selector[i])) {
+      while (i < selector.length && /[a-zA-Z0-9-_]/.test(selector[i])) {
         attrName += selector[i];
         i++;
       }
@@ -382,9 +391,12 @@ function extractDynamicAttributes(selector) {
         // Skip whitespace
         while (i < selector.length && /\s/.test(selector[i])) i++;
 
-        // Check for optional quote
-        const hasQuote = selector[i] === '"';
-        if (hasQuote) i++;
+        // Determine quote character (or none)
+        let quoteChar = null;
+        if (selector[i] === '"' || selector[i] === "'") {
+          quoteChar = selector[i];
+          i++;
+        }
 
         // Check for dynamic expression {
         if (selector[i] === '{') {
@@ -394,7 +406,7 @@ function extractDynamicAttributes(selector) {
             i = result.end + 1; // Skip past closing }
 
             // Skip optional closing quote
-            if (hasQuote && selector[i] === '"') i++;
+            if (quoteChar && selector[i] === quoteChar) i++;
 
             // Skip closing ]
             if (selector[i] === ']') i++;
@@ -403,16 +415,40 @@ function extractDynamicAttributes(selector) {
             continue;
           }
         }
-      }
 
-      // Not a dynamic attribute, copy everything from [ to ]
-      let bracketDepth = 1;
-      cleanSelector += '[';
-      while (i < selector.length && bracketDepth > 0) {
-        if (selector[i] === '[') bracketDepth++;
-        else if (selector[i] === ']') bracketDepth--;
-        cleanSelector += selector[i];
-        i++;
+        // Static attribute - parse the value
+        let attrValue = '';
+        if (quoteChar) {
+          // Quoted value - read until closing quote
+          while (i < selector.length && selector[i] !== quoteChar) {
+            attrValue += selector[i];
+            i++;
+          }
+          // Skip closing quote
+          if (selector[i] === quoteChar) i++;
+        } else {
+          // Unquoted value - read until ]
+          while (i < selector.length && selector[i] !== ']') {
+            attrValue += selector[i];
+            i++;
+          }
+        }
+
+        // Skip closing ]
+        if (selector[i] === ']') i++;
+
+        // Add to static attrs (don't put in selector)
+        staticAttrs.push({ name: attrName, value: attrValue });
+        continue;
+      } else {
+        // Boolean attribute (no value) like [disabled]
+        // Skip to closing ]
+        while (i < selector.length && selector[i] !== ']') i++;
+        if (selector[i] === ']') i++;
+
+        // Add as boolean attribute
+        staticAttrs.push({ name: attrName, value: '' });
+        continue;
       }
     } else {
       cleanSelector += selector[i];
@@ -420,7 +456,7 @@ function extractDynamicAttributes(selector) {
     }
   }
 
-  return { cleanSelector, dynamicAttrs };
+  return { cleanSelector, staticAttrs, dynamicAttrs };
 }
 
 /**
@@ -445,8 +481,8 @@ export function transformElement(transformer, node, indent) {
     return transformComponentCall(transformer, node, indent);
   }
 
-  // Extract dynamic attributes from selector (e.g., [value={searchQuery}])
-  let { cleanSelector, dynamicAttrs } = extractDynamicAttributes(node.selector);
+  // Extract all attributes from selector (static and dynamic)
+  let { cleanSelector, staticAttrs, dynamicAttrs } = extractDynamicAttributes(node.selector);
 
   // Add scoped class to selector if CSS scoping is enabled
   let selector = cleanSelector;
@@ -483,51 +519,46 @@ export function transformElement(transformer, node, indent) {
     transformer.usesA11y.trapFocus = true;
   }
 
-  // Build ARIA attributes from directives
-  const ariaAttrs = [];
+  // Collect all static attributes for the el() attrs object
+  const allStaticAttrs = [];
 
-  // Process @a11y directives
+  // Add attributes extracted from selector
+  for (const attr of staticAttrs) {
+    // Escape single quotes in values
+    const escapedValue = attr.value.replace(/'/g, "\\'");
+    if (attr.value === '') {
+      // Boolean attribute
+      allStaticAttrs.push(`'${attr.name}': true`);
+    } else {
+      allStaticAttrs.push(`'${attr.name}': '${escapedValue}'`);
+    }
+  }
+
+  // Process @a11y directives - add to static attrs
   for (const directive of a11yDirectives) {
     const attrs = buildA11yAttributes(transformer, directive);
     for (const [key, value] of Object.entries(attrs)) {
       const valueCode = typeof value === 'string' ? `'${value}'` : value;
-      ariaAttrs.push(`'${key}': ${valueCode}`);
+      allStaticAttrs.push(`'${key}': ${valueCode}`);
     }
   }
 
   // Process @live directives (add aria-live and aria-atomic)
   for (const directive of liveDirectives) {
     const priority = directive.priority || 'polite';
-    ariaAttrs.push(`'aria-live': '${priority}'`);
-    ariaAttrs.push(`'aria-atomic': 'true'`);
-  }
-
-  // Build selector with inline ARIA attributes
-  let enhancedSelector = selector;
-  if (ariaAttrs.length > 0) {
-    // Convert ARIA attrs to selector attribute syntax where possible
-    // For dynamic values, we'll need to use setAriaAttributes
-    const staticAttrs = [];
-    const dynamicAttrs = [];
-
-    for (const attr of ariaAttrs) {
-      const match = attr.match(/^'([^']+)':\s*'([^']+)'$/);
-      if (match) {
-        // Static attribute - can embed in selector
-        staticAttrs.push(`[${match[1]}=${match[2]}]`);
-      } else {
-        dynamicAttrs.push(attr);
-      }
-    }
-
-    // Add static ARIA attributes to selector
-    enhancedSelector = selector + staticAttrs.join('');
+    allStaticAttrs.push(`'aria-live': '${priority}'`);
+    allStaticAttrs.push(`'aria-atomic': 'true'`);
   }
 
   // Start with el() call - escape single quotes in selector
-  const escapedSelector = enhancedSelector.replace(/'/g, "\\'");
+  const escapedSelector = selector.replace(/'/g, "\\'");
   parts.push(`${pad}el('${escapedSelector}'`);
 
+  // Add attributes object if we have any static attributes
+  if (allStaticAttrs.length > 0) {
+    parts.push(`, { ${allStaticAttrs.join(', ')} }`);
+  }
+
   // Add text content
   if (node.textContent.length > 0) {
     for (const text of node.textContent) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pulse-js-framework",
-  "version": "1.7.25",
+  "version": "1.7.26",
   "description": "A declarative DOM framework with CSS selector-based structure and reactive pulsations",
   "type": "module",
   "main": "index.js",