@sprlab/wccompiler 0.4.0 → 0.4.1

package/bin/wcc.js

@@ -67,7 +67,7 @@ async function main() {
   } else if (command === 'dev') {
     await build(config, cwd);
     const outputDir = resolve(cwd, config.output);
-    startDevServer({ port: config.port, root: cwd, outputDir });
+    const devServer = startDevServer({ port: config.port, root: cwd, outputDir });
     const inputDir = resolve(cwd, config.input);
     console.log(`Watching ${inputDir} for changes...`);
     watch(inputDir, { recursive: true }, async (eventType, filename) => {
@@ -85,6 +85,7 @@ async function main() {
         console.log(`Compiled: ${filename}`);
       } catch (err) {
         console.error(`Error compiling ${filename}: ${err.message}`);
+        devServer.notifyError(`${filename}\n\n${err.message}`);
       }
     });
   } else {

package/lib/codegen.js

@@ -517,6 +517,7 @@ export function generateComponent(parseResult) {
     refBindings = [],
     childComponents = [],
     childImports = [],
+    exposeNames = [],
   } = parseResult;
 
   const signalNames = signals.map(s => s.name);
@@ -614,9 +615,11 @@ export function generateComponent(parseResult) {
     lines.push(`    this.${s.varName} = ${pathExpr(s.path, '__root')};`);
   }
 
-  // Assign DOM refs for child component instances
+  // Assign DOM refs for child component instances (only if they have prop bindings)
   for (const cc of childComponents) {
-    lines.push(`    this.${cc.varName} = ${pathExpr(cc.path, '__root')};`);
+    if (cc.propBindings.length > 0) {
+      lines.push(`    this.${cc.varName} = ${pathExpr(cc.path, '__root')};`);
+    }
   }
 
   // Assign DOM refs for attr bindings (reuse ref when same path)
@@ -1157,6 +1160,20 @@ export function generateComponent(parseResult) {
     }
   }
 
+  // ── defineExpose: public getters/methods ──
+  for (const name of exposeNames) {
+    if (computedNames.includes(name)) {
+      lines.push(`  get ${name}() { return this._c_${name}(); }`);
+    } else if (signalNames.includes(name)) {
+      lines.push(`  get ${name}() { return this._${name}(); }`);
+    } else if (methodNames.includes(name)) {
+      lines.push(`  ${name}(...args) { return this._${name}(...args); }`);
+    } else if (constantNames.includes(name)) {
+      lines.push(`  get ${name}() { return this._const_${name}; }`);
+    }
+  }
+  if (exposeNames.length > 0) lines.push('');
+
   // ── if setup methods ──
   for (const ifBlock of ifBlocks) {
     const vn = ifBlock.varName;

package/lib/compiler.js

@@ -32,6 +32,7 @@ import {
   extractLifecycleHooks,
   extractRefs,
   extractConstants,
+  extractExpose,
   validatePropsAssignment,
   validateDuplicateProps,
   validatePropsConflicts,
@@ -147,6 +148,7 @@ async function compileSFC(filePath, config) {
   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);
@@ -218,6 +220,7 @@ async function compileSFC(filePath, config) {
     refBindings: [],
     childComponents: [],
     childImports: [],
+    exposeNames,
   };
 
   // 16. Process template through jsdom → tree-walker → codegen (same as compile())

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

@@ -1027,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;
+}

package/lib/tree-walker.js

@@ -131,14 +131,13 @@ export function walkTree(rootEl, signalNames, computedNames, propNames = new Set
           }
         }
 
-        if (propBindings.length > 0) {
-          childComponents.push({
-            tag: tagLower,
-            varName: `__child${childIdx++}`,
-            path: [...pathParts],
-            propBindings,
-          });
-        }
+        // Always register child component for auto-import (even without prop bindings)
+        childComponents.push({
+          tag: tagLower,
+          varName: `__child${childIdx++}`,
+          path: [...pathParts],
+          propBindings,
+        });
       }
 
       // Check for @event attributes

package/lib/types.js

@@ -99,6 +99,7 @@
  * @property {RefBinding[]} refBindings — ref attribute bindings from template (empty array if none)
  * @property {ChildComponentBinding[]} childComponents — Child component bindings (empty array if none)
  * @property {ChildComponentImport[]} childImports — Resolved child component imports (empty array if none)
+ * @property {string[]} exposeNames — Property names from defineExpose (empty array if none)
  */
 
 /**

package/package.json

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

package/types/wcc.d.ts

@@ -19,7 +19,7 @@ declare module 'wcc' {
   export function defineEmits<T>(): T;
   export function defineEmits(names: string[]): (name: string, detail?: any) => void;
 
-  export function templateRef(name: string): { value: HTMLElement | null };
+  export function templateRef<T = HTMLElement>(name: string): { value: (T & HTMLElement) | null };
 
   export function onMount(fn: () => void | Promise<void>): void;
   export function onDestroy(fn: () => void | Promise<void>): void;