upgrade to TypeScript 5.0+ and drop support for React 16

.babelrc

@@ -2,6 +2,6 @@
   "presets": [
     "@babel/preset-typescript",
     "@babel/preset-env",
-    "@babel/preset-react"
+    ["@babel/preset-react", { "runtime": "automatic" }]
   ]
 }

.changeset/react-16.md

@@ -0,0 +1,5 @@
+---
+'playroom': minor
+---
+
+Drop support for React 16. Consumers are encouraged to upgrade to React 17+, which is a drop-in replacement.

.changeset/typescript-5.md

@@ -0,0 +1,5 @@
+---
+'playroom': minor
+---
+
+Support TypeScript 5.0+

.gitignore

@@ -10,3 +10,4 @@ yarn.lock
 .DS_Store
 .vscode/
 .idea/
+.eslintcache

.prettierignore

@@ -1,3 +1,4 @@
 cypress/plugins/
 cypress/fixtures/
 dist
+pnpm-lock.yaml

@types/babel__standalone.d.ts

@@ -3,7 +3,7 @@ interface TransformResponse {
 }
 
 declare module '@babel/standalone' {
-  import { TransformOptions } from '@babel/core';
+  import type { TransformOptions } from '@babel/core';
 
   function transform(
     code: string,

cypress/e2e/toolbar.cy.js

@@ -47,7 +47,7 @@ describe('Toolbar', () => {
         });
       })
       .get('[data-testid="copyToClipboard"]')
-      .click()
-      .then(() => expect(copySpy).to.have.been.called);
+      .click();
+    cy.then(() => expect(copySpy).to.have.been.called);
   });
 });

cypress/placeholder.ts

@@ -0,0 +1 @@
+// This is a placeholder file that provides for at least one TypeScript file in the project

