Raise minimum React version to 18

.changeset/raise-react-18.md

@@ -0,0 +1,5 @@
+---
+"@agney/playground": major
+---
+
+Raise minimum React version to 18

example/package.json

@@ -6,7 +6,6 @@
   "keywords": [],
   "license": "MIT",
   "author": "Agney Menon <agney@outlook.in> (@agneymenon)",
-  "main": "index.js",
   "scripts": {
     "start": "parcel src/index.html",
     "test": "echo \"Error: no test specified\" && exit 1"

example/src/index.js

@@ -1,7 +1,6 @@
 import React from "react";
 import { render } from "react-dom";
 import "babel-polyfill";
-import "@reach/tabs/styles.css";
 import Playground from "@agney/playground";
 
 const App = () => {

playground/package.json

@@ -44,31 +44,31 @@
   },
   "dependencies": {
     "@agney/react-inspector": "^4.0.0",
-    "@reach/auto-id": "^0.16.0",
-    "@reach/tabs": "^0.16.1",
+    "@reach/auto-id": "^0.18.0",
+    "@reach/tabs": "^0.18.0",
     "goober": "^2.0.41",
     "lodash.merge": "^4.6.2",
-    "prism-react-renderer": "^1.2.1",
-    "react-simple-code-editor": "^0.11.0"
+    "prism-react-renderer": "^2.4.1",
+    "react-simple-code-editor": "^0.14.1"
   },
   "devDependencies": {
-    "@rollup/plugin-babel": "^6.1.0",
-    "@testing-library/react": "^12.1.2",
-    "@types/lodash": "^4.14.175",
+    "@rollup/plugin-babel": "^7.0.0",
+    "@testing-library/react": "^16.3.2",
+    "@types/lodash": "^4.17.24",
     "@types/lodash-es": "^4.17.5",
     "@types/lodash.merge": "^4.6.6",
-    "@types/react": "^17.0.29",
-    "@types/react-dom": "^17.0.9",
-    "@types/react-inspector": "^4.0.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@types/react-inspector": "^6.0.1",
     "babel-plugin-react-compiler": "^1.0.0",
-    "jsdom": "^26.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "tsdown": "^0.18.1",
-    "vitest": "^3.0.0"
+    "jsdom": "^29.0.2",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "tsdown": "^0.21.10",
+    "vitest": "^4.1.5"
   },
   "peerDependencies": {
-    "react": ">=16",
-    "react-dom": ">=16"
+    "react": ">=18",
+    "react-dom": ">=18"
   }
 }

playground/src/Editor/EditorSetup.tsx

@@ -1,8 +1,8 @@
 import { Fragment } from "react";
 import type { FC } from "react";
 import SimpleEditor from "react-simple-code-editor";
-import Highlight, { defaultProps } from "prism-react-renderer";
-import theme from "prism-react-renderer/themes/nightOwl";
+import { Highlight, themes } from "prism-react-renderer";
+const theme = themes.nightOwl;
 import { styled } from "goober";
 
 import type { IEditorTabs } from "../types";
@@ -30,7 +30,7 @@ const EditorSetup: FC<IProps> = ({ code, language, onChange }) => {
         onValueChange={(value: string) => onChange(value, language)}
         style={{ height: "100%" }}
         highlight={(code) => (
-          <Highlight {...defaultProps} theme={theme} code={code} language={language}>
+          <Highlight theme={theme} code={code} language={language}>
             {({ tokens, getLineProps, getTokenProps }) => (
               <Fragment>
                 {tokens.map((line, i) => (