@sprlab/wccompiler 0.9.5 → 0.9.6

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

@@ -66,7 +66,7 @@ export declare class WccSlotsDirective implements AfterContentInit, OnDestroy {
     private classifyAndInitSlots;
     /** Named Slot: immediate static rendering */
     private initNamedSlot;
-    /** Scoped Slot: async registration + reactive rendering */
+    /** Scoped Slot: registration + reactive rendering */
     private initScopedSlot;
     /**
      * Builds the Angular context for createEmbeddedView.

package/adapters/angular.js

@@ -5,38 +5,50 @@
  *
  * ANGULAR INTEGRATION:
  *
- * 1. For basic two-way binding with [(prop)]:
- *    No adapter needed! WCC components emit propNameChange directly.
- *    Just add CUSTOM_ELEMENTS_SCHEMA to your component.
- *
- * 2. For slots (named + scoped):
- *    Copy `adapters/angular.ts` to your Angular project's src/ directory.
- *    This is the standard pattern for Web Component libraries in Angular
- *    (same as Shoelace, Lit, FAST, etc.) because Angular AOT requires
- *    directives to be compiled within the project.
- *
- *    Steps:
- *    a) Copy adapters/angular.ts → src/directives/wcc-slots.directive.ts
- *    b) Import in your component:
- *       import { WccSlotsDirective, WccSlotDef } from './directives/wcc-slots.directive';
- *    c) Add to imports: @Component({ imports: [WccSlotsDirective, WccSlotDef] })
- *    d) Add wccSlots attribute to WCC elements that use slots:
- *       <wcc-card wccSlots>
- *         <ng-template slot="header">...</ng-template>
- *       </wcc-card>
- *
- * WHY can't we distribute as a compiled package?
- *    Angular AOT requires decorator metadata that can only be generated by
- *    ng-packagr or the Angular compiler. Standard tsc output doesn't include
- *    the Ivy metadata Angular needs. A future version may provide a separate
- *    @sprlab/wccompiler-angular package compiled with ng-packagr.
- *
- * SELECTOR:
- *    The directive uses [wccSlots] attribute selector (not a dynamic exclusion
- *    selector) because Angular AOT cannot evaluate computed expressions in
- *    decorator metadata.
+ * 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.
  */
-
-// This file is intentionally a documentation-only .js file.
-// The actual directive source is in adapters/angular.ts (TypeScript).
-// Users copy it to their Angular project for AOT compilation.

package/adapters/angular.ts

@@ -123,9 +123,19 @@ 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) {
       if (!slotDef.slotName) continue;
@@ -143,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',
@@ -161,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',
@@ -245,23 +264,51 @@ export class WccSlotsDirective implements AfterContentInit, OnDestroy {
     state.context = context;
 
     if (state.viewRef) {
+      // 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 {
       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);
@@ -286,8 +333,14 @@ 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();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sprlab/wccompiler",
-  "version": "0.9.5",
+  "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": {