From f544d93d6be182159619a3cea9892392b246d693 Mon Sep 17 00:00:00 2001 From: Nate Kelley Date: Fri, 8 Aug 2025 09:40:46 -0600 Subject: [PATCH] Make query cache a little faster --- apps/web/next.config.mjs | 4 +- .../ui/inputs/AppCodeEditor/AppCodeEditor.tsx | 69 ++++++++++--------- .../SyntaxHighlight/shiki-instance.ts | 7 -- apps/web/src/config/env.mjs | 3 +- .../BusterReactQuery/getQueryClient.ts | 4 +- .../BusterReactQuery/queryClientConfig.ts | 4 +- 6 files changed, 45 insertions(+), 46 deletions(-) diff --git a/apps/web/next.config.mjs b/apps/web/next.config.mjs index 0756e4c9c..869b46017 100644 --- a/apps/web/next.config.mjs +++ b/apps/web/next.config.mjs @@ -94,12 +94,12 @@ const nextConfig = { transpilePackages: ['shiki'], // ESLint configuration eslint: { - ignoreDuringBuilds: false, + ignoreDuringBuilds: process.env.NEXT_DISABLE_LINT === 'true' || process.env.CI === 'true', dirs: ['src'] }, // Disable TypeScript type checking during builds typescript: { - ignoreBuildErrors: false + ignoreBuildErrors: process.env.NEXT_DISABLE_TS_CHECK === 'true' }, sassOptions: { includePaths: [path.join(__dirname, 'styles')], diff --git a/apps/web/src/components/ui/inputs/AppCodeEditor/AppCodeEditor.tsx b/apps/web/src/components/ui/inputs/AppCodeEditor/AppCodeEditor.tsx index f49f90704..2dc1adc6b 100644 --- a/apps/web/src/components/ui/inputs/AppCodeEditor/AppCodeEditor.tsx +++ b/apps/web/src/components/ui/inputs/AppCodeEditor/AppCodeEditor.tsx @@ -7,7 +7,6 @@ import './MonacoWebWorker'; import type { editor } from 'monaco-editor/esm/vs/editor/editor.api'; import React, { forwardRef, useMemo } from 'react'; -import { useMemoizedFn } from '@/hooks'; import { cn } from '@/lib/classMerge'; import { CircleSpinnerLoaderContainer } from '../../loaders/CircleSpinnerLoaderContainer'; import { configureMonacoToUseYaml } from './yamlHelper'; @@ -16,9 +15,14 @@ import { configureMonacoToUseYaml } from './yamlHelper'; //import NightOwnTheme from 'monaco-themes/themes/Night Owl.json'; //https://github.com/brijeshb42/monaco-ace-tokenizer -import { Editor } from '@monaco-editor/react'; import { useTheme } from 'next-themes'; +import dynamic from 'next/dynamic'; +const Editor = dynamic(() => import('@monaco-editor/react').then((m) => m.Editor), { + ssr: false, + loading: () => null +}); + interface AppCodeEditorProps { className?: string; onChangeEditorHeight?: (height: number) => void; @@ -103,43 +107,44 @@ export const AppCodeEditor = forwardRef }; }, [readOnlyMessage, monacoEditorOptions]); - const onMountCodeEditor = useMemoizedFn( - async (editor: editor.IStandaloneCodeEditor, monaco: typeof import('monaco-editor')) => { - const [GithubLightTheme, NightOwlTheme] = await Promise.all([ - (await import('./themes/github_light_theme')).default, - (await import('./themes/tomorrow_night_theme')).default - ]); + const onMountCodeEditor = async ( + editor: editor.IStandaloneCodeEditor, + monaco: typeof import('monaco-editor') + ) => { + const [GithubLightTheme, NightOwlTheme] = await Promise.all([ + (await import('./themes/github_light_theme')).default, + (await import('./themes/tomorrow_night_theme')).default + ]); - monaco.editor.defineTheme('github-light', GithubLightTheme); - monaco.editor.defineTheme('night-owl', NightOwlTheme); - editor.updateOptions({ - theme: useDarkMode ? 'night-owl' : 'github-light', - colorDecorators: true - }); - if (onChangeEditorHeight) { - editor.onDidContentSizeChange(() => { - const contentHeight = editor.getContentHeight(); - onChangeEditorHeight(contentHeight); - }); - } - - if (language === 'yaml') { - await configureMonacoToUseYaml(monaco); - } - - onMount?.(editor, monaco); - - editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, () => { - onMetaEnter?.(); + monaco.editor.defineTheme('github-light', GithubLightTheme); + monaco.editor.defineTheme('night-owl', NightOwlTheme); + editor.updateOptions({ + theme: useDarkMode ? 'night-owl' : 'github-light', + colorDecorators: true + }); + if (onChangeEditorHeight) { + editor.onDidContentSizeChange(() => { + const contentHeight = editor.getContentHeight(); + onChangeEditorHeight(contentHeight); }); } - ); - const onChangeCodeEditor = useMemoizedFn((v: string | undefined) => { + if (language === 'yaml') { + await configureMonacoToUseYaml(monaco); + } + + onMount?.(editor, monaco); + + editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, () => { + onMetaEnter?.(); + }); + }; + + const onChangeCodeEditor = (v: string | undefined) => { if (!readOnly) { onChange?.(v || ''); } - }); + }; return (
{ - console.warn('Failed to pre-initialize syntax highlighter:', error); - }); -} - export const getFallbackStyle = (isDarkMode: boolean) => { return { background: isDarkMode ? githubDark.bg : githubLight.bg, diff --git a/apps/web/src/config/env.mjs b/apps/web/src/config/env.mjs index 33d122f4b..ff73ab946 100644 --- a/apps/web/src/config/env.mjs +++ b/apps/web/src/config/env.mjs @@ -1,5 +1,6 @@ import { z } from 'zod'; -import { isServer } from '@tanstack/react-query'; + +const isServer = typeof window === 'undefined'; if (!isServer) { throw new Error('env.mjs is only meant to be used on the server'); diff --git a/apps/web/src/context/BusterReactQuery/getQueryClient.ts b/apps/web/src/context/BusterReactQuery/getQueryClient.ts index 31d62a6fc..1aeda8f6d 100644 --- a/apps/web/src/context/BusterReactQuery/getQueryClient.ts +++ b/apps/web/src/context/BusterReactQuery/getQueryClient.ts @@ -20,6 +20,7 @@ function makeQueryClient(params?: { defaultOptions: { queries: { refetchOnWindowFocus: false, + retryDelay: ERROR_RETRY_DELAY, staleTime: PREFETCH_STALE_TIME, gcTime: GC_TIME, enabled: () => { @@ -31,8 +32,7 @@ function makeQueryClient(params?: { params.openErrorNotification(error); } return false; - }, - retryDelay: ERROR_RETRY_DELAY + } }, mutations: { retry: (failureCount, error) => { diff --git a/apps/web/src/context/BusterReactQuery/queryClientConfig.ts b/apps/web/src/context/BusterReactQuery/queryClientConfig.ts index 1c316c7fa..d8773f499 100644 --- a/apps/web/src/context/BusterReactQuery/queryClientConfig.ts +++ b/apps/web/src/context/BusterReactQuery/queryClientConfig.ts @@ -1,4 +1,4 @@ -export const PREFETCH_STALE_TIME = 1000 * 10; // 10 seconds +export const PREFETCH_STALE_TIME = 1000 * 60 * 1; // 1 minutes export const ERROR_RETRY_DELAY = 1 * 1000; // 1 second delay after error -export const GC_TIME = 1000 * 60 * 60 * 24 * 3; // 3 days - matches persistence duration +export const GC_TIME = 1000 * 60 * 5; // 5 minutes - matches new persistence duration export const USER_CANCELLED_ERROR = new Error('User cancelled');