pulse-js-framework 1.7.24 → 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/expressions.js

@@ -25,10 +25,14 @@ export function transformExpression(transformer, node) {
 
   switch (node.type) {
     case NodeType.Identifier:
+      // Props take precedence over state (props are destructured in render scope)
+      if (transformer.propVars.has(node.name)) {
+        return node.name;
+      }
       if (transformer.stateVars.has(node.name)) {
         return `${node.name}.get()`;
       }
-      // Props are accessed directly (already destructured)
+      // Other identifiers (actions, imports, etc.) accessed directly
       return node.name;
 
     case NodeType.Literal:
@@ -153,8 +157,13 @@ export function transformExpression(transformer, node) {
  */
 export function transformExpressionString(transformer, exprStr) {
   // Simple transformation: wrap state vars with .get()
+  // Props take precedence - don't wrap props with .get()
   let result = exprStr;
   for (const stateVar of transformer.stateVars) {
+    // Skip if this var name is also a prop (props shadow state in render scope)
+    if (transformer.propVars.has(stateVar)) {
+      continue;
+    }
     result = result.replace(
       new RegExp(`\\b${stateVar}\\b`, 'g'),
       `${stateVar}.get()`

package/compiler/transformer/view.js

@@ -298,34 +298,165 @@ export function transformFocusTrapDirective(transformer, node, indent) {
   return `{ ${optionsCode} }`;
 }
 
+/**
+ * Parse a balanced expression starting from an opening brace
+ * Handles nested braces and string literals correctly
+ * @param {string} str - The string to parse
+ * @param {number} start - Index of the opening brace
+ * @returns {Object} { expr: string, end: number } or null if invalid
+ */
+function parseBalancedExpression(str, start) {
+  if (str[start] !== '{') return null;
+
+  let depth = 0;
+  let inString = false;
+  let stringChar = '';
+  let i = start;
+
+  while (i < str.length) {
+    const char = str[i];
+    const prevChar = i > 0 ? str[i - 1] : '';
+
+    // Handle string literals
+    if (!inString && (char === '"' || char === "'" || char === '`')) {
+      inString = true;
+      stringChar = char;
+    } else if (inString && char === stringChar && prevChar !== '\\') {
+      inString = false;
+      stringChar = '';
+    }
+
+    // Count braces only outside strings
+    if (!inString) {
+      if (char === '{') {
+        depth++;
+      } else if (char === '}') {
+        depth--;
+        if (depth === 0) {
+          // Found the matching closing brace
+          return {
+            expr: str.slice(start + 1, i),
+            end: i
+          };
+        }
+      }
+    }
+
+    i++;
+  }
+
+  return null; // Unbalanced braces
+}
+
 /**
  * Extract dynamic attributes from a selector
  * Returns { cleanSelector, dynamicAttrs } where dynamicAttrs is an array of { name, expr }
+ * Handles complex expressions including ternaries, nested braces, and string literals
  * @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 = [];
-  // Match attributes with {expression} values: [name={expr}] or [name="{expr}"]
-  const attrPattern = /\[([a-zA-Z][a-zA-Z0-9-]*)\s*=\s*\{([^}]+)\}\]/g;
-  const attrPatternQuoted = /\[([a-zA-Z][a-zA-Z0-9-]*)\s*=\s*"\{([^}]+)\}"\]/g;
-
-  let cleanSelector = selector;
-
-  // Extract unquoted dynamic attributes: [value={expr}]
-  let match;
-  while ((match = attrPattern.exec(selector)) !== null) {
-    dynamicAttrs.push({ name: match[1], expr: match[2] });
-  }
-  cleanSelector = cleanSelector.replace(attrPattern, '');
+  const staticAttrs = [];
+  let cleanSelector = '';
+  let i = 0;
+
+  while (i < selector.length) {
+    // Look for attribute start: [
+    if (selector[i] === '[') {
+      i++; // Skip [
+
+      // Parse attribute name
+      let attrName = '';
+      while (i < selector.length && /[a-zA-Z0-9-_]/.test(selector[i])) {
+        attrName += selector[i];
+        i++;
+      }
 
-  // Extract quoted dynamic attributes: [value="{expr}"]
-  while ((match = attrPatternQuoted.exec(selector)) !== null) {
-    dynamicAttrs.push({ name: match[1], expr: match[2] });
+      // Skip whitespace
+      while (i < selector.length && /\s/.test(selector[i])) i++;
+
+      // Check for =
+      if (i < selector.length && selector[i] === '=') {
+        i++; // Skip =
+
+        // Skip whitespace
+        while (i < selector.length && /\s/.test(selector[i])) 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] === '{') {
+          const result = parseBalancedExpression(selector, i);
+          if (result) {
+            dynamicAttrs.push({ name: attrName, expr: result.expr });
+            i = result.end + 1; // Skip past closing }
+
+            // Skip optional closing quote
+            if (quoteChar && selector[i] === quoteChar) i++;
+
+            // Skip closing ]
+            if (selector[i] === ']') i++;
+
+            // Don't add this attribute to cleanSelector
+            continue;
+          }
+        }
+
+        // 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];
+      i++;
+    }
   }
-  cleanSelector = cleanSelector.replace(attrPatternQuoted, '');
 
-  return { cleanSelector, dynamicAttrs };
+  return { cleanSelector, staticAttrs, dynamicAttrs };
 }
 
 /**
@@ -350,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;
@@ -388,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) {
@@ -577,6 +703,18 @@ export function transformComponentCall(transformer, node, indent) {
  * @param {number} indent - Indentation level
  * @returns {string} JavaScript code
  */
+/**
+ * Escape a string for use in a template literal
+ * @param {string} str - String to escape
+ * @returns {string} Escaped string
+ */
+function escapeTemplateString(str) {
+  return str
+    .replace(/\\/g, '\\\\')  // Escape backslashes first
+    .replace(/`/g, '\\`')    // Escape backticks
+    .replace(/\$/g, '\\$');  // Escape dollar signs to prevent ${} interpretation
+}
+
 export function transformTextNode(transformer, node, indent) {
   const pad = ' '.repeat(indent);
   const parts = node.parts;
@@ -589,7 +727,8 @@ export function transformTextNode(transformer, node, indent) {
   // Has interpolations - use text() with a function
   const textParts = parts.map(part => {
     if (typeof part === 'string') {
-      return JSON.stringify(part);
+      // Escape for template literal (not JSON.stringify which adds quotes)
+      return escapeTemplateString(part);
     }
     // Interpolation
     const expr = transformExpressionString(transformer, part.expression);

package/package.json

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