From d22baf8380e3ce5b667e758cf27fefd16130c3f0 Mon Sep 17 00:00:00 2001 From: baurine <2008.hbl@gmail.com> Date: Fri, 2 Aug 2024 11:14:26 +0800 Subject: [PATCH] refactor(playground-nextjs): remove dynamic load --- .../extensions/ai-widget/src/placeholder.ts | 2 +- .../extensions/ai-widget/src/tooltip-hint.ts | 2 +- packages/extensions/ai-widget/src/utils.ts | 42 +++++++++++-------- .../playground-nextjs/app/example/page.tsx | 7 +--- .../playground-nextjs/app/examples/page.tsx | 8 +--- .../app/playground/editor-panel/editor.tsx | 15 +------ .../app/playground/editor-panel/index.tsx | 7 +--- .../components/biz/dynamic-editor-example.tsx | 11 ----- 8 files changed, 33 insertions(+), 61 deletions(-) delete mode 100644 packages/playground-nextjs/components/biz/dynamic-editor-example.tsx diff --git a/packages/extensions/ai-widget/src/placeholder.ts b/packages/extensions/ai-widget/src/placeholder.ts index 2da8b27..22adacd 100644 --- a/packages/extensions/ai-widget/src/placeholder.ts +++ b/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' diff --git a/packages/extensions/ai-widget/src/tooltip-hint.ts b/packages/extensions/ai-widget/src/tooltip-hint.ts index 4382ad6..1df7099 100644 --- a/packages/extensions/ai-widget/src/tooltip-hint.ts +++ b/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) diff --git a/packages/extensions/ai-widget/src/utils.ts b/packages/extensions/ai-widget/src/utils.ts index b664540..9ec9f30 100644 --- a/packages/extensions/ai-widget/src/utils.ts +++ b/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()) +} diff --git a/packages/playground-nextjs/app/example/page.tsx b/packages/playground-nextjs/app/example/page.tsx index c2676c5..9ad2674 100644 --- a/packages/playground-nextjs/app/example/page.tsx +++ b/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 (
- +
) } diff --git a/packages/playground-nextjs/app/examples/page.tsx b/packages/playground-nextjs/app/examples/page.tsx index a0a2242..b87cf27 100644 --- a/packages/playground-nextjs/app/examples/page.tsx +++ b/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]' )} > - + diff --git a/packages/playground-nextjs/app/playground/editor-panel/editor.tsx b/packages/playground-nextjs/app/playground/editor-panel/editor.tsx index 48866c6..5810523 100644 --- a/packages/playground-nextjs/app/playground/editor-panel/editor.tsx +++ b/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 } diff --git a/packages/playground-nextjs/app/playground/editor-panel/index.tsx b/packages/playground-nextjs/app/playground/editor-panel/index.tsx index 5786bdd..cfcf1cd 100644 --- a/packages/playground-nextjs/app/playground/editor-panel/index.tsx +++ b/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 ( diff --git a/packages/playground-nextjs/components/biz/dynamic-editor-example.tsx b/packages/playground-nextjs/components/biz/dynamic-editor-example.tsx deleted file mode 100644 index fb79f8b..0000000 --- a/packages/playground-nextjs/components/biz/dynamic-editor-example.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import dynamic from 'next/dynamic' - -// https://dev.to/vvo/how-to-solve-window-is-not-defined-errors-in-react-and-next-js-5f97 -// use dynamic load to resolve compile error when running `next build` - -export const DynamicEditorExample = dynamic( - () => import('./editor-example').then((mod) => mod.EditorExample), - { - ssr: false - } -)