From cbd6334b9f2c62bbb79af8229fe24f1da695c028 Mon Sep 17 00:00:00 2001 From: johndoe6345789 Date: Sat, 17 Jan 2026 17:50:52 +0000 Subject: [PATCH] Generated by Spark: Can we make Monaco find our libraries? I get red squigglies on imports. --- src/components/MonacoEditor.tsx | 160 ++++++++++++++++++++++++++++++++ 1 file changed, 160 insertions(+) diff --git a/src/components/MonacoEditor.tsx b/src/components/MonacoEditor.tsx index 9e911f7..0a4d66b 100644 --- a/src/components/MonacoEditor.tsx +++ b/src/components/MonacoEditor.tsx @@ -1,5 +1,6 @@ import { lazy, Suspense } from 'react' import { Skeleton } from '@/components/ui/skeleton' +import type { Monaco } from '@monaco-editor/react' const Editor = lazy(() => import('@monaco-editor/react')) @@ -19,6 +20,164 @@ function EditorLoadingSkeleton({ height = '400px' }: { height?: string }) { ) } +function handleEditorBeforeMount(monaco: Monaco) { + monaco.languages.typescript.typescriptDefaults.setCompilerOptions({ + target: monaco.languages.typescript.ScriptTarget.Latest, + allowNonTsExtensions: true, + moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs, + module: monaco.languages.typescript.ModuleKind.ESNext, + noEmit: true, + esModuleInterop: true, + jsx: monaco.languages.typescript.JsxEmit.React, + reactNamespace: 'React', + allowJs: true, + typeRoots: ['node_modules/@types'], + }) + + monaco.languages.typescript.javascriptDefaults.setCompilerOptions({ + target: monaco.languages.typescript.ScriptTarget.Latest, + allowNonTsExtensions: true, + moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs, + module: monaco.languages.typescript.ModuleKind.ESNext, + noEmit: true, + esModuleInterop: true, + jsx: monaco.languages.typescript.JsxEmit.React, + reactNamespace: 'React', + allowJs: true, + typeRoots: ['node_modules/@types'], + }) + + monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({ + noSemanticValidation: false, + noSyntaxValidation: false, + }) + + monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({ + noSemanticValidation: false, + noSyntaxValidation: false, + }) + + const reactTypes = ` + declare module 'react' { + export function useState(initialState: T | (() => T)): [T, (newState: T | ((prevState: T) => T)) => void]; + export function useEffect(effect: () => void | (() => void), deps?: any[]): void; + export function useCallback any>(callback: T, deps: any[]): T; + export function useMemo(factory: () => T, deps: any[]): T; + export function useRef(initialValue: T): { current: T }; + export function useContext(context: React.Context): T; + export function useReducer(reducer: (state: S, action: A) => S, initialState: S): [S, (action: A) => void]; + export interface Context { Provider: any; Consumer: any; } + export function createContext(defaultValue: T): Context; + export type FC

= (props: P) => JSX.Element | null; + export type ReactNode = JSX.Element | string | number | boolean | null | undefined; + export interface CSSProperties { [key: string]: any; } + } + + declare namespace JSX { + interface Element {} + interface IntrinsicElements { + [elemName: string]: any; + } + } + ` + + const shadcnTypes = ` + declare module '@/components/ui/button' { + export interface ButtonProps { + variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'; + size?: 'default' | 'sm' | 'lg' | 'icon'; + asChild?: boolean; + className?: string; + children?: React.ReactNode; + onClick?: () => void; + type?: 'button' | 'submit' | 'reset'; + } + export function Button(props: ButtonProps): JSX.Element; + } + + declare module '@/components/ui/card' { + export interface CardProps { + className?: string; + children?: React.ReactNode; + } + export function Card(props: CardProps): JSX.Element; + export function CardHeader(props: CardProps): JSX.Element; + export function CardTitle(props: CardProps): JSX.Element; + export function CardDescription(props: CardProps): JSX.Element; + export function CardContent(props: CardProps): JSX.Element; + export function CardFooter(props: CardProps): JSX.Element; + } + + declare module '@/components/ui/input' { + export interface InputProps { + type?: string; + placeholder?: string; + value?: string; + onChange?: (e: any) => void; + className?: string; + } + export function Input(props: InputProps): JSX.Element; + } + + declare module '@/components/ui/badge' { + export interface BadgeProps { + variant?: 'default' | 'secondary' | 'destructive' | 'outline'; + className?: string; + children?: React.ReactNode; + } + export function Badge(props: BadgeProps): JSX.Element; + } + + declare module '@/components/ui/checkbox' { + export interface CheckboxProps { + checked?: boolean; + onCheckedChange?: (checked: boolean) => void; + className?: string; + } + export function Checkbox(props: CheckboxProps): JSX.Element; + } + + declare module '@/components/ui/switch' { + export interface SwitchProps { + checked?: boolean; + onCheckedChange?: (checked: boolean) => void; + className?: string; + } + export function Switch(props: SwitchProps): JSX.Element; + } + + declare module '@/lib/utils' { + export function cn(...inputs: any[]): string; + } + + declare module '@phosphor-icons/react' { + export interface IconProps { + size?: number; + weight?: 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone'; + color?: string; + className?: string; + } + export function Plus(props: IconProps): JSX.Element; + export function Minus(props: IconProps): JSX.Element; + export function Check(props: IconProps): JSX.Element; + export function X(props: IconProps): JSX.Element; + export function Trash(props: IconProps): JSX.Element; + export function PencilSimple(props: IconProps): JSX.Element; + export function MagnifyingGlass(props: IconProps): JSX.Element; + export function Heart(props: IconProps): JSX.Element; + export function Star(props: IconProps): JSX.Element; + export function User(props: IconProps): JSX.Element; + export function ShoppingCart(props: IconProps): JSX.Element; + [key: string]: (props: IconProps) => JSX.Element; + } + ` + + monaco.languages.typescript.typescriptDefaults.addExtraLib(reactTypes, 'file:///node_modules/@types/react/index.d.ts') + monaco.languages.typescript.javascriptDefaults.addExtraLib(reactTypes, 'file:///node_modules/@types/react/index.d.ts') + monaco.languages.typescript.typescriptDefaults.addExtraLib(shadcnTypes, 'file:///node_modules/@types/shadcn/index.d.ts') + monaco.languages.typescript.javascriptDefaults.addExtraLib(shadcnTypes, 'file:///node_modules/@types/shadcn/index.d.ts') +} + export function MonacoEditor({ value, onChange, @@ -36,6 +195,7 @@ export function MonacoEditor({ value={value} onChange={(newValue) => onChange(newValue || '')} theme="vs-dark" + beforeMount={handleEditorBeforeMount} options={{ minimap: { enabled: false }, fontSize: 14,