From c50d895370a56d0809019dc59fe32ec840b72f03 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 13 Sep 2021 14:53:28 -0400 Subject: [PATCH] feat(react): add custom elements bundle (#23896) --- .circleci/config.yml | 24 -- core/package-lock.json | 14 +- core/package.json | 2 +- core/src/components/menu/menu.tsx | 6 + core/src/components/split-pane/split-pane.tsx | 7 +- core/stencil.config.ts | 1 + packages/react-router/package.json | 32 +-- packages/react-router/setupTests.ts | 11 - .../src/__tests__/Router.spec.tsx | 73 ------ .../react-router/test-app/package-lock.json | 28 +-- packages/react-router/test-app/package.json | 3 +- .../react-router/test-app/scripts/sync.sh | 8 +- packages/react-router/test-app/src/App.tsx | 1 - .../react/src/components/CreateAnimation.tsx | 2 +- .../react/src/components/IonActionSheet.tsx | 5 +- packages/react/src/components/IonAlert.tsx | 8 +- packages/react/src/components/IonIcon.tsx | 6 +- packages/react/src/components/IonLoading.tsx | 5 +- packages/react/src/components/IonModal.tsx | 5 +- packages/react/src/components/IonPicker.tsx | 5 +- packages/react/src/components/IonPopover.tsx | 5 +- .../react/src/components/IonRouterContext.tsx | 2 +- .../react/src/components/IonRouterOutlet.tsx | 2 +- packages/react/src/components/IonToast.tsx | 8 +- .../components/__tests__/IonButton.spec.tsx | 27 --- .../src/components/__tests__/IonTabs.spec.tsx | 87 -------- .../__tests__/createComponent.spec.tsx | 128 ----------- .../components/createControllerComponent.tsx | 12 +- .../createInlineOverlayComponent.tsx | 12 +- .../src/components/createOverlayComponent.tsx | 12 +- .../src/components/createRoutingComponent.tsx | 12 +- packages/react/src/components/hrefprops.ts | 2 +- packages/react/src/components/index.ts | 20 +- .../react/src/components/inner-proxies.ts | 17 +- .../components/navigation/IonBackButton.tsx | 2 +- .../src/components/navigation/IonTabBar.tsx | 2 +- .../components/navigation/IonTabButton.tsx | 2 +- .../src/components/navigation/IonTabs.tsx | 2 +- packages/react/src/components/proxies.ts | 207 ++++++++++++------ .../react-component-lib/createComponent.tsx | 5 +- .../createOverlayComponent.tsx | 16 +- .../react-component-lib/utils/index.tsx | 10 + .../react/src/components/routing-proxies.ts | 20 +- packages/react/src/components/utils/index.tsx | 2 +- packages/react/src/contexts/NavContext.ts | 2 +- .../react/src/hooks/HookOverlayOptions.ts | 2 +- packages/react/src/hooks/useController.ts | 2 +- packages/react/src/hooks/useIonActionSheet.ts | 2 +- packages/react/src/hooks/useIonAlert.ts | 2 +- packages/react/src/hooks/useIonLoading.tsx | 2 +- packages/react/src/hooks/useIonModal.ts | 2 +- packages/react/src/hooks/useIonPicker.tsx | 2 +- packages/react/src/hooks/useIonPopover.ts | 2 +- packages/react/src/hooks/useIonToast.ts | 2 +- packages/react/src/hooks/useOverlay.ts | 2 +- packages/react/src/models/RouteInfo.ts | 2 +- packages/react/src/routing/NavManager.tsx | 2 +- 57 files changed, 321 insertions(+), 565 deletions(-) delete mode 100644 packages/react-router/setupTests.ts delete mode 100644 packages/react-router/src/__tests__/Router.spec.tsx delete mode 100644 packages/react/src/components/__tests__/IonButton.spec.tsx delete mode 100644 packages/react/src/components/__tests__/IonTabs.spec.tsx delete mode 100644 packages/react/src/components/__tests__/createComponent.spec.tsx diff --git a/.circleci/config.yml b/.circleci/config.yml index ee5241613a9..eab569a606a 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -377,28 +377,6 @@ jobs: command: npm run test.spec working_directory: /tmp/workspace/packages/react - test-react-router-spec: - <<: *defaults - steps: - - checkout - - attach_workspace: - at: /tmp/workspace - - run: - command: sudo npm link - working_directory: /tmp/workspace/core - - run: - command: sudo npm link @ionic/core - working_directory: /tmp/workspace/packages/react - - run: - command: sudo npm link - working_directory: /tmp/workspace/packages/react - - run: - command: sudo npm link @ionic/react - working_directory: /tmp/workspace/packages/react-router - - run: - command: npm run test.spec - working_directory: /tmp/workspace/packages/react-router - install-react-test-app: <<: *defaults steps: @@ -537,8 +515,6 @@ workflows: requires: [build-react-router] - test-react-spec: requires: [build-react] - - test-react-router-spec: - requires: [build-react-router] - install-react-test-app: requires: [build-core] - test-react-e2e: diff --git a/core/package-lock.json b/core/package-lock.json index 88354194549..7481aa6a532 100644 --- a/core/package-lock.json +++ b/core/package-lock.json @@ -18,7 +18,7 @@ "@jest/core": "^26.6.3", "@rollup/plugin-node-resolve": "^8.4.0", "@rollup/plugin-virtual": "^2.0.3", - "@stencil/react-output-target": "^0.0.12", + "@stencil/react-output-target": "^0.1.0-2", "@stencil/sass": "1.3.2", "@stencil/vue-output-target": "^0.5.1", "@types/jest": "^26.0.20", @@ -1369,9 +1369,9 @@ } }, "node_modules/@stencil/react-output-target": { - "version": "0.0.12", - "resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.0.12.tgz", - "integrity": "sha512-X/lWAI/FW4tg/pjwe5UWy8KbRk2vWcWR+S6tBqNzKO6pKD6qr60dfajN13EO9nnm5hGr48FP1m/M8kqFbjpZrg==", + "version": "0.1.0-2", + "resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.1.0-2.tgz", + "integrity": "sha512-kIxhK+NVaBinS//s/Z4Ylz3q0ZXpu1jIHIcYi7af/tuOirCxHX2EUOja3VRxl37UGRvwv+r4eds9tgUzPLX7rA==", "dev": true, "peerDependencies": { "@stencil/core": ">=1.8.0" @@ -15021,9 +15021,9 @@ "integrity": "sha512-QsxWayZyusnqSZrlCl81R71rA3KqFjVVQSH4E0rGN15F1GdQaFonKlHLyCOLKLig1zzC+DQkLLiUuocexuvdeQ==" }, "@stencil/react-output-target": { - "version": "0.0.12", - "resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.0.12.tgz", - "integrity": "sha512-X/lWAI/FW4tg/pjwe5UWy8KbRk2vWcWR+S6tBqNzKO6pKD6qr60dfajN13EO9nnm5hGr48FP1m/M8kqFbjpZrg==", + "version": "0.1.0-2", + "resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.1.0-2.tgz", + "integrity": "sha512-kIxhK+NVaBinS//s/Z4Ylz3q0ZXpu1jIHIcYi7af/tuOirCxHX2EUOja3VRxl37UGRvwv+r4eds9tgUzPLX7rA==", "dev": true }, "@stencil/sass": { diff --git a/core/package.json b/core/package.json index 432c4b853a4..5b20e01cc06 100644 --- a/core/package.json +++ b/core/package.json @@ -40,7 +40,7 @@ "@jest/core": "^26.6.3", "@rollup/plugin-node-resolve": "^8.4.0", "@rollup/plugin-virtual": "^2.0.3", - "@stencil/react-output-target": "^0.0.12", + "@stencil/react-output-target": "^0.1.0-2", "@stencil/sass": "1.3.2", "@stencil/vue-output-target": "^0.5.1", "@types/jest": "^26.0.20", diff --git a/core/src/components/menu/menu.tsx b/core/src/components/menu/menu.tsx index bdb2f8f3ff2..90496ab6e13 100644 --- a/core/src/components/menu/menu.tsx +++ b/core/src/components/menu/menu.tsx @@ -148,6 +148,12 @@ export class Menu implements ComponentInterface, MenuI { @Event() protected ionMenuChange!: EventEmitter; async connectedCallback() { + // TODO: connectedCallback is fired in CE build + // before WC is defined. This needs to be fixed in Stencil. + if (typeof (customElements as any) !== 'undefined') { + await customElements.whenDefined('ion-menu'); + } + if (this.type === undefined) { this.type = config.get('menuType', 'overlay'); } diff --git a/core/src/components/split-pane/split-pane.tsx b/core/src/components/split-pane/split-pane.tsx index 6f2fb805ff2..a2eb09642d5 100644 --- a/core/src/components/split-pane/split-pane.tsx +++ b/core/src/components/split-pane/split-pane.tsx @@ -60,7 +60,12 @@ export class SplitPane implements ComponentInterface { this.ionSplitPaneVisible.emit(detail); } - connectedCallback() { + async connectedCallback() { + // TODO: connectedCallback is fired in CE build + // before WC is defined. This needs to be fixed in Stencil. + if (typeof (customElements as any) !== 'undefined') { + await customElements.whenDefined('ion-split-pane'); + } this.styleChildren(); this.updateState(); } diff --git a/core/stencil.config.ts b/core/stencil.config.ts index e09ecdb3d37..4fa5b37aeb8 100644 --- a/core/stencil.config.ts +++ b/core/stencil.config.ts @@ -64,6 +64,7 @@ export const config: Config = { outputTargets: [ reactOutputTarget({ componentCorePackage: '@ionic/core', + includeImportCustomElements: true, includePolyfills: false, includeDefineCustomElements: false, proxiesFile: '../packages/react/src/components/proxies.ts', diff --git a/packages/react-router/package.json b/packages/react-router/package.json index 7b4a77b6d08..b49c493bf38 100644 --- a/packages/react-router/package.json +++ b/packages/react-router/package.json @@ -26,8 +26,7 @@ "release": "np --any-branch --no-cleanup", "lint": "tslint --project .", "lint.fix": "tslint --project . --fix", - "tsc": "tsc -p .", - "test.spec": "jest --ci" + "tsc": "tsc -p ." }, "main": "dist/index.js", "module": "dist/index.esm.js", @@ -49,16 +48,11 @@ "@ionic/core": "6.0.0-beta.5", "@ionic/react": "6.0.0-beta.5", "@rollup/plugin-node-resolve": "^8.1.0", - "@testing-library/jest-dom": "^5.11.6", - "@testing-library/react": "^11.2.2", - "@testing-library/user-event": "^12.0.11", - "@types/jest": "^26.0.15", "@types/node": "^14.0.14", "@types/react": "16.14.0", "@types/react-dom": "^16.9.0", "@types/react-router": "^5.0.3", "@types/react-router-dom": "^5.1.5", - "jest": "^26.6.3", "np": "^6.4.0", "prettier": "^2.2.0", "react": "^16.9.0", @@ -68,33 +62,9 @@ "rimraf": "^3.0.2", "rollup": "^2.26.4", "rollup-plugin-sourcemaps": "^0.6.2", - "ts-jest": "^26.4.4", "tslint": "^6.1.2", "tslint-ionic-rules": "0.0.21", "tslint-react": "^5.0.0", "typescript": "^3.9.5" - }, - "jest": { - "preset": "ts-jest", - "setupFilesAfterEnv": [ - "/setupTests.ts" - ], - "testPathIgnorePatterns": [ - "node_modules", - "dist-transpiled", - "dist", - "/test-app" - ], - "globals": { - "ts-jest": { - "diagnostics": false - } - }, - "modulePaths": [ - "" - ], - "moduleNameMapper": { - "\\.(css|jpg|png|svg)$": "/empty-module.js" - } } } diff --git a/packages/react-router/setupTests.ts b/packages/react-router/setupTests.ts deleted file mode 100644 index 4a28ab510d1..00000000000 --- a/packages/react-router/setupTests.ts +++ /dev/null @@ -1,11 +0,0 @@ -import '@testing-library/jest-dom/extend-expect'; - -window.matchMedia = - window.matchMedia || - (function () { - return { - matches: false, - addListener() {}, - removeListener() {}, - }; - } as any); diff --git a/packages/react-router/src/__tests__/Router.spec.tsx b/packages/react-router/src/__tests__/Router.spec.tsx deleted file mode 100644 index a40b2f77bf9..00000000000 --- a/packages/react-router/src/__tests__/Router.spec.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import React, { useRef, useEffect } from 'react'; -import { IonApp, IonRouterOutlet, IonPage } from '@ionic/react'; -import { IonReactMemoryRouter } from '../ReactRouter/IonReactMemoryRouter'; -import { render, waitForElement } from '@testing-library/react'; -import { Route } from 'react-router'; -// import {Router} from '../Router'; -import { MemoryHistory, createMemoryHistory } from 'history'; - -describe('Router', () => { - // This test fails because the ion-router-outlet web component (from core) - // isn't supported in JSDOM, so it never registers - // TODO: figure out why they are failing on new router code when they worked before - describe('on first page render', () => { - let history: MemoryHistory; - - let IonTestApp: React.ComponentType; - - beforeEach(() => { - history = createMemoryHistory(); - IonTestApp = ({ Page }) => { - return ( - - - {/* */} - - {/* */} - - - ); - }; - }); - - it.skip('should be visible', () => { - const MyPage = () => { - return ( - -
hello
- - ); - }; - - const { container } = render(); - console.log(container.outerHTML); - const page = container.getElementsByClassName('ion-page')[0]; - expect(page).not.toHaveClass('ion-page-invisible'); - expect(page).toHaveStyle('z-index: 101'); - }); - - it.skip('should fire initial lifecycle events', async () => { - const ionViewWillEnterListener = jest.fn(); - const ionViewDidEnterListener = jest.fn(); - - const MyPage = () => { - const ref = useRef(); - - useEffect(() => { - ref.current.addEventListener('ionViewWillEnter', ionViewWillEnterListener); - ref.current.addEventListener('ionViewDidEnter', ionViewDidEnterListener); - }, []); - - return ( - -
hello
- - ); - }; - - render(); - expect(ionViewWillEnterListener).toHaveBeenCalledTimes(1); - expect(ionViewDidEnterListener).toHaveBeenCalledTimes(1); - }); - }); -}); diff --git a/packages/react-router/test-app/package-lock.json b/packages/react-router/test-app/package-lock.json index 4c0411e87fd..4543031a476 100644 --- a/packages/react-router/test-app/package-lock.json +++ b/packages/react-router/test-app/package-lock.json @@ -14,6 +14,7 @@ "@capacitor/ios": "^2.2.0", "@ionic/react": "5.6.3", "@ionic/react-router": "^5.6.3", + "@stencil/core": "^2.8.0", "@svgr/webpack": "4.3.3", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.4.0", @@ -77,7 +78,7 @@ "style-loader": "0.23.1", "terser-webpack-plugin": "2.3.4", "ts-pnp": "1.1.5", - "typescript": "^3.9.5", + "typescript": "^4.4.2", "url-loader": "2.3.0", "wait-on": "^5.3.0", "webpack": "4.41.5", @@ -2027,9 +2028,9 @@ "integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==" }, "node_modules/@stencil/core": { - "version": "2.5.2", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.5.2.tgz", - "integrity": "sha512-bgjPXkSzzg1WnTgVUm6m5ZzpKt602WmA/QljODAW1xVN40OHJdbGblzF/F6MFzqv2c5Cy30CB41arc8qADIdcQ==", + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.8.0.tgz", + "integrity": "sha512-WazFGUMnbumg8ePNvej8cIOEcxvuZ0ugKQkkE1xFbDYcl7DgJd62MiG+bIqCcQlIdLEfhjAdoixxlFdJgrgjyA==", "bin": { "stencil": "bin/stencil" }, @@ -19603,10 +19604,9 @@ "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=" }, "node_modules/typescript": { - "version": "3.9.10", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.10.tgz", - "integrity": "sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q==", - "license": "Apache-2.0", + "version": "4.4.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.4.2.tgz", + "integrity": "sha512-gzP+t5W4hdy4c+68bfcv0t400HVJMMd2+H9B7gae1nQlBzCqvrXX+6GL/b3GAgyTH966pzrZ70/fRjwAtZksSQ==", "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -22991,9 +22991,9 @@ "integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==" }, "@stencil/core": { - "version": "2.5.2", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.5.2.tgz", - "integrity": "sha512-bgjPXkSzzg1WnTgVUm6m5ZzpKt602WmA/QljODAW1xVN40OHJdbGblzF/F6MFzqv2c5Cy30CB41arc8qADIdcQ==" + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.8.0.tgz", + "integrity": "sha512-WazFGUMnbumg8ePNvej8cIOEcxvuZ0ugKQkkE1xFbDYcl7DgJd62MiG+bIqCcQlIdLEfhjAdoixxlFdJgrgjyA==" }, "@svgr/babel-plugin-add-jsx-attribute": { "version": "4.2.0", @@ -37500,9 +37500,9 @@ "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=" }, "typescript": { - "version": "3.9.10", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.10.tgz", - "integrity": "sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q==" + "version": "4.4.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.4.2.tgz", + "integrity": "sha512-gzP+t5W4hdy4c+68bfcv0t400HVJMMd2+H9B7gae1nQlBzCqvrXX+6GL/b3GAgyTH966pzrZ70/fRjwAtZksSQ==" }, "undefsafe": { "version": "2.0.3", diff --git a/packages/react-router/test-app/package.json b/packages/react-router/test-app/package.json index 4376c5be710..914a4a5fd7b 100644 --- a/packages/react-router/test-app/package.json +++ b/packages/react-router/test-app/package.json @@ -9,6 +9,7 @@ "@capacitor/ios": "^2.2.0", "@ionic/react": "5.6.3", "@ionic/react-router": "^5.6.3", + "@stencil/core": "^2.8.0", "@svgr/webpack": "4.3.3", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.4.0", @@ -72,7 +73,7 @@ "style-loader": "0.23.1", "terser-webpack-plugin": "2.3.4", "ts-pnp": "1.1.5", - "typescript": "^3.9.5", + "typescript": "^4.4.2", "url-loader": "2.3.0", "wait-on": "^5.3.0", "webpack": "4.41.5", diff --git a/packages/react-router/test-app/scripts/sync.sh b/packages/react-router/test-app/scripts/sync.sh index ec24b8903d1..31eac15cdb0 100644 --- a/packages/react-router/test-app/scripts/sync.sh +++ b/packages/react-router/test-app/scripts/sync.sh @@ -9,11 +9,11 @@ rm -rf node_modules/@ionic/react-router/dist cp -a ../dist node_modules/@ionic/react-router/dist cp -a ../package.json node_modules/@ionic/react-router/package.json -# Copy core dist -rm -rf node_modules/@ionic/core/dist node_modules/@ionic/core/loader -cp -a ../../../core/dist node_modules/@ionic/core/dist -cp -a ../../../core/loader node_modules/@ionic/core/loader +# Copy core dist and components +rm -rf node_modules/@ionic/core/dist node_modules/@ionic/core/components cp -a ../../../core/package.json node_modules/@ionic/core/package.json +cp -a ../../../core/dist node_modules/@ionic/core/dist +cp -a ../../../core/components node_modules/@ionic/core/components # Copy ionicons rm -rf node_modules/ionicons diff --git a/packages/react-router/test-app/src/App.tsx b/packages/react-router/test-app/src/App.tsx index 7a4915eba59..a2948777e1f 100644 --- a/packages/react-router/test-app/src/App.tsx +++ b/packages/react-router/test-app/src/App.tsx @@ -36,7 +36,6 @@ 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'; -debugger; const App: React.FC = () => { return ( diff --git a/packages/react/src/components/CreateAnimation.tsx b/packages/react/src/components/CreateAnimation.tsx index 81c9b2548c5..0ea43bbe95f 100644 --- a/packages/react/src/components/CreateAnimation.tsx +++ b/packages/react/src/components/CreateAnimation.tsx @@ -6,7 +6,7 @@ import { AnimationKeyFrames, AnimationLifecycle, createAnimation, -} from '@ionic/core'; +} from '@ionic/core/components'; import React from 'react'; interface PartialPropertyValue { diff --git a/packages/react/src/components/IonActionSheet.tsx b/packages/react/src/components/IonActionSheet.tsx index 3620ea88012..95f62f43ee4 100644 --- a/packages/react/src/components/IonActionSheet.tsx +++ b/packages/react/src/components/IonActionSheet.tsx @@ -2,7 +2,8 @@ import { ActionSheetButton as ActionSheetButtonCore, ActionSheetOptions as ActionSheetOptionsCore, actionSheetController as actionSheetControllerCore, -} from '@ionic/core'; +} from '@ionic/core/components'; +import { IonActionSheet as IonActionSheetCmp } from '@ionic/core/components/ion-action-sheet.js'; import { createOverlayComponent } from './createOverlayComponent'; @@ -29,4 +30,4 @@ const actionSheetController = { export const IonActionSheet = /*@__PURE__*/ createOverlayComponent< ActionSheetOptions, HTMLIonActionSheetElement ->('IonActionSheet', actionSheetController); +>('ion-action-sheet', actionSheetController, IonActionSheetCmp); diff --git a/packages/react/src/components/IonAlert.tsx b/packages/react/src/components/IonAlert.tsx index 963e337dfd0..f7b5acd30ce 100644 --- a/packages/react/src/components/IonAlert.tsx +++ b/packages/react/src/components/IonAlert.tsx @@ -1,8 +1,10 @@ -import { AlertOptions, alertController } from '@ionic/core'; +import { AlertOptions, alertController } from '@ionic/core/components'; +import { IonAlert as IonAlertCmp } from '@ionic/core/components/ion-alert.js'; import { createControllerComponent } from './createControllerComponent'; export const IonAlert = /*@__PURE__*/ createControllerComponent( - 'IonAlert', - alertController + 'ion-alert', + alertController, + IonAlertCmp ); diff --git a/packages/react/src/components/IonIcon.tsx b/packages/react/src/components/IonIcon.tsx index a9c912a4263..bb2035b21a6 100644 --- a/packages/react/src/components/IonIcon.tsx +++ b/packages/react/src/components/IonIcon.tsx @@ -4,7 +4,6 @@ import { NavContext } from '../contexts/NavContext'; import { IonicReactProps } from './IonicReactProps'; import { IonIconInner } from './inner-proxies'; -import { deprecationWarning } from './react-component-lib/utils/dev'; import { createForwardRef, isPlatform } from './utils'; interface IonIconProps { @@ -29,10 +28,7 @@ class IonIconContainer extends React.PureComponent { constructor(props: InternalProps) { super(props); if (this.props.name) { - deprecationWarning( - 'icon-name', - 'In Ionic React, you import icons from "ionicons/icons" and set the icon you imported to the "icon" property. Setting the "name" property has no effect.' - ); + console.warn('In Ionic React, you import icons from "ionicons/icons" and set the icon you imported to the "icon" property. Setting the "name" property has no effect.'); } } diff --git a/packages/react/src/components/IonLoading.tsx b/packages/react/src/components/IonLoading.tsx index f021a8230fa..0d4ab8150a3 100644 --- a/packages/react/src/components/IonLoading.tsx +++ b/packages/react/src/components/IonLoading.tsx @@ -1,8 +1,9 @@ -import { LoadingOptions, loadingController } from '@ionic/core'; +import { LoadingOptions, loadingController } from '@ionic/core/components'; +import { IonLoading as IonLoadingCmp } from '@ionic/core/components/ion-loading.js'; import { createControllerComponent } from './createControllerComponent'; export const IonLoading = /*@__PURE__*/ createControllerComponent< LoadingOptions, HTMLIonLoadingElement ->('IonLoading', loadingController); +>('ion-loading', loadingController, IonLoadingCmp); diff --git a/packages/react/src/components/IonModal.tsx b/packages/react/src/components/IonModal.tsx index 0a4aa82240c..027bdd0b77f 100644 --- a/packages/react/src/components/IonModal.tsx +++ b/packages/react/src/components/IonModal.tsx @@ -1,8 +1,9 @@ -import { JSX } from '@ionic/core'; +import { JSX } from '@ionic/core/components'; +import { IonModal as IonModalCmp } from '@ionic/core/components/ion-modal.js'; import { createInlineOverlayComponent } from './createInlineOverlayComponent' export const IonModal = /*@__PURE__*/ createInlineOverlayComponent< JSX.IonModal, HTMLIonModalElement ->('ion-modal'); +>('ion-modal', IonModalCmp); diff --git a/packages/react/src/components/IonPicker.tsx b/packages/react/src/components/IonPicker.tsx index 1f074120344..d2ee074ba01 100644 --- a/packages/react/src/components/IonPicker.tsx +++ b/packages/react/src/components/IonPicker.tsx @@ -1,8 +1,9 @@ -import { PickerOptions, pickerController } from '@ionic/core'; +import { PickerOptions, pickerController } from '@ionic/core/components'; +import { IonPicker as IonPickerCmp } from '@ionic/core/components/ion-picker.js'; import { createControllerComponent } from './createControllerComponent'; export const IonPicker = /*@__PURE__*/ createControllerComponent< PickerOptions, HTMLIonPickerElement ->('IonPicker', pickerController); +>('ion-picker', pickerController, IonPickerCmp); diff --git a/packages/react/src/components/IonPopover.tsx b/packages/react/src/components/IonPopover.tsx index 91af321921f..c2e443eff97 100644 --- a/packages/react/src/components/IonPopover.tsx +++ b/packages/react/src/components/IonPopover.tsx @@ -1,8 +1,9 @@ -import { JSX } from '@ionic/core'; +import { JSX } from '@ionic/core/components'; +import { IonPopover as IonPopoverCmp } from '@ionic/core/components/ion-popover.js'; import { createInlineOverlayComponent } from './createInlineOverlayComponent' export const IonPopover = /*@__PURE__*/ createInlineOverlayComponent< JSX.IonPopover, HTMLIonPopoverElement ->('ion-popover'); +>('ion-popover', IonPopoverCmp); diff --git a/packages/react/src/components/IonRouterContext.tsx b/packages/react/src/components/IonRouterContext.tsx index ff543fd2f63..f72e071da95 100644 --- a/packages/react/src/components/IonRouterContext.tsx +++ b/packages/react/src/components/IonRouterContext.tsx @@ -1,4 +1,4 @@ -import { AnimationBuilder } from '@ionic/core'; +import { AnimationBuilder } from '@ionic/core/components'; import React, { useContext } from 'react'; import { RouteAction, RouterDirection, RouterOptions } from '../models'; diff --git a/packages/react/src/components/IonRouterOutlet.tsx b/packages/react/src/components/IonRouterOutlet.tsx index 47ef671473c..bc74e42c2a9 100644 --- a/packages/react/src/components/IonRouterOutlet.tsx +++ b/packages/react/src/components/IonRouterOutlet.tsx @@ -1,4 +1,4 @@ -import { JSX as LocalJSX } from '@ionic/core'; +import { JSX as LocalJSX } from '@ionic/core/components'; import React from 'react'; import { NavContext } from '../contexts/NavContext'; diff --git a/packages/react/src/components/IonToast.tsx b/packages/react/src/components/IonToast.tsx index 87e842c5e61..0c5fbf2b00b 100644 --- a/packages/react/src/components/IonToast.tsx +++ b/packages/react/src/components/IonToast.tsx @@ -2,7 +2,8 @@ import { ToastButton as ToastButtonCore, ToastOptions as ToastOptionsCore, toastController as toastControllerCore, -} from '@ionic/core'; +} from '@ionic/core/components'; +import { IonToast as IonToastCmp } from '@ionic/core/components/ion-toast.js'; import { createControllerComponent } from './createControllerComponent'; @@ -27,6 +28,7 @@ const toastController = { }; export const IonToast = /*@__PURE__*/ createControllerComponent( - 'IonToast', - toastController + 'ion-toast', + toastController, + IonToastCmp ); diff --git a/packages/react/src/components/__tests__/IonButton.spec.tsx b/packages/react/src/components/__tests__/IonButton.spec.tsx deleted file mode 100644 index 7477a19d4ab..00000000000 --- a/packages/react/src/components/__tests__/IonButton.spec.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import { render, fireEvent, cleanup } from '@testing-library/react'; -import { IonButton } from '../index'; -import { defineCustomElements } from '@ionic/core/loader'; - -describe('IonButton', () => { - beforeAll(async (done) => { - await defineCustomElements(window); - done(); - }); - - afterEach(cleanup); - - it('should render a button', () => { - const { getByText } = render(my button); - const button = getByText('my button'); - expect(button).toBeDefined(); - }); - - it('when the button is clicked, it should call the click handler', () => { - const clickSpy = jest.fn(); - const { getByText } = render(my button); - const button = getByText('my button'); - fireEvent.click(button); - expect(clickSpy).toHaveBeenCalled(); - }); -}); diff --git a/packages/react/src/components/__tests__/IonTabs.spec.tsx b/packages/react/src/components/__tests__/IonTabs.spec.tsx deleted file mode 100644 index e381f1701e5..00000000000 --- a/packages/react/src/components/__tests__/IonTabs.spec.tsx +++ /dev/null @@ -1,87 +0,0 @@ -import React from 'react'; -import { IonTabs, IonTabButton, IonLabel, IonIcon, IonTabBar } from '../index'; -import { render, cleanup } from '@testing-library/react'; -import { IonRouterOutlet } from '../IonRouterOutlet'; - -afterEach(cleanup); - -describe('IonTabs', () => { - test('should render happy path', () => { - const { container } = render( - - - - - Schedule - - - - Speakers - - - - Map - - - - About - - - - - ); - - expect(container.children[0].children.length).toEqual(2); - expect(container.children[0].children[0].tagName).toEqual('DIV'); - expect(container.children[0].children[0].className).toEqual('tabs-inner'); - - expect(container.children[0].children[1].tagName).toEqual('ION-TAB-BAR'); - expect(container.children[0].children[1].children.length).toEqual(4); - expect(Array.from(container.children[0].children[1].children).map((c) => c.tagName)).toEqual([ - 'ION-TAB-BUTTON', - 'ION-TAB-BUTTON', - 'ION-TAB-BUTTON', - 'ION-TAB-BUTTON', - ]); - }); - - test('should allow for conditional children', () => { - const { container } = render( - - - - {false && ( - - Schedule - - - )} - - Speakers - - - - Map - - - - About - - - - - ); - - expect(container.children[0].children.length).toEqual(2); - expect(container.children[0].children[0].tagName).toEqual('DIV'); - expect(container.children[0].children[0].className).toEqual('tabs-inner'); - - expect(container.children[0].children[1].tagName).toEqual('ION-TAB-BAR'); - expect(container.children[0].children[1].children.length).toEqual(3); - expect(Array.from(container.children[0].children[1].children).map((c) => c.tagName)).toEqual([ - 'ION-TAB-BUTTON', - 'ION-TAB-BUTTON', - 'ION-TAB-BUTTON', - ]); - }); -}); diff --git a/packages/react/src/components/__tests__/createComponent.spec.tsx b/packages/react/src/components/__tests__/createComponent.spec.tsx deleted file mode 100644 index b288efb6130..00000000000 --- a/packages/react/src/components/__tests__/createComponent.spec.tsx +++ /dev/null @@ -1,128 +0,0 @@ -import React from 'react'; -import { JSX } from '@ionic/core'; -import { createReactComponent } from '../react-component-lib'; -import { render, fireEvent, cleanup, RenderResult } from '@testing-library/react'; -import { IonButton } from '../index'; - -afterEach(cleanup); - -describe('createComponent - events', () => { - test('should set events on handler', () => { - const FakeOnClick = jest.fn((e) => e); - const IonButton = createReactComponent('ion-button'); - - const { getByText } = render(ButtonNameA); - fireEvent.click(getByText('ButtonNameA')); - expect(FakeOnClick).toBeCalledTimes(1); - }); - - test('should add custom events', () => { - const FakeIonFocus = jest.fn((e) => e); - const IonInput = createReactComponent('ion-input'); - - const { getByText } = render(ButtonNameA); - const ionInputItem = getByText('ButtonNameA'); - expect(Object.keys((ionInputItem as any).__events)).toEqual(['ionFocus']); - }); -}); - -describe('createComponent - ref', () => { - test('should pass ref on to web component instance (RefObject)', () => { - const ionButtonRef: React.RefObject = React.createRef(); - const IonButton = createReactComponent('ion-button'); - - const { getByText } = render(ButtonNameA); - const ionButtonItem = getByText('ButtonNameA'); - expect(ionButtonRef.current).toEqual(ionButtonItem); - }); - - test('should pass ref on to web component instance (RefCallback)', () => { - let current - const ionButtonRef: React.RefCallback = value => current = value; - const IonButton = createReactComponent('ion-button'); - - const { getByText } = render(ButtonNameA); - const ionButtonItem = getByText('ButtonNameA'); - expect(current).toEqual(ionButtonItem); - }); -}); - -describe('createComponent - strict mode', () => { - beforeEach(() => (console.error = (...data: any[]) => { - throw new Error(...data); - })); - - test('should work without errors in strict mode', () => { - const renderResult = render( - - Strict Mode Rocks - - ); - expect(renderResult.getByText(/Rocks/)).toBeTruthy(); - }); -}); - -describe('when working with css classes', () => { - const myClass = 'my-class'; - const myClass2 = 'my-class2'; - const customClass = 'custom-class'; - - describe('when a class is added to className', () => { - let renderResult: RenderResult; - let button: HTMLElement; - - beforeEach(() => { - renderResult = render(Hello!); - button = renderResult.getByText(/Hello/); - }); - - it('then it should be in the class list', () => { - expect(button.classList.contains(myClass)).toBeTruthy(); - }); - - it('when a class is added to class list outside of React, then that class should still be in class list when rendered again', () => { - button.classList.add(customClass); - expect(button.classList.contains(customClass)).toBeTruthy(); - renderResult.rerender(Hello!); - expect(button.classList.contains(customClass)).toBeTruthy(); - }); - }); - - describe('when multiple classes are added to className', () => { - let renderResult: RenderResult; - let button: HTMLElement; - - beforeEach(() => { - renderResult = render(Hello!); - button = renderResult.getByText(/Hello/); - }); - - it('then both classes should be in class list', () => { - expect(button.classList.contains(myClass)).toBeTruthy(); - expect(button.classList.contains(myClass2)).toBeTruthy(); - }); - - it('when one of the classes is removed, then only the remaining class should be in class list', () => { - expect(button.classList.contains(myClass)).toBeTruthy(); - expect(button.classList.contains(myClass2)).toBeTruthy(); - - renderResult.rerender(Hello!); - - expect(button.classList.contains(myClass)).toBeTruthy(); - expect(button.classList.contains(myClass2)).toBeFalsy(); - }); - - it('when a custom class is added outside of React and one of the classes is removed, then only the remaining class and the custom class should be in class list', () => { - button.classList.add(customClass); - expect(button.classList.contains(myClass)).toBeTruthy(); - expect(button.classList.contains(myClass2)).toBeTruthy(); - expect(button.classList.contains(customClass)).toBeTruthy(); - - renderResult.rerender(Hello!); - - expect(button.classList.contains(myClass)).toBeTruthy(); - expect(button.classList.contains(myClass)).toBeTruthy(); - expect(button.classList.contains(myClass2)).toBeFalsy(); - }); - }); -}); diff --git a/packages/react/src/components/createControllerComponent.tsx b/packages/react/src/components/createControllerComponent.tsx index 595f8202180..8078d00aab9 100644 --- a/packages/react/src/components/createControllerComponent.tsx +++ b/packages/react/src/components/createControllerComponent.tsx @@ -1,7 +1,7 @@ -import { OverlayEventDetail } from '@ionic/core'; +import { OverlayEventDetail } from '@ionic/core/components'; import React from 'react'; -import { attachProps, setRef } from './react-component-lib/utils'; +import { attachProps, dashToPascalCase, defineCustomElement, setRef } from './react-component-lib/utils'; interface OverlayBase extends HTMLElement { present: () => Promise; @@ -20,9 +20,13 @@ export const createControllerComponent = < OptionsType extends object, OverlayType extends OverlayBase >( - displayName: string, - controller: { create: (options: OptionsType) => Promise } + tagName: string, + controller: { create: (options: OptionsType) => Promise }, + customElement?: any ) => { + defineCustomElement(tagName, customElement); + + const displayName = dashToPascalCase(tagName); const didDismissEventName = `on${displayName}DidDismiss`; const didPresentEventName = `on${displayName}DidPresent`; const willDismissEventName = `on${displayName}WillDismiss`; diff --git a/packages/react/src/components/createInlineOverlayComponent.tsx b/packages/react/src/components/createInlineOverlayComponent.tsx index f0c654850cb..b063288b0dd 100644 --- a/packages/react/src/components/createInlineOverlayComponent.tsx +++ b/packages/react/src/components/createInlineOverlayComponent.tsx @@ -1,16 +1,15 @@ -import { OverlayEventDetail } from '@ionic/core' +import { OverlayEventDetail } from '@ionic/core/components' import React from 'react'; import { attachProps, camelToDashCase, dashToPascalCase, + defineCustomElement, isCoveredByReact, mergeRefs, } from './react-component-lib/utils'; -import { - createForwardRef -} from './utils'; +import { createForwardRef } from './utils'; type InlineOverlayState = { isOpen: boolean; @@ -26,8 +25,11 @@ interface IonicReactInternalProps extends React.HTMLAttributes( - tagName: string + tagName: string, + customElement?: any ) => { + defineCustomElement(tagName, customElement); + const displayName = dashToPascalCase(tagName); const ReactComponent = class extends React.Component, InlineOverlayState> { ref: React.RefObject; diff --git a/packages/react/src/components/createOverlayComponent.tsx b/packages/react/src/components/createOverlayComponent.tsx index 3bfa077367d..608b4179c8e 100644 --- a/packages/react/src/components/createOverlayComponent.tsx +++ b/packages/react/src/components/createOverlayComponent.tsx @@ -1,8 +1,8 @@ -import { OverlayEventDetail } from '@ionic/core'; +import { OverlayEventDetail } from '@ionic/core/components'; import React from 'react'; import ReactDOM from 'react-dom'; -import { attachProps, setRef } from './react-component-lib/utils'; +import { attachProps, dashToPascalCase, defineCustomElement, setRef } from './react-component-lib/utils'; interface OverlayElement extends HTMLElement { present: () => Promise; @@ -22,9 +22,13 @@ export const createOverlayComponent = < OverlayComponent extends object, OverlayType extends OverlayElement >( - displayName: string, - controller: { create: (options: any) => Promise } + tagName: string, + controller: { create: (options: any) => Promise }, + customElement?: any ) => { + defineCustomElement(tagName, customElement); + + const displayName = dashToPascalCase(tagName); const didDismissEventName = `on${displayName}DidDismiss`; const didPresentEventName = `on${displayName}DidPresent`; const willDismissEventName = `on${displayName}WillDismiss`; diff --git a/packages/react/src/components/createRoutingComponent.tsx b/packages/react/src/components/createRoutingComponent.tsx index 4931db4add8..f0341f4f429 100644 --- a/packages/react/src/components/createRoutingComponent.tsx +++ b/packages/react/src/components/createRoutingComponent.tsx @@ -1,4 +1,4 @@ -import { AnimationBuilder } from '@ionic/core'; +import { AnimationBuilder } from '@ionic/core/components'; import React from 'react'; import { NavContext } from '../contexts/NavContext'; @@ -9,12 +9,11 @@ import { attachProps, camelToDashCase, dashToPascalCase, + defineCustomElement, isCoveredByReact, mergeRefs, } from './react-component-lib/utils'; -import { - createForwardRef -} from './utils'; +import { createForwardRef } from './utils'; interface IonicReactInternalProps extends React.HTMLAttributes { forwardedRef?: React.ForwardedRef; @@ -27,8 +26,11 @@ interface IonicReactInternalProps extends React.HTMLAttributes( - tagName: string + tagName: string, + customElement?: any ) => { + defineCustomElement(tagName, customElement); + const displayName = dashToPascalCase(tagName); const ReactComponent = class extends React.Component> { context!: React.ContextType; diff --git a/packages/react/src/components/hrefprops.ts b/packages/react/src/components/hrefprops.ts index 52bf851ff6e..e95732c2bf8 100644 --- a/packages/react/src/components/hrefprops.ts +++ b/packages/react/src/components/hrefprops.ts @@ -1,4 +1,4 @@ -import { AnimationBuilder } from '@ionic/core'; +import { AnimationBuilder } from '@ionic/core/components'; import { RouterOptions } from '../models'; import { RouterDirection } from '../models/RouterDirection'; diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts index 6ab65c6985b..c292ad12dae 100644 --- a/packages/react/src/components/index.ts +++ b/packages/react/src/components/index.ts @@ -1,4 +1,4 @@ -import { defineCustomElements } from '@ionic/core/loader'; +import { initialize } from '@ionic/core/components'; import { addIcons } from 'ionicons'; import { arrowBackSharp, @@ -34,6 +34,7 @@ export { mdTransitionAnimation, NavComponentWithProps, setupConfig, + initialize, IonicSwiper, SpinnerTypes, @@ -60,7 +61,7 @@ export { ToastOptions, ToastButton -} from '@ionic/core'; +} from '@ionic/core/components'; export * from './proxies'; export * from './routing-proxies'; @@ -122,8 +123,13 @@ addIcons({ 'search-sharp': searchSharp, }); -// TODO: defineCustomElements() is asyncronous -// We need to use the promise -if (typeof window !== 'undefined') { - defineCustomElements(window); -} +/** + * 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(); diff --git a/packages/react/src/components/inner-proxies.ts b/packages/react/src/components/inner-proxies.ts index 884b1b2792c..549a2256746 100644 --- a/packages/react/src/components/inner-proxies.ts +++ b/packages/react/src/components/inner-proxies.ts @@ -1,30 +1,35 @@ -import { JSX } from '@ionic/core'; +import { JSX } from '@ionic/core/components'; +import { IonBackButton as IonBackButtonCmp } from '@ionic/core/components/ion-back-button.js'; +import { IonRouterOutlet as IonRouterOutletCmp } from '@ionic/core/components/ion-router-outlet.js'; +import { IonTabBar as IonTabBarCmp } from '@ionic/core/components/ion-tab-bar.js'; +import { IonTabButton as IonTabButtonCmp } from '@ionic/core/components/ion-tab-button.js'; import { JSX as IoniconsJSX } from 'ionicons'; +import { IonIcon as IonIconCmp } from 'ionicons/components/ion-icon.js'; import { /*@__PURE__*/ createReactComponent } from './react-component-lib'; export const IonTabButtonInner = /*@__PURE__*/ createReactComponent< JSX.IonTabButton & { onIonTabButtonClick?: (e: CustomEvent) => void }, HTMLIonTabButtonElement ->('ion-tab-button'); +>('ion-tab-button', IonTabButtonCmp); export const IonTabBarInner = /*@__PURE__*/ createReactComponent< JSX.IonTabBar, HTMLIonTabBarElement ->('ion-tab-bar'); +>('ion-tab-bar', IonTabBarCmp); export const IonBackButtonInner = /*@__PURE__*/ createReactComponent< Omit, HTMLIonBackButtonElement ->('ion-back-button'); +>('ion-back-button', IonBackButtonCmp); export const IonRouterOutletInner = /*@__PURE__*/ createReactComponent< JSX.IonRouterOutlet & { setRef?: (val: HTMLIonRouterOutletElement) => void; forwardedRef?: React.ForwardedRef; }, HTMLIonRouterOutletElement ->('ion-router-outlet'); +>('ion-router-outlet', IonRouterOutletCmp); // ionicons export const IonIconInner = /*@__PURE__*/ createReactComponent< IoniconsJSX.IonIcon, HTMLIonIconElement ->('ion-icon'); +>('ion-icon', IonIconCmp); diff --git a/packages/react/src/components/navigation/IonBackButton.tsx b/packages/react/src/components/navigation/IonBackButton.tsx index 262fdbd4a73..a620678cf9a 100644 --- a/packages/react/src/components/navigation/IonBackButton.tsx +++ b/packages/react/src/components/navigation/IonBackButton.tsx @@ -1,4 +1,4 @@ -import { JSX as LocalJSX } from '@ionic/core'; +import { JSX as LocalJSX } from '@ionic/core/components'; import React from 'react'; import { NavContext } from '../../contexts/NavContext'; diff --git a/packages/react/src/components/navigation/IonTabBar.tsx b/packages/react/src/components/navigation/IonTabBar.tsx index 9f559c7e05e..5a906a42d74 100644 --- a/packages/react/src/components/navigation/IonTabBar.tsx +++ b/packages/react/src/components/navigation/IonTabBar.tsx @@ -1,4 +1,4 @@ -import { JSX as LocalJSX } from '@ionic/core'; +import { JSX as LocalJSX } from '@ionic/core/components'; import React, { useContext } from 'react'; import { NavContext } from '../../contexts/NavContext'; diff --git a/packages/react/src/components/navigation/IonTabButton.tsx b/packages/react/src/components/navigation/IonTabButton.tsx index 7b57d8711b7..9f7cecfdd69 100644 --- a/packages/react/src/components/navigation/IonTabButton.tsx +++ b/packages/react/src/components/navigation/IonTabButton.tsx @@ -1,4 +1,4 @@ -import { JSX as LocalJSX } from '@ionic/core'; +import { JSX as LocalJSX } from '@ionic/core/components'; import React from 'react'; import { RouterOptions } from '../../models'; diff --git a/packages/react/src/components/navigation/IonTabs.tsx b/packages/react/src/components/navigation/IonTabs.tsx index 151918622ea..973a88f0d39 100644 --- a/packages/react/src/components/navigation/IonTabs.tsx +++ b/packages/react/src/components/navigation/IonTabs.tsx @@ -1,4 +1,4 @@ -import { JSX as LocalJSX } from '@ionic/core'; +import { JSX as LocalJSX } from '@ionic/core/components'; import React, { Fragment } from 'react'; import { NavContext } from '../../contexts/NavContext'; diff --git a/packages/react/src/components/proxies.ts b/packages/react/src/components/proxies.ts index ca7840b3a37..5dd93e340b7 100644 --- a/packages/react/src/components/proxies.ts +++ b/packages/react/src/components/proxies.ts @@ -3,75 +3,142 @@ /* auto-generated react proxies */ import { createReactComponent } from './react-component-lib'; -import type { JSX } from '@ionic/core'; +import type { JSX } from '@ionic/core/components'; +import { IonAccordion as IonAccordionCmp } from '@ionic/core/components/ion-accordion.js'; +import { IonAccordionGroup as IonAccordionGroupCmp } from '@ionic/core/components/ion-accordion-group.js'; +import { IonApp as IonAppCmp } from '@ionic/core/components/ion-app.js'; +import { IonAvatar as IonAvatarCmp } from '@ionic/core/components/ion-avatar.js'; +import { IonBackdrop as IonBackdropCmp } from '@ionic/core/components/ion-backdrop.js'; +import { IonBadge as IonBadgeCmp } from '@ionic/core/components/ion-badge.js'; +import { IonBreadcrumb as IonBreadcrumbCmp } from '@ionic/core/components/ion-breadcrumb.js'; +import { IonBreadcrumbs as IonBreadcrumbsCmp } from '@ionic/core/components/ion-breadcrumbs.js'; +import { IonButtons as IonButtonsCmp } from '@ionic/core/components/ion-buttons.js'; +import { IonCardContent as IonCardContentCmp } from '@ionic/core/components/ion-card-content.js'; +import { IonCardHeader as IonCardHeaderCmp } from '@ionic/core/components/ion-card-header.js'; +import { IonCardSubtitle as IonCardSubtitleCmp } from '@ionic/core/components/ion-card-subtitle.js'; +import { IonCardTitle as IonCardTitleCmp } from '@ionic/core/components/ion-card-title.js'; +import { IonCheckbox as IonCheckboxCmp } from '@ionic/core/components/ion-checkbox.js'; +import { IonChip as IonChipCmp } from '@ionic/core/components/ion-chip.js'; +import { IonCol as IonColCmp } from '@ionic/core/components/ion-col.js'; +import { IonContent as IonContentCmp } from '@ionic/core/components/ion-content.js'; +import { IonDatetime as IonDatetimeCmp } from '@ionic/core/components/ion-datetime.js'; +import { IonFab as IonFabCmp } from '@ionic/core/components/ion-fab.js'; +import { IonFabList as IonFabListCmp } from '@ionic/core/components/ion-fab-list.js'; +import { IonFooter as IonFooterCmp } from '@ionic/core/components/ion-footer.js'; +import { IonGrid as IonGridCmp } from '@ionic/core/components/ion-grid.js'; +import { IonHeader as IonHeaderCmp } from '@ionic/core/components/ion-header.js'; +import { IonImg as IonImgCmp } from '@ionic/core/components/ion-img.js'; +import { IonInfiniteScroll as IonInfiniteScrollCmp } from '@ionic/core/components/ion-infinite-scroll.js'; +import { IonInfiniteScrollContent as IonInfiniteScrollContentCmp } from '@ionic/core/components/ion-infinite-scroll-content.js'; +import { IonInput as IonInputCmp } from '@ionic/core/components/ion-input.js'; +import { IonItemDivider as IonItemDividerCmp } from '@ionic/core/components/ion-item-divider.js'; +import { IonItemGroup as IonItemGroupCmp } from '@ionic/core/components/ion-item-group.js'; +import { IonItemOptions as IonItemOptionsCmp } from '@ionic/core/components/ion-item-options.js'; +import { IonItemSliding as IonItemSlidingCmp } from '@ionic/core/components/ion-item-sliding.js'; +import { IonLabel as IonLabelCmp } from '@ionic/core/components/ion-label.js'; +import { IonList as IonListCmp } from '@ionic/core/components/ion-list.js'; +import { IonListHeader as IonListHeaderCmp } from '@ionic/core/components/ion-list-header.js'; +import { IonMenu as IonMenuCmp } from '@ionic/core/components/ion-menu.js'; +import { IonMenuButton as IonMenuButtonCmp } from '@ionic/core/components/ion-menu-button.js'; +import { IonMenuToggle as IonMenuToggleCmp } from '@ionic/core/components/ion-menu-toggle.js'; +import { IonNav as IonNavCmp } from '@ionic/core/components/ion-nav.js'; +import { IonNavLink as IonNavLinkCmp } from '@ionic/core/components/ion-nav-link.js'; +import { IonNote as IonNoteCmp } from '@ionic/core/components/ion-note.js'; +import { IonProgressBar as IonProgressBarCmp } from '@ionic/core/components/ion-progress-bar.js'; +import { IonRadio as IonRadioCmp } from '@ionic/core/components/ion-radio.js'; +import { IonRadioGroup as IonRadioGroupCmp } from '@ionic/core/components/ion-radio-group.js'; +import { IonRange as IonRangeCmp } from '@ionic/core/components/ion-range.js'; +import { IonRefresher as IonRefresherCmp } from '@ionic/core/components/ion-refresher.js'; +import { IonRefresherContent as IonRefresherContentCmp } from '@ionic/core/components/ion-refresher-content.js'; +import { IonReorder as IonReorderCmp } from '@ionic/core/components/ion-reorder.js'; +import { IonReorderGroup as IonReorderGroupCmp } from '@ionic/core/components/ion-reorder-group.js'; +import { IonRippleEffect as IonRippleEffectCmp } from '@ionic/core/components/ion-ripple-effect.js'; +import { IonRow as IonRowCmp } from '@ionic/core/components/ion-row.js'; +import { IonSearchbar as IonSearchbarCmp } from '@ionic/core/components/ion-searchbar.js'; +import { IonSegment as IonSegmentCmp } from '@ionic/core/components/ion-segment.js'; +import { IonSegmentButton as IonSegmentButtonCmp } from '@ionic/core/components/ion-segment-button.js'; +import { IonSelect as IonSelectCmp } from '@ionic/core/components/ion-select.js'; +import { IonSelectOption as IonSelectOptionCmp } from '@ionic/core/components/ion-select-option.js'; +import { IonSkeletonText as IonSkeletonTextCmp } from '@ionic/core/components/ion-skeleton-text.js'; +import { IonSlide as IonSlideCmp } from '@ionic/core/components/ion-slide.js'; +import { IonSlides as IonSlidesCmp } from '@ionic/core/components/ion-slides.js'; +import { IonSpinner as IonSpinnerCmp } from '@ionic/core/components/ion-spinner.js'; +import { IonSplitPane as IonSplitPaneCmp } from '@ionic/core/components/ion-split-pane.js'; +import { IonTab as IonTabCmp } from '@ionic/core/components/ion-tab.js'; +import { IonText as IonTextCmp } from '@ionic/core/components/ion-text.js'; +import { IonTextarea as IonTextareaCmp } from '@ionic/core/components/ion-textarea.js'; +import { IonThumbnail as IonThumbnailCmp } from '@ionic/core/components/ion-thumbnail.js'; +import { IonTitle as IonTitleCmp } from '@ionic/core/components/ion-title.js'; +import { IonToggle as IonToggleCmp } from '@ionic/core/components/ion-toggle.js'; +import { IonToolbar as IonToolbarCmp } from '@ionic/core/components/ion-toolbar.js'; +import { IonVirtualScroll as IonVirtualScrollCmp } from '@ionic/core/components/ion-virtual-scroll.js'; - -export const IonAccordion = /*@__PURE__*/createReactComponent('ion-accordion'); -export const IonAccordionGroup = /*@__PURE__*/createReactComponent('ion-accordion-group'); -export const IonApp = /*@__PURE__*/createReactComponent('ion-app'); -export const IonAvatar = /*@__PURE__*/createReactComponent('ion-avatar'); -export const IonBackdrop = /*@__PURE__*/createReactComponent('ion-backdrop'); -export const IonBadge = /*@__PURE__*/createReactComponent('ion-badge'); -export const IonBreadcrumb = /*@__PURE__*/createReactComponent('ion-breadcrumb'); -export const IonBreadcrumbs = /*@__PURE__*/createReactComponent('ion-breadcrumbs'); -export const IonButtons = /*@__PURE__*/createReactComponent('ion-buttons'); -export const IonCardContent = /*@__PURE__*/createReactComponent('ion-card-content'); -export const IonCardHeader = /*@__PURE__*/createReactComponent('ion-card-header'); -export const IonCardSubtitle = /*@__PURE__*/createReactComponent('ion-card-subtitle'); -export const IonCardTitle = /*@__PURE__*/createReactComponent('ion-card-title'); -export const IonCheckbox = /*@__PURE__*/createReactComponent('ion-checkbox'); -export const IonChip = /*@__PURE__*/createReactComponent('ion-chip'); -export const IonCol = /*@__PURE__*/createReactComponent('ion-col'); -export const IonContent = /*@__PURE__*/createReactComponent('ion-content'); -export const IonDatetime = /*@__PURE__*/createReactComponent('ion-datetime'); -export const IonFab = /*@__PURE__*/createReactComponent('ion-fab'); -export const IonFabList = /*@__PURE__*/createReactComponent('ion-fab-list'); -export const IonFooter = /*@__PURE__*/createReactComponent('ion-footer'); -export const IonGrid = /*@__PURE__*/createReactComponent('ion-grid'); -export const IonHeader = /*@__PURE__*/createReactComponent('ion-header'); -export const IonImg = /*@__PURE__*/createReactComponent('ion-img'); -export const IonInfiniteScroll = /*@__PURE__*/createReactComponent('ion-infinite-scroll'); -export const IonInfiniteScrollContent = /*@__PURE__*/createReactComponent('ion-infinite-scroll-content'); -export const IonInput = /*@__PURE__*/createReactComponent('ion-input'); -export const IonItemDivider = /*@__PURE__*/createReactComponent('ion-item-divider'); -export const IonItemGroup = /*@__PURE__*/createReactComponent('ion-item-group'); -export const IonItemOptions = /*@__PURE__*/createReactComponent('ion-item-options'); -export const IonItemSliding = /*@__PURE__*/createReactComponent('ion-item-sliding'); -export const IonLabel = /*@__PURE__*/createReactComponent('ion-label'); -export const IonList = /*@__PURE__*/createReactComponent('ion-list'); -export const IonListHeader = /*@__PURE__*/createReactComponent('ion-list-header'); -export const IonMenu = /*@__PURE__*/createReactComponent('ion-menu'); -export const IonMenuButton = /*@__PURE__*/createReactComponent('ion-menu-button'); -export const IonMenuToggle = /*@__PURE__*/createReactComponent('ion-menu-toggle'); -export const IonNav = /*@__PURE__*/createReactComponent('ion-nav'); -export const IonNavLink = /*@__PURE__*/createReactComponent('ion-nav-link'); -export const IonNote = /*@__PURE__*/createReactComponent('ion-note'); -export const IonProgressBar = /*@__PURE__*/createReactComponent('ion-progress-bar'); -export const IonRadio = /*@__PURE__*/createReactComponent('ion-radio'); -export const IonRadioGroup = /*@__PURE__*/createReactComponent('ion-radio-group'); -export const IonRange = /*@__PURE__*/createReactComponent('ion-range'); -export const IonRefresher = /*@__PURE__*/createReactComponent('ion-refresher'); -export const IonRefresherContent = /*@__PURE__*/createReactComponent('ion-refresher-content'); -export const IonReorder = /*@__PURE__*/createReactComponent('ion-reorder'); -export const IonReorderGroup = /*@__PURE__*/createReactComponent('ion-reorder-group'); -export const IonRippleEffect = /*@__PURE__*/createReactComponent('ion-ripple-effect'); -export const IonRow = /*@__PURE__*/createReactComponent('ion-row'); -export const IonSearchbar = /*@__PURE__*/createReactComponent('ion-searchbar'); -export const IonSegment = /*@__PURE__*/createReactComponent('ion-segment'); -export const IonSegmentButton = /*@__PURE__*/createReactComponent('ion-segment-button'); -export const IonSelect = /*@__PURE__*/createReactComponent('ion-select'); -export const IonSelectOption = /*@__PURE__*/createReactComponent('ion-select-option'); -export const IonSkeletonText = /*@__PURE__*/createReactComponent('ion-skeleton-text'); -export const IonSlide = /*@__PURE__*/createReactComponent('ion-slide'); -export const IonSlides = /*@__PURE__*/createReactComponent('ion-slides'); -export const IonSpinner = /*@__PURE__*/createReactComponent('ion-spinner'); -export const IonSplitPane = /*@__PURE__*/createReactComponent('ion-split-pane'); -export const IonTab = /*@__PURE__*/createReactComponent('ion-tab'); -export const IonText = /*@__PURE__*/createReactComponent('ion-text'); -export const IonTextarea = /*@__PURE__*/createReactComponent('ion-textarea'); -export const IonThumbnail = /*@__PURE__*/createReactComponent('ion-thumbnail'); -export const IonTitle = /*@__PURE__*/createReactComponent('ion-title'); -export const IonToggle = /*@__PURE__*/createReactComponent('ion-toggle'); -export const IonToolbar = /*@__PURE__*/createReactComponent('ion-toolbar'); -export const IonVirtualScroll = /*@__PURE__*/createReactComponent('ion-virtual-scroll'); +export const IonAccordion = /*@__PURE__*/createReactComponent('ion-accordion', IonAccordionCmp); +export const IonAccordionGroup = /*@__PURE__*/createReactComponent('ion-accordion-group', IonAccordionGroupCmp); +export const IonApp = /*@__PURE__*/createReactComponent('ion-app', IonAppCmp); +export const IonAvatar = /*@__PURE__*/createReactComponent('ion-avatar', IonAvatarCmp); +export const IonBackdrop = /*@__PURE__*/createReactComponent('ion-backdrop', IonBackdropCmp); +export const IonBadge = /*@__PURE__*/createReactComponent('ion-badge', IonBadgeCmp); +export const IonBreadcrumb = /*@__PURE__*/createReactComponent('ion-breadcrumb', IonBreadcrumbCmp); +export const IonBreadcrumbs = /*@__PURE__*/createReactComponent('ion-breadcrumbs', IonBreadcrumbsCmp); +export const IonButtons = /*@__PURE__*/createReactComponent('ion-buttons', IonButtonsCmp); +export const IonCardContent = /*@__PURE__*/createReactComponent('ion-card-content', IonCardContentCmp); +export const IonCardHeader = /*@__PURE__*/createReactComponent('ion-card-header', IonCardHeaderCmp); +export const IonCardSubtitle = /*@__PURE__*/createReactComponent('ion-card-subtitle', IonCardSubtitleCmp); +export const IonCardTitle = /*@__PURE__*/createReactComponent('ion-card-title', IonCardTitleCmp); +export const IonCheckbox = /*@__PURE__*/createReactComponent('ion-checkbox', IonCheckboxCmp); +export const IonChip = /*@__PURE__*/createReactComponent('ion-chip', IonChipCmp); +export const IonCol = /*@__PURE__*/createReactComponent('ion-col', IonColCmp); +export const IonContent = /*@__PURE__*/createReactComponent('ion-content', IonContentCmp); +export const IonDatetime = /*@__PURE__*/createReactComponent('ion-datetime', IonDatetimeCmp); +export const IonFab = /*@__PURE__*/createReactComponent('ion-fab', IonFabCmp); +export const IonFabList = /*@__PURE__*/createReactComponent('ion-fab-list', IonFabListCmp); +export const IonFooter = /*@__PURE__*/createReactComponent('ion-footer', IonFooterCmp); +export const IonGrid = /*@__PURE__*/createReactComponent('ion-grid', IonGridCmp); +export const IonHeader = /*@__PURE__*/createReactComponent('ion-header', IonHeaderCmp); +export const IonImg = /*@__PURE__*/createReactComponent('ion-img', IonImgCmp); +export const IonInfiniteScroll = /*@__PURE__*/createReactComponent('ion-infinite-scroll', IonInfiniteScrollCmp); +export const IonInfiniteScrollContent = /*@__PURE__*/createReactComponent('ion-infinite-scroll-content', IonInfiniteScrollContentCmp); +export const IonInput = /*@__PURE__*/createReactComponent('ion-input', IonInputCmp); +export const IonItemDivider = /*@__PURE__*/createReactComponent('ion-item-divider', IonItemDividerCmp); +export const IonItemGroup = /*@__PURE__*/createReactComponent('ion-item-group', IonItemGroupCmp); +export const IonItemOptions = /*@__PURE__*/createReactComponent('ion-item-options', IonItemOptionsCmp); +export const IonItemSliding = /*@__PURE__*/createReactComponent('ion-item-sliding', IonItemSlidingCmp); +export const IonLabel = /*@__PURE__*/createReactComponent('ion-label', IonLabelCmp); +export const IonList = /*@__PURE__*/createReactComponent('ion-list', IonListCmp); +export const IonListHeader = /*@__PURE__*/createReactComponent('ion-list-header', IonListHeaderCmp); +export const IonMenu = /*@__PURE__*/createReactComponent('ion-menu', IonMenuCmp); +export const IonMenuButton = /*@__PURE__*/createReactComponent('ion-menu-button', IonMenuButtonCmp); +export const IonMenuToggle = /*@__PURE__*/createReactComponent('ion-menu-toggle', IonMenuToggleCmp); +export const IonNav = /*@__PURE__*/createReactComponent('ion-nav', IonNavCmp); +export const IonNavLink = /*@__PURE__*/createReactComponent('ion-nav-link', IonNavLinkCmp); +export const IonNote = /*@__PURE__*/createReactComponent('ion-note', IonNoteCmp); +export const IonProgressBar = /*@__PURE__*/createReactComponent('ion-progress-bar', IonProgressBarCmp); +export const IonRadio = /*@__PURE__*/createReactComponent('ion-radio', IonRadioCmp); +export const IonRadioGroup = /*@__PURE__*/createReactComponent('ion-radio-group', IonRadioGroupCmp); +export const IonRange = /*@__PURE__*/createReactComponent('ion-range', IonRangeCmp); +export const IonRefresher = /*@__PURE__*/createReactComponent('ion-refresher', IonRefresherCmp); +export const IonRefresherContent = /*@__PURE__*/createReactComponent('ion-refresher-content', IonRefresherContentCmp); +export const IonReorder = /*@__PURE__*/createReactComponent('ion-reorder', IonReorderCmp); +export const IonReorderGroup = /*@__PURE__*/createReactComponent('ion-reorder-group', IonReorderGroupCmp); +export const IonRippleEffect = /*@__PURE__*/createReactComponent('ion-ripple-effect', IonRippleEffectCmp); +export const IonRow = /*@__PURE__*/createReactComponent('ion-row', IonRowCmp); +export const IonSearchbar = /*@__PURE__*/createReactComponent('ion-searchbar', IonSearchbarCmp); +export const IonSegment = /*@__PURE__*/createReactComponent('ion-segment', IonSegmentCmp); +export const IonSegmentButton = /*@__PURE__*/createReactComponent('ion-segment-button', IonSegmentButtonCmp); +export const IonSelect = /*@__PURE__*/createReactComponent('ion-select', IonSelectCmp); +export const IonSelectOption = /*@__PURE__*/createReactComponent('ion-select-option', IonSelectOptionCmp); +export const IonSkeletonText = /*@__PURE__*/createReactComponent('ion-skeleton-text', IonSkeletonTextCmp); +export const IonSlide = /*@__PURE__*/createReactComponent('ion-slide', IonSlideCmp); +export const IonSlides = /*@__PURE__*/createReactComponent('ion-slides', IonSlidesCmp); +export const IonSpinner = /*@__PURE__*/createReactComponent('ion-spinner', IonSpinnerCmp); +export const IonSplitPane = /*@__PURE__*/createReactComponent('ion-split-pane', IonSplitPaneCmp); +export const IonTab = /*@__PURE__*/createReactComponent('ion-tab', IonTabCmp); +export const IonText = /*@__PURE__*/createReactComponent('ion-text', IonTextCmp); +export const IonTextarea = /*@__PURE__*/createReactComponent('ion-textarea', IonTextareaCmp); +export const IonThumbnail = /*@__PURE__*/createReactComponent('ion-thumbnail', IonThumbnailCmp); +export const IonTitle = /*@__PURE__*/createReactComponent('ion-title', IonTitleCmp); +export const IonToggle = /*@__PURE__*/createReactComponent('ion-toggle', IonToggleCmp); +export const IonToolbar = /*@__PURE__*/createReactComponent('ion-toolbar', IonToolbarCmp); +export const IonVirtualScroll = /*@__PURE__*/createReactComponent('ion-virtual-scroll', IonVirtualScrollCmp); diff --git a/packages/react/src/components/react-component-lib/createComponent.tsx b/packages/react/src/components/react-component-lib/createComponent.tsx index b1fe50be6b8..91177adfc19 100644 --- a/packages/react/src/components/react-component-lib/createComponent.tsx +++ b/packages/react/src/components/react-component-lib/createComponent.tsx @@ -4,6 +4,7 @@ import { attachProps, createForwardRef, dashToPascalCase, + defineCustomElement, isCoveredByReact, mergeRefs, } from './utils'; @@ -24,14 +25,16 @@ export const createReactComponent = < ExpandedPropsTypes = {} >( tagName: string, + customElement?: any, ReactComponentContext?: React.Context, manipulatePropsFunction?: ( originalProps: StencilReactInternalProps, propsToPass: any, ) => ExpandedPropsTypes, ) => { - const displayName = dashToPascalCase(tagName); + defineCustomElement(tagName, customElement); + const displayName = dashToPascalCase(tagName); const ReactComponent = class extends React.Component> { componentEl!: ElementType; diff --git a/packages/react/src/components/react-component-lib/createOverlayComponent.tsx b/packages/react/src/components/react-component-lib/createOverlayComponent.tsx index c02d64c5bb4..3203c0deaf0 100644 --- a/packages/react/src/components/react-component-lib/createOverlayComponent.tsx +++ b/packages/react/src/components/react-component-lib/createOverlayComponent.tsx @@ -2,7 +2,13 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { OverlayEventDetail } from './interfaces'; -import { StencilReactForwardedRef, attachProps, setRef } from './utils'; +import { + StencilReactForwardedRef, + attachProps, + dashToPascalCase, + defineCustomElement, + setRef, +} from './utils'; interface OverlayElement extends HTMLElement { present: () => Promise; @@ -22,9 +28,13 @@ export const createOverlayComponent = < OverlayComponent extends object, OverlayType extends OverlayElement >( - displayName: string, - controller: { create: (options: any) => Promise } + tagName: string, + controller: { create: (options: any) => Promise }, + customElement?: any ) => { + defineCustomElement(tagName, customElement); + + const displayName = dashToPascalCase(tagName); const didDismissEventName = `on${displayName}DidDismiss`; const didPresentEventName = `on${displayName}DidPresent`; const willDismissEventName = `on${displayName}WillDismiss`; diff --git a/packages/react/src/components/react-component-lib/utils/index.tsx b/packages/react/src/components/react-component-lib/utils/index.tsx index 7557c1ed2fc..821d067433c 100644 --- a/packages/react/src/components/react-component-lib/utils/index.tsx +++ b/packages/react/src/components/react-component-lib/utils/index.tsx @@ -43,5 +43,15 @@ export const createForwardRef = ( return React.forwardRef(forwardRef); }; +export const defineCustomElement = (tagName: string, customElement: any) => { + if ( + customElement !== undefined && + typeof customElements !== 'undefined' && + !customElements.get(tagName) + ) { + customElements.define(tagName, customElement); + } +} + export * from './attachProps'; export * from './case'; diff --git a/packages/react/src/components/routing-proxies.ts b/packages/react/src/components/routing-proxies.ts index 1175d4b9684..3f2add9fbae 100644 --- a/packages/react/src/components/routing-proxies.ts +++ b/packages/react/src/components/routing-proxies.ts @@ -1,4 +1,10 @@ -import type { JSX } from '@ionic/core'; +import type { JSX } from '@ionic/core/components'; +import { IonButton as IonButtonCmp } from '@ionic/core/components/ion-button.js'; +import { IonCard as IonCardCmp } from '@ionic/core/components/ion-card.js'; +import { IonFabButton as IonFabButtonCmp } from '@ionic/core/components/ion-fab-button.js'; +import { IonItemOption as IonItemOptionCmp } from '@ionic/core/components/ion-item-option.js'; +import { IonItem as IonItemCmp } from '@ionic/core/components/ion-item.js'; +import { IonRouterLink as IonRouterLinkCmp } from '@ionic/core/components/ion-router-link.js'; import { createRoutingComponent } from './createRoutingComponent'; import { HrefProps } from './hrefprops'; @@ -6,29 +12,29 @@ import { HrefProps } from './hrefprops'; export const IonRouterLink = /*@__PURE__*/ createRoutingComponent< HrefProps, HTMLIonRouterLinkElement ->('ion-router-link'); +>('ion-router-link', IonRouterLinkCmp); export const IonButton = /*@__PURE__*/ createRoutingComponent< HrefProps, HTMLIonButtonElement ->('ion-button'); +>('ion-button', IonButtonCmp); export const IonCard = /*@__PURE__*/ createRoutingComponent< HrefProps, HTMLIonCardElement ->('ion-card'); +>('ion-card', IonCardCmp); export const IonFabButton = /*@__PURE__*/ createRoutingComponent< HrefProps, HTMLIonFabButtonElement ->('ion-fab-button'); +>('ion-fab-button', IonFabButtonCmp); export const IonItem = /*@__PURE__*/ createRoutingComponent< HrefProps, HTMLIonItemElement ->('ion-item'); +>('ion-item', IonItemCmp); export const IonItemOption = /*@__PURE__*/ createRoutingComponent< HrefProps, HTMLIonItemOptionElement ->('ion-item-option'); +>('ion-item-option', IonItemOptionCmp); diff --git a/packages/react/src/components/utils/index.tsx b/packages/react/src/components/utils/index.tsx index e52dd416517..af3f52e8de3 100644 --- a/packages/react/src/components/utils/index.tsx +++ b/packages/react/src/components/utils/index.tsx @@ -3,7 +3,7 @@ import { Platforms, getPlatforms as getPlatformsCore, isPlatform as isPlatformCore, -} from '@ionic/core'; +} from '@ionic/core/components'; import React from 'react'; import { IonicReactProps } from '../IonicReactProps'; diff --git a/packages/react/src/contexts/NavContext.ts b/packages/react/src/contexts/NavContext.ts index 739bffc20c8..c9cb4288f0e 100644 --- a/packages/react/src/contexts/NavContext.ts +++ b/packages/react/src/contexts/NavContext.ts @@ -1,4 +1,4 @@ -import { AnimationBuilder, RouterDirection } from '@ionic/core'; +import { AnimationBuilder, RouterDirection } from '@ionic/core/components'; import React from 'react'; import { RouteInfo } from '../models'; diff --git a/packages/react/src/hooks/HookOverlayOptions.ts b/packages/react/src/hooks/HookOverlayOptions.ts index 431652758c1..b97f0b0f3b6 100644 --- a/packages/react/src/hooks/HookOverlayOptions.ts +++ b/packages/react/src/hooks/HookOverlayOptions.ts @@ -1,4 +1,4 @@ -import { OverlayEventDetail } from '@ionic/core'; +import { OverlayEventDetail } from '@ionic/core/components'; export interface HookOverlayOptions { onDidDismiss?: (event: CustomEvent) => void; diff --git a/packages/react/src/hooks/useController.ts b/packages/react/src/hooks/useController.ts index 37f3c1dc77d..44f8c45cfc1 100644 --- a/packages/react/src/hooks/useController.ts +++ b/packages/react/src/hooks/useController.ts @@ -1,4 +1,4 @@ -import { OverlayEventDetail } from '@ionic/core'; +import { OverlayEventDetail } from '@ionic/core/components'; import { useMemo, useRef } from 'react'; import { attachProps } from '../components/react-component-lib/utils'; diff --git a/packages/react/src/hooks/useIonActionSheet.ts b/packages/react/src/hooks/useIonActionSheet.ts index cbd045f4ef5..ff9da0acfcf 100644 --- a/packages/react/src/hooks/useIonActionSheet.ts +++ b/packages/react/src/hooks/useIonActionSheet.ts @@ -1,4 +1,4 @@ -import { ActionSheetButton, ActionSheetOptions, actionSheetController } from '@ionic/core'; +import { ActionSheetButton, ActionSheetOptions, actionSheetController } from '@ionic/core/components'; import { HookOverlayOptions } from './HookOverlayOptions'; import { useController } from './useController'; diff --git a/packages/react/src/hooks/useIonAlert.ts b/packages/react/src/hooks/useIonAlert.ts index 3f1f7cf7fc7..20c4208db5f 100644 --- a/packages/react/src/hooks/useIonAlert.ts +++ b/packages/react/src/hooks/useIonAlert.ts @@ -1,4 +1,4 @@ -import { AlertButton, AlertOptions, alertController } from '@ionic/core'; +import { AlertButton, AlertOptions, alertController } from '@ionic/core/components'; import { HookOverlayOptions } from './HookOverlayOptions'; import { useController } from './useController'; diff --git a/packages/react/src/hooks/useIonLoading.tsx b/packages/react/src/hooks/useIonLoading.tsx index 779a413c18a..751d174a126 100644 --- a/packages/react/src/hooks/useIonLoading.tsx +++ b/packages/react/src/hooks/useIonLoading.tsx @@ -1,4 +1,4 @@ -import { LoadingOptions, SpinnerTypes, loadingController } from '@ionic/core'; +import { LoadingOptions, SpinnerTypes, loadingController } from '@ionic/core/components'; import { HookOverlayOptions } from './HookOverlayOptions'; import { useController } from './useController'; diff --git a/packages/react/src/hooks/useIonModal.ts b/packages/react/src/hooks/useIonModal.ts index 4a84969acae..b5ba4282ff4 100644 --- a/packages/react/src/hooks/useIonModal.ts +++ b/packages/react/src/hooks/useIonModal.ts @@ -1,4 +1,4 @@ -import { ModalOptions, modalController } from '@ionic/core'; +import { ModalOptions, modalController } from '@ionic/core/components'; import { HookOverlayOptions } from './HookOverlayOptions'; import { ReactComponentOrElement, useOverlay } from './useOverlay'; diff --git a/packages/react/src/hooks/useIonPicker.tsx b/packages/react/src/hooks/useIonPicker.tsx index 36473862aa1..6eb9f1b5b73 100644 --- a/packages/react/src/hooks/useIonPicker.tsx +++ b/packages/react/src/hooks/useIonPicker.tsx @@ -3,7 +3,7 @@ import { PickerColumn, PickerOptions, pickerController, -} from '@ionic/core'; +} from '@ionic/core/components'; import { HookOverlayOptions } from './HookOverlayOptions'; import { useController } from './useController'; diff --git a/packages/react/src/hooks/useIonPopover.ts b/packages/react/src/hooks/useIonPopover.ts index 42ecf6600cd..f0efd037c09 100644 --- a/packages/react/src/hooks/useIonPopover.ts +++ b/packages/react/src/hooks/useIonPopover.ts @@ -1,4 +1,4 @@ -import { PopoverOptions, popoverController } from '@ionic/core'; +import { PopoverOptions, popoverController } from '@ionic/core/components'; import { HookOverlayOptions } from './HookOverlayOptions'; import { ReactComponentOrElement, useOverlay } from './useOverlay'; diff --git a/packages/react/src/hooks/useIonToast.ts b/packages/react/src/hooks/useIonToast.ts index 258d5b2bc8e..0d22842ca35 100644 --- a/packages/react/src/hooks/useIonToast.ts +++ b/packages/react/src/hooks/useIonToast.ts @@ -1,4 +1,4 @@ -import { ToastOptions, toastController } from '@ionic/core'; +import { ToastOptions, toastController } from '@ionic/core/components'; import { HookOverlayOptions } from './HookOverlayOptions'; import { useController } from './useController'; diff --git a/packages/react/src/hooks/useOverlay.ts b/packages/react/src/hooks/useOverlay.ts index 21389c1ba66..ab23262be2a 100644 --- a/packages/react/src/hooks/useOverlay.ts +++ b/packages/react/src/hooks/useOverlay.ts @@ -1,4 +1,4 @@ -import { OverlayEventDetail } from '@ionic/core'; +import { OverlayEventDetail } from '@ionic/core/components'; import React, { useEffect, useMemo, useRef, useState } from 'react'; import ReactDOM from 'react-dom'; diff --git a/packages/react/src/models/RouteInfo.ts b/packages/react/src/models/RouteInfo.ts index 02f35dc8087..75b668ee037 100644 --- a/packages/react/src/models/RouteInfo.ts +++ b/packages/react/src/models/RouteInfo.ts @@ -1,4 +1,4 @@ -import { AnimationBuilder } from '@ionic/core'; +import { AnimationBuilder } from '@ionic/core/components'; import { RouteAction } from './RouteAction'; import { RouterDirection } from './RouterDirection'; diff --git a/packages/react/src/routing/NavManager.tsx b/packages/react/src/routing/NavManager.tsx index cc71dfd51b1..5dda4305baf 100644 --- a/packages/react/src/routing/NavManager.tsx +++ b/packages/react/src/routing/NavManager.tsx @@ -1,4 +1,4 @@ -import { AnimationBuilder } from '@ionic/core'; +import { AnimationBuilder } from '@ionic/core/components'; import React from 'react'; import { IonRouterContext, IonRouterContextState } from '../components/IonRouterContext';