fix(react): createComponent prop type error

Had to bump the angular dependency versions for ng-packagr. Need to validate if that is required or just a warning. We need to target v12 to support the versions of Angular we target.

.gitignore

@@ -78,3 +78,7 @@ angular/test/build/
 packages/vue/test/build/
 
 .npmrc
+
+# turbo
+.turbo
+.turbo-cookie

angular/ng-package.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
+  "assets": [
+    {
+      "glob": "**/*",
+      "input": "node_modules/@ionic/core/css",
+      "output": "./css"
+    }
+  ],
+  "lib": {
+    "entryFile": "src/index.ts"
+  },
+  "allowedNonPeerDependencies": ["@ionic/core", "jsonc-parser"]
+}

angular/package.json

@@ -23,7 +23,8 @@
     "url": "https://github.com/ionic-team/ionic/issues"
   },
   "publishConfig": {
-    "directory": "dist"
+    "directory": "dist",
+    "linkDirectory": true
   },
   "homepage": "https://ionicframework.com/",
   "scripts": {
@@ -31,9 +32,10 @@
     "build": "npm run clean && npm run build.ng && npm run build.core && npm run clean-generated",
     "build.core": "node scripts/build-core.js",
     "build.link": "npm run build && node scripts/link-copy.js",
-    "build.ng": "ng-packagr -p package.json -c tsconfig.json",
+    "build.ng": "ng-packagr -p ng-package.json -c tsconfig.json",
     "clean": "node scripts/clean.js",
     "clean-generated": "node ./scripts/clean-generated.js",
+    "dev": "ng-packagr -p ng-package.json -c tsconfig.json -w",
     "lint": "npm run eslint && npm run prettier -- --write",
     "lint.fix": "npm run eslint -- --fix",
     "fmt": "npm run eslint -- --fix && npm run prettier -- --write",
@@ -41,11 +43,10 @@
     "eslint": "eslint . --ext .ts",
     "prerelease": "npm run validate && np prerelease --yolo --any-branch --tag next",
     "test": "echo 'angular no tests yet'",
-    "tsc": "tsc -p .",
     "validate": "npm i && npm run lint && npm run test && npm run build"
   },
   "dependencies": {
-    "@ionic/core": "6.3.2",
+    "@ionic/core": "workspace:*",
     "jsonc-parser": "^3.0.0",
     "tslib": "^2.0.0"
   },
@@ -62,12 +63,13 @@
     "@angular-eslint/eslint-plugin": "^12.5.0",
     "@angular-eslint/eslint-plugin-template": "^12.5.0",
     "@angular-eslint/template-parser": "^12.5.0",
-    "@angular/common": "^12.0.0",
-    "@angular/compiler": "^12.0.0",
-    "@angular/compiler-cli": "^12.0.0",
-    "@angular/core": "^12.0.0",
-    "@angular/forms": "^12.0.0",
-    "@angular/router": "^12.0.0",
+    "@angular/common": "^14.0.0",
+    "@angular/compiler": "^14.0.0",
+    "@angular/compiler-cli": "^14.0.0",
+    "@angular/core": "^14.0.0",
+    "@angular/forms": "^14.0.0",
+    "@angular/platform-browser": ">=14.0.0",
+    "@angular/router": "^14.0.0",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
     "@schematics/angular": "^12.2.9",
@@ -77,22 +79,13 @@
     "eslint": "^7.32.0",
     "eslint-plugin-import": "^2.25.2",
     "fs-extra": "^7.0.0",
-    "ng-packagr": "^12.0.0",
+    "ng-packagr": "^14.0.0",
     "prettier": "^2.4.1",
     "rxjs": "^6.6.2",
-    "typescript": "4.2.4",
+    "typescript": "^4.6.0",
     "typescript-eslint-language-service": "^4.1.5",
     "zone.js": "~0.11.4"
   },
   "prettier": "@ionic/prettier-config",
