@sprlab/wccompiler 0.2.0 → 0.2.1

package/lib/codegen.js

@@ -322,6 +322,8 @@ export function generateComponent(parseResult) {
     constantVars = [],
     refs = [],
     refBindings = [],
+    childComponents = [],
+    childImports = [],
   } = parseResult;
 
   const signalNames = signals.map(s => s.name);
@@ -336,6 +338,14 @@ export function generateComponent(parseResult) {
   lines.push(reactiveRuntime.trim());
   lines.push('');
 
+  // ── 1b. Child component imports ──
+  for (const ci of childImports) {
+    lines.push(`import '${ci.importPath}';`);
+  }
+  if (childImports.length > 0) {
+    lines.push('');
+  }
+
   // ── 2. CSS injection (scoped CSS into document.head, always) ──
   if (style) {
     const scoped = scopeCSS(style, tagName);
@@ -410,6 +420,11 @@ export function generateComponent(parseResult) {
     lines.push(`    this.${s.varName} = ${pathExpr(s.path, '__root')};`);
   }
 
+  // Assign DOM refs for child component instances
+  for (const cc of childComponents) {
+    lines.push(`    this.${cc.varName} = ${pathExpr(cc.path, '__root')};`);
+  }
+
   // Assign DOM refs for attr bindings (reuse ref when same path)
   const attrPathMap = new Map();
   for (const ab of attrBindings) {
@@ -542,6 +557,27 @@ export function generateComponent(parseResult) {
     }
   }
 
+  // Child component reactive prop bindings
+  for (const cc of childComponents) {
+    for (const pb of cc.propBindings) {
+      let ref;
+      if (pb.type === 'prop') {
+        ref = `this._s_${pb.expr}()`;
+      } else if (pb.type === 'computed') {
+        ref = `this._c_${pb.expr}()`;
+      } else if (pb.type === 'signal') {
+        ref = `this._${pb.expr}()`;
+      } else if (pb.type === 'constant') {
+        ref = `this._const_${pb.expr}`;
+      } else {
+        ref = `this._${pb.expr}()`;
+      }
+      lines.push('    __effect(() => {');
+      lines.push(`      this.${cc.varName}.setAttribute('${pb.attr}', ${ref} ?? '');`);
+      lines.push('    });');
+    }
+  }
+
   // User effects
   for (const eff of effects) {
     const body = transformMethodBody(eff.body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, refVarNames, constantNames);

package/lib/compiler.js

@@ -8,9 +8,67 @@
  */
 
 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 { walkTree, processIfChains, processForBlocks, recomputeAnchorPath, detectRefs } from './tree-walker.js';
 import { generateComponent } from './codegen.js';
+/**
+ * Resolve a child component's import path by searching for a source file
+ * whose defineComponent({ tag }) matches the given tag name.
+ *
+ * @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
+ */
+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
+    }
+  }
+
+  return null;
+}
+
 /**
  * Compile a single .ts/.js source file into a self-contained JS component.
  *
@@ -52,7 +110,7 @@ export async function compile(filePath, config) {
   }
 
   // 8. Walk the tree (discovers bindings/events/showBindings/slots in non-conditional content)
-  const { bindings, events, showBindings, modelBindings, attrBindings, slots } = walkTree(rootEl, signalNames, computedNames, propNames);
+  const { bindings, events, showBindings, modelBindings, attrBindings, slots, childComponents } = walkTree(rootEl, signalNames, computedNames, propNames);
 
   // 9. Detect refs (after walkTree — ref attributes are compile-time directives)
   const refBindings = detectRefs(rootEl);
@@ -106,7 +164,24 @@ export async function compile(filePath, config) {
     }
   }
 
-  // 11. Merge results into ParseResult
+  // 11. Resolve child component imports
+  /** @type {import('./types.js').ChildComponentImport[]} */
+  const childImports = [];
+  if (childComponents.length > 0) {
+    const uniqueTags = [...new Set(childComponents.map(c => c.tag))];
+    const sourceDir = dirname(filePath);
+
+    for (const tag of uniqueTags) {
+      const resolved = resolveChildComponent(tag, sourceDir, config);
+      if (resolved) {
+        childImports.push({ tag, importPath: resolved });
+      } else {
+        console.warn(`Warning: child component <${tag}> used in template but source file not found`);
+      }
+    }
+  }
+
+  // 12. Merge results into ParseResult
   parseResult.bindings = bindings;
   parseResult.events = events;
   parseResult.showBindings = showBindings;
