tscircuit · seveibar · Jan 11, 2025 · Jan 11, 2025 · Jan 11, 2025 · Jan 11, 2025
@@ -8,7 +8,7 @@
     "indentStyle": "space"
   },
   "files": {
-    "ignore": ["cosmos-export", "dist", "package.json"]
+    "ignore": ["cosmos-export", "dist", "package.json", ".vercel"]
   },
   "javascript": {
     "formatter": {

@@ -18,7 +18,5 @@
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
-    <script async src="https://unpkg.com/prettier@2.8.8/standalone.js"></script>
-    <script async src="https://unpkg.com/prettier@2.8.8/parser-typescript.js"></script>
   </body>
 </html>
@@ -73,6 +73,7 @@
     "@valtown/codemirror-codeium": "^1.1.1",
     "@valtown/codemirror-ts": "^2.2.0",
     "@vercel/analytics": "^1.4.1",
+    "vite-plugin-vercel": "^9.0.4",
     "change-case": "^5.4.4",
     "circuit-json": "^0.0.130",
     "circuit-json-to-bom-csv": "^0.0.6",
@@ -121,6 +122,7 @@
   },
   "devDependencies": {
     "@anthropic-ai/sdk": "^0.27.3",
+    "terser": "^5.27.0",
     "@babel/standalone": "^7.26.2",
     "@biomejs/biome": "^1.9.2",
     "@playwright/test": "^1.48.0",

@@ -1,44 +1,111 @@
+import { ComponentType, Suspense, lazy } from "react"
 import { Toaster } from "@/components/ui/toaster"
 import { Route, Switch } from "wouter"
 import "./components/CmdKMenu"
 import { ContextProviders } from "./ContextProviders"
-import { AiPage } from "./pages/ai"
-import AuthenticatePage from "./pages/authorize"
-import { DashboardPage } from "./pages/dashboard"
-import { EditorPage } from "./pages/editor"
-import { LandingPage } from "./pages/landing"
-import { MyOrdersPage } from "./pages/my-orders"
-import { NewestPage } from "./pages/newest"
-import { PreviewPage } from "./pages/preview"
-import { QuickstartPage } from "./pages/quickstart"
-import { SearchPage } from "./pages/search"
-import { SettingsPage } from "./pages/settings"
-import { UserProfilePage } from "./pages/user-profile"
-import { ViewOrderPage } from "./pages/view-order"
-import { ViewSnippetPage } from "./pages/view-snippet"
-import { DevLoginPage } from "./pages/dev-login"
+import React from "react"
+
+const lazyImport = (importFn: () => Promise<any>) =>
+  lazy<ComponentType<any>>(async () => {
+    try {
+      const module = await importFn()
+
+      if (module.default) {
+        return { default: module.default }
+      }
+
+      const pageExportNames = ["Page", "Component", "View"]
+      for (const suffix of pageExportNames) {
+        const keys = Object.keys(module).filter((key) => key.endsWith(suffix))
+        if (keys.length > 0) {
+          return { default: module[keys[0]] }
+        }
+      }
+
+      const componentExport = Object.values(module).find(
+        (exp) => typeof exp === "function" && exp.prototype?.isReactComponent,
+      )
+      if (componentExport) {
+        return { default: componentExport }
+      }
+
+      throw new Error(
+        `No valid React component found in module. Available exports: ${Object.keys(module).join(", ")}`,
+      )
+    } catch (error) {
+      console.error("Failed to load component:", error)
+      throw error
+    }
+  })
+
+const AiPage = lazyImport(() => import("@/pages/ai"))
+const AuthenticatePage = lazyImport(() => import("@/pages/authorize"))
+const DashboardPage = lazyImport(() => import("@/pages/dashboard"))
+const EditorPage = lazyImport(async () => {
+  const [editorModule] = await Promise.all([
+    import("@/pages/editor"),
+    import("@/lib/utils/load-prettier").then((m) => m.loadPrettier()),
+  ])
+  return editorModule
+})
+const LandingPage = lazyImport(() => import("@/pages/landing"))
+const MyOrdersPage = lazyImport(() => import("@/pages/my-orders"))
+const NewestPage = lazyImport(() => import("@/pages/newest"))
+const PreviewPage = lazyImport(() => import("@/pages/preview"))
+const QuickstartPage = lazyImport(() => import("@/pages/quickstart"))
+const SearchPage = lazyImport(() => import("@/pages/search"))
+const SettingsPage = lazyImport(() => import("@/pages/settings"))
+const UserProfilePage = lazyImport(() => import("@/pages/user-profile"))
+const ViewOrderPage = lazyImport(() => import("@/pages/view-order"))
+const ViewSnippetPage = lazyImport(() => import("@/pages/view-snippet"))
+const DevLoginPage = lazyImport(() => import("@/pages/dev-login"))
+
+class ErrorBoundary extends React.Component<
+  { children: React.ReactNode },
+  { hasError: boolean }
+> {
+  constructor(props: { children: React.ReactNode }) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  static getDerivedStateFromError() {
+    return { hasError: true }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <div>Something went wrong loading the page.</div>
+    }
+    return this.props.children
+  }
+}
 
 function App() {
   return (
     <ContextProviders>
-      <Switch>
-        <Route path="/" component={LandingPage} />
-        <Route path="/editor" component={EditorPage} />
-        <Route path="/quickstart" component={QuickstartPage} />
-        <Route path="/dashboard" component={DashboardPage} />
-        <Route path="/ai" component={AiPage} />
-        <Route path="/newest" component={NewestPage} />
-        <Route path="/settings" component={SettingsPage} />
-        <Route path="/search" component={SearchPage} />
-        <Route path="/authorize" component={AuthenticatePage} />
-        <Route path="/my-orders" component={MyOrdersPage} />
-        <Route path="/orders/:orderId" component={ViewOrderPage} />
-        <Route path="/preview" component={PreviewPage} />
-        <Route path="/dev-login" component={DevLoginPage} />
-        <Route path="/:username" component={UserProfilePage} />
-        <Route path="/:author/:snippetName" component={ViewSnippetPage} />
-      </Switch>
-      <Toaster />
+      <ErrorBoundary>
+        <Suspense fallback={<div>Loading...</div>}>
+          <Switch>
+            <Route path="/" component={LandingPage} />
+            <Route path="/editor" component={EditorPage} />
+            <Route path="/quickstart" component={QuickstartPage} />
+            <Route path="/dashboard" component={DashboardPage} />
+            <Route path="/ai" component={AiPage} />
+            <Route path="/newest" component={NewestPage} />
+            <Route path="/settings" component={SettingsPage} />
+            <Route path="/search" component={SearchPage} />
+            <Route path="/authorize" component={AuthenticatePage} />
+            <Route path="/my-orders" component={MyOrdersPage} />
+            <Route path="/orders/:orderId" component={ViewOrderPage} />
+            <Route path="/preview" component={PreviewPage} />
+            <Route path="/dev-login" component={DevLoginPage} />
+            <Route path="/:username" component={UserProfilePage} />
+            <Route path="/:author/:snippetName" component={ViewSnippetPage} />
+          </Switch>
+        </Suspense>
+        <Toaster />
+      </ErrorBoundary>
     </ContextProviders>
   )
 }

@@ -0,0 +1,12 @@
+import React from "react"
+import ReactDOMServer from "react-dom/server"
+import App from "./App"
+
+export function render() {
+  const html = ReactDOMServer.renderToString(
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>,
+  )
+  return { html }
+}
@@ -0,0 +1,18 @@
+export async function loadPrettier() {
+  if (window.prettier) return
+
+  await Promise.all([
+    loadScript("https://unpkg.com/prettier@2.8.8/standalone.js"),
+    loadScript("https://unpkg.com/prettier@2.8.8/parser-typescript.js"),
+  ])
+}
+
+function loadScript(src: string): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const script = document.createElement("script")
+    script.src = src
+    script.onload = () => resolve()
+    script.onerror = reject
+    document.head.appendChild(script)
+  })
+}
@@ -4,6 +4,7 @@ import type { PluginOption } from "vite"
 import path from "path"
 import react from "@vitejs/plugin-react"
 import { getNodeHandler } from "winterspec/adapters/node"