-  "schematics": "./schematics/collection.json",
-  "ngPackage": {
-    "lib": {
-      "entryFile": "src/index.ts"
-    },
-    "allowedNonPeerDependencies": [
-      "@ionic/core",
-      "jsonc-parser"
-    ]
-  }
+  "schematics": "./schematics/collection.json"
 }

angular/test/apps/ng12/package.json

@@ -29,8 +29,8 @@
     "@angular/platform-browser-dynamic": "^12.2.16",
     "@angular/platform-server": "^12.2.16",
     "@angular/router": "^12.2.16",
-    "@ionic/angular": "^6.1.15",
-    "@ionic/angular-server": "^6.1.15",
+    "@ionic/angular": "workspace:*",
+    "@ionic/angular-server": "workspace:*",
     "@nguniversal/express-engine": "^12.1.3",
     "angular-in-memory-web-api": "^0.11.0",
     "core-js": "^2.6.11",

angular/test/apps/ng13/package.json

@@ -29,8 +29,8 @@
     "@angular/platform-browser-dynamic": "^13.1.3",
     "@angular/platform-server": "^13.1.3",
     "@angular/router": "^13.1.3",
-    "@ionic/angular": "^6.1.15",
-    "@ionic/angular-server": "^6.1.15",
+    "@ionic/angular": "workspace:*",
+    "@ionic/angular-server": "workspace:*",
     "@nguniversal/express-engine": "^13.1.1",
     "angular-in-memory-web-api": "^0.11.0",
     "core-js": "^2.6.11",

angular/test/apps/ng14/package.json

@@ -29,8 +29,8 @@
     "@angular/platform-browser-dynamic": "^14.1.0",
     "@angular/platform-server": "^14.1.0",
     "@angular/router": "^14.1.0",
-    "@ionic/angular": "^6.1.15",
-    "@ionic/angular-server": "^6.1.15",
+    "@ionic/angular": "workspace:*",
+    "@ionic/angular-server": "workspace:*",
     "@nguniversal/express-engine": "^14.0.3",
     "angular-in-memory-web-api": "^0.11.0",
     "core-js": "^2.6.11",

angular/tsconfig.json

@@ -23,7 +23,7 @@
     "noImplicitReturns": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "outDir": "build/es2015",
+    "outDir": "dist",
     "pretty": true,
     "removeComments": false,
     "importHelpers": true,

core/package.json

@@ -64,6 +64,7 @@
     "jest": "^26.4.1",
     "jest-cli": "^26.4.1",
     "pixelmatch": "4.0.2",
+    "playwright": "^1.27.1",
     "prettier": "^2.6.1",
     "puppeteer": "^10.4.0",
     "rollup": "^2.26.4",
@@ -84,6 +85,7 @@
     "cdnloader": "node scripts/copy-cdn-loader.js",
     "css.minify": "cleancss -O2 -o ./css/ionic.bundle.css ./css/ionic.bundle.css",
     "css.sass": "sass --embed-sources src/css:./css",
+    "dev": "npm run build.css && stencil build --dev --watch --serve --no-open",
     "eslint": "eslint src",
     "lint": "npm run lint.ts && npm run lint.sass && npm run prettier -- --write",
     "lint.fix": "npm run lint.ts.fix && npm run lint.sass.fix && npm run prettier -- --write",

package.json

@@ -1,11 +1,23 @@
 {
   "private": true,
   "description": "Ionic mono-repo root package.json, used mainly to execute build scripts. This package is not published to npm.",
+  "scripts": {
+    "build": "turbo run build",
+    "test": "turbo run test",
+    "lint": "turbo run lint",
+    "dev": "turbo run dev"
+  },
   "devDependencies": {
     "lerna": "^5.5.2",
-    "semver": "^5.5.0"
+    "semver": "^5.5.0",
+    "turbo": "^1.5.6"
   },
   "engines": {
     "node": ">= 15"
-  }
+  },
+  "workspaces": [
+    "packages/*",
+    "core",
+    "angular"
+  ]
 }

