Update imports for workers

This commit is contained in:
Nate Kelley 2025-09-03 15:36:46 -06:00
parent b48b8840f8
commit 596b9edc38
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
4 changed files with 31 additions and 13 deletions

View File

@ -13,7 +13,7 @@
"deploy:wrangler": "npx wrangler deploy .output/server/index.mjs --assets .output/public",
"build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 vite build -- --typecheck",
"build:local": "cross-env NODE_OPTIONS=--max-old-space-size=8192 vite build -- --typecheck --local",
"build:no-typecheck": "vite build",
"build:no-typecheck": "cross-env NODE_OPTIONS=--max-old-space-size=8192 vite build",
"build:fix": "pnpm build:no-typecheck && pnpm run build:fix-react-symlink",
"build:fix-react-symlink": "npx tsx scripts/fix-react-symlink.ts",
"serve": "vite preview",

View File

@ -4,13 +4,15 @@
import type { EditorProps, OnMount } from '@monaco-editor/react';
import { ClientOnly } from '@tanstack/react-router';
import type React from 'react';
import { forwardRef, lazy, Suspense, useCallback, useMemo } from 'react';
import { forwardRef, lazy, Suspense, useCallback, useEffect, useMemo } from 'react';
import { useMount } from '@/hooks/useMount';
import { cn } from '@/lib/utils';
import { LoadingCodeEditor } from './LoadingCodeEditor';
import { setupMonacoWebWorker } from './setupMonacoWebWorker';
import { configureMonacoToUseYaml } from './yamlHelper';
const isServer = typeof window === 'undefined';
let hasSetupMonacoWebWorker = false;
//https://github.com/brijeshb42/monaco-ace-tokenizer
@ -103,9 +105,22 @@ export const AppCodeEditor = forwardRef<AppCodeEditorHandle, AppCodeEditorProps>
};
}, [language, readOnly, readOnlyMessage, monacoEditorOptions]);
useMount(async () => {
if (hasSetupMonacoWebWorker || isServer) return;
try {
const setupMonacoWebWorker = await import('./setupMonacoWebWorker').then(
(mod) => mod.setupMonacoWebWorker
);
setupMonacoWebWorker();
} catch (error) {
console.error('Error setting up Monaco web worker:', error);
} finally {
hasSetupMonacoWebWorker = true;
}
});
const onMountCodeEditor: OnMount = useCallback(
async (editor, monaco) => {
// setupMonacoWebWorker();
const isYaml = language === 'yaml';
const [GithubLightTheme, NightOwlTheme] = await Promise.all([

View File

@ -1,20 +1,20 @@
'use client';
// Import workers as URLs using Vite's ?worker&url syntax
import editorWorkerUrl from 'monaco-editor/esm/vs/editor/editor.worker?worker&url';
import jsonWorkerUrl from 'monaco-editor/esm/vs/language/json/json.worker?worker&url';
import yamlWorkerUrl from 'monaco-yaml/yaml.worker?worker&url';
import { isServer } from '@/lib/window';
export const setupMonacoWebWorker = () => {
if (typeof window !== 'undefined') {
export const setupMonacoWebWorker = (): void => {
if (!isServer) {
window.MonacoEnvironment = {
getWorker(_moduleId, label) {
switch (label) {
case 'editorWorkerService':
return new Worker(
new URL('monaco-editor/esm/vs/editor/editor.worker', import.meta.url)
);
return new Worker(editorWorkerUrl);
case 'json':
return new Worker(
new URL('monaco-editor/esm/vs/language/json/json.worker', import.meta.url)
);
return new Worker(jsonWorkerUrl);
case 'yaml':
return new Worker(new URL('monaco-yaml/yaml.worker', import.meta.url));
return new Worker(yamlWorkerUrl);
default:
throw new Error(`Unknown label ${label}`);
}

View File

@ -42,6 +42,9 @@ const config = defineConfig(({ command, mode }) => {
})
: undefined,
],
worker: {
format: 'es',
},
build: {
chunkSizeWarningLimit: 850,
rollupOptions: {