@sprlab/wccompiler 0.11.6 → 0.11.9

package/bin/wcc.js

@@ -36,6 +36,7 @@ async function build(config, cwd) {
       const { code, usesSharedRuntime } = await compile(file, {
         standalone: config.standalone,
         minify: config.minify,
+        comments: config.comments,
         runtimeImportPath,
       });
 
@@ -212,6 +213,7 @@ async function main() {
 
   // CLI flags override config
   if (process.argv.includes('--minify')) config.minify = true;
+  if (process.argv.includes('--comments')) config.comments = true;
 
   if (command === 'build') {
     const errors = await build(config, cwd);
@@ -241,6 +243,7 @@ async function main() {
         const { code, usesSharedRuntime } = await compile(filePath, {
           standalone: config.standalone,
           minify: config.minify,
+          comments: config.comments,
           runtimeImportPath,
         });
 

package/lib/codegen.js

@@ -13,7 +13,7 @@
  * No props, emits, slots, if, for, model, show, attr, refs, or lifecycle hooks.
  */
 
-import { reactiveRuntime } from './reactive-runtime.js';
+import { reactiveRuntime, buildInlineRuntime } from './reactive-runtime.js';
 import { scopeCSS } from './css-scoper.js';
 import { camelToKebab } from './parser-extractors.js';
 
@@ -893,6 +893,7 @@ export function generateComponent(parseResult, options = {}) {
   }
 
   const lines = [];
+  const comment = options.comments ? (text) => lines.push(`    // --- ${text} ---`) : () => {};
 
   // ── 0. Source comment ──
   if (options.sourceFile) {
@@ -900,16 +901,23 @@ export function generateComponent(parseResult, options = {}) {
   }
 
   // ── 1. Reactive runtime (shared import or inline) ──
+  if (options.comments) lines.push('// ── Runtime ──────────────────────────────────────────');
+  // Determine which runtime functions this component needs
+  const needsEffect = effects.length > 0 || bindings.length > 0 || showBindings.length > 0 || modelBindings.length > 0 || modelPropBindings.length > 0 || attrBindings.length > 0 || ifBlocks.length > 0 || forBlocks.length > 0 || watchers.length > 0 || childComponents.length > 0 || slots.some(s => s.slotProps.length > 0);
+  const needsComputed = computeds.length > 0;
+  const needsUntrack = watchers.length > 0;
+
   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 || modelPropBindings.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');
-    if (watchers.length > 0) usedRuntime.add('__untrack');
+    if (needsComputed) usedRuntime.add('__computed');
+    if (needsEffect) usedRuntime.add('__effect');
+    if (needsUntrack) usedRuntime.add('__untrack');
     const imports = [...usedRuntime].join(', ');
     lines.push(`import { ${imports} } from '${options.runtimeImportPath}';`);
   } else {
-    lines.push(reactiveRuntime.trim());
+    // Standalone: inline only the runtime functions this component needs
+    lines.push(buildInlineRuntime({ needsComputed, needsEffect, needsBatch: false, needsUntrack }).trim());
   }
   lines.push('');
 
@@ -923,6 +931,7 @@ export function generateComponent(parseResult, options = {}) {
 
   // ── 2. CSS injection (scoped, deduplicated via id guard) ──
   if (style) {
+    if (options.comments) lines.push('// ── Styles ───────────────────────────────────────────');
     const scoped = scopeCSS(style, tagName);
     const cssId = `__css_${className}`;
     lines.push(`if (!document.getElementById('${cssId}')) {`);
@@ -935,11 +944,13 @@ export function generateComponent(parseResult, options = {}) {
   }
 
   // ── 3. Template element ──
+  if (options.comments) lines.push('// ── Template ─────────────────────────────────────────');
   lines.push(`const __t_${className} = document.createElement('template');`);
   lines.push(`__t_${className}.innerHTML = \`${processedTemplate || ''}\`;`);
   lines.push('');
 
   // ── 4. HTMLElement class ──
+  if (options.comments) lines.push('// ── Component ────────────────────────────────────────');
   lines.push(`class ${className} extends HTMLElement {`);
 
   // Static observedAttributes (if props or model props exist)
@@ -998,6 +1009,7 @@ export function generateComponent(parseResult, options = {}) {
 
   // Signal initialization
   for (const s of signals) {
+    if (s === signals[0]) comment('Signals');
     lines.push(`    this._${s.name} = __signal(${s.value});`);
   }
 
@@ -1013,6 +1025,7 @@ export function generateComponent(parseResult, options = {}) {
 
   // Computed initialization
   for (const c of computeds) {
+    if (c === computeds[0]) comment('Computed');
     const body = transformExpr(c.body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames, modelVarMap);
     lines.push(`    this._c_${c.name} = __computed(() => ${body});`);
   }
@@ -1260,6 +1273,7 @@ export function generateComponent(parseResult, options = {}) {
   lines.push('');
 
   // Binding effects — one __effect per binding
+  if (bindings.length > 0) comment('Text bindings');
   for (const b of bindings) {
     if (b.type === 'prop') {
       lines.push('    this.__disposers.push(__effect(() => {');
@@ -1409,12 +1423,14 @@ export function generateComponent(parseResult, options = {}) {
   }
 
   // Event listeners (with AbortController signal for cleanup)
+  if (events.length > 0) comment('Event listeners');
   for (const e of events) {
     const handlerExpr = generateEventHandler(e.handler, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, modelVarMap);
     lines.push(`    this.${e.varName}.addEventListener('${e.event}', ${handlerExpr}, { signal: this.__ac.signal });`);
   }
 
   // Show effects — one __effect per ShowBinding
+  if (showBindings.length > 0) comment('Show directives');
   for (const sb of showBindings) {
     const expr = transformExpr(sb.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames, modelVarMap);
     lines.push('    this.__disposers.push(__effect(() => {');
@@ -1423,6 +1439,7 @@ export function generateComponent(parseResult, options = {}) {
   }
 
   // Model effects — signal → DOM (one __effect per ModelBinding)
+  if (modelBindings.length > 0) comment('Model bindings (signal → DOM)');
   for (const mb of modelBindings) {
     if (mb.prop === 'checked' && mb.radioValue !== null) {
       // Radio: compare signal value to radioValue
@@ -1849,6 +1866,8 @@ export function generateComponent(parseResult, options = {}) {
   }
 
   // User methods (prefixed with _)
+  if (methods.length > 0 && options.comments) lines.push('');
+  if (methods.length > 0 && options.comments) lines.push('  // --- Methods ---');
   for (const m of methods) {
     const body = transformMethodBody(m.body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, refVarNames, constantNames, modelVarMap);
     lines.push(`  _${m.name}(${m.params}) {`);

package/lib/config.js

@@ -19,7 +19,7 @@ import { pathToFileURL } from 'node:url';
  * @returns {Promise<WccConfig>}
  */
 export async function loadConfig(projectRoot) {
-  const defaults = { port: 4100, input: 'src', output: 'dist', standalone: false, minify: false };
+  const defaults = { port: 4100, input: 'src', output: 'dist', standalone: false, minify: false, comments: false };
   const configPath = resolve(projectRoot, 'wcc.config.js');
 
   if (!existsSync(configPath)) return defaults;
@@ -61,6 +61,11 @@ export async function loadConfig(projectRoot) {
     error.code = 'INVALID_CONFIG';
     throw error;
   }
+  if (typeof config.comments !== 'boolean') {
+    const error = new Error(`Error en wcc.config.js: comments debe ser un booleano`);
+    error.code = 'INVALID_CONFIG';
+    throw error;
+  }
 
   return config;
 }

package/lib/reactive-runtime.js

@@ -8,16 +8,21 @@
  * - __computed(fn): cached derived value that auto-invalidates
  * - __effect(fn): runs fn immediately and re-runs when dependencies change
  * - __batch(fn): batch multiple signal writes, flush effects once at the end
+ * - __untrack(fn): run fn without tracking dependencies
  *
  * Dependency tracking uses a global stack (__currentEffect).
  * Batching uses a depth counter — nested batches are supported.
  */
-/** @type {string} */
-export const reactiveRuntime = `
+
+/** Shared globals (always included) */
+const runtimeGlobals = `
 let __currentEffect = null;
 let __batchDepth = 0;
 const __pendingEffects = new Set();
+`;
 
+/** __signal — always included */
+const runtimeSignal = `
 function __signal(initial) {
   let _value = initial;
   const _subs = new Set();
@@ -37,7 +42,10 @@ function __signal(initial) {
     }
   };
 }
+`;
 
+/** __computed — only if component uses computed() */
+const runtimeComputed = `
 function __computed(fn) {
   let _cached, _dirty = true;
   const _subs = new Set();
@@ -61,7 +69,10 @@ function __computed(fn) {
     return _cached;
   };
 }
+`;
 
+/** __effect — only if component uses effects/bindings/show/model/attr/if/for/watchers/slots */
+const runtimeEffect = `
 function __effect(fn) {
   let _cleanup = null;
   let _active = true;
@@ -81,7 +92,10 @@ function __effect(fn) {
   run();
   return () => { _active = false; if (typeof _cleanup === 'function') _cleanup(); };
 }
+`;
 
+/** __batch — only if component uses batch() */
+const runtimeBatch = `
 function __batch(fn) {
   __batchDepth++;
   try {
@@ -95,7 +109,10 @@ function __batch(fn) {
     }
   }
 }
+`;
 
+/** __untrack — only if component uses watchers */
+const runtimeUntrack = `
 function __untrack(fn) {
   const prev = __currentEffect;
   __currentEffect = null;
@@ -103,3 +120,24 @@ function __untrack(fn) {
   finally { __currentEffect = prev; }
 }
 `;
+
+/**
+ * Full runtime (for backward compatibility and shared mode export).
+ * @type {string}
+ */
+export const reactiveRuntime = runtimeGlobals + runtimeSignal + runtimeComputed + runtimeEffect + runtimeBatch + runtimeUntrack;
+
+/**
+ * Build a tree-shaken inline runtime containing only the functions this component needs.
+ *
+ * @param {{ needsComputed: boolean, needsEffect: boolean, needsBatch: boolean, needsUntrack: boolean }} usage
+ * @returns {string}
+ */
+export function buildInlineRuntime(usage) {
+  let code = runtimeGlobals + runtimeSignal;
+  if (usage.needsComputed) code += runtimeComputed;
+  if (usage.needsEffect) code += runtimeEffect;
+  if (usage.needsBatch) code += runtimeBatch;
+  if (usage.needsUntrack) code += runtimeUntrack;
+  return code;
+}

package/lib/tree-walker.js

@@ -159,7 +159,7 @@ export function walkTree(rootEl, signalNames, computedNames, propNames = new Set
         if (attr.name.startsWith('@')) {
           const eventName = attr.name.slice(1);
           const handlerName = attr.value.replace(/[^a-zA-Z0-9_]/g, '_').slice(0, 20);
-          const varName = `__evt_${eventName.replace(/-/g, '_')}_${handlerName}`;
+          const varName = `__evt_${eventName.replace(/-/g, '_')}_${handlerName}_${eventIdx}`;
           eventIdx++;
           events.push({
             varName,
@@ -298,7 +298,7 @@ export function walkTree(rootEl, signalNames, computedNames, propNames = new Set
       if (soleMatch && parent.childNodes.length === 1) {
         const name = baseName(soleMatch[1]);
         const safeName = name.replace(/[^a-zA-Z0-9_]/g, '_').slice(0, 30);
-        const varName = `__text_${safeName}`;
+        const varName = `__text_${safeName}_${bindIdx}`;
         bindIdx++;
         bindings.push({
           varName,

package/package.json

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