@sprlab/wccompiler 0.9.2 → 0.9.4

package/adapters/angular.js

@@ -1,5 +1,73 @@
 /**
- * Angular adapter for WCC defineModel (OPTIONAL).
+ * Angular adapter for WCC (defineModel + Scoped Slots).
+ *
+ * This module provides Angular integration for WCC components:
+ *
+ * ═══════════════════════════════════════════════════════════════════════════════
+ * SCOPED SLOTS (Native Angular Syntax)
+ * ═══════════════════════════════════════════════════════════════════════════════
+ *
+ * For native Angular scoped slot support, use the TypeScript directives:
+ *
+ *   import { WccSlotsDirective, WccSlotDef } from '@sprlab/wccompiler/adapters/angular';
+ *
+ * Setup:
+ *   @Component({
+ *     imports: [WccSlotsDirective, WccSlotDef],
+ *     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+ *     template: `...`
+ *   })
+ *
+ * The directives auto-activate on custom elements (tags with hyphen).
+ * No [wccSlots] attribute is needed on the host element.
+ *
+ * Slot declaration uses ng-template[slot] syntax:
+ *
+ *   <!-- Named slot (static content, no let-*) -->
+ *   <wcc-card>
+ *     <ng-template slot="header"><strong>My Header</strong></ng-template>
+ *   </wcc-card>
+ *
+ *   <!-- Scoped slot (reactive data via let-*) -->
+ *   <wcc-card>
+ *     <ng-template slot="stats" let-likes>{{ likes }} likes</ng-template>
+ *   </wcc-card>
+ *
+ *   <!-- Multiple props in scoped slot -->
+ *   <wcc-card>
+ *     <ng-template slot="details" let-data let-likes="likes" let-total="total">
+ *       {{ likes }}/{{ total }}
+ *     </ng-template>
+ *   </wcc-card>
+ *
+ * How it works:
+ *   - WccSlotDef captures the TemplateRef and slot name from the 'slot' attribute
+ *   - WccSlotsDirective classifies slots as named or scoped using __scopedSlots
+ *   - Named slots render immediately into <div slot="name" style="display:contents">
+ *   - Scoped slots register a renderer via element.registerSlotRenderer()
+ *   - When slot props change, the renderer updates the Angular EmbeddedView
+ *   - Compatible with OnPush change detection strategy
+ *
+ * The directive source is in adapters/angular.ts (TypeScript with Angular decorators).
+ *
+ * ═══════════════════════════════════════════════════════════════════════════════
+ * BACKWARD COMPATIBILITY: slot-template-* (Token Replacement)
+ * ═══════════════════════════════════════════════════════════════════════════════
+ *
+ * The legacy slot-template-* attribute approach continues to work without
+ * importing the directives:
+ *
+ *   <wcc-list>
+ *     <div slot-template-item="<li>{%item%}</li>"></div>
+ *   </wcc-list>
+ *
+ * When WccSlotsDirective IS imported, ng-template[slot] takes priority over
+ * slot-template-* for the same slot name. Slots not covered by ng-template
+ * continue using the token replacement path.
+ *
+ * ═══════════════════════════════════════════════════════════════════════════════
+ * defineModel (Two-Way Binding)
+ * ═══════════════════════════════════════════════════════════════════════════════
  *
  * The WCC component already emits `propNameChange` directly from _modelSet,
  * so Angular's [(prop)] banana-box syntax works WITHOUT this adapter.
@@ -9,7 +77,7 @@
  * 2. The ControlValueAccessor guide for ngModel support
  *
  * Setup (Angular):
- *   // No adapter import needed! Just use CUSTOM_ELEMENTS_SCHEMA:
+ *   // No adapter import needed for [(prop)]! Just use CUSTOM_ELEMENTS_SCHEMA:
  *   import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
  *   @Component({ schemas: [CUSTOM_ELEMENTS_SCHEMA] })
  *

package/adapters/angular.ts

@@ -0,0 +1,310 @@
+/**
+ * Angular adapter for WCC Scoped Slots.
+ *
+ * Exports:
+ *   - WccSlotDef: Auxiliary directive for ng-template[slot]
+ *   - WccSlotsDirective: Main directive that auto-activates on custom elements
+ *   - SlotContext: Interface for template context typing
+ *
+ * Usage:
+ *   import { WccSlotsDirective, WccSlotDef } from '@sprlab/wccompiler/adapters/angular';
+ *
+ *   @Component({
+ *     imports: [WccSlotsDirective, WccSlotDef],
+ *     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+ *     template: `
+ *       <wcc-card>
+ *         <ng-template slot="header"><strong>Header</strong></ng-template>
+ *         <ng-template slot="stats" let-likes>{{ likes }} likes</ng-template>
+ *       </wcc-card>
+ *     `
+ *   })
+ *
+ * @module @sprlab/wccompiler/adapters/angular
+ */
+
+import {
+  Directive,
+  TemplateRef,
+  ElementRef,
+  ViewContainerRef,
+  ChangeDetectorRef,
+  ContentChildren,
+  QueryList,
+  EmbeddedViewRef,
+  AfterContentInit,
+  OnDestroy,
+  inject,
+  Attribute,
+} from '@angular/core';
+
+// ─── Interfaces ─────────────────────────────────────────────────────────────
+
+/** Context object passed to createEmbeddedView for scoped slots */
+export interface SlotContext {
+  $implicit: any;
+  [key: string]: any;
+}
+
+type SlotType = 'named' | 'scoped';
+
+interface SlotState {
+  type: SlotType;
+  slotDef: WccSlotDef;
+  viewRef: EmbeddedViewRef<SlotContext> | null;
+  cleanup: (() => void) | null;
+  wrapperEl: HTMLElement | null;
+  context: SlotContext | null;
+}
+
+// ─── WccSlotDef — Auxiliary Directive ───────────────────────────────────────
+
+/**
+ * Auxiliary directive that marks an ng-template as slot content.
+ * Captures the TemplateRef and the slot name from the HTML 'slot' attribute.
+ *
+ * Usage:
+ *   <ng-template slot="header">...</ng-template>
+ *   <ng-template slot="stats" let-likes>{{likes}}</ng-template>
+ */
+@Directive({
+  selector: 'ng-template[slot]',
+  standalone: true,
+})
+export class WccSlotDef {
+  public readonly templateRef = inject<TemplateRef<any>>(TemplateRef);
+  public readonly slotName: string;
+
+  constructor(@Attribute('slot') name: string | null) {
+    this.slotName = name || '';
+  }
+}
+
+// ─── WccSlotsDirective — Main Directive ─────────────────────────────────────
+
+/**
+ * Exclusion selector: lists all standard HTML elements.
+ * Custom elements (which MUST contain a hyphen) are not excluded.
+ */
+const STANDARD_ELEMENTS = 'div,span,p,a,button,input,form,section,article,header,footer,nav,main,ul,ol,li,table,tr,td,th,thead,tbody,tfoot,img,h1,h2,h3,h4,h5,h6,label,select,textarea,option,fieldset,legend,details,summary,dialog,slot,template,canvas,video,audio,source,iframe,pre,code,blockquote,hr,br,strong,em,small,sub,sup,mark,del,ins,figure,figcaption,picture,svg,math,body,html,head,script,style,link,meta,title,base,col,colgroup,caption,abbr,address,area,aside,b,bdi,bdo,cite,data,dd,dfn,dl,dt,i,kbd,map,meter,noscript,output,progress,q,rp,rt,ruby,s,samp,time,u,var,wbr';
+
+/** Build the exclusion selector string */
+const EXCLUSION_SELECTOR = STANDARD_ELEMENTS.split(',').map(t => `:not(${t})`).join('');
+
+/**
+ * Main directive that auto-activates on custom elements (tags with hyphen).
+ * Classifies ng-template[slot] children as named or scoped slots and manages
+ * their lifecycle.
+ */
+@Directive({
+  selector: EXCLUSION_SELECTOR,
+  standalone: true,
+})
+export class WccSlotsDirective implements AfterContentInit, OnDestroy {
+  @ContentChildren(WccSlotDef) slotDefs!: QueryList<WccSlotDef>;
+
+  private el = inject<ElementRef<HTMLElement>>(ElementRef);
+  private vcr = inject(ViewContainerRef);
+  private cdr = inject(ChangeDetectorRef);
+
+  private slots = new Map<string, SlotState>();
+  private eventCleanups: (() => void)[] = [];
+  private destroyed = false;
+
+  ngAfterContentInit(): void {
+    // Runtime guard: only proceed for custom elements (tag name contains hyphen)
+    if (!this.el.nativeElement.tagName.toLowerCase().includes('-')) return;
+
+    this.classifyAndInitSlots();
+  }
+
+  ngOnDestroy(): void {
+    this.destroyed = true;
+    this.cleanup();
+  }
+
+  // ─── Classification ─────────────────────────────────────────────────────
+
+  /** Classifies slots using __scopedSlots from the host element and initializes them */
+  private classifyAndInitSlots(): void {
+    const element = this.el.nativeElement as any;
+    const scopedNames: string[] = element.__scopedSlots || [];
+
+    for (const slotDef of this.slotDefs) {
+      // Ignore templates with empty slot name
+      if (!slotDef.slotName) continue;
+
+      if (scopedNames.includes(slotDef.slotName)) {
+        this.initScopedSlot(slotDef);
+      } else {
+        this.initNamedSlot(slotDef);
+      }
+    }
+  }
+
+  // ─── Named Slot ─────────────────────────────────────────────────────────
+
+  /** Named Slot: immediate static rendering */
+  private initNamedSlot(slotDef: WccSlotDef): void {
+    const hostEl = this.el.nativeElement;
+    const wrapper = document.createElement('div');
+    wrapper.setAttribute('slot', slotDef.slotName);
+    wrapper.style.display = 'contents';
+
+    const viewRef = this.vcr.createEmbeddedView(slotDef.templateRef);
+    for (const node of viewRef.rootNodes) {
+      wrapper.appendChild(node);
+    }
+    hostEl.appendChild(wrapper);
+
+    this.slots.set(slotDef.slotName, {
+      type: 'named',
+      slotDef,
+      viewRef,
+      cleanup: null,
+      wrapperEl: wrapper,
+      context: null,
+    });
+  }
+
+  // ─── Scoped Slot ────────────────────────────────────────────────────────
+
+  /** Scoped Slot: async registration + reactive rendering */
+  private async initScopedSlot(slotDef: WccSlotDef): Promise<void> {
+    const hostEl = this.el.nativeElement;
+    const tagName = hostEl.tagName.toLowerCase();
+
+    // Wait for the custom element to be defined
+    await customElements.whenDefined(tagName);
+    if (this.destroyed) return;
+
+    const state: SlotState = {
+      type: 'scoped',
+      slotDef,
+      viewRef: null,
+      cleanup: null,
+      wrapperEl: null,
+      context: null,
+    };
+    this.slots.set(slotDef.slotName, state);
+
+    // Register renderer
+    const element = hostEl as any;
+    if (typeof element.registerSlotRenderer === 'function') {
+      state.cleanup = element.registerSlotRenderer(
+        slotDef.slotName,
+        (props: Record<string, any>) => this.renderSlot(slotDef.slotName, props)
+      );
+    } else {
+      // Fallback: listen for wcc:slot-update event
+      const handler = (e: CustomEvent) => {
+        if (e.detail?.slot === slotDef.slotName) {
+          this.renderSlot(slotDef.slotName, e.detail.props);
+        }
+      };
+      hostEl.addEventListener('wcc:slot-update', handler as EventListener);
+      this.eventCleanups.push(() =>
+        hostEl.removeEventListener('wcc:slot-update', handler as EventListener)
+      );
+    }
+  }
+
+  // ─── Context Construction ───────────────────────────────────────────────
+
+  /**
+   * Builds the Angular context for createEmbeddedView.
+   *
+   * Rules:
+   * - 0 props: $implicit = undefined
+   * - 1 prop: $implicit = that single value, plus the named prop key
+   * - N props (N > 1): $implicit = full props object, plus all named props
+   */
+  buildContext(props: Record<string, any>): SlotContext {
+    const keys = Object.keys(props);
+    if (keys.length === 0) {
+      return { $implicit: undefined };
+    }
+    if (keys.length === 1) {
+      return { $implicit: props[keys[0]], ...props };
+    }
+    return { $implicit: props, ...props };
+  }
+
+  // ─── Render Slot ────────────────────────────────────────────────────────
+
+  /** Creates or updates the EmbeddedView of a scoped slot */
+  private renderSlot(slotName: string, props: Record<string, any> | null): void {
+    const state = this.slots.get(slotName);
+    if (!state || this.destroyed) return;
+
+    // Props null/undefined: clear the view
+    if (props == null) {
+      if (state.viewRef) {
+        state.viewRef.destroy();
+        state.viewRef = null;
+      }
+      return;
+    }
+
+    const context = this.buildContext(props);
+    state.context = context;
+
+    if (state.viewRef) {
+      // Update existing context
+      Object.assign(state.viewRef.context, context);
+      state.viewRef.markForCheck();
+    } else {
+      // Create new view
+      state.viewRef = this.vcr.createEmbeddedView(state.slotDef.templateRef, context);
+      this.insertView(slotName, state);
+    }
+
+    this.cdr.markForCheck();
+  }
+
+  // ─── DOM Insertion ──────────────────────────────────────────────────────
+
+  /** Inserts view root nodes into the custom element's DOM via a wrapper div */
+  private insertView(slotName: string, state: SlotState): void {
+    if (!state.viewRef) return;
+    const hostEl = this.el.nativeElement;
+
+    if (!state.wrapperEl) {
+      state.wrapperEl = document.createElement('div');
+      state.wrapperEl.setAttribute('slot', slotName);
+      state.wrapperEl.style.display = 'contents';
+      hostEl.appendChild(state.wrapperEl);
+    }
+
+    // Clear previous wrapper content and append new nodes
+    state.wrapperEl.innerHTML = '';
+    for (const node of state.viewRef.rootNodes) {
+      state.wrapperEl.appendChild(node);
+    }
+  }
+
+  // ─── Cleanup ────────────────────────────────────────────────────────────
+
+  /** Full cleanup on destroy */
+  private cleanup(): void {
+    // Destroy views, invoke cleanup functions, remove wrappers
+    for (const [, state] of this.slots) {
+      if (state.viewRef) {
+        state.viewRef.destroy();
+      }
+      if (state.cleanup) {
+        state.cleanup();
+      }
+      if (state.wrapperEl && state.wrapperEl.parentNode) {
+        state.wrapperEl.parentNode.removeChild(state.wrapperEl);
+      }
+    }
+    this.slots.clear();
+
+    // Remove event listeners
+    for (const fn of this.eventCleanups) {
+      fn();
+    }
+    this.eventCleanups = [];
+  }
+}

