@sola-air-ui/compiler 1.0.5 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sola-air-ui/compiler",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "Compiler for Sola single-file components (.sola) — transforms template + script + style to ES modules",
   "type": "module",
   "main": "./src/index.js",

package/src/index.js

@@ -172,6 +172,10 @@ function extractExpressions(text) {
       const inner = text.slice(i + 1, closeIdx).trim();
       if (inner.startsWith('#') || inner.startsWith('/') || inner.startsWith(':')) {
         result += text.slice(i, closeIdx + 1); i = closeIdx + 1;
+      } else if (inner.startsWith('@html')) {
+        const htmlExpr = inner.slice('@html'.length).trim();
+        result += `<sola-html expr="${htmlExpr.replace(/"/g, '&quot;')}"></sola-html>`;
+        i = closeIdx + 1;
       } else {
         result += `<sola-expr expr="${inner.replace(/"/g, '&quot;')}"></sola-expr>`;
         i = closeIdx + 1;
@@ -245,7 +249,7 @@ export function compile(source, options = {}) {
         templateNodes.pop();
       }
     }
-  }, { recognizeSelfClosing: true, lowerCaseTags: false });
+  }, { recognizeSelfClosing: true, lowerCaseTags: false, lowerCaseAttributeNames: false });
 
   parser.write(rawTemplate.trim() || '<div></div>');
   parser.end();
@@ -440,7 +444,25 @@ export function compile(source, options = {}) {
       const id = `e${uid++}`;
       domCode += `  const ${id} = document.createTextNode('');\n`;
       domCode += `  ${parentVar}.appendChild(${id});\n`;
-      domCode += `  createEffect(() => { ${id}.textContent = String(${expr} ?? ''); });\n`;
+      // Parenthesize expr before `?? ''`: JS forbids mixing ?? with || or && at the
+      // same level without explicit grouping (e.g. `col.label || col ?? ''` is a
+      // SyntaxError), and any {a || b}-style fallback expression — an extremely
+      // common pattern — would otherwise produce invalid generated code.
+      domCode += `  createEffect(() => { ${id}.textContent = String((${expr}) ?? ''); });\n`;
+      return;
+    }
+
+    // {@html expr} — renders expr as raw HTML via innerHTML, unlike {expr} which always
+    // goes through textContent. Wrapped in its own element so setting innerHTML can't
+    // clobber unrelated sibling nodes. Callers are responsible for trusting/sanitizing
+    // whatever markup they pass — same contract as innerHTML anywhere else.
+    if (node.name === 'sola-html') {
+      const expr = (node.attribs.expr || '').replace(/&quot;/g, '"');
+      const id = `h${uid++}`;
+      domCode += `  const ${id} = document.createElement('div');\n`;
+      domCode += `  ${id}.style.display = 'contents';\n`;
+      domCode += `  ${parentVar}.appendChild(${id});\n`;
+      domCode += `  createEffect(() => { ${id}.innerHTML = String((${expr}) ?? ''); });\n`;
       return;
     }
 
@@ -454,10 +476,23 @@ export function compile(source, options = {}) {
       // Dynamically-bound props (rows={items}) arrive here as __soladyn_N__ placeholders —
       // resolve them back to the real expression from dynAttrs and pass it as a raw
       // (unquoted) property so the child receives live data, not the placeholder text.
+      //
+      // `onXxx`-named props (e.g. onChange={handler}) are a special case: preprocessTemplate
+      // strips their {expr} down to raw identifier text before this code ever sees them
+      // (the same exception that makes real onclick/on:click DOM handlers work), so they
+      // never arrive as a __soladyn_N__ placeholder at all. Since preprocessTemplate can't
+      // yet tell a component apart from a native element, that exception can't distinguish
+      // "this is a DOM event on <button>" from "this is a callback prop on <Toggle>" — so
+      // treat any on-prefixed key here as a raw expression too, same as a real dynAttr.
       const propEntries = [];
       for (const [key, val] of Object.entries(node.attribs || {})) {
         const dynMatch = /^__soladyn_(\d+)__$/.exec(val);
-        const propValue = dynMatch ? `(${dynAttrs[parseInt(dynMatch[1], 10)]})` : JSON.stringify(val);
+        const isEventLikeProp = /^on:?[\w]+$/.test(key);
+        const propValue = dynMatch
+          ? `(${dynAttrs[parseInt(dynMatch[1], 10)]})`
+          : isEventLikeProp
+            ? `(${val})`
+            : JSON.stringify(val);
         propEntries.push(`${JSON.stringify(key)}: ${propValue}`);
       }