[Chore] Upgrade to Remix 2.0 (#33)

.github/workflows/e2e.yaml

@@ -17,7 +17,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 20
           cache: "npm"
 
       - name: Get installed Playwright version

.github/workflows/lint.yaml

@@ -17,7 +17,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 20
           cache: "npm"
 
       - name: Install dependencies

.gitignore

@@ -1,8 +1,8 @@
 node_modules
 
 /.cache
-/functions/\[\[path\]\].js
-/functions/\[\[path\]\].js.map
+/.wrangler
+/functions
 /public/build
 .env
 .dev.vars

.node-version

@@ -1 +1 @@
-16.13.0
+20.9

app/components/box.tsx

@@ -9,7 +9,7 @@ export default function Box({
     <div
       className={classNames(
         "w-full border rounded-lg bg-zinc-700 border-zinc-600",
-        className
+        className,
       )}
     >
       {children}
@@ -42,7 +42,7 @@ export function BoxContent({
       className={classNames(
         "bg-zinc-800 max-h-96 overflow-auto not-prose",
         isLast && "rounded-b-lg",
-        className
+        className,
       )}
     >
       {children}
@@ -66,7 +66,7 @@ export function BoxOptions({
     <div
       className={classNames(
         "px-3 py-2 flex border-t border-gray-600 bg-zinc-800/50 items-center",
-        isLast && "rounded-b-lg"
+        isLast && "rounded-b-lg",
       )}
     >
       {children}

app/components/button.tsx

@@ -14,7 +14,7 @@ export default function Button(props: Props) {
       {...buttonProps}
       className={classNames(
         "inline-flex items-center py-2.5 px-4 text-xs font-medium text-center text-white bg-orange-600 rounded-lg hover:bg-orange-800",
-        className
+        className,
       )}
     >
       {props.label}

app/components/code.tsx

@@ -1,10 +1,10 @@
 import Editor from "react-simple-code-editor";
-// @ts-ignore
-import { highlight, languages } from "prismjs/components/prism-core";
-import "prismjs/components/prism-clike";
-import "prismjs/components/prism-javascript";
-import "prismjs/components/prism-sql";
-import "prismjs/components/prism-markup";
+import hljs from "highlight.js/lib/core";
+import javascript from "highlight.js/lib/languages/javascript";
+import sql from "highlight.js/lib/languages/sql";
+
+hljs.registerLanguage("javascript", javascript);
+hljs.registerLanguage("sql", sql);
 
 interface Props {
   readonly readonly: boolean;
@@ -23,16 +23,12 @@ export default function Code({
   language = "javascript",
   placeholder = "Paste some json…",
 }: Props) {
+  const CodeEditor = (Editor as any).default;
   return (
-    <Editor
+    <CodeEditor
       value={value}
       onValueChange={setValue}
-      highlight={(code) =>
-        highlight(
-          code,
-          language === "javascript" ? languages.js : languages.sql
-        )
-      }
+      highlight={(code: string) => hljs.highlight(code, { language }).value}
       placeholder={placeholder}
       style={{
         fontFamily: '"Fira code", monospace',

app/components/google-ad.tsx

@@ -18,7 +18,7 @@ function GoogleAd() {
     const scriptTag = document.createElement("script");
     scriptTag.setAttribute(
       "src",
-      "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9826263890932106"
+      "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9826263890932106",
     );
     scriptTag.setAttribute("type", "text/javascript");
     scriptTag.setAttribute("async", "async");

app/components/json-viewer.tsx

@@ -27,13 +27,13 @@ export default function JsonViewer({ json }: Props) {
 
       return level < expandAfter;
     },
-    [shouldExpand, expandAfter]
+    [shouldExpand, expandAfter],
   );
 
   const expandAll = useCallback(() => setShouldExpand(true), [setShouldExpand]);
   const collapseALl = useCallback(
     () => setShouldExpand(false),
-    [setShouldExpand]
+    [setShouldExpand],
   );
 
   const incrementExpandAfter = useCallback(() => {

app/components/number-input.tsx

@@ -12,7 +12,7 @@ export default forwardRef<
       type="number"
       className={classNames(
         "block text-sm border rounded-lg bg-zinc-700 border-zinc-600 placeholder-zinc-400 text-white focus:ring-orange-500 focus:border-orange-500",
-        className
+        className,
       )}
       {...rest}
     />

app/components/read-file.tsx

@@ -12,7 +12,7 @@ interface Props {
 export default function ReadFile({ accept, onLoad, type = "text" }: Props) {
   const onButtonClick = useCallback(
     () => document.getElementById("file-input")?.click(),
-    []
+    [],
   );
   const onChange = useCallback(
     (e: ChangeEvent<HTMLInputElement>) => {
@@ -46,7 +46,7 @@ export default function ReadFile({ accept, onLoad, type = "text" }: Props) {
           break;
       }
     },
-    [onLoad, type]
+    [onLoad, type],
   );
 
   return (

app/components/search.tsx

@@ -28,7 +28,7 @@ export default function Search({ open, setOpen }: Props) {
       setOpen(false);
       navigate(item.url);
     },
-    [navigate, setOpen]
+    [navigate, setOpen],
   );
 
   return (
@@ -90,7 +90,7 @@ export default function Search({ open, setOpen }: Props) {
                               className={({ active }) =>
                                 classNames(
                                   "flex cursor-default select-none items-center rounded-md px-3 py-2",
-                                  active && "bg-zinc-800 text-orange-600"
+                                  active && "bg-zinc-800 text-orange-600",
                                 )
                               }
                             >
@@ -107,7 +107,7 @@ export default function Search({ open, setOpen }: Props) {
                                 </>
                               )}
                             </Combobox.Option>
-                          )
+                          ),
                         )}
                       </ul>
                     </li>

app/components/tooltip.tsx

@@ -74,7 +74,7 @@ export function useTooltip({
       ...interactions,
       ...data,
     }),
-    [open, setOpen, interactions, data]
+    [open, setOpen, interactions, data],
   );
 }
 
@@ -120,7 +120,7 @@ export const TooltipTrigger = React.forwardRef<
         ...props,
         ...children.props,
         "data-state": context.open ? "open" : "closed",
-      })
+      }),
     );
   }
 

app/components/utiliti.tsx

@@ -13,12 +13,12 @@ interface Props<T> {
   readonly actions: Record<string, (input: string) => Promise<T>>;
   readonly renderInput: (
     input: string,
-    setInput: (input: string) => void
+    setInput: (input: string) => void,
   ) => ReactNode;
   readonly renderOutput: (
     action: string,
     input: string,
-    output: T
+    output: T,
   ) => ReactNode;
   readonly renderOptions?: () => ReactNode;
   readonly showLoadFile?: Boolean;
@@ -57,7 +57,7 @@ export default function Utiliti<T>({
           setOutput(null);
         });
     },
-    [actions]
+    [actions],
   );
 
   return (

app/entry.client.tsx

@@ -2,24 +2,14 @@ import { RemixBrowser } from "@remix-run/react";
 import { startTransition, StrictMode } from "react";
 import { hydrateRoot } from "react-dom/client";
 
-function hydrate() {
-  startTransition(() => {
-    hydrateRoot(
-      document,
-      <StrictMode>
-        <RemixBrowser />
-      </StrictMode>
-    );
-  });
-}
-
-if (typeof requestIdleCallback === "function") {
-  requestIdleCallback(hydrate);
-} else {
-  // Safari doesn't support requestIdleCallback
-  // https://caniuse.com/requestidlecallback
-  setTimeout(hydrate, 1);
-}
+startTransition(() => {
+  hydrateRoot(
+    document,
+    <StrictMode>
+      <RemixBrowser />
+    </StrictMode>,
+  );
+});
 
 // add a service worker, only in production for now
 if (

app/entry.server.tsx

@@ -1,21 +1,34 @@
-import type { EntryContext } from "@remix-run/cloudflare";
+import type { AppLoadContext, EntryContext } from "@remix-run/cloudflare";
 import { RemixServer } from "@remix-run/react";
-import { renderToString } from "react-dom/server";
+import isbot from "isbot";
+import { renderToReadableStream } from "react-dom/server";
 
-export default function handleRequest(
+export default async function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext
+  remixContext: EntryContext,
+  loadContext: AppLoadContext,
 ) {
-  const markup = renderToString(
-    <RemixServer context={remixContext} url={request.url} />
+  const body = await renderToReadableStream(
+    <RemixServer context={remixContext} url={request.url} />,
+    {
+      signal: request.signal,
+      onError(error: unknown) {
+        // Log streaming rendering errors from inside the shell
+        console.error(error);
+        responseStatusCode = 500;
+      },
+    },
   );
 
-  responseHeaders.set("Content-Type", "text/html");
+  if (isbot(request.headers.get("user-agent"))) {
+    await body.allReady;
+  }
 
-  return new Response("<!DOCTYPE html>" + markup, {
-    status: responseStatusCode,
+  responseHeaders.set("Content-Type", "text/html");
+  return new Response(body, {
     headers: responseHeaders,
+    status: responseStatusCode,
   });
 }

app/hooks/use-local-storage.ts

@@ -3,7 +3,7 @@ import { useState } from "react";
 export function useLocalStorage<T>(
   key: string,
   initialValue: T,
-  json: boolean = false
+  json: boolean = false,
 ): [T, (v: T) => void] {
   const [storedValue, setStoredValue] = useState(() => {
     if (typeof window === "undefined") {
@@ -32,7 +32,7 @@ export function useLocalStorage<T>(
       if (typeof window !== "undefined") {
         window.localStorage.setItem(
           key,
-          json ? JSON.stringify(value) : (value as string)
+          json ? JSON.stringify(value) : (value as string),
         );
       }
     } catch (error) {

app/root.tsx

@@ -1,4 +1,5 @@
-import type { LinksFunction, V2_MetaFunction } from "@remix-run/cloudflare";
+import type { LinksFunction, MetaFunction } from "@remix-run/cloudflare";
+import { cssBundleHref } from "@remix-run/css-bundle";
 import {
   isRouteErrorResponse,
   Link,
@@ -10,12 +11,12 @@ import {
   ScrollRestoration,
   useRouteError,
 } from "@remix-run/react";
-import prism from "app/styles/prism-darcula.css";
-import tailwind from "~/styles/tailwind.css";
+import tailwind from "./styles/tailwind.css";
+import highlight from "highlight.js/styles/stackoverflow-dark.css";
 import Layout from "~/components/layout";
 import { ArrowSmallLeftIcon } from "@heroicons/react/24/solid";
 
-export const meta: V2_MetaFunction = () => {
+export const meta: MetaFunction = () => {
   const title = "Utiliti";
   const description =
     "A collection of high quality, secure, and open source utilities.";
@@ -74,13 +75,14 @@ export const links: LinksFunction = () => [
   { rel: "shortcut icon", href: "/assets/favicon.ico" },
   { rel: "manifest", href: "/assets/site.webmanifest" },
   { rel: "stylesheet", href: tailwind },
-  { rel: "stylesheet", href: prism },
+  { rel: "stylesheet", href: highlight },
   { rel: "preconnect", href: "https://fonts.googleapis.com" },
   { rel: "preconnect", href: "https://fonts.gstatic.com" },
   {
     rel: "stylesheet",
     href: "https://fonts.googleapis.com/css2?family=Fira+Code&display=swap",
   },
+  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
 ];
 
 export default function App() {