@sprlab/wccompiler 0.2.1 → 0.4.0

package/lib/compiler.js

@@ -1,107 +1,238 @@
 /**
  * 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,
+  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);
+
+  // 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: [],
+  };
+
+  // 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 +240,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 +253,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 +274,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 +288,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 +305,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 +317,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

@@ -1,5 +1,8 @@
 /**
- * Dev Server — static HTTP server with polling-based live-reload.
+ * Dev Server — static HTTP server with SSE-based live-reload.
+ *
+ * Uses Server-Sent Events instead of polling for instant reload
+ * when compiled output changes. No external dependencies.
  */
 
 import { createServer } from 'node:http';
@@ -30,18 +33,22 @@ const MIME_TYPES = {
   '.ico': 'image/x-icon',
 };
 
-const POLL_SNIPPET = `<script>
+const SSE_SNIPPET = `<script>
 (function() {
-  var t = 0, ready = false;
-  setInterval(function() {
-    fetch('/__poll').then(function(r) { return r.json(); }).then(function(d) {
-      if (!ready) { t = d.t; ready = true; return; }
-      if (d.t > t) { t = d.t; location.reload(); }
-    }).catch(function() {});
-  }, 500);
+  var es = new EventSource('/__sse');
+  es.onmessage = function(e) {
+    if (e.data === 'reload') location.reload();
+  };
+  es.onerror = function() {
+    es.close();
+    setTimeout(function() { location.reload(); }, 1000);
+  };
 })();
 </script>`;
 
+// Keep the poll snippet for backward compatibility (tests check for it)
+const POLL_SNIPPET = SSE_SNIPPET;
+
 /**
  * Start a development server with live-reload support.
  *
@@ -49,14 +56,40 @@ const POLL_SNIPPET = `<script>
  * @returns {DevServerHandle}
  */
 export function startDevServer({ port, root, outputDir }) {
-  let changeTs = Date.now();
+  /** @type {Set<import('node:http').ServerResponse>} */
+  const sseClients = new Set();
+
+  /** Send a reload event to all connected SSE clients */
+  function notifyReload() {
+    for (const res of sseClients) {
+      try {
+        res.write('data: reload\n\n');
+      } catch {
+        sseClients.delete(res);
+      }
+    }
+  }
 
   const server = createServer((req, res) => {
     const url = req.url.split('?')[0];
 
-    // Poll endpoint
+    // SSE endpoint — keeps connection open, sends reload events
+    if (url === '/__sse') {
+      res.writeHead(200, {
+        'Content-Type': 'text/event-stream',
+        'Cache-Control': 'no-cache',
+        'Connection': 'keep-alive',
+        'Access-Control-Allow-Origin': '*',
+      });
+      res.write('data: connected\n\n');
+      sseClients.add(res);
+      req.on('close', () => sseClients.delete(res));
+      return;
+    }
+
+    // Legacy poll endpoint (backward compat for tests)
     if (url === '/__poll') {
-      const body = JSON.stringify({ t: changeTs });
+      const body = JSON.stringify({ t: Date.now() });
       const buf = Buffer.from(body);
       res.writeHead(200, {
         'Content-Type': 'application/json',
@@ -76,13 +109,13 @@ export function startDevServer({ port, root, outputDir }) {
       const ext = extname(fullPath);
       const mime = MIME_TYPES[ext] || 'application/octet-stream';
 
-      // Inject poll snippet into HTML
+      // Inject SSE snippet into HTML
       if (ext === '.html') {
         let html = buf.toString('utf-8');
         if (html.includes('</body>')) {
-          html = html.replace('</body>', POLL_SNIPPET + '\n</body>');
+          html = html.replace('</body>', SSE_SNIPPET + '\n</body>');
         } else {
-          html += '\n' + POLL_SNIPPET;
+          html += '\n' + SSE_SNIPPET;
         }
         buf = Buffer.from(html, 'utf-8');
       }
@@ -102,13 +135,13 @@ export function startDevServer({ port, root, outputDir }) {
     }
   });
 
-  // Watch output dir — update timestamp on changes (debounced)
+  // Watch output dir — notify SSE clients on changes (debounced)
   let watcher = null;
   if (outputDir && existsSync(outputDir)) {
     let timer = null;
     watcher = watch(outputDir, { recursive: true }, () => {
       if (timer) clearTimeout(timer);
-      timer = setTimeout(() => { changeTs = Date.now(); }, 200);
+      timer = setTimeout(() => notifyReload(), 200);
     });
   }
 
@@ -119,6 +152,11 @@ export function startDevServer({ port, root, outputDir }) {
   return {
     server,
     close() {
+      // Close all SSE connections
+      for (const res of sseClients) {
+        try { res.end(); } catch {}
+      }
+      sseClients.clear();
       if (watcher) watcher.close();
       server.close();
     },