Property widget: Add support for AppUI 5.0 (#1161)

* Add `type: "module"` and `exports` attributes to `package.json`

* esm tests

* Add support for AppUI 5.x

* add a workaround for e2e tests to pass

.prettierignore

@@ -1,6 +1,7 @@
 # Ignore artifacts
 change
 lib
+dist
 
 # Ignore auto-generated files
 CHANGELOG.md
@@ -18,4 +19,4 @@ pnpm-workspace.yaml
 .github
 
 # Ignore extracted api definitions
-api
+./packages/itwin/**/api

.vscode/launch.json

@@ -83,9 +83,12 @@
       "args": [
         "--config",
         "./.mocharc.json",
-        "--no-timeouts",
-        "lib/cjs/test/**/*.test.js"
+        "--no-timeouts"
       ],
+      "env": {
+        "NODE_ENV": "development",
+        "NODE_OPTIONS": "--enable-source-maps --import ../../../node-hooks/ignore-styles/register.cjs"
+      },
       "outFiles": [
         "${workspaceFolder}/packages/itwin/property-grid/lib/**/*.js"
       ]

apps/test-viewer/src/components/Viewer.tsx

@@ -5,7 +5,7 @@
 
 import { useEffect } from "react";
 import { useNavigate, useSearchParams } from "react-router-dom";
-import { IModelApp } from "@itwin/core-frontend";
+import { IModelApp, IModelConnection } from "@itwin/core-frontend";
 import { ECSchemaRpcInterface } from "@itwin/ecschema-rpcinterface-common";
 import { FrontendDevTools } from "@itwin/frontend-devtools";
 import { ArcGisAccessClient } from "@itwin/map-layers-auth";
@@ -72,6 +72,7 @@ function ViewerWithOptions() {
           rpcInterfaces: [ECSchemaRpcInterface],
         },
       }}