packages/angular-server/package.json

@@ -42,8 +42,8 @@
   "peerDependencies": {
     "@angular/core": ">=12.0.0",
     "@angular/platform-server": ">=12.0.0",
-    "@ionic/angular": "^6.0.2",
-    "rxjs": ">=6.6.0",
+    "@ionic/angular": "workspace:*",
+    "rxjs": ">=6.5.3 || ^7.0.0",
     "zone.js": ">=0.11.0"
   },
   "devDependencies": {
@@ -60,11 +60,15 @@
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
     "@typescript-eslint/eslint-plugin": "^5.2.0",
-    "eslint": "^8.1.0",
+    "@typescript-eslint/parser": "^5.2.0",
+    "eslint": "^7.0.0",
     "eslint-plugin-import": "^2.25.2",
     "ng-packagr": "^12.0.0",
     "prettier": "^2.4.1",
-    "typescript": "4.2.4"
+    "rxjs": "^6.6.0",
+    "tslib": "^2.1.0",
+    "typescript": "4.2.4",
+    "zone.js": "^0.11.4"
   },
   "prettier": "@ionic/prettier-config"
 }

packages/react-router/package.json

@@ -24,6 +24,7 @@
     "build": "npm run clean && npm run compile",
     "clean": "rimraf dist dist-transpiled",
     "compile": "npm run tsc && rollup -c",
+    "dev": "tsc -p . --watch",
     "release": "np --any-branch --no-cleanup",
     "lint": "tslint --project .",
     "lint.fix": "tslint --project . --fix",
@@ -37,14 +38,14 @@
     "dist/"
   ],
   "dependencies": {
-    "@ionic/react": "6.3.2",
+    "@ionic/react": "workspace:*",
     "tslib": "*"
   },
   "peerDependencies": {
     "react": ">=16.8.6",
     "react-dom": ">=16.8.6",
     "react-router": "^5.0.1",
-    "react-router-dom": "^5.0.1"
+    "react-router-dom": "^5.3.0"
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^8.1.0",
@@ -52,18 +53,18 @@
     "@types/react": "16.14.0",
     "@types/react-dom": "^16.9.0",
     "@types/react-router": "^5.0.3",
-    "@types/react-router-dom": "^5.1.5",
+    "@types/react-router-dom": "^5.3.3",
     "prettier": "^2.2.0",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-router": "^5.0.1",
-    "react-router-dom": "^5.0.1",
+    "react-router-dom": "5.3.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.26.4",
     "rollup-plugin-sourcemaps": "^0.6.2",
     "tslint": "^6.1.3",
     "tslint-ionic-rules": "0.0.21",
     "tslint-react": "^5.0.0",
-    "typescript": "^3.9.5"
+    "typescript": "^4.0.0"
   }
 }

packages/react-router/src/ReactRouter/IonRouteInner.tsx

@@ -17,7 +17,9 @@ export class IonRouteInner extends React.PureComponent<IonRouteProps> {
          *
          * TODO: FW-647
          */
-        computedMatch={(this.props as any).computedMatch}
+        {...{
+          computedMatch: (this.props as any).computedMatch,
+        }}
       />
     );
   }

packages/react/package.json

@@ -24,6 +24,7 @@
     "build": "npm run clean && npm run copy && npm run compile",
     "clean": "rimraf dist && rimraf dist-transpiled && rimraf routing",
     "compile": "npm run tsc && rollup -c",
+    "dev": "concurrently --kill-others \"tsc -p . --watch\" \"rollup -c -w\"",
     "release": "np --any-branch --yolo --no-release-draft",
     "lint": "tslint --project .",
     "lint.fix": "tslint --project . --fix",
@@ -41,7 +42,7 @@
     "css/"
   ],
   "dependencies": {
-    "@ionic/core": "6.3.2",
+    "@ionic/core": "workspace:*",
     "ionicons": "^6.0.2",
     "tslib": "*"
   },
