fix: react test app packages resolution

core/stencil.config.ts

@@ -258,4 +258,13 @@ export const config: Config = {
   globalScript: 'src/global/ionic-global.ts',
   enableCache: true,
   transformAliasedImportPaths: true,
+  /**
+   * Creates the `dist` directory and runs the output targets
+   * when the Stencil dev server rebuilds.
+   * 
+   * This option adds ~20s to the dev server startup time.
+   * You can disable it locally if you are not testing the
+   * custom elements output in the framework projects.
+   */
+  buildDist: true
 };

packages/angular-server/package.json

@@ -62,6 +62,6 @@
   },
   "prettier": "@ionic/prettier-config",
   "dependencies": {
-    "@ionic/core": "^7.6.6"
+    "@ionic/core": "workspace:*"
   }
 }

packages/angular/package.json

@@ -46,7 +46,7 @@
     }
   },
   "dependencies": {
-    "@ionic/core": "^7.6.6",
+    "@ionic/core": "workspace:*",
     "ionicons": "^7.0.0",
     "jsonc-parser": "^3.0.0",
     "tslib": "^2.3.0"

packages/react-router/package.json

@@ -35,7 +35,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@ionic/react": "^7.6.6",
+    "@ionic/react": "workspace:*",
     "history": "^4.9.0",
     "tslib": "*"
   },

packages/react-router/test/apps/reactrouter5/pnpm-workspace.yaml

@@ -1,3 +1,4 @@
 packages:
   - ../../../../react
-  - ../../../
+  - ../../../../react-router
+  - ../../../../../core

packages/react/package.json

@@ -38,7 +38,7 @@
     "css/"
   ],
   "dependencies": {
-    "@ionic/core": "^7.6.6",
+    "@ionic/core": "workspace:*",
     "ionicons": "^7.0.0",
     "tslib": "*"
   },

packages/react/src/components/IonApp.tsx