package/adapters/react.js

@@ -0,0 +1,103 @@
+/**
+ * React browser-side hooks for WCC custom elements.
+ * Bridges CustomEvent to React's ref-based event system.
+ *
+ * @module @sprlab/wccompiler/adapters/react
+ *
+ * IMPORTANT: Import hooks from THIS file (not from integrations/react).
+ * The integrations/react file is for vite.config.js only (contains Babel).
+ *
+ * Usage:
+ *   import { useWccEvent, useWccModel } from '@sprlab/wccompiler/adapters/react'
+ *
+ *   // Listen to custom events
+ *   const ref = useWccEvent('change', (e) => console.log(e.detail))
+ *   <wcc-counter ref={ref}></wcc-counter>
+ *
+ *   // Two-way binding with defineModel
+ *   const [text, setText] = useState('')
+ *   const inputRef = useWccModel('value', text, setText)
+ *   <wcc-input ref={inputRef}></wcc-input>
+ */
+
+import { useRef, useEffect } from 'react'
+
+/**
+ * Hook that attaches a CustomEvent listener to a DOM element via ref.
+ *
+ * Supports two calling conventions:
+ * - useWccEvent(ref, eventName, handler) — uses an existing ref
+ * - useWccEvent(eventName, handler) — creates and returns a new ref
+ *
+ * @param {import('react').RefObject<HTMLElement> | string} refOrEventName
+ * @param {string | ((event: CustomEvent) => void)} eventNameOrHandler
+ * @param {((event: CustomEvent) => void)} [handler]
+ * @returns {import('react').RefObject<HTMLElement> | void}
+ */
+export function useWccEvent(refOrEventName, eventNameOrHandler, handler) {
+  const isRefForm = typeof refOrEventName !== 'string'
+  const elementRef = isRefForm ? refOrEventName : useRef(null)
+  const eventName = isRefForm ? eventNameOrHandler : refOrEventName
+  const callback = isRefForm ? handler : eventNameOrHandler
+
+  const handlerRef = useRef(callback)
+  handlerRef.current = callback
+
+  useEffect(() => {
+    const el = elementRef.current
+    if (!el) return
+    const listener = (e) => handlerRef.current(e)
+    el.addEventListener(eventName, listener)
+    return () => el.removeEventListener(eventName, listener)
+  }, [eventName])
+
+  if (!isRefForm) return elementRef
+}
+
+/**
+ * Hook for two-way binding with WCC defineModel props.
+ *
+ * @param {string} propName - The model prop name (e.g., 'value', 'count')
+ * @param {*} value - Current React state value
+ * @param {(newValue: *) => void} setValue - React state setter
+ * @param {import('react').RefObject<HTMLElement>} [existingRef] - Optional existing ref
+ * @returns {import('react').RefObject<HTMLElement>} Ref to attach to the WCC element
+ *
+ * @example
+ * const [text, setText] = useState('')
+ * const inputRef = useWccModel('value', text, setText)
+ * <wcc-input ref={inputRef}></wcc-input>
+ */
+export function useWccModel(propName, value, setValue, existingRef) {
+  const internalRef = useRef(null)
+  const elementRef = existingRef || internalRef
+
+  const setValueRef = useRef(setValue)
+  setValueRef.current = setValue
+
+  useEffect(() => {
+    const el = elementRef.current
+    if (!el) return
+
+    const listener = (e) => {
+      if (e.detail && e.detail.prop === propName) {
+        setValueRef.current(e.detail.value)
+      }
+    }
+
+    el.addEventListener('wcc:model', listener)
+    return () => el.removeEventListener('wcc:model', listener)
+  }, [propName])
+
+  useEffect(() => {
+    const el = elementRef.current
+    if (!el) return
+    if (value != null) {
+      el.setAttribute(propName, String(value))
+    } else {
+      el.removeAttribute(propName)
+    }
+  }, [propName, value])
+
+  return elementRef
+}