cypress/projects/basic/components.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 
 const withPropTypes = (component) => {

cypress/projects/themed/components.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 
 const withPropTypes = (component) => {

cypress/support/utils.js

@@ -58,12 +58,11 @@ export const gotoPreview = () => {
 export const toggleSnippets = () =>
   cy.get('[data-testid="toggleSnippets"]').click();
 
-export const filterSnippets = (search) =>
-  // eslint-disable-next-line cypress/no-unnecessary-waiting
-  cy
-    .get('[data-testid="filterSnippets"]')
-    .type(search, { force: true })
-    .wait(200);
+export const filterSnippets = (search) => {
+  cy.get('[data-testid="filterSnippets"]').type(search, { force: true });
+  // eslint-disable-next-line @finsit/cypress/no-unnecessary-waiting
+  cy.wait(200);
+};
 
 export const assertSnippetsListIsVisible = () =>
   cy.get('[data-testid="snippets"]').should('be.visible');
@@ -82,7 +81,7 @@ export const assertSnippetCount = (count) =>
 
 export const assertFirstFrameContains = (text) => {
   getFirstFrame().then(($el) =>
-    // eslint-disable-next-line cypress/no-unnecessary-waiting
+    // eslint-disable-next-line @finsit/cypress/no-unnecessary-waiting
     cy
       .wrap($el.contents().find('body'))
       .wait(WAIT_FOR_FRAME_TO_RENDER)
@@ -120,14 +119,13 @@ export const selectLines = (numLines, direction = 'down') => {
 export const assertCodePaneContains = (text) => {
   getCodeEditor().within(() => {
     const lines = [];
-    cy.get('.CodeMirror-line')
-      .each(($el) => lines.push($el.text()))
-      .then(() => {
-        const code = lines.join('\n');
-        // removes code mirrors invisible last line character placeholder
-        // which is inserted to preserve prettiers new line at end of string.
-        expect(code.replace(/[\u200b]$/, '')).to.eq(text);
-      });
+    cy.get('.CodeMirror-line').each(($el) => lines.push($el.text()));
+    cy.then(() => {
+      const code = lines.join('\n');
+      // removes code mirrors invisible last line character placeholder
+      // which is inserted to preserve prettiers new line at end of string.
+      expect(code.replace(/[\u200b]$/, '')).to.eq(text);
+    });
   });
 };
 

cypress/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "isolatedModules": false,
+    "types": ["cypress"]
+  },
+  "include": ["**/*"], // override the include from the root tsconfig
+  "exclude": [] // override the exclude from the root tsconfig
+}

lib/defaultModules/FrameComponent.js

@@ -1,3 +1 @@
-import React, { Fragment } from 'react';
-
-export default ({ children }) => <Fragment>{children}</Fragment>;
+export default ({ children }) => <>{children}</>;

lib/makeDefaultWebpackConfig.js

@@ -11,7 +11,10 @@ module.exports = (playroomConfig) => ({
             options: {
               presets: [
                 require.resolve('@babel/preset-env'),
-                require.resolve('@babel/preset-react'),
+                [
+                  require.resolve('@babel/preset-react'),
+                  { runtime: 'automatic' },
+                ],
               ],
             },
           },

lib/makeWebpackConfig.js

@@ -1,4 +1,3 @@
-const fs = require('fs');
 const path = require('path');
 const webpack = require('webpack');
 const { merge } = require('webpack-merge');
@@ -19,22 +18,6 @@ module.exports = async (playroomConfig, options) => {
   const relativeResolve = (requirePath) =>
     require.resolve(requirePath, { paths: [playroomConfig.cwd] });
 
-  let isLegacyReact = true;
-
-  try {
-    // eslint-disable-next-line no-sync
-    const pkgContents = fs.readFileSync(
-      relativeResolve('react-dom/package.json'),
-      {
-        encoding: 'utf-8',
-      }
-    );
-    const { version } = JSON.parse(pkgContents);
-    isLegacyReact = !(version.startsWith('18') || version.startsWith('0.0.0'));
-  } catch (e) {
-    throw new Error('Unable to read `react-dom` package json');
-  }
-
   const staticTypes = await getStaticTypes(playroomConfig);
 
   const ourConfig = {
@@ -90,7 +73,10 @@ module.exports = async (playroomConfig, options) => {
                     require.resolve('@babel/preset-env'),
                     { shippedProposals: true },
                   ],
-                  require.resolve('@babel/preset-react'),
+                  [
+                    require.resolve('@babel/preset-react'),
+                    { runtime: 'automatic' },
+                  ],
                   require.resolve('@babel/preset-typescript'),
                 ],
               },
@@ -109,7 +95,10 @@ module.exports = async (playroomConfig, options) => {
                     require.resolve('@babel/preset-env'),
                     { shippedProposals: true },
                   ],
-                  require.resolve('@babel/preset-react'),
+                  [
+                    require.resolve('@babel/preset-react'),
+                    { runtime: 'automatic' },
+                  ],
                 ],
               },
             },
@@ -175,16 +164,6 @@ module.exports = async (playroomConfig, options) => {
       new VanillaExtractPlugin(),
       new MiniCssExtractPlugin({ ignoreOrder: true }),
       ...(options.production ? [] : [new FriendlyErrorsWebpackPlugin()]),
-      // If using a version of React earlier than 18, ignore the
-      // react-dom/client import. This hack can be removed when
-      // support for older versions of React is removed.
-      ...(isLegacyReact
-        ? [
-            new webpack.IgnorePlugin({
-              resourceRegExp: /react-dom\/client$/,
-            }),
-          ]
-        : []),
     ],
     devtool: !options.production && 'eval-source-map',
   };

package.json

@@ -21,7 +21,11 @@
     "build:all": "concurrently 'npm:build:basic' 'npm:build:themed'",
     "serve:all": "concurrently 'npm:serve:basic' 'npm:serve:themed'",
     "build-and-serve:all": "pnpm build:all && pnpm serve:all",
-    "lint": "eslint . && prettier --list-different '**/*.{js,md,ts,tsx}' && tsc --noEmit",
+    "lint": "concurrently 'npm:lint:*'",
+    "lint:eslint": "eslint --cache .",
+    "lint:prettier": "prettier --list-different '**/*.{js,md,ts,tsx}'",
+    "lint:tsc": "tsc --noEmit",
+    "lint:cypress": "tsc --project cypress/tsconfig.json",
     "format": "prettier --write '**/*.{js,md,ts,tsx}'",
     "version": "changeset version",
     "release": "changeset publish",
@@ -97,7 +101,7 @@
     "react-use": "^17.4.0",
     "read-pkg-up": "^7.0.1",
     "scope-eval": "^1.0.0",
-    "typescript": "^4.5.4",
+    "typescript": ">=5.0.0",
     "use-debounce": "^9.0.2",
     "webpack": "^5.75.0",
     "webpack-dev-server": "^4.11.1",
@@ -110,8 +114,8 @@
     "@types/jest": "^29.2.4",
     "concurrently": "^7.6.0",
     "cypress": "^12.0.2",
-    "eslint": "^8.29.0",
-    "eslint-config-seek": "^10.1.2",
+    "eslint": "^8.44.0",
+    "eslint-config-seek": "^11.3.1",
     "husky": "^8.0.2",
     "jest": "^29.3.1",
     "lint-staged": "^13.1.0",
@@ -122,8 +126,8 @@
     "surge": "^0.23.1"
   },
   "peerDependencies": {
-    "react": "^16.8 || ^17 || ^18",
-    "react-dom": "^16.8 || ^17 || ^18"
+    "react": "^17 || ^18",
+    "react-dom": "^17 || ^18"
   },
   "packageManager": "pnpm@7.18.1",
   "volta": {