From a11967e6b0caa02a3261fceb2502a8edf1dacdd0 Mon Sep 17 00:00:00 2001 From: Andrei Zhaleznichenka Date: Tue, 2 Sep 2025 16:41:29 +0200 Subject: [PATCH 1/4] chore: multi-react version setup --- .github/workflows/build-lint-test.yml | 13 +- .github/workflows/dry-run.yml | 2 +- build-tools/tasks/integ.js | 8 +- build-tools/tasks/motion.js | 6 + package-lock.json | 409 ++++++++++++++++-- package.json | 11 + pages/alert/runtime-action.page.tsx | 6 +- pages/alert/runtime-content.page.tsx | 6 +- ...layout-global-drawer-child-layout.page.tsx | 6 +- ...untime-drawers-persist-open-state.page.tsx | 6 +- .../runtime-drawers-with-only-global.page.tsx | 6 +- .../utils/external-sidecar-widget-demo.tsx | 6 +- pages/app-layout/utils/external-widget.tsx | 26 +- .../with-drawers-scrollable.page.tsx | 14 +- pages/app/index.tsx | 8 +- pages/app/mount/react16.ts | 14 + pages/app/mount/react18.ts | 34 ++ pages/flashbar/runtime-action.page.tsx | 6 +- pages/flashbar/runtime-content.page.tsx | 6 +- pages/mount.d.ts | 9 + pages/tsconfig.json | 5 +- pages/utils/iframe-wrapper.tsx | 7 +- pages/webpack.config.base.cjs | 28 +- pages/webpack.config.cjs | 4 +- pages/webpack.config.integ.cjs | 3 +- 25 files changed, 545 insertions(+), 104 deletions(-) create mode 100644 pages/app/mount/react16.ts create mode 100644 pages/app/mount/react18.ts create mode 100644 pages/mount.d.ts diff --git a/.github/workflows/build-lint-test.yml b/.github/workflows/build-lint-test.yml index d3da5ff2b5..b48b018bba 100644 --- a/.github/workflows/build-lint-test.yml +++ b/.github/workflows/build-lint-test.yml @@ -20,15 +20,22 @@ permissions: jobs: build: - uses: cloudscape-design/actions/.github/workflows/build-lint-test.yml@main + strategy: + matrix: + react: [16, 18] + uses: cloudscape-design/actions/.github/workflows/build-lint-test.yml@react-var secrets: inherit with: artifact-path: pages/lib/static-default - artifact-name: dev-pages + artifact-name: dev-pages-react${{ matrix.react }} + react-version: ${{ matrix.react }} deploy: needs: build + strategy: + matrix: + react: [16, 18] uses: cloudscape-design/actions/.github/workflows/deploy.yml@main secrets: inherit with: - artifact-name: dev-pages + artifact-name: dev-pages-react${{ matrix.react }} deployment-path: pages/lib/static-default diff --git a/.github/workflows/dry-run.yml b/.github/workflows/dry-run.yml index 1072c75f0f..1c09ce48b9 100644 --- a/.github/workflows/dry-run.yml +++ b/.github/workflows/dry-run.yml @@ -12,4 +12,4 @@ on: jobs: dry-run: - uses: cloudscape-design/actions/.github/workflows/dry-run.yml@main + uses: cloudscape-design/actions/.github/workflows/dry-run.yml@react-var diff --git a/build-tools/tasks/integ.js b/build-tools/tasks/integ.js index e46b117ca7..7df819f16a 100644 --- a/build-tools/tasks/integ.js +++ b/build-tools/tasks/integ.js @@ -8,14 +8,14 @@ const { parseArgs } = require('node:util'); module.exports = task('test:integ', async () => { const options = { - shard: { - type: 'string', - }, + shard: { type: 'string' }, + reactVersion: { type: 'string' }, }; - const shard = parseArgs({ options, strict: false }).values.shard; + const { shard, reactVersion = '16' } = parseArgs({ options, strict: false }).values; const devServer = execa('webpack', ['serve', '--config', 'pages/webpack.config.integ.cjs'], { env: { NODE_ENV: 'development', + REACT_VERSION: reactVersion, }, }); await waitOn({ resources: ['http://localhost:8080'] }); diff --git a/build-tools/tasks/motion.js b/build-tools/tasks/motion.js index dd903f6a9a..f2eb9e6056 100644 --- a/build-tools/tasks/motion.js +++ b/build-tools/tasks/motion.js @@ -4,11 +4,17 @@ const execa = require('execa'); const glob = require('glob'); const waitOn = require('wait-on'); const { task } = require('../utils/gulp-utils.js'); +const { parseArgs } = require('node:util'); module.exports = task('test:motion', async () => { + const options = { + reactVersion: { type: 'string' }, + }; + const { reactVersion = '16' } = parseArgs({ options, strict: false }).values; const devServer = execa('webpack', ['serve', '--config', 'pages/webpack.config.integ.cjs'], { env: { NODE_ENV: 'development', + REACT_VERSION: reactVersion, }, }); await waitOn({ resources: ['http://localhost:8080'] }); diff --git a/package-lock.json b/package-lock.json index 3cc511c708..32ba1b0e13 100644 --- a/package-lock.json +++ b/package-lock.json @@ -97,9 +97,11 @@ "prettier": "^3.6.1", "react": "^16.14.0", "react-dom": "^16.14.0", + "react-dom18": "npm:react-dom@^18.3.1", "react-router-dom": "^5.3.0", "react-test-renderer": "^16.14.0", "react-virtual": "^2.8.2", + "react18": "npm:react@^18.3.1", "rimraf": "^5.0.5", "rollup": "^3.29.5", "rollup-plugin-license": "^3.0.1", @@ -116,6 +118,8 @@ "svgo": "^2.8.0", "ts-jest": "^29.2.5", "ts-loader": "^9.2.6", + "types-react-dom18": "npm:@types/react-dom@^18.3.7", + "types-react18": "npm:@types/react@^18.3.24", "typescript": "^4.9.5", "typescript-eslint": "^8.32.1", "wait-on": "^8.0.2", @@ -1205,6 +1209,214 @@ "dev": true, "license": "MIT" }, + "node_modules/@cloudscape-design/browser-test-tools": { + "version": "3.0.99", + "resolved": "https://registry.npmjs.org/@cloudscape-design/browser-test-tools/-/browser-test-tools-3.0.99.tgz", + "integrity": "sha512-QhOi4E+y1JcEhlgyu6mhC2PM6wL3EdTDQ2Ko2eG8iOT9pLgdFTIs+o3M0DM1n5/HGq7WqYru2ujbhI/kNScUDg==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@aws-sdk/client-device-farm": "^3.623.0", + "@types/pngjs": "^6.0.4", + "@wdio/globals": "^9.7.0", + "@wdio/types": "^9.6.3", + "get-stream": "^6.0.1", + "lodash": "^4.17.21", + "p-retry": "^4.6.2", + "pixelmatch": "^5.3.0", + "pngjs": "^6.0.0", + "wait-on": "^8.0.3", + "webdriverio": "^9.7.0" + } + }, + "node_modules/@cloudscape-design/build-tools": { + "version": "3.0.14", + "resolved": "https://registry.npmjs.org/@cloudscape-design/build-tools/-/build-tools-3.0.14.tgz", + "integrity": "sha512-eejlOMV1Z7t4/W9OhI+bjLz99YmwkH2HPG35LI8hiboHwA8ZDBQUkETZrDlrkTnPGAZ/gU1DRAwkPXRmBLmNGQ==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "minimatch": "^10.0.1" + }, + "peerDependencies": { + "stylelint": "^16.8.1" + } + }, + "node_modules/@cloudscape-design/collection-hooks": { + "version": "1.0.75", + "resolved": "https://registry.npmjs.org/@cloudscape-design/collection-hooks/-/collection-hooks-1.0.75.tgz", + "integrity": "sha512-gklyrK2xheg1SEw0ptxCkPuV2ZYJDCVNFRjNosciKFrllOFrzVXxkxPXTuuo2xJm6FTgs8BFso7iZB0Xvwi5/A==", + "license": "Apache-2.0", + "peerDependencies": { + "react": ">=16.8.0" + } + }, + "node_modules/@cloudscape-design/component-toolkit": { + "version": "1.0.0-beta.121", + "resolved": "https://registry.npmjs.org/@cloudscape-design/component-toolkit/-/component-toolkit-1.0.0-beta.121.tgz", + "integrity": "sha512-TYYWXQhS4pbIMXxoo8SHMFN/8F510ivRti2DEjJDA8ngtdesMPoFzB3YrAAmANiNlHdBx5LTOOapK6FVwn5t7g==", + "license": "Apache-2.0", + "dependencies": { + "tslib": "^2.3.1" + } + }, + "node_modules/@cloudscape-design/documenter": { + "version": "1.0.62", + "resolved": "https://registry.npmjs.org/@cloudscape-design/documenter/-/documenter-1.0.62.tgz", + "integrity": "sha512-PK/gGrtvof7HLbE8tXqDIP3R2F4HLc5JTKXbIYcx35n9eK+nwXK+v9PzIFdSHee2v5+W/hWFdmeqWZ7hmqkOYg==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "change-case": "^4.1.1", + "micromatch": "^4.0.8", + "pathe": "^1.1.2" + } + }, + "node_modules/@cloudscape-design/global-styles": { + "version": "1.0.45", + "resolved": "https://registry.npmjs.org/@cloudscape-design/global-styles/-/global-styles-1.0.45.tgz", + "integrity": "sha512-fSrbVpK9W+bg8tmUYqU9Wh2JGciUCGEByVUQDbgMY6feXtYEUKRP2MBL6kEHvoJB7lssZbHdh5/gYaiyxg+P5w==", + "dev": true, + "license": "Apache-2.0" + }, + "node_modules/@cloudscape-design/jest-preset": { + "version": "2.0.47", + "resolved": "https://registry.npmjs.org/@cloudscape-design/jest-preset/-/jest-preset-2.0.47.tgz", + "integrity": "sha512-LYeM1zhtCcEi6Ux5l4Px04nlZQp1Y3satOJiyapZF42cn9b9uZbI79/V5wJm8+WM4y3vYBlQkmnikU0UiveZuw==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@babel/plugin-transform-modules-commonjs": "^7.9.0", + "lodash": "^4.17.21" + }, + "peerDependencies": { + "babel-jest": ">=24", + "jest": ">=24" + } + }, + "node_modules/@cloudscape-design/test-utils-converter": { + "version": "1.0.65", + "resolved": "https://registry.npmjs.org/@cloudscape-design/test-utils-converter/-/test-utils-converter-1.0.65.tgz", + "integrity": "sha512-dIJarsgdPozdHphFy7m0uAOriEjA9MTtm2Y1bRoD7+IlSNc3R1g45Kx9S2Ly7O31YLj7Jr7uDy3HAVZMCp/DvQ==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@babel/core": "^7.16.0", + "@babel/plugin-syntax-decorators": "^7.16.0", + "@babel/plugin-syntax-typescript": "^7.16.0", + "glob": "^7.2.0" + } + }, + "node_modules/@cloudscape-design/test-utils-converter/node_modules/glob": { + "version": "7.2.3", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", + "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", + "deprecated": "Glob versions prior to v9 are no longer supported", + "dev": true, + "license": "ISC", + "dependencies": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.1.1", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + }, + "engines": { + "node": "*" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/@cloudscape-design/test-utils-converter/node_modules/minimatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", + "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "dev": true, + "license": "ISC", + "dependencies": { + "brace-expansion": "^1.1.7" + }, + "engines": { + "node": "*" + } + }, + "node_modules/@cloudscape-design/test-utils-core": { + "version": "1.0.65", + "resolved": "https://registry.npmjs.org/@cloudscape-design/test-utils-core/-/test-utils-core-1.0.65.tgz", + "integrity": "sha512-jPcWGlO+xfinYz+nA1t0wARBaoczC/qxyCuRuNy57H1dpJIOWQolXB8YDt8F/VR8p0pM7Ga6IUkYIzcFO5dgew==", + "license": "Apache-2.0", + "dependencies": { + "css-selector-tokenizer": "^0.8.0", + "css.escape": "^1.5.1" + } + }, + "node_modules/@cloudscape-design/theming-build": { + "version": "1.0.90", + "resolved": "https://registry.npmjs.org/@cloudscape-design/theming-build/-/theming-build-1.0.90.tgz", + "integrity": "sha512-tEAcr11mZHr8iGE6uvAAYJ4xPBNZKjWBdHoUdGejQJux2CCjt8FgQIVf8HI8xuenX8c93Yd72+aONGfWLB8syA==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "autoprefixer": "^10.4.8", + "glob": "^7.2.3", + "jsonschema": "^1.4.1", + "loader-utils": "^3.2.1", + "lodash": "^4.17.21", + "postcss": "^8.4.31", + "postcss-discard-empty": "^6.0.0", + "postcss-inline-svg": "^6.0.0", + "postcss-modules": "^6.0.0", + "sass": "^1.77.8", + "string-hash": "^1.1.3", + "tslib": "^2.4.0" + } + }, + "node_modules/@cloudscape-design/theming-build/node_modules/glob": { + "version": "7.2.3", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", + "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", + "deprecated": "Glob versions prior to v9 are no longer supported", + "dev": true, + "license": "ISC", + "dependencies": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.1.1", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + }, + "engines": { + "node": "*" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/@cloudscape-design/theming-build/node_modules/minimatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", + "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "dev": true, + "license": "ISC", + "dependencies": { + "brace-expansion": "^1.1.7" + }, + "engines": { + "node": "*" + } + }, + "node_modules/@cloudscape-design/theming-runtime": { + "version": "1.0.83", + "resolved": "https://registry.npmjs.org/@cloudscape-design/theming-runtime/-/theming-runtime-1.0.83.tgz", + "integrity": "sha512-KPrYj7ZYbrY9gpUswF3xEMKdaOj4IaSO6EqTt7ESaftkr6F3w3iY7yzcYY+V3xhxPuGpamf3W56fZIhGZYoMcQ==", + "license": "Apache-2.0", + "dependencies": { + "tslib": "^2.4.0" + } + }, "node_modules/@csstools/css-parser-algorithms": { "version": "3.0.5", "dev": true, @@ -1986,6 +2198,8 @@ }, "node_modules/@jest/diff-sequences": { "version": "30.0.1", + "resolved": "https://registry.npmjs.org/@jest/diff-sequences/-/diff-sequences-30.0.1.tgz", + "integrity": "sha512-n5H8QLDJ47QqbCNn5SuFjCRDrOLEZ0h8vAHCK5RL9Ls7Xa8AQLa/YxAc9UjFqoEDM48muwtBGjtMY5cr0PLDCw==", "dev": true, "license": "MIT", "peer": true, @@ -2047,7 +2261,9 @@ } }, "node_modules/@jest/get-type": { - "version": "30.0.1", + "version": "30.1.0", + "resolved": "https://registry.npmjs.org/@jest/get-type/-/get-type-30.1.0.tgz", + "integrity": "sha512-eMbZE2hUnx1WV0pmURZY9XoXPkUYjpc55mb0CrhtdWLtzMQPFvu/rZkTLZFTsdaVQa+Tr4eWAteqcUzoawq/uA==", "dev": true, "license": "MIT", "peer": true, @@ -2071,6 +2287,8 @@ }, "node_modules/@jest/pattern": { "version": "30.0.1", + "resolved": "https://registry.npmjs.org/@jest/pattern/-/pattern-30.0.1.tgz", + "integrity": "sha512-gWp7NfQW27LaBQz3TITS8L7ZCQ0TLvtmI//4OwlQRx4rnWxcPNIYjxZpDcN4+UlGxgm3jS5QPz8IPTCkb59wZA==", "dev": true, "license": "MIT", "peer": true, @@ -2084,6 +2302,8 @@ }, "node_modules/@jest/pattern/node_modules/jest-regex-util": { "version": "30.0.1", + "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-30.0.1.tgz", + "integrity": "sha512-jHEQgBXAgc+Gh4g0p3bCevgRCVRkB4VB70zhoAE48gxeSr1hfUOsM/C2WoJgVL7Eyg//hudYENbm3Ne+/dRVVA==", "dev": true, "license": "MIT", "peer": true, @@ -4203,6 +4423,8 @@ }, "node_modules/@vitest/pretty-format": { "version": "3.2.4", + "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-3.2.4.tgz", + "integrity": "sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA==", "dev": true, "license": "MIT", "peer": true, @@ -4215,6 +4437,8 @@ }, "node_modules/@vitest/snapshot": { "version": "3.2.4", + "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-3.2.4.tgz", + "integrity": "sha512-dEYtS7qQP2CjU27QBC5oUOxLE/v5eLkGqPE0ZKEIDGMs4vKWe7IjgLOeauHsR0D5YuuycGRO5oSRXnwnmA78fQ==", "dev": true, "license": "MIT", "peer": true, @@ -4229,6 +4453,8 @@ }, "node_modules/@vitest/snapshot/node_modules/pathe": { "version": "2.0.3", + "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz", + "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==", "dev": true, "license": "MIT", "peer": true @@ -7143,6 +7369,17 @@ } } }, + "node_modules/deep-eql": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-5.0.2.tgz", + "integrity": "sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==", + "dev": true, + "license": "MIT", + "peer": true, + "engines": { + "node": ">=6" + } + }, "node_modules/deep-equal": { "version": "2.2.3", "dev": true, @@ -8761,15 +8998,17 @@ } }, "node_modules/expect-webdriverio": { - "version": "5.3.4", + "version": "5.4.2", + "resolved": "https://registry.npmjs.org/expect-webdriverio/-/expect-webdriverio-5.4.2.tgz", + "integrity": "sha512-7bc5I2dU3onKJaRhBdxKh/C+W+ot7R+RcRMCLTSR7cbfHM9Shk8ocbNDVvjrxaBdA52kbZONVSyhexp7cq2xNA==", "dev": true, "license": "MIT", "peer": true, "dependencies": { "@vitest/snapshot": "^3.2.4", + "deep-eql": "^5.0.2", "expect": "^30.0.0", - "jest-matcher-utils": "^30.0.0", - "lodash.isequal": "^4.5.0" + "jest-matcher-utils": "^30.0.0" }, "engines": { "node": ">=18 || >=20 || >=22" @@ -8792,19 +9031,23 @@ } }, "node_modules/expect-webdriverio/node_modules/@jest/expect-utils": { - "version": "30.0.3", + "version": "30.1.1", + "resolved": "https://registry.npmjs.org/@jest/expect-utils/-/expect-utils-30.1.1.tgz", + "integrity": "sha512-5YUHr27fpJ64dnvtu+tt11ewATynrHkGYD+uSFgRr8V2eFJis/vEXgToyLwccIwqBihVfz9jwio+Zr1ab1Zihw==", "dev": true, "license": "MIT", "peer": true, "dependencies": { - "@jest/get-type": "30.0.1" + "@jest/get-type": "30.1.0" }, "engines": { "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0" } }, "node_modules/expect-webdriverio/node_modules/@jest/schemas": { - "version": "30.0.1", + "version": "30.0.5", + "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-30.0.5.tgz", + "integrity": "sha512-DmdYgtezMkh3cpU8/1uyXakv3tJRcmcXxBOcO0tbaozPwpmh4YMsnWrQm9ZmZMfa5ocbxzbFk6O4bDPEc/iAnA==", "dev": true, "license": "MIT", "peer": true, @@ -8816,13 +9059,15 @@ } }, "node_modules/expect-webdriverio/node_modules/@jest/types": { - "version": "30.0.1", + "version": "30.0.5", + "resolved": "https://registry.npmjs.org/@jest/types/-/types-30.0.5.tgz", + "integrity": "sha512-aREYa3aku9SSnea4aX6bhKn4bgv3AXkgijoQgbYV3yvbiGt6z+MQ85+6mIhx9DsKW2BuB/cLR/A+tcMThx+KLQ==", "dev": true, "license": "MIT", "peer": true, "dependencies": { "@jest/pattern": "30.0.1", - "@jest/schemas": "30.0.1", + "@jest/schemas": "30.0.5", "@types/istanbul-lib-coverage": "^2.0.6", "@types/istanbul-reports": "^3.0.4", "@types/node": "*", @@ -8834,13 +9079,17 @@ } }, "node_modules/expect-webdriverio/node_modules/@sinclair/typebox": { - "version": "0.34.37", + "version": "0.34.40", + "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.40.tgz", + "integrity": "sha512-gwBNIP8ZAYev/ORDWW0QvxdwPXwxBtLsdsJgSc7eDIRt8ubP+rxUBzPsrwnu16fgEF8Bx4lh/+mvQvJzcTM6Kw==", "dev": true, "license": "MIT", "peer": true }, "node_modules/expect-webdriverio/node_modules/chalk": { "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", "dev": true, "license": "MIT", "peer": true, @@ -8856,7 +9105,9 @@ } }, "node_modules/expect-webdriverio/node_modules/ci-info": { - "version": "4.2.0", + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.3.0.tgz", + "integrity": "sha512-l+2bNRMiQgcfILUi33labAZYIWlH1kWDp+ecNo5iisRKrbm0xcRyCww71/YU0Fkw0mAFpz9bJayXPjey6vkmaQ==", "dev": true, "funding": [ { @@ -8871,65 +9122,73 @@ } }, "node_modules/expect-webdriverio/node_modules/expect": { - "version": "30.0.3", + "version": "30.1.1", + "resolved": "https://registry.npmjs.org/expect/-/expect-30.1.1.tgz", + "integrity": "sha512-OKe7cdic4qbfWd/CcgwJvvCrNX2KWfuMZee9AfJHL1gTYmvqjBjZG1a2NwfhspBzxzlXwsN75WWpKTYfsJpBxg==", "dev": true, "license": "MIT", "peer": true, "dependencies": { - "@jest/expect-utils": "30.0.3", - "@jest/get-type": "30.0.1", - "jest-matcher-utils": "30.0.3", - "jest-message-util": "30.0.2", - "jest-mock": "30.0.2", - "jest-util": "30.0.2" + "@jest/expect-utils": "30.1.1", + "@jest/get-type": "30.1.0", + "jest-matcher-utils": "30.1.1", + "jest-message-util": "30.1.0", + "jest-mock": "30.0.5", + "jest-util": "30.0.5" }, "engines": { "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0" } }, "node_modules/expect-webdriverio/node_modules/jest-diff": { - "version": "30.0.3", + "version": "30.1.1", + "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-30.1.1.tgz", + "integrity": "sha512-LUU2Gx8EhYxpdzTR6BmjL1ifgOAQJQELTHOiPv9KITaKjZvJ9Jmgigx01tuZ49id37LorpGc9dPBPlXTboXScw==", "dev": true, "license": "MIT", "peer": true, "dependencies": { "@jest/diff-sequences": "30.0.1", - "@jest/get-type": "30.0.1", + "@jest/get-type": "30.1.0", "chalk": "^4.1.2", - "pretty-format": "30.0.2" + "pretty-format": "30.0.5" }, "engines": { "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0" } }, "node_modules/expect-webdriverio/node_modules/jest-matcher-utils": { - "version": "30.0.3", + "version": "30.1.1", + "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-30.1.1.tgz", + "integrity": "sha512-SuH2QVemK48BNTqReti6FtjsMPFsSOD/ZzRxU1TttR7RiRsRSe78d03bb4Cx6D4bQC/80Q8U4VnaaAH9FlbZ9w==", "dev": true, "license": "MIT", "peer": true, "dependencies": { - "@jest/get-type": "30.0.1", + "@jest/get-type": "30.1.0", "chalk": "^4.1.2", - "jest-diff": "30.0.3", - "pretty-format": "30.0.2" + "jest-diff": "30.1.1", + "pretty-format": "30.0.5" }, "engines": { "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0" } }, "node_modules/expect-webdriverio/node_modules/jest-message-util": { - "version": "30.0.2", + "version": "30.1.0", + "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-30.1.0.tgz", + "integrity": "sha512-HizKDGG98cYkWmaLUHChq4iN+oCENohQLb7Z5guBPumYs+/etonmNFlg1Ps6yN9LTPyZn+M+b/9BbnHx3WTMDg==", "dev": true, "license": "MIT", "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", - "@jest/types": "30.0.1", + "@jest/types": "30.0.5", "@types/stack-utils": "^2.0.3", "chalk": "^4.1.2", "graceful-fs": "^4.2.11", "micromatch": "^4.0.8", - "pretty-format": "30.0.2", + "pretty-format": "30.0.5", "slash": "^3.0.0", "stack-utils": "^2.0.6" }, @@ -8938,26 +9197,30 @@ } }, "node_modules/expect-webdriverio/node_modules/jest-mock": { - "version": "30.0.2", + "version": "30.0.5", + "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-30.0.5.tgz", + "integrity": "sha512-Od7TyasAAQX/6S+QCbN6vZoWOMwlTtzzGuxJku1GhGanAjz9y+QsQkpScDmETvdc9aSXyJ/Op4rhpMYBWW91wQ==", "dev": true, "license": "MIT", "peer": true, "dependencies": { - "@jest/types": "30.0.1", + "@jest/types": "30.0.5", "@types/node": "*", - "jest-util": "30.0.2" + "jest-util": "30.0.5" }, "engines": { "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0" } }, "node_modules/expect-webdriverio/node_modules/jest-util": { - "version": "30.0.2", + "version": "30.0.5", + "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-30.0.5.tgz", + "integrity": "sha512-pvyPWssDZR0FlfMxCBoc0tvM8iUEskaRFALUtGQYzVEAqisAztmy+R8LnU14KT4XA0H/a5HMVTXat1jLne010g==", "dev": true, "license": "MIT", "peer": true, "dependencies": { - "@jest/types": "30.0.1", + "@jest/types": "30.0.5", "@types/node": "*", "chalk": "^4.1.2", "ci-info": "^4.2.0", @@ -8969,12 +9232,14 @@ } }, "node_modules/expect-webdriverio/node_modules/pretty-format": { - "version": "30.0.2", + "version": "30.0.5", + "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-30.0.5.tgz", + "integrity": "sha512-D1tKtYvByrBkFLe2wHJl2bwMJIiT8rW+XA+TiataH79/FszLQMrpGEvzUVkzPau7OCO0Qnrhpe87PqtOAIB8Yw==", "dev": true, "license": "MIT", "peer": true, "dependencies": { - "@jest/schemas": "30.0.1", + "@jest/schemas": "30.0.5", "ansi-styles": "^5.2.0", "react-is": "^18.3.1" }, @@ -8984,6 +9249,8 @@ }, "node_modules/expect-webdriverio/node_modules/pretty-format/node_modules/ansi-styles": { "version": "5.2.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz", + "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==", "dev": true, "license": "MIT", "peer": true, @@ -8996,6 +9263,8 @@ }, "node_modules/expect-webdriverio/node_modules/react-is": { "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", + "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==", "dev": true, "license": "MIT", "peer": true @@ -13641,12 +13910,6 @@ "dev": true, "license": "MIT" }, - "node_modules/lodash.isequal": { - "version": "4.5.0", - "dev": true, - "license": "MIT", - "peer": true - }, "node_modules/lodash.memoize": { "version": "4.1.2", "dev": true, @@ -16360,6 +16623,31 @@ "react": "^16.14.0" } }, + "node_modules/react-dom18": { + "name": "react-dom", + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", + "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", + "dev": true, + "license": "MIT", + "dependencies": { + "loose-envify": "^1.1.0", + "scheduler": "^0.23.2" + }, + "peerDependencies": { + "react": "^18.3.1" + } + }, + "node_modules/react-dom18/node_modules/scheduler": { + "version": "0.23.2", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", + "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "loose-envify": "^1.1.0" + } + }, "node_modules/react-is": { "version": "17.0.2", "dev": true, @@ -16467,6 +16755,20 @@ "react": "^16.6.3 || ^17.0.0" } }, + "node_modules/react18": { + "name": "react", + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", + "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "loose-envify": "^1.1.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/read-pkg": { "version": "3.0.0", "dev": true, @@ -19204,6 +19506,8 @@ }, "node_modules/tinyrainbow": { "version": "2.0.0", + "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-2.0.0.tgz", + "integrity": "sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==", "dev": true, "license": "MIT", "peer": true, @@ -19552,6 +19856,29 @@ "dev": true, "license": "MIT" }, + "node_modules/types-react-dom18": { + "name": "@types/react-dom", + "version": "18.3.7", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz", + "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "@types/react": "^18.0.0" + } + }, + "node_modules/types-react18": { + "name": "@types/react", + "version": "18.3.24", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.24.tgz", + "integrity": "sha512-0dLEBsA1kI3OezMBF8nSsb7Nk19ZnsyE1LLhB8r27KbgU5H4pvuqZLdtE+aUkJVoXgTVuA+iLIwmZ0TuK4tx6A==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/prop-types": "*", + "csstype": "^3.0.2" + } + }, "node_modules/typescript": { "version": "4.9.5", "dev": true, diff --git a/package.json b/package.json index 281eecd7ea..3958932e4f 100644 --- a/package.json +++ b/package.json @@ -18,10 +18,13 @@ "lint": "npm-run-all --parallel lint:*", "lint:eslint": "eslint .", "lint:stylelint": "stylelint --ignore-path .gitignore '{src,pages}/**/*.{css,scss}'", + "build:react18": "cross-env NODE_ENV=production REACT_VERSION=18 gulp build", "start": "npm-run-all --parallel start:watch start:dev", "start:watch": "gulp watch", "start:dev": "cross-env NODE_ENV=development webpack serve --config pages/webpack.config.cjs", "start:integ": "cross-env NODE_ENV=development webpack serve --config pages/webpack.config.integ.cjs", + "start:react18": "npm-run-all --parallel start:watch start:react18:dev", + "start:react18:dev": "cross-env NODE_ENV=development REACT_VERSION=18 webpack serve --config pages/webpack.config.cjs", "prepare": "husky" }, "dependencies": { @@ -117,9 +120,11 @@ "prettier": "^3.6.1", "react": "^16.14.0", "react-dom": "^16.14.0", + "react-dom18": "npm:react-dom@^18.3.1", "react-router-dom": "^5.3.0", "react-test-renderer": "^16.14.0", "react-virtual": "^2.8.2", + "react18": "npm:react@^18.3.1", "rimraf": "^5.0.5", "rollup": "^3.29.5", "rollup-plugin-license": "^3.0.1", @@ -136,6 +141,8 @@ "svgo": "^2.8.0", "ts-jest": "^29.2.5", "ts-loader": "^9.2.6", + "types-react-dom18": "npm:@types/react-dom@^18.3.7", + "types-react18": "npm:@types/react@^18.3.24", "typescript": "^4.9.5", "typescript-eslint": "^8.32.1", "wait-on": "^8.0.2", @@ -144,6 +151,10 @@ "webpack-dev-server": "^5.2.1" }, "overrides": { + "@types/react-dom": "^16.9.14", + "@types/react": "^16.14.20", + "react-dom": "^16.14.0", + "react": "^16.14.0", "typescript": "^4.9.5" }, "lint-staged": { diff --git a/pages/alert/runtime-action.page.tsx b/pages/alert/runtime-action.page.tsx index e69c347f0a..804828e660 100644 --- a/pages/alert/runtime-action.page.tsx +++ b/pages/alert/runtime-action.page.tsx @@ -1,12 +1,12 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: Apache-2.0 import React from 'react'; -import { render, unmountComponentAtNode } from 'react-dom'; import Alert, { AlertProps } from '~components/alert'; import Button from '~components/button'; import awsuiPlugins from '~components/internal/plugins'; import SpaceBetween from '~components/space-between'; +import { mount, unmount } from '~mount'; import createPermutations from '../utils/permutations'; import PermutationsView from '../utils/permutations-view'; @@ -19,7 +19,7 @@ awsuiPlugins.alert.registerAction({ if (context.type !== 'error') { return; } - render( + mount(