Bump scaffold (#46)

* Bump scaffold

* Use JSX classic for pages

---------

Co-authored-by: @compulim <@compulim>
Co-authored-by: William Wong <compulim@hotmail.com>

.eslintrc.react.yml

@@ -1,6 +1,5 @@
 extends:
   - plugin:react/recommended
-  - plugin:react/jsx-runtime
 plugins:
   - react
 settings:

.github/workflows/pull-request-validation.yml

@@ -7,7 +7,11 @@ on:
 
 jobs:
   call-workflow:
+    strategy:
+      matrix:
+        react-version: [current, 16, 17, 18]
     uses: compulim/workflows/.github/workflows/pull-request-validation.yml@main
     with:
       package-name: use-ref-from
+      react-version: ${{ matrix.react-version }}
       skip-integration-test: false

CHANGELOG.md

@@ -35,6 +35,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
       - [`jest@29.7.0`](https://npmjs.com/package/jest)
       - [`prettier@3.2.5`](https://npmjs.com/package/prettier)
       - [`typescript@5.4.3`](https://npmjs.com/package/typescript)
+- Updated pull request validation to test against various React versions, in PR [#46](https://github.com/compulim/use-ref-from/pull/46)
+   - Moved from JSX Runtime to JSX Classic to support testing against React 16
 
 ## [0.0.3] - 2023-10-09
 

package.json

@@ -21,6 +21,10 @@
     "postscaffold": "npm run postscaffold:eslint:react && npm run postscaffold --if-present --workspaces",
     "postscaffold:eslint:react": "npm run bump:eslintrc",
     "precommit": "npm run precommit --if-present --workspaces",
+    "switch:_": "npm run --if-present --workspaces switch && npm install --legacy-peer-deps --prefer-dedupe",
+    "switch:react:16": "SWITCH_NAME=react:16 npm run switch:_",
+    "switch:react:17": "SWITCH_NAME=react:17 npm run switch:_",
+    "switch:react:18": "SWITCH_NAME=react:18 npm run switch:_",
     "test": "npm run test --if-present --workspaces"
   },
   "devDependencies": {

packages/integration-test/babel.config.json

@@ -3,7 +3,7 @@
     [
       "@babel/preset-react",
       {
-        "runtime": "automatic"
+        "runtime": "classic"
       }
     ],
     [

packages/integration-test/jest.config.json

@@ -8,7 +8,7 @@
           [
             "@babel/preset-react",
             {
-              "runtime": "automatic"
+              "runtime": "classic"
             }
           ]
         ]
@@ -21,7 +21,7 @@
           [
             "@babel/preset-react",
             {
-              "runtime": "automatic"
+              "runtime": "classic"
             }
           ],
           [

packages/integration-test/package.json

@@ -9,6 +9,7 @@
     "bump:dev": "PACKAGES_TO_BUMP=$(cat package.json | jq -r '(.localPeerDependencies // {}) as $L | (.devDependencies // {}) | to_entries | map(select(.key as $K | $L | has($K) | not)) | map(.key + \"@latest\") | join(\" \")') && [ ! -z \"$PACKAGES_TO_BUMP\" ] && npm install $PACKAGES_TO_BUMP || true",
     "bump:prod": "PACKAGES_TO_BUMP=$(cat package.json | jq -r '(.localPeerDependencies // {}) as $L | (.dependencies // {}) | to_entries | map(select(.key as $K | $L | has($K) | not)) | map(.key + \"@latest\") | join(\" \")') && [ ! -z \"$PACKAGES_TO_BUMP\" ] && npm install $PACKAGES_TO_BUMP || true",
     "precommit": "eslint --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts ./",
+    "switch": "cat package.json | jq --arg SWITCH_NAME $SWITCH_NAME -r '(.[\"switch:\" + $SWITCH_NAME] // {}) as $TEMPLATE | .devDependencies += ($TEMPLATE.devDependencies // {}) | .dependencies += ($TEMPLATE.dependencies // {})' | tee ./package.json.tmp && mv ./package.json.tmp ./package.json",
     "test": "jest"
   },
   "author": "William Wong (https://github.com/compulim)",

packages/integration-test/tsconfig.json

@@ -1,6 +1,6 @@
 // This configuration file is for VSCode only.
 {
   "compilerOptions": {
-    "jsx": "react-jsx"
+    "jsx": "react"
   }
 }

packages/pages/package.json

@@ -11,7 +11,8 @@
     "precommit": "npm run precommit:typescript",
     "precommit:typescript": "tsc --project ./src/tsconfig.json",
     "reinstall": "rm -r node_modules package-lock.json && npm install",
-    "start": "npm run build -- --servedir=./public"
+    "start": "npm run build -- --servedir=./public",
+    "switch": "cat package.json | jq --arg SWITCH_NAME $SWITCH_NAME -r '(.[\"switch:\" + $SWITCH_NAME] // {}) as $TEMPLATE | .devDependencies += ($TEMPLATE.devDependencies // {}) | .dependencies += ($TEMPLATE.dependencies // {})' | tee ./package.json.tmp && mv ./package.json.tmp ./package.json"
   },
   "author": "William Wong (https://github.com/compulim)",
   "license": "MIT",

packages/pages/src/app/App.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import React, { Fragment } from 'react';
 import { useRefFrom } from 'use-ref-from';
 
 const App = () => {

packages/pages/src/app/index.tsx

@@ -1,7 +1,11 @@
-import { createRoot } from 'react-dom/client';
+import React from 'react';
+// eslint-disable-next-line react/no-deprecated
+import { render } from 'react-dom';
+// import { createRoot } from 'react-dom/client';
 
 import App from './App';
 
 const rootElement = document.getElementById('root');
 
-rootElement && createRoot(rootElement).render(<App />);
+// rootElement && createRoot(rootElement).render(<App />);
+rootElement && render(<App />, rootElement);

packages/pages/src/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "esModuleInterop": true,
-    "jsx": "react-jsx",
+    "jsx": "react",
     "lib": ["DOM", "ESNext", "WebWorker"],
     "moduleResolution": "Bundler",
     "noEmit": true,

packages/use-ref-from/__tests__/__setup__/typingTestTransformer.js

@@ -1,6 +1,7 @@
 // Notes: to test changes in this file, run "jest" with "--no-cache" argument.
 
 const run = ({ filename }) => {
+  const escapeStringRegexp = require('escape-string-regexp');
   const fs = require('fs/promises');
   const { extname } = require('path');
   const typeScript = require('typescript');
@@ -54,8 +55,17 @@ const run = ({ filename }) => {
 
           const expectedErrorLine = file.getFullText().split('\n')[line - 1];
           const expectedError = expectedErrorLine?.replace(/\s*\/\/\s+/u, '').trim();
+          let expectedErrors = [expectedError];
 
-          expect(message).toEqual(expect.stringContaining(expectedError));
+          try {
+            const parsed = JSON.parse(expectedError);
+
+            if (Array.isArray(expectedErrors) && expectedErrors.every(value => typeof value === 'string')) {
+              expectedErrors = parsed;
+            }
+          } catch {}
+
+          expect(message).toEqual(expect.stringMatching(new RegExp(expectedErrors.map(escapeStringRegexp).join('|'))));
         } else {
           throw new Error(typeScript.flattenDiagnosticMessageText(messageText, '\n'));
         }

packages/use-ref-from/babel.commonjs.config.json

@@ -13,7 +13,7 @@
     [
       "@babel/preset-react",
       {
-        "runtime": "automatic"
+        "runtime": "classic"
       }
     ],
     [

packages/use-ref-from/babel.esmodules.config.json

@@ -13,7 +13,7 @@
     [
       "@babel/preset-react",
       {
-        "runtime": "automatic"
+        "runtime": "classic"
       }
     ],
     [

packages/use-ref-from/jest.config.json

@@ -9,7 +9,7 @@
           [
             "@babel/preset-react",
             {
-              "runtime": "automatic"
+              "runtime": "classic"
             }
           ],
           [

packages/use-ref-from/package.json

@@ -48,6 +48,7 @@
     "precommit:typescript:production": "tsc --noEmit --project ./src/tsconfig.precommit.production.json",
     "precommit:typescript:test": "tsc --noEmit --project ./src/tsconfig.precommit.test.json",
     "prepack": "cp ../../CHANGELOG.md . && cp ../../LICENSE . && cp ../../README.md .",
+    "switch": "cat package.json | jq --arg SWITCH_NAME $SWITCH_NAME -r '(.[\"switch:\" + $SWITCH_NAME] // {}) as $TEMPLATE | .devDependencies += ($TEMPLATE.devDependencies // {}) | .dependencies += ($TEMPLATE.dependencies // {})' | tee ./package.json.tmp && mv ./package.json.tmp ./package.json",
     "test": "jest"
   },
   "repository": {
@@ -80,6 +81,7 @@
     "@tsconfig/strictest": "^2.0.4",
     "@types/jest": "^29.5.12",
     "@types/react": "^18.2.70",
+    "escape-string-regexp": "^5.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "react": "^18.2.0",

packages/use-ref-from/src/tsconfig.declaration.json

@@ -3,7 +3,7 @@
     "declaration": true,
     "emitDeclarationOnly": true,
     "esModuleInterop": true,
-    "jsx": "react-jsx",
+    "jsx": "react",
     "noEmit": false
   },
   "exclude": ["**/*.spec.*", "**/*.test.*", "__tests__/**/*"],

packages/use-ref-from/src/tsconfig.json

@@ -2,7 +2,7 @@
 {
   "compilerOptions": {
     "esModuleInterop": true,
-    "jsx": "react-jsx",
+    "jsx": "react",
     "module": "NodeNext",
     "moduleResolution": "NodeNext",
     "noEmit": true,

packages/use-ref-from/src/tsconfig.precommit.production.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "esModuleInterop": true,
-    "jsx": "react-jsx",
+    "jsx": "react",
     "module": "NodeNext",
     "moduleResolution": "NodeNext",
     "noEmit": true,

packages/use-ref-from/src/tsconfig.precommit.test.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "esModuleInterop": true,
-    "jsx": "react-jsx",
+    "jsx": "react",
     "module": "NodeNext",
     "moduleResolution": "NodeNext",
     "noEmit": true,