pulse-js-framework 1.7.8 → 1.7.10

package/compiler/transformer/index.js

@@ -54,6 +54,13 @@ export class Transformer {
     this.importedComponents = new Map();
     this.scopeId = this.options.scopeStyles ? generateScopeId() : null;
 
+    // Track a11y feature usage for conditional imports
+    this.usesA11y = {
+      srOnly: false,
+      trapFocus: false,
+      announce: false
+    };
+
     // Source map tracking
     this.sourceMap = null;
     this._currentLine = 0;
@@ -126,6 +133,40 @@ export class Transformer {
     return this._trackCode(code);
   }
 
+  /**
+   * Pre-scan AST for a11y directive usage
+   */
+  _scanA11yUsage(node) {
+    if (!node) return;
+
+    // Check directives for a11y usage
+    if (node.directives) {
+      for (const directive of node.directives) {
+        if (directive.type === 'A11yDirective') {
+          if (directive.attrs && directive.attrs.srOnly) {
+            this.usesA11y.srOnly = true;
+          }
+        } else if (directive.type === 'FocusTrapDirective') {
+          this.usesA11y.trapFocus = true;
+        }
+      }
+    }
+
+    // Recursively scan children
+    if (node.children) {
+      for (const child of node.children) {
+        this._scanA11yUsage(child);
+      }
+    }
+
+    // Scan view block children
+    if (node.type === 'ViewBlock' && node.children) {
+      for (const child of node.children) {
+        this._scanA11yUsage(child);
+      }
+    }
+  }
+
   /**
    * Transform AST to JavaScript code
    */
@@ -137,6 +178,11 @@ export class Transformer {
       extractImportedComponents(this, this.ast.imports);
     }
 
+    // Pre-scan for a11y usage to determine imports
+    if (this.ast.view) {
+      this._scanA11yUsage(this.ast.view);
+    }
+
     // Imports (runtime + user imports)
     parts.push(generateImports(this));
 

package/compiler/transformer/view.js

@@ -18,7 +18,11 @@ export const VIEW_NODE_HANDLERS = {
   [NodeType.SlotElement]: 'transformSlot',
   [NodeType.LinkDirective]: 'transformLinkDirective',
   [NodeType.OutletDirective]: 'transformOutletDirective',
-  [NodeType.NavigateDirective]: 'transformNavigateDirective'
+  [NodeType.NavigateDirective]: 'transformNavigateDirective',
+  // Accessibility directives
+  [NodeType.A11yDirective]: 'transformA11yDirective',
+  [NodeType.LiveDirective]: 'transformLiveDirective',
+  [NodeType.FocusTrapDirective]: 'transformFocusTrapDirective'
 };
 
 /**
@@ -93,6 +97,12 @@ export function transformViewNode(transformer, node, indent = 0) {
         return transformOutletDirective(transformer, node, indent);
       case NodeType.NavigateDirective:
         return transformNavigateDirective(transformer, node, indent);
+      case NodeType.A11yDirective:
+        return transformA11yDirective(transformer, node, indent);
+      case NodeType.LiveDirective:
+        return transformLiveDirective(transformer, node, indent);
+      case NodeType.FocusTrapDirective:
+        return transformFocusTrapDirective(transformer, node, indent);
       default:
         return `${' '.repeat(indent)}/* unknown node: ${node.type} */`;
     }
@@ -192,6 +202,99 @@ export function transformNavigateDirective(transformer, node, indent) {
   return `${pad}router.navigate(${path}${options})`;
 }
 
+/**
+ * Transform @a11y directive - sets ARIA attributes
+ * @param {Object} transformer - Transformer instance
+ * @param {Object} node - A11y directive node
+ * @param {number} indent - Indentation level
+ * @returns {string} JavaScript code
+ */
+export function transformA11yDirective(transformer, node, indent) {
+  const pad = ' '.repeat(indent);
+  const attrs = node.attrs || {};
+
+  // Handle @srOnly - create visually hidden element
+  if (attrs.srOnly) {
+    return `${pad}srOnly(/* content */)`;
+  }
+
+  // Build ARIA attributes object
+  const ariaAttrs = Object.entries(attrs).map(([key, value]) => {
+    // Map short names to aria- attributes (role is not prefixed)
+    const ariaKey = key === 'role' ? key : (key.startsWith('aria-') ? key : `aria-${key}`);
+    const valueCode = typeof value === 'string' ? `'${value}'` : transformExpression(transformer, value);
+    return `'${ariaKey}': ${valueCode}`;
+  }).join(', ');
+
+  return `{ ${ariaAttrs} }`;
+}
+
+/**
+ * Build ARIA attributes object from a11y directive
+ * @param {Object} transformer - Transformer instance
+ * @param {Object} directive - A11y directive node
+ * @returns {Object} Object with key-value pairs for ARIA attributes
+ */
+export function buildA11yAttributes(transformer, directive) {
+  const attrs = directive.attrs || {};
+  const result = {};
+
+  for (const [key, value] of Object.entries(attrs)) {
+    if (key === 'srOnly') continue;
+    // Map short names to aria- attributes (role is not prefixed)
+    const ariaKey = key === 'role' ? key : (key.startsWith('aria-') ? key : `aria-${key}`);
+
+    // Handle different value types
+    if (typeof value === 'string') {
+      result[ariaKey] = value;
+    } else if (typeof value === 'boolean') {
+      result[ariaKey] = String(value);  // Convert true/false to "true"/"false"
+    } else if (typeof value === 'number') {
+      result[ariaKey] = String(value);
+    } else {
+      result[ariaKey] = transformExpression(transformer, value);
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Transform @live directive - creates live region
+ * @param {Object} transformer - Transformer instance
+ * @param {Object} node - Live directive node
+ * @param {number} indent - Indentation level
+ * @returns {string} JavaScript code
+ */
+export function transformLiveDirective(transformer, node, indent) {
+  const priority = node.priority || 'polite';
+  return `'${priority}'`;
+}
+
+/**
+ * Transform @focusTrap directive
+ * @param {Object} transformer - Transformer instance
+ * @param {Object} node - Focus trap directive node
+ * @param {number} indent - Indentation level
+ * @returns {string} JavaScript code
+ */
+export function transformFocusTrapDirective(transformer, node, indent) {
+  const options = node.options || {};
+
+  if (Object.keys(options).length === 0) {
+    return '{}';
+  }
+
+  const optionsCode = Object.entries(options).map(([key, value]) => {
+    const valueCode = typeof value === 'boolean' ? String(value) :
+                      typeof value === 'string' ? `'${value}'` :
+                      transformExpression(transformer, value);
+    return `${key}: ${valueCode}`;
+  }).join(', ');
+
+  return `{ ${optionsCode} }`;
+}
+
 /**
  * Transform element
  * @param {Object} transformer - Transformer instance
@@ -220,11 +323,77 @@ export function transformElement(transformer, node, indent) {
     selector = addScopeToSelector(transformer, selector);
   }
 
-  // Start with el() call
-  parts.push(`${pad}el('${selector}'`);
-
-  // Add event handlers as on() chain
+  // Extract directives by type
   const eventHandlers = node.directives.filter(d => d.type === NodeType.EventDirective);
+  const a11yDirectives = node.directives.filter(d => d.type === NodeType.A11yDirective);
+  const liveDirectives = node.directives.filter(d => d.type === NodeType.LiveDirective);
+  const focusTrapDirectives = node.directives.filter(d => d.type === NodeType.FocusTrapDirective);
+
+  // Check for @srOnly directive
+  const srOnlyDirective = a11yDirectives.find(d => d.attrs && d.attrs.srOnly);
+
+  // If @srOnly, wrap entire content
+  if (srOnlyDirective) {
+    transformer.usesA11y.srOnly = true;
+    const content = [];
+    for (const text of node.textContent) {
+      content.push(transformTextNode(transformer, text, 0).trim());
+    }
+    for (const child of node.children) {
+      content.push(transformViewNode(transformer, child, 0).trim());
+    }
+    const contentCode = content.length === 1 ? content[0] : `[${content.join(', ')}]`;
+    return `${pad}srOnly(${contentCode})`;
+  }
+
+  // Track focusTrap usage
+  if (focusTrapDirectives.length > 0) {
+    transformer.usesA11y.trapFocus = true;
+  }
+
+  // Build ARIA attributes from directives
+  const ariaAttrs = [];
+
+  // Process @a11y directives
+  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}`);
+    }
+  }
+
+  // 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('');
+  }
+
+  // Start with el() call
+  parts.push(`${pad}el('${enhancedSelector}'`);
 
   // Add text content
   if (node.textContent.length > 0) {
@@ -251,6 +420,12 @@ export function transformElement(transformer, node, indent) {
     result = `on(${result}, '${handler.event}', () => { ${handlerCode}; })`;
   }
 
+  // Chain focus trap if present
+  for (const directive of focusTrapDirectives) {
+    const optionsCode = transformFocusTrapDirective(transformer, directive, 0);
+    result = `trapFocus(${result}, ${optionsCode})`;
+  }
+
   return result;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pulse-js-framework",
-  "version": "1.7.8",
+  "version": "1.7.10",
   "description": "A declarative DOM framework with CSS selector-based structure and reactive pulsations",
   "type": "module",
   "main": "index.js",
@@ -64,6 +64,14 @@
       "types": "./types/form.d.ts",
       "default": "./runtime/form.js"
     },
