olova 2.0.67 → 2.0.70

package/dist/index.js

@@ -7,8 +7,161 @@ import generatorModule from '@babel/generator';
 import traverseModule from '@babel/traverse';
 import * as t from '@babel/types';
 import ts from 'typescript';
+import * as csstree from 'css-tree';
+import { parseDocument } from 'htmlparser2';
 
 // vite/olova-plugin.ts
+function createScopeAttr(scopeId) {
+  return scopeId ? `data-o-scope-${scopeId}` : null;
+}
+function scopeSelectorList(selectorList, scopeAttr) {
+  const applyScopeToSegment = (segment) => {
+    const trimmed = segment.trim();
+    if (!trimmed) {
+      return trimmed;
+    }
+    if (trimmed.includes(scopeAttr)) {
+      return trimmed;
+    }
+    const globalPattern = /:global\(([^()]+)\)/g;
+    const localCandidate = trimmed.replace(globalPattern, "").trim();
+    const normalized = trimmed.replace(globalPattern, "$1");
+    if (!localCandidate) {
+      return normalized;
+    }
+    if (normalized === ":root") {
+      return `[${scopeAttr}]`;
+    }
+    const pseudoIndex = normalized.search(/(?<!:):(?!:)/);
+    if (pseudoIndex === -1) {
+      return `${normalized}[${scopeAttr}]`;
+    }
+    return `${normalized.slice(0, pseudoIndex)}[${scopeAttr}]${normalized.slice(pseudoIndex)}`;
+  };
+  return selectorList.split(",").map((selector) => selector.trim()).filter(Boolean).map((selector) => {
+    if (selector.startsWith("@") || selector.includes(scopeAttr)) {
+      return selector;
+    }
+    return selector.split(/(\s+|[>+~])/).map((part) => {
+      if (!part || /^(\s+|[>+~])$/.test(part)) {
+        return part;
+      }
+      return applyScopeToSegment(part);
+    }).join("");
+  }).join(", ");
+}
+function scopeCss(css, scopeAttr) {
+  const ast = csstree.parse(css, {
+    context: "stylesheet",
+    positions: false
+  });
+  csstree.walk(ast, {
+    visit: "Rule",
+    enter(node) {
+      const rule = node;
+      if (!rule.prelude || rule.prelude.type !== "SelectorList") {
+        return;
+      }
+      rule.prelude = csstree.parse(
+        scopeSelectorList(csstree.generate(rule.prelude), scopeAttr),
+        {
+          context: "selectorList",
+          positions: false
+        }
+      );
+    }
+  });
+  return csstree.generate(ast);
+}
+function hashScopeSeed(input) {
+  let hash = 2166136261;
+  for (let index = 0; index < input.length; index += 1) {
+    hash ^= input.charCodeAt(index);
+    hash = Math.imul(hash, 16777619);
+  }
+  return Math.abs(hash >>> 0).toString(36);
+}
+function collectCss(blocks, scopeId) {
+  const scopeAttr = createScopeAttr(scopeId);
+  return blocks.map((block) => {
+    const content = block.content.trim();
+    if (!content) {
+      return "";
+    }
+    if (!("global" in block.attrs) && scopeAttr) {
+      return scopeCss(content, scopeAttr);
+    }
+    return content;
+  }).filter(Boolean).join("\n\n");
+}
+
+// compiler/diagnostics.ts
+function indexToLocation(source, index) {
+  const safeIndex = Math.max(0, Math.min(index, source.length));
+  const lines = source.slice(0, safeIndex).split("\n");
+  return {
+    line: lines.length,
+    column: lines[lines.length - 1]?.length ?? 0,
+    index: safeIndex
+  };
+}
+function createCodeFrame(source, line, column, contextLines = 2) {
+  const lines = source.split("\n");
+  const start = Math.max(0, line - 1 - contextLines);
+  const end = Math.min(lines.length, line + contextLines);
+  return lines.slice(start, end).map((content, offset) => {
+    const lineNumber = start + offset + 1;
+    const prefix = `${String(lineNumber).padStart(4, " ")} | `;
+    if (lineNumber !== line) {
+      return `${prefix}${content}`;
+    }
+    return `${prefix}${content}
+     | ${" ".repeat(Math.max(column, 0))}^`;
+  }).join("\n");
+}
+function createCompileError(message, source, index, options) {
+  const loc = indexToLocation(source, index);
+  const error = new Error(message);
+  error.loc = { start: loc };
+  error.frame = createCodeFrame(source, loc.line, loc.column);
+  error.phase = options?.phase;
+  error.hint = options?.hint;
+  error.diagnostic = {
+    message,
+    filename: options?.filename,
+    phase: options?.phase,
+    line: loc.line,
+    column: loc.column + 1,
+    index: loc.index,
+    frame: error.frame,
+    hint: options?.hint
+  };
+  return error;
+}
+function normalizeCompileError(error, source, filename = "component.olova") {
+  const compileError = error instanceof Error ? error : new Error(String(error));
+  const start = compileError.loc?.start ?? compileError.loc;
+  const line = start?.line;
+  const column = start?.column;
+  const phasePrefix = compileError.phase ? ` [${compileError.phase}]` : "";
+  const locationSuffix = line === void 0 || column === void 0 ? "" : ` (${filename}:${line}:${column + 1})`;
+  const normalizedMessage = compileError.message.replace(/^\[olova\]\s*/, "");
+  compileError.message = `[olova]${phasePrefix} ${normalizedMessage}${locationSuffix}`;
+  if (line !== void 0 && column !== void 0 && !compileError.frame) {
+    compileError.frame = createCodeFrame(source, line, column);
+  }
+  compileError.diagnostic = {
+    message: normalizedMessage,
+    filename,
+    phase: compileError.phase,
+    line,
+    column: column === void 0 ? void 0 : column + 1,
+    index: start?.index,
+    frame: compileError.frame,
+    hint: compileError.hint
+  };
+  throw compileError;
+}
 
 // compiler/parse.ts
 function isWhitespace(char) {
@@ -181,17 +334,17 @@ function removeRanges(source, ranges) {
   return output.trim();
 }
 function parseOlovaFile(source) {
-  const scriptBlock = collectTopLevelBlocks(source, "script")[0] ?? null;
+  const scriptBlocks = collectTopLevelBlocks(source, "script");
   const styleBlocks = collectTopLevelBlocks(source, "style");
   const ranges = styleBlocks.map((block) => ({
     start: block.fullStart,
     end: block.closeEnd
   }));
-  if (scriptBlock) {
+  for (const scriptBlock of scriptBlocks) {
     ranges.push({ start: scriptBlock.fullStart, end: scriptBlock.closeEnd });
   }
   return {
-    script: scriptBlock?.inner.trim() ?? "",
+    script: scriptBlocks.map((block) => block.inner.trim()).filter(Boolean).join("\n\n"),
     template: removeRanges(source, ranges),
     styles: styleBlocks.map((block) => ({
       content: block.inner.trim(),
@@ -199,55 +352,30 @@ function parseOlovaFile(source) {
     }))
   };
 }
-
-// compiler/html-parser.ts
-function isWhitespace2(char) {
-  return /\s/.test(char);
-}
-function findTagEnd2(source, start) {
-  let index = start;
-  while (index < source.length) {
-    const char = source[index];
-    if (char === '"' || char === "'") {
-      const quoted = readQuotedValue(source, index, char);
-      index = quoted.end;
-      continue;
-    }
-    if (char === "{") {
-      const braced = readBraceValue(source, index);
-      index = braced.end;
-      continue;
-    }
-    if (char === ">") {
-      return index;
-    }
-    index += 1;
-  }
-  return -1;
-}
-function readQuotedValue(source, start, quote) {
-  let index = start + 1;
-  let value = "";
-  while (index < source.length) {
-    const char = source[index];
-    if (char === "\\" && index + 1 < source.length) {
-      value += source.slice(index, index + 2);
-      index += 2;
-      continue;
-    }
-    if (char === quote) {
-      return { value, end: index + 1 };
-    }
-    value += char;
-    index += 1;
-  }
-  return { value, end: source.length };
+var VOID_TAGS = /* @__PURE__ */ new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]);
+function normalizeNewlines(value) {
+  return value.replace(/\r\n?/g, "\n");
 }
-function readBraceValue(source, start) {
+function readBracedValue(source, start) {
   let index = start + 1;
   let depth = 1;
-  let value = "{";
   let quote = null;
+  let value = "{";
   while (index < source.length && depth > 0) {
     const char = source[index];
     const prev = source[index - 1];
@@ -273,158 +401,106 @@ function readBraceValue(source, start) {
   }
   return { value, end: index };
 }
-function parseAttributes2(source) {
-  const attrs = {};
+function protectOlovaAttrExpressions(html) {
+  const placeholders = /* @__PURE__ */ new Map();
+  let output = "";
   let index = 0;
-  while (index < source.length) {
-    while (index < source.length && isWhitespace2(source[index])) {
-      index += 1;
-    }
-    if (index >= source.length) {
-      break;
-    }
-    let nameEnd = index;
-    while (nameEnd < source.length && !isWhitespace2(source[nameEnd]) && source[nameEnd] !== "=") {
-      nameEnd += 1;
-    }
-    const name = source.slice(index, nameEnd).trim();
-    index = nameEnd;
-    if (!name) {
-      index += 1;
-      continue;
-    }
-    while (index < source.length && isWhitespace2(source[index])) {
+  let count = 0;
+  while (index < html.length) {
+    const char = html[index];
+    output += char;
+    if (char !== "=" || html[index + 1] !== "{") {
       index += 1;
-    }
-    if (source[index] !== "=") {
-      attrs[name] = true;
-      continue;
-    }
-    index += 1;
-    while (index < source.length && isWhitespace2(source[index])) {
-      index += 1;
-    }
-    if (index >= source.length) {
-      attrs[name] = true;
-      break;
-    }
-    const start = index;
-    const char = source[index];
-    if (char === '"' || char === "'") {
-      const quoted = readQuotedValue(source, index, char);
-      attrs[name] = quoted.value;
-      index = quoted.end;
-      continue;
-    }
-    if (char === "{") {
-      const braced = readBraceValue(source, index);
-      attrs[name] = braced.value;
-      index = braced.end;
       continue;
     }
-    while (index < source.length && !isWhitespace2(source[index])) {
-      index += 1;
+    const braced = readBracedValue(html, index + 1);
+    const key = `__OLOVA_ATTR_EXPR_${count++}__`;
+    placeholders.set(key, braced.value);
+    output += `"${key}"`;
+    index = braced.end;
+    continue;
+  }
+  return { html: output, placeholders };
+}
+function normalizeAttrs(attribs) {
+  const output = {};
+  for (const [name, value] of Object.entries(attribs)) {
+    output[name] = value === "" ? true : value;
+  }
+  return output;
+}
+function isSelfClosingElement(node) {
+  return VOID_TAGS.has(node.name.toLowerCase());
+}
+function toAstNode(node) {
+  if (node.type === "text") {
+    return {
+      type: "text",
+      content: normalizeNewlines(node.data)
+    };
+  }
+  if (node.type === "comment") {
+    return {
+      type: "comment",
+      content: normalizeNewlines(node.data)
+    };
+  }
+  if (node.type === "tag" || node.type === "script" || node.type === "style") {
+    const element = node;
+    return {
+      type: "element",
+      tag: element.name,
+      attrs: normalizeAttrs(element.attribs ?? {}),
+      children: toAstNodes(element.children ?? []),
+      isSelfClosing: isSelfClosingElement(element)
+    };
+  }
+  return null;
+}
+function toAstNodes(nodes) {
+  const output = [];
+  for (const node of nodes) {
+    const normalized = toAstNode(node);
+    if (normalized) {
+      output.push(normalized);
     }
-    attrs[name] = source.slice(start, index);
   }
-  return attrs;
+  return output;
 }
 function parseHTML(html) {
-  const root = [];
-  const stack = [
-    { node: null, children: root }
-  ];
-  let i = 0;
-  while (i < html.length) {
-    const textStart = i;
-    const tagStart = html.indexOf("<", i);
-    if (tagStart === -1) {
-      if (textStart < html.length) {
-        stack[stack.length - 1].children.push({
-          type: "text",
-          content: html.slice(textStart)
-        });
-      }
-      break;
-    }
-    if (tagStart > textStart) {
-      stack[stack.length - 1].children.push({
-        type: "text",
-        content: html.slice(textStart, tagStart)
-      });
-    }
-    i = tagStart;
-    if (html.startsWith("<!--", i)) {
-      const commentEnd = html.indexOf("-->", i + 4);
-      if (commentEnd === -1) {
-        stack[stack.length - 1].children.push({
-          type: "comment",
-          content: html.slice(i + 4)
-        });
-        break;
-      }
-      stack[stack.length - 1].children.push({
-        type: "comment",
-        content: html.slice(i + 4, commentEnd)
-      });
-      i = commentEnd + 3;
-      continue;
+  const protectedHtml = protectOlovaAttrExpressions(html);
+  const document = parseDocument(protectedHtml.html, {
+    decodeEntities: false,
+    recognizeSelfClosing: true,
+    lowerCaseAttributeNames: false,
+    lowerCaseTags: false
+  });
+  const rootNodes = document.children.filter((node) => {
+    if (node.type === "directive" || node.type === "cdata") {
+      return false;
     }
-    if (html.startsWith("</", i)) {
-      const tagEnd2 = html.indexOf(">", i + 2);
-      if (tagEnd2 === -1) {
-        i += 2;
+    return true;
+  });
+  const ast = toAstNodes(rootNodes);
+  const restorePlaceholders = (nodes) => {
+    for (const node of nodes) {
+      if (node.type !== "element") {
         continue;
       }
-      const tag2 = html.slice(i + 2, tagEnd2).trim().toLowerCase();
-      let closeIdx = stack.length - 1;
-      while (closeIdx > 0 && stack[closeIdx].node?.tag.toLowerCase() !== tag2) {
-        closeIdx--;
-      }
-      if (closeIdx > 0) {
-        stack.length = closeIdx;
+      for (const [name, value] of Object.entries(node.attrs)) {
+        if (typeof value !== "string") {
+          continue;
+        }
+        const restored = protectedHtml.placeholders.get(value);
+        if (restored) {
+          node.attrs[name] = restored;
+        }
       }
-      i = tagEnd2 + 1;
-      continue;
-    }
-    const tagEnd = findTagEnd2(html, i + 1);
-    if (tagEnd === -1) {
-      stack[stack.length - 1].children.push({ type: "text", content: "<" });
-      i++;
-      continue;
-    }
-    const rawTag = html.slice(i + 1, tagEnd).trim();
-    let tagNameEnd = 0;
-    while (tagNameEnd < rawTag.length && !isWhitespace2(rawTag[tagNameEnd]) && rawTag[tagNameEnd] !== "/") {
-      tagNameEnd += 1;
-    }
-    const tag = rawTag.slice(0, tagNameEnd);
-    if (!tag) {
-      stack[stack.length - 1].children.push({ type: "text", content: "<" });
-      i++;
-      continue;
-    }
-    const attrsStr = rawTag.slice(tagNameEnd).replace(/\/\s*$/, "").trim();
-    const selfClose = /\/\s*$/.test(rawTag);
-    const attrs = parseAttributes2(attrsStr);
-    const isNativeVoidTag = tag === tag.toLowerCase() && /^(area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)$/.test(
-      tag
-    );
-    const isSelfClosing = !!selfClose || isNativeVoidTag;
-    const element = {
-      type: "element",
-      tag,
-      attrs,
-      children: [],
-      isSelfClosing
-    };
-    stack[stack.length - 1].children.push(element);
-    if (!isSelfClosing) {
-      stack.push({ node: element, children: element.children });
+      restorePlaceholders(node.children);
     }
-    i = tagEnd + 1;
-  }
-  return root;
+  };
+  restorePlaceholders(ast);
+  return ast;
 }
 
 // compiler/dom-generator.ts
@@ -482,7 +558,7 @@ function processNode(node, parentVar, stateNames, transformExpr, counters, build
     const varName = `_el${buildCtx.localCount++}`;
     const useSvgNamespace = isSvgContext(tag, inSvg);
     buildCtx.statements.push(
-      useSvgNamespace ? `const ${varName} = document.createElementNS(${JSON.stringify(SVG_NAMESPACE)}, "${tag}");` : `const ${varName} = document.createElement("${tag}");`
+      useSvgNamespace ? `const ${varName} = document.createElementNS(${JSON.stringify(SVG_NAMESPACE)}, ${JSON.stringify(tag)});` : `const ${varName} = document.createElement(${JSON.stringify(tag)});`
     );
     for (const [attr, val] of Object.entries(node.attrs)) {
       if (attr.startsWith("data-o-on-")) {
@@ -496,10 +572,12 @@ function processNode(node, parentVar, stateNames, transformExpr, counters, build
         }
       } else {
         if (val === true) {
-          buildCtx.statements.push(`${varName}.setAttribute("${attr}", "");`);
+          buildCtx.statements.push(
+            `${varName}.setAttribute(${JSON.stringify(attr)}, "");`
+          );
         } else {
           buildCtx.statements.push(
-            `${varName}.setAttribute("${attr}", ${JSON.stringify(val)});`
+            `${varName}.setAttribute(${JSON.stringify(attr)}, ${JSON.stringify(val)});`
           );
         }
       }
@@ -545,12 +623,14 @@ function generateBuildFunction(html, stateNames, transformExpr, counters, compon
 }
 
 // compiler/compile.ts
-var generate = generatorModule.default ?? generatorModule;
+var generate2 = generatorModule.default ?? generatorModule;
 var traverse = traverseModule.default ?? traverseModule;
 var CORE_KNOWN_IMPORTS = /* @__PURE__ */ new Set([
   "Signal",
   "computed",
   "createApp",
+  "createErrorBoundary",
+  "dangerouslySetHtml",
   "defineComponent",
   "derived",
   "effect",
@@ -558,53 +638,20 @@ var CORE_KNOWN_IMPORTS = /* @__PURE__ */ new Set([
   "global",
   "hasContext",
   "mount",
+  "onCleanup",
+  "onMount",
+  "replaceComponent",
   "setContext",
-  "state"
+  "state",
+  "Suspense"
 ]);
 function escapeTemplate(source) {
   return source.replace(/\\/g, "\\\\").replace(/`/g, "\\`");
 }
-function indexToLocation(source, index) {
-  const safeIndex = Math.max(0, Math.min(index, source.length));
-  const lines = source.slice(0, safeIndex).split("\n");
-  return {
-    line: lines.length,
-    column: lines[lines.length - 1]?.length ?? 0,
-    index: safeIndex
-  };
-}
-function createCodeFrame(source, line, column, contextLines = 2) {
-  const lines = source.split("\n");
-  const start = Math.max(0, line - 1 - contextLines);
-  const end = Math.min(lines.length, line + contextLines);
-  return lines.slice(start, end).map((content, offset) => {
-    const lineNumber = start + offset + 1;
-    const prefix = `${String(lineNumber).padStart(4, " ")} | `;
-    if (lineNumber !== line) {
-      return `${prefix}${content}`;
-    }
-    return `${prefix}${content}
-     | ${" ".repeat(Math.max(column, 0))}^`;
-  }).join("\n");
-}
-function createCompileError(message, source, index) {
-  const loc = indexToLocation(source, index);
-  const error = new Error(message);
-  error.loc = { start: loc };
-  error.frame = createCodeFrame(source, loc.line, loc.column);
-  return error;
-}
-function normalizeCompileError(error, source, filename = "component.olova") {
-  const compileError = error instanceof Error ? error : new Error(String(error));
-  const start = compileError.loc?.start ?? compileError.loc;
-  const line = start?.line;
-  const column = start?.column;
-  const locationSuffix = line === void 0 || column === void 0 ? "" : ` (${filename}:${line}:${column + 1})`;
-  compileError.message = `[olova] ${compileError.message.replace(/^\[olova\]\s*/, "")}${locationSuffix}`;
-  if (line !== void 0 && column !== void 0 && !compileError.frame) {
-    compileError.frame = createCodeFrame(source, line, column);
+function emitDevWarnings(warnings) {
+  for (const warning of warnings) {
+    console.warn(warning);
   }
-  throw compileError;
 }
 function parseModule(code) {
   return parse(code, {
@@ -612,6 +659,17 @@ function parseModule(code) {
     plugins: ["typescript", "jsx"]
   });
 }
+function runCompilePhase(phase, fn) {
+  try {
+    return fn();
+  } catch (error) {
+    const compileError = error instanceof Error ? error : new Error(String(error));
+    if (!compileError.phase) {
+      compileError.phase = phase;
+    }
+    throw compileError;
+  }
+}
 function transpileTypeScript(code, filename = "component.ts") {
   const result = ts.transpileModule(code, {
     fileName: filename,
@@ -631,20 +689,22 @@ function transpileTypeScript(code, filename = "component.ts") {
   };
 }
 function compileModuleScript(script, filename = "module.olova.ts") {
-  const ast = parseModule(script || "");
-  return transpileTypeScript(
-    ast.program.body.map((node) => generate(node).code).join("\n"),
-    filename
-  );
+  return runCompilePhase("analyze-script", () => {
+    const scriptInfo = collectScriptInfo(script);
+    return runCompilePhase(
+      "transpile",
+      () => transpileTypeScript(
+        [scriptInfo.importsCode, scriptInfo.scriptBodyCode].filter(Boolean).join("\n"),
+        filename
+      )
+    );
+  });
 }
 function isModuleOnlyScript(script) {
   if (!script.trim()) {
     return false;
   }
-  const ast = parseModule(script);
-  return ast.program.body.every(
-    (node) => t.isImportDeclaration(node) || t.isExportNamedDeclaration(node) || t.isExportAllDeclaration(node) || t.isExportDefaultDeclaration(node)
-  );
+  return true;
 }
 function isStateInit(node) {
   return !!(node && t.isCallExpression(node) && (t.isIdentifier(node.callee) && node.callee.name === "state" || t.isMemberExpression(node.callee) && t.isIdentifier(node.callee.object) && node.callee.object.name === "__olovaGlobal" && t.isIdentifier(node.callee.property) && (node.callee.property.name === "state" || node.callee.property.name === "get")));
@@ -970,7 +1030,7 @@ function collectScriptInfo(script) {
       return false;
     }
     let found = false;
-    traverse(parseModule(`(${generate(node).code})`), {
+    traverse(parseModule(`(${generate2(node).code})`), {
       JSXElement() {
         found = true;
       },
@@ -995,7 +1055,7 @@ function collectScriptInfo(script) {
   traverse(ast, {
     JSXElement(path2) {
       const transformed = transformExpression(
-        generate(path2.node).code,
+        generate2(path2.node).code,
         stateNames,
         allSignalNames,
         jsxFunctionNames
@@ -1009,7 +1069,7 @@ function collectScriptInfo(script) {
     },
     JSXFragment(path2) {
       const transformed = transformExpression(
-        generate(path2.node).code,
+        generate2(path2.node).code,
         stateNames,
         allSignalNames,
         jsxFunctionNames
@@ -1041,8 +1101,8 @@ function collectScriptInfo(script) {
   const bodyNodes = ast.program.body.filter(
     (node) => !t.isImportDeclaration(node)
   );
-  const importsCode = importNodes.map((node) => generate(node).code).join("\n");
-  const scriptBodyCode = bodyNodes.map((node) => generate(node).code).join("\n");
+  const importsCode = importNodes.map((node) => generate2(node).code).join("\n");
+  const scriptBodyCode = bodyNodes.map((node) => generate2(node).code).join("\n");
   return {
     importsCode,
     scriptBodyCode,
@@ -1116,7 +1176,7 @@ function transformExpression(expr, stateNames, allSignalNames, jsxFunctionNames
   const escapeCall = (input) => t.callExpression(t.identifier("__olovaEscape"), [input]);
   const expressionContainsJsx = (input) => {
     let found = false;
-    traverse(parseModule(`(${generate(input).code})`), {
+    traverse(parseModule(`(${generate2(input).code})`), {
       JSXElement() {
         found = true;
       },
@@ -1134,7 +1194,7 @@ function transformExpression(expr, stateNames, allSignalNames, jsxFunctionNames
       return true;
     }
     let found = false;
-    traverse(parseModule(`(${generate(input).code})`), {
+    traverse(parseModule(`(${generate2(input).code})`), {
       CallExpression(path2) {
         if (t.isIdentifier(path2.node.callee) && jsxFunctionNames.has(path2.node.callee.name)) {
           found = true;
@@ -1189,7 +1249,7 @@ function transformExpression(expr, stateNames, allSignalNames, jsxFunctionNames
     return walkMember(name);
   };
   const transformEmbeddedJsxExpression = (input) => {
-    const wrapped = parseModule(`(${generate(input).code})`);
+    const wrapped = parseModule(`(${generate2(input).code})`);
     let containsNestedJsx = false;
     traverse(wrapped, {
       JSXElement(path2) {
@@ -1376,7 +1436,7 @@ function transformExpression(expr, stateNames, allSignalNames, jsxFunctionNames
     return { code: expr.trim(), containsJsx };
   }
   containsJsx = containsJsx || expressionProducesHtml(statement.expression);
-  return { code: generate(statement.expression).code, containsJsx };
+  return { code: generate2(statement.expression).code, containsJsx };
 }
 function jsxToTemplateHtml(node) {
   if (t.isJSXElement(node)) {
@@ -1385,15 +1445,15 @@ function jsxToTemplateHtml(node) {
     if (t.isJSXIdentifier(opening.name)) {
       tag = opening.name.name;
     } else if (t.isJSXMemberExpression(opening.name)) {
-      const walk = (n) => t.isJSXIdentifier(n) ? n.name : `${walk(n.object)}.${n.property.name}`;
-      tag = walk(opening.name);
+      const walk2 = (n) => t.isJSXIdentifier(n) ? n.name : `${walk2(n.object)}.${n.property.name}`;
+      tag = walk2(opening.name);
     } else if (t.isJSXNamespacedName(opening.name)) {
       tag = `${opening.name.namespace.name}:${opening.name.name.name}`;
     }
     let attrsStr = "";
     for (const attr of opening.attributes) {
       if (t.isJSXSpreadAttribute(attr)) {
-        attrsStr += ` {...${generate(attr.argument).code}}`;
+        attrsStr += ` {...${generate2(attr.argument).code}}`;
       } else {
         let attrName = "";
         if (t.isJSXIdentifier(attr.name)) attrName = attr.name.name;
@@ -1403,7 +1463,7 @@ function jsxToTemplateHtml(node) {
           attrsStr += ` ${attrName}="${attr.value.value}"`;
         else if (t.isJSXExpressionContainer(attr.value)) {
           if (!t.isJSXEmptyExpression(attr.value.expression)) {
-            attrsStr += ` ${attrName}={${generate(attr.value.expression).code}}`;
+            attrsStr += ` ${attrName}={${generate2(attr.value.expression).code}}`;
           }
         }
       }
@@ -1419,7 +1479,7 @@ function jsxToTemplateHtml(node) {
   }
   if (t.isJSXExpressionContainer(node)) {
     if (t.isJSXEmptyExpression(node.expression)) return "";
-    return `{${generate(node.expression).code}}`;
+    return `{${generate2(node.expression).code}}`;
   }
   if (t.isJSXFragment(node)) {
     return node.children.map(jsxToTemplateHtml).join("");
@@ -1429,56 +1489,78 @@ function jsxToTemplateHtml(node) {
 function replaceTemplateExpressions(input, replacer) {
   let output = "";
   let index = 0;
+  let inTag = false;
+  let tagQuote = null;
+  let tagBraceDepth = 0;
   while (index < input.length) {
-    const start = input.indexOf("{", index);
-    if (start < 0) {
-      output += input.slice(index);
-      break;
+    const char = input[index];
+    const prev = index > 0 ? input[index - 1] : "";
+    if (inTag) {
+      output += char;
+      if (tagQuote) {
+        if (char === tagQuote && prev !== "\\") {
+          tagQuote = null;
+        }
+        index += 1;
+        continue;
+      }
+      if (char === "'" || char === '"' || char === "`") {
+        tagQuote = char;
+      } else if (char === "{") {
+        tagBraceDepth += 1;
+      } else if (char === "}" && tagBraceDepth > 0) {
+        tagBraceDepth -= 1;
+      } else if (char === ">" && tagBraceDepth === 0) {
+        inTag = false;
+      }
+      index += 1;
+      continue;
     }
-    let prevIndex = start - 1;
-    while (prevIndex >= 0 && /\s/.test(input[prevIndex])) {
-      prevIndex -= 1;
+    if (char === "<") {
+      inTag = true;
+      output += char;
+      index += 1;
+      continue;
     }
-    if (prevIndex >= 0 && input[prevIndex] === "=") {
-      output += input.slice(index, start + 1);
-      index = start + 1;
+    if (char !== "{") {
+      output += char;
+      index += 1;
       continue;
     }
-    if (start > 0 && input[start - 1] === "$") {
-      output += input.slice(index, start + 1);
-      index = start + 1;
+    if (prev === "$") {
+      output += char;
+      index += 1;
       continue;
     }
-    output += input.slice(index, start);
     let depth = 1;
-    let cursor = start + 1;
+    let cursor = index + 1;
     let quote = null;
     while (cursor < input.length && depth > 0) {
-      const char = input[cursor];
-      const prev = input[cursor - 1];
+      const char2 = input[cursor];
+      const prev2 = input[cursor - 1];
       if (quote) {
-        if (char === quote && prev !== "\\") {
+        if (char2 === quote && prev2 !== "\\") {
           quote = null;
         }
         cursor += 1;
         continue;
       }
-      if (char === "'" || char === '"' || char === "`") {
-        quote = char;
+      if (char2 === "'" || char2 === '"' || char2 === "`") {
+        quote = char2;
         cursor += 1;
         continue;
       }
-      if (char === "{") {
+      if (char2 === "{") {
         depth += 1;
-      } else if (char === "}") {
+      } else if (char2 === "}") {
         depth -= 1;
       }
       cursor += 1;
     }
     if (depth !== 0) {
-      throw createCompileError("[olova] Unclosed template expression block.", input, start);
+      throw createCompileError("[olova] Unclosed template expression block.", input, index);
     }
-    const expression = input.slice(start + 1, cursor - 1);
+    const expression = input.slice(index + 1, cursor - 1);
     output += replacer(expression);
     index = cursor;
   }
@@ -1512,7 +1594,7 @@ function parsePropsFromAttrs(attrs, stateNames, allSignalNames, jsxFunctionNames
   }
   return props.length === 0 ? "{}" : `{ ${props.join(", ")} }`;
 }
-function transformTemplate(template, stateNames, allSignalNames, jsxFunctionNames, componentNames, counters, scopeId) {
+function transformTemplate(template, stateNames, allSignalNames, jsxFunctionNames, componentNames, counters, scopeId, devWarnings, filename = "component.olova") {
   let html = template;
   const textBindings = [];
   const htmlBindings = [];
@@ -1529,7 +1611,7 @@ function transformTemplate(template, stateNames, allSignalNames, jsxFunctionName
         const node = exprNode.expression;
         const containsJsxNode = (n) => {
           let found = false;
-          traverse(parseModule(`(${generate(n).code})`), {
+          traverse(parseModule(`(${generate2(n).code})`), {
             JSXElement() {
               found = true;
             },
@@ -1542,7 +1624,7 @@ function transformTemplate(template, stateNames, allSignalNames, jsxFunctionName
         if (t.isLogicalExpression(node) && node.operator === "&&") {
           if (containsJsxNode(node.right)) {
             const id = `i${counters.if++}`;
-            const condition = generate(node.left).code;
+            const condition = generate2(node.left).code;
             const trueBranchHtml = jsxToTemplateHtml(node.right);
             ifBindings.push({
               id,
@@ -1560,7 +1642,9 @@ function transformTemplate(template, stateNames, allSignalNames, jsxFunctionName
                 jsxFunctionNames,
                 componentNames,
                 counters,
-                scopeId
+                scopeId,
+                devWarnings,
+                filename
               )
             });
             return `__O_IF_${id}__`;
@@ -1568,9 +1652,9 @@ function transformTemplate(template, stateNames, allSignalNames, jsxFunctionName
         } else if (t.isConditionalExpression(node)) {
           if (containsJsxNode(node.consequent) || containsJsxNode(node.alternate)) {
             const id = `i${counters.if++}`;
-            const condition = generate(node.test).code;
-            const trueBranchHtml = containsJsxNode(node.consequent) ? jsxToTemplateHtml(node.consequent) : `{${generate(node.consequent).code}}`;
-            const falseBranchHtml = containsJsxNode(node.alternate) ? jsxToTemplateHtml(node.alternate) : `{${generate(node.alternate).code}}`;
+            const condition = generate2(node.test).code;
+            const trueBranchHtml = containsJsxNode(node.consequent) ? jsxToTemplateHtml(node.consequent) : `{${generate2(node.consequent).code}}`;
+            const falseBranchHtml = containsJsxNode(node.alternate) ? jsxToTemplateHtml(node.alternate) : `{${generate2(node.alternate).code}}`;
             ifBindings.push({
               id,
               expr: transformExpression(
@@ -1587,7 +1671,9 @@ function transformTemplate(template, stateNames, allSignalNames, jsxFunctionName
                 jsxFunctionNames,
                 componentNames,
                 counters,
-                scopeId
+                scopeId,
+                devWarnings,
+                filename
               ),
               falseBranch: transformTemplate(
                 falseBranchHtml,
@@ -1596,7 +1682,9 @@ function transformTemplate(template, stateNames, allSignalNames, jsxFunctionName
                 jsxFunctionNames,
                 componentNames,
                 counters,
-                scopeId
+                scopeId,
+                devWarnings,
+                filename
               )
             });
             return `__O_IF_${id}__`;
@@ -1651,6 +1739,7 @@ function transformTemplate(template, stateNames, allSignalNames, jsxFunctionName
         continue;
       }
       const normalizedAttrName = attrName === "className" ? "class" : attrName;
+      const lowerAttrName = normalizedAttrName.toLowerCase();
       if (rawValue === true) {
         output += ` ${normalizedAttrName}`;
         continue;
@@ -1683,6 +1772,16 @@ function transformTemplate(template, stateNames, allSignalNames, jsxFunctionName
         output += ` ${normalizedAttrName}="__O_ATTR_${id}__"`;
         continue;
       }
+      if (devWarnings && lowerAttrName.startsWith("on")) {
+        devWarnings.add(
+          `[olova] Avoid static inline event attributes like "${normalizedAttrName}" in templates (${filename}). Prefer ${normalizedAttrName}={handler}.`
+        );
+      }
+      if (devWarnings && (lowerAttrName === "href" || lowerAttrName === "src" || lowerAttrName === "xlink:href") && /^\s*javascript:/i.test(rawValue)) {
+        devWarnings.add(
+          `[olova] Suspicious javascript: URL found in static "${normalizedAttrName}" attribute (${filename}).`
+        );
+      }
       output += ` ${normalizedAttrName}="${rawValue.replace(/"/g, "&quot;")}"`;
     }
     return output;
@@ -1731,6 +1830,73 @@ function transformTemplate(template, stateNames, allSignalNames, jsxFunctionName
         defaultNodes.push(child);
       }
       const slotFactories = [];
+      if (node.tag === "Suspense" && typeof node.attrs.fallback === "string") {
+        const rawValue = node.attrs.fallback;
+        if (rawValue.startsWith("{") && rawValue.endsWith("}")) {
+          const fallbackExpression = rawValue.slice(1, -1).trim();
+          const fallbackAst = parseModule(`(${fallbackExpression})`);
+          const fallbackStatement = fallbackAst.program.body[0];
+          const fallbackNode = fallbackStatement && t.isExpressionStatement(fallbackStatement) ? fallbackStatement.expression : null;
+          if (fallbackNode && (t.isJSXElement(fallbackNode) || t.isJSXFragment(fallbackNode))) {
+            slotFactories.push({
+              varName: `__slot_${id}_fallback`,
+              name: "fallback",
+              descriptor: transformTemplate(
+                jsxToTemplateHtml(fallbackNode),
+                stateNames,
+                allSignalNames,
+                jsxFunctionNames,
+                componentNames,
+                counters,
+                scopeId,
+                devWarnings,
+                filename
+              )
+            });
+          } else {
+            const transformedFallback = transformExpression(
+              fallbackExpression,
+              stateNames,
+              allSignalNames,
+              jsxFunctionNames,
+              scopeId
+            );
+            const fallbackBindingId = `fallback_${id}`;
+            slotFactories.push({
+              varName: `__slot_${id}_fallback`,
+              name: "fallback",
+              descriptor: {
+                html: `__O_HTML_${fallbackBindingId}__`,
+                textBindings: [],
+                htmlBindings: [
+                  {
+                    id: fallbackBindingId,
+                    expr: transformedFallback.containsJsx ? `__olovaDangerouslySetHtml(${transformedFallback.code})` : transformedFallback.code
+                  }
+                ],
+                attrBindings: [],
+                eventBindings: [],
+                slotBindings: [],
+                componentBindings: [],
+                ifBindings: [],
+                buildFnStr: generateBuildFunction(
+                  `__O_HTML_${fallbackBindingId}__`,
+                  stateNames,
+                  (expr) => transformExpression(
+                    expr,
+                    stateNames,
+                    allSignalNames,
+                    jsxFunctionNames,
+                    scopeId
+                  ),
+                  counters,
+                  componentNames
+                )
+              }
+            });
+          }
+        }
+      }
       if (defaultNodes.length > 0) {
         slotFactories.push({
           varName: `__slot_${id}_default`,
@@ -1742,7 +1908,9 @@ function transformTemplate(template, stateNames, allSignalNames, jsxFunctionName
             jsxFunctionNames,
             componentNames,
             counters,
-            scopeId
+            scopeId,
+            devWarnings,
+            filename
           )
         });
       }
@@ -1765,7 +1933,9 @@ function transformTemplate(template, stateNames, allSignalNames, jsxFunctionName
         id,
         component: node.tag,
         propsExpr: parsePropsFromAttrs(
-          node.attrs,
+          node.tag === "Suspense" ? Object.fromEntries(
+            Object.entries(node.attrs).filter(([key]) => key !== "fallback")
+          ) : node.attrs,
           stateNames,
           allSignalNames,
           jsxFunctionNames
@@ -1790,7 +1960,7 @@ function transformTemplate(template, stateNames, allSignalNames, jsxFunctionName
     scopeId
   );
   const buildFnStr = generateBuildFunction(
-    escapeTemplate(html),
+    html,
     stateNames,
     resolveExpr,
     counters,
@@ -1873,14 +2043,20 @@ function buildComponentCode(parsed, options) {
     slot: 0,
     if: 0
   };
-  const transformed = transformTemplate(
-    parsed.template,
-    scriptInfo.stateNames,
-    scriptInfo.allSignalNames,
-    scriptInfo.jsxFunctionNames,
-    scriptInfo.componentNames,
-    counters,
-    options?.scopeId
+  const warnings = options?.dev ? /* @__PURE__ */ new Set() : void 0;
+  const transformed = runCompilePhase(
+    "transform-template",
+    () => transformTemplate(
+      parsed.template,
+      scriptInfo.stateNames,
+      scriptInfo.allSignalNames,
+      scriptInfo.jsxFunctionNames,
+      scriptInfo.componentNames,
+      counters,
+      options?.scopeId,
+      warnings,
+      options?.hmrId ?? "component.olova"
+    )
   );
   const exportHead = options?.exportName ? `export const ${options.exportName} = __defineComponent((__props, __slots) => {` : `const __olovaComponent = __defineComponent((__props, __slots) => {`;
   const exportTail = options?.exportName ? `}, ${JSON.stringify(options?.hmrId)});` : `}, ${JSON.stringify(options?.hmrId)});
@@ -1894,6 +2070,9 @@ if (import.meta.hot) {
   });
 }
 ` : "";
+  if (warnings) {
+    emitDevWarnings(warnings);
+  }
   const code = `
 ${exportHead}
   const props = __props;
@@ -2007,140 +2186,64 @@ ${hmrCode}
 `;
   return { importsCode: scriptInfo.importsCode, code };
 }
-function hashScopeSeed(input) {
-  let hash = 2166136261;
-  for (let index = 0; index < input.length; index += 1) {
-    hash ^= input.charCodeAt(index);
-    hash = Math.imul(hash, 16777619);
-  }
-  return Math.abs(hash >>> 0).toString(36);
-}
-function createScopeAttr(scopeId) {
-  return scopeId ? `data-o-scope-${scopeId}` : null;
-}
-function scopeSelectorList(selectorList, scopeAttr) {
-  const applyScopeToSegment = (segment) => {
-    const trimmed = segment.trim();
-    if (!trimmed) {
-      return trimmed;
-    }
-    if (trimmed.includes(scopeAttr)) {
-      return trimmed;
-    }
-    const globalPattern = /:global\(([^()]+)\)/g;
-    const localCandidate = trimmed.replace(globalPattern, "").trim();
-    const normalized = trimmed.replace(globalPattern, "$1");
-    if (!localCandidate) {
-      return normalized;
-    }
-    if (normalized === ":root") {
-      return `[${scopeAttr}]`;
-    }
-    const pseudoIndex = normalized.search(/(?<!:):(?!:)/);
-    if (pseudoIndex === -1) {
-      return `${normalized}[${scopeAttr}]`;
-    }
-    return `${normalized.slice(0, pseudoIndex)}[${scopeAttr}]${normalized.slice(pseudoIndex)}`;
-  };
-  return selectorList.split(",").map((selector) => selector.trim()).filter(Boolean).map((selector) => {
-    if (selector.startsWith("@") || selector.includes(scopeAttr)) {
-      return selector;
-    }
-    return selector.split(/(\s+|[>+~])/).map((part) => {
-      if (!part || /^(\s+|[>+~])$/.test(part)) {
-        return part;
-      }
-      return applyScopeToSegment(part);
-    }).join("");
-  }).join(", ");
-}
-function scopeCss(css, scopeAttr) {
-  let output = "";
-  let index = 0;
-  while (index < css.length) {
-    const open = css.indexOf("{", index);
-    if (open < 0) {
-      output += css.slice(index);
-      break;
-    }
-    const selector = css.slice(index, open).trim();
-    let depth = 1;
-    let cursor = open + 1;
-    while (cursor < css.length && depth > 0) {
-      if (css[cursor] === "{") {
-        depth += 1;
-      } else if (css[cursor] === "}") {
-        depth -= 1;
-      }
-      cursor += 1;
-    }
-    const body = css.slice(open + 1, cursor - 1);
-    if (/^@(?:media|supports|container|layer)\b/i.test(selector)) {
-      output += `${selector} {${scopeCss(body, scopeAttr)}}`;
-    } else if (/^@(?:keyframes|-webkit-keyframes)\b/i.test(selector)) {
-      output += `${selector} {${body}}`;
-    } else {
-      output += `${scopeSelectorList(selector, scopeAttr)} {${body}}`;
-    }
-    index = cursor;
-  }
-  return output;
-}
-function collectCss(blocks, scopeId) {
-  const scopeAttr = createScopeAttr(scopeId);
-  return blocks.map((block) => {
-    const content = block.content.trim();
-    if (!content) {
-      return "";
-    }
-    if (!("global" in block.attrs) && scopeAttr) {
-      return scopeCss(content, scopeAttr);
-    }
-    return content;
-  }).filter(Boolean).join("\n\n");
-}
 function compileOlovaScriptModule(source, options) {
   try {
-    const scriptInfo = collectScriptInfo(source);
-    return transpileTypeScript(
-      [scriptInfo.importsCode, scriptInfo.scriptBodyCode].filter(Boolean).join("\n"),
-      options?.filename ?? "module.ts"
-    );
+    return runCompilePhase("analyze-script", () => {
+      const scriptInfo = collectScriptInfo(source);
+      return runCompilePhase(
+        "transpile",
+        () => transpileTypeScript(
+          [scriptInfo.importsCode, scriptInfo.scriptBodyCode].filter(Boolean).join("\n"),
+          options?.filename ?? "module.ts"
+        )
+      );
+    });
   } catch (error) {
     return normalizeCompileError(error, source, options?.filename ?? "module.ts");
   }
 }
 function compileOlova(source, options) {
+  const filename = options?.filename ?? "component.olova";
   try {
-    const parsed = parseOlovaFile(source);
-    if (!parsed.template.trim() && isModuleOnlyScript(parsed.script)) {
-      return {
-        ...compileModuleScript(parsed.script, options?.filename ?? "module.olova.ts"),
-        css: collectCss(parsed.styles)
-      };
-    }
-    const scopeId = parsed.styles.some((style) => !("global" in style.attrs)) ? hashScopeSeed(`${options?.filename ?? "component.olova"}:${options?.exportName ?? "default"}`) : void 0;
-    const compiled = buildComponentCode(parsed, {
-      scopeId,
-      hmrId: options?.filename ?? "component.olova",
-      dev: options?.dev
-    });
-    const runtimeImport = options?.dev ? `import { defineComponent as __defineComponent, replaceComponent as __replaceComponent } from 'olova/runtime';` : `import { defineComponent as __defineComponent } from 'olova/runtime';`;
-    const result = transpileTypeScript(`
+    return runCompilePhase("parse-file", () => {
+      const parsed = parseOlovaFile(source);
+      if (!parsed.template.trim() && isModuleOnlyScript(parsed.script)) {
+        const moduleResult = compileModuleScript(parsed.script, `${filename}.ts`);
+        const css2 = runCompilePhase(
+          "generate-module",
+          () => collectCss(parsed.styles)
+        );
+        return {
+          ...moduleResult,
+          css: css2
+        };
+      }
+      const scopeId = parsed.styles.some((style) => !("global" in style.attrs)) ? hashScopeSeed(`${filename}:${options?.exportName ?? "default"}`) : void 0;
+      const compiled = runCompilePhase(
+        "generate-module",
+        () => buildComponentCode(parsed, {
+          scopeId,
+          hmrId: filename,
+          dev: options?.dev
+        })
+      );
+      const runtimeImport = options?.dev ? `import { defineComponent as __defineComponent, replaceComponent as __replaceComponent } from 'olova/runtime';` : `import { defineComponent as __defineComponent } from 'olova/runtime';`;
+      const result = runCompilePhase("transpile", () => transpileTypeScript(`
 ${runtimeImport}
 ${compiled.importsCode}
 ${compiled.code}
-`, options?.filename ?? "component.olova.ts");
-    return {
-      ...result,
-      css: collectCss(parsed.styles, scopeId)
-    };
+`, `${filename}.ts`));
+      const css = runCompilePhase(
+        "generate-module",
+        () => collectCss(parsed.styles, scopeId)
+      );
+      return {
+        ...result,
+        css
+      };
+    });
   } catch (error) {
-    return normalizeCompileError(
-      error,
-      source,
-      options?.filename ?? "component.olova"
-    );
+    return normalizeCompileError(error, source, filename);
   }
 }
 
@@ -2271,7 +2374,10 @@ function olovaPlugin() {
           map: result.map || null
         };
       } catch (err) {
-        this.error(err, err.loc?.start?.line);
+        if (typeof this?.error === "function") {
+          this.error(err, err.loc?.start?.line);
+        }
+        throw err;
       }
     },
     async handleHotUpdate(ctx) {
@@ -2289,8 +2395,12 @@ function olovaPlugin() {
           } else {
             cssCache.delete(filename);
           }
-          ctx.server.ws.send({ type: "full-reload", path: "*" });
-          return [];
+          const styleId2 = `${filename}.css${STYLE_QUERY}`;
+          const styleModule2 = ctx.server.moduleGraph.getModuleById(styleId2);
+          if (styleModule2) {
+            ctx.server.moduleGraph.invalidateModule(styleModule2);
+            return [styleModule2];
+          }
         }
       } catch {
       }