@@ -12,6 +12,8 @@ import { IonAppInner } from './inner-proxies';
 type Props = LocalJSX.IonApp &
   IonicReactProps & {
     ref?: React.Ref<HTMLIonAppElement>;
+    // TODO: Refactor type with PropsWithChildren when moving to React v18
+    children?: React.ReactNode;
   };
 
 export const IonApp = /*@__PURE__*/ (() =>

packages/react/src/components/IonIcon.tsx

@@ -21,6 +21,8 @@ interface IonIconProps {
 
 type InternalProps = IonIconProps & {
   forwardedRef?: React.ForwardedRef<HTMLIonIconElement>;
+  // TODO: Refactor type with PropsWithChildren when moving to React v18
+  children?: React.ReactNode;
 };
 
 class IonIconContainer extends React.PureComponent<InternalProps> {

packages/react/src/components/IonPage.tsx

@@ -6,8 +6,10 @@ import PageManager from '../routing/PageManager';
 import type { IonicReactProps } from './IonicReactProps';
 import { createForwardRef } from './utils';
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-interface IonPageProps extends IonicReactProps {}
+interface IonPageProps extends IonicReactProps {
+  // TODO: Refactor type with PropsWithChildren when moving to React v18
+  children?: React.ReactNode;
+}
 
 interface IonPageInternalProps extends IonPageProps {
   forwardedRef?: React.ForwardedRef<HTMLDivElement>;

packages/react/src/components/IonRouterOutlet.tsx

@@ -12,6 +12,8 @@ type Props = LocalJSX.IonRouterOutlet & {
   basePath?: string;
   ref?: React.Ref<any>;
   ionPage?: boolean;
+  // TODO: Refactor type with PropsWithChildren when moving to React v18
+  children?: React.ReactNode;
 };
 
 interface InternalProps extends Props {

packages/react/src/components/navigation/IonNav.tsx

@@ -15,6 +15,8 @@ const IonNavInner = createReactComponent<JSX.IonNav & { delegate: FrameworkDeleg
 
 type IonNavProps = JSX.IonNav & {
   forwardedRef?: React.ForwardedRef<HTMLIonNavElement>;
+  // TODO: Refactor type with PropsWithChildren when moving to React v18
+  children?: React.ReactNode;
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars

packages/react/src/components/navigation/IonTabBar.tsx

@@ -15,6 +15,8 @@ type IonTabBarProps = LocalJSX.IonTabBar &
     onIonTabsWillChange?: (event: CustomEvent<{ tab: string }>) => void;
     slot?: 'bottom' | 'top';
     style?: { [key: string]: string };
+    // TODO: Refactor type with PropsWithChildren when moving to React v18
+    children?: React.ReactNode;
   };
 
 interface InternalProps extends IonTabBarProps {

packages/react/src/components/navigation/IonTabButton.tsx

@@ -10,6 +10,8 @@ type Props = LocalJSX.IonTabButton &
     routerOptions?: RouterOptions;
     ref?: React.Ref<HTMLIonTabButtonElement>;
     onClick?: (e: CustomEvent) => void;
+    // TODO: Refactor type with PropsWithChildren when moving to React v18
+    children?: React.ReactNode;
   };
 
 export const IonTabButton = /*@__PURE__*/ (() =>

packages/react/src/routing/NavManager.tsx

@@ -34,6 +34,8 @@ interface NavManagerProps {
   ionRoute: any;
   stackManager: any;
   locationHistory: LocationHistory;
+  // TODO: Refactor type with PropsWithChildren when moving to React v18
+  children?: React.ReactNode;
 }
 
 export class NavManager extends React.PureComponent<NavManagerProps, NavContextState> {

packages/react/src/routing/OutletPageManager.tsx

@@ -12,6 +12,8 @@ interface OutletPageManagerProps {
   forwardedRef?: React.ForwardedRef<HTMLIonRouterOutletElement>;
   routeInfo?: RouteInfo;
   StackManager: any; // TODO(FW-2959): type
+  // TODO: Refactor type with PropsWithChildren when moving to React v18
+  children?: React.ReactNode;
 }
 
 export class OutletPageManager extends React.Component<OutletPageManagerProps> {

packages/react/src/routing/PageManager.tsx

@@ -10,6 +10,8 @@ interface PageManagerProps {
   className?: string;
   forwardedRef?: React.ForwardedRef<HTMLDivElement>;
   routeInfo?: RouteInfo;
+  // TODO: Refactor type with PropsWithChildren when moving to React v18
+  children?: React.ReactNode;
 }
 
 export class PageManager extends React.PureComponent<PageManagerProps> {

packages/react/src/routing/ViewLifeCycleManager.tsx

@@ -5,6 +5,8 @@ import { DefaultIonLifeCycleContext, IonLifeCycleContext } from '../contexts/Ion
 interface ViewTransitionManagerProps {
   removeView: () => void;
   mount: boolean;
+  // TODO: Refactor type with PropsWithChildren when moving to React v18
+  children?: React.ReactNode;
 }
 
 interface ViewTransitionManagerState {

packages/react/test/README.md

@@ -39,6 +39,12 @@ To add new tests, components, or pages, modify the `base` project. This ensures
 
 If you want to add a version-specific change, add the change inside of the appropriate projects in `apps`. Be sure to replicate the directory structure. For example, if you are adding a new E2E test file called `test.e2e.ts` in `apps/react17`, make sure you place the file in `apps/react17/tests/e2e/test.e2e.ts`.
 
+If you are updating dependencies in the `base` project, you can update the lock file without installing dependencies by running the following command:
+
+```
+pnpm install --lockfile-only
+```
+
 ### Version-specific tests
 
 If you need to add E2E tests that are only run on a specific version of the JS Framework, replicate the `VersionTest` component on each partial application. This ensures that tests for framework version X do not get run for framework version Y.

packages/react/test/apps/react17/package.json

@@ -60,8 +60,10 @@
   "engines": {
     "node": ">= 16"
   },
-  "resolutions": {
-    "@types/react": "^17.0.53",
-    "react": "^17.0.2"
+  "pnpm": {
+    "overrides": {
+      "@types/react": "^17.0.53",
+      "react": "^17.0.2"
+    }
   }
 }

packages/react/test/apps/react17/pnpm-workspace.yaml

@@ -1,3 +1,4 @@
 packages:
-  - ../../../
+  - ../../../../react
   - ../../../../react-router
+  - ../../../../../core

packages/react/test/apps/react18/.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

packages/react/test/apps/react18/package.json

@@ -46,8 +46,10 @@
   "engines": {
     "node": ">= 16"
   },
-  "resolutions": {
-    "@types/react": "^18.0.27",
-    "react": "^18.2.0"
+  "pnpm": {
+    "overrides": {
+      "@types/react": "^18.0.27",
+      "react": "^18.2.0"
+    }
   }
 }

packages/react/test/apps/react18/pnpm-workspace.yaml

@@ -1,3 +1,4 @@
 packages:
-  - ../../../
+  - ../../../../react
   - ../../../../react-router
+  - ../../../../../core

packages/react/test/apps/react18/vite.config.ts

@@ -19,7 +19,7 @@ export default defineConfig({
   optimizeDeps: {
     exclude: ['@ionic/react', '@ionic/react-router'],
     /**
-     * ESM dependencies that have a CJS dependency need to 
+     * ESM dependencies that have a CJS dependency need to
      * include that dependency for optimization.
      */
     include: ['@ionic/react > react-dom']

packages/react/test/build.sh

@@ -22,6 +22,10 @@ FULL_BASE_DIR="${BASE_DIR}/."
 # The full path to the built application.
 BUILD_APP_DIR="${BUILD_DIR}/${APP_DIR}/"
 
+# Delete any node_modules directory from running
+# pnpm install in the base application.
+rm -rf $FULL_APP_DIR/node_modules
+
 # Make the build directory if it does not already exist.
 mkdir -p $BUILD_DIR
 

packages/vue/package.json

@@ -65,7 +65,7 @@
     "vue-router": "^4.0.16"
   },
   "dependencies": {
-    "@ionic/core": "^7.6.6",
+    "@ionic/core": "workspace:*",
     "ionicons": "^7.0.0"
   },
   "vetur": {

pnpm-lock.yaml

@@ -141,7 +141,7 @@ importers:
   packages/angular:
     dependencies:
       '@ionic/core':
-        specifier: ^7.6.6
+        specifier: workspace:*
         version: link:../../core
       ionicons:
         specifier: ^7.0.0
@@ -247,7 +247,7 @@ importers:
   packages/angular-server:
     dependencies:
       '@ionic/core':
-        specifier: ^7.6.6
+        specifier: workspace:*
         version: link:../../core
       zone.js:
         specifier: '>=0.11.0'
@@ -312,7 +312,7 @@ importers:
   packages/react:
     dependencies:
       '@ionic/core':
-        specifier: ^7.6.6
+        specifier: workspace:*
         version: link:../../core
       ionicons:
         specifier: ^7.0.0
@@ -397,7 +397,7 @@ importers:
   packages/react-router:
     dependencies:
       '@ionic/react':
-        specifier: ^7.6.6
+        specifier: workspace:*
         version: link:../react
       history:
         specifier: ^4.9.0
@@ -470,7 +470,7 @@ importers:
   packages/vue:
     dependencies:
       '@ionic/core':
-        specifier: ^7.6.6
+        specifier: workspace:*
         version: link:../../core
       ionicons:
         specifier: ^7.0.0
@@ -526,7 +526,7 @@ importers:
     dependencies:
       '@ionic/vue':
         specifier: ^7.6.6
-        version: link:../vue
+        version: 7.7.0
     devDependencies:
       '@ionic/eslint-config':
         specifier: ^0.3.0
@@ -1798,6 +1798,14 @@ packages:
     engines: {node: '>=6.9.0'}
     dev: true
 
+  /@ionic/core@7.7.0:
+    resolution: {integrity: sha512-ewbvX8u4+FNRBAw1nqBuCy4dI8OLTxoqZgm4qRs4zbrNLJInwTpYjCPzYueN0KE9ufP0n9HhS23lfcrQzJC7Hg==}
+    dependencies:
+      '@stencil/core': 4.12.0
+      ionicons: 7.2.2
+      tslib: 2.6.2
+    dev: false
+
   /@ionic/eslint-config@0.3.0(eslint@7.32.0)(typescript@4.7.2):
     resolution: {integrity: sha512-Uf1hS2YIoHlcvXPF5LnsPM6auMewEdChQhR117Rt3sVEAutbyKMpFP4slNC2a6up3a5Q34zepqlf61Qgkf9XeQ==}
     peerDependencies:
@@ -1890,6 +1898,13 @@ packages:
       prettier: 2.8.3
     dev: true
 
+  /@ionic/vue@7.7.0:
+    resolution: {integrity: sha512-Uf+z7h0LbYV0ljBEewkSwScRIXVzKqbSSBcEzji1Hrkefoymwyiw+8uVF9wN0uNlC+sXLDSiPp/VF0vq3+dzpQ==}
+    dependencies:
+      '@ionic/core': 7.7.0
+      ionicons: 7.2.2
+    dev: false
+
   /@isaacs/cliui@8.0.2:
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
     engines: {node: '>=12'}
@@ -4014,6 +4029,12 @@ packages:
     engines: {node: '>=16.0.0', npm: '>=7.10.0'}
     hasBin: true
 
+  /@stencil/core@4.12.0:
+    resolution: {integrity: sha512-qAQcfNmp2sdxAh1DlyUhHfDmIUS7mhI+5LAhPphg74zK9sKgFL5vpLzgjs0wohpjlmI4msgJFYiRB8lxVPqjPg==}
+    engines: {node: '>=16.0.0', npm: '>=7.10.0'}
+    hasBin: true
+    dev: false
+
   /@stencil/react-output-target@0.5.3(@stencil/core@4.11.0):
     resolution: {integrity: sha512-68jwRp35CjAcwhTJ9yFD/3n+jrHOqvEH2jreVuPVvZK+4tkhPlYlwz0d1E1RlF3jyifUSfdkWUGgXIEy8Fo3yw==}
     peerDependencies:
@@ -16630,7 +16651,6 @@ packages:
 
   /tslib@2.6.2:
     resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
-    dev: true
 
   /tsutils@3.21.0(typescript@4.7.2):
     resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}