Ling0925
/
buster
mirror of https://github.com/buster-so/buster.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fixed monaco issue

This commit is contained in:
Nate Kelley 2025-09-02 11:56:06 -06:00
parent eecf6dd028
commit 3a60bdefc7
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
7 changed files with 127 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/web-tss/src/components/ui/inputs/AppCodeEditor/AppCodeEditor.tsx
View File

@ -1,8 +1,6 @@
//https://github.com/popsql/monaco-sql-languages/blob/main/example/src/App.js#L2
//https://dtstack.github.io/monaco-sql-languages/
import './MonacoWebWorker';
import { Editor } from '@monaco-editor/react';
import { ClientOnly } from '@tanstack/react-router';
import type { editor } from 'monaco-editor/esm/vs/editor/editor.api';
@ -101,6 +99,12 @@ export const AppCodeEditor = forwardRef<AppCodeEditorHandle, AppCodeEditorProps>
const onMountCodeEditor = useCallback(
async (editor: editor.IStandaloneCodeEditor, monaco: typeof import('monaco-editor')) => {
// Setup Monaco web workers (client-side only)
if (typeof window !== 'undefined') {
const { setupMonacoWorkers } = await import('./setupMonacoWorkers');
await setupMonacoWorkers();
}
const [GithubLightTheme, NightOwlTheme] = await Promise.all([
(await import('./themes/github_light_theme')).default,
(await import('./themes/tomorrow_night_theme')).default,

26
apps/web-tss/src/components/ui/inputs/AppCodeEditor/MonacoWebWorker.ts
View File

@ -1,26 +0,0 @@
import { loader } from '@monaco-editor/react';
import { isServer } from '@/lib/window';
if (!isServer) {
self.MonacoEnvironment = {
async getWorker(_, label) {
if (label === 'json') {
const jsonWorker = await import('monaco-editor/esm/vs/language/json/json.worker?worker');
return new jsonWorker.default();
}
if (label === 'yaml') {
// For YAML, we'll use the JSON worker as it provides similar functionality
const jsonWorker = await import('monaco-editor/esm/vs/language/json/json.worker?worker');
return new jsonWorker.default();
}
// Default to editorWorkerService for all other languages
const editorWorker = await import('monaco-editor/esm/vs/editor/editor.worker?worker');
return new editorWorker.default();
},
};
const monaco = await import('monaco-editor');
loader.config({ monaco: monaco.default });
loader.init();
}

25
apps/web-tss/src/components/ui/inputs/AppCodeEditor/setupMonacoWorkers.ts Normal file
View File

@ -0,0 +1,25 @@
// This file is only imported client-side, so worker imports won't be processed during SSR
export const setupMonacoWorkers = async () => {
if (typeof window === 'undefined') return;
self.MonacoEnvironment = {
async getWorker(_, label) {
if (label === 'json') {
const { default: Worker } = await import(
'monaco-editor/esm/vs/language/json/json.worker?worker'
);
return new Worker();
}
if (label === 'yaml') {
// For YAML, we'll use the JSON worker as it provides similar functionality
const { default: Worker } = await import(
'monaco-editor/esm/vs/language/json/json.worker?worker'
);
return new Worker();
}
// Default to editorWorkerService for all other languages
const { default: Worker } = await import('monaco-editor/esm/vs/editor/editor.worker?worker');
return new Worker();
},
};
};

5
apps/web-tss/src/integrations/tanstack-dev-tools/metric-store-devtools.tsx
View File

@ -140,7 +140,4 @@ function DevtoolPanel() {
);
}
export default {
name: 'Metric Original Store',
render: <DevtoolPanel />,
};
export default DevtoolPanel;

87
apps/web-tss/src/integrations/tanstack-dev-tools/tanstack-devtools-impl.tsx
View File

@ -1,32 +1,73 @@
import { TanStackDevtools as TanstackDevtoolsBase } from '@tanstack/react-devtools';
import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools';
import { ClientOnly } from '@tanstack/react-router';
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools';
import type React from 'react';
import StoreDevtools from './metric-store-devtools';
import { lazy, Suspense } from 'react';
//import StoreDevtools from './metric-store-devtools';
const LazyTanstackDevtools = lazy(() =>
import('@tanstack/react-devtools').then((mod) => ({
default: mod.TanStackDevtools,
}))
);
const LazyReactQueryDevtoolsPanel = lazy(() =>
import('@tanstack/react-query-devtools').then((mod) => ({
default: mod.ReactQueryDevtoolsPanel,
}))
);
const LazyTanStackRouterDevtoolsPanel = lazy(() =>
import('@tanstack/react-router-devtools').then((mod) => ({
default: mod.TanStackRouterDevtoolsPanel,
}))
);
const LazyMetricStoreDevtools = lazy(() =>
import('./metric-store-devtools').then((mod) => ({
default: mod.default,
}))
);
// The actual devtools component implementation
const TanstackDevtoolsImpl: React.FC = () => {
if (import.meta.env.SSR) return null; // never render on SSR
return (
<ClientOnly>
<TanstackDevtoolsBase
config={{
position: 'bottom-left',
hideUntilHover: true,
defaultOpen: false,
}}
plugins={[
{
name: 'Tanstack Query',
render: <ReactQueryDevtoolsPanel />,
},
{
name: 'Tanstack Router',
render: <TanStackRouterDevtoolsPanel />,
},
StoreDevtools,
]}
/>
<Suspense fallback={null}>
<LazyTanstackDevtools
config={{
position: 'bottom-left',
hideUntilHover: true,
defaultOpen: false,
}}
plugins={[
{
name: 'Tanstack Query',
render: (
<Suspense fallback={null}>
<LazyReactQueryDevtoolsPanel />
</Suspense>
),
},
{
name: 'Tanstack Router',
render: (
<Suspense fallback={null}>
<LazyTanStackRouterDevtoolsPanel />
</Suspense>
),
},
{
name: 'Metric Original Store',
render: (
<Suspense fallback={null}>
<LazyMetricStoreDevtools />
</Suspense>
),
},
]}
/>
</Suspense>
</ClientOnly>
);
};

4
apps/web-tss/src/integrations/tanstack-dev-tools/tanstack-devtools.tsx
View File

@ -2,8 +2,10 @@ import { ClientOnly } from '@tanstack/react-router';
import React, { lazy, Suspense, useEffect, useState } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { isDev } from '@/config/dev';
import { isServer } from '@/lib/window';
const ENABLE_TANSTACK_PANEL = process.env.VITE_ENABLE_TANSTACK_PANEL === 'true' || isDev;
const ENABLE_TANSTACK_PANEL =
(process.env.VITE_ENABLE_TANSTACK_PANEL === 'true' || isDev) && !isServer;
// Lazy load the actual devtools component
const LazyTanstackDevtools = lazy(() =>

32
apps/web-tss/vite.config.ts
View File

@ -15,6 +15,27 @@ const config = defineConfig(({ command, mode }) => {
return {
server: { port: 3000 },
ssr: {
// Exclude Monaco Editor and related from SSR bundle
external: (id) => {
// Monaco Editor and related
if (
id.includes('monaco-editor') ||
id.includes('@monaco-editor') ||
id.includes('setupMonacoWorkers')
) {
return true;
}
// TanStack devtools (now handled via dynamic imports, but keep basic exclusions)
if (id.includes('@tanstack/devtools')) {
return true;
}
return false;
},
// Exclude Monaco Editor workers specifically
noExternal: ['!**/monaco-editor/**/*worker*'],
},
plugins: [
// this is the plugin that enables path aliases
viteTsConfigPaths({ projects: ['./tsconfig.json'] }),
@ -38,9 +59,13 @@ const config = defineConfig(({ command, mode }) => {
return true;
}
// Exclude Monaco Editor from server-side bundle (Cloudflare Workers can't handle it)
// if (id.includes('monaco-editor') || id.includes('@monaco-editor')) {
// return true;
// }
if (id.includes('monaco-editor') || id.includes('@monaco-editor')) {
return true;
}
// Exclude Monaco worker setup file from SSR
if (id.includes('setupMonacoWorkers')) {
return true;
}
// Don't externalize React and React DOM - let them be bundled
return false;
},
@ -60,7 +85,6 @@ const config = defineConfig(({ command, mode }) => {
if (id.includes('zod')) {
return 'vendor-zod';
}
// Monaco Editor is externalized, so no need to chunk it
if (id.includes('@tanstack')) {
return 'vendor-tanstack';
}