@@ -116,6 +191,8 @@ export async function compile(filePath, config) {
   parseResult.forBlocks = forBlocks;
   parseResult.slots = slots;
   parseResult.refBindings = refBindings;
+  parseResult.childComponents = childComponents;
+  parseResult.childImports = childImports;
   // Recompute processedTemplate after all directive replacements (including ref removal)
   parseResult.processedTemplate = rootEl.innerHTML;
 

package/lib/tree-walker.js

@@ -15,7 +15,7 @@
 import { JSDOM } from 'jsdom';
 import { BOOLEAN_ATTRIBUTES } from './types.js';
 
-/** @import { Binding, EventBinding, IfBlock, IfBranch, ShowBinding, AttrBinding, ForBlock, ModelBinding, SlotBinding, SlotProp, RefBinding } from './types.js' */
+/** @import { Binding, EventBinding, IfBlock, IfBranch, ShowBinding, AttrBinding, ForBlock, ModelBinding, SlotBinding, SlotProp, RefBinding, ChildComponentBinding, ChildPropBinding } from './types.js' */
 
 /**
  * Walk a DOM tree rooted at rootEl, discovering bindings and events.
@@ -24,7 +24,7 @@ import { BOOLEAN_ATTRIBUTES } from './types.js';
  * @param {Set<string>} signalNames — Set of signal variable names
  * @param {Set<string>} computedNames — Set of computed variable names
  * @param {Set<string>} [propNames] — Set of prop names from defineProps
- * @returns {{ bindings: Binding[], events: EventBinding[], showBindings: ShowBinding[], modelBindings: ModelBinding[], attrBindings: AttrBinding[], slots: SlotBinding[] }}
+ * @returns {{ bindings: Binding[], events: EventBinding[], showBindings: ShowBinding[], modelBindings: ModelBinding[], attrBindings: AttrBinding[], slots: SlotBinding[], childComponents: ChildComponentBinding[] }}
  */
 export function walkTree(rootEl, signalNames, computedNames, propNames = new Set()) {
   /** @type {Binding[]} */
@@ -39,12 +39,15 @@ export function walkTree(rootEl, signalNames, computedNames, propNames = new Set
   const attrBindings = [];
   /** @type {SlotBinding[]} */
   const slots = [];
+  /** @type {ChildComponentBinding[]} */
+  const childComponents = [];
   let bindIdx = 0;
   let eventIdx = 0;
   let showIdx = 0;
   let modelIdx = 0;
   let attrIdx = 0;
   let slotIdx = 0;
+  let childIdx = 0;
 
   /**
    * Determine the binding type for a variable name.
@@ -103,6 +106,40 @@ export function walkTree(rootEl, signalNames, computedNames, propNames = new Set
         return; // Don't recurse into the replaced element
       }
 
+      // Detect child custom elements (tag name contains a hyphen)
+      const tagLower = el.tagName.toLowerCase();
+      if (tagLower.includes('-') && tagLower !== rootEl.tagName?.toLowerCase()) {
+        /** @type {ChildPropBinding[]} */
+        const propBindings = [];
+        for (const attr of Array.from(el.attributes)) {
+          // Skip directive attributes (@event, :bind, show, model, etc.)
+          if (attr.name.startsWith('@') || attr.name.startsWith(':') || attr.name.startsWith('bind:')) continue;
+          if (['show', 'model', 'if', 'else-if', 'else', 'each', 'ref'].includes(attr.name)) continue;
+
+          // Check for {{interpolation}} in attribute value
+          const interpMatch = attr.value.match(/^\{\{([\w.]+)\}\}$/);
+          if (interpMatch) {
+            const expr = interpMatch[1];
+            propBindings.push({
+              attr: attr.name,
+              expr,
+              type: propNames.has(expr) ? 'prop' : signalNames.has(expr) ? 'signal' : computedNames.has(expr) ? 'computed' : 'method',
+            });
+            // Clear the interpolation from the attribute — the effect sets it at runtime
+            el.setAttribute(attr.name, '');
+          }
+        }
+
+        if (propBindings.length > 0) {
+          childComponents.push({
+            tag: tagLower,
+            varName: `__child${childIdx++}`,
+            path: [...pathParts],
+            propBindings,
+          });
+        }
+      }
+
       // Check for @event attributes
       const attrsToRemove = [];
       for (const attr of Array.from(el.attributes)) {
@@ -265,7 +302,7 @@ export function walkTree(rootEl, signalNames, computedNames, propNames = new Set
   }
 
   walk(rootEl, []);
-  return { bindings, events, showBindings, modelBindings, attrBindings, slots };
+  return { bindings, events, showBindings, modelBindings, attrBindings, slots, childComponents };
 }
 
 // ── Conditional chain processing (if / else-if / else) ──────────────
@@ -338,6 +375,7 @@ export function walkBranch(html, signalNames, computedNames, propNames) {
   stripFirstSegment(result.attrBindings);
   stripFirstSegment(result.modelBindings);
   stripFirstSegment(result.slots);
+  stripFirstSegment(result.childComponents);
 
   return {
     bindings: result.bindings,
@@ -346,6 +384,7 @@ export function walkBranch(html, signalNames, computedNames, propNames) {
     attrBindings: result.attrBindings,
     modelBindings: result.modelBindings,
     slots: result.slots,
+    childComponents: result.childComponents,
     processedHtml,
   };
 }

package/lib/types.js

@@ -86,6 +86,8 @@
  * @property {SlotBinding[]} slots — Slot bindings (empty array if no slots)
  * @property {RefDeclaration[]} refs — templateRef declarations from script (empty array if none)
  * @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)
  */
 
 /**
@@ -179,6 +181,27 @@
  * @property {SlotProp[]} slotProps  — Array of :prop="expr" bindings on the slot
  */
 
+/**
+ * @typedef {Object} ChildPropBinding
+ * @property {string} attr   — Attribute name on the child element (e.g., 'label')
+ * @property {string} expr   — Expression from {{expr}} (e.g., 'role')
+ * @property {string} type   — Binding source type: 'signal' | 'computed' | 'prop' | 'constant' | 'method'
+ */
+
+/**
+ * @typedef {Object} ChildComponentBinding
+ * @property {string} tag          — Child component tag name (e.g., 'wcc-badge')
+ * @property {string} varName      — Internal ref name (e.g., '__child0')
+ * @property {string[]} path       — DOM path from __root
+ * @property {ChildPropBinding[]} propBindings — Reactive attribute bindings
+ */
+
+/**
+ * @typedef {Object} ChildComponentImport
+ * @property {string} tag          — Child component tag name
+ * @property {string} importPath   — Relative import path (e.g., './wcc-badge.js')
+ */
+
 /**
  * Set of HTML attributes that use property assignment instead of setAttribute.
  * @type {Set<string>}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sprlab/wccompiler",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Zero-runtime compiler that transforms .ts/.js component files into native web components with signals-based reactivity",
   "type": "module",
   "bin": {