@sola-air-ui/compiler 1.0.6 → 1.0.8

package/README.md

@@ -0,0 +1,57 @@
+# @sola-air-ui/compiler
+
+Compiler for [Sola AIR](https://sola-air.dev) single-file `.sola` components — transforms `<script>` + template + `<style>` into a dependency-free ES module (or IIFE) that mounts real DOM nodes with fine-grained reactivity. No virtual DOM, no diffing.
+
+## Install
+
+```bash
+npm install @sola-air-ui/compiler
+```
+
+## Programmatic use
+
+```js
+import { compile } from '@sola-air-ui/compiler';
+import { readFileSync } from 'node:fs';
+
+const source = readFileSync('App.sola', 'utf-8');
+const result = compile(source, {
+  target: 'esm',           // or 'iife'
+  exportName: 'App',       // used for iife builds
+  filename: 'App.sola',    // improves error messages
+});
+
+console.log(result.code); // compiled JS
+console.log(result.css);  // scoped CSS
+```
+
+## CLI
+
+```bash
+npx sola build App.sola
+```
+
+## What a `.sola` file looks like
+
+```html
+<script>
+  let count = $state(0);
+  let doubled = $derived(() => count() * 2);
+</script>
+
+<div>
+  <h1>Count: {count()}</h1>
+  <p>Doubled: {doubled()}</p>
+  <button onclick={() => count(count() + 1)}>+1</button>
+</div>
+
+<style>
+  h1 { color: #0ea5e9; font-weight: 800; }
+</style>
+```
+
+Most projects won't call this package directly — use `@sola-air-ui/vite-plugin-sola` for a normal Vite dev/build setup, or the `sola-air` meta-package to install everything at once.
+
+## License
+
+MIT — see the [repo root](https://github.com/rbm3267/sola-air) for the full license and [changelog](https://github.com/rbm3267/sola-air/blob/main/CHANGELOG.md).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sola-air-ui/compiler",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "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

@@ -125,7 +125,9 @@ function preprocessTemplate(template, dynAttrs) {
         } else if (template[i] === '"' || template[i] === "'") {
           // Quoted attribute value — scan for {expr} interpolations
           const quote = template[i++];
-          let inner = ''; let hasDyn = false;
+          const parts = [];
+          let currentText = '';
+          let hasDyn = false;
           while (i < template.length && template[i] !== quote) {
             if (template[i] === '{') {
               const closeIdx = matchBrace(template, i);
@@ -133,18 +135,35 @@ function preprocessTemplate(template, dynAttrs) {
                 const expr = template.slice(i + 1, closeIdx).trim();
                 if (!expr.startsWith('#') && !expr.startsWith('/') && !expr.startsWith(':')) {
                   hasDyn = true;
-                  inner += `\${${expr}}`; i = closeIdx + 1; continue;
+                  parts.push({ text: currentText });
+                  currentText = '';
+                  parts.push({ expr });
+                  i = closeIdx + 1; continue;
                 }
               }
             }
-            inner += template[i++];
+            currentText += template[i++];
           }
+          parts.push({ text: currentText });
           if (i < template.length) i++; // skip closing quote
           if (hasDyn) {
-            dynAttrs.push('`' + inner + '`');
+            // Build a string-concatenation expression instead of a runtime backtick
+            // template literal. Confirmed by driving a real browser against a live
+            // ServiceNow Service Portal instance: its widget-script delivery pipeline
+            // silently mangles `${expr}` interpolation inside a template literal down
+            // to bare, unevaluated expression text (e.g. `background: ${x}` becomes
+            // the literal string "background: x" — the function reference itself,
+            // never called). Every prior "the reactive binding doesn't do anything"
+            // report came from this exact code path. Concatenation is semantically
+            // identical and isn't affected by whatever that pipeline does to backticks.
+            const combined = parts
+              .filter((p) => p.expr !== undefined || p.text !== '')
+              .map((p) => (p.expr !== undefined ? `(${p.expr})` : JSON.stringify(p.text)))
+              .join(' + ');
+            dynAttrs.push(combined || `''`);
             result += `${attrName}="__soladyn_${dynAttrs.length - 1}__"`;
           } else {
-            result += `${attrName}="${inner}"`;
+            result += `${attrName}="${currentText}"`;
           }
         } else {
           result += `${attrName}=`;
@@ -172,6 +191,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 +268,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();
@@ -448,6 +471,20 @@ export function compile(source, options = {}) {
       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;
+    }
+
     // Nested custom component
     if (importedComponentSet.has(node.name)) {
       const cid = `comp${uid++}`;
@@ -458,10 +495,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}`);
       }
 
@@ -666,9 +716,9 @@ export function compile(source, options = {}) {
   output += `  // Reactive DOM graph\n`;
   output += domCode;
 
-  output += `\n  __flush_mounts();\n`;
+  output += `\n  __flush_mounts(__ctx);\n`;
   output += `\n  return () => {\n`;
-  output += `    __flush_destroys();\n`;
+  output += `    __flush_destroys(__ctx);\n`;
   output += `    popContext(__ctx);\n`;
   output += `    __target.innerHTML = '';\n`;
   output += `  };\n`;