package/integrations/react.js

@@ -1,126 +1,30 @@
 /**
- * React hook for WCC custom element events.
- * Bridges CustomEvent to React's ref-based event system.
+ * React Vite plugin for WCC custom elements.
+ * Transforms idiomatic React JSX slot patterns into WCC-compatible slot markup.
  *
  * @module @sprlab/wccompiler/integrations/react
  *
- * Usage:
- *   // Form 1: Pass an existing ref
- *   const ref = useRef(null)
- *   useWccEvent(ref, 'change', (e) => console.log(e.detail))
- *   <wcc-counter ref={ref}></wcc-counter>
+ * IMPORTANT: This file is for vite.config.js (Node.js context) ONLY.
+ * For browser-side hooks, import from '@sprlab/wccompiler/adapters/react'.
  *
- *   // Form 2: Let the hook create the ref
- *   const ref = useWccEvent('change', (e) => console.log(e.detail))
- *   <wcc-counter ref={ref}></wcc-counter>
+ * @example vite.config.js
+ * ```js
+ * import { wccReactPlugin } from '@sprlab/wccompiler/integrations/react'
+ * export default { plugins: [wccReactPlugin()] }
+ * ```
  *
- *   // Form 3: Two-way binding with defineModel
- *   const [value, setValue] = useState('')
- *   const ref = useWccModel('value', value, setValue)
- *   <wcc-input ref={ref}></wcc-input>
+ * @example Component (browser — import hooks from adapters)
+ * ```jsx
+ * import { useWccEvent, useWccModel } from '@sprlab/wccompiler/adapters/react'
+ * ```
  */
 
