@sprlab/wccompiler 0.5.13 → 0.6.0

package/README.md

@@ -423,6 +423,37 @@ export default {
 
 All options are optional — defaults shown above.
 
+### Standalone Mode
+
+Controls whether the reactive runtime is inlined in each component or imported from a shared module.
+
+```js
+// wcc.config.js
+export default {
+  standalone: true  // inline runtime in every component (default: false)
+}
+```
+
+- `standalone: false` (default) — Components import the runtime from a shared `__wcc-signals.js` file. Smaller per-component size when using multiple components.
+- `standalone: true` — Each component includes the full reactive runtime inline. Zero external dependencies per component.
+
+#### Per-Component Override
+
+Override the global setting for individual components:
+
+```html
+<script>
+import { defineComponent, signal } from 'wcc'
+
+export default defineComponent({
+  tag: 'wcc-widget',
+  standalone: true,  // this component is self-contained regardless of global config
+})
+</script>
+```
+
+Component-level `standalone` always takes precedence over the global config. This lets you have a project with shared runtime but mark specific components as fully self-contained for distribution.
+
 ## Editor Support
 
 The **wcCompiler (.wcc) Language Support** extension is available on the VS Code Marketplace. It provides syntax highlighting, completions, and diagnostics for `.wcc` files.

package/bin/wcc.js

@@ -7,6 +7,9 @@ import { loadConfig } from '../lib/config.js';
 import { compile } from '../lib/compiler.js';
 import { startDevServer } from '../lib/dev-server.js';
 
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
 const command = process.argv[2];
 
 async function build(config, cwd) {
@@ -15,36 +18,44 @@ 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, __untrack };\n';
-  const signalsDest = join(outputDir, '__wcc-signals.js');
-  writeFileSync(signalsDest, signalsContent);
-
-  // Discover source files
   const files = discoverFiles(inputDir);
   let errors = 0;
+  let needsSharedRuntime = false;
 
   for (const file of files) {
     try {
-      // 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);
+
+      // Calculate runtimeImportPath (always calculate it — the compiler decides whether to use it)
+      const signalsDest = join(outputDir, '__wcc-signals.js');
       const runtimeRelPath = relative(outDir, signalsDest).replace(/\\/g, '/');
       const runtimeImportPath = runtimeRelPath.startsWith('.') ? runtimeRelPath : './' + runtimeRelPath;
 
-      const output = await compile(file, { runtimeImportPath });
+      const { code, usesSharedRuntime } = await compile(file, {
+        standalone: config.standalone,
+        runtimeImportPath,
+      });
+
+      if (usesSharedRuntime) needsSharedRuntime = true;
+
       if (!existsSync(outDir)) mkdirSync(outDir, { recursive: true });
-      writeFileSync(outPath, output);
+      writeFileSync(outPath, code);
     } catch (err) {
       console.error(`Error compiling ${file}: ${err.message}`);
       errors++;
     }
   }
 
+  // Generate shared runtime ONLY if needed
+  if (needsSharedRuntime) {
+    const { reactiveRuntime } = await import('../lib/reactive-runtime.js');
+    const signalsContent = reactiveRuntime.trim() + '\nexport { __signal, __computed, __effect, __batch, __untrack };\n';
+    const signalsDest = join(outputDir, '__wcc-signals.js');
+    writeFileSync(signalsDest, signalsContent);
+  }
+
   // Copy wcc-runtime.js to output directory
   const runtimeSrc = resolve(__dirname, '../lib/wcc-runtime.js');
   const runtimeDest = join(outputDir, 'wcc-runtime.js');
@@ -87,11 +98,30 @@ async function main() {
       if (filename.includes('.test.')) return;
       const filePath = resolve(inputDir, filename);
       try {
-        const output = await compile(filePath);
-        const outPath = resolve(outputDir, filename.replace(/\.ts$/, '.js').replace(/\.wcc$/, '.js'));
+        const relPath = filename;
+        const outPath = resolve(outputDir, relPath.replace(/\.ts$/, '.js').replace(/\.wcc$/, '.js'));
         const outDir = dirname(outPath);
+
+        // Calculate runtimeImportPath for this file
+        const signalsDest = join(outputDir, '__wcc-signals.js');
+        const runtimeRelPath = relative(outDir, signalsDest).replace(/\\/g, '/');
+        const runtimeImportPath = runtimeRelPath.startsWith('.') ? runtimeRelPath : './' + runtimeRelPath;
+
+        const { code, usesSharedRuntime } = await compile(filePath, {
+          standalone: config.standalone,
+          runtimeImportPath,
+        });
+
         if (!existsSync(outDir)) mkdirSync(outDir, { recursive: true });
-        writeFileSync(outPath, output);
+        writeFileSync(outPath, code);
+
+        // If this component uses shared runtime and the file doesn't exist yet, generate it
+        if (usesSharedRuntime && !existsSync(signalsDest)) {
+          const { reactiveRuntime } = await import('../lib/reactive-runtime.js');
+          const signalsContent = reactiveRuntime.trim() + '\nexport { __signal, __computed, __effect, __batch, __untrack };\n';
+          writeFileSync(signalsDest, signalsContent);
+        }
+
         console.log(`Compiled: ${filename}`);
       } catch (err) {
         console.error(`Error compiling ${filename}: ${err.message}`);

package/lib/compiler.js

@@ -355,9 +355,32 @@ async function compileSFC(filePath, config) {
   parseResult.childImports = childImports;
   parseResult.processedTemplate = rootEl.innerHTML;
 
-  // 20. Generate component
+  // 20. Resolve standalone and generate component
+  const standaloneResolved = resolveStandalone(descriptor.standalone, config?.standalone ?? false);
   const genOptions = { ...config, sourceFile: fileName };
-  return generateComponent(parseResult, genOptions);
+
+  if (standaloneResolved) {
+    // Force inline runtime — ignore any runtimeImportPath
+    genOptions.runtimeImportPath = undefined;
+  }
+  // If standaloneResolved is false, keep config.runtimeImportPath as-is (CLI provides it)
+
+  const code = generateComponent(parseResult, genOptions);
+  const usesSharedRuntime = !standaloneResolved && !!genOptions.runtimeImportPath;
+  return { code, usesSharedRuntime };
+}
+
+/**
+ * Resolve the final standalone value.
+ * Component-level has priority over global.
+ *
+ * @param {boolean | undefined} componentValue — standalone from defineComponent (true, false, or undefined)
+ * @param {boolean} globalValue — standalone from config (true or false)
+ * @returns {boolean}
+ */
+export function resolveStandalone(componentValue, globalValue) {
+  if (componentValue === true || componentValue === false) return componentValue;
+  return globalValue;
 }
 
 /**
@@ -365,8 +388,9 @@ async function compileSFC(filePath, config) {
  *
  * @param {string} filePath — Absolute or relative path to the .wcc file
  * @param {object} [config] — Optional config (reserved for future options)
- * @returns {Promise<string>} The generated JavaScript component code
+ * @returns {Promise<{code: string, usesSharedRuntime: boolean}>} The generated JavaScript component code and metadata
  */
 export async function compile(filePath, config) {
-  return compileSFC(filePath, config);
+  const result = await compileSFC(filePath, config);
+  return result;
 }

package/lib/config.js

@@ -7,6 +7,7 @@ import { pathToFileURL } from 'node:url';
  * @property {number} port — Dev server port (default: 4100)
  * @property {string} input — Source directory (default: 'src')
  * @property {string} output — Output directory (default: 'dist')
+ * @property {boolean} standalone — Inline runtime in each component (default: false)
  */
 
 /**
@@ -18,7 +19,7 @@ import { pathToFileURL } from 'node:url';
  * @returns {Promise<WccConfig>}
  */
 export async function loadConfig(projectRoot) {
-  const defaults = { port: 4100, input: 'src', output: 'dist' };
+  const defaults = { port: 4100, input: 'src', output: 'dist', standalone: false };
   const configPath = resolve(projectRoot, 'wcc.config.js');
 
   if (!existsSync(configPath)) return defaults;
@@ -26,7 +27,11 @@ export async function loadConfig(projectRoot) {
   const configUrl = pathToFileURL(configPath).href;
   // Add cache-busting query to avoid ESM module cache issues
   const mod = await import(`${configUrl}?t=${Date.now()}`);
-  const userConfig = mod.default || mod;
+  // Unwrap ESM module namespace: handle double-nesting from dynamic import
+  let userConfig = mod.default || mod;
+  if (userConfig.__esModule && userConfig.default) {
+    userConfig = userConfig.default;
+  }
 
   const config = { ...defaults, ...userConfig };
 
@@ -46,6 +51,11 @@ export async function loadConfig(projectRoot) {
     error.code = 'INVALID_CONFIG';
     throw error;
   }
+  if (typeof config.standalone !== 'boolean') {
+    const error = new Error(`Error en wcc.config.js: standalone debe ser un booleano`);
+    error.code = 'INVALID_CONFIG';
+    throw error;
+  }
 
   return config;
 }

package/lib/sfc-parser.js

@@ -15,6 +15,7 @@
  * @property {string} style    — Content of the <style> block ('' if absent)
  * @property {string} lang     — 'ts' | 'js'
  * @property {string} tag      — Tag name extracted from defineComponent({ tag })
+ * @property {boolean | undefined} standalone — Standalone option from defineComponent
  */
 
 // ── Helpers ─────────────────────────────────────────────────────────
@@ -129,6 +130,29 @@ function extractLang(attrs) {
 
 // ── Phase 2: Validation ─────────────────────────────────────────────
 
+/**
+ * Extract the `standalone` option from the body of defineComponent().
+ *
+ * @param {string} body — The inner content of defineComponent({ ... })
+ * @param {string} fileName
+ * @returns {boolean | undefined}
+ */
+function extractStandaloneOption(body, fileName) {
+  const standaloneMatch = body.match(/standalone\s*:\s*(true|false|[^\s,}]+)/);
+  if (!standaloneMatch) {
+    return undefined;
+  }
+
+  const value = standaloneMatch[1];
+  if (value === 'true') return true;
+  if (value === 'false') return false;
+
+  throw sfcError(
+    'INVALID_STANDALONE_OPTION',
+    `Error en '${fileName}': standalone debe ser true o false`
+  );
+}
+
 /**
  * Extract the tag name from a defineComponent({ tag: '...' }) call.
  *
@@ -169,7 +193,7 @@ function extractTagFromDefineComponent(script, fileName) {
     );
   }
 
-  return tagMatch[1];
+  return { tag: tagMatch[1], body };
 }
 
 /**
@@ -275,7 +299,10 @@ export function parseSFC(source, fileName = '<unknown>') {
   const lang = extractLang(scriptBlocks[0].attrs);
 
   // Validate defineComponent and extract tag
-  const tag = extractTagFromDefineComponent(scriptContent, fileName);
+  const { tag, body } = extractTagFromDefineComponent(scriptContent, fileName);
+
+  // Extract standalone option from defineComponent body
+  const standalone = extractStandaloneOption(body, fileName);
 
   return {
     script: scriptContent,
@@ -283,6 +310,7 @@ export function parseSFC(source, fileName = '<unknown>') {
     style: styleContent,
     lang,
     tag,
+    standalone,
   };
 }
 

package/lib/tree-walker.js

@@ -369,17 +369,19 @@ export function walkBranch(html, signalNames, computedNames, propNames) {
   const { document } = parseHTML(`<div id="__branchRoot">${html}</div>`);
   const branchRoot = document.getElementById('__branchRoot');
 
-  // Use walkTree on the branch root to discover bindings/events
-  const result = walkTree(branchRoot, signalNames, computedNames, propNames);
-
-  // Detect nested each directives within the branch template
+  // Process nested structural directives FIRST (before walkTree modifies the DOM).
+  // This is critical because walkTree clears textContent of elements with sole
+  // {{interpolation}} children, which would destroy content needed by
+  // processForBlocks/processIfChains when they clone nested elements for their
+  // own walkBranch calls.
   const forBlocks = processForBlocks(branchRoot, [], signalNames, computedNames, propNames);
-
-  // Detect nested if/else-if/else chains within the branch template
   const ifBlocks = processIfChains(branchRoot, [], signalNames, computedNames, propNames);
 
-  // Capture the processed HTML AFTER all processing (walkTree + processForBlocks + processIfChains)
-  // since processForBlocks/processIfChains modify the DOM by replacing elements with comment nodes
+  // Now run walkTree on the remaining DOM (nested directive elements have been
+  // replaced with comment nodes, so walkTree won't process their contents).
+  const result = walkTree(branchRoot, signalNames, computedNames, propNames);
+
+  // Capture the processed HTML AFTER all processing
   const processedHtml = branchRoot.innerHTML;
 
   // Strip the first path segment from all paths since at runtime

package/package.json

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