+    "./runtime/http": {
+      "types": "./types/http.d.ts",
+      "default": "./runtime/http.js"
+    },
+    "./runtime/a11y": {
+      "types": "./types/a11y.d.ts",
+      "default": "./runtime/a11y.js"
+    },
     "./runtime/devtools": "./runtime/devtools.js",
     "./compiler": {
       "types": "./types/index.d.ts",
@@ -93,7 +101,7 @@
     "LICENSE"
   ],
   "scripts": {
-    "test": "npm run test:compiler && npm run test:sourcemap && npm run test:pulse && npm run test:dom && npm run test:dom-adapter && npm run test:router && npm run test:store && npm run test:hmr && npm run test:lint && npm run test:format && npm run test:analyze && npm run test:lru-cache && npm run test:utils && npm run test:docs && npm run test:async && npm run test:form && npm run test:devtools && npm run test:native",
+    "test": "npm run test:compiler && npm run test:sourcemap && npm run test:pulse && npm run test:dom && npm run test:dom-adapter && npm run test:router && npm run test:store && npm run test:hmr && npm run test:lint && npm run test:format && npm run test:analyze && npm run test:lru-cache && npm run test:utils && npm run test:docs && npm run test:async && npm run test:form && npm run test:http && npm run test:devtools && npm run test:native && npm run test:a11y && npm run test:logger && npm run test:errors",
     "test:compiler": "node test/compiler.test.js",
     "test:sourcemap": "node test/sourcemap.test.js",
     "test:pulse": "node test/pulse.test.js",
@@ -110,8 +118,12 @@
     "test:docs": "node test/docs.test.js",
     "test:async": "node test/async.test.js",
     "test:form": "node test/form.test.js",
+    "test:http": "node test/http.test.js",
     "test:devtools": "node test/devtools.test.js",
     "test:native": "node test/native.test.js",
+    "test:a11y": "node test/a11y.test.js",
+    "test:logger": "node test/logger.test.js",
+    "test:errors": "node test/errors.test.js",
     "build:netlify": "node scripts/build-netlify.js",
     "version": "node scripts/sync-version.js",
     "docs": "node cli/index.js dev docs"