@sola-air-ui/compiler 1.0.7 → 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.7",
+  "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}=`;
@@ -697,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`;