@sola-air-ui/compiler 1.0.2 → 1.0.4

package/package.json

@@ -1,31 +1,38 @@
-{
-  "name": "@sola-air-ui/compiler",
-  "version": "1.0.2",
-  "description": "Compiler for Sola single-file components (.sola) — transforms template + script + style to ES modules",
-  "type": "module",
-  "main": "./src/index.js",
-  "bin": {
-    "sola": "./src/cli.js"
-  },
-  "exports": {
-    ".": "./src/index.js"
-  },
-  "scripts": {
-    "test": "node test/compiler.test.js"
-  },
-  "keywords": ["sola", "compiler", "sfc", "single-file-component", "zero-vdom", "build-tool"],
-  "license": "MIT",
-  "homepage": "https://sola-air.dev",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/rbm3267/sola"
-  },
-  "dependencies": {
-    "acorn": "^8.10.0",
-    "htmlparser2": "^9.0.0"
-  },
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  }
-}
+{
+  "name": "@sola-air-ui/compiler",
+  "version": "1.0.4",
+  "description": "Compiler for Sola single-file components (.sola) — transforms template + script + style to ES modules",
+  "type": "module",
+  "main": "./src/index.js",
+  "bin": {
+    "sola": "./src/cli.js"
+  },
+  "exports": {
+    ".": "./src/index.js"
+  },
+  "scripts": {
+    "test": "node test/compiler.test.js"
+  },
+  "keywords": [
+    "sola",
+    "compiler",
+    "sfc",
+    "single-file-component",
+    "zero-vdom",
+    "build-tool"
+  ],
+  "license": "MIT",
+  "homepage": "https://sola-air.dev",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rbm3267/sola-air"
+  },
+  "dependencies": {
+    "acorn": "^8.10.0",
+    "htmlparser2": "^9.0.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/src/cli.js

@@ -12,30 +12,42 @@ if (args.length === 0 || args.includes('-h') || args.includes('--help')) {
     sola compile <file.sola> [options]
 
   Options:
-    -o, --out <file>    Write compiled output to a file (default: stdout)
-    -v, --version       Print compiler version
-    -h, --help          Show this help message
+    -o, --out <file>          Write compiled output to a file (default: stdout)
+    --target <esm|iife>       Output format (default: esm)
+                                esm  — ES module with import/export (default, for bundlers)
+                                iife — Self-contained IIFE for no-bundler environments
+                                       (ServiceNow Service Portal, plain <script> tags)
+    --export-name <Name>      Global name for IIFE target (default: SolaComponent)
+                              The compiled component mounts as window['Name'](el, props)
+    -v, --version             Print compiler version
+    -h, --help                Show this help message
 
   Examples:
     sola compile App.sola -o dist/App.js
-    sola compile Component.sola
+    sola compile Widget.sola --target iife --export-name MyWidget -o dist/my-widget.js
   `);
   process.exit(0);
 }
 
 if (args.includes('-v') || args.includes('--version')) {
-  console.log('Sola Compiler v1.0.0');
+  console.log('Sola Compiler v1.0.3');
   process.exit(0);
 }
 
 let inputFile = null;
 let outputFile = null;
+let target = 'esm';
+let exportName = 'SolaComponent';
 
 for (let i = 0; i < args.length; i++) {
   const arg = args[i];
   if (arg === 'compile') continue;
   if (arg === '-o' || arg === '--out') {
     outputFile = args[++i];
+  } else if (arg === '--target') {
+    target = args[++i];
+  } else if (arg === '--export-name') {
+    exportName = args[++i];
   } else if (!inputFile && !arg.startsWith('-')) {
     inputFile = arg;
   }
@@ -46,6 +58,11 @@ if (!inputFile) {
   process.exit(1);
 }
 
+if (target !== 'esm' && target !== 'iife') {
+  console.error(`Error: --target must be "esm" or "iife", got "${target}"`);
+  process.exit(1);
+}
+
 const inputPath = path.resolve(process.cwd(), inputFile);
 if (!fs.existsSync(inputPath)) {
   console.error(`Error: File not found: ${inputFile}`);
@@ -54,14 +71,14 @@ if (!fs.existsSync(inputPath)) {
 
 try {
   const source = fs.readFileSync(inputPath, 'utf8');
-  const result = compile(source, inputFile);
+  const result = compile(source, { filename: inputFile, target, exportName });
   const code = result.code || result;
 
   if (outputFile) {
     const outPath = path.resolve(process.cwd(), outputFile);
     fs.mkdirSync(path.dirname(outPath), { recursive: true });
     fs.writeFileSync(outPath, code, 'utf8');
-    console.log(`✓ Compiled ${inputFile} -> ${outputFile} (${code.length} bytes)`);
+    console.log(`✓ Compiled ${inputFile} -> ${outputFile} [${target}] (${code.length} bytes)`);
   } else {
     console.log(code);
   }

package/src/index.js

@@ -42,9 +42,11 @@ function extractScriptAndStyle(source) {
   let style = '';
   let template = source;
 
-  const scriptMatch = template.match(/<script(?:\s+lang=["'](?:ts|js)["'])?>([\s\S]*?)<\/script>/);
+  let isTypeScript = false;
+  const scriptMatch = template.match(/<script(?:\s+lang=["'](ts|js)["'])?>([\s\S]*?)<\/script>/);
   if (scriptMatch) {
-    script = scriptMatch[1];
+    isTypeScript = scriptMatch[1] === 'ts';
+    script = scriptMatch[2];
     template = template.replace(scriptMatch[0], '');
   }
 
@@ -54,7 +56,7 @@ function extractScriptAndStyle(source) {
     template = template.replace(styleMatch[0], '');
   }
 
-  return { script, style, template };
+  return { script, style, template, isTypeScript };
 }
 
 // Returns the index of the closing } that matches the { at openPos,
@@ -104,7 +106,7 @@ function preprocessTemplate(template, dynAttrs) {
           if (closeIdx !== -1) {
             const expr = template.slice(i + 1, closeIdx).trim();
             if (!expr.startsWith('#') && !expr.startsWith('/') && !expr.startsWith(':')) {
-              if (/^on:[\w]+$/.test(attrName) || /^bind:[\w]+$/.test(attrName)) {
+              if (/^on:?[\w]+$/.test(attrName) || /^bind:[\w]+$/.test(attrName)) {
                 result += `${attrName}="${expr}"`;
               } else {
                 dynAttrs.push(expr);
@@ -192,7 +194,8 @@ function stripTypeScript(code) {
 }
 
 export function compile(source, options = {}) {
-  const { script: scriptContent, style: styleContent, template: rawTemplateSource } = extractScriptAndStyle(source);
+  const target = options.target || 'esm'; // 'esm' | 'iife'
+  const { script: scriptContent, style: styleContent, template: rawTemplateSource, isTypeScript } = extractScriptAndStyle(source);
   const scopeHash = hashString(styleContent || rawTemplateSource);
   const hasStyles = styleContent.trim().length > 0;
   const scopedCss = hasStyles ? scopeStyles(styleContent, scopeHash) : '';
@@ -237,14 +240,18 @@ export function compile(source, options = {}) {
         templateNodes.pop();
       }
     }
-  }, { recognizeSelfClosing: true });
+  }, { recognizeSelfClosing: true, lowerCaseTags: false });
 
   parser.write(rawTemplate.trim() || '<div></div>');
   parser.end();
 
   // Parse JS AST with Acorn
-  // Strip TS first — AST positions and all slice() calls operate on the stripped source
-  const strippedScript = scriptContent.trim() ? stripTypeScript(scriptContent) : scriptContent;
+  // Strip TS first — AST positions and all slice() calls operate on the stripped source.
+  // Only run on <script lang="ts"> — the strip regex can't reliably distinguish a type
+  // annotation's `:` from a ternary's `: falsyBranch` or an object literal's `key: value`,
+  // so applying it to plain JS risks corrupting valid code. Scripts that don't opt into TS
+  // are left untouched.
+  const strippedScript = scriptContent.trim() && isTypeScript ? stripTypeScript(scriptContent) : scriptContent;
   let jsOutput = strippedScript;
   const stateVars = new Set();
   const exportedProps = [];
@@ -438,11 +445,34 @@ export function compile(source, options = {}) {
       domCode += `  const ${cid}_target = document.createElement('div');\n`;
       domCode += `  ${cid}_target.className = 'sola-component-root';\n`;
       domCode += `  ${parentVar}.appendChild(${cid}_target);\n`;
-      const propsObj = {};
+
+      // 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.
+      const propEntries = [];
       for (const [key, val] of Object.entries(node.attribs || {})) {
-        propsObj[key] = val;
+        const dynMatch = /^__soladyn_(\d+)__$/.exec(val);
+        const propValue = dynMatch ? `(${dynAttrs[parseInt(dynMatch[1], 10)]})` : JSON.stringify(val);
+        propEntries.push(`${JSON.stringify(key)}: ${propValue}`);
+      }
+
+      // Slot content: compile the tag's children into a function the child component can
+      // call to project them wherever it renders a <slot> in its own template.
+      if (node.children && node.children.length > 0) {
+        const slotVar = `${cid}_slot`;
+        domCode += `  const ${slotVar} = (__slot_target) => {\n`;
+        node.children.forEach(child => emitNode(child, '__slot_target'));
+        domCode += `  };\n`;
+        propEntries.push(`children: ${slotVar}`);
       }
-      domCode += `  ${node.name}(${cid}_target, ${JSON.stringify(propsObj)});\n`;
+
+      domCode += `  ${node.name}(${cid}_target, { ${propEntries.join(', ')} });\n`;
+      return;
+    }
+
+    // Slot placeholder: projects the children passed by a parent component, if any.
+    if (node.name === 'slot') {
+      domCode += `  if (typeof props.children === 'function') { props.children(${parentVar}); }\n`;
       return;
     }
 
@@ -585,16 +615,27 @@ export function compile(source, options = {}) {
   root.children.forEach(child => emitNode(child, '__target'));
 
   // Assemble final output module
+  const CORE_EXPORTS = 'createSignal, createDerived, createEffect, createIntent, createData, onMount, onDestroy, pushContext, popContext, __flush_mounts, __flush_destroys';
   let output = '';
-  output += `// Compiled by @sola-air-ui/compiler v1.0.2\n`;
-  output += `import { createSignal, createDerived, createEffect, createIntent, createData, onMount, onDestroy, pushContext, popContext, __flush_mounts, __flush_destroys } from '@sola-air-ui/core';\n`;
-
-  for (const imp of componentImports) {
-    output += `import ${imp.localName} from '${imp.path}';\n`;
+  output += `// Compiled by @sola-air-ui/compiler v1.0.3\n`;
+
+  if (target === 'iife') {
+    // ServiceNow / no-bundler mode: pull from window.SolaCore global
+    output += `(function() {\n`;
+    output += `const { ${CORE_EXPORTS} } = window.SolaCore;\n`;
+    for (const imp of componentImports) {
+      output += `// Note: sub-component ${imp.localName} must be pre-loaded before this script\n`;
+    }
+    output += `\n`;
+    output += `window['${options.exportName || 'SolaComponent'}'] = function mount(__target, props = {}) {\n`;
+  } else {
+    output += `import { ${CORE_EXPORTS} } from '@sola-air-ui/core';\n`;
+    for (const imp of componentImports) {
+      output += `import ${imp.localName} from '${imp.path}';\n`;
+    }
+    output += `\n`;
+    output += `export default function mount(__target, props = {}) {\n`;
   }
-
-  output += `\n`;
-  output += `export default function mount(__target, props = {}) {\n`;
   output += `  const __ctx = pushContext();\n\n`;
 
   if (hasStyles) {
@@ -618,12 +659,14 @@ export function compile(source, options = {}) {
 
   output += `\n  __flush_mounts();\n`;
   output += `\n  return () => {\n`;
-  output += `    // Cleanup\n`;
   output += `    __flush_destroys();\n`;
   output += `    popContext(__ctx);\n`;
   output += `    __target.innerHTML = '';\n`;
   output += `  };\n`;
-  output += `}\n`;
+  output += `};\n`;
+  if (target === 'iife') {
+    output += `})();\n`;
+  }
 
   return {
     code: output,