feat(react): migrate to new React Output Target with Next.js support

core/package.json

@@ -48,7 +48,7 @@
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/angular-output-target": "^0.8.4",
-    "@stencil/react-output-target": "^0.5.3",
+    "@stencil/react-output-target": "0.0.1-dev.11721063914.1cb11145",
     "@stencil/sass": "^3.0.9",
     "@stencil/vue-output-target": "^0.8.7",
     "@types/jest": "^29.5.6",

core/stencil.config.ts

@@ -125,11 +125,8 @@ export const config: Config = {
   ],
   outputTargets: [
     reactOutputTarget({
-      componentCorePackage,
-      includeImportCustomElements: true,
-      includePolyfills: false,
-      includeDefineCustomElements: false,
-      proxiesFile: '../packages/react/src/components/proxies.ts',
+      outDir: '../packages/react/src/components',
+      hydrateModule: '@ionic/core/hydrate',
       excludeComponents: [
         // Routing
         'ion-router',

package-lock.json

@@ -9288,7 +9288,8 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@octokit/plugin-request-log/-/plugin-request-log-1.0.4.tgz",
       "integrity": "sha512-mLUsMkgP7K/cnFEw07kWqXGF5LKrOkD+lhCrKvPHXWDywAwuDUeDwWBpc69XK3pNX0uKiVt8g5z96PJ6z9xCFA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@octokit/plugin-rest-endpoint-methods": {
       "version": "6.6.2",

packages/react/package.json

@@ -40,6 +40,7 @@
   ],
   "dependencies": {
     "@ionic/core": "^8.2.5",
+    "@stencil/react-output-target": "0.0.1-dev.11721063914.1cb11145",
     "ionicons": "^7.0.0",
     "tslib": "*"
   },

packages/react/src/components/index.ts

@@ -89,7 +89,7 @@ export {
   TransitionOptions,
 } from '@ionic/core/components';
 
-export * from './proxies';
+export * from './components';
 export * from './routing-proxies';
 
 // createControllerComponent

packages/react/tsconfig.json

@@ -7,10 +7,10 @@
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "esModuleInterop": true,
-    "lib": ["dom", "es2015"],
+    "lib": ["dom", "es2020"],
     "importHelpers": true,
-    "module": "es2015",
-    "moduleResolution": "node",
+    "module": "Node16",
+    "moduleResolution": "node16",
     "noImplicitAny": true,
     "noImplicitReturns": true,
     "noUnusedLocals": true,

packages/vue/src/vue-component-lib/utils.ts

@@ -91,8 +91,17 @@ export const defineContainer = <Props, VModelType = string | number | boolean>(
         const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent];
         eventsNames.forEach((eventName: string) => {
           el.addEventListener(eventName.toLowerCase(), (e: Event) => {
-            modelPropValue = (e?.target as any)[modelProp];
-            emit(UPDATE_VALUE_EVENT, modelPropValue);
+            /**
+             * Only update the v-model binding if the event's target is the element we are
+             * listening on. For example, Component A could emit ionChange, but it could also
+             * have a descendant Component B that also emits ionChange. We only want to update
+             * the v-model for Component A when ionChange originates from that element and not
+             * when ionChange bubbles up from Component B.
+             */
+            if (e.target.tagName === el.tagName) {
+              modelPropValue = (e?.target as any)[modelProp];
+              emit(UPDATE_VALUE_EVENT, modelPropValue);
+            }
           });
         });
       },