Tree widget: Add support for AppUI 5.0

.vscode/launch.json

@@ -103,9 +103,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/tree-widget/lib/**/*.js"
       ]

change/@itwin-tree-widget-react-207002f5-4cfb-46d6-b942-2b77a2bf18da.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/tree-widget-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@itwin-tree-widget-react-61cc506d-0f3e-4ab7-b357-f2f4751e1d80.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add support for AppUI 5.x",
+  "packageName": "@itwin/tree-widget-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

node-hooks/ignore-styles/hook.cjs

@@ -0,0 +1,17 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+const STYLE_FILE_EXTENSIONS = [".css", ".scss", ".less", ".sass"];
+const ICONS_FILE_EXTENSIONS = [".svg"];
+
+exports.load = (url, context, next) => {
+  if (STYLE_FILE_EXTENSIONS.some((ext) => url.endsWith(ext))) {
+    return { format: "module", shortCircuit: true, source: "export default null;" };
+  }
+  if (ICONS_FILE_EXTENSIONS.some((ext) => url.endsWith(ext))) {
+    return { format: "module", shortCircuit: true, source: "export default null;" };
+  }
+  return next(url, context);
+};

node-hooks/ignore-styles/register.cjs

@@ -0,0 +1,9 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+const { register } = require("node:module");
+const { pathToFileURL } = require("node:url");
+
+register("./hook.cjs", pathToFileURL(__filename));

packages/itwin/tree-widget/.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/tree-widget/.nycrc

@@ -1,8 +1,6 @@
 {
-  "include": ["src/**/*", "lib/cjs/**/*"],
-  "exclude": ["src/test/**", "lib/cjs/test/**"],
-  "extension": [".ts", ".tsx"],
-  "temp-dir": "./lib/cjs/test/coverage/.nyc_output",
-  "report-dir": "./lib/cjs/test/coverage",
+  "include": ["src/tree-widget-react/**/*", "lib/esm/tree-widget-react/**/*"],
+  "temp-dir": "./lib/test/coverage/.nyc_output",
+  "report-dir": "./lib/test/coverage",
   "reporter": ["text-summary", "lcov", "cobertura"]
 }

packages/itwin/tree-widget/package.json

@@ -17,28 +17,35 @@
     "name": "Bentley Systems, Inc.",
     "url": "http://www.bentley.com"
   },
+  "type": "module",
   "main": "lib/cjs/tree-widget-react.js",
+  "types": "lib/cjs/tree-widget-react",
   "module": "lib/esm/tree-widget-react.js",
-  "typings": "lib/cjs/tree-widget-react",
+  "exports": {
+    ".": {
+      "import": "./lib/esm/tree-widget-react.js",
+      "require": "./lib/cjs/tree-widget-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 1>&2 -p tsconfig.cjs.json",
+    "build:esm": "tsc 1>&2 -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,json}\" ./lib/cjs",
     "copy:esm": "cpx \"./src/**/*.{scss,json}\" ./lib/esm",
-    "cover": "nyc npm run test",
+    "cover": "c8 npm run test",
     "extract-api": "betools extract-api --entry=tree-widget-react --apiReportFolder=./api --apiReportTempFolder=./api/temp --apiSummaryFolder=./api --includeUnexportedApis",
     "check-internal": "node ../../../scripts/checkInternal.js --apiSummary ./api/tree-widget-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:unit": "mocha \"./lib/cjs/test/**/*.test.js\" -i -g \"#integration\"",
+    "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 tree-widget",
     "test:e2e:local": "node ../../../scripts/run-e2e-tests.js",
     "test:e2e:debug": "cross-env PWDEBUG=1 playwright test --ui",
@@ -49,10 +56,9 @@
   },
   "peerDependencies": {
     "@itwin/appui-abstract": "^4.0.0",
-    "@itwin/appui-react": "^4.10.0",
-    "@itwin/components-react": "^4.10.0",
+    "@itwin/appui-react": "^4.10.0 || ^5.0.0",
+    "@itwin/components-react": "^4.10.0 || ^5.0.0",
     "@itwin/core-frontend": "^4.0.0",
-    "@itwin/core-react": "^4.10.0",
     "@itwin/ecschema-metadata": "^4.0.0",
     "@itwin/itwinui-react": "^3.11.0",
     "@itwin/presentation-components": "^5.0.0",
@@ -73,9 +79,9 @@
   },
   "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-backend": "^4.10.2",
     "@itwin/core-bentley": "^4.10.2",
     "@itwin/core-common": "^4.10.2",
@@ -85,42 +91,44 @@
     "@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/ecschema-rpcinterface-common": "^4.10.2",
     "@itwin/ecschema-rpcinterface-impl": "^4.10.2",
     "@itwin/eslint-plugin": "^4.1.1",
-    "@itwin/imodel-components-react": "^4.17.6",
+    "@itwin/imodel-components-react": "^5.0.5",
+    "@itwin/itwinui-react": "^3.16.5",
     "@itwin/oidc-signin-tool": "^4.4.0",
     "@itwin/presentation-backend": "^4.10.2",
     "@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/presentation-testing": "~5.0.17",
+    "@itwin/presentation-testing": "^5.3.0",
     "@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",
-    "@types/chai-as-promised": "^7.1.1",
-    "@types/chai-jest-snapshot": "^1.3.4",
-    "@types/chai-subset": "1.3.3",
+    "@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/chai-as-promised": "^8.0.1",
+    "@types/chai-jest-snapshot": "^1.3.8",
+    "@types/chai-subset": "^1.3.5",
     "@types/deep-equal": "^1.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",
-    "chai-as-promised": "^7.1.1",
+    "c8": "^10.1.3",
+    "chai": "^5.1.2",
+    "chai-as-promised": "^8.0.1",
     "chai-jest-snapshot": "^2.0.0",
-    "chai-subset": "1.6.0",
+    "chai-subset": "^1.6.0",
     "cpx2": "^3.0.0",
     "cross-env": "^7.0.3",
     "deep-equal": "^1.0.0",
@@ -135,23 +143,21 @@
     "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",
     "typemoq": "^2.1.0",
-    "typescript": "~5.2.0",
-    "xmlhttprequest": "^1.8.0"
+    "typescript": "~5.2.0"
   },
   "eslintConfig": {
     "extends": [