@sprlab/wccompiler 0.3.0 → 0.4.1

package/lib/compiler.js

@@ -1,107 +1,241 @@
 /**
  * Compiler — orchestrates the full compilation pipeline for wcCompiler v2.
  *
- * Pipeline: parse → jsdom template → tree-walk → codegen
+ * Pipeline: parse SFC → jsdom template → tree-walk → codegen
  *
- * Takes a .ts/.js source file path and produces a self-contained
- * JavaScript web component string.
+ * Takes a .wcc file path and produces a self-contained JavaScript web component string.
  */
 
 import { JSDOM } from 'jsdom';
-import { readFileSync, readdirSync, existsSync } from 'node:fs';
-import { resolve, relative, dirname, extname } from 'node:path';
-import { parse } from './parser.js';
+import { readFileSync, existsSync } from 'node:fs';
+import { dirname, extname, basename, resolve } from 'node:path';
 import { walkTree, processIfChains, processForBlocks, recomputeAnchorPath, detectRefs } from './tree-walker.js';
 import { generateComponent } from './codegen.js';
+import { parseSFC } from './sfc-parser.js';
+import {
+  stripMacroImport,
+  toClassName,
+  camelToKebab,
+  extractPropsGeneric,
+  extractPropsArray,
+  extractPropsDefaults,
+  extractPropsObjectName,
+  extractEmitsFromCallSignatures,
+  extractEmits,
+  extractEmitsObjectName,
+  extractEmitsObjectNameFromGeneric,
+  extractSignals,
+  extractComputeds,
+  extractEffects,
+  extractWatchers,
+  extractFunctions,
+  extractLifecycleHooks,
+  extractRefs,
+  extractConstants,
+  extractExpose,
+  validatePropsAssignment,
+  validateDuplicateProps,
+  validatePropsConflicts,
+  validateEmitsAssignment,
+  validateDuplicateEmits,
+  validateEmitsConflicts,
+  validateUndeclaredEmits,
+} from './parser-extractors.js';
+import { stripTypes } from './parser.js';
+
 /**
- * Resolve a child component's import path by searching for a source file
- * whose defineComponent({ tag }) matches the given tag name.
+ * Resolve a child component's source file path by tag name.
+ *
+ * Searches for a file named after the tag in the source directory,
+ * trying extensions in priority order: .wcc, .js, .ts
  *
- * @param {string} tag — Child component tag name (e.g., 'wcc-badge')
- * @param {string} sourceDir — Directory of the parent component source file
- * @param {object} [config] — Optional config with input/output dirs
- * @returns {string | null} Relative import path (e.g., './wcc-badge.js') or null if not found
+ * @param {string} tag — The custom element tag name (e.g., 'wcc-child')
+ * @param {string} sourceDir — Directory of the parent component
+ * @param {object} [config] — Optional config (reserved for future use)
+ * @returns {string | null} Relative import path (e.g., './wcc-child.js') or null if not found
  */
 function resolveChildComponent(tag, sourceDir, config) {
-  // Search in the same directory and subdirectories for a matching source file
-  const searchDirs = [sourceDir];
-
-  // Also search parent directory (common case: components in sibling folders)
-  const parentDir = dirname(sourceDir);
-  if (parentDir !== sourceDir) {
-    searchDirs.push(parentDir);
-  }
-
-  for (const dir of searchDirs) {
-    if (!existsSync(dir)) continue;
-    try {
-      const entries = readdirSync(dir, { withFileTypes: true, recursive: true });
-      for (const entry of entries) {
-        if (!entry.isFile()) continue;
-        const ext = extname(entry.name);
-        if (ext !== '.js' && ext !== '.ts') continue;
-        if (entry.name.includes('.test.')) continue;
-        if (entry.name.endsWith('.d.ts')) continue;
-
-        const fullPath = resolve(dir, entry.parentPath ? relative(dir, entry.parentPath) : '', entry.name);
-        try {
-          const content = readFileSync(fullPath, 'utf-8');
-          // Quick check: does this file define the component with the matching tag?
-          const tagMatch = content.match(/defineComponent\(\s*\{[^}]*tag\s*:\s*['"]([^'"]+)['"]/);
-          if (tagMatch && tagMatch[1] === tag) {
-            // Compute relative path from sourceDir to this file, with .js extension
-            let relPath = relative(sourceDir, fullPath);
-            // Ensure .js extension (replace .ts)
-            relPath = relPath.replace(/\.ts$/, '.js');
-            // Ensure starts with ./
-            if (!relPath.startsWith('.')) relPath = './' + relPath;
-            return relPath;
-          }
-        } catch {
-          // Skip files that can't be read
-        }
-      }
-    } catch {
-      // Skip dirs that can't be listed
+  const extensions = ['.wcc', '.js', '.ts'];
+  for (const ext of extensions) {
+    const candidate = resolve(sourceDir, `${tag}${ext}`);
+    if (existsSync(candidate)) {
+      // Return as a relative .js import path (compiled output)
+      return `./${tag}.js`;
     }
   }
-
   return null;
 }
 
 /**
- * Compile a single .ts/.js source file into a self-contained JS component.
+ * Compile a single .wcc SFC file into a self-contained JS component.
+ *
+ * Reads the file, parses the SFC blocks, extracts reactive declarations
+ * from the script block using parser-extractors.js, and processes template
+ * and style through the existing pipeline (jsdom → tree-walker → codegen).
  *
- * @param {string} filePath — Absolute or relative path to the source file
+ * @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
  */
-export async function compile(filePath, config) {
-  // 1. Parse the source file
-  const parseResult = await parse(filePath);
+async function compileSFC(filePath, config) {
+  // 1. Read and parse the SFC file
+  const rawSource = readFileSync(filePath, 'utf-8');
+  const fileName = basename(filePath);
+  const descriptor = parseSFC(rawSource, fileName);
 
-  // 2. Parse template HTML into jsdom DOM
-  const dom = new JSDOM(`<div id="__root">${parseResult.template}</div>`);
-  const rootEl = dom.window.document.getElementById('__root');
+  // 2. Process script block — mirrors parser.js logic
+  let source = stripMacroImport(descriptor.script);
+
+  // 3. Extract props/emits from generic forms BEFORE type stripping
+  const propsFromGeneric = extractPropsGeneric(source);
+  const propsObjectNameFromGeneric = extractPropsObjectName(source);
+  const emitsFromCallSignatures = extractEmitsFromCallSignatures(source);
+  const emitsObjectNameFromGeneric = extractEmitsObjectNameFromGeneric(source);
 
-  // 3. Build name sets
-  const signalNames = new Set(parseResult.signals.map(s => s.name));
-  const computedNames = new Set(parseResult.computeds.map(c => c.name));
-  const propNames = new Set((parseResult.propDefs || []).map(p => p.name));
+  // 4. Validate props/emits assignment (before type strip)
+  validatePropsAssignment(source, filePath);
+  validateEmitsAssignment(source, filePath);
 
-  // 4. Process each blocks BEFORE if chains (replaces each elements with comment anchors)
-  const forBlocks = processForBlocks(rootEl, [], signalNames, computedNames, propNames);
+  // 5. Strip TypeScript types if lang === 'ts'
+  if (descriptor.lang === 'ts') {
+    source = await stripTypes(source);
+  }
+
+  // 6. Extract component metadata
+  const tagName = descriptor.tag;
+  const className = toClassName(tagName);
+  const template = descriptor.template;
+  const style = descriptor.style;
 
-  // 5. Process conditional chains BEFORE walkTree (if/else-if/else)
-  // This replaces conditional elements with comment anchors so walkTree
-  // doesn't discover bindings inside conditional branches at the top level.
-  const ifBlocks = processIfChains(rootEl, [], signalNames, computedNames, propNames);
+  // 7. Extract lifecycle hooks (before other extractions)
+  const { onMountHooks, onDestroyHooks } = extractLifecycleHooks(source);
+
+  // 7b. Strip lifecycle/watcher blocks from source for extraction
+  let sourceForExtraction = source;
+  const hookLinePattern = /\bonMount\s*\(|\bonDestroy\s*\(|\bwatch\s*\(/;
+  const sourceLines = sourceForExtraction.split('\n');
+  const filteredLines = [];
+  let skipDepth = 0;
+  let skipping = false;
+  for (const line of sourceLines) {
+    if (!skipping && hookLinePattern.test(line)) {
+      skipping = true;
+      skipDepth = 0;
+      for (const ch of line) {
+        if (ch === '{') skipDepth++;
+        if (ch === '}') skipDepth--;
+      }
+      if (skipDepth <= 0) skipping = false;
+      continue;
+    }
+    if (skipping) {
+      for (const ch of line) {
+        if (ch === '{') skipDepth++;
+        if (ch === '}') skipDepth--;
+      }
+      if (skipDepth <= 0) skipping = false;
+      continue;
+    }
+    filteredLines.push(line);
+  }
+  sourceForExtraction = filteredLines.join('\n');
+
+  // 8. Extract reactive declarations and functions
+  const signals = extractSignals(sourceForExtraction);
+  const computeds = extractComputeds(sourceForExtraction);
+  const effects = extractEffects(sourceForExtraction);
+  const watchers = extractWatchers(source);
+  const methods = extractFunctions(sourceForExtraction);
+  const refs = extractRefs(sourceForExtraction);
+  const constantVars = extractConstants(sourceForExtraction);
+  const exposeNames = extractExpose(source);
+
+  // 9. Extract props (array form — after type strip, if generic didn't find any)
+  const propsFromArray = propsFromGeneric.length > 0 ? [] : extractPropsArray(source);
+  let propNames = propsFromGeneric.length > 0 ? propsFromGeneric : propsFromArray;
+
+  // 10. Extract props defaults
+  const propsDefaults = extractPropsDefaults(source);
+  if (propNames.length === 0 && Object.keys(propsDefaults).length > 0) {
+    propNames = Object.keys(propsDefaults);
+  }
+
+  // 11. Extract propsObjectName
+  const propsObjectName = propsObjectNameFromGeneric ?? extractPropsObjectName(source);
+
+  // 12. Validate props
+  validateDuplicateProps(propNames, filePath);
+  const signalNameSet = new Set(signals.map(s => s.name));
+  const computedNameSet = new Set(computeds.map(c => c.name));
+  const constantNameSet = new Set(constantVars.map(v => v.name));
+  validatePropsConflicts(propsObjectName, signalNameSet, computedNameSet, constantNameSet, filePath);
+
+  /** @type {import('./types.js').PropDef[]} */
+  const propDefs = propNames.map(name => ({
+    name,
+    default: propsDefaults[name] ?? 'undefined',
+    attrName: camelToKebab(name),
+  }));
+
+  // 13. Extract emits
+  const emitsFromArray = emitsFromCallSignatures.length > 0 ? [] : extractEmits(source);
+  const emitNames = emitsFromCallSignatures.length > 0 ? emitsFromCallSignatures : emitsFromArray;
+  const emitsObjectName = emitsObjectNameFromGeneric ?? extractEmitsObjectName(source);
+
+  // 14. Validate emits
+  validateDuplicateEmits(emitNames, filePath);
+  const propNameSet = new Set(propNames);
+  validateEmitsConflicts(emitsObjectName, signalNameSet, computedNameSet, constantNameSet, propNameSet, propsObjectName, filePath);
+  validateUndeclaredEmits(source, emitsObjectName, emitNames, filePath);
+
+  // 15. Build initial ParseResult
+  /** @type {import('./types.js').ParseResult} */
+  const parseResult = {
+    tagName,
+    className,
+    template,
+    style,
+    signals,
+    computeds,
+    effects,
+    constantVars,
+    watchers,
+    methods,
+    propDefs,
+    propsObjectName: propsObjectName ?? null,
+    emits: emitNames,
+    emitsObjectName: emitsObjectName ?? null,
+    bindings: [],
+    events: [],
+    processedTemplate: null,
+    ifBlocks: [],
+    showBindings: [],
+    forBlocks: [],
+    onMountHooks,
+    onDestroyHooks,
+    modelBindings: [],
+    attrBindings: [],
+    slots: [],
+    refs,
+    refBindings: [],
+    childComponents: [],
+    childImports: [],
+    exposeNames,
+  };
+
+  // 16. Process template through jsdom → tree-walker → codegen (same as compile())
+  const dom = new JSDOM(`<div id="__root">${template}</div>`);
+  const rootEl = dom.window.document.getElementById('__root');
+
+  const signalNames = new Set(signals.map(s => s.name));
+  const computedNames = new Set(computeds.map(c => c.name));
+  const propNamesSet = new Set(propDefs.map(p => p.name));
+
+  const forBlocks = processForBlocks(rootEl, [], signalNames, computedNames, propNamesSet);
+  const ifBlocks = processIfChains(rootEl, [], signalNames, computedNames, propNamesSet);
 
-  // 6. Normalize DOM after all directive processing to merge adjacent text nodes
   rootEl.normalize();
 
-  // 7. Recompute anchor paths after normalization since text node merging
-  // may have changed childNode indices
   for (const fb of forBlocks) {
     fb.anchorPath = recomputeAnchorPath(rootEl, fb._anchorNode);
   }
@@ -109,16 +243,11 @@ export async function compile(filePath, config) {
     ib.anchorPath = recomputeAnchorPath(rootEl, ib._anchorNode);
   }
 
-  // 8. Walk the tree (discovers bindings/events/showBindings/slots in non-conditional content)
-  const { bindings, events, showBindings, modelBindings, attrBindings, slots, childComponents } = walkTree(rootEl, signalNames, computedNames, propNames);
+  const { bindings, events, showBindings, modelBindings, attrBindings, slots, childComponents } = walkTree(rootEl, signalNames, computedNames, propNamesSet);
 
-  // 9. Detect refs (after walkTree — ref attributes are compile-time directives)
   const refBindings = detectRefs(rootEl);
 
-  // 10. Validate refs
-  const refs = parseResult.refs || [];
-
-  // REF_NOT_FOUND: templateRef('name') with no matching ref="name" in template
+  // 17. Validate refs
   for (const decl of refs) {
     if (!refBindings.find(b => b.refName === decl.refName)) {
       const error = new Error(`templateRef('${decl.refName}') has no matching ref="${decl.refName}" in template`);
@@ -127,18 +256,16 @@ export async function compile(filePath, config) {
       throw error;
     }
   }
-
-  // Unused ref warning: ref="name" in template with no matching templateRef('name') in script
   for (const binding of refBindings) {
     if (!refs.find(d => d.refName === binding.refName)) {
       console.warn(`Warning: ref="${binding.refName}" in template has no matching templateRef('${binding.refName}') in script`);
     }
   }
 
-  // 10b. Validate model bindings — target must be a signal (not prop, computed, or constant)
-  const constantNames = new Set((parseResult.constantVars || []).map(v => v.name));
+  // 17b. Validate model bindings
+  const constantNamesForModel = new Set(constantVars.map(v => v.name));
   for (const mb of modelBindings) {
-    if (propNames.has(mb.signal)) {
+    if (propNamesSet.has(mb.signal)) {
       const error = new Error(`model cannot bind to prop '${mb.signal}' (read-only)`);
       /** @ts-expect-error — custom error code */
       error.code = 'MODEL_READONLY';
@@ -150,7 +277,7 @@ export async function compile(filePath, config) {
       error.code = 'MODEL_READONLY';
       throw error;
     }
-    if (constantNames.has(mb.signal)) {
+    if (constantNamesForModel.has(mb.signal)) {
       const error = new Error(`model cannot bind to constant '${mb.signal}' (read-only)`);
       /** @ts-expect-error — custom error code */
       error.code = 'MODEL_READONLY';
@@ -164,7 +291,7 @@ export async function compile(filePath, config) {
     }
   }
 
-  // 11. Resolve child component imports
+  // 18. Resolve child component imports
   /** @type {import('./types.js').ChildComponentImport[]} */
   const childImports = [];
   if (childComponents.length > 0) {
@@ -181,7 +308,7 @@ export async function compile(filePath, config) {
     }
   }
 
-  // 12. Merge results into ParseResult
+  // 19. Merge tree-walker results into ParseResult
   parseResult.bindings = bindings;
   parseResult.events = events;
   parseResult.showBindings = showBindings;
@@ -193,9 +320,19 @@ export async function compile(filePath, config) {
   parseResult.refBindings = refBindings;
   parseResult.childComponents = childComponents;
   parseResult.childImports = childImports;
-  // Recompute processedTemplate after all directive replacements (including ref removal)
   parseResult.processedTemplate = rootEl.innerHTML;
 
-  // 12. Generate component
+  // 20. Generate component
   return generateComponent(parseResult);
 }
+
+/**
+ * Compile a single .wcc SFC file into a self-contained JS component.
+ *
+ * @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
+ */
+export async function compile(filePath, config) {
+  return compileSFC(filePath, config);
+}

package/lib/dev-server.js

@@ -36,8 +36,25 @@ const MIME_TYPES = {
 const SSE_SNIPPET = `<script>
 (function() {
   var es = new EventSource('/__sse');
+  var overlay = null;
+  function showError(msg) {
+    hideError();
+    overlay = document.createElement('div');
+    overlay.id = '__wcc_error_overlay';
+    overlay.style.cssText = 'position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,0.85);color:#fff;font-family:monospace;font-size:14px;padding:32px;overflow:auto;display:flex;align-items:flex-start;justify-content:center;';
+    var box = document.createElement('div');
+    box.style.cssText = 'background:#1e1e1e;border:2px solid #f44;border-radius:8px;padding:24px;max-width:700px;width:100%;white-space:pre-wrap;word-break:break-word;';
+    box.innerHTML = '<div style="color:#f44;font-size:16px;font-weight:bold;margin-bottom:12px;">\\u274C Compilation Error</div>' + msg.replace(/</g,'&lt;').replace(/>/g,'&gt;');
+    overlay.appendChild(box);
+    overlay.addEventListener('click', hideError);
+    document.body.appendChild(overlay);
+  }
+  function hideError() {
+    if (overlay) { overlay.remove(); overlay = null; }
+  }
   es.onmessage = function(e) {
-    if (e.data === 'reload') location.reload();
+    if (e.data === 'reload') { hideError(); location.reload(); }
+    else if (e.data.startsWith('error:')) { showError(e.data.slice(6).replace(/\\\\n/g,'\\n')); }
   };
   es.onerror = function() {
     es.close();
@@ -70,6 +87,17 @@ export function startDevServer({ port, root, outputDir }) {
     }
   }
 
+  /** Send an error event to all connected SSE clients */
+  function notifyError(message) {
+    for (const res of sseClients) {
+      try {
+        res.write(`data: error:${message.replace(/\n/g, '\\n')}\n\n`);
+      } catch {
+        sseClients.delete(res);
+      }
+    }
+  }
+
   const server = createServer((req, res) => {
     const url = req.url.split('?')[0];
 
@@ -151,6 +179,7 @@ export function startDevServer({ port, root, outputDir }) {
 
   return {
     server,
+    notifyError,
     close() {
       // Close all SSE connections
       for (const res of sseClients) {

package/lib/parser-extractors.js

@@ -244,25 +244,15 @@ export function extractPropsObjectName(source) {
 // ── Props validation ────────────────────────────────────────────────
 
 /**
- * Validate that defineProps is assigned to a variable.
- * Throws PROPS_ASSIGNMENT_REQUIRED if bare defineProps() call detected.
+ * Validate that defineProps is assigned to a variable (if props are accessed via object).
+ * No longer throws — bare defineProps() calls are valid when props are only used in template.
  *
- * @param {string} source
- * @param {string} fileName
+ * @param {string} _source
+ * @param {string} _fileName
  */
-export function validatePropsAssignment(source, fileName) {
-  // Check if defineProps appears in source
-  if (!/defineProps\s*[<(]/.test(source)) return;
-
-  // Check if it's assigned to a variable
-  if (extractPropsObjectName(source) !== null) return;
-
-  const error = new Error(
-    `Error en '${fileName}': defineProps() debe asignarse a una variable (const props = defineProps(...))`
-  );
-  /** @ts-expect-error — custom error code for programmatic handling */
-  error.code = 'PROPS_ASSIGNMENT_REQUIRED';
-  throw error;
+export function validatePropsAssignment(_source, _fileName) {
+  // No-op: bare defineProps() is valid in .wcc SFC format
+  // Props are accessible in the template without needing a variable reference
 }
 
 /**
@@ -606,7 +596,7 @@ export function extractSignals(source) {
 /**
  * Known macro/reactive call patterns that should NOT be treated as constants.
  */
-export const REACTIVE_CALLS = /\b(?:signal|computed|effect|watch|defineProps|defineEmits|defineComponent|templateRef|templateBindings|onMount|onDestroy)\s*[<(]/;
+export const REACTIVE_CALLS = /\b(?:signal|computed|effect|watch|defineProps|defineEmits|defineComponent|templateRef|defineExpose|onMount|onDestroy)\s*[<(]/;
 
 /**
  * Extract plain const/let/var declarations that are NOT reactive calls.
@@ -775,7 +765,9 @@ export function extractEffects(source) {
 
 /**
  * Extract watch() declarations from source.
- * Pattern: watch('target', (newParam, oldParam) => { body })
+ * Supports two forms:
+ *   Form 1 — Signal direct: watch(count, (newVal, oldVal) => { body })
+ *   Form 2 — Getter function: watch(() => expr, (newVal, oldVal) => { body })
  * Uses brace depth tracking to capture multi-line bodies.
  *
  * @param {string} source
@@ -789,9 +781,16 @@ export function extractWatchers(source) {
 
   while (i < lines.length) {
     const line = lines[i];
-    const m = line.match(/\bwatch\(\s*['"](\w+)['"]\s*,\s*\((\w+)\s*,\s*(\w+)\)\s*=>\s*\{/);
+
+    // Form 2 — Getter function: watch(() => expr, (newVal, oldVal) => {
+    const mGetter = line.match(/\bwatch\s*\(\s*\(\)\s*=>\s*(.+?)\s*,\s*\((\w+)\s*,\s*(\w+)\)\s*=>\s*\{/);
+    // Form 1 — Signal direct: watch(identifier, (newVal, oldVal) => {
+    const mSignal = !mGetter ? line.match(/\bwatch\s*\(\s*(\w+)\s*,\s*\((\w+)\s*,\s*(\w+)\)\s*=>\s*\{/) : null;
+
+    const m = mGetter || mSignal;
 
     if (m) {
+      const kind = mGetter ? 'getter' : 'signal';
       const target = m[1];
       const newParam = m[2];
       const oldParam = m[3];
@@ -843,7 +842,7 @@ export function extractWatchers(source) {
       if (minIndent === Infinity) minIndent = 0;
       const body = bodyLines.map(bl => bl.substring(minIndent)).join('\n').trim();
 
-      watchers.push({ target, newParam, oldParam, body });
+      watchers.push({ kind, target, newParam, oldParam, body });
     }
     i++;
   }
@@ -1028,3 +1027,26 @@ export function extractRefs(source) {
   }
   return refs;
 }
+
+// ── defineExpose extraction ─────────────────────────────────────────
+
+/**
+ * Extract property names from defineExpose({ key1, key2, ... }).
+ * Supports shorthand properties: defineExpose({ doubled, handleUpdate })
+ *
+ * @param {string} source — Source code (after type stripping)
+ * @returns {string[]} Array of exposed property names
+ */
+export function extractExpose(source) {
+  const m = source.match(/defineExpose\(\s*\{([^}]*)\}\s*\)/);
+  if (!m) return [];
+
+  const body = m[1];
+  const names = [];
+  const re = /\b(\w+)\b/g;
+  let match;
+  while ((match = re.exec(body)) !== null) {
+    names.push(match[1]);
+  }
+  return names;
+}