@sprlab/wccompiler 0.4.3 → 0.5.1

package/bin/wcc.js

@@ -15,16 +15,28 @@ async function build(config, cwd) {
 
   if (!existsSync(outputDir)) mkdirSync(outputDir, { recursive: true });
 
+  // Generate shared reactive runtime
+  const __filename = fileURLToPath(import.meta.url);
+  const __dirname = dirname(__filename);
+  const { reactiveRuntime } = await import('../lib/reactive-runtime.js');
+  const signalsContent = reactiveRuntime.trim().replace(/^/gm, '') + '\nexport { __signal, __computed, __effect, __batch };\n';
+  const signalsDest = join(outputDir, '__wcc-signals.js');
+  writeFileSync(signalsDest, signalsContent);
+
   // Discover source files
   const files = discoverFiles(inputDir);
   let errors = 0;
 
   for (const file of files) {
     try {
-      const output = await compile(file);
+      // Calculate relative path from component output to __wcc-signals.js
       const relPath = relative(inputDir, file);
       const outPath = resolve(outputDir, relPath.replace(/\.wcc$/, '.js'));
       const outDir = dirname(outPath);
+      const runtimeRelPath = relative(outDir, signalsDest).replace(/\\/g, '/');
+      const runtimeImportPath = runtimeRelPath.startsWith('.') ? runtimeRelPath : './' + runtimeRelPath;
+
+      const output = await compile(file, { runtimeImportPath });
       if (!existsSync(outDir)) mkdirSync(outDir, { recursive: true });
       writeFileSync(outPath, output);
     } catch (err) {
@@ -34,8 +46,6 @@ async function build(config, cwd) {
   }
 
   // Copy wcc-runtime.js to output directory
-  const __filename = fileURLToPath(import.meta.url);
-  const __dirname = dirname(__filename);
   const runtimeSrc = resolve(__dirname, '../lib/wcc-runtime.js');
   const runtimeDest = join(outputDir, 'wcc-runtime.js');
   copyFileSync(runtimeSrc, runtimeDest);

package/lib/codegen.js

@@ -485,9 +485,10 @@ function generateItemSetup(lines, forBlock, itemVar, indexVar, propNames, signal
  * Generate a fully self-contained JS component from a ParseResult.
  *
  * @param {ParseResult} parseResult — Complete IR with bindings/events
+ * @param {{ runtimeImportPath?: string }} [options] — Optional generation options
  * @returns {string} JavaScript source code
  */
-export function generateComponent(parseResult) {
+export function generateComponent(parseResult, options = {}) {
   const {
     tagName,
     className,
@@ -529,8 +530,24 @@ export function generateComponent(parseResult) {
 
   const lines = [];
 
-  // ── 1. Inline reactive runtime ──
-  lines.push(reactiveRuntime.trim());
+  // ── 0. Source comment ──
+  if (options.sourceFile) {
+    lines.push(`// Generated from: ${options.sourceFile} (wcCompiler)`);
+  }
+
+  // ── 1. Reactive runtime (shared import or inline) ──
+  if (options.runtimeImportPath) {
+    // Tree-shake: only import what this component actually uses
+    const usedRuntime = new Set(['__signal']); // always need __signal
+    if (computeds.length > 0) usedRuntime.add('__computed');
+    if (effects.length > 0 || bindings.length > 0 || showBindings.length > 0 || modelBindings.length > 0 || attrBindings.length > 0 || ifBlocks.length > 0 || forBlocks.length > 0 || watchers.length > 0 || childComponents.length > 0 || slots.some(s => s.slotProps.length > 0)) usedRuntime.add('__effect');
+    // __batch is available but only needed if user code calls it explicitly — always include for safety
+    usedRuntime.add('__batch');
+    const imports = [...usedRuntime].join(', ');
+    lines.push(`import { ${imports} } from '${options.runtimeImportPath}';`);
+  } else {
+    lines.push(reactiveRuntime.trim());
+  }
   lines.push('');
 
   // ── 1b. Child component imports ──
@@ -541,12 +558,16 @@ export function generateComponent(parseResult) {
     lines.push('');
   }
 
-  // ── 2. CSS injection (scoped CSS into document.head, always) ──
+  // ── 2. CSS injection (scoped, deduplicated via id guard) ──
   if (style) {
     const scoped = scopeCSS(style, tagName);
-    lines.push(`const __css_${className} = document.createElement('style');`);
-    lines.push(`__css_${className}.textContent = \`${scoped}\`;`);
-    lines.push(`document.head.appendChild(__css_${className});`);
+    const cssId = `__css_${className}`;
+    lines.push(`if (!document.getElementById('${cssId}')) {`);
+    lines.push(`  const ${cssId} = document.createElement('style');`);
+    lines.push(`  ${cssId}.id = '${cssId}';`);
+    lines.push(`  ${cssId}.textContent = \`${scoped}\`;`);
+    lines.push(`  document.head.appendChild(${cssId});`);
+    lines.push('}');
     lines.push('');
   }
 
@@ -719,8 +740,12 @@ export function generateComponent(parseResult) {
   lines.push('  }');
   lines.push('');
 
-  // connectedCallback
+  // connectedCallback (idempotent — safe for re-mount)
   lines.push('  connectedCallback() {');
+  lines.push('    if (this.__connected) return;');
+  lines.push('    this.__connected = true;');
+  lines.push('    this.__ac = new AbortController();');
+  lines.push('');
 
   // Binding effects — one __effect per binding
   for (const b of bindings) {
@@ -841,10 +866,10 @@ export function generateComponent(parseResult) {
     }
   }
 
-  // Event listeners
+  // Event listeners (with AbortController signal for cleanup)
   for (const e of events) {
     const handlerExpr = generateEventHandler(e.handler, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames);
-    lines.push(`    this.${e.varName}.addEventListener('${e.event}', ${handlerExpr});`);
+    lines.push(`    this.${e.varName}.addEventListener('${e.event}', ${handlerExpr}, { signal: this.__ac.signal });`);
   }
 
   // Show effects — one __effect per ShowBinding
@@ -875,17 +900,17 @@ export function generateComponent(parseResult) {
     }
   }
 
-  // Model event listeners — DOM → signal (one addEventListener per ModelBinding)
+  // Model event listeners — DOM → signal (with AbortController signal)
   for (const mb of modelBindings) {
     if (mb.prop === 'checked' && mb.radioValue === null) {
       // Checkbox: read e.target.checked
-      lines.push(`    this.${mb.varName}.addEventListener('${mb.event}', (e) => { this._${mb.signal}(e.target.checked); });`);
+      lines.push(`    this.${mb.varName}.addEventListener('${mb.event}', (e) => { this._${mb.signal}(e.target.checked); }, { signal: this.__ac.signal });`);
     } else if (mb.coerce) {
       // Number input: wrap in Number()
-      lines.push(`    this.${mb.varName}.addEventListener('${mb.event}', (e) => { this._${mb.signal}(Number(e.target.value)); });`);
+      lines.push(`    this.${mb.varName}.addEventListener('${mb.event}', (e) => { this._${mb.signal}(Number(e.target.value)); }, { signal: this.__ac.signal });`);
     } else {
       // All others: read e.target.value
-      lines.push(`    this.${mb.varName}.addEventListener('${mb.event}', (e) => { this._${mb.signal}(e.target.value); });`);
+      lines.push(`    this.${mb.varName}.addEventListener('${mb.event}', (e) => { this._${mb.signal}(e.target.value); }, { signal: this.__ac.signal });`);
     }
   }
 
@@ -1073,9 +1098,11 @@ export function generateComponent(parseResult) {
   lines.push('  }');
   lines.push('');
 
-  // disconnectedCallback (only when destroy hooks exist)
+  // disconnectedCallback (cleanup: abort listeners + user hooks)
+  lines.push('  disconnectedCallback() {');
+  lines.push('    this.__connected = false;');
+  lines.push('    this.__ac.abort();');
   if (onDestroyHooks.length > 0) {
-    lines.push('  disconnectedCallback() {');
     for (const hook of onDestroyHooks) {
       const body = transformMethodBody(hook.body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, refVarNames, constantNames);
       if (hook.async) {
@@ -1092,9 +1119,9 @@ export function generateComponent(parseResult) {
         }
       }
     }
-    lines.push('  }');
-    lines.push('');
   }
+  lines.push('  }');
+  lines.push('');
 
   // attributeChangedCallback (if props exist)
   if (propDefs.length > 0) {

package/lib/compiler.js

@@ -323,7 +323,8 @@ async function compileSFC(filePath, config) {
   parseResult.processedTemplate = rootEl.innerHTML;
 
   // 20. Generate component
-  return generateComponent(parseResult);
+  const genOptions = { ...config, sourceFile: fileName };
+  return generateComponent(parseResult, genOptions);
 }
 
 /**

package/lib/reactive-runtime.js

@@ -16,7 +16,7 @@
 export const reactiveRuntime = `
 let __currentEffect = null;
 let __batchDepth = 0;
-const __pendingEffects = [];
+const __pendingEffects = new Set();
 
 function __signal(initial) {
   let _value = initial;
@@ -30,9 +30,7 @@ function __signal(initial) {
     _value = args[0];
     if (old !== _value) {
       if (__batchDepth > 0) {
-        for (const fn of _subs) {
-          if (!__pendingEffects.includes(fn)) __pendingEffects.push(fn);
-        }
+        for (const fn of _subs) __pendingEffects.add(fn);
       } else {
         for (const fn of [..._subs]) fn();
       }
@@ -46,9 +44,7 @@ function __computed(fn) {
   const recompute = () => {
     _dirty = true;
     if (__batchDepth > 0) {
-      for (const fn of _subs) {
-        if (!__pendingEffects.includes(fn)) __pendingEffects.push(fn);
-      }
+      for (const fn of _subs) __pendingEffects.add(fn);
     } else {
       for (const fn of [..._subs]) fn();
     }
@@ -85,7 +81,8 @@ function __batch(fn) {
   } finally {
     __batchDepth--;
     if (__batchDepth === 0) {
-      const pending = __pendingEffects.splice(0);
+      const pending = [...__pendingEffects];
+      __pendingEffects.clear();
       for (const f of pending) f();
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sprlab/wccompiler",
-  "version": "0.4.3",
+  "version": "0.5.1",
   "description": "Zero-runtime compiler that transforms .wcc single-file components into native web components with signals-based reactivity",
   "type": "module",
   "bin": {