diff --git a/karma-context.html b/karma-context.html new file mode 100644 index 0000000000..f0513f5ba0 --- /dev/null +++ b/karma-context.html @@ -0,0 +1,43 @@ + + + + + Foo + + + + + + + + + + %SCRIPTS% + + + + + \ No newline at end of file diff --git a/karma-debug.html b/karma-debug.html new file mode 100644 index 0000000000..d7373bd716 --- /dev/null +++ b/karma-debug.html @@ -0,0 +1,45 @@ + + + + + %X_UA_COMPATIBLE% + Karma DEBUG RUNNER + + + + + + + + + + + + %SCRIPTS% + + + + + \ No newline at end of file diff --git a/karma.config.cjs b/karma.config.cjs index 987c0256b1..929b75362d 100644 --- a/karma.config.cjs +++ b/karma.config.cjs @@ -12,6 +12,7 @@ const MagicString = require('magic-string'); const postcss = require('postcss'); const cssnanoPlugin = require('cssnano'); const { karmaMochaConfig } = require('./.mocharc.cjs'); +const reactPlugin = require('@vitejs/plugin-react'); // The current package, one of the packages in the `packages` dir const cwd = process.cwd(); @@ -162,7 +163,23 @@ module.exports = (config) => { }, }, }, - plugins: [loadRegisterJs(), constructCss()], + plugins: [ + loadRegisterJs(), + constructCss(), + reactPlugin({ + include: '**/*.tsx', + babel: { + plugins: [ + [ + 'module:@preact/signals-react-transform', + { + mode: 'all', + }, + ], + ], + }, + }), + ], resolve: { alias: Object.entries(mocks).map(([find, file]) => { const replacement = join(cwd, `test/mocks/${file}`); @@ -186,7 +203,8 @@ module.exports = (config) => { client: { mocha: karmaMochaConfig, }, - + customContextFile: resolve(cwd, '../../../karma-context.html'), + customDebugFile: resolve(cwd, '../../../karma-debug.html'), // Viewport configuration viewport: { breakpoints: [ diff --git a/package-lock.json b/package-lock.json index fe75cea6bd..d7458d1897 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,9 +11,11 @@ ], "devDependencies": { "@nx/js": "^18.0.4", + "@preact/signals-react-transform": "^0.3.1", "@types/karma": "^6.3.8", "@types/node": "^20.11.19", "@vaadin/react-components": "24.5.0-alpha3", + "@vitejs/plugin-react": "^4.3.1", "chai-dom": "^1.12.0", "compare-versions": "^6.1.0", "concurrently": "^8.2.2", @@ -1642,6 +1644,36 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/plugin-transform-react-jsx-self": { + "version": "7.24.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.24.7.tgz", + "integrity": "sha512-fOPQYbGSgH0HUp4UJO4sMBFjY6DuWq+2i8rixyUMb3CdGixs/gccURvYOAhajBdKDoGajFr3mUq5rH3phtkGzw==", + "dev": true, + "dependencies": { + "@babel/helper-plugin-utils": "^7.24.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-react-jsx-source": { + "version": "7.24.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.24.7.tgz", + "integrity": "sha512-J2z+MWzZHVOemyLweMqngXrgGC42jQ//R0KdxqkIz/OrbVIIlhFI3WigZ5fO+nwFvBlncr4MGapd8vTyc7RPNQ==", + "dev": true, + "dependencies": { + "@babel/helper-plugin-utils": "^7.24.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, "node_modules/@babel/plugin-transform-regenerator": { "version": "7.24.7", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.24.7.tgz", @@ -3461,6 +3493,27 @@ "react": "^16.14.0 || 17.x || 18.x" } }, + "node_modules/@preact/signals-react-transform": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/@preact/signals-react-transform/-/signals-react-transform-0.3.1.tgz", + "integrity": "sha512-30wip3FKvXciDlUpd3XkGu+HOCYKV9GD4W3ELDceqK1OWysjryph/pbKW+ZcAVx5WzQTFcdkobhP+AjN6piauw==", + "dev": true, + "dependencies": { + "@babel/helper-module-imports": "^7.22.5", + "@babel/helper-plugin-utils": "^7.22.5", + "@preact/signals-react": "^2.0.1", + "debug": "^4.3.4", + "use-sync-external-store": "^1.2.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/preact" + }, + "peerDependencies": { + "@babel/core": "^7.0.0", + "react": "^16.14.0 || 17.x || 18.x" + } + }, "node_modules/@remix-run/router": { "version": "1.17.0", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.17.0.tgz", @@ -3961,6 +4014,47 @@ "integrity": "sha512-Anitqkl3+KrzcW2k77lRlg/GfLZLWXBuNgbEcIOU6M92yw42vsd3xV/Z/yAHEj8m+KUjL6bWOVOFqX8PFPJ4LA==", "dev": true }, + "node_modules/@types/babel__core": { + "version": "7.20.5", + "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", + "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==", + "dev": true, + "dependencies": { + "@babel/parser": "^7.20.7", + "@babel/types": "^7.20.7", + "@types/babel__generator": "*", + "@types/babel__template": "*", + "@types/babel__traverse": "*" + } + }, + "node_modules/@types/babel__generator": { + "version": "7.6.8", + "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.8.tgz", + "integrity": "sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==", + "dev": true, + "dependencies": { + "@babel/types": "^7.0.0" + } + }, + "node_modules/@types/babel__template": { + "version": "7.4.4", + "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz", + "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==", + "dev": true, + "dependencies": { + "@babel/parser": "^7.1.0", + "@babel/types": "^7.0.0" + } + }, + "node_modules/@types/babel__traverse": { + "version": "7.20.6", + "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.6.tgz", + "integrity": "sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==", + "dev": true, + "dependencies": { + "@babel/types": "^7.20.7" + } + }, "node_modules/@types/body-parser": { "version": "1.19.5", "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.5.tgz", @@ -5606,6 +5700,25 @@ "lit": "^3.0.0" } }, + "node_modules/@vitejs/plugin-react": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.3.1.tgz", + "integrity": "sha512-m/V2syj5CuVnaxcUJOQRel/Wr31FFXRFlnOoq1TVtkCxsY5veGMTEmpWHndrhB2U8ScHtCQB1e+4hWYExQc6Lg==", + "dev": true, + "dependencies": { + "@babel/core": "^7.24.5", + "@babel/plugin-transform-react-jsx-self": "^7.24.5", + "@babel/plugin-transform-react-jsx-source": "^7.24.1", + "@types/babel__core": "^7.20.5", + "react-refresh": "^0.14.2" + }, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "peerDependencies": { + "vite": "^4.2.0 || ^5.0.0" + } + }, "node_modules/@web/browser-logs": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/@web/browser-logs/-/browser-logs-0.4.0.tgz", @@ -14320,6 +14433,15 @@ "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==", "dev": true }, + "node_modules/react-refresh": { + "version": "0.14.2", + "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz", + "integrity": "sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/react-router": { "version": "6.24.0", "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.24.0.tgz", diff --git a/package.json b/package.json index bc0d6d1544..48709b39b6 100644 --- a/package.json +++ b/package.json @@ -34,9 +34,11 @@ }, "devDependencies": { "@nx/js": "^18.0.4", + "@preact/signals-react-transform": "^0.3.1", "@types/karma": "^6.3.8", "@types/node": "^20.11.19", "@vaadin/react-components": "24.5.0-alpha3", + "@vitejs/plugin-react": "^4.3.1", "chai-dom": "^1.12.0", "compare-versions": "^6.1.0", "concurrently": "^8.2.2", diff --git a/packages/java/tests/spring/react-i18n/package-lock.json b/packages/java/tests/spring/react-i18n/package-lock.json index 7f285c903c..66ee70cf25 100644 --- a/packages/java/tests/spring/react-i18n/package-lock.json +++ b/packages/java/tests/spring/react-i18n/package-lock.json @@ -34,6 +34,7 @@ }, "devDependencies": { "@babel/preset-react": "7.24.7", + "@preact/signals-react-transform": "0.3.1", "@rollup/plugin-replace": "5.0.7", "@rollup/pluginutils": "5.1.0", "@types/react": "18.3.3", @@ -3040,6 +3041,54 @@ "@webcomponents/shadycss": "^1.9.1" } }, + "node_modules/@preact/signals-core": { + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/@preact/signals-core/-/signals-core-1.6.1.tgz", + "integrity": "sha512-KXEEmJoKDlo0Igju/cj9YvKIgyaWFDgnprShQjzimUd5VynAAdTWMshawEOjUVeKbsI0aR58V6WOQp+DNcKApw==", + "dev": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/preact" + } + }, + "node_modules/@preact/signals-react": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@preact/signals-react/-/signals-react-2.0.2.tgz", + "integrity": "sha512-JcqkrRJtYmSlVy89DL65ruFEGv4rTreQWVE/fmGQ+FtN86TaYUcwIesE4lR6IkuX33ZpGjdoh8a+0auDePD5UA==", + "dev": true, + "dependencies": { + "@preact/signals-core": "^1.6.1", + "use-sync-external-store": "^1.2.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/preact" + }, + "peerDependencies": { + "react": "^16.14.0 || 17.x || 18.x" + } + }, + "node_modules/@preact/signals-react-transform": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/@preact/signals-react-transform/-/signals-react-transform-0.3.1.tgz", + "integrity": "sha512-30wip3FKvXciDlUpd3XkGu+HOCYKV9GD4W3ELDceqK1OWysjryph/pbKW+ZcAVx5WzQTFcdkobhP+AjN6piauw==", + "dev": true, + "dependencies": { + "@babel/helper-module-imports": "^7.22.5", + "@babel/helper-plugin-utils": "^7.22.5", + "@preact/signals-react": "^2.0.1", + "debug": "^4.3.4", + "use-sync-external-store": "^1.2.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/preact" + }, + "peerDependencies": { + "@babel/core": "^7.0.0", + "react": "^16.14.0 || 17.x || 18.x" + } + }, "node_modules/@remix-run/router": { "version": "1.16.1", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.1.tgz", @@ -8594,6 +8643,15 @@ "punycode": "^2.1.0" } }, + "node_modules/use-sync-external-store": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz", + "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==", + "dev": true, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/vite": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.1.tgz", diff --git a/packages/java/tests/spring/react-i18n/package.json b/packages/java/tests/spring/react-i18n/package.json index 0365992c42..ecb3404a66 100644 --- a/packages/java/tests/spring/react-i18n/package.json +++ b/packages/java/tests/spring/react-i18n/package.json @@ -30,6 +30,7 @@ }, "devDependencies": { "@babel/preset-react": "7.24.7", + "@preact/signals-react-transform": "0.3.1", "@rollup/plugin-replace": "5.0.7", "@rollup/pluginutils": "5.1.0", "@types/react": "18.3.3", @@ -86,6 +87,7 @@ }, "devDependencies": { "@babel/preset-react": "7.24.7", + "@preact/signals-react-transform": "0.3.1", "@rollup/plugin-replace": "5.0.7", "@rollup/pluginutils": "5.1.0", "@types/react": "18.3.3", @@ -113,7 +115,7 @@ "workbox-core": "7.1.0", "workbox-precaching": "7.1.0" }, - "hash": "c82f832ffb59d66dde1948274c83627ffb639371902bb1e40d7882fa436e8671" + "hash": "316ce801b8c30276eacc1ea1e1e2a41c78fd044f280cf3df62df0dbc223eae2b" }, "overrides": { "@vaadin/common-frontend": "$@vaadin/common-frontend", diff --git a/packages/java/tests/spring/react-signals/package-lock.json b/packages/java/tests/spring/react-signals/package-lock.json index 8e7ce85f45..e2b6db54a4 100644 --- a/packages/java/tests/spring/react-signals/package-lock.json +++ b/packages/java/tests/spring/react-signals/package-lock.json @@ -34,6 +34,7 @@ }, "devDependencies": { "@babel/preset-react": "7.24.7", + "@preact/signals-react-transform": "0.3.1", "@rollup/plugin-replace": "5.0.7", "@rollup/pluginutils": "5.1.0", "@types/react": "18.3.3", @@ -3008,6 +3009,54 @@ "@webcomponents/shadycss": "^1.9.1" } }, + "node_modules/@preact/signals-core": { + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/@preact/signals-core/-/signals-core-1.6.1.tgz", + "integrity": "sha512-KXEEmJoKDlo0Igju/cj9YvKIgyaWFDgnprShQjzimUd5VynAAdTWMshawEOjUVeKbsI0aR58V6WOQp+DNcKApw==", + "dev": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/preact" + } + }, + "node_modules/@preact/signals-react": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@preact/signals-react/-/signals-react-2.0.2.tgz", + "integrity": "sha512-JcqkrRJtYmSlVy89DL65ruFEGv4rTreQWVE/fmGQ+FtN86TaYUcwIesE4lR6IkuX33ZpGjdoh8a+0auDePD5UA==", + "dev": true, + "dependencies": { + "@preact/signals-core": "^1.6.1", + "use-sync-external-store": "^1.2.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/preact" + }, + "peerDependencies": { + "react": "^16.14.0 || 17.x || 18.x" + } + }, + "node_modules/@preact/signals-react-transform": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/@preact/signals-react-transform/-/signals-react-transform-0.3.1.tgz", + "integrity": "sha512-30wip3FKvXciDlUpd3XkGu+HOCYKV9GD4W3ELDceqK1OWysjryph/pbKW+ZcAVx5WzQTFcdkobhP+AjN6piauw==", + "dev": true, + "dependencies": { + "@babel/helper-module-imports": "^7.22.5", + "@babel/helper-plugin-utils": "^7.22.5", + "@preact/signals-react": "^2.0.1", + "debug": "^4.3.4", + "use-sync-external-store": "^1.2.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/preact" + }, + "peerDependencies": { + "@babel/core": "^7.0.0", + "react": "^16.14.0 || 17.x || 18.x" + } + }, "node_modules/@remix-run/router": { "version": "1.16.1", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.1.tgz", @@ -8562,6 +8611,15 @@ "punycode": "^2.1.0" } }, + "node_modules/use-sync-external-store": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz", + "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==", + "dev": true, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/vite": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.1.tgz", diff --git a/packages/java/tests/spring/react-signals/package.json b/packages/java/tests/spring/react-signals/package.json index 930d8ff141..7a2c21fecf 100644 --- a/packages/java/tests/spring/react-signals/package.json +++ b/packages/java/tests/spring/react-signals/package.json @@ -30,6 +30,7 @@ }, "devDependencies": { "@babel/preset-react": "7.24.7", + "@preact/signals-react-transform": "0.3.1", "@rollup/plugin-replace": "5.0.7", "@rollup/pluginutils": "5.1.0", "@types/react": "18.3.3", @@ -86,6 +87,7 @@ }, "devDependencies": { "@babel/preset-react": "7.24.7", + "@preact/signals-react-transform": "0.3.1", "@rollup/plugin-replace": "5.0.7", "@rollup/pluginutils": "5.1.0", "@types/react": "18.3.3", @@ -113,7 +115,7 @@ "workbox-core": "7.1.0", "workbox-precaching": "7.1.0" }, - "hash": "c82f832ffb59d66dde1948274c83627ffb639371902bb1e40d7882fa436e8671" + "hash": "316ce801b8c30276eacc1ea1e1e2a41c78fd044f280cf3df62df0dbc223eae2b" }, "overrides": { "@vaadin/common-frontend": "$@vaadin/common-frontend", diff --git a/packages/ts/react-signals/src/index.ts b/packages/ts/react-signals/src/index.ts index 047f8d9520..4cbe9dd400 100644 --- a/packages/ts/react-signals/src/index.ts +++ b/packages/ts/react-signals/src/index.ts @@ -1,6 +1 @@ -import { installAutoSignalTracking } from '@preact/signals-react/runtime'; - -// eslint-disable-next-line @typescript-eslint/no-unsafe-call -installAutoSignalTracking(); - export * from '@preact/signals-react';