@sprlab/wccompiler 0.9.4 → 0.9.6

package/adapters/angular-compiled/angular.d.ts

@@ -0,0 +1,86 @@
+/**
+ * Angular adapter for WCC Scoped Slots.
+ *
+ * Exports:
+ *   - WccSlotDef: Auxiliary directive for ng-template[slot]
+ *   - WccSlotsDirective: Main directive activated via [wccSlots] attribute
+ *   - 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 wccSlots>
+ *         <ng-template slot="header"><strong>Header</strong></ng-template>
+ *         <ng-template slot="stats" let-likes>{{ likes }} likes</ng-template>
+ *       </wcc-card>
+ *     `
+ *   })
+ *
+ * Note: Add the `wccSlots` attribute to any WCC custom element that uses slots.
+ * This is required because Angular AOT cannot evaluate dynamic selectors.
+ *
+ * @module @sprlab/wccompiler/adapters/angular
+ */
+import { QueryList, AfterContentInit, OnDestroy } from '@angular/core';
+/** Context object passed to createEmbeddedView for scoped slots */
+export interface SlotContext {
+    $implicit: any;
+    [key: string]: any;
+}
+/**
+ * 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>
+ */
+export declare class WccSlotDef {
+    readonly templateRef: any;
+    readonly slotName: string;
+    constructor(name: string | null);
+}
+/**
+ * Main directive that activates on elements with the [wccSlots] attribute.
+ * Classifies ng-template[slot] children as named or scoped slots and manages
+ * their lifecycle.
+ *
+ * Uses a simple attribute selector `[wccSlots]` instead of a dynamic exclusion
+ * selector, because Angular AOT cannot evaluate computed selector expressions.
+ */
+export declare class WccSlotsDirective implements AfterContentInit, OnDestroy {
+    slotDefs: QueryList<WccSlotDef>;
+    private el;
+    private vcr;
+    private cdr;
+    private slots;
+    private eventCleanups;
+    private destroyed;
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
+    /** Classifies slots using __scopedSlots from the host element and initializes them */
+    private classifyAndInitSlots;
+    /** Named Slot: immediate static rendering */
+    private initNamedSlot;
+    /** Scoped Slot: registration + reactive rendering */
+    private initScopedSlot;
+    /**
+     * 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;
+    /** Creates or updates the EmbeddedView of a scoped slot */
+    private renderSlot;
+    /** Inserts view root nodes into the custom element's DOM via a wrapper div */
+    private insertView;
+    /** Full cleanup on destroy */
+    private cleanup;
+}

package/adapters/angular.js

@@ -1,146 +1,54 @@
 /**
- * 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.
- *
- * This file is kept for:
- * 1. Documentation of the Angular integration approach
- * 2. The ControlValueAccessor guide for ngModel support
- *
- * Setup (Angular):
- *   // No adapter import needed for [(prop)]! Just use CUSTOM_ELEMENTS_SCHEMA:
- *   import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
- *   @Component({ schemas: [CUSTOM_ELEMENTS_SCHEMA] })
- *
- * Usage:
- *   <wcc-input [(value)]="text"></wcc-input>
- *   <wcc-counter [(count)]="myCount"></wcc-counter>
- *
- * How it works:
- *   Angular's [(prop)] expands to [prop]="value" (propChange)="value = $event.detail"
- *   WCC _modelSet emits propNameChange CustomEvent with detail=newValue
- *   Angular picks it up automatically — no adapter needed.
+ * Angular adapter for WCC custom elements.
  *
  * @module @sprlab/wccompiler/adapters/angular
+ *
+ * ANGULAR INTEGRATION:
+ *
+ * The adapter ships as TypeScript source (adapters/angular.ts) because Angular
+ * AOT requires directives to be compiled within the consuming project's scope.
+ * The package.json "exports" map points directly to the .ts file, which Angular's
+ * esbuild-based `application` builder (Angular 17+) handles natively.
+ *
+ * SETUP:
+ *
+ * 1. Install the package:
+ *    npm install @sprlab/wccompiler
+ *
+ * 2. Add a tsconfig path mapping (tsconfig.json):
+ *    {
+ *      "compilerOptions": {
+ *        "paths": {
+ *          "@sprlab/wccompiler/adapters/angular": ["node_modules/@sprlab/wccompiler/adapters/angular.ts"]
+ *        }
+ *      }
+ *    }
+ *
+ * 3. Import in your component:
+ *    import { WccSlotsDirective, WccSlotDef } from '@sprlab/wccompiler/adapters/angular';
+ *
+ *    @Component({
+ *      imports: [WccSlotsDirective, WccSlotDef],
+ *      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+ *      template: `
+ *        <wcc-card wccSlots>
+ *          <ng-template slot="header"><strong>Title</strong></ng-template>
+ *          <ng-template slot="stats" let-likes>⭐ {{likes}} stars!</ng-template>
+ *        </wcc-card>
+ *      `
+ *    })
+ *
+ * HOW IT WORKS:
+ *
+ * - WccSlotDef: Captures ng-template[slot] elements and their slot names
+ * - WccSlotsDirective: Activated via [wccSlots] attribute on the host element
+ *   - Classifies slots as "named" or "scoped" using the component's __scopedSlots metadata
+ *   - Named slots: rendered immediately into the component's [data-slot] container
+ *   - Scoped slots: registered via registerSlotRenderer() for reactive updates
+ *
+ * REQUIREMENTS:
+ * - Angular 17+ with the `application` builder (esbuild-based)
+ * - The [wccSlots] attribute must be added to WCC elements that use slots
+ *
+ * NOTE: This .js file is documentation only. The actual source is adapters/angular.ts.
  */
