tova 0.3.4 → 0.3.6

package/src/codegen/client-codegen.js

@@ -9,11 +9,21 @@ export class ClientCodegen extends BaseCodegen {
     this.componentNames = new Set(); // Track component names for JSX
     this.storeNames = new Set(); // Track store names
     this._asyncContext = false; // When true, server.xxx() calls emit `await`
+    this._rpcCache = new WeakMap(); // Memoize _containsRPC() results
+    this._signalCache = new WeakMap(); // Memoize _exprReadsSignal() results
   }
 
-  // AST-walk to check if a subtree contains server.xxx() RPC calls
+  // AST-walk to check if a subtree contains server.xxx() RPC calls (memoized)
   _containsRPC(node) {
     if (!node) return false;
+    const cached = this._rpcCache.get(node);
+    if (cached !== undefined) return cached;
+    const result = this._containsRPCImpl(node);
+    this._rpcCache.set(node, result);
+    return result;
+  }
+
+  _containsRPCImpl(node) {
     if (node.type === 'CallExpression' && this._isRPCCall(node)) return true;
     if (node.type === 'BlockStatement') return node.body.some(s => this._containsRPC(s));
     if (node.type === 'ExpressionStatement') return this._containsRPC(node.expression);
@@ -179,7 +189,7 @@ export class ClientCodegen extends BaseCodegen {
     const lines = [];
 
     // Runtime imports
-    lines.push(`import { createSignal, createEffect, createComputed, mount, hydrate, tova_el, tova_fragment, tova_keyed, tova_transition, tova_inject_css, batch, onMount, onUnmount, onCleanup, createRef, createContext, provide, inject, createErrorBoundary, ErrorBoundary, ErrorInfo, createRoot, watch, untrack, Dynamic, Portal, lazy } from './runtime/reactivity.js';`);
+    lines.push(`import { createSignal, createEffect, createComputed, mount, hydrate, tova_el, tova_fragment, tova_keyed, tova_transition, tova_inject_css, batch, onMount, onUnmount, onCleanup, onBeforeUpdate, createRef, createContext, provide, inject, createErrorBoundary, ErrorBoundary, ErrorInfo, createRoot, watch, untrack, Dynamic, Portal, lazy, Suspense, __tova_action } from './runtime/reactivity.js';`);
     lines.push(`import { rpc } from './runtime/rpc.js';`);
 
     // Hoist import lines from shared code to the top of the module
@@ -395,25 +405,118 @@ export class ClientCodegen extends BaseCodegen {
   }
 
   // Scope CSS selectors by appending [data-tova-HASH] to each selector
+  // Uses a lightweight tokenizer to properly handle:
+  // - @media, @keyframes, @layer blocks (don't scope their content selectors)
+  // - :is(), :where(), :has() pseudo-functions
+  // - :global() escape hatch (strip wrapper, don't scope)
+  // - CSS comments /* */
+  // - Nested CSS
+  // - Multiple rules in sequence
   _scopeCSS(css, scopeAttr) {
-    return css.replace(/([^{}@/]+)\{/g, (match, selectorGroup) => {
-      const selectors = selectorGroup.split(',').map(s => {
-        s = s.trim();
-        if (!s || s.startsWith('@') || s === 'from' || s === 'to' || /^\d+%$/.test(s)) return s;
-        // Handle pseudo-elements (::before, ::after)
-        const pseudoElMatch = s.match(/(::[\w-]+)$/);
-        if (pseudoElMatch) {
-          return s.slice(0, -pseudoElMatch[0].length) + scopeAttr + pseudoElMatch[0];
+    const result = [];
+    let i = 0;
+    let depth = 0;
+    let buf = '';
+    const noScopeDepths = new Set(); // Depths where we DON'T scope (property decls, @keyframes, @font-face)
+
+    while (i < css.length) {
+      // Skip CSS comments
+      if (css[i] === '/' && css[i + 1] === '*') {
+        const end = css.indexOf('*/', i + 2);
+        if (end === -1) { buf += css.slice(i); break; }
+        buf += css.slice(i, end + 2);
+        i = end + 2;
+        continue;
+      }
+
+      // Skip quoted strings
+      if (css[i] === '"' || css[i] === "'") {
+        const q = css[i];
+        buf += css[i++];
+        while (i < css.length && css[i] !== q) {
+          if (css[i] === '\\') buf += css[i++];
+          buf += css[i++];
         }
-        // Handle pseudo-classes (:hover, :focus, etc.)
-        const pseudoClsMatch = s.match(/(:[\w-]+(?:\([^)]*\))?)$/);
-        if (pseudoClsMatch) {
-          return s.slice(0, -pseudoClsMatch[0].length) + scopeAttr + pseudoClsMatch[0];
+        if (i < css.length) buf += css[i++];
+        continue;
+      }
+
+      // Opening brace — process accumulated buf as selector or pass through
+      if (css[i] === '{') {
+        const trimmed = buf.trim();
+
+        if (noScopeDepths.has(depth)) {
+          // Inside a no-scope context (property declarations, @keyframes) — pass through
+          result.push(buf + '{');
+        } else if (trimmed.startsWith('@')) {
+          // @keyframes, @font-face: mark inner as no-scope
+          if (/^@keyframes\s/.test(trimmed) || /^@font-face/.test(trimmed)) {
+            noScopeDepths.add(depth + 1);
+          }
+          // @media, @supports, @layer: keep scoping inside (don't mark)
+          result.push(buf + '{');
+        } else {
+          // Regular selector — scope it and mark inner depth as no-scope (property declarations)
+          const scopedSelectors = buf.split(',').map(s => {
+            s = s.trim();
+            if (!s || s === 'from' || s === 'to' || /^\d+%$/.test(s)) return s;
+            return this._scopeSelector(s, scopeAttr);
+          }).join(', ');
+          result.push(scopedSelectors + '{');
+          noScopeDepths.add(depth + 1);
         }
-        return s + scopeAttr;
-      }).join(', ');
-      return selectors + ' {';
-    });
+
+        depth++;
+        buf = '';
+        i++;
+        continue;
+      }
+
+      // Closing brace
+      if (css[i] === '}') {
+        result.push(buf + '}');
+        buf = '';
+        noScopeDepths.delete(depth);
+        depth--;
+        i++;
+        continue;
+      }
+
+      // Accumulate character
+      buf += css[i];
+      i++;
+    }
+
+    if (buf) result.push(buf);
+    return result.join('');
+  }
+
+  // Scope a single CSS selector
+  _scopeSelector(selector, scopeAttr) {
+    let s = selector.trim();
+
+    // :global() escape hatch — strip wrapper, don't scope
+    if (s.startsWith(':global(') && s.endsWith(')')) {
+      return s.slice(8, -1);
+    }
+    // Inline :global() in the middle of a selector
+    s = s.replace(/:global\(([^)]+)\)/g, '$1');
+
+    // Handle pseudo-elements (::before, ::after, ::placeholder, etc.)
+    const pseudoElMatch = s.match(/(::[\w-]+(?:\([^)]*\))?)$/);
+    if (pseudoElMatch) {
+      return s.slice(0, -pseudoElMatch[0].length) + scopeAttr + pseudoElMatch[0];
+    }
+    // Handle pseudo-classes with functions (:is(), :where(), :has(), :not(), :hover, etc.)
+    const pseudoClsMatch = s.match(/((?::[\w-]+(?:\([^)]*\))?)+)$/);
+    if (pseudoClsMatch) {
+      const pseudoPart = pseudoClsMatch[0];
+      const basePart = s.slice(0, -pseudoPart.length);
+      if (basePart.trim()) {
+        return basePart + scopeAttr + pseudoPart;
+      }
+    }
+    return s + scopeAttr;
   }
 
   generateComponent(comp) {
@@ -580,10 +683,19 @@ export class ClientCodegen extends BaseCodegen {
     return p.join('');
   }
 
-  // Check if an AST expression references any signal/computed name
+  // Check if an AST expression references any signal/computed name (memoized)
   _exprReadsSignal(node) {
     if (!node) return false;
+    // Cannot cache Identifier lookups — result depends on current stateNames/computedNames
     if (node.type === 'Identifier') return this.stateNames.has(node.name) || this.computedNames.has(node.name);
+    const cached = this._signalCache.get(node);
+    if (cached !== undefined) return cached;
+    const result = this._exprReadsSignalImpl(node);
+    this._signalCache.set(node, result);
+    return result;
+  }
+
+  _exprReadsSignalImpl(node) {
     if (node.type === 'BinaryExpression' || node.type === 'LogicalExpression') {
       return this._exprReadsSignal(node.left) || this._exprReadsSignal(node.right);
     }
@@ -649,6 +761,30 @@ export class ClientCodegen extends BaseCodegen {
   }
 
   genJSXElement(node) {
+    // <slot /> or <slot name="header" /> — render children passed from parent
+    if (node.tag === 'slot') {
+      const nameAttr = node.attributes.find(a => a.name === 'name');
+      const slotProps = node.attributes.filter(a => a.name !== 'name');
+
+      if (nameAttr && nameAttr.value.type === 'StringLiteral') {
+        // Named slot: <slot name="header" />
+        const slotName = nameAttr.value.value;
+        return `(__props.${slotName} || '')`;
+      }
+
+      if (slotProps.length > 0) {
+        // Scoped slot: <slot count={count()} /> — pass props to render function
+        const propParts = slotProps.map(a => {
+          const val = this.genExpression(a.value);
+          return `${a.name}: ${val}`;
+        });
+        return `(typeof __props.children === 'function' ? __props.children({${propParts.join(', ')}}) : (__props.children || ''))`;
+      }
+
+      // Default slot: <slot />
+      return `(__props.children || '')`;
+    }
+
     const isComponent = node.tag[0] === node.tag[0].toUpperCase() && /^[A-Z]/.test(node.tag);
 
     // Attributes
@@ -728,16 +864,82 @@ export class ClientCodegen extends BaseCodegen {
         // Conditional class: class:active={cond}
         const className = attr.name.slice(6);
         classDirectives.push({ className, condition: this.genExpression(attr.value), node: attr.value });
+      } else if (attr.name.startsWith('use:')) {
+        // use:action directive: use:tooltip={params}
+        const actionName = attr.name.slice(4);
+        const param = attr.value.type === 'BooleanLiteral' ? 'undefined' : this.genExpression(attr.value);
+        const reactive = attr.value.type !== 'BooleanLiteral' && this._exprReadsSignal(attr.value);
+        if (!node._actions) node._actions = [];
+        node._actions.push({ name: actionName, param, reactive });
+      } else if (attr.name.startsWith('in:')) {
+        // in:fade — enter-only transition
+        const transName = attr.name.slice(3);
+        const config = attr.value.type === 'BooleanLiteral' ? '{}' : this.genExpression(attr.value);
+        node._inTransition = { name: transName, config };
+      } else if (attr.name.startsWith('out:')) {
+        // out:slide — leave-only transition
+        const transName = attr.name.slice(4);
+        const config = attr.value.type === 'BooleanLiteral' ? '{}' : this.genExpression(attr.value);
+        node._outTransition = { name: transName, config };
       } else if (attr.name.startsWith('transition:')) {
         // transition:fade, transition:slide={duration: 300}, etc.
         const transName = attr.name.slice(11); // 'fade', 'slide', 'scale', 'fly'
+        const builtins = new Set(['fade', 'slide', 'scale', 'fly']);
         const config = attr.value.type === 'BooleanLiteral' ? '{}' : this.genExpression(attr.value);
         // Store transition info for element wrapping
         if (!node._transitions) node._transitions = [];
-        node._transitions.push({ name: transName, config });
+        node._transitions.push({ name: transName, config, custom: !builtins.has(transName) });
+      } else if (attr.name === 'bind:this') {
+        // bind:this={ref} → ref: refValue (works with both ref objects and functions)
+        attrs.ref = this.genExpression(attr.value);
       } else if (attr.name.startsWith('on:')) {
-        const eventName = attr.name.slice(3);
-        events[eventName] = this.genExpression(attr.value);
+        const fullName = attr.name.slice(3); // e.g. "click.stop.prevent"
+        const parts = fullName.split('.');
+        const eventName = parts[0];
+        const modifiers = parts.slice(1);
+        let handler = this.genExpression(attr.value);
+
+        if (modifiers.length > 0) {
+          const guards = [];
+          let useCapture = false;
+          let useOnce = false;
+
+          // Key modifier map for keydown/keyup events
+          const keyMap = {
+            enter: '"Enter"', escape: '"Escape"', tab: '"Tab"', space: '" "',
+            up: '"ArrowUp"', down: '"ArrowDown"', left: '"ArrowLeft"', right: '"ArrowRight"',
+            delete: '"Delete"', backspace: '"Backspace"',
+          };
+
+          for (const mod of modifiers) {
+            if (mod === 'prevent') {
+              guards.push('e.preventDefault()');
+            } else if (mod === 'stop') {
+              guards.push('e.stopPropagation()');
+            } else if (mod === 'self') {
+              guards.push('if (e.target !== e.currentTarget) return');
+            } else if (mod === 'capture') {
+              useCapture = true;
+            } else if (mod === 'once') {
+              useOnce = true;
+            } else if (keyMap[mod]) {
+              guards.push(`if (e.key !== ${keyMap[mod]}) return`);
+            }
+          }
+
+          if (guards.length > 0) {
+            handler = `(e) => { ${guards.join('; ')}; (${handler})(e); }`;
+          }
+
+          if (useCapture || useOnce) {
+            const opts = [];
+            if (useCapture) opts.push('capture: true');
+            if (useOnce) opts.push('once: true');
+            handler = `{ handler: ${handler}, options: { ${opts.join(', ')} } }`;
+          }
+        }
+
+        events[eventName] = handler;
       } else {
         const attrName = attr.name === 'class' ? 'className' : attr.name;
         const expr = this.genExpression(attr.value);
@@ -784,12 +986,22 @@ export class ClientCodegen extends BaseCodegen {
     }
 
     const propParts = [];
+    const memoizedProps = []; // Computed memoization for complex expressions
     for (const [key, val] of Object.entries(attrs)) {
       // For component props, convert reactive () => wrappers to JS getter syntax
       // so the prop stays reactive through the __props access pattern
       if (isComponent && spreads.length === 0 && typeof val === 'string' && val.startsWith('() => ')) {
         const rawExpr = val.slice(6);
-        propParts.push(`get ${key}() { return ${rawExpr}; }`);
+        // Simple signal read: just use a getter (no overhead)
+        // Complex expressions: memoize with createComputed
+        const isSimple = /^[a-zA-Z_$]\w*\(\)$/.test(rawExpr);
+        if (isSimple) {
+          propParts.push(`get ${key}() { return ${rawExpr}; }`);
+        } else {
+          const memoName = `__memo_${key}`;
+          memoizedProps.push(`const ${memoName} = createComputed(() => ${rawExpr})`);
+          propParts.push(`get ${key}() { return ${memoName}(); }`);
+        }
       } else {
         propParts.push(`${key}: ${val}`);
       }
@@ -844,7 +1056,10 @@ export class ClientCodegen extends BaseCodegen {
           propsStr = `{${propParts.join(', ')}}`;
         }
       }
-      return `(() => { const __v = ${node.tag}(${propsStr}); if (__v && __v.__tova) __v._componentName = "${node.tag}"; return __v; })()`;
+      if (memoizedProps.length > 0) {
+        return `(() => { ${memoizedProps.join('; ')}; const __v = ${node.tag}(${propsStr}); if (__v && __v.__tova) __v._componentName = "${node.tag}"; return __v; })()`;
+      }
+      return `((__tova_v) => (__tova_v && __tova_v.__tova && (__tova_v._componentName = "${node.tag}"), __tova_v))(${node.tag}(${propsStr}))`;
     }
 
     const tag = JSON.stringify(node.tag);
@@ -860,7 +1075,30 @@ export class ClientCodegen extends BaseCodegen {
     // Wrap with transition directives if present
     if (node._transitions && node._transitions.length > 0) {
       for (const t of node._transitions) {
-        result = `tova_transition(${result}, "${t.name}", ${t.config})`;
+        if (t.custom) {
+          result = `tova_transition(${result}, ${t.name}, ${t.config})`;
+        } else {
+          result = `tova_transition(${result}, "${t.name}", ${t.config})`;
+        }
+      }
+    }
+
+    // Wrap with directional transitions if present
+    if (node._inTransition || node._outTransition) {
+      const inPart = node._inTransition ? `in: { name: "${node._inTransition.name}", config: ${node._inTransition.config} }` : '';
+      const outPart = node._outTransition ? `out: { name: "${node._outTransition.name}", config: ${node._outTransition.config} }` : '';
+      const parts = [inPart, outPart].filter(Boolean).join(', ');
+      result = `tova_transition(${result}, { ${parts} })`;
+    }
+
+    // Wrap with use: action directives if present
+    if (node._actions && node._actions.length > 0) {
+      for (const a of node._actions) {
+        if (a.reactive) {
+          result = `__tova_action(${result}, ${a.name}, () => ${a.param})`;
+        } else {
+          result = `__tova_action(${result}, ${a.name}, ${a.param})`;
+        }
       }
     }
 
@@ -882,25 +1120,36 @@ export class ClientCodegen extends BaseCodegen {
     return this.genExpression(node.value);
   }
 
+  _genJSXForVar(variable) {
+    if (typeof variable === 'string') return variable;
+    if (variable.type === 'ArrayPattern') {
+      return `[${variable.elements.join(', ')}]`;
+    }
+    if (variable.type === 'ObjectPattern') {
+      return `{${variable.properties.map(p => p.value ? `${p.key}: ${p.value}` : p.key).join(', ')}}`;
+    }
+    return String(variable);
+  }
+
   genJSXFor(node) {
-    const varName = node.variable;
+    const varName = this._genJSXForVar(node.variable);
     const iterable = this.genExpression(node.iterable);
     const children = node.body.map(c => this.genJSX(c));
+    const needsReactive = this._exprReadsSignal(node.iterable);
+    const wrap = needsReactive ? '() => ' : '';
 
-    // Wrap in reactive closure so the runtime creates a dynamic block that
-    // re-evaluates when the iterable signal changes
     if (node.keyExpr) {
       const keyExpr = this.genExpression(node.keyExpr);
       if (children.length === 1) {
-        return `() => ${iterable}.map((${varName}) => tova_keyed(${keyExpr}, ${children[0]}))`;
+        return `${wrap}${iterable}.map((${varName}) => tova_keyed(${keyExpr}, ${children[0]}))`;
       }
-      return `() => ${iterable}.map((${varName}) => tova_keyed(${keyExpr}, tova_fragment([${children.join(', ')}])))`;
+      return `${wrap}${iterable}.map((${varName}) => tova_keyed(${keyExpr}, tova_fragment([${children.join(', ')}])))`;
     }
 
     if (children.length === 1) {
-      return `() => ${iterable}.map((${varName}) => ${children[0]})`;
+      return `${wrap}${iterable}.map((${varName}) => ${children[0]})`;
     }
-    return `() => ${iterable}.map((${varName}) => tova_fragment([${children.join(', ')}]))`;
+    return `${wrap}${iterable}.map((${varName}) => tova_fragment([${children.join(', ')}]))`;
   }
 
   genJSXIf(node) {
@@ -929,8 +1178,13 @@ export class ClientCodegen extends BaseCodegen {
       result += ` : null`;
     }
 
-    // Wrap in reactive closure so the runtime creates a dynamic block
-    return `() => ${result}`;
+    // Only wrap in reactive closure if the condition reads signals
+    const needsReactive = this._exprReadsSignal(node.condition) ||
+      (node.alternates && node.alternates.some(a => this._exprReadsSignal(a.condition)));
+    if (needsReactive) {
+      return `() => ${result}`;
+    }
+    return result;
   }
 
   genJSXMatch(node) {
@@ -962,8 +1216,11 @@ export class ClientCodegen extends BaseCodegen {
     }
 
     p.push(`})(${subject})`);
-    // Wrap in reactive closure
-    return `() => ${p.join('')}`;
+    // Only wrap in reactive closure if the subject reads signals
+    if (this._exprReadsSignal(node.subject)) {
+      return `() => ${p.join('')}`;
+    }
+    return p.join('');
   }
 
   genJSXFragment(node) {

package/src/codegen/codegen.js

@@ -4,31 +4,22 @@
 
 import { SharedCodegen } from './shared-codegen.js';
 import { BUILTIN_NAMES } from '../stdlib/inline.js';
-
-// Lazy-loaded codegen modules — only imported when server/client blocks exist
-let _ServerCodegen = null;
-let _ClientCodegen = null;
+import { ServerCodegen } from './server-codegen.js';
+import { ClientCodegen } from './client-codegen.js';
 
 function getServerCodegen() {
-  if (!_ServerCodegen) {
-    // Dynamic require avoids loading server-codegen.js for client-only builds
-    _ServerCodegen = import.meta.require('./server-codegen.js').ServerCodegen;
-  }
-  return _ServerCodegen;
+  return ServerCodegen;
 }
 
 function getClientCodegen() {
-  if (!_ClientCodegen) {
-    // Dynamic require avoids loading client-codegen.js for server-only builds
-    _ClientCodegen = import.meta.require('./client-codegen.js').ClientCodegen;
-  }
-  return _ClientCodegen;
+  return ClientCodegen;
 }
 
 export class CodeGenerator {
-  constructor(ast, filename = '<stdin>') {
+  constructor(ast, filename = '<stdin>', options = {}) {
     this.ast = ast;
     this.filename = filename;
+    this._sourceMaps = options.sourceMaps !== false; // default true; pass false for REPL/check
   }
 
   // Group blocks by name (null name = "default")
@@ -72,6 +63,7 @@ export class CodeGenerator {
 
     if (isModule) {
       const moduleGen = new SharedCodegen();
+      moduleGen._sourceMapsEnabled = this._sourceMaps;
       moduleGen.setSourceFile(this.filename);
       const moduleCode = topLevel.map(s => moduleGen.generateStatement(s)).join('\n');
       const helpers = moduleGen.generateHelpers();
@@ -87,6 +79,7 @@ export class CodeGenerator {
     }
 
     const sharedGen = new SharedCodegen();
+    sharedGen._sourceMapsEnabled = this._sourceMaps;
     sharedGen.setSourceFile(this.filename);
 
     // All shared blocks (regardless of name) are merged into one shared output
@@ -134,6 +127,7 @@ export class CodeGenerator {
     const servers = {};
     for (const [name, blocks] of serverGroups) {
       const gen = new (getServerCodegen())();
+      gen._sourceMapsEnabled = this._sourceMaps;
       const key = name || 'default';
       // Build peer blocks map (all named blocks except self)
       let peerBlocks = null;
@@ -152,6 +146,7 @@ export class CodeGenerator {
     const clients = {};
     for (const [name, blocks] of clientGroups) {
       const gen = new (getClientCodegen())();
+      gen._sourceMapsEnabled = this._sourceMaps;
       const key = name || 'default';
       clients[key] = gen.generate(blocks, combinedShared, sharedGen._usedBuiltins);
     }