Add React 18+ support

Author: kmoskwiak

.github/workflows/nodejs.yml

@@ -1,7 +1,7 @@
 # This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
 # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
 
-name: Node.js CI
+name: CI
 
 on:
   push:
@@ -16,12 +16,12 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [10.x, 12.x]
+        node-version: [16.x, 17.x, 18.x, 20.x, 22.x]
 
     steps:
     - uses: actions/checkout@v2
     - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
+      uses: actions/setup-node@v3
       with:
         node-version: ${{ matrix.node-version }}
     - run: npm ci

.github/workflows/npmpublish.yml

@@ -12,9 +12,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v3
         with:
-          node-version: 12
+          node-version-file: ".nvmrc"
       - run: npm ci
       - run: npm run build
       - run: npm test
@@ -24,9 +24,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v3
         with:
-          node-version: 12
+          node-version-file: ".nvmrc"
           registry-url: https://registry.npmjs.org/
       - run: npm ci
       - run: npm run build

.github/workflows/playwright.yml

@@ -10,7 +10,7 @@ jobs:
     - uses: actions/checkout@v3
     - uses: actions/setup-node@v3
       with:
-        node-version: 18
+        node-version-file: ".nvmrc"
     - name: Install dependencies
       run: npm ci
     - name: Install Playwright Browsers

.gitignore

@@ -5,3 +5,4 @@ dist-server
 /test-results/
 /playwright-report/
 /playwright/.cache/
+/*.scratchpad.*

.nvmrc

@@ -1 +1 @@
-v18.16.0
+v22.3

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 3.x.x
+
+## 3.0.0 Bling bang bang born
+
 ## 2.x.x
 
 ### 2.0.x

README.md

@@ -35,7 +35,7 @@ This is a part of server side render phase. Se an example for the whole code.
 const { ServerDataContext, resolveData } = createServerContext();
 
 // We need to render app twice.
-// First - render App to reqister all effects
+// First - render App to register all effects
 renderToString(
   <ServerDataContext>
     <App />
@@ -49,7 +49,7 @@ const data = await resolveData();
 res.write(data.toHtml());
 
 // Render App for the second time
-// This time data form effects will be avaliable in components
+// This time data form effects will be available in components
 const htmlStream = renderToNodeStream(
   <ServerDataContext>
     <App />

babel.config.json

@@ -1,7 +1,12 @@
 {
   "presets": [
     "@babel/env",
-    "@babel/preset-react",
+    [
+      "@babel/preset-react", 
+      {
+        "runtime": "automatic"
+      }
+    ],
     "@babel/preset-typescript"
   ]
 }

tests/example.spec.ts e2e/example.spec.ts

@@ -12,6 +12,7 @@ module.exports = {
       {
         test: [/\.jsx?$/, /\.tsx?$/],
         use: ["babel-loader"],
+        exclude: /node_modules/,
       },
       {
         test: /\.(jpe?g|png|gif|svg)$/i,

examples/basic/configs/common.js

@@ -1,9 +1,8 @@
 import express from 'express';
 import path from 'path';
-import React from 'react';
 import fs from 'fs';
-import {renderToPipeableStream} from 'react-dom/server';
-import {Page} from './Page';
+import { renderToPipeableStream } from 'react-dom/server';
+import { Page } from './Page';
 
 const pageRaw = fs.readFileSync(
 	path.resolve(__dirname, '../../dist/index.html'),
@@ -18,7 +17,7 @@ const app = express();
 app.use('/static', express.static(path.resolve(__dirname, '../../dist')));
 
 app.use('/error', (req, res) => {
-	res.status(503).json({error: true});
+	res.status(503).json({ error: true });
 });
 
 app.use('/data', (_req, res) => {

examples/basic/server.tsx

@@ -1,4 +1,6 @@
 module.exports = {
 	preset: 'ts-jest',
-	testEnvironment: 'jsdom',
+	testMatch: [
+		'**/src/**/*.test.{ts,tsx}'
+	]
 };