-
-// ── ControlValueAccessor for ngModel/ReactiveForms ──────────────────
-// Angular's ngModel requires a ControlValueAccessor to bridge form controls.
-// Copy this into your Angular project as a .ts file:
-//
-// ```ts
-// import { Directive, ElementRef, forwardRef, HostListener } from '@angular/core';
-// import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-//
-// @Directive({
-//   selector: '[wccModel]',
-//   providers: [{
-//     provide: NG_VALUE_ACCESSOR,
-//     useExisting: forwardRef(() => WccValueAccessor),
-//     multi: true
-//   }]
-// })
-// export class WccValueAccessor implements ControlValueAccessor {
-//   private onChange: (value: any) => void = () => {};
-//   private onTouched: () => void = () => {};
-//
-//   constructor(private el: ElementRef<HTMLElement>) {}
-//
-//   writeValue(value: any): void {
-//     if (value != null) {
-//       this.el.nativeElement.setAttribute('value', String(value));
-//     } else {
-//       this.el.nativeElement.removeAttribute('value');
-//     }
-//   }
-//
-//   registerOnChange(fn: (value: any) => void): void {
-//     this.onChange = fn;
-//   }
-//
-//   registerOnTouched(fn: () => void): void {
-//     this.onTouched = fn;
-//   }
-//
-//   @HostListener('wcc:model', ['$event'])
-//   onModelChange(event: CustomEvent): void {
-//     if (event.detail && event.detail.prop === 'value') {
-//       this.onChange(event.detail.value);
-//     }
-//   }
-//
-//   @HostListener('blur')
-//   onBlur(): void {
-//     this.onTouched();
-//   }
-// }
-// ```

package/adapters/angular.ts

@@ -3,7 +3,7 @@
  *
  * Exports:
  *   - WccSlotDef: Auxiliary directive for ng-template[slot]
- *   - WccSlotsDirective: Main directive that auto-activates on custom elements
+ *   - WccSlotsDirective: Main directive activated via [wccSlots] attribute
  *   - SlotContext: Interface for template context typing
  *
  * Usage:
@@ -13,13 +13,16 @@
  *     imports: [WccSlotsDirective, WccSlotDef],
  *     schemas: [CUSTOM_ELEMENTS_SCHEMA],
  *     template: `
- *       <wcc-card>
+ *       <wcc-card wccSlots>
  *         <ng-template slot="header"><strong>Header</strong></ng-template>
  *         <ng-template slot="stats" let-likes>{{ likes }} likes</ng-template>
  *       </wcc-card>
  *     `
  *   })
  *
