feat: refactor stencil generator to work properly with current version (

#1547) * feat: refactor stencil generator to work properly with current version * fix: metadata.ts isAttachedToShadowDom can be undefined * chore: update snapshots * chore: update changeset * fix: issue with stencil generator chore: update changeset with angular comment * fix: moved processBinding to CODE_PROCESSOR_PLUGIN * chore: update snapshots * chore: update changeset * chore: moved code-processor-plugin * Update packages/core/src/generators/stencil/plugins/get-code-processor-plugins.ts * chore: update snapshots * chore: update snapshots --------- Co-authored-by: Sami Jaber <[email protected]> Co-authored-by: Sami Jaber <[email protected]>
BuilderIO · Oct 1, 2024 · 4171a19 · 4171a19
1 parent d59d328
commit 4171a19
Show file tree

Hide file tree

Showing 37 changed files with 2,844 additions and 1,346 deletions.
diff --git a/.changeset/early-spoons-kiss.md b/.changeset/early-spoons-kiss.md
@@ -0,0 +1,10 @@
+---
+'@builder.io/mitosis': minor
+---
+
+
+[Stencil] feat: refactor stencil generator to work with stencil v4
+
+[Stencil,Angular] fix: issue with nested components for frameworks (stencil, angular) with custom elements via [``getChildComponents``](../packages/core/src/helpers/get-child-components.ts)
+
+
diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
@@ -1633,7 +1633,7 @@ exports[`Alpine.js > jsx > Javascript Test > defaultProps 1`] = `
     </a>
   </template>
   <template x-if=\\"!link\\">
-    <button type=\\"button\\" x-bind=\\"attributes\\" x-on:click=\\"onClick($event)\\">
+    <button type=\\"button\\" x-bind=\\"attributes\\" x-on:click=\\"onClick()\\">
       <span x-html=\\"buttonText\\"></span>
     </button>
   </template>
@@ -4421,7 +4421,7 @@ exports[`Alpine.js > jsx > Typescript Test > defaultProps 1`] = `
     </a>
   </template>
   <template x-if=\\"!link\\">
-    <button type=\\"button\\" x-bind=\\"attributes\\" x-on:click=\\"onClick($event)\\">
+    <button type=\\"button\\" x-bind=\\"attributes\\" x-on:click=\\"onClick()\\">
       <span x-html=\\"buttonText\\"></span>
     </button>
   </template>

diff --git a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -1253,32 +1253,32 @@ import {
         <ng-container
           *ngFor=\\"let block of builderBlock?.children; let index = index; trackBy: trackByBlock0\\"
         >
-          <BuilderBlockComponent
+          <builder-block-component
             [block]=\\"block\\"
             [index]=\\"index\\"
-          ></BuilderBlockComponent>
+          ></builder-block-component>
         </ng-container>
       </ng-container>
       <ng-container *ngIf=\\"submissionState === 'error'\\">
-        <BuilderBlocks
+        <builder-blocks
           dataPath=\\"errorMessage\\"
           [blocks]=\\"errorMessage\\"
-        ></BuilderBlocks>
+        ></builder-blocks>
       </ng-container>
       <ng-container *ngIf=\\"submissionState === 'sending'\\">
-        <BuilderBlocks
+        <builder-blocks
           dataPath=\\"sendingMessage\\"
           [blocks]=\\"sendingMessage\\"
-        ></BuilderBlocks>
+        ></builder-blocks>
       </ng-container>
       <ng-container *ngIf=\\"submissionState === 'error' && responseData\\">
         <pre class=\\"builder-form-error-text pre\\">{{responseData | json}}</pre>
       </ng-container>
       <ng-container *ngIf=\\"submissionState === 'success'\\">
-        <BuilderBlocks
+        <builder-blocks
           dataPath=\\"successMessage\\"
           [blocks]=\\"successMessage\\"
-        ></BuilderBlocks>
+        ></builder-blocks>
       </ng-container>
     </form>
   \`,
@@ -3694,7 +3694,7 @@ const defaultProps = {
         </a>
       </ng-container>
       <ng-container *ngIf=\\"!link\\">
-        <button type=\\"button\\" (click)=\\"this.onClick.emit($event)\\" #elRef1>
+        <button type=\\"button\\" (click)=\\"this.onClick.emit()\\" #elRef1>
           {{buttonText}}
         </button>
       </ng-container>
@@ -8265,32 +8265,32 @@ import {
         <ng-container
           *ngFor=\\"let block of builderBlock?.children; let index = index; trackBy: trackByBlock0\\"
         >
-          <BuilderBlockComponent
+          <builder-block-component
             [block]=\\"block\\"
             [index]=\\"index\\"
-          ></BuilderBlockComponent>
+          ></builder-block-component>
         </ng-container>
       </ng-container>
       <ng-container *ngIf=\\"submissionState === 'error'\\">
-        <BuilderBlocks
+        <builder-blocks
           dataPath=\\"errorMessage\\"
           [blocks]=\\"errorMessage!\\"
-        ></BuilderBlocks>
+        ></builder-blocks>
       </ng-container>
       <ng-container *ngIf=\\"submissionState === 'sending'\\">
-        <BuilderBlocks
+        <builder-blocks
           dataPath=\\"sendingMessage\\"
           [blocks]=\\"sendingMessage!\\"
-        ></BuilderBlocks>
+        ></builder-blocks>
       </ng-container>
       <ng-container *ngIf=\\"submissionState === 'error' && responseData\\">
         <pre class=\\"builder-form-error-text pre\\">{{responseData | json}}</pre>
       </ng-container>
       <ng-container *ngIf=\\"submissionState === 'success'\\">
-        <BuilderBlocks
+        <builder-blocks
           dataPath=\\"successMessage\\"
           [blocks]=\\"successMessage!\\"
-        ></BuilderBlocks>
+        ></builder-blocks>
       </ng-container>
     </form>
   \`,
@@ -10902,7 +10902,7 @@ const defaultProps = {
         </a>
       </ng-container>
       <ng-container *ngIf=\\"!link\\">
-        <button type=\\"button\\" (click)=\\"this.onClick.emit($event)\\" #elRef1>
+        <button type=\\"button\\" (click)=\\"this.onClick.emit()\\" #elRef1>
           {{buttonText}}
         </button>
       </ng-container>

diff --git a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -1273,32 +1273,32 @@ import {
         <ng-container
           *ngFor=\\"let block of builderBlock?.children; let index = index; trackBy: trackByBlock0\\"
         >
-          <BuilderBlockComponent
+          <builder-block-component
             [block]=\\"block\\"
             [index]=\\"index\\"
-          ></BuilderBlockComponent>
+          ></builder-block-component>
         </ng-container>
       </ng-container>
       <ng-container *ngIf=\\"submissionState === 'error'\\">
-        <BuilderBlocks
+        <builder-blocks
           dataPath=\\"errorMessage\\"
           [blocks]=\\"errorMessage\\"
-        ></BuilderBlocks>
+        ></builder-blocks>
       </ng-container>
       <ng-container *ngIf=\\"submissionState === 'sending'\\">
-        <BuilderBlocks
+        <builder-blocks
           dataPath=\\"sendingMessage\\"
           [blocks]=\\"sendingMessage\\"
-        ></BuilderBlocks>
+        ></builder-blocks>
       </ng-container>
       <ng-container *ngIf=\\"submissionState === 'error' && responseData\\">
         <pre class=\\"builder-form-error-text pre\\">{{responseData | json}}</pre>
       </ng-container>
       <ng-container *ngIf=\\"submissionState === 'success'\\">
-        <BuilderBlocks
+        <builder-blocks
           dataPath=\\"successMessage\\"
           [blocks]=\\"successMessage\\"
-        ></BuilderBlocks>
+        ></builder-blocks>
       </ng-container>
     </form>
   \`,
@@ -3748,7 +3748,7 @@ const defaultProps = {
         </a>
       </ng-container>
       <ng-container *ngIf=\\"!link\\">
-        <button type=\\"button\\" (click)=\\"this.onClick.emit($event)\\" #elRef1>
+        <button type=\\"button\\" (click)=\\"this.onClick.emit()\\" #elRef1>
           {{buttonText}}
         </button>
       </ng-container>
@@ -8400,32 +8400,32 @@ import {
         <ng-container
           *ngFor=\\"let block of builderBlock?.children; let index = index; trackBy: trackByBlock0\\"
         >
-          <BuilderBlockComponent
+          <builder-block-component
             [block]=\\"block\\"
             [index]=\\"index\\"
-          ></BuilderBlockComponent>
+          ></builder-block-component>
         </ng-container>
       </ng-container>
       <ng-container *ngIf=\\"submissionState === 'error'\\">
-        <BuilderBlocks
+        <builder-blocks
           dataPath=\\"errorMessage\\"
           [blocks]=\\"errorMessage!\\"
-        ></BuilderBlocks>
+        ></builder-blocks>
       </ng-container>
       <ng-container *ngIf=\\"submissionState === 'sending'\\">
-        <BuilderBlocks
+        <builder-blocks
           dataPath=\\"sendingMessage\\"
           [blocks]=\\"sendingMessage!\\"
-        ></BuilderBlocks>
+        ></builder-blocks>
       </ng-container>
       <ng-container *ngIf=\\"submissionState === 'error' && responseData\\">
         <pre class=\\"builder-form-error-text pre\\">{{responseData | json}}</pre>
       </ng-container>
       <ng-container *ngIf=\\"submissionState === 'success'\\">
-        <BuilderBlocks
+        <builder-blocks
           dataPath=\\"successMessage\\"
           [blocks]=\\"successMessage!\\"
-        ></BuilderBlocks>
+        ></builder-blocks>
       </ng-container>
     </form>
   \`,
@@ -11071,7 +11071,7 @@ const defaultProps = {
         </a>
       </ng-container>
       <ng-container *ngIf=\\"!link\\">
-        <button type=\\"button\\" (click)=\\"this.onClick.emit($event)\\" #elRef1>
+        <button type=\\"button\\" (click)=\\"this.onClick.emit()\\" #elRef1>
           {{buttonText}}
         </button>
       </ng-container>

diff --git a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
@@ -1289,32 +1289,32 @@ import {
         <ng-container
           *ngFor=\\"let block of builderBlock?.children; let index = index; trackBy: trackByBlock0\\"
         >
-          <BuilderBlockComponent
+          <builder-block-component
             [block]=\\"block\\"
             [index]=\\"index\\"
-          ></BuilderBlockComponent>
+          ></builder-block-component>
         </ng-container>
       </ng-container>
       <ng-container *ngIf=\\"submissionState === 'error'\\">
-        <BuilderBlocks
+        <builder-blocks
           dataPath=\\"errorMessage\\"
           [blocks]=\\"errorMessage\\"
-        ></BuilderBlocks>
+        ></builder-blocks>
       </ng-container>
       <ng-container *ngIf=\\"submissionState === 'sending'\\">
-        <BuilderBlocks
+        <builder-blocks
           dataPath=\\"sendingMessage\\"
           [blocks]=\\"sendingMessage\\"
-        ></BuilderBlocks>
+        ></builder-blocks>
       </ng-container>
       <ng-container *ngIf=\\"submissionState === 'error' && responseData\\">
         <pre class=\\"builder-form-error-text pre\\">{{node_1_div}}</pre>
       </ng-container>
       <ng-container *ngIf=\\"submissionState === 'success'\\">
-        <BuilderBlocks
+        <builder-blocks
           dataPath=\\"successMessage\\"
           [blocks]=\\"successMessage\\"
-        ></BuilderBlocks>
+        ></builder-blocks>
       </ng-container>
     </form>
   \`,
@@ -3797,7 +3797,7 @@ const defaultProps = {
         </a>
       </ng-container>
       <ng-container *ngIf=\\"!link\\">
-        <button type=\\"button\\" (click)=\\"this.onClick.emit($event)\\" #elRef1>
+        <button type=\\"button\\" (click)=\\"this.onClick.emit()\\" #elRef1>
           {{buttonText}}
         </button>
       </ng-container>
@@ -8539,32 +8539,32 @@ import {
         <ng-container
           *ngFor=\\"let block of builderBlock?.children; let index = index; trackBy: trackByBlock0\\"
         >
-          <BuilderBlockComponent
+          <builder-block-component
             [block]=\\"block\\"
             [index]=\\"index\\"
-          ></BuilderBlockComponent>
+          ></builder-block-component>
         </ng-container>
       </ng-container>
       <ng-container *ngIf=\\"submissionState === 'error'\\">
-        <BuilderBlocks
+        <builder-blocks
           dataPath=\\"errorMessage\\"
           [blocks]=\\"errorMessage!\\"
-        ></BuilderBlocks>
+        ></builder-blocks>
       </ng-container>
       <ng-container *ngIf=\\"submissionState === 'sending'\\">
-        <BuilderBlocks
+        <builder-blocks
           dataPath=\\"sendingMessage\\"
           [blocks]=\\"sendingMessage!\\"
-        ></BuilderBlocks>
+        ></builder-blocks>
       </ng-container>
       <ng-container *ngIf=\\"submissionState === 'error' && responseData\\">
         <pre class=\\"builder-form-error-text pre\\">{{node_1_div}}</pre>
       </ng-container>
       <ng-container *ngIf=\\"submissionState === 'success'\\">
-        <BuilderBlocks
+        <builder-blocks
           dataPath=\\"successMessage\\"
           [blocks]=\\"successMessage!\\"
-        ></BuilderBlocks>
+        ></builder-blocks>
       </ng-container>
     </form>
   \`,
@@ -11250,7 +11250,7 @@ const defaultProps = {
         </a>
       </ng-container>
       <ng-container *ngIf=\\"!link\\">
-        <button type=\\"button\\" (click)=\\"this.onClick.emit($event)\\" #elRef1>
+        <button type=\\"button\\" (click)=\\"this.onClick.emit()\\" #elRef1>
           {{buttonText}}
         </button>
       </ng-container>