mez-easyjs 0.1.0

package/src/compiler/codegen.js

@@ -0,0 +1,1334 @@
+/**
+ * Generate optimized runtime JS from a template AST.
+ * CSP-safe: no eval / new Function. XSS-safe: escape by default; {@html} opt-in.
+ */
+
+import { compileExpression } from './expr.js';
+import { CompileError, locate } from './errors.js';
+
+let uid = 0;
+
+export function generate(ast, options = {}) {
+  uid = 0;
+  const ctx = {
+    scopeId: options.scopeId,
+    filename: options.filename || 'component.easy',
+    styles: options.styles || '',
+    script: options.script || '',
+    source: options.source || '',
+    bindings: [],
+    fors: [],
+    ifs: [],
+    models: [],
+    components: [],
+    routerViews: [],
+    boundaries: [],
+    dependencies: []
+  };
+
+  const bodyHtml = genChildren(ast.children, ctx, {});
+  const scriptInfo = analyzeScript(options.script || '', {
+    lang: options.lang || 'js'
+  });
+  ctx.dependencies = scriptInfo.imports.map((i) => i.source);
+
+  const code = emitModule(ctx, scriptInfo, bodyHtml);
+  return { code, dependencies: [...new Set(ctx.dependencies)] };
+}
+
+function genChildren(children, ctx, meta) {
+  return (children || []).map((child) => genNode(child, ctx, meta)).join('');
+}
+
+function genNode(node, ctx, meta) {
+  if (node.type === 'Text') return escapeHtml(node.value);
+
+  if (node.type === 'Comment') return `<!--${node.value}-->`;
+
+  if (node.type === 'Interpolation') {
+    const id = nextId();
+    const { keys } = compileExpression(node.expression);
+    ctx.bindings.push({
+      id,
+      keys,
+      kind: 'text',
+      expression: node.expression,
+      raw: false
+    });
+    return `<span data-e="${id}"></span>`;
+  }
+
+  if (node.type === 'RawHtml') {
+    const id = nextId();
+    const { keys } = compileExpression(node.expression);
+    ctx.bindings.push({
+      id,
+      keys,
+      kind: 'rawHtml',
+      expression: node.expression,
+      raw: true
+    });
+    return `<span data-e="${id}" data-e-raw="1"></span>`;
+  }
+
+  if (node.type === 'Element') return genElement(node, ctx, meta);
+  return '';
+}
+
+function genElement(el, ctx, meta) {
+  const tagLower = el.tag.toLowerCase();
+
+  if (el.isRouterView || tagLower === 'router-view') {
+    const id = nextId();
+    ctx.routerViews.push({ id });
+    return `<div data-e-router="${id}"></div>`;
+  }
+
+  if (tagLower === 'error-boundary' || el.tag === 'ErrorBoundary') {
+    return genErrorBoundary(el, ctx, meta);
+  }
+
+  const dirFor = el.directives.find((d) => d.name === 'for');
+  const dirIf = el.directives.find((d) => d.name === 'if');
+  const dirElseIf = el.directives.find((d) => d.name === 'else-if');
+  const dirElse = el.directives.find((d) => d.name === 'else');
+  const dirShow = el.directives.find((d) => d.name === 'show');
+  const dirText = el.directives.find((d) => d.name === 'text');
+  const dirHtml = el.directives.find((d) => d.name === 'html');
+  const dirModel = el.directives.find((d) => d.name === 'model');
+  const dirBoundary = el.directives.find((d) => d.name === 'error-boundary');
+  const binds = el.directives.filter((d) => d.name === 'bind');
+
+  if (dirFor) {
+    const id = nextId();
+    const parsed = parseFor(dirFor.value);
+    const { keys } = compileExpression(parsed.source);
+    const innerEl = { ...el, directives: el.directives.filter((d) => d.name !== 'for') };
+    const itemTemplate = genRawTemplate(innerEl, ctx.scopeId);
+    ctx.fors.push({ id, ...parsed, keys, itemTemplate });
+    return `<div data-e-for="${id}" style="display:contents"></div>`;
+  }
+
+  if (dirIf) {
+    const id = nextId();
+    const { keys } = compileExpression(dirIf.value);
+    const inner = { ...el, directives: el.directives.filter((d) => d.name !== 'if') };
+    const html = genElementWithoutStructural(inner, ctx, meta);
+    ctx.ifs.push({ id, condition: dirIf.value, keys, html, kind: 'if' });
+    return `<template data-e-if="${id}"></template>`;
+  }
+
+  if (dirElseIf || dirElse) {
+    const id = nextId();
+    const condition = dirElseIf ? dirElseIf.value : 'true';
+    const { keys } = compileExpression(condition);
+    const inner = {
+      ...el,
+      directives: el.directives.filter((d) => d.name !== 'else' && d.name !== 'else-if')
+    };
+    const html = genElementWithoutStructural(inner, ctx, meta);
+    ctx.ifs.push({
+      id,
+      condition,
+      keys,
+      html,
+      kind: dirElse ? 'else' : 'else-if'
+    });
+    return `<template data-e-if="${id}"></template>`;
+  }
+
+  if (dirBoundary) {
+    return genErrorBoundary(el, ctx, meta, dirBoundary.value || 'Something went wrong.');
+  }
+
+  return genElementWithoutStructural(el, ctx, meta);
+}
+
+function genErrorBoundary(el, ctx, meta, fallbackAttr) {
+  const id = nextId();
+  const fallback =
+    fallbackAttr ||
+    (el.attrs.find((a) => a.name === 'fallback') || {}).value ||
+    'Something went wrong in this section.';
+  const childrenHtml = genChildren(el.children, ctx, { ...meta, inBoundary: id });
+  ctx.boundaries.push({ id, fallback });
+  return `<div data-e-boundary="${id}">${childrenHtml}</div>`;
+}
+
+function genElementWithoutStructural(el, ctx, meta) {
+  const dirShow = el.directives.find((d) => d.name === 'show');
+  const dirText = el.directives.find((d) => d.name === 'text');
+  const dirHtml = el.directives.find((d) => d.name === 'html');
+  const dirModel = el.directives.find((d) => d.name === 'model');
+  const binds = el.directives.filter((d) => d.name === 'bind');
+
+  if (el.isComponent) {
+    const id = nextId();
+    const propBinds = {};
+    for (const b of binds) propBinds[b.arg] = b.value;
+    // Static attrs as literal props
+    for (const a of el.attrs) {
+      if (!(a.name in propBinds)) propBinds[a.name] = JSON.stringify(a.value);
+    }
+    ctx.components.push({
+      id,
+      name: el.tag,
+      props: propBinds,
+      keys: binds.flatMap((b) => compileExpression(b.value).keys),
+      children: el.children || []
+    });
+    return `<div data-e-comp="${id}" style="display:contents"></div>`;
+  }
+
+  const id = nextId();
+  const tag = el.tag;
+  const attrParts = [];
+  const scopeAttr = ctx.scopeId ? ` ${ctx.scopeId}` : '';
+
+  for (const a of el.attrs) {
+    const staticAttr = emitStaticAttr(a, ctx);
+    if (staticAttr) attrParts.push(staticAttr);
+  }
+
+  for (const b of binds) {
+    if (isDangerousAttrName(b.arg)) {
+      throw new CompileError({
+        message: `Refusing to bind dangerous attribute "${b.arg}"`,
+        filename: ctx.filename,
+        ...locate(ctx.source || '', b.arg),
+        source: ctx.source || '',
+        hint: 'Use onclick={handler} (compiles to data-e-on). Never bind on* or srcdoc.'
+      });
+    }
+    const bid = nextId();
+    ctx.bindings.push({
+      id: bid,
+      keys: compileExpression(b.value).keys,
+      kind: 'attr',
+      attr: b.arg,
+      expression: b.value,
+      ownerHint: id
+    });
+    attrParts.push(` data-e-bind-${b.arg}="${bid}"`);
+  }
+
+  if (el.events.length) {
+    // data-e-on only — never inline onclick= (CSP)
+    const spec = el.events.map((e) => `${e.event}:${stripCall(e.handler)}`).join(';');
+    attrParts.push(` data-e-on="${escapeAttr(spec)}"`);
+  }
+
+  if (dirModel) {
+    const mid = nextId();
+    ctx.models.push({
+      id: mid,
+      keys: compileExpression(dirModel.value).keys,
+      expression: dirModel.value,
+      ownerId: id
+    });
+    attrParts.push(` data-e-model="${mid}"`);
+    attrParts.push(` data-e-on="input:__model_${mid}"`);
+  }
+
+  if (dirShow || dirText || dirHtml || binds.length || el.events.length || dirModel) {
+    attrParts.push(` data-e-node="${id}"`);
+  }
+
+  if (dirShow) {
+    ctx.bindings.push({
+      id,
+      keys: compileExpression(dirShow.value).keys,
+      kind: 'show',
+      expression: dirShow.value
+    });
+  }
+
+  if (dirText) {
+    ctx.bindings.push({
+      id,
+      keys: compileExpression(dirText.value).keys,
+      kind: 'textContent',
+      expression: dirText.value,
+      raw: false
+    });
+  }
+
+  if (dirHtml) {
+    // Explicit opt-in only (e-html / @html attr)
+    ctx.bindings.push({
+      id,
+      keys: compileExpression(dirHtml.value).keys,
+      kind: 'rawHtml',
+      expression: dirHtml.value,
+      raw: true
+    });
+  }
+
+  const open = `<${tag}${scopeAttr}${attrParts.join('')}>`;
+  if (isVoid(tag)) return open;
+
+  const children =
+    dirText || dirHtml ? '' : genChildren(el.children, ctx, meta);
+  return `${open}${children}</${tag}>`;
+}
+
+function genRawTemplate(el, scopeId) {
+  if (el.type === 'Text') return escapeHtml(el.value);
+  if (el.type === 'Interpolation') return `{${el.expression}}`;
+  if (el.type === 'RawHtml') return `{@html ${el.expression}}`;
+  if (el.type === 'Comment') return `<!--${el.value}-->`;
+  if (el.type !== 'Element') return '';
+
+  const tag = el.tag;
+  const parts = [];
+  const scopeAttr = scopeId ? ` ${scopeId}` : '';
+  for (const a of el.attrs) {
+    const staticAttr = emitStaticAttr(a, { filename: 'template' });
+    if (staticAttr) parts.push(staticAttr);
+  }
+  if (el.events.length) {
+    const spec = el.events.map((e) => `${e.event}:${stripCall(e.handler)}`).join(';');
+    parts.push(` data-e-on="${escapeAttr(spec)}"`);
+  }
+  const open = `<${tag}${scopeAttr}${parts.join('')}>`;
+  if (isVoid(tag)) return open;
+  const children = (el.children || [])
+    .map((c) => {
+      if (c.type === 'Element') return genRawTemplate(c, scopeId);
+      if (c.type === 'Interpolation') return `{${c.expression}}`;
+      if (c.type === 'RawHtml') return `{@html ${c.expression}}`;
+      if (c.type === 'Text') return escapeHtml(c.value);
+      return '';
+    })
+    .join('');
+  return `${open}${children}</${tag}>`;
+}
+
+function emitModule(ctx, scriptInfo, bodyHtml) {
+  const { scopeId, styles, filename } = ctx;
+  const htmlLit = JSON.stringify(bodyHtml);
+  const importLines = scriptInfo.imports
+    .map((imp) => formatImport(imp))
+    .join('\n');
+
+  const setupBody = scriptInfo.setupBody || defaultSetupBody();
+
+  return `/* Compiled by Easy.js from ${filename} */
+import {
+  defineComponent, reactive, injectStyles, replaceStyles,
+  mountComponent, unmountComponent,
+  escapeHtml, sanitizeUrl,
+  createBoundary, pushBoundary, reportError, EasyError,
+  registerHmrInstance, createEventContext
+} from 'mez-easyjs';
+${importLines}
+
+const __SCOPE = ${JSON.stringify(scopeId)};
+const __STYLES = ${JSON.stringify(styles)};
+const __HTML = ${htmlLit};
+const __FILE = ${JSON.stringify(filename)};
+const __HMR_ID = import.meta.url;
+
+${scriptInfo.prelude}
+
+export default defineComponent({
+  name: ${JSON.stringify(filename.replace(/\\.easy$/i, ''))},
+  scopeId: __SCOPE,
+  styles: __STYLES,
+  filename: __FILE,
+  setup(props, ctx) {
+${indent(setupBody, 4)}
+
+    const __cleanups = [];
+    const __childInstances = [];
+    let __root = null;
+    const __nodes = Object.create(null);
+
+    function __read(exprCode) {
+      /* exprCode is precompiled — kept for clarity in errors */
+      return exprCode;
+    }
+
+    function __qs(sel) {
+      return __root.querySelector(sel);
+    }
+
+    function __subscribe(keys, fn) {
+      const run = () => {
+        try { fn(); }
+        catch (err) {
+          reportError(err instanceof EasyError ? err : new EasyError(err.message || String(err), {
+            component: __FILE,
+            filename: __FILE,
+            cause: err,
+            hint: 'Check the template expression and component state.'
+          }));
+        }
+      };
+      for (const k of keys) {
+        if (state && state.$subscribe) __cleanups.push(state.$subscribe(k, run));
+      }
+      run();
+    }
+
+    function __ctxMethods() {
+      return { ...methods, ...(__modelHandlers || {}) };
+    }
+
+${indent(emitUpdaters(ctx), 4)}
+
+${indent(emitModelMethods(ctx), 4)}
+
+    function mount(el) {
+      __root = el;
+      replaceStyles(__SCOPE, __STYLES);
+      el.innerHTML = __HTML;
+
+${indent(emitNodeCache(ctx), 6)}
+
+      if (ctx.appContext && ctx.appContext.registerContext) {
+        const router = ctx.appContext.router;
+        // Live proxy — do NOT spread state (stale snapshot breaks this.x mutations
+        // and can desync handlers from reactive subscribers / DOM updaters).
+        const __eventCtx = createEventContext(__ctxMethods(), state, {
+          $router: router,
+          $emit: ctx.emit
+        });
+        ctx.appContext.registerContext(el, __eventCtx);
+        // display:contents hosts are skipped in some browsers' event paths;
+        // also register on the first real child so clicks still resolve.
+        if (el.firstElementChild) {
+          ctx.appContext.registerContext(el.firstElementChild, __eventCtx);
+        }
+      }
+
+      if (typeof registerHmrInstance === 'function' && __HMR_ID) {
+        __cleanups.push(registerHmrInstance(__HMR_ID, {
+          get state() { return state; },
+          get props() { return props; },
+          get $el() { return __root; },
+          get appContext() { return ctx.appContext; },
+          unmount
+        }, { filename: __FILE, scopeId: __SCOPE }));
+      }
+
+${indent(emitSubscriptions(ctx), 6)}
+${indent(emitRouterViews(ctx), 6)}
+${indent(emitBoundaries(ctx), 6)}
+${indent(emitChildComponents(ctx), 6)}
+    }
+
+    function unmount() {
+      for (const c of __childInstances) {
+        if (c && c.unmount) c.unmount();
+      }
+      __childInstances.length = 0;
+      for (const fn of __cleanups) fn();
+      __cleanups.length = 0;
+      if (__root) __root.innerHTML = '';
+      __root = null;
+    }
+
+    // $router is resolved via __self / createBoundThis — do not put it on methods
+    // (runtime binds every methods entry with .bind, so non-functions break mount).
+
+    const api = { state, methods, mount, unmount, props };
+    ctx.expose(api);
+    return api;
+  }
+});
+
+// HMR accept hint for Easy.js client
+export const __easy_hmr = { scopeId: __SCOPE, file: __FILE };
+`;
+}
+
+function emitExpr(expression, locals = []) {
+  const { code, keys } = compileExpression(expression, { locals });
+  return { code, keys };
+}
+
+function emitUpdaters(ctx) {
+  const lines = [];
+
+  for (const b of ctx.bindings) {
+    const { code } = emitExpr(b.expression);
+    if (b.kind === 'text' || b.kind === 'textContent') {
+      lines.push(`function __upd_${b.id}() {
+  const n = __nodes[${JSON.stringify(String(b.id))}];
+  if (!n) return;
+  const __s = state, __m = methods, __p = props;
+  const v = (${code});
+  // textContent never parses HTML — XSS-safe by default (no innerHTML)
+  n.textContent = v == null ? '' : String(v);
+}`);
+    } else if (b.kind === 'rawHtml') {
+      lines.push(`function __upd_${b.id}() {
+  const n = __nodes[${JSON.stringify(String(b.id))}];
+  if (!n) return;
+  const __s = state, __m = methods, __p = props;
+  const v = (${code});
+  n.innerHTML = v == null ? '' : String(v);
+}`);
+    } else if (b.kind === 'show') {
+      lines.push(`function __upd_${b.id}() {
+  const n = __nodes[${JSON.stringify(String(b.id))}];
+  if (!n) return;
+  const __s = state, __m = methods, __p = props;
+  n.style.display = (${code}) ? '' : 'none';
+}`);
+    } else if (b.kind === 'attr') {
+      lines.push(`function __upd_${b.id}() {
+  const n = __root.querySelector('[data-e-bind-${b.attr}="${b.id}"]') || __nodes[${JSON.stringify(String(b.ownerHint))}];
+  if (!n) return;
+  const __s = state, __m = methods, __p = props;
+  let v = (${code});
+  ${attrSetter(b.attr)}
+}`);
+    }
+  }
+
+  // Fix rawHtml double evaluation
+  // (rewritten below in loop — let me fix rawHtml properly)
+  // I'll replace rawHtml blocks:
+
+  for (const block of ctx.ifs) {
+    const { code } = emitExpr(block.condition);
+    lines.push(`function __upd_if_${block.id}() {
+  const anchor = __nodes[${JSON.stringify('if_' + block.id)}];
+  if (!anchor) return;
+  const __s = state, __m = methods, __p = props;
+  const show = !!(${code});
+  let node = anchor.__mounted;
+  if (show && !node) {
+    const tpl = document.createElement('template');
+    tpl.innerHTML = ${JSON.stringify(block.html)};
+    const wrap = document.createElement('div');
+    wrap.style.display = 'contents';
+    wrap.appendChild(tpl.content);
+    anchor.parentNode.insertBefore(wrap, anchor);
+    anchor.__mounted = wrap;
+  } else if (!show && node) {
+    if (node.parentNode) node.parentNode.removeChild(node);
+    anchor.__mounted = null;
+  }
+}`);
+  }
+
+  for (const f of ctx.fors) {
+    const { code: srcCode } = emitExpr(f.source);
+    const locals = [f.item, f.index || 'index'].filter(Boolean);
+    lines.push(`function __upd_for_${f.id}() {
+  const host = __nodes[${JSON.stringify('for_' + f.id)}];
+  if (!host) return;
+  const __s = state, __m = methods, __p = props;
+  const list = (${srcCode}) || [];
+  host.innerHTML = '';
+  const frag = document.createDocumentFragment();
+  const tplSrc = ${JSON.stringify(f.itemTemplate)};
+  for (let __i = 0; __i < list.length; __i++) {
+    const ${f.item} = list[__i];
+    const ${f.index || 'index'} = __i;
+    const html = tplSrc
+      .replace(/\\{@html\\s+([\\s\\S]+?)\\}/g, (_, expr) => {
+        const __locals = { ${f.item}: ${f.item}, ${f.index || 'index'}: ${f.index || 'index'} };
+        const v = __evalLocal(expr.trim(), __locals);
+        return v == null ? '' : String(v);
+      })
+      .replace(/\\{\\{([\\s\\S]+?)\\}\\}/g, (_, expr) => {
+        const __locals = { ${f.item}: ${f.item}, ${f.index || 'index'}: ${f.index || 'index'} };
+        const v = __evalLocal(expr.trim(), __locals);
+        return escapeHtml(v);
+      })
+      .replace(/\\{([^{}@][^}]*)\\}/g, (_, expr) => {
+        const __locals = { ${f.item}: ${f.item}, ${f.index || 'index'}: ${f.index || 'index'} };
+        const v = __evalLocal(expr.trim(), __locals);
+        return escapeHtml(v);
+      });
+    const tpl = document.createElement('template');
+    tpl.innerHTML = html;
+    frag.appendChild(tpl.content);
+  }
+  host.appendChild(frag);
+}
+
+function __evalLocal(expr, locals) {
+  // CSP-safe local evaluation via precompiled map for for-loops is limited;
+  // resolve simple member paths against locals + state.
+  return __pathRead(expr, locals);
+}
+
+function __pathRead(expr, locals) {
+  const trimmed = String(expr).trim();
+  // simple identifier or a.b.c — note: \\\\w in this template → \\w in output source
+  if (/^[\\w$]+(?:\\.[\\w$]+)*$/.test(trimmed)) {
+    const parts = trimmed.split('.');
+    let cur = Object.prototype.hasOwnProperty.call(locals, parts[0])
+      ? locals[parts[0]]
+      : (Object.prototype.hasOwnProperty.call(state, parts[0]) ? state[parts[0]] : undefined);
+    for (let i = 1; i < parts.length; i++) {
+      if (cur == null) return undefined;
+      cur = cur[parts[i]];
+    }
+    return cur;
+  }
+  reportError(new EasyError('Bad list item expression: ' + trimmed, {
+    filename: __FILE,
+    hint: 'Keep e-for item interpolations to simple paths like {{ todo }} or {{ item.name }}'
+  }));
+  return '';
+}`);
+  }
+
+  return lines.join('\n\n');
+}
+
+const URL_ATTRS = new Set([
+  'href',
+  'src',
+  'xlink:href',
+  'formaction',
+  'action',
+  'poster',
+  'cite',
+  'background',
+  'data'
+]);
+
+function isDangerousAttrName(name) {
+  const n = String(name || '').toLowerCase();
+  return /^on[a-z]/.test(n) || n === 'srcdoc';
+}
+
+function emitStaticAttr(a, ctx) {
+  const name = String(a.name || '');
+  const lower = name.toLowerCase();
+  if (isDangerousAttrName(name)) {
+    throw new CompileError({
+      message: `Inline event / dangerous attribute "${name}" is not allowed`,
+      filename: ctx.filename || 'component.easy',
+      ...locate(ctx.source || '', name),
+      source: ctx.source || '',
+      hint: 'Use onclick={handler} — Easy.js compiles to delegated data-e-on (CSP-safe).'
+    });
+  }
+  let value = a.value;
+  if (URL_ATTRS.has(lower)) {
+    value = sanitizeUrlStatic(value);
+    if (!value) return '';
+  }
+  return ` ${name}="${escapeAttr(value)}"`;
+}
+
+/** Compile-time URL sanitize (mirrors runtime sanitizeUrl). */
+function sanitizeUrlStatic(value) {
+  if (value == null) return '';
+  let s = String(value).trim();
+  s = s.replace(/[\u0000-\u001F\u007F\s]+/g, '');
+  s = s.replace(/&#0*58;|&#x0*3a;|&colon;/gi, ':');
+  if (/^(javascript|vbscript|data):/i.test(s)) return '';
+  return String(value).trim();
+}
+
+function attrSetter(attr) {
+  const lower = String(attr || '').toLowerCase();
+  if (isDangerousAttrName(attr)) {
+    return `/* blocked dangerous attr ${JSON.stringify(attr)} */`;
+  }
+  if (attr === 'class' || attr === 'className') {
+    return `n.className = v == null ? '' : String(v);`;
+  }
+  if (attr === 'style') {
+    return `if (typeof v === 'object' && v) { Object.assign(n.style, v); } else { n.setAttribute('style', v == null ? '' : String(v)); }`;
+  }
+  if (attr === 'value') {
+    return `n.value = v == null ? '' : v;`;
+  }
+  if (URL_ATTRS.has(lower)) {
+    return `v = sanitizeUrl(v); if (!v) n.removeAttribute(${JSON.stringify(attr)}); else n.setAttribute(${JSON.stringify(attr)}, v);`;
+  }
+  if (attr === 'checked' || attr === 'disabled' || attr === 'selected' || attr === 'hidden') {
+    return `n[${JSON.stringify(attr)}] = !!v;`;
+  }
+  return `if (v == null || v === false) n.removeAttribute(${JSON.stringify(attr)}); else n.setAttribute(${JSON.stringify(attr)}, v === true ? '' : String(v));`;
+}
+
+function emitModelMethods(ctx) {
+  const lines = ['const __modelHandlers = {};'];
+  for (const m of ctx.models) {
+    // state.foo = ... via compiled assignment target (identifier or path)
+    const target = m.expression.trim();
+    if (!/^[\w$]+(?:\.[\w$]+)*$/.test(target)) {
+      throw new CompileError({
+        message: `e-model must be a simple path, got "${target}"`,
+        filename: ctx.filename,
+        ...locate(ctx.source || ctx.script, target),
+        source: ctx.source || ctx.script,
+        hint: 'Use e-model="draft" or e-model="user.name"'
+      });
+    }
+    const parts = target.split('.');
+    const assign =
+      parts.length === 1
+        ? `state[${JSON.stringify(parts[0])}] = val;`
+        : (() => {
+            let s = 'state';
+            for (let i = 0; i < parts.length - 1; i++) s += `[${JSON.stringify(parts[i])}]`;
+            return `${s}[${JSON.stringify(parts[parts.length - 1])}] = val;`;
+          })();
+    lines.push(`methods.__model_${m.id} = function(e) {
+  const val = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
+  ${assign}
+};`);
+    lines.push(`__modelHandlers.__model_${m.id} = methods.__model_${m.id};`);
+  }
+  return lines.join('\n');
+}
+
+function emitNodeCache(ctx) {
+  const lines = [];
+  for (const b of ctx.bindings) {
+    if (b.kind === 'text' || b.kind === 'rawHtml') {
+      lines.push(`__nodes[${JSON.stringify(String(b.id))}] = __qs('[data-e="${b.id}"]');`);
+    } else if (b.kind === 'attr') {
+      lines.push(`__nodes[${JSON.stringify(String(b.id))}] = __qs('[data-e-bind-${b.attr}="${b.id}"]');`);
+    } else if (b.kind === 'show' || b.kind === 'textContent') {
+      lines.push(`__nodes[${JSON.stringify(String(b.id))}] = __qs('[data-e-node="${b.id}"]');`);
+    }
+  }
+  for (const block of ctx.ifs) {
+    lines.push(`__nodes[${JSON.stringify('if_' + block.id)}] = __qs('[data-e-if="${block.id}"]');`);
+  }
+  for (const f of ctx.fors) {
+    lines.push(`__nodes[${JSON.stringify('for_' + f.id)}] = __qs('[data-e-for="${f.id}"]');`);
+  }
+  for (const c of ctx.components) {
+    lines.push(`__nodes[${JSON.stringify('comp_' + c.id)}] = __qs('[data-e-comp="${c.id}"]');`);
+  }
+  for (const r of ctx.routerViews) {
+    lines.push(`__nodes[${JSON.stringify('router_' + r.id)}] = __qs('[data-e-router="${r.id}"]');`);
+  }
+  for (const b of ctx.boundaries) {
+    lines.push(`__nodes[${JSON.stringify('boundary_' + b.id)}] = __qs('[data-e-boundary="${b.id}"]');`);
+  }
+  for (const m of ctx.models) {
+    lines.push(`__nodes[${JSON.stringify('model_' + m.id)}] = __qs('[data-e-model="${m.id}"]');`);
+  }
+  return lines.join('\n');
+}
+
+function emitSubscriptions(ctx) {
+  const lines = [];
+  for (const b of ctx.bindings) {
+    const keys = b.keys.length ? b.keys : ['*'];
+    lines.push(`__subscribe(${JSON.stringify(keys)}, __upd_${b.id});`);
+  }
+  for (const block of ctx.ifs) {
+    const keys = block.keys.length ? block.keys : ['*'];
+    lines.push(`__subscribe(${JSON.stringify(keys)}, __upd_if_${block.id});`);
+  }
+  for (const f of ctx.fors) {
+    const keys = f.keys.length ? f.keys : ['*'];
+    lines.push(`__subscribe(${JSON.stringify(keys)}, () => __upd_for_${f.id}());`);
+  }
+  for (const m of ctx.models) {
+    const keys = m.keys.length ? m.keys : ['*'];
+    const { code } = emitExpr(m.expression);
+    lines.push(`__subscribe(${JSON.stringify(keys)}, () => {
+  const n = __nodes[${JSON.stringify('model_' + m.id)}];
+  if (!n) return;
+  const __s = state, __m = methods, __p = props;
+  const v = (${code});
+  if (n.type === 'checkbox') n.checked = !!v;
+  else if (n.value !== String(v ?? '')) n.value = v ?? '';
+});`);
+  }
+  return lines.join('\n');
+}
+
+function emitRouterViews(ctx) {
+  if (!ctx.routerViews.length) return '';
+  return ctx.routerViews
+    .map(
+      (r) => `{
+  const host = __nodes[${JSON.stringify('router_' + r.id)}];
+  const router = ctx.appContext && ctx.appContext.router;
+  if (host && router) {
+    router._registerView(host);
+    __cleanups.push(() => router._unregisterView(host));
+  }
+}`
+    )
+    .join('\n');
+}
+
+function emitBoundaries(ctx) {
+  if (!ctx.boundaries.length) return '';
+  return ctx.boundaries
+    .map(
+      (b) => `{
+  const host = __nodes[${JSON.stringify('boundary_' + b.id)}];
+  if (host) {
+    const boundary = createBoundary(host, {
+      fallback: ${JSON.stringify(b.fallback)},
+      name: 'ErrorBoundary',
+      hint: 'A child component threw. Fix the error and save — HMR will retry.'
+    });
+    const stop = pushBoundary(boundary);
+    __cleanups.push(() => { stop(); boundary.dispose(); });
+    host.__easyBoundary = boundary;
+  }
+}`
+    )
+    .join('\n');
+}
+
+function emitChildComponents(ctx) {
+  if (!ctx.components.length) return '';
+  return ctx.components
+    .map((c) => {
+      const propsEntries = Object.entries(c.props).map(([k, v]) => {
+        // Static JSON.stringify values from attrs start with quote from JSON.stringify already
+        if (/^["']/.test(v) || v === 'true' || v === 'false' || /^[\d.]+$/.test(v)) {
+          // If we JSON.stringified in genElement, v is already '"foo"'
+          if (v.startsWith('"') || v.startsWith("'")) {
+            return `${JSON.stringify(k)}: ${v}`;
+          }
+        }
+        // Dynamic expression
+        const { code } = emitExpr(v);
+        return `${JSON.stringify(k)}: (() => { const __s = state, __m = methods, __p = props; return (${code}); })()`;
+      });
+      return `{
+  const host = __nodes[${JSON.stringify('comp_' + c.id)}];
+  const Comp = typeof ${c.name} !== 'undefined' ? ${c.name} : null;
+  if (!Comp) {
+    reportError(new EasyError('Unknown component <${c.name}>', {
+      filename: __FILE,
+      hint: 'Import the component in <script> and use PascalCase in the template.'
+    }));
+  } else if (host) {
+    const apply = () => {
+      try {
+        if (host.__inst) unmountComponent(host.__inst);
+        host.__inst = mountComponent(Comp, host, { ${propsEntries.join(', ')} }, {
+          ...ctx.appContext,
+          parent: { filename: __FILE }
+        });
+      } catch (err) {
+        const easyErr = err instanceof EasyError ? err : new EasyError(err.message || String(err), {
+          component: '${c.name}',
+          filename: __FILE,
+          cause: err,
+          hint: 'Check props passed to <${c.name}>.'
+        });
+        reportError(easyErr);
+        let p = host.parentElement;
+        while (p) {
+          if (p.__easyBoundary) { p.__easyBoundary.capture(easyErr, { filename: __FILE }); break; }
+          p = p.parentElement;
+        }
+      }
+    };
+    apply();
+    __childInstances.push({ unmount: () => host.__inst && unmountComponent(host.__inst) });
+    ${
+      c.keys.length
+        ? `__subscribe(${JSON.stringify(c.keys)}, () => { apply(); });`
+        : `/* static child <${c.name}> — mount once, do not remount on parent state */`
+    }
+  }
+}`;
+    })
+    .join('\n');
+}
+
+/* ── Script analysis ─────────────────────────────────────────── */
+
+function analyzeScript(script, options = {}) {
+  let raw = script || '';
+  if (options.lang === 'ts' || options.lang === 'typescript') {
+    // strip applied in compile(); keep defensive
+    raw = raw;
+  }
+
+  const imports = [];
+  let body = raw;
+  const importRe = /^import\s+([\s\S]*?)\s+from\s+['"]([^'"]+)['"]\s*;?[ \t]*$/gm;
+  let m;
+  const importSpans = [];
+  while ((m = importRe.exec(raw)) !== null) {
+    importSpans.push(m[0]);
+    imports.push(parseImportClause(m[1], m[2]));
+  }
+  for (const span of importSpans) body = body.replace(span, '');
+  body = body.trim();
+
+  let setupBody = null;
+  let prelude = '';
+
+  const defaultExportMatch = body.match(/export\s+default\s+(\{[\s\S]*})\s*;?\s*$/);
+  if (defaultExportMatch) {
+    const obj = defaultExportMatch[1];
+    prelude = body.slice(0, defaultExportMatch.index).trim();
+    setupBody = optionsApiToSetup(obj);
+  } else if (/export\s+default\b/.test(body)) {
+    prelude = body.replace(/export\s+default\s+/, 'const __options = ');
+    setupBody = optionsApiToSetup('__options');
+  } else if (looksLikeSvelteScript(body)) {
+    const svelte = svelteScriptToSetup(body);
+    prelude = svelte.prelude;
+    setupBody = svelte.setupBody;
+  } else {
+    prelude = body;
+    setupBody = defaultSetupBody();
+  }
+
+  return { imports, setupBody, prelude };
+}
+
+function looksLikeSvelteScript(body) {
+  if (!body.trim()) return true;
+  return (
+    /^\s*(let|const|var|function)\b/m.test(body) ||
+    /^\s*(?:async\s+)?function\b/m.test(body)
+  );
+}
+
+/**
+ * Svelte-like script:
+ *   let count = 0;
+ *   function inc() { count++; }
+ * → reactive state + methods with rewritten refs
+ */
+function svelteScriptToSetup(body) {
+  const stateFields = [];
+  const fns = [];
+  let work = body;
+
+  // 1) function declarations
+  {
+    const fnRe = /(?:export\s+)?(async\s+)?function\s+([A-Za-z_$][\w$]*)\s*\(([^)]*)\)\s*\{/g;
+    const pieces = [];
+    let last = 0;
+    let fm;
+    const temp = work;
+    while ((fm = fnRe.exec(temp)) !== null) {
+      pieces.push(temp.slice(last, fm.index));
+      const braceStart = fm.index + fm[0].length - 1;
+      const braceEnd = findMatchingBrace(temp, braceStart);
+      fns.push({
+        name: fm[2],
+        params: fm[3].trim(),
+        body: temp.slice(braceStart + 1, braceEnd),
+        async: !!fm[1]
+      });
+      last = braceEnd + 1;
+    }
+    pieces.push(temp.slice(last));
+    work = pieces.join('\n');
+  }
+
+  // 2) arrow functions with block body — before let/const extraction
+  {
+    const arrowRe =
+      /(?:export\s+)?(?:const|let)\s+([A-Za-z_$][\w$]*)\s*=\s*(async\s*)?\(([^)]*)\)\s*=>\s*\{/g;
+    let am;
+    const src = work;
+    const keep = [];
+    let cursor = 0;
+    while ((am = arrowRe.exec(src)) !== null) {
+      keep.push(src.slice(cursor, am.index));
+      const braceStart = am.index + am[0].length - 1;
+      const braceEnd = findMatchingBrace(src, braceStart);
+      fns.push({
+        name: am[1],
+        params: am[3].trim(),
+        body: src.slice(braceStart + 1, braceEnd),
+        async: !!am[2]
+      });
+      cursor = braceEnd + 1;
+      if (src[cursor] === ';') cursor++;
+    }
+    keep.push(src.slice(cursor));
+    work = keep.join('\n');
+  }
+
+  // 3) expression-bodied arrows
+  work = work.replace(
+    /(?:export\s+)?(?:const|let)\s+([A-Za-z_$][\w$]*)\s*=\s*(async\s*)?\(([^)]*)\)\s*=>\s*([^;{][^;]*);/g,
+    (_, name, asyncKw, params, expr) => {
+      fns.push({
+        name,
+        params: params.trim(),
+        body: `return (${expr.trim()});`,
+        async: !!asyncKw
+      });
+      return '';
+    }
+  );
+
+  // 3b) onMount(() => { ... }) / onMount(function(){...})
+  let onMountBody = null;
+  {
+    const om = work.match(/onMount\s*\(\s*(?:function\s*\([^)]*\)\s*|([^)]*)\s*=>\s*)\{/);
+    if (om) {
+      const start = work.indexOf(om[0]) + om[0].length - 1;
+      const end = findMatchingBrace(work, start);
+      onMountBody = work.slice(start + 1, end);
+      let after = end + 1;
+      // consume closing ); 
+      const tail = work.slice(after).match(/^\s*\)\s*;?/);
+      if (tail) after += tail[0].length;
+      work = work.slice(0, work.indexOf(om[0])) + work.slice(after);
+    }
+  }
+
+  // 4) let / const state
+  work = work.replace(
+    /(?:export\s+)?(let|const|var)\s+([A-Za-z_$][\w$]*)(\s*=\s*([^;]+))?;/g,
+    (_, kind, name, _eq, init) => {
+      stateFields.push({ name, init: (init || 'undefined').trim(), kind });
+      return '';
+    }
+  );
+
+  const stateKeys = stateFields.map((f) => f.name);
+  const stateObj = stateFields
+    .map((f) => `  ${JSON.stringify(f.name)}: ${f.init}`)
+    .join(',\n');
+
+  const methodNames = fns.map((fn) => fn.name);
+
+  const methodEntries = fns.map((fn) => {
+    const locals = fn.params
+      .split(',')
+      .map((p) => p.trim().split(/[\s=]/)[0])
+      .filter(Boolean);
+    const rewritten = rewriteStateRefs(fn.body, stateKeys, locals, methodNames);
+    const asyncKw = fn.async ? 'async ' : '';
+    return `  ${JSON.stringify(fn.name)}: ${asyncKw}function(${fn.params}) {\n${indent(rewritten, 4)}\n  }`;
+  });
+
+  const prelude = work.replace(/\bonMount\b/g, '/* onMount handled */').trim();
+
+  const onMountSnippet = onMountBody
+    ? `
+queueMicrotask(() => {
+  try {
+    (function() {\n${indent(rewriteStateRefs(onMountBody, stateKeys, [], methodNames), 4)}\n  }).call(__self);
+  } catch (e) {
+    reportError(e, { filename: __FILE });
+  }
+});
+`
+    : '';
+
+  const setupBody = `
+const state = reactive({
+${stateObj || '  /* no let bindings */'}
+});
+const methods = {
+${methodEntries.join(',\n') || '  /* no functions */'}
+};
+const __self = new Proxy({}, {
+  get(_, key) {
+    if (key === '$router') return ctx.appContext && ctx.appContext.router;
+    if (key === '$emit') return ctx.emit;
+    if (key === '$props') return props;
+    if (key in methods) return methods[key];
+    if (state && key in state) return state[key];
+    return undefined;
+  },
+  set(_, key, value) {
+    if (state) { state[key] = value; return true; }
+    return false;
+  }
+});
+for (const __name of Object.keys(methods)) {
+  const __fn = methods[__name];
+  methods[__name] = function (...__args) {
+    try {
+      return __fn.apply(__self, __args);
+    } catch (err) {
+      reportError(new EasyError(err.message || String(err), {
+        filename: __FILE,
+        component: __FILE,
+        cause: err,
+        hint: 'Error in "' + __name + '".'
+      }));
+      throw err;
+    }
+  };
+}
+${onMountSnippet}
+`;
+
+  return { prelude, setupBody };
+}
+
+function findMatchingBrace(src, openIdx) {
+  let depth = 0;
+  for (let i = openIdx; i < src.length; i++) {
+    const ch = src[i];
+    if (ch === '"' || ch === "'" || ch === '`') {
+      const q = ch;
+      i++;
+      while (i < src.length) {
+        if (src[i] === '\\') {
+          i += 2;
+          continue;
+        }
+        if (src[i] === q) break;
+        i++;
+      }
+      continue;
+    }
+    if (ch === '{') depth++;
+    else if (ch === '}') {
+      depth--;
+      if (depth === 0) return i;
+    }
+  }
+  return src.length - 1;
+}
+
+function rewriteStateRefs(code, stateKeys, locals = [], methodNames = []) {
+  const localSet = new Set(locals);
+  const keySet = new Set(stateKeys);
+  const methodSet = new Set(methodNames);
+  if (!keySet.size && !methodSet.size) return code;
+  let i = 0;
+  let out = '';
+  const src = code;
+
+  while (i < src.length) {
+    const ch = src[i];
+
+    if (ch === '"' || ch === "'" || ch === '`') {
+      const q = ch;
+      out += ch;
+      i++;
+      while (i < src.length) {
+        out += src[i];
+        if (src[i] === '\\') {
+          i++;
+          if (i < src.length) out += src[i];
+          i++;
+          continue;
+        }
+        if (src[i] === q) {
+          i++;
+          break;
+        }
+        i++;
+      }
+      continue;
+    }
+
+    if (ch === '/' && src[i + 1] === '/') {
+      while (i < src.length && src[i] !== '\n') {
+        out += src[i];
+        i++;
+      }
+      continue;
+    }
+
+    if (ch === '/' && src[i + 1] === '*') {
+      out += ch;
+      i++;
+      while (i < src.length && !(src[i] === '*' && src[i + 1] === '/')) {
+        out += src[i];
+        i++;
+      }
+      continue;
+    }
+
+    if (/[A-Za-z_$]/.test(ch)) {
+      const start = i;
+      i++;
+      while (i < src.length && /[\w$]/.test(src[i])) i++;
+      const id = src.slice(start, i);
+      const prev = previousNonSpace(out);
+      if (prev === '.') {
+        out += id;
+        continue;
+      }
+      if (localSet.has(id)) {
+        out += id;
+        continue;
+      }
+      if (keySet.has(id)) {
+        out += `state[${JSON.stringify(id)}]`;
+        continue;
+      }
+      // Bare method refs (e.g. syncParams.call(this) inside onMount)
+      if (methodSet.has(id)) {
+        out += `methods[${JSON.stringify(id)}]`;
+        continue;
+      }
+      out += id;
+      continue;
+    }
+
+    out += ch;
+    i++;
+  }
+
+  return out;
+}
+
+function previousNonSpace(s) {
+  for (let i = s.length - 1; i >= 0; i--) {
+    if (!/\s/.test(s[i])) return s[i];
+  }
+  return '';
+}
+
+function formatImport(imp) {
+  if (imp.namespaced) return `import * as ${imp.local} from ${JSON.stringify(imp.source)};`;
+  if (imp.defaultName && imp.specifiers.length) {
+    return `import ${imp.defaultName}, { ${imp.specifiers.map((s) => (s.local === s.imported ? s.imported : `${s.imported} as ${s.local}`)).join(', ')} } from ${JSON.stringify(imp.source)};`;
+  }
+  if (imp.defaultName) return `import ${imp.defaultName} from ${JSON.stringify(imp.source)};`;
+  if (imp.specifiers.length) {
+    return `import { ${imp.specifiers.map((s) => (s.local === s.imported ? s.imported : `${s.imported} as ${s.local}`)).join(', ')} } from ${JSON.stringify(imp.source)};`;
+  }
+  return `import ${JSON.stringify(imp.source)};`;
+}
+
+function parseImportClause(clause, source) {
+  const result = { source, defaultName: null, namespaced: null, local: null, specifiers: [] };
+  const trimmed = clause.trim();
+  if (trimmed.startsWith('*')) {
+    const m = trimmed.match(/\*\s+as\s+(\w+)/);
+    result.namespaced = true;
+    result.local = m ? m[1] : 'mod';
+    return result;
+  }
+  for (const part of splitImportParts(trimmed)) {
+    if (part.startsWith('{')) {
+      const inner = part.slice(1, -1);
+      for (const s of inner.split(',')) {
+        const t = s.trim();
+        if (!t) continue;
+        const [imported, local] = t.split(/\s+as\s+/).map((x) => x.trim());
+        result.specifiers.push({ imported, local: local || imported });
+      }
+    } else {
+      result.defaultName = part.trim();
+    }
+  }
+  return result;
+}
+
+function splitImportParts(clause) {
+  const parts = [];
+  let depth = 0;
+  let cur = '';
+  for (const ch of clause) {
+    if (ch === '{') depth++;
+    if (ch === '}') depth--;
+    if (ch === ',' && depth === 0) {
+      parts.push(cur.trim());
+      cur = '';
+    } else cur += ch;
+  }
+  if (cur.trim()) parts.push(cur.trim());
+  return parts;
+}
+
+function optionsApiToSetup(objExpr) {
+  const isLiteral = objExpr.trim().startsWith('{');
+  return `
+const __options = ${isLiteral ? objExpr : objExpr};
+const __data = typeof __options.data === 'function' ? __options.data() : (__options.data || {});
+const state = reactive(__data);
+const methods = {};
+const __self = new Proxy({}, {
+  get(_, key) {
+    if (key === '$router') return ctx.appContext && ctx.appContext.router;
+    if (key === '$emit') return ctx.emit;
+    if (key === '$props') return props;
+    if (key in methods) return methods[key];
+    if (state && key in state) return state[key];
+    return undefined;
+  },
+  set(_, key, value) {
+    if (state) { state[key] = value; return true; }
+    return false;
+  }
+});
+for (const [__name, __fn] of Object.entries(__options.methods || {})) {
+  methods[__name] = function (...__args) {
+    try {
+      return __fn.apply(__self, __args);
+    } catch (err) {
+      reportError(new EasyError(err.message || String(err), {
+        filename: __FILE,
+        component: __FILE,
+        cause: err,
+        hint: 'Error in method "' + __name + '".'
+      }));
+      throw err;
+    }
+  };
+}
+if (__options.created) __options.created.call(__self);
+const __mountedHook = __options.mounted;
+if (__mountedHook) {
+  queueMicrotask(() => { try { __mountedHook.call(__self); } catch (e) { reportError(e, { filename: __FILE }); } });
+}
+`;
+}
+
+function defaultSetupBody() {
+  return `const state = reactive({});\nconst methods = {};\n`;
+}
+
+function parseFor(value) {
+  const m = value
+    .trim()
+    .match(/^\(?\s*([\w$]+)(?:\s*,\s*([\w$]+))?\s*\)?\s+(?:in|of)\s+(.+)$/);
+  if (!m) return { item: 'item', index: 'index', source: value.trim() };
+  return { item: m[1], index: m[2] || null, source: m[3].trim() };
+}
+
+function stripCall(handler) {
+  return String(handler || '')
+    .trim()
+    .replace(/\(\s*\)$/, '');
+}
+
+function nextId() {
+  return uid++;
+}
+
+function escapeHtml(s) {
+  return String(s)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+}
+
+function escapeAttr(s) {
+  return String(s)
+    .replace(/&/g, '&amp;')
+    .replace(/"/g, '&quot;')
+    .replace(/</g, '&lt;');
+}
+
+function isVoid(tag) {
+  return new Set([
+    'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta',
+    'param', 'source', 'track', 'wbr'
+  ]).has(String(tag).toLowerCase());
+}
+
+function indent(str, n) {
+  const pad = ' '.repeat(n);
+  return String(str)
+    .split('\n')
+    .map((l) => (l ? pad + l : l))
+    .join('\n');
+}