feat(react): Next.js Support

.gitignore

@@ -8,3 +8,4 @@ build/
 .npmrc
 *.tgz
 *.lerna_backup
+packages/example-project/component-library/hydrate

packages/example-project/component-library-react/src/components.ts

@@ -1,11 +1,13 @@
+'use client';
+
 /**
  * This file was automatically generated by the Stencil React Output Target.
  * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
  */
 
 /* eslint-disable */
 
-import type { EventName } from '@stencil/react-output-target/runtime';
+import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
 import { createComponent } from '@stencil/react-output-target/runtime';
 import {
   type CheckboxChangeEventDetail,
@@ -58,7 +60,10 @@ type MyButtonEvents = {
   onMyBlur: EventName<CustomEvent<void>>;
 };
 
-export const MyButton = /*@__PURE__*/ createComponent<MyButtonElement, MyButtonEvents>({
+export const MyButton: StencilReactComponent<MyButtonElement, MyButtonEvents> = /*@__PURE__*/ createComponent<
+  MyButtonElement,
+  MyButtonEvents
+>({
   tagName: 'my-button',
   elementClass: MyButtonElement,
   react: React,
@@ -75,7 +80,10 @@ type MyCheckboxEvents = {
   onMyBlur: EventName<CustomEvent<void>>;
 };
 
-export const MyCheckbox = /*@__PURE__*/ createComponent<MyCheckboxElement, MyCheckboxEvents>({
+export const MyCheckbox: StencilReactComponent<MyCheckboxElement, MyCheckboxEvents> = /*@__PURE__*/ createComponent<
+  MyCheckboxElement,
+  MyCheckboxEvents
+>({
   tagName: 'my-checkbox',
   elementClass: MyCheckboxElement,
   react: React,
@@ -89,7 +97,10 @@ export const MyCheckbox = /*@__PURE__*/ createComponent<MyCheckboxElement, MyChe
 
 type MyComponentEvents = { onMyCustomEvent: EventName<CustomEvent<number>> };
 
-export const MyComponent = /*@__PURE__*/ createComponent<MyComponentElement, MyComponentEvents>({
+export const MyComponent: StencilReactComponent<MyComponentElement, MyComponentEvents> = /*@__PURE__*/ createComponent<
+  MyComponentElement,
+  MyComponentEvents
+>({
   tagName: 'my-component',
   elementClass: MyComponentElement,
   react: React,
@@ -104,7 +115,10 @@ type MyInputEvents = {
   onMyFocus: EventName<CustomEvent<void>>;
 };
 
-export const MyInput = /*@__PURE__*/ createComponent<MyInputElement, MyInputEvents>({
+export const MyInput: StencilReactComponent<MyInputElement, MyInputEvents> = /*@__PURE__*/ createComponent<
+  MyInputElement,
+  MyInputEvents
+>({
   tagName: 'my-input',
   elementClass: MyInputElement,
   react: React,
@@ -120,11 +134,14 @@ export const MyInput = /*@__PURE__*/ createComponent<MyInputElement, MyInputEven
 type MyPopoverEvents = {
   onMyPopoverDidPresent: EventName<CustomEvent<void>>;
   onMyPopoverWillPresent: EventName<CustomEvent<void>>;
-  onMyPopoverWillDismiss: EventName<MyPopoverCustomEvent<OverlayEventDetail<any>>>;
-  onMyPopoverDidDismiss: EventName<MyPopoverCustomEvent<OverlayEventDetail<any>>>;
+  onMyPopoverWillDismiss: EventName<MyPopoverCustomEvent<OverlayEventDetail>>;
+  onMyPopoverDidDismiss: EventName<MyPopoverCustomEvent<OverlayEventDetail>>;
 };
 
-export const MyPopover = /*@__PURE__*/ createComponent<MyPopoverElement, MyPopoverEvents>({
+export const MyPopover: StencilReactComponent<MyPopoverElement, MyPopoverEvents> = /*@__PURE__*/ createComponent<
+  MyPopoverElement,
+  MyPopoverEvents
+>({
   tagName: 'my-popover',
   elementClass: MyPopoverElement,
   react: React,
@@ -143,7 +160,10 @@ type MyRadioEvents = {
   onMySelect: EventName<CustomEvent<void>>;
 };
 
-export const MyRadio = /*@__PURE__*/ createComponent<MyRadioElement, MyRadioEvents>({
+export const MyRadio: StencilReactComponent<MyRadioElement, MyRadioEvents> = /*@__PURE__*/ createComponent<
+  MyRadioElement,
+  MyRadioEvents
+>({
   tagName: 'my-radio',
   elementClass: MyRadioElement,
   react: React,
@@ -157,21 +177,25 @@ export const MyRadio = /*@__PURE__*/ createComponent<MyRadioElement, MyRadioEven
 
 type MyRadioGroupEvents = { onMyChange: EventName<MyRadioGroupCustomEvent<RadioGroupChangeEventDetail>> };
 
-export const MyRadioGroup = /*@__PURE__*/ createComponent<MyRadioGroupElement, MyRadioGroupEvents>({
-  tagName: 'my-radio-group',
-  elementClass: MyRadioGroupElement,
-  react: React,
-  events: { onMyChange: 'myChange' } as MyRadioGroupEvents,
-  defineCustomElement: defineMyRadioGroup,
-});
+export const MyRadioGroup: StencilReactComponent<MyRadioGroupElement, MyRadioGroupEvents> =
+  /*@__PURE__*/ createComponent<MyRadioGroupElement, MyRadioGroupEvents>({
+    tagName: 'my-radio-group',
+    elementClass: MyRadioGroupElement,
+    react: React,
+    events: { onMyChange: 'myChange' } as MyRadioGroupEvents,
+    defineCustomElement: defineMyRadioGroup,
+  });
 
 type MyRangeEvents = {
   onMyChange: EventName<MyRangeCustomEvent<RangeChangeEventDetail>>;
   onMyFocus: EventName<CustomEvent<void>>;
   onMyBlur: EventName<CustomEvent<void>>;
 };
 
-export const MyRange = /*@__PURE__*/ createComponent<MyRangeElement, MyRangeEvents>({
+export const MyRange: StencilReactComponent<MyRangeElement, MyRangeEvents> = /*@__PURE__*/ createComponent<
+  MyRangeElement,
+  MyRangeEvents
+>({
   tagName: 'my-range',
   elementClass: MyRangeElement,
   react: React,

packages/example-project/component-library-vue/src/vue-component-lib/utils.ts

@@ -115,6 +115,16 @@ export const defineContainer = <Props, VModelType = string | number | boolean>(
       if (routerLink === EMPTY_PROP) return;
 
       if (navManager !== undefined) {
+        /**
+         * This prevents the browser from
+         * performing a page reload when pressing
+         * an Ionic component with routerLink.
+         * The page reload interferes with routing
+         * and causes ion-back-button to disappear
+         * since the local history is wiped on reload.
+         */
+        ev.preventDefault();
+
         let navigationPayload: any = { event: ev };
         for (const key in props) {
           const value = props[key];
@@ -185,6 +195,17 @@ export const defineContainer = <Props, VModelType = string | number | boolean>(
         }
       }
 
+      // If router link is defined, add href to props
+      // in order to properly render an anchor tag inside
+      // of components that should become activatable and
+      // focusable with router link.
+      if (props[ROUTER_LINK_VALUE] !== EMPTY_PROP) {
+        propsToAdd = {
+          ...propsToAdd,
+          href: props[ROUTER_LINK_VALUE],
+        };
+      }
+
       /**
        * vModelDirective is only needed on components that support v-model.
        * As a result, we conditionally call withDirectives with v-model components.

packages/example-project/component-library-vue/tsconfig.json

@@ -18,7 +18,8 @@
     "sourceMap": true,
     "jsx": "react",
     "target": "esnext",
-    "types": ["jest"]
+    "types": ["jest"],
+    "skipLibCheck": true
   },
   "include": ["src/**/*.ts", "src/**/*.tsx"],
   "exclude": ["./__tests__/**", "node_modules", "setupTests.ts"],

packages/example-project/component-library/package.json

@@ -8,7 +8,7 @@
     "type": "git",
     "url": "https://github.com/ionic-team/stencil-ds-output-targets.git"
   },
-  "main": "dist/index.js",
+  "main": "dist/index.cjs.js",
   "module": "dist/index.mjs",
   "es2015": "dist/esm/index.mjs",
   "es2017": "dist/esm/index.mjs",
@@ -31,7 +31,7 @@
   },
   "devDependencies": {
     "@stencil/angular-output-target": "workspace:*",
-    "@stencil/core": "^4.16.0",
+    "@stencil/core": "^4.21.0",
     "@stencil/react-output-target": "workspace:*",
     "@stencil/vue-output-target": "workspace:*",
     "@types/puppeteer": "2.0.1",

packages/example-project/component-library/src/components/my-component/my-component.css

@@ -1,3 +1,4 @@
 :host {
   display: block;
+  color: green;
 }

packages/example-project/component-library/src/components/my-input/readme.md

@@ -11,7 +11,7 @@
 | ---------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
 | `accept`         | `accept`         | If the value of the type attribute is `"file"`, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers.                                                                                                                                                                                                                                                                                                                                                          | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `undefined`    |
 | `autocapitalize` | `autocapitalize` | Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `'off'`        |
-| `autocomplete`   | `autocomplete`   | Indicates whether the value of the control can be automatically completed by the browser.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `"name" \| "on" \| "off" \| "honorific-prefix" \| "given-name" \| "additional-name" \| "family-name" \| "honorific-suffix" \| "nickname" \| "email" \| "username" \| "new-password" \| "current-password" \| "one-time-code" \| "organization-title" \| "organization" \| "street-address" \| "address-line1" \| "address-line2" \| "address-line3" \| "address-level4" \| "address-level3" \| "address-level2" \| "address-level1" \| "country" \| "country-name" \| "postal-code" \| "cc-name" \| "cc-given-name" \| "cc-additional-name" \| "cc-family-name" \| "cc-number" \| "cc-exp" \| "cc-exp-month" \| "cc-exp-year" \| "cc-csc" \| "cc-type" \| "transaction-currency" \| "transaction-amount" \| "language" \| "bday" \| "bday-day" \| "bday-month" \| "bday-year" \| "sex" \| "tel" \| "tel-country-code" \| "tel-national" \| "tel-area-code" \| "tel-local" \| "tel-extension" \| "impp" \| "url" \| "photo"` | `'off'`        |
+| `autocomplete`   | `autocomplete`   | Indicates whether the value of the control can be automatically completed by the browser.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `"off" \| "on" \| "name" \| "honorific-prefix" \| "given-name" \| "additional-name" \| "family-name" \| "honorific-suffix" \| "nickname" \| "email" \| "username" \| "new-password" \| "current-password" \| "one-time-code" \| "organization-title" \| "organization" \| "street-address" \| "address-line1" \| "address-line2" \| "address-line3" \| "address-level4" \| "address-level3" \| "address-level2" \| "address-level1" \| "country" \| "country-name" \| "postal-code" \| "cc-name" \| "cc-given-name" \| "cc-additional-name" \| "cc-family-name" \| "cc-number" \| "cc-exp" \| "cc-exp-month" \| "cc-exp-year" \| "cc-csc" \| "cc-type" \| "transaction-currency" \| "transaction-amount" \| "language" \| "bday" \| "bday-day" \| "bday-month" \| "bday-year" \| "sex" \| "tel" \| "tel-country-code" \| "tel-national" \| "tel-area-code" \| "tel-local" \| "tel-extension" \| "impp" \| "url" \| "photo"` | `'off'`        |
 | `autocorrect`    | `autocorrect`    | Whether auto correction should be enabled when the user is entering/editing the text value.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `"off" \| "on"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'off'`        |
 | `autofocus`      | `autofocus`      | This Boolean attribute lets you specify that a form control should have input focus when the page loads.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `false`        |
 | `clearInput`     | `clear-input`    | If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `false`        |

packages/example-project/component-library/stencil.config.ts

@@ -61,19 +61,28 @@ export const config: Config = {
     reactOutputTarget({
       outDir: '../component-library-react/src',
     }),
+    reactOutputTarget({
+      outDir: '../next-app/src/app',
+      hydrateModule: 'component-library/hydrate'
+    }),
     vueOutputTarget({
       componentCorePackage: 'component-library',
       proxiesFile: '../component-library-vue/src/proxies.ts',
       componentModels: vueComponentModels,
     }),
     {
       type: 'dist-custom-elements',
+      externalRuntime: false,
       dir: 'components'
     },
     {
       type: 'dist',
       esmLoaderPath: '../loader',
     },
+    {
+      type: 'dist-hydrate-script',
+      dir: './hydrate',
+    },
     {
       type: 'docs-readme',
     },