+      onIModelConnected={onIModelConnected}
       presentationProps={{
         selection: {
           selectionStorage: unifiedSelectionStorage,
@@ -81,6 +82,13 @@ function ViewerWithOptions() {
   );
 }
 
+function onIModelConnected(imodel: IModelConnection) {
+  // need this temporarily for e2e tests, until a fix for https://github.com/iTwin/itwinjs-core/issues/7496 is consumed
+  setTimeout(() => {
+    IModelConnection.onOpen.raiseEvent(imodel);
+  }, 1000);
+}
+
 function useIModelInfo() {
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();

change/@itwin-property-grid-react-7f04df91-a24f-4a38-b10f-776f3420b782.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add support for AppUI 5.x",
+  "packageName": "@itwin/property-grid-react",
+  "email": "35135765+grigasp@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@itwin-property-grid-react-a4e468fb-4055-47a6-a479-193f82ed40f1.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Define `type` and `exports` attributes in `package.json`. The `exports attribute prohibits access to APIs that are not intended to be used by external consumers. The `type: \\\"module\\\"` attribute addition moves this package a step closer towards dropping CommonJS support - it's now transpiled from ESM to CommonJS instead of the opposite.",
+  "packageName": "@itwin/property-grid-react",
+  "email": "35135765+grigasp@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/itwin/property-grid/.mocharc.json

@@ -1,10 +1,8 @@
 {
-  "require": ["raf/polyfill", "source-map-support/register", "ignore-styles"],
+  "require": ["raf/polyfill", "ignore-styles", "lib/esm/test/setup.js"],
   "check-leaks": true,
   "timeout": "60000",
   "globals": ["IS_REACT_ACT_ENVIRONMENT"],
-  "file": ["lib/cjs/test/setup.js"],
-  "ignore": ["lib/test/coverage/**/*"],
-  "reporter": "node_modules/@itwin/build-tools/mocha-reporter",
-  "reporter-option": ["mochaFile=lib/test/junit_results.xml"]
+  "spec": ["./lib/esm/test/**/*.test.js"],
+  "exclude": ["./lib/test/coverage/**/*"]
 }

packages/itwin/property-grid/.nycrc

@@ -1,7 +1,5 @@
 {
-  "include": ["src/**/*", "lib/cjs/**/*"],
-  "exclude": ["src/test/**", "lib/cjs/test/**", "src/**/property-grid-react.ts"],
-  "extension": [".ts", ".tsx"],
+  "include": ["src/property-grid-react/**/*", "lib/esm/property-grid-react/**/*"],
   "reporter": ["text-summary", "lcov", "cobertura"],
   "temp-dir": "./lib/test/coverage/.nyc_output",
   "report-dir": "./lib/test/coverage",

packages/itwin/property-grid/package.json

@@ -18,27 +18,35 @@
     "name": "Bentley Systems, Inc.",
     "url": "http://www.bentley.com"
   },
+  "type": "module",
   "main": "lib/cjs/property-grid-react.js",
+  "types": "lib/cjs/property-grid-react",
   "module": "lib/esm/property-grid-react.js",
-  "typings": "lib/cjs/property-grid-react",
+  "exports": {
+    ".": {
+      "import": "./lib/esm/property-grid-react.js",
+      "require": "./lib/cjs/property-grid-react.js"
+    },
+    "./package.json": "./package.json"
+  },
   "scripts": {
     "build": "npm run -s dual-build && npm run -s copy:assets",
     "dual-build": "npm run -s build:cjs && npm run -s build:esm",
-    "build:cjs": "tsc 1>&2 --outDir lib/cjs",
-    "build:esm": "tsc 1>&2 --module ES2020 --outDir lib/esm",
+    "build:cjs": "node ../../../scripts/package-cjs.js ./lib/cjs && tsc -p tsconfig.cjs.json",
+    "build:esm": "tsc -p tsconfig.esm.json",
     "copy:assets": "npm run -s copy:public && npm run -s copy:cjs && npm run -s copy:esm",
     "copy:public": "cpx \"./public/**/*\" ./lib/public",
     "copy:cjs": "cpx \"./src/**/*.scss\" ./lib/cjs",
     "copy:esm": "cpx \"./src/**/*.scss\" ./lib/esm",
-    "cover": "nyc npm run test",
+    "cover": "c8 npm run test",
     "extract-api": "betools extract-api --entry=property-grid-react --apiReportFolder=./api --apiReportTempFolder=./api/temp --apiSummaryFolder=./api",
     "check-internal": "node ../../../scripts/checkInternal.js --apiSummary ./api/property-grid-react.api.md",
     "lint": "npm run lint:eslint && npm run lint:stylelint",
     "lint:eslint": "eslint -f visualstudio \"./src/**/*.{ts,tsx}\" 1>&2",
     "lint:stylelint": "stylelint \"./src/**/*.scss\"",
     "lint:fix": "npm run lint:eslint -- --fix && npm run lint:stylelint -- --fix",
     "pseudolocalize": "betools pseudolocalize --englishDir ./public/locales/en --out ./lib/public/locales/en-PSEUDO",
-    "test": "mocha \"./lib/cjs/test/**/*.test.js\"",
+    "test": "cross-env NODE_OPTIONS=\"--import ../../../node-hooks/ignore-styles/register.cjs\" mocha --enable-source-maps --config ./.mocharc.json",
     "test:e2e": "node ../../../scripts/run-e2e-with-docker.js property-grid",
     "test:e2e:local": "node ../../../scripts/run-e2e-tests.js",
     "test:e2e:debug": "cross-env PWDEBUG=1 playwright test --ui",
@@ -49,12 +57,11 @@
   },
   "peerDependencies": {
     "@itwin/appui-abstract": "^4.0.0",
-    "@itwin/appui-react": "^4.3.0",
-    "@itwin/components-react": "^4.3.0",
+    "@itwin/appui-react": "^4.3.0 || ^5.0.0",
+    "@itwin/components-react": "^4.3.0 || ^5.0.0",
     "@itwin/core-bentley": "^4.0.0",
     "@itwin/core-common": "^4.0.0",
     "@itwin/core-frontend": "^4.0.0",
-    "@itwin/core-react": "^4.3.0",
     "@itwin/presentation-common": "^4.0.0",
     "@itwin/presentation-components": "^4.0.0 || ^5.0.0",
     "@itwin/presentation-frontend": "^4.0.0",
@@ -64,15 +71,15 @@
   "dependencies": {
     "@itwin/itwinui-icons-react": "^2.8.0",
     "@itwin/itwinui-illustrations-react": "^2.1.0",
-    "@itwin/itwinui-react": "^3.15.5",
-    "classnames": "^2.3.1",
+    "@itwin/itwinui-react": "^3.16.5",
+    "classnames": "^2.5.1",
     "react-error-boundary": "^4.0.10"
   },
   "devDependencies": {
     "@itwin/appui-abstract": "^4.10.2",
-    "@itwin/appui-react": "^4.17.6",
+    "@itwin/appui-react": "^5.0.5",
     "@itwin/build-tools": "^4.10.2",
-    "@itwin/components-react": "^4.17.6",
+    "@itwin/components-react": "^5.0.5",
     "@itwin/core-bentley": "^4.10.2",
     "@itwin/core-common": "^4.10.2",
     "@itwin/core-frontend": "^4.10.2",
@@ -81,31 +88,32 @@
     "@itwin/core-markup": "^4.10.2",
     "@itwin/core-orbitgt": "^4.10.2",
     "@itwin/core-quantity": "^4.10.2",
-    "@itwin/core-react": "^4.17.6",
+    "@itwin/core-react": "^5.0.5",
     "@itwin/core-telemetry": "^4.10.2",
     "@itwin/ecschema-metadata": "^4.10.2",
     "@itwin/eslint-plugin": "^4.1.1",
-    "@itwin/imodel-components-react": "^4.17.6",
+    "@itwin/imodel-components-react": "^5.0.5",
     "@itwin/oidc-signin-tool": "^4.4.0",
     "@itwin/presentation-common": "^4.10.2",
-    "@itwin/presentation-components": "^5.7.0",
+    "@itwin/presentation-components": "^5.9.0",
     "@itwin/presentation-frontend": "^4.10.2",
     "@itwin/webgl-compatibility": "^4.10.2",
     "@playwright/test": "^1.48.2",
-    "@testing-library/dom": "^9.3.3",
-    "@testing-library/react": "^14.1.2",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/chai": "4.3.5",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.0",
+    "@types/chai": "^5.0.1",
     "@types/jsdom": "^21.1.6",
-    "@types/mocha": "^10.0.6",
+    "@types/mocha": "^10.0.10",
     "@types/node": "^18.18.10",
     "@types/react": "^18.0.34",
     "@types/react-dom": "^18.0.11",
-    "@types/sinon": "^17.0.2",
-    "@types/sinon-chai": "^3.2.12",
+    "@types/sinon": "^17.0.3",
+    "@types/sinon-chai": "^4.0.0",
     "@typescript-eslint/eslint-plugin": "^7.16.1",
     "@typescript-eslint/parser": "^7.16.1",
-    "chai": "^4.3.7",
+    "c8": "^10.1.3",
+    "chai": "^5.1.2",
     "cpx2": "^3.0.0",
     "cross-env": "^7.0.3",
     "dotenv": "^16.3.1",
@@ -118,20 +126,19 @@
     "http-server": "^14.1.1",
     "ignore-styles": "^5.0.1",
     "jsdom": "^23.1.0",
-    "mocha": "^10.2.0",
-    "nyc": "15.1.0",
+    "mocha": "^11.0.1",
     "postcss": "^8.4.32",
     "raf": "^3.4.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-redux": "^7.2.9",
     "redux": "^4.1.0",
     "rimraf": "^6.0.1",
-    "sinon": "^17.0.1",
-    "sinon-chai": "^3.7.0",
-    "source-map-support": "^0.5.6",
+    "sinon": "^19.0.2",
+    "sinon-chai": "^4.0.0",
     "stylelint": "^15.11.0",
     "stylelint-config-standard-scss": "^11.1.0",
+    "testdouble": "^3.20.2",
     "typescript": "~5.0.0",
     "xmlhttprequest": "^1.8.0"
   },