Edge runtime compat

lib/view.tsx

@@ -2,6 +2,7 @@ import { fromUniformActiveSettings } from 'components/editor/uniformsliders';
 import { useSetAtom } from 'jotai';
 import { SUPABASE_SHADERTHUMB_BUCKET_NAME } from 'lib/db/supabaseclient';
 import { getFullyQualifiedSupabaseBucketURL } from 'lib/util/urlutils';
+import dynamic from 'next/dynamic';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { useEffect } from 'react';
@@ -159,3 +160,5 @@ export function useShader(props) {
         }
     }, [router.isReady]);
 }
+
+export const DynamicEditor = dynamic(() => import('components/editor/editor'), { ssr: false });

package.json

@@ -21,10 +21,10 @@
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@monaco-editor/react": "^4.4.5",
-    "@mui/icons-material": "^5.14.14",
-    "@mui/lab": "^5.0.0-alpha.149",
-    "@mui/material": "^5.14.14",
-    "@mui/utils": "^5.14.14",
+    "@mui/icons-material": "^5.16.7",
+    "@mui/lab": "^5.0.0-alpha.173",
+    "@mui/material": "^5.16.7",
+    "@mui/utils": "^5.16.6",
     "@next/bundle-analyzer": "^12.1.6",
     "@octokit/rest": "^18.12.0",
     "@react-hook/resize-observer": "^1.2.5",
@@ -36,7 +36,7 @@
     "jotai": "^2.4.3",
     "jotai-game": "^0.1.0",
     "monaco-editor": "^0.33.0",
-    "next": "^14.1.1",
+    "next": "^14.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.5",

pages/api/auth.ts

@@ -1,6 +1,8 @@
 import { supabase } from 'lib/db/supabaseclient';
 import { NextApiRequest, NextApiResponse } from 'next';
 
+export const runtime = 'edge';
+
 const handler = (req: NextApiRequest, res: NextApiResponse) => {
     supabase.auth.api.setAuthCookie(req, res);
 };

pages/api/confirm.ts

@@ -1,6 +1,8 @@
 import { supabase } from 'lib/db/supabaseclient';
 import { NextApiRequest, NextApiResponse } from 'next';
 
+export const runtime = 'edge';
+
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
     const { email, token, type } = req.body;
 

pages/api/signup.ts

@@ -1,6 +1,8 @@
 import { supabase } from 'lib/db/supabaseclient';
 import { NextApiRequest, NextApiResponse } from 'next';
 
+export const runtime = 'edge';
+
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
     const { email, username, password } = req.body;
 

pages/embed/[id].tsx

@@ -1,6 +1,7 @@
 'use client';
-import Editor from 'components/editor/editor';
-import { fetchShader, useShader } from 'lib/view';
+import { DynamicEditor, fetchShader, useShader } from 'lib/view';
+
+export const runtime = 'experimental-edge';
 
 export async function getServerSideProps(context) {
     const id = Number(context.params.id);
@@ -15,7 +16,7 @@ export default function Index(props) {
             <style>{`
                 body { overflow: hidden; }
             `}</style>
-            <Editor embed={true} />
+            <DynamicEditor embed={true} />
         </div>
     );
 }

pages/list/[page].tsx

@@ -13,6 +13,8 @@ import Link from 'next/link';
 import { Fragment } from 'react';
 import { Item, theme } from 'theme/theme';
 
+export const runtime = 'experimental-edge';
+
 const SHADERS_PER_PAGE = 12;
 
 const getPagination = (page: number, size: number) => {

pages/profile/[username].tsx

@@ -12,6 +12,8 @@ import { CssTextField, Item, theme } from 'theme/theme';
 import { ProfileShaders } from '../../components/profileshaders';
 import { definitions } from '../../types/supabase';
 
+export const runtime = 'experimental-edge';
+
 const PROFILE_AVATAR_WIDTH = 96;
 
 async function loadShaders(username: string) {

pages/view/[id].tsx

@@ -1,6 +1,7 @@
 'use client';
-import Editor from 'components/editor/editor';
-import { buildHead, fetchShader, useShader } from 'lib/view';
+import { buildHead, DynamicEditor, fetchShader, useShader } from 'lib/view';
+
+export const runtime = 'experimental-edge';
 
 export async function getServerSideProps(context) {
     const id = Number(context.params.id);
@@ -13,7 +14,7 @@ export default function Index(props) {
     return (
         <div>
             {props.shader ? buildHead(props.shader) : null}
-            <Editor />
+            <DynamicEditor />
         </div>
     );
 }