dynamically load prettier

tscircuit · Jan 11, 2025 · 0f52c0b · 0f52c0b
1 parent 35a2209
commit 0f52c0b
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 17 deletions.
diff --git a/index.html b/index.html
@@ -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>
diff --git a/src/App.tsx b/src/App.tsx
@@ -45,7 +45,13 @@ const lazyImport = (importFn: () => Promise<any>) =>
 const AiPage = lazyImport(() => import("@/pages/ai"))
 const AuthenticatePage = lazyImport(() => import("@/pages/authorize"))
 const DashboardPage = lazyImport(() => import("@/pages/dashboard"))
-const EditorPage = lazyImport(() => import("@/pages/editor"))
+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"))

diff --git a/src/lib/utils/load-prettier.ts b/src/lib/utils/load-prettier.ts
@@ -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)
+  })
+}
diff --git a/vite.config.ts b/vite.config.ts
@@ -105,20 +105,6 @@ export default defineConfig(async (): Promise<UserConfig> => {
           main: path.resolve(__dirname, "index.html"),
           landing: path.resolve(__dirname, "landing.html"),
         },
-        output: {
-          manualChunks(id) {
-            if (
-              id.includes("CodeEditor") ||
-              id.includes("prettier") ||
-              id.includes("@codemirror")
-            ) {
-              return "editor"
-            }
-            //  if (id.includes('node_modules')) {
-            //    return 'vendor'
-            //  }
-          },
-        },
       },
     },
     ssr: {