feat(react): add custom elements bundle (#23896)

Author: liamdebeasi

.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:

core/package-lock.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",

core/package.json

@@ -148,6 +148,12 @@ export class Menu implements ComponentInterface, MenuI {
   @Event() protected ionMenuChange!: EventEmitter<MenuChangeEventDetail>;
 
   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');
     }

core/src/components/menu/menu.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();
   }

core/src/components/split-pane/split-pane.tsx

@@ -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',

core/stencil.config.ts

@@ -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": [
-      "<rootDir>/setupTests.ts"
-    ],
-    "testPathIgnorePatterns": [
-      "node_modules",
-      "dist-transpiled",
-      "dist",
-      "<rootDir>/test-app"
-    ],
-    "globals": {
-      "ts-jest": {
-        "diagnostics": false
-      }
-    },
-    "modulePaths": [
-      "<rootDir>"
-    ],
-    "moduleNameMapper": {
-      "\\.(css|jpg|png|svg)$": "<rootDir>/empty-module.js"
-    }
   }
 }

packages/react-router/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",

packages/react-router/setupTests.ts

@@ -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

packages/react-router/src/__tests__/Router.spec.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 (
     <IonApp>

packages/react-router/test-app/package-lock.json

@@ -6,7 +6,7 @@ import {
   AnimationKeyFrames,
   AnimationLifecycle,
   createAnimation,
-} from '@ionic/core';
+} from '@ionic/core/components';
 import React from 'react';
 
 interface PartialPropertyValue {

packages/react-router/test-app/package.json

@@ -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);