feat(react): add setupIonicReact function (#24254)

resolves #24139
ionic-team · Nov 22, 2021 · 55db38d · 55db38d
1 parent 3c4f9fd
commit 55db38d
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 18 deletions.
diff --git a/BREAKING.md b/BREAKING.md
@@ -29,12 +29,15 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 - [Config](#config)
   * [Transition Shadow](#transition-shadow)
 - [Angular](#angular)
-  * [Config Provider](#config-provider)
+  * [Config](#config-1)
 - [Vue](#vue)
+  * [Config](#config-2)
   * [Tabs Config](#tabs-config)
   * [Tabs Router Outlet](#tabs-router-outlet)
   * [Overlay Events](#overlay-events)
   * [Utility Function Types](#utility-function-types)
+- [React](#react)
+  * [Config](#config-3)
 - [Browser and Platform Support](#browser-and-platform-support)
 
 
@@ -164,13 +167,46 @@ The `experimentalTransitionShadow` config option has been removed. The transitio
 
 ### Angular
 
-#### Config Provider
+#### Config
 
 The `Config.set()` method has been removed. See https://ionicframework.com/docs/angular/config for examples on how to set config globally, per-component, and per-platform.
 
+Additionally, the `setupConfig` function is no longer exported from `@ionic/angular`. Developers should use `IonicModule.forRoot` to set the config instead. See https://ionicframework.com/docs/angular/config for more information.
+
+### React
+
+#### Config
+
+All Ionic React applications must now import `setupIonicReact` from `@ionic/react` and call it. If you are setting a custom config with `setupConfig`, pass your config directly to `setupIonicReact` instead:
+
+**Old**
+```javascript
+import { setupConfig } from '@ionic/react';
+
+setupConfig({
+  mode: 'md'
+})
+```
+
+**New**
+```javascript
+import { setupIonicReact } from '@ionic/react';
+
+setupIonicReact({
+  mode: 'md'
+})
+```
+
+Note that all Ionic React applications must call `setupIonicReact` even if they are not setting custom configuration.
+
+Additionally, the `setupConfig` function is no longer exported from `@ionic/react`.
 
 ### Vue
 
+#### Config
+
+The `setupConfig` function is no longer exported from `@ionic/vue`. Developers should pass their config into the `IonicVue` plugin. See https://ionicframework.com/docs/vue/config for more information.
+
 #### Tabs Config
 
 Support for child routes nested inside of tabs has been removed to better conform to Vue Router's best practices. Additional routes should be written as sibling routes with the parent tab as the path prefix:

diff --git a/angular/src/index.ts b/angular/src/index.ts
@@ -50,7 +50,6 @@ export {
   createGesture,
   iosTransitionAnimation,
   mdTransitionAnimation,
-  setupConfig,
   IonicSwiper,
   IonicSlides,
   getPlatforms,

diff --git a/packages/react-router/test-app/src/App.tsx b/packages/react-router/test-app/src/App.tsx
@@ -1,4 +1,4 @@
-import { IonApp } from '@ionic/react';
+import { IonApp, setupIonicReact } from '@ionic/react';
 import React from 'react';
 import { Route } from 'react-router-dom';
 
@@ -36,6 +36,9 @@ import Refs from './pages/refs/Refs';
 import DynamicIonpageClassnames from './pages/dynamic-ionpage-classnames/DynamicIonpageClassnames';
 import Tabs from './pages/tabs/Tabs';
 import TabsSecondary from './pages/tabs/TabsSecondary';
+
+setupIonicReact();
+
 const App: React.FC = () => {
   return (
     <IonApp>

diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts
@@ -1,4 +1,4 @@
-import { initialize } from '@ionic/core/components';
+import { IonicConfig, initialize } from '@ionic/core/components';
 import { addIcons } from 'ionicons';
 import {
   arrowBackSharp,
@@ -23,7 +23,6 @@ export {
   createGesture,
   iosTransitionAnimation,
   mdTransitionAnimation,
-  setupConfig,
   IonicSwiper,
   IonicSlides,
   getTimeGivenProgression,
@@ -190,13 +189,17 @@ addIcons({
   'search-sharp': searchSharp,
 });
 
-/**
- * By default Ionic Framework hides elements that
- * are not hydrated, but in the CE build there is no
- * hydration.
- * TODO: Remove when all integrations have been
- * migrated to CE build.
- */
-document.documentElement.classList.add('ion-ce');
-
-initialize();
+export const setupIonicReact = (config: IonicConfig = {}) => {
+  /**
+   * By default Ionic Framework hides elements that
+   * are not hydrated, but in the CE build there is no
+   * hydration.
+   * TODO: Remove when all integrations have been
+   * migrated to CE build.
+   */
+  document.documentElement.classList.add('ion-ce');
+
+  initialize({
+    ...config
+  });
+}
diff --git a/packages/react/test-app/src/App.tsx b/packages/react/test-app/src/App.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Route } from 'react-router-dom';
-import { IonApp } from '@ionic/react';
+import { IonApp, setupIonicReact } from '@ionic/react';
 import { IonReactRouter } from '@ionic/react-router';
 
 /* Core CSS required for Ionic components to work properly */
@@ -25,6 +25,8 @@ import Main from './pages/Main';
 import OverlayHooks from './pages/overlay-hooks/OverlayHooks';
 import OverlayComponents from './pages/overlay-components/OverlayComponents';
 
+setupIonicReact();
+
 const App: React.FC = () => (
   <IonApp>
     <IonReactRouter>

diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
@@ -40,7 +40,6 @@ export {
   createGesture,
   iosTransitionAnimation,
   mdTransitionAnimation,
-  setupConfig,
   IonicSwiper,
   IonicSlides,
   getPlatforms,