pulse-js-framework 1.4.7 → 1.4.9

package/README.md

@@ -136,6 +136,7 @@ style {
 - CSS scoping (styles are automatically scoped to component)
 - Native `router {}` and `store {}` blocks
 - Detailed error messages with line/column info
+- Source map generation (v1.4.9) for debugging original `.pulse` code
 
 ### Router & Store DSL (v1.4.0)
 
@@ -266,7 +267,53 @@ router.start();
 - Per-route guards (`beforeEnter`)
 - Global guards (`beforeEach`, `beforeResolve`, `afterEach`)
 - Scroll restoration
-- Lazy-loaded routes (async handlers)
+- Lazy-loaded routes with `lazy()` and `preload()`
+- Middleware pipeline (Koa-style)
+
+#### Lazy Loading & Middleware (v1.4.9)
+
+```javascript
+import { createRouter, lazy, preload } from 'pulse-js-framework/runtime/router';
+
+// Lazy load components
+const routes = {
+  '/': HomePage,
+  '/dashboard': lazy(() => import('./Dashboard.js')),
+  '/settings': lazy(() => import('./Settings.js'), {
+    loading: () => el('div.spinner', 'Loading...'),
+    error: (err) => el('div.error', `Failed: ${err.message}`),
+    timeout: 5000
+  })
+};
+
+// Preload on hover
+link.addEventListener('mouseenter', () => preload(routes['/dashboard']));
+
+// Middleware
+const router = createRouter({
+  routes,
+  middleware: [
+    // Logger middleware
+    async (ctx, next) => {
+      console.log('Navigating to:', ctx.to.path);
+      await next();
+    },
+    // Auth middleware
+    async (ctx, next) => {
+      if (ctx.to.meta.requiresAuth && !isLoggedIn()) {
+        return ctx.redirect('/login');
+      }
+      await next();
+    }
+  ]
+});
+
+// Add middleware dynamically
+const unsubscribe = router.use(async (ctx, next) => {
+  ctx.meta.startTime = Date.now();
+  await next();
+});
+```
 
 ### Store
 
@@ -451,11 +498,11 @@ onNativeReady(({ platform }) => {
 
 **Available APIs:** Storage, Device Info, Network Status, Toast, Vibration, Clipboard, App Lifecycle
 
-## VSCode Extension
+## IDE Extensions
 
-Pulse includes a VSCode extension for `.pulse` files with syntax highlighting and snippets.
+Pulse provides extensions for popular IDEs with syntax highlighting and snippets.
 
-### Installation
+### VS Code
 
 ```bash
 # Windows (PowerShell)
@@ -467,12 +514,30 @@ cd vscode-extension
 bash install.sh
 ```
 
-Then restart VSCode. You'll get:
+Then restart VS Code. You'll get:
 - Syntax highlighting for `.pulse` files
 - Code snippets (`page`, `state`, `view`, `@click`, etc.)
 - Bracket matching and auto-closing
 - Comment toggling (Ctrl+/)
 
+### IntelliJ IDEA / WebStorm
+
+```bash
+cd intellij-plugin
+./gradlew buildPlugin
+```
+
+Then install the plugin from `build/distributions/pulse-language-1.0.0.zip`:
+1. Open **Settings** > **Plugins**
+2. Click gear icon > **Install Plugin from Disk...**
+3. Select the `.zip` file and restart
+
+Features:
+- Syntax highlighting for `.pulse` files
+- 17 Live Templates (snippets)
+- Code folding for blocks
+- Customizable color scheme
+
 ## TypeScript Support
 
 Pulse includes full TypeScript definitions for IDE autocomplete and type checking:

package/cli/dev.js

@@ -79,7 +79,7 @@ export async function startDevServer(args) {
         try {
           const source = readFileSync(filePath, 'utf-8');
           const result = compile(source, {
-            runtime: '/node_modules/pulse-js-framework/runtime/index.js'
+            runtime: '/runtime/index.js'
           });
 
           if (result.success) {
@@ -105,6 +105,29 @@ export async function startDevServer(args) {
         res.end(content);
         return;
       }
+
+      // Check if there's a .pulse file that should be compiled to .js
+      const pulseFilePath = filePath.replace(/\.(js|mjs)$/, '.pulse');
+      if (existsSync(pulseFilePath)) {
+        try {
+          const source = readFileSync(pulseFilePath, 'utf-8');
+          const result = compile(source, {
+            runtime: '/runtime/index.js'
+          });
+
+          if (result.success) {
+            res.writeHead(200, { 'Content-Type': 'application/javascript' });
+            res.end(result.code);
+          } else {
+            res.writeHead(500, { 'Content-Type': 'text/plain' });
+            res.end(`Compilation error: ${result.errors.map(e => e.message).join('\n')}`);
+          }
+        } catch (error) {
+          res.writeHead(500, { 'Content-Type': 'text/plain' });
+          res.end(`Error: ${error.message}`);
+        }
+        return;
+      }
     }
 
     // Handle node_modules

package/cli/lint.js

@@ -14,6 +14,9 @@ export const LintRules = {
   'undefined-reference': { severity: 'error', fixable: false },
   'duplicate-declaration': { severity: 'error', fixable: false },
 
+  // Security rules (warnings)
+  'xss-vulnerability': { severity: 'warning', fixable: false },
+
   // Usage rules (warnings)
   'unused-import': { severity: 'warning', fixable: true },
   'unused-state': { severity: 'warning', fixable: false },
@@ -127,6 +130,9 @@ export class SemanticAnalyzer {
     // Phase 4: Style checks
     this.checkStyle();
 
+    // Phase 5: Security checks (XSS detection)
+    this.checkSecurity();
+
     return this.diagnostics;
   }
 
@@ -519,6 +525,117 @@ export class SemanticAnalyzer {
     }
   }
 
+  /**
+   * Check for security vulnerabilities (XSS patterns)
+   */
+  checkSecurity() {
+    // Check actions for dangerous DOM manipulation
+    if (this.ast.actions && this.ast.actions.functions) {
+      for (const fn of this.ast.actions.functions) {
+        if (fn.body) {
+          this.checkForXSS(fn.body, fn.name, fn.line, fn.column);
+        }
+      }
+    }
+
+    // Check view for dangerous patterns in directives
+    if (this.ast.view) {
+      this.checkViewForXSS(this.ast.view);
+    }
+  }
+
+  /**
+   * Check code string for XSS vulnerabilities
+   */
+  checkForXSS(code, context, line, column) {
+    if (typeof code !== 'string') return;
+
+    // Dangerous DOM manipulation patterns
+    const xssPatterns = [
+      {
+        pattern: /\.innerHTML\s*=\s*(?!['"]\s*['"])/,
+        message: 'Assigning dynamic content to innerHTML can lead to XSS. Use textContent or sanitize input.'
+      },
+      {
+        pattern: /\.outerHTML\s*=\s*(?!['"]\s*['"])/,
+        message: 'Assigning dynamic content to outerHTML can lead to XSS. Consider safer alternatives.'
+      },
+      {
+        pattern: /document\.write\s*\(/,
+        message: 'document.write() can execute scripts and lead to XSS. Use DOM methods instead.'
+      },
+      {
+        pattern: /\.insertAdjacentHTML\s*\(/,
+        message: 'insertAdjacentHTML with unsanitized input can lead to XSS. Sanitize HTML or use DOM methods.'
+      },
+      {
+        pattern: /eval\s*\(/,
+        message: 'eval() executes arbitrary code and is a security risk. Avoid using eval().'
+      },
+      {
+        pattern: /new\s+Function\s*\(/,
+        message: 'new Function() can execute arbitrary code like eval(). Avoid dynamic function creation.'
+      },
+      {
+        pattern: /setTimeout\s*\(\s*['"`]/,
+        message: 'setTimeout with string argument executes code like eval(). Use a function instead.'
+      },
+      {
+        pattern: /setInterval\s*\(\s*['"`]/,
+        message: 'setInterval with string argument executes code like eval(). Use a function instead.'
+      }
+    ];
+
+    for (const { pattern, message } of xssPatterns) {
+      if (pattern.test(code)) {
+        this.addDiagnostic('warning', 'xss-vulnerability',
+          `Potential XSS in action '${context}': ${message}`,
+          line || 1, column || 1);
+      }
+    }
+  }
+
+  /**
+   * Check view nodes for XSS vulnerabilities
+   */
+  checkViewForXSS(node) {
+    if (!node) return;
+
+    const children = node.children || [];
+    for (const child of children) {
+      if (!child) continue;
+
+      // Check for @html directive (if exists in DSL)
+      if (child.directives) {
+        for (const directive of child.directives) {
+          if (directive.name === 'html') {
+            this.addDiagnostic('warning', 'xss-vulnerability',
+              '@html directive renders raw HTML and can lead to XSS if used with user input. Ensure content is sanitized.',
+              directive.line || child.line || 1, directive.column || child.column || 1);
+          }
+        }
+      }
+
+      // Check directive expressions for dangerous patterns
+      if (child.directives) {
+        for (const directive of child.directives) {
+          const expr = directive.handler || directive.expression || '';
+          if (typeof expr === 'string') {
+            // Check for innerHTML in expressions
+            if (/innerHTML|outerHTML/.test(expr)) {
+              this.addDiagnostic('warning', 'xss-vulnerability',
+                `Using innerHTML/outerHTML in directive expression can lead to XSS. Use safer alternatives.`,
+                directive.line || child.line || 1, directive.column || child.column || 1);
+            }
+          }
+        }
+      }
+
+      // Recurse into children
+      this.checkViewForXSS(child);
+    }
+  }
+
   /**
    * Add a diagnostic message
    */

package/compiler/index.js

@@ -5,26 +5,51 @@
 export * from './lexer.js';
 export * from './parser.js';
 export * from './transformer.js';
+export * from './sourcemap.js';
 
 import { tokenize } from './lexer.js';
 import { parse } from './parser.js';
-import { transform } from './transformer.js';
+import { transform, Transformer } from './transformer.js';
 
 /**
  * Compile Pulse source code to JavaScript
+ *
+ * @param {string} source - Pulse source code
+ * @param {Object} options - Compiler options
+ * @param {string} options.runtime - Runtime import path
+ * @param {boolean} options.minify - Minify output
+ * @param {boolean} options.scopeStyles - Scope CSS with unique prefixes
+ * @param {boolean} options.sourceMap - Generate source map
+ * @param {string} options.sourceFileName - Original file name (for source maps)
+ * @param {boolean} options.inlineSourceMap - Include source map as inline comment
+ * @returns {Object} Compilation result
  */
 export function compile(source, options = {}) {
   try {
     // Parse source to AST
     const ast = parse(source);
 
+    // Prepare transformer options
+    const transformerOptions = {
+      ...options,
+      sourceContent: options.sourceMap ? source : null
+    };
+
     // Transform AST to JavaScript
-    const code = transform(ast, options);
+    const transformer = new Transformer(ast, transformerOptions);
+    const result = transformer.transformWithSourceMap();
+
+    // Add inline source map if requested
+    let code = result.code;
+    if (options.sourceMap && options.inlineSourceMap && result.sourceMapComment) {
+      code = code + '\n' + result.sourceMapComment;
+    }
 
     return {
       success: true,
       code,
       ast,
+      sourceMap: result.sourceMap,
       errors: []
     };
   } catch (error) {
@@ -32,6 +57,7 @@ export function compile(source, options = {}) {
       success: false,
       code: null,
       ast: null,
+      sourceMap: null,
       errors: [{
         message: error.message,
         line: error.line,
@@ -55,11 +81,15 @@ export function tokenizeOnly(source) {
   return tokenize(source);
 }
 
+import { SourceMapGenerator, SourceMapConsumer } from './sourcemap.js';
+
 export default {
   compile,
   parseOnly,
   tokenizeOnly,
   tokenize,
   parse,
-  transform
+  transform,
+  SourceMapGenerator,
+  SourceMapConsumer
 };