Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Upgrade to React 19 rc #2565

Draft
wants to merge 5 commits into
base: main
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/actions/setup/action.yml
Original file line number Diff line number Diff line change
Expand Up @@ -36,4 +36,4 @@ runs:
- name: Install npm dependencies
if: ${{ steps.cache-node_modules.outputs.cache-hit != 'true' }}
shell: bash
run: npm ci
run: npm ci --legacy-peer-deps
43 changes: 43 additions & 0 deletions karma-context.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<!--
This is the execution context.
Loaded within the iframe.
Reloaded before every execution run.
-->
<html>
<head>
<title>Foo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
</head>
<body>
<!-- The scripts need to be in the body DOM element, as some test running frameworks need the body
to have already been created so they can insert their magic into it. For example, if loaded
before body, Angular Scenario test framework fails to find the body and crashes and burns in
an epic manner. -->
<script src="context.js"></script>
<script type="text/javascript">
// Configure our Karma and set up bindings
%CLIENT_CONFIG%
window.__karma__.setupContext(window);

// All served files with the latest timestamps
%MAPPINGS%
</script>
<script type="module">
window.$RefreshReg$ = () => {}
window.$RefreshSig$ = () => (type) => type
window.__vite_plugin_react_preamble_installed__ = true
</script>
<!-- Dynamically replaced with <script> tags -->
%SCRIPTS%
<!-- Since %SCRIPTS% might include modules, the `loaded()` call needs to be in a module too.
This ensures all the tests will have been declared before karma tries to run them. -->
<script type="module">
window.__karma__.loaded();
</script>
<script nomodule>
window.__karma__.loaded();
</script>
</body>
</html>
45 changes: 45 additions & 0 deletions karma-debug.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<!doctype html>
<!--
This file is almost the same as context.html - loads all source files,
but its purpose is to be loaded in the main frame (not within an iframe),
just for immediate execution, without reporting to Karma server.
-->
<html>
<head>
%X_UA_COMPATIBLE%
<title>Karma DEBUG RUNNER</title>
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
</head>
<body>
<!-- The scripts need to be at the end of body, so that some test running frameworks
(Angular Scenario, for example) need the body to be loaded so that it can insert its magic
into it. If it is before body, then it fails to find the body and crashes and burns in an epic
manner. -->
<script src="context.js"></script>
<script src="debug.js"></script>
<script type="text/javascript">
// Configure our Karma
%CLIENT_CONFIG%

// All served files with the latest timestamps
%MAPPINGS%
</script>
<script type="module">
window.$RefreshReg$ = () => {}
window.$RefreshSig$ = () => (type) => type
window.__vite_plugin_react_preamble_installed__ = true
</script>
<!-- Dynamically replaced with <script> tags -->
%SCRIPTS%
<!-- Since %SCRIPTS% might include modules, the `loaded()` call needs to be in a module too.
This ensures all the tests will have been declared before karma tries to run them. -->
<script type="module">
window.__karma__.loaded();
</script>
<script nomodule>
window.__karma__.loaded();
</script>
</body>
</html>
22 changes: 20 additions & 2 deletions karma.config.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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}`);
Expand All @@ -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: [
Expand Down
Loading
Loading