Merge pull request #71 from baurine/fix/navigator-not-defined

refactor(playground-nextjs): remove dynamic load

packages/extensions/ai-widget/src/placeholder.ts

@@ -41,7 +41,7 @@ class AIPlaceholderWidget extends WidgetType {
   }
 
   toDOM(view: EditorView): HTMLElement {
-    const cmd = isAppleOs ? 'Command' : 'Ctrl'
+    const cmd = isAppleOs() ? 'Command' : 'Ctrl'
 
     const root = document.createElement('span')
     root.className = 'cm-ai-placeholder'

packages/extensions/ai-widget/src/tooltip-hint.ts

@@ -53,7 +53,7 @@ const cursorTooltipBaseTheme = EditorView.baseTheme({
 //------------------------------------------
 
 function getCursorTooltips(state: EditorState): readonly Tooltip[] {
-  const cmd = isAppleOs ? 'Command' : 'Ctrl'
+  const cmd = isAppleOs() ? 'Command' : 'Ctrl'
 
   return state.selection.ranges
     .filter((range) => !range.empty)

packages/extensions/ai-widget/src/utils.ts

@@ -1,22 +1,30 @@
 function getOS() {
-  let userAgent = navigator.userAgent
-  if (/windows phone/i.test(userAgent)) {
-    return 'Windows Phone'
-  } else if (/android/i.test(userAgent)) {
-    return 'Android'
-  } else if (/iPad|iPhone|iPod/.test(userAgent)) {
-    return 'iOS'
-  } else if (/Macintosh|MacIntel|MacPPC|Mac68K/i.test(userAgent)) {
-    return 'macOS'
-  } else if (/Windows|Win16|Win32|WinCE|Win64/i.test(userAgent)) {
-    return 'Windows'
-  } else if (/Linux/i.test(userAgent)) {
-    return 'Linux'
-  } else {
-    return 'Unknown OS'
+  // ref: https://dev.to/vvo/how-to-solve-window-is-not-defined-errors-in-react-and-next-js-5f97
+  if (typeof window !== 'undefined') {
+    let userAgent = navigator.userAgent
+    if (/windows phone/i.test(userAgent)) {
+      return 'Windows Phone'
+    } else if (/android/i.test(userAgent)) {
+      return 'Android'
+    } else if (/iPad|iPhone|iPod/.test(userAgent)) {
+      return 'iOS'
+    } else if (/Macintosh|MacIntel|MacPPC|Mac68K/i.test(userAgent)) {
+      return 'macOS'
+    } else if (/Windows|Win16|Win32|WinCE|Win64/i.test(userAgent)) {
+      return 'Windows'
+    } else if (/Linux/i.test(userAgent)) {
+      return 'Linux'
+    } else {
+      return 'Unknown OS'
+    }
   }
+  return 'Unknown OS'
 }
 
-export const os = getOS()
+export function os() {
+  return getOS()
+}
 
-export const isAppleOs = ['macOS', 'iOS'].includes(os)
+export function isAppleOs() {
+  return ['macOS', 'iOS'].includes(os())
+}

packages/playground-nextjs/app/example/page.tsx

@@ -1,4 +1,4 @@
-import { DynamicEditorExample } from '@/components/biz/dynamic-editor-example'
+import { EditorExample } from '@/components/biz/editor-example'
 
 export default function Page({
   searchParams
@@ -10,10 +10,7 @@ export default function Page({
 }) {
   return (
     <main className="h-screen">
-      <DynamicEditorExample
-        example={searchParams?.ex}
-        theme={searchParams?.theme}
-      />
+      <EditorExample example={searchParams?.ex} theme={searchParams?.theme} />
     </main>
   )
 }

packages/playground-nextjs/app/examples/page.tsx

@@ -1,7 +1,7 @@
 import { GithubIcon, FullscreenIcon } from 'lucide-react'
 import Link from 'next/link'
 
-import { DynamicEditorExample } from '@/components/biz/dynamic-editor-example'
+import { EditorExample } from '@/components/biz/editor-example'
 import { Button } from '@/components/ui/button'
 import { cn } from '@/lib/utils'
 
@@ -59,11 +59,7 @@ export default function Page({
               showOutputBox ? 'h-[600px]' : 'h-[400px]'
             )}
           >
-            <DynamicEditorExample
-              example={ex}
-              theme={editorTheme}
-              withSelect={true}
-            />
+            <EditorExample example={ex} theme={editorTheme} withSelect={true} />
           </div>
         </div>
       </div>

packages/playground-nextjs/app/playground/editor-panel/editor.tsx

@@ -54,20 +54,7 @@ function convertSchemaToSQLConfig(dbList: SchemaRes): SQLConfig {
   return { schema, tables }
 }
 
-// wholly shit!
-// when I use `export function Editor`, and dynamic load this file, next.js still reports prerender error, `ReferenceError: navigator is not defined` after running `pnpm build`.
-// full code:
-//   const MyEditor = dynamic(() => import("./editor").then((mod) => mod.Editor), {
-//     ssr: false,
-//   });
-// build logs: https://vercel.com/baurines-projects/tisqleditor/5Y4HjQY6xeDYVCBCaBrpLxawdYPD?filter=errors
-//
-// then I export Editor as default, aka `export default function Editor`, then, the error is dismissed, can't understand it totally.
-// full code:
-//   const MyEditor = dynamic(() => import("./editor")), {
-//     ssr: false,
-//   });
-export default function Editor() {
+export function Editor() {
   const {
     api: { saveFile },
     state: { activeFileId, openedFiles }

packages/playground-nextjs/app/playground/editor-panel/index.tsx

@@ -1,11 +1,6 @@
-import dynamic from 'next/dynamic'
-
 import { EditorActions } from './actions'
 import { OpenedFilesTabs } from './opened-files'
-
-const Editor = dynamic(() => import('./editor'), {
-  ssr: false
-})
+import { Editor } from './editor'
 
 export function EditorPanel() {
   return (