-import { useRef, useEffect, useCallback } from 'react'
 import { parse } from '@babel/parser'
 import _traverse from '@babel/traverse'
 import _generate from '@babel/generator'
 const traverse = _traverse.default || _traverse
 const generate = _generate.default || _generate
 
-/**
- * Hook that attaches a CustomEvent listener to a DOM element via ref.
- *
- * Supports two calling conventions:
- * - useWccEvent(ref, eventName, handler) — uses an existing ref
- * - useWccEvent(eventName, handler) — creates and returns a new ref
- *
- * @param {import('react').RefObject<HTMLElement> | string} refOrEventName
- * @param {string | ((event: CustomEvent) => void)} eventNameOrHandler
- * @param {((event: CustomEvent) => void)} [handler]
- * @returns {import('react').RefObject<HTMLElement> | void}
- */
-export function useWccEvent(refOrEventName, eventNameOrHandler, handler) {
-  // Detect calling convention
-  const isRefForm = typeof refOrEventName !== 'string'
-  const elementRef = isRefForm ? refOrEventName : useRef(null)
-  const eventName = isRefForm ? eventNameOrHandler : refOrEventName
-  const callback = isRefForm ? handler : eventNameOrHandler
-
-  const handlerRef = useRef(callback)
-  handlerRef.current = callback
-
-  useEffect(() => {
-    const el = elementRef.current
-    if (!el) return
-    const listener = (e) => handlerRef.current(e)
-    el.addEventListener(eventName, listener)
-    return () => el.removeEventListener(eventName, listener)
-  }, [eventName])
-
-  // Only return ref if we created it (Form 2)
-  if (!isRefForm) return elementRef
-}
-
-
-/**
- * Hook for two-way binding with WCC defineModel props.
- *
- * Listens for `wcc:model` events on the element and calls the setter
- * when the matching prop changes internally. Also syncs the React state
- * to the element's attribute when the value changes externally.
- *
- * @param {string} propName - The model prop name (e.g., 'value', 'count')
- * @param {*} value - Current React state value
- * @param {(newValue: *) => void} setValue - React state setter
- * @param {import('react').RefObject<HTMLElement>} [existingRef] - Optional existing ref
- * @returns {import('react').RefObject<HTMLElement>} Ref to attach to the WCC element
- *
- * @example
- * ```jsx
- * function App() {
- *   const [text, setText] = useState('')
- *   const inputRef = useWccModel('value', text, setText)
- *   return <wcc-input ref={inputRef}></wcc-input>
- * }
- * ```
- */
-export function useWccModel(propName, value, setValue, existingRef) {
-  const internalRef = useRef(null)
-  const elementRef = existingRef || internalRef
-
-  const setValueRef = useRef(setValue)
-  setValueRef.current = setValue
-
-  // Listen for wcc:model events from the component (child → parent)
-  useEffect(() => {
-    const el = elementRef.current
-    if (!el) return
-
-    const listener = (e) => {
-      if (e.detail && e.detail.prop === propName) {
-        setValueRef.current(e.detail.value)
-      }
-    }
-
-    el.addEventListener('wcc:model', listener)
-    return () => el.removeEventListener('wcc:model', listener)
-  }, [propName])
-
-  // Sync React state to the element's attribute (parent → child)
-  useEffect(() => {
-    const el = elementRef.current
-    if (!el) return
-    if (value != null) {
-      el.setAttribute(propName, String(value))
-    } else {
-      el.removeAttribute(propName)
-    }
-  }, [propName, value])
-
-  return elementRef
-}
-
-
 /**
  * JSX attribute name to HTML attribute name mapping.
  * React uses camelCase for some attributes that HTML uses lowercase.

package/lib/codegen.js

@@ -962,10 +962,24 @@ export function generateComponent(parseResult, options = {}) {
     lines.push('');
   }
 
+  // Static __scopedSlots array (lists slot names with reactive props)
+  const scopedSlotNames = slots.filter(s => s.name && s.slotProps.length > 0).map(s => s.name);
+  if (scopedSlotNames.length > 0) {
+    const scopedArr = scopedSlotNames.map(n => `'${n}'`).join(', ');
+    lines.push(`  static __scopedSlots = [${scopedArr}];`);
+    lines.push('');
+  }
+
   // Constructor — reactive state only (no DOM manipulation per Custom Elements spec)
   lines.push('  constructor() {');
   lines.push('    super();');
 
+  // Scoped slot storage initialization
+  if (scopedSlotNames.length > 0) {
+    lines.push('    this.__slotRenderers = {};');
+    lines.push('    this.__slotProps = {};');
+  }
+
   // Prop signal initialization (BEFORE user signals)
   for (const p of propDefs) {
     lines.push(`    this._s_${p.name} = __signal(${p.default});`);
@@ -1277,11 +1291,20 @@ export function generateComponent(parseResult, options = {}) {
       lines.push(`    if (this.__slotTpl_${s.name}) {`);
       lines.push('      __effect(() => {');
       lines.push(`        const __props = { ${propsObj} };`);
-      lines.push(`        let __html = this.__slotTpl_${s.name};`);
-      lines.push("        for (const [k, v] of Object.entries(__props)) {");
-      lines.push(`          __html = __html.replace(new RegExp('(?:\\\\{\\\\{|\\\\{%)\\\\s*' + k + '(\\\\(\\\\))?\\\\s*(?:\\\\}\\\\}|%\\\\})', 'g'), v ?? '');`);
+      // Task 3.1: Store current props in __slotProps
+      lines.push(`        this.__slotProps['${s.name}'] = __props;`);
+      // Task 3.2: Emit wcc:slot-update event
+      lines.push(`        this.dispatchEvent(new CustomEvent('wcc:slot-update', { detail: { slot: '${s.name}', props: __props }, bubbles: false }));`);
+      // Task 3.3: Check for registered renderer, skip token replacement if present
+      lines.push(`        if (this.__slotRenderers && this.__slotRenderers['${s.name}']) {`);
+      lines.push(`          this.__slotRenderers['${s.name}'](__props);`);
+      lines.push('        } else {');
+      lines.push(`          let __html = this.__slotTpl_${s.name};`);
+      lines.push("          for (const [k, v] of Object.entries(__props)) {");
+      lines.push(`            __html = __html.replace(new RegExp('(?:\\\\{\\\\{|\\\\{%)\\\\s*' + k + '(\\\\(\\\\))?\\\\s*(?:\\\\}\\\\}|%\\\\})', 'g'), v ?? '');`);
+      lines.push('          }');
+      lines.push(`          this.${s.varName}.innerHTML = __html;`);
       lines.push('        }');
-      lines.push(`        this.${s.varName}.innerHTML = __html;`);
       lines.push('      });');
       lines.push('    }');
     }
@@ -1769,6 +1792,25 @@ export function generateComponent(parseResult, options = {}) {
     lines.push('');
   }
 
+  // __scopedSlots instance getter and registerSlotRenderer (if scoped slots exist)
+  if (scopedSlotNames.length > 0) {
+    lines.push('  get __scopedSlots() { return this.constructor.__scopedSlots || []; }');
+    lines.push('');
+    lines.push('  registerSlotRenderer(slotName, callback) {');
+    lines.push('    if (!this.__slotRenderers) this.__slotRenderers = {};');
+    lines.push('    this.__slotRenderers[slotName] = callback;');
+    lines.push('    if (this.__slotProps && this.__slotProps[slotName]) {');
+    lines.push('      callback(this.__slotProps[slotName]);');
+    lines.push('    }');
+    lines.push('    return () => {');
+    lines.push('      if (this.__slotRenderers) {');
+    lines.push('        delete this.__slotRenderers[slotName];');
+    lines.push('      }');
+    lines.push('    };');
+    lines.push('  }');
+    lines.push('');
+  }
+
   // User methods (prefixed with _)
   for (const m of methods) {
     const body = transformMethodBody(m.body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, refVarNames, constantNames, modelVarMap);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sprlab/wccompiler",
-  "version": "0.9.2",
+  "version": "0.9.4",
   "description": "Zero-runtime compiler that transforms .wcc single-file components into native web components with signals-based reactivity",
   "type": "module",
   "exports": {
@@ -9,7 +9,8 @@
     "./integrations/react": "./integrations/react.js",
     "./integrations/angular": "./integrations/angular.js",
     "./adapters/vue": "./adapters/vue.js",
-    "./adapters/angular": "./adapters/angular.js"
+    "./adapters/angular": "./adapters/angular.js",
+    "./adapters/react": "./adapters/react.js"
   },
   "bin": {
     "wcc": "./bin/wcc.js"