@@ -59,6 +60,7 @@
     "@types/node": "^14.0.14",
     "@types/react": "16.14.0",
     "@types/react-dom": "^16.9.0",
+    "concurrently": "^7.4.0",
     "fs-extra": "^9.0.1",
     "jest": "^26.6.3",
     "np": "^6.4.0",
@@ -72,7 +74,7 @@
     "tslint": "^6.1.2",
     "tslint-ionic-rules": "0.0.21",
     "tslint-react": "^5.0.0",
-    "typescript": "^3.9.5"
+    "typescript": "^4.0.0"
   },
   "jest": {
     "preset": "ts-jest",

packages/react/src/components/react-component-lib/createComponent.tsx

@@ -27,9 +27,9 @@ export const createReactComponent = <
   ReactComponentContext?: React.Context<ContextStateType>,
   manipulatePropsFunction?: (
     originalProps: StencilReactInternalProps<ElementType>,
-    propsToPass: any,
+    propsToPass: any
   ) => ExpandedPropsTypes,
-  defineCustomElement?: () => void,
+  defineCustomElement?: () => void
 ) => {
   if (defineCustomElement !== undefined) {
     defineCustomElement();
@@ -68,7 +68,7 @@ export const createReactComponent = <
           (acc as any)[name] = (cProps as any)[name];
         }
         return acc;
-      }, {});
+      }, {} as ExpandedPropsTypes);
 
       if (manipulatePropsFunction) {
         propsToPass = manipulatePropsFunction(this.props, propsToPass);

packages/vue-router/package.json

@@ -10,6 +10,7 @@
     "build": "npm run clean && npm run compile && npm run bundle",
     "clean": "rimraf dist",
     "compile": "npm run tsc",
+    "dev": "tsc -p . --watch",
     "tsc": "tsc -p .",
     "sync": "sh ./scripts/sync.sh"
   },
@@ -44,7 +45,7 @@
   },
   "homepage": "https://github.com/ionic-team/ionic#readme",
   "dependencies": {
-    "@ionic/vue": "6.3.2"
+    "@ionic/vue": "workspace:*"
   },
   "devDependencies": {
     "@types/jest": "^28.1.1",

packages/vue/package.json

@@ -11,6 +11,7 @@
     "bundle": "rollup --config rollup.config.js",
     "clean": "rimraf dist dist-transpiled",
     "compile": "npm run tsc",
+    "dev": "tsc -p . --watch",
     "tsc": "tsc -p .",
     "build.web-types": "node ./scripts/build-web-types.js",
     "build.vetur": "node ./scripts/build-vetur.js",
@@ -61,7 +62,7 @@
     "vue-router": "^4.0.16"
   },
   "dependencies": {
-    "@ionic/core": "6.3.2",
+    "@ionic/core": "workspace:*",
     "ionicons": "^6.0.2"
   },
   "vetur": {

packages/vue/src/globalExtensions.ts

@@ -1,5 +1,6 @@
 import { LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE } from '@ionic/core/components';
 
+// @ts-ignore
 declare module '@vue/runtime-core' {
   export interface ComponentCustomOptions {
     [LIFECYCLE_DID_ENTER]?: () => void;

pnpm-workspace.yaml

@@ -0,0 +1,7 @@
+packages:
+  # all packages in direct subdirs of packages/
+  - "packages/**"
+  - "core"
+  - "angular"
+  - "angular/test/build/**"
+  - "!angular/test/apps/**"

turbo.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://turborepo.org/schema.json",
+  "pipeline": {
+    "build": {
+      "dependsOn": ["^build"],
+      "outputs": ["dist"]
+    },
+    "test": {
+      "outputs": []
+    },
+    "lint": {
+      "outputs": []
+    },
+    "dev": {
+      "cache": false
+    }
+  }
+}