build(deps)!: bump Stencil to v4 (#8108)

**Related Issue:** #7861

Bumps Stencil to v4.

* add `components.d.ts` to source control per [Stencil
recommendation](https://stenciljs.com/docs/typed-components)
* add workaround for JSX imports not matching what Stencil React output
target expects
* dropped workaround for
#6696 (fixed in v4)
* drop obsolete tree-shaking patch (#5233) (fixed in v4)
* skips additional locales that are showing formatting differences
between test/node and browser environments
* updates `volta` and `engines` fields from
`eslint-plugin-calcite-components`' `package.json` to match other
packages
* dep changes:
* bumps `@typescript-eslint`†, `angular`†, `jest`†, `puppeteer`,
`typescript` to latest († and related deps)
  * removed unused `@stencil/state-tunnel`
  * replaced `@stencil/postcss` with `@stencil-community/postcss`
  * added missing `globby` and `jsdom`
  * override `@jest/transform` to ensure node types match

BREAKING CHANGE: We are treating this core version bump as a
precautionary measure, particularly due to its potential impact on
projects using `calcite-components` and Stencil.

---------

Co-authored-by: Ben Elan <no-reply@benelan.dev>
Co-authored-by: jcfranco <jcfranco@users.noreply.github.com>

package.json

@@ -45,7 +45,7 @@
     "@types/dedent": "0.7.1",
     "@types/eslint": "8.40.2",
     "@types/estree": "1.0.4",
-    "@types/jest": "27.0.3",
+    "@types/jest": "29.5.7",
     "@types/jest-axe": "3.5.7",
     "@types/lodash-es": "4.17.10",
     "@types/node": "^18.0.0",
@@ -54,8 +54,8 @@
     "@types/semver": "7.5.4",
     "@types/shell-quote": "1.7.3",
     "@types/sortablejs": "1.15.4",
-    "@typescript-eslint/eslint-plugin": "5.60.1",
-    "@typescript-eslint/parser": "5.48.2",
+    "@typescript-eslint/eslint-plugin": "6.10.0",
+    "@typescript-eslint/parser": "6.10.0",
     "@whitespace/storybook-addon-html": "5.0.0",
     "autoprefixer": "10.4.16",
     "axe-core": "4.8.2",
@@ -72,30 +72,30 @@
     "eslint": "8.44.0",
     "eslint-config-prettier": "8.8.0",
     "eslint-plugin-import": "2.27.5",
-    "eslint-plugin-jest": "27.2.3",
+    "eslint-plugin-jest": "27.6.0",
     "eslint-plugin-jsdoc": "46.4.6",
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-unicorn": "46.0.1",
+    "globby": "14.0.0",
     "husky": "8.0.3",
-    "jest": "27.4.5",
-    "jest-axe": "7.0.1",
-    "jest-cli": "27.4.5",
+    "jest": "29.7.0",
+    "jest-axe": "8.0.0",
+    "jest-cli": "29.7.0",
     "json-to-ts": "1.7.0",
     "lerna": "7.1.5",
     "lint-staged": "13.2.3",
     "markdownlint-cli": "0.34.0",
     "postcss": "8.4.31",
     "prettier": "2.8.8",
-    "puppeteer": "10.0.0",
+    "puppeteer": "21.5.0",
     "quicktype-core": "23.0.76",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "rimraf": "5.0.5",
     "rollup": "3.26.0",
     "semver": "7.5.4",
     "shell-quote": "1.8.1",
-    "stencil-eslint-core": "0.3.1",
     "storybook": "6.5.16",
     "storybook-addon-themes": "6.1.0",
     "storybook-rtl-addon": "0.3.3",
@@ -104,15 +104,18 @@
     "stylelint-config-recommended-scss": "12.0.0",
     "stylelint-use-logical-spec": "5.0.0",
     "tailwindcss": "3.3.5",
-    "ts-jest": "27.1.5",
+    "ts-jest": "29.1.1",
     "ts-node": "10.9.1",
     "turbo": "1.10.15",
     "type-fest": "3.11.1",
-    "typescript": "4.9.5",
+    "typescript": "5.2.2",
     "updtr": "4.0.0",
     "workbox-build": "7.0.0"
   },
   "license": "SEE LICENSE.md",
+  "overrides": {
+    "@jest/transform": "29.7.0"
+  },
   "packageManager": "npm@10.1.0",
   "volta": {
     "node": "18.18.0",

packages/calcite-components-angular/package.json

@@ -9,23 +9,23 @@
     "clean": "rimraf dist node_modules .turbo .angular projects/component-library/dist"
   },
   "dependencies": {
-    "@angular/animations": "16.2.0",
-    "@angular/common": "16.2.0",
-    "@angular/compiler": "16.2.0",
-    "@angular/core": "16.2.0",
-    "@angular/forms": "16.2.0",
-    "@angular/platform-browser": "16.2.0",
-    "@angular/platform-browser-dynamic": "16.2.0",
-    "@angular/router": "16.2.0",
-    "rxjs": "7.8.0",
-    "tslib": "2.3.0",
-    "zone.js": "0.13.0"
+    "@angular/animations": "17.0.2",
+    "@angular/common": "17.0.2",
+    "@angular/compiler": "17.0.2",
+    "@angular/core": "17.0.2",
+    "@angular/forms": "17.0.2",
+    "@angular/platform-browser": "17.0.2",
+    "@angular/platform-browser-dynamic": "17.0.2",
+    "@angular/router": "17.0.2",
+    "rxjs": "7.8.1",
+    "tslib": "2.6.2",
+    "zone.js": "0.14.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "16.2.8",
-    "@angular/cli": "16.2.8",
-    "@angular/compiler-cli": "16.2.0",
-    "ng-packagr": "16.2.3"
+    "@angular-devkit/build-angular": "17.0.0",
+    "@angular/cli": "17.0.0",
+    "@angular/compiler-cli": "17.0.2",
+    "ng-packagr": "17.0.0"
   },
   "volta": {
     "extends": "../../package.json"

packages/calcite-components-react/package.json

@@ -7,9 +7,10 @@
   "license": "SEE LICENSE.md",
   "scripts": {
     "build": "rimraf dist && npm run compile",
-    "prebuild": "npm run patch:ssr",
+    "prebuild": "npm run patch:ssr && npm run patch:jsx-import",
     "clean": "rimraf dist node_modules .turbo",
     "compile": "npm run tsc",
+    "patch:jsx-import": "ts-node support/patchJSXImport.ts",
     "patch:ssr": "ts-node support/patchSSR.ts",
     "tsc": "tsc"
   },

packages/calcite-components-react/support/patchJSXImport.ts

@@ -0,0 +1,21 @@
+// patch needed due to Stencil's React output target using an outdated path for the JSX type import
+
+const {
+  promises: { readFile, writeFile },
+} = require("fs");
+const { resolve } = require("path");
+
+const incorrectJsxTypeImport = "import type { JSX } from '@esri/calcite-components/dist/components';";
+const correctJsxTypeImport = "import type { JSX } from '@esri/calcite-components/dist/types/components';";
+
+(async () => {
+  try {
+    const filePath = resolve(`${__dirname}/../src/components.ts`);
+    const contents = await readFile(filePath, { encoding: "utf8" });
+
+    await writeFile(filePath, contents.replace(incorrectJsxTypeImport, correctJsxTypeImport));
+  } catch (err) {
+    console.error(err);
+    process.exit(1);
+  }
+})();

packages/calcite-components/.eslintrc.cjs

@@ -12,7 +12,7 @@ module.exports = {
     "plugin:jsdoc/recommended",
     "prettier",
   ],
-  ignorePatterns: ["dist", "docs", "hydrate", "www"],
+  ignorePatterns: ["dist", "docs", "hydrate", "www", "src/components.d.ts"],
   parser: "@typescript-eslint/parser",
   parserOptions: {
     tsconfigRootDir: __dirname,

packages/calcite-components/.prettierignore

@@ -2,3 +2,4 @@ docs/
 www/
 dist/
 hydrate/
+src/components.d.ts

packages/calcite-components/package.json

@@ -19,12 +19,12 @@
     "hydrate/"
   ],
   "scripts": {
-    "build": "npm run util:patch-jsdom-types && npm run util:prep-build-reqs && stencil build && npm run util:patch && npm run util:generate-t9n-docs-json && npm run util:clean-readmes",
+    "build": "npm run util:prep-build-reqs && stencil build && npm run util:patch && npm run util:generate-t9n-docs-json && npm run util:clean-readmes",
     "build:watch": "npm run util:prep-build-reqs && stencil build --no-docs --watch",
     "build:watch-dev": "npm run util:prep-build-reqs && stencil build --no-docs --dev --watch",
     "build-storybook": "npm run util:build-docs && NODE_OPTIONS=--openssl-legacy-provider build-storybook --output-dir ./docs --quiet",
-    "clean": "npm run util:clean-js-files && npm run util:clean-readmes && rimraf node_modules dist www hydrate docs .turbo src/components.d.ts",
-    "deps:update": "updtr --exclude chalk cheerio typescript @types/jest jest jest-cli ts-jest puppeteer @whitespace/storybook-addon-html && npm audit fix",
+    "clean": "npm run util:clean-js-files && npm run util:clean-readmes && rimraf node_modules dist www hydrate docs .turbo",
+    "deps:update": "updtr --exclude chalk cheerio typescript @types/jest jest jest-cli ts-jest @whitespace/storybook-addon-html && npm audit fix",
     "docs": "build-storybook",
     "docs:preview": "npm run util:build-docs && NODE_OPTIONS=--openssl-legacy-provider STORYBOOK_SCREENSHOT_LOCAL_BUILD=true start-storybook",
     "lint": "concurrently npm:lint:*",
@@ -47,10 +47,8 @@
     "util:generate-t9n-docs-json": "ts-node --esm support/generateT9nDocsJSON.ts",
     "util:generate-t9n-types": "ts-node --esm support/generateT9nTypes.ts",
     "util:hydration-styles": "ts-node --esm support/hydrationStyles.ts",
-    "util:patch": "npm run util:patch-esm-resolution && npm run util:patch-tree-shaking",
+    "util:patch": "npm run util:patch-esm-resolution",
     "util:patch-esm-resolution": "ts-node --esm support/patchESMResolution.ts",
-    "util:patch-tree-shaking": "ts-node --esm support/patchTreeShaking.ts",
-    "util:patch-jsdom-types": "ts-node --esm support/patchJSDOMTypes.ts",
     "util:prep-build-reqs": "npm run util:copy-assets && npm run util:generate-t9n-types",
     "util:sync-t9n-en-bundles": "ts-node --esm support/syncEnT9nBundles.ts",
     "util:test-types": "tsc --esModuleInterop dist/types/**/*.d.ts dist/components/*.d.ts && ! grep -rnw 'dist/types' -e '<reference types=' && npm run util:clean-js-files",
@@ -65,26 +63,27 @@
   },
   "dependencies": {
     "@floating-ui/dom": "1.5.3",
-    "@stencil/core": "2.22.3",
+    "@stencil/core": "4.7.1",
     "@types/color": "3.0.5",
     "color": "4.2.3",
     "composed-offset-position": "0.0.4",
     "dayjs": "1.11.10",
     "focus-trap": "7.5.4",
+    "form-request-submit-polyfill": "2.0.0",
     "lodash-es": "4.17.21",
     "sortablejs": "1.15.0",
     "timezone-groups": "0.8.0"
   },
   "devDependencies": {
-    "@esri/calcite-design-tokens": "^1.1.1-next.2",
+    "@esri/calcite-design-tokens": "1.1.1-next.2",
     "@esri/calcite-ui-icons": "3.25.0",
-    "@esri/eslint-plugin-calcite-components": "^0.2.4-next.0",
-    "@stencil-community/eslint-plugin": "0.5.0",
+    "@esri/eslint-plugin-calcite-components": "0.2.4-next.0",
+    "@stencil-community/eslint-plugin": "0.6.0",
+    "@stencil-community/postcss": "2.2.0",
     "@stencil/angular-output-target": "0.8.3",
-    "@stencil/postcss": "2.1.0",
     "@stencil/react-output-target": "0.5.3",
     "@stencil/sass": "3.0.7",
-    "@stencil/state-tunnel": "1.0.1"
+    "jsdom": "22.1.0"
   },
   "license": "SEE LICENSE.md",
   "volta": {