+ * Note: Add the `wccSlots` attribute to any WCC custom element that uses slots.
+ * This is required because Angular AOT cannot evaluate dynamic selectors.
+ *
  * @module @sprlab/wccompiler/adapters/angular
  */
 
@@ -83,21 +86,15 @@ export class WccSlotDef {
 // ─── 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).
+ * Main directive that activates on elements with the [wccSlots] attribute.
  * Classifies ng-template[slot] children as named or scoped slots and manages
  * their lifecycle.
+ *
+ * Uses a simple attribute selector `[wccSlots]` instead of a dynamic exclusion
+ * selector, because Angular AOT cannot evaluate computed selector expressions.
  */
 @Directive({
-  selector: EXCLUSION_SELECTOR,
+  selector: '[wccSlots]',
   standalone: true,
 })
 export class WccSlotsDirective implements AfterContentInit, OnDestroy {
@@ -126,12 +123,21 @@ export class WccSlotsDirective implements AfterContentInit, OnDestroy {
   // ─── 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 || [];
+  private async classifyAndInitSlots(): Promise<void> {
+    const hostEl = this.el.nativeElement;
+    const tagName = hostEl.tagName.toLowerCase();
+
+    // Wait for the custom element to be defined (ensures the class is upgraded)
+    await customElements.whenDefined(tagName);
+    if (this.destroyed) return;
+
+    const element = hostEl as any;
+    // Read from instance getter or static property
+    const scopedNames: string[] = element.__scopedSlots
+      || (element.constructor && element.constructor.__scopedSlots)
+      || [];
 
     for (const slotDef of this.slotDefs) {
-      // Ignore templates with empty slot name
       if (!slotDef.slotName) continue;
 
       if (scopedNames.includes(slotDef.slotName)) {
@@ -147,15 +153,27 @@ export class WccSlotsDirective implements AfterContentInit, OnDestroy {
   /** 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';
+
+    // Strategy 1: Find [data-slot] container inside the component's internal DOM
+    const dataSlotEl = hostEl.querySelector(`[data-slot="${slotDef.slotName}"]`);
+    let wrapper: HTMLElement;
+
+    if (dataSlotEl) {
+      // Use the data-slot element directly — clear fallback content and insert rendered nodes
+      wrapper = dataSlotEl as HTMLElement;
+      wrapper.innerHTML = '';
+    } else {
+      // Strategy 2: Fallback for Shadow DOM / native <slot> elements
+      wrapper = document.createElement('div');
+      wrapper.setAttribute('slot', slotDef.slotName);
+      wrapper.style.display = 'contents';
+      hostEl.appendChild(wrapper);
+    }
 
     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',
@@ -165,18 +183,15 @@ export class WccSlotsDirective implements AfterContentInit, OnDestroy {
       wrapperEl: wrapper,
       context: null,
     });
+
+    this.cdr.detectChanges();
   }
 
   // ─── Scoped Slot ────────────────────────────────────────────────────────
 
-  /** Scoped Slot: async registration + reactive rendering */
-  private async initScopedSlot(slotDef: WccSlotDef): Promise<void> {
+  /** Scoped Slot: registration + reactive rendering */
+  private initScopedSlot(slotDef: WccSlotDef): 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',
@@ -237,7 +252,6 @@ export class WccSlotsDirective implements AfterContentInit, OnDestroy {
     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();
@@ -250,25 +264,51 @@ export class WccSlotsDirective implements AfterContentInit, OnDestroy {
     state.context = context;
 
     if (state.viewRef) {
-      // Update existing context
+      // Update existing view context
       Object.assign(state.viewRef.context, context);
       state.viewRef.markForCheck();
+      // Re-insert nodes to reflect updated content (Angular doesn't auto-update DOM for detached views)
+      if (state.wrapperEl) {
+        state.wrapperEl.innerHTML = '';
+        for (const node of state.viewRef.rootNodes) {
+          state.wrapperEl.appendChild(node);
+        }
+      }
     } else {
-      // Create new view
       state.viewRef = this.vcr.createEmbeddedView(state.slotDef.templateRef, context);
       this.insertView(slotName, state);
     }
 
-    this.cdr.markForCheck();
+    this.cdr.detectChanges();
   }
 
   // ─── DOM Insertion ──────────────────────────────────────────────────────
 
-  /** Inserts view root nodes into the custom element's DOM via a wrapper div */
+  /**
+   * Inserts view root nodes into the custom element's DOM.
+   *
+   * Strategy:
+   * 1. Look for a [data-slot="slotName"] element inside the component (non-Shadow DOM)
+   *    → clear its content and insert the rendered nodes there
+   * 2. Fallback: append a wrapper <div slot="slotName"> to the host (Shadow DOM / native slots)
+   */
   private insertView(slotName: string, state: SlotState): void {
     if (!state.viewRef) return;
     const hostEl = this.el.nativeElement;
 
+    // Strategy 1: Find [data-slot] container inside the component's internal DOM
+    const dataSlotEl = hostEl.querySelector(`[data-slot="${slotName}"]`);
+    if (dataSlotEl) {
+      // Use the data-slot element as the wrapper (no extra div needed)
+      state.wrapperEl = dataSlotEl as HTMLElement;
+      state.wrapperEl.innerHTML = '';
+      for (const node of state.viewRef.rootNodes) {
+        state.wrapperEl.appendChild(node);
+      }
+      return;
+    }
+
+    // Strategy 2: Fallback for Shadow DOM / native <slot> elements
     if (!state.wrapperEl) {
       state.wrapperEl = document.createElement('div');
       state.wrapperEl.setAttribute('slot', slotName);
@@ -276,7 +316,6 @@ export class WccSlotsDirective implements AfterContentInit, OnDestroy {
       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);
@@ -287,7 +326,6 @@ export class WccSlotsDirective implements AfterContentInit, OnDestroy {
 
   /** 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();
@@ -295,13 +333,18 @@ export class WccSlotsDirective implements AfterContentInit, OnDestroy {
       if (state.cleanup) {
         state.cleanup();
       }
-      if (state.wrapperEl && state.wrapperEl.parentNode) {
-        state.wrapperEl.parentNode.removeChild(state.wrapperEl);
+      if (state.wrapperEl) {
+        // If the wrapper is a [data-slot] element (part of the component's internal DOM),
+        // just clear its content rather than removing it from the DOM
+        if (state.wrapperEl.hasAttribute('data-slot')) {
+          state.wrapperEl.innerHTML = '';
+        } else if (state.wrapperEl.parentNode) {
+          state.wrapperEl.parentNode.removeChild(state.wrapperEl);
+        }
       }
     }
     this.slots.clear();
 
-    // Remove event listeners
     for (const fn of this.eventCleanups) {
       fn();
     }

package/lib/codegen.js

@@ -1288,17 +1288,19 @@ export function generateComponent(parseResult, options = {}) {
         const ref = slotPropRef(sp.source, signalNames, computedNames, propNames);
         return `${sp.prop}: ${ref}`;
       }).join(', ');
-      lines.push(`    if (this.__slotTpl_${s.name}) {`);
+      // Scoped slot effect: always compute props and notify renderers
+      // The effect runs regardless of whether a template was provided (Angular uses registerSlotRenderer)
       lines.push('      __effect(() => {');
       lines.push(`        const __props = { ${propsObj} };`);
-      // Task 3.1: Store current props in __slotProps
+      // Store current props for late-registering renderers
       lines.push(`        this.__slotProps['${s.name}'] = __props;`);
-      // Task 3.2: Emit wcc:slot-update event
+      // 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
+      // Check for registered renderer (Angular directive)
       lines.push(`        if (this.__slotRenderers && this.__slotRenderers['${s.name}']) {`);
       lines.push(`          this.__slotRenderers['${s.name}'](__props);`);
-      lines.push('        } else {');
+      lines.push(`        } else if (this.__slotTpl_${s.name}) {`);
+      // Fallback: template-based token replacement (WCC-to-WCC, Vue, React)
       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 ?? '');`);
@@ -1306,7 +1308,6 @@ export function generateComponent(parseResult, options = {}) {
       lines.push(`          this.${s.varName}.innerHTML = __html;`);
       lines.push('        }');
       lines.push('      });');
-      lines.push('    }');
     }
   }
 

package/package.json

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