+import vercel from "vite-plugin-vercel"
 
 // @ts-ignore
 import winterspecBundle from "./dist/bundle.js"
@@ -40,7 +41,13 @@ function apiFakePlugin(): Plugin {
 export default defineConfig(async (): Promise<UserConfig> => {
   let proxyConfig: Record<string, any> | undefined
 
-  const plugins: PluginOption[] = [react()]
+  const plugins: PluginOption[] = [
+    react(),
+    vercel({
+      prerender: false,
+      buildCommand: "bun run build",
+    }),
+  ]
 
   if (process.env.VITE_BUNDLE_ANALYZE === "true" || 1) {
     const { visualizer } = await import("rollup-plugin-visualizer")
@@ -80,33 +87,30 @@ export default defineConfig(async (): Promise<UserConfig> => {
       host: "127.0.0.1",
       proxy: proxyConfig,
     },
+    base: "./",
     build: {
-      minify: false,
+      minify: "terser",
       terserOptions: {
-        compress: false,
-        mangle: false,
+        compress: {
+          drop_console: true,
+          drop_debugger: true,
+        },
+        format: {
+          comments: false,
+        },
       },
       reportCompressedSize: true, // https://github.com/vitejs/vite/issues/10086
       rollupOptions: {
         input: {
           main: path.resolve(__dirname, "index.html"),
           landing: path.resolve(__dirname, "landing.html"),
         },
-        output: {
-          manualChunks: {
-            "react-vendor": ["react", "react-dom"],
-            codemirror: [
-              "@codemirror/autocomplete",
-              "@codemirror/lang-javascript",
-              "@codemirror/lang-json",
-              "@codemirror/lint",
-              "@codemirror/state",
-              "@codemirror/view",
-            ],
-          },
-        },
       },
     },
+    ssr: {
+      noExternal: ["react-dom/client"],
+      target: "node",
+    },
     resolve: {
       alias: {
         "@": path.resolve(__dirname, "./src"),