fix(react): improve resolving component types (#583)

* fix(react): improve resolving component types * make sure console.error is always restored * fix: update snapshot with correct test name --------- Co-authored-by: Dominique Wirz <dominique@smartive.ch>
ionic-team · Dec 26, 2024 · 971f219 · 971f219
1 parent 869eb02
commit 971f219
Show file tree

Hide file tree

Showing 27 changed files with 822 additions and 60 deletions.
diff --git a/example-project/component-library-angular/src/directives/proxies.ts b/example-project/component-library-angular/src/directives/proxies.ts
@@ -154,6 +154,48 @@ export declare interface MyInput extends Components.MyInput {
 }
 
 
+@ProxyCmp({
+})
+@Component({
+  selector: 'my-list',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: [],
+})
+export class MyList {
+  protected el: HTMLMyListElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface MyList extends Components.MyList {}
+
+
+@ProxyCmp({
+})
+@Component({
+  selector: 'my-list-item',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: [],
+})
+export class MyListItem {
+  protected el: HTMLMyListItemElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface MyListItem extends Components.MyListItem {}
+
+
 @ProxyCmp({
   inputs: ['animated', 'backdropDismiss', 'component', 'componentProps', 'cssClass', 'event', 'keyboardClose', 'mode', 'showBackdrop', 'translucent'],
   methods: ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss']
@@ -301,3 +343,46 @@ export declare interface MyRange extends Components.MyRange {
 }
 
 
+@ProxyCmp({
+})
+@Component({
+  selector: 'my-toggle',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: [],
+})
+export class MyToggle {
+  protected el: HTMLMyToggleElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface MyToggle extends Components.MyToggle {}
+
+
+@ProxyCmp({
+  inputs: ['visible']
+})
+@Component({
+  selector: 'my-toggle-content',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['visible'],
+})
+export class MyToggleContent {
+  protected el: HTMLMyToggleContentElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface MyToggleContent extends Components.MyToggleContent {}
+
+
diff --git a/example-project/component-library-react/src/components.ts b/example-project/component-library-react/src/components.ts
@@ -14,10 +14,14 @@ import { MyButton as MyButtonElement, defineCustomElement as defineMyButton } fr
 import { MyCheckbox as MyCheckboxElement, defineCustomElement as defineMyCheckbox } from "component-library/components/my-checkbox.js";
 import { MyComponent as MyComponentElement, defineCustomElement as defineMyComponent } from "component-library/components/my-component.js";
 import { MyInput as MyInputElement, defineCustomElement as defineMyInput } from "component-library/components/my-input.js";
+import { MyListItem as MyListItemElement, defineCustomElement as defineMyListItem } from "component-library/components/my-list-item.js";
+import { MyList as MyListElement, defineCustomElement as defineMyList } from "component-library/components/my-list.js";
 import { MyPopover as MyPopoverElement, defineCustomElement as defineMyPopover } from "component-library/components/my-popover.js";
 import { MyRadioGroup as MyRadioGroupElement, defineCustomElement as defineMyRadioGroup } from "component-library/components/my-radio-group.js";
 import { MyRadio as MyRadioElement, defineCustomElement as defineMyRadio } from "component-library/components/my-radio.js";
 import { MyRange as MyRangeElement, defineCustomElement as defineMyRange } from "component-library/components/my-range.js";
+import { MyToggleContent as MyToggleContentElement, defineCustomElement as defineMyToggleContent } from "component-library/components/my-toggle-content.js";
+import { MyToggle as MyToggleElement, defineCustomElement as defineMyToggle } from "component-library/components/my-toggle.js";
 import React from 'react';
 
 type MyButtonEvents = {
@@ -94,6 +98,28 @@ export const MyInput: StencilReactComponent<MyInputElement, MyInputEvents> = /*@
     defineCustomElement: defineMyInput
 });
 
+type MyListEvents = NonNullable<unknown>;
+
+export const MyList: StencilReactComponent<MyListElement, MyListEvents> = /*@__PURE__*/ createComponent<MyListElement, MyListEvents>({
+    tagName: 'my-list',
+    elementClass: MyListElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {} as MyListEvents,
+    defineCustomElement: defineMyList
+});
+
+type MyListItemEvents = NonNullable<unknown>;
+
+export const MyListItem: StencilReactComponent<MyListItemElement, MyListItemEvents> = /*@__PURE__*/ createComponent<MyListItemElement, MyListItemEvents>({
+    tagName: 'my-list-item',
+    elementClass: MyListItemElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {} as MyListItemEvents,
+    defineCustomElement: defineMyListItem
+});
+
 type MyPopoverEvents = {
     onMyPopoverDidPresent: EventName<CustomEvent<void>>,
     onMyPopoverWillPresent: EventName<CustomEvent<void>>,
@@ -163,3 +189,25 @@ export const MyRange: StencilReactComponent<MyRangeElement, MyRangeEvents> = /*@
     } as MyRangeEvents,
     defineCustomElement: defineMyRange
 });
+
+type MyToggleEvents = NonNullable<unknown>;
+
+export const MyToggle: StencilReactComponent<MyToggleElement, MyToggleEvents> = /*@__PURE__*/ createComponent<MyToggleElement, MyToggleEvents>({
+    tagName: 'my-toggle',
+    elementClass: MyToggleElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {} as MyToggleEvents,
+    defineCustomElement: defineMyToggle
+});
+
+type MyToggleContentEvents = NonNullable<unknown>;
+
+export const MyToggleContent: StencilReactComponent<MyToggleContentElement, MyToggleContentEvents> = /*@__PURE__*/ createComponent<MyToggleContentElement, MyToggleContentEvents>({
+    tagName: 'my-toggle-content',
+    elementClass: MyToggleContentElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {} as MyToggleContentEvents,
+    defineCustomElement: defineMyToggleContent
+});
diff --git a/example-project/component-library-vue/src/index.ts b/example-project/component-library-vue/src/index.ts
@@ -9,10 +9,14 @@ import { defineCustomElement as defineMyButton } from 'component-library/compone
 import { defineCustomElement as defineMyCheckbox } from 'component-library/components/my-checkbox.js';
 import { defineCustomElement as defineMyComponent } from 'component-library/components/my-component.js';
 import { defineCustomElement as defineMyInput } from 'component-library/components/my-input.js';
+import { defineCustomElement as defineMyList } from 'component-library/components/my-list.js';
+import { defineCustomElement as defineMyListItem } from 'component-library/components/my-list-item.js';
 import { defineCustomElement as defineMyPopover } from 'component-library/components/my-popover.js';
 import { defineCustomElement as defineMyRadio } from 'component-library/components/my-radio.js';
 import { defineCustomElement as defineMyRadioGroup } from 'component-library/components/my-radio-group.js';
 import { defineCustomElement as defineMyRange } from 'component-library/components/my-range.js';
+import { defineCustomElement as defineMyToggle } from 'component-library/components/my-toggle.js';
+import { defineCustomElement as defineMyToggleContent } from 'component-library/components/my-toggle-content.js';
 
 
 export const MyButton = /*@__PURE__*/ globalThis.window ? defineContainer<JSX.MyButton>('my-button', defineMyButton, [
@@ -193,6 +197,24 @@ export const MyInput = /*@__PURE__*/ globalThis.window ? defineContainer<JSX.MyI
 });
 
 
+export const MyList = /*@__PURE__*/ globalThis.window ? defineContainer<JSX.MyList>('my-list', defineMyList) : defineStencilSSRComponent({
+  tagName: 'my-list',
+  hydrateModule: import('component-library/hydrate'),
+  props: {
+
+  }
+});
+
+
+export const MyListItem = /*@__PURE__*/ globalThis.window ? defineContainer<JSX.MyListItem>('my-list-item', defineMyListItem) : defineStencilSSRComponent({
+  tagName: 'my-list-item',
+  hydrateModule: import('component-library/hydrate'),
+  props: {
+
+  }
+});
+
+
 export const MyPopover = /*@__PURE__*/ globalThis.window ? defineContainer<JSX.MyPopover>('my-popover', defineMyPopover, [
   'component',
   'componentProps',
@@ -325,3 +347,23 @@ export const MyRange = /*@__PURE__*/ globalThis.window ? defineContainer<JSX.MyR
   }
 });
 
+
+export const MyToggle = /*@__PURE__*/ globalThis.window ? defineContainer<JSX.MyToggle>('my-toggle', defineMyToggle) : defineStencilSSRComponent({
+  tagName: 'my-toggle',
+  hydrateModule: import('component-library/hydrate'),
+  props: {
+
+  }
+});
+
+
+export const MyToggleContent = /*@__PURE__*/ globalThis.window ? defineContainer<JSX.MyToggleContent>('my-toggle-content', defineMyToggleContent, [
+  'visible'
+]) : defineStencilSSRComponent({
+  tagName: 'my-toggle-content',
+  hydrateModule: import('component-library/hydrate'),
+  props: {
+    'visible': [Boolean, "visible"]
+  }
+});
+
diff --git a/example-project/component-library/src/components.d.ts b/example-project/component-library/src/components.d.ts
@@ -250,6 +250,10 @@ export namespace Components {
          */
         "value"?: string | number | null;
     }
+    interface MyList {
+    }
+    interface MyListItem {
+    }
     interface MyPopover {
         /**
           * If `true`, the popover will animate.
@@ -400,6 +404,11 @@ export namespace Components {
          */
         "value": RangeValue;
     }
+    interface MyToggle {
+    }
+    interface MyToggleContent {
+        "visible": boolean;
+    }
 }
 export interface MyButtonCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -510,6 +519,18 @@ declare global {
         prototype: HTMLMyInputElement;
         new (): HTMLMyInputElement;
     };
+    interface HTMLMyListElement extends Components.MyList, HTMLStencilElement {
+    }
+    var HTMLMyListElement: {
+        prototype: HTMLMyListElement;
+        new (): HTMLMyListElement;
+    };
+    interface HTMLMyListItemElement extends Components.MyListItem, HTMLStencilElement {
+    }
+    var HTMLMyListItemElement: {
+        prototype: HTMLMyListItemElement;
+        new (): HTMLMyListItemElement;
+    };
     interface HTMLMyPopoverElementEventMap {
         "myPopoverDidPresent": void;
         "myPopoverWillPresent": void;
@@ -587,15 +608,31 @@ declare global {
         prototype: HTMLMyRangeElement;
         new (): HTMLMyRangeElement;
     };
+    interface HTMLMyToggleElement extends Components.MyToggle, HTMLStencilElement {
+    }
+    var HTMLMyToggleElement: {
+        prototype: HTMLMyToggleElement;
+        new (): HTMLMyToggleElement;
+    };
+    interface HTMLMyToggleContentElement extends Components.MyToggleContent, HTMLStencilElement {
+    }
+    var HTMLMyToggleContentElement: {
+        prototype: HTMLMyToggleContentElement;
+        new (): HTMLMyToggleContentElement;
+    };
     interface HTMLElementTagNameMap {
         "my-button": HTMLMyButtonElement;
         "my-checkbox": HTMLMyCheckboxElement;
         "my-component": HTMLMyComponentElement;
         "my-input": HTMLMyInputElement;
+        "my-list": HTMLMyListElement;
+        "my-list-item": HTMLMyListItemElement;
         "my-popover": HTMLMyPopoverElement;
         "my-radio": HTMLMyRadioElement;
         "my-radio-group": HTMLMyRadioGroupElement;
         "my-range": HTMLMyRangeElement;
+        "my-toggle": HTMLMyToggleElement;
+        "my-toggle-content": HTMLMyToggleContentElement;
     }
 }
 declare namespace LocalJSX {
@@ -871,6 +908,10 @@ declare namespace LocalJSX {
          */
         "value"?: string | number | null;
     }
+    interface MyList {
+    }
+    interface MyListItem {
+    }
     interface MyPopover {
         /**
           * If `true`, the popover will animate.
@@ -1055,15 +1096,24 @@ declare namespace LocalJSX {
          */
         "value"?: RangeValue;
     }
+    interface MyToggle {
+    }
+    interface MyToggleContent {
+        "visible"?: boolean;
+    }
     interface IntrinsicElements {
         "my-button": MyButton;
         "my-checkbox": MyCheckbox;
         "my-component": MyComponent;
         "my-input": MyInput;
+        "my-list": MyList;
+        "my-list-item": MyListItem;
         "my-popover": MyPopover;
         "my-radio": MyRadio;
         "my-radio-group": MyRadioGroup;
         "my-range": MyRange;
+        "my-toggle": MyToggle;
+        "my-toggle-content": MyToggleContent;
     }
 }
 export { LocalJSX as JSX };
@@ -1074,10 +1124,14 @@ declare module "@stencil/core" {
             "my-checkbox": LocalJSX.MyCheckbox & JSXBase.HTMLAttributes<HTMLMyCheckboxElement>;
             "my-component": LocalJSX.MyComponent & JSXBase.HTMLAttributes<HTMLMyComponentElement>;
             "my-input": LocalJSX.MyInput & JSXBase.HTMLAttributes<HTMLMyInputElement>;
+            "my-list": LocalJSX.MyList & JSXBase.HTMLAttributes<HTMLMyListElement>;
+            "my-list-item": LocalJSX.MyListItem & JSXBase.HTMLAttributes<HTMLMyListItemElement>;
             "my-popover": LocalJSX.MyPopover & JSXBase.HTMLAttributes<HTMLMyPopoverElement>;
             "my-radio": LocalJSX.MyRadio & JSXBase.HTMLAttributes<HTMLMyRadioElement>;
             "my-radio-group": LocalJSX.MyRadioGroup & JSXBase.HTMLAttributes<HTMLMyRadioGroupElement>;
             "my-range": LocalJSX.MyRange & JSXBase.HTMLAttributes<HTMLMyRangeElement>;
+            "my-toggle": LocalJSX.MyToggle & JSXBase.HTMLAttributes<HTMLMyToggleElement>;
+            "my-toggle-content": LocalJSX.MyToggleContent & JSXBase.HTMLAttributes<HTMLMyToggleContentElement>;
         }
     }
 }
diff --git a/example-project/component-library/src/components/my-list-item/my-list-item.tsx b/example-project/component-library/src/components/my-list-item/my-list-item.tsx
@@ -0,0 +1,15 @@
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'my-list-item',
+  shadow: true,
+})
+export class MyListItem {
+  render() {
+    return (
+      <li>
+        <slot></slot>
+      </li>
+    );
+  }
+}
diff --git a/example-project/component-library/src/components/my-list-item/readme.md b/example-project/component-library/src/components/my-list-item/readme.md
@@ -0,0 +1,10 @@
+# my-list-item
+
+
+
+<!-- Auto Generated Below -->
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/example-project/component-library/src/components/my-list/my-list.tsx b/example-project/component-library/src/components/my-list/my-list.tsx
@@ -0,0 +1,15 @@
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'my-list',
+  shadow: true,
+})
+export class MyList {
+  render() {
+    return (
+      <ul>
+        <slot></slot>
+      </ul>
+    );
+  }
+}