chore(website): Use React.StrictMode and new next SWC

Author: mlaursen

.babelrc

@@ -1,4 +1,4 @@
-import { ReactElement, useRef, useState } from "react";
+import { ReactElement, useEffect, useState } from "react";
 import {
   Button,
   Dialog,
@@ -21,16 +21,9 @@ export function ErrorModal({
   clearErrors,
 }: ErrorModalProps): ReactElement {
   const [visible, setVisible] = useState(false);
-  const prevErrors = useRef(errors);
-
-  // why?
-  // makes it so the errors don't disappear during the exit animation
-  if (errors !== prevErrors.current) {
-    prevErrors.current = errors;
-    if (!visible && errors.length) {
-      setVisible(true);
-    }
-  }
+  useEffect(() => {
+    setVisible(errors.length > 0);
+  }, [errors]);
 
   const onRequestClose = (): void => {
     setVisible(false);

components/ErrorModal.tsx

@@ -4,6 +4,7 @@ import {
   AppBarTitle,
   Brightness4SVGIcon,
   FileInput,
+  FileUploadSVGIcon,
   FilterFramesSVGIcon,
   FilterNoneSVGIcon,
   HelpOutlineSVGIcon,
@@ -58,6 +59,7 @@ export function Header(): ReactElement {
           theme="clear"
           themeType="flat"
           style={{ flexShrink: 0 }}
+          icon={<FileUploadSVGIcon />}
         />
         <AppBarAction
           aria-label="Custom Renderers"

components/Header.tsx

@@ -1,4 +1,18 @@
 import { useCallback } from "react";
+import "prismjs/components/prism-javascript";
+import "prismjs/components/prism-jsx";
+import "prismjs/components/prism-typescript";
+import "prismjs/components/prism-tsx";
+import "prismjs/components/prism-css";
+import "prismjs/components/prism-scss";
+import "prismjs/components/prism-css-extras";
+import "prismjs/components/prism-markup";
+import "prismjs/components/prism-markdown";
+import "prismjs/components/prism-bash";
+import "prismjs/components/prism-git";
+import "prismjs/components/prism-diff";
+import "prismjs/components/prism-json";
+import "prismjs/components/prism-properties";
 import { highlightElement, languages } from "prismjs";
 import cn from "classnames";
 import {

components/renderers.tsx

@@ -1,9 +1,8 @@
+/** @type {import('next').NextConfig} */
 module.exports = {
+  reactStrictMode: true,
   eslint: {
     // I have already run lint before this step...
     ignoreDuringBuilds: true,
   },
-  exportPathMap: () => ({
-    '/': { page: '/' },
-  }),
 };

next.config.js

@@ -24,7 +24,8 @@
     "lint": "eslint \"**/*.{js,jsx,ts,tsx}\"",
     "typecheck": "tsc -p tsconfig.check.json",
     "test": "jest",
-    "start": "next dev",
+    "dev": "next dev",
+    "start": "next start",
     "build": "next build"
   },
   "dependencies": {
@@ -51,7 +52,6 @@
     "@types/prismjs": "^1.16.6",
     "@types/react": "^17.0.36",
     "@types/react-dom": "^17.0.11",
-    "babel-plugin-prismjs": "^2.1.0",
     "dotenv": "^10.0.0",
     "eslint": "^8.3.0",
     "filesize": "^8.0.6",

package.json

@@ -2596,11 +2596,6 @@ babel-plugin-polyfill-regenerator@^0.3.0:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.3.0"
 
-babel-plugin-prismjs@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-prismjs/-/babel-plugin-prismjs-2.1.0.tgz#ade627896106326ad04d6d77fba92877618de571"
-  integrity sha512-ehzSKYfeAz4U78zi/sfwsjDPlq0LvDKxNefcZTJ/iKBu+plsHsLqZhUeGf1+82LAcA35UZGbU6ksEx2Utphc/g==
-
 babel-preset-current-node-syntax@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz#b4399239b89b2a011f9ddbe3e4f401fc40cff73b"