feat: add code validator for function worker

Author: moonrailgun

src/client/components/CodeEditor/main.tsx

@@ -1,20 +1,87 @@
-import Editor, { Monaco } from '@monaco-editor/react';
-import React from 'react';
+import Editor, { Monaco, OnMount } from '@monaco-editor/react';
+import React, { useRef } from 'react';
 import { useSettingsStore } from '../../store/settings';
 import { useEvent } from '../../hooks/useEvent';
 import { sandboxGlobal } from './lib/sandbox';
+import { ValidatorFn } from './validator/fetch';
 
 interface CodeEditorProps {
   height?: string | number;
   value?: string;
   readOnly?: boolean;
   onChange?: (code: string) => void;
+  codeValidator?: ValidatorFn[];
 }
 
 export const CodeEditor: React.FC<CodeEditorProps> = React.memo((props) => {
-  const { readOnly = false } = props;
+  const { readOnly = false, codeValidator = [] } = props;
   const colorScheme = useSettingsStore((state) => state.colorScheme);
   const theme = colorScheme === 'dark' ? 'vs-dark' : 'light';
+  const editorRef = useRef<any>(null);
+  const monacoRef = useRef<Monaco | null>(null);
+
+  const validateCode = useEvent(
+    (code: string): { isValid: boolean; errors: string[] } => {
+      for (const validator of codeValidator) {
+        const result = validator(code);
+        if (!result.isValid) {
+          return result;
+        }
+      }
+
+      return { isValid: true, errors: [] };
+    }
+  );
+
+  const handleEditorDidMount: OnMount = useEvent((editor, monaco) => {
+    editorRef.current = editor;
+    monacoRef.current = monaco;
+
+    monaco.languages.typescript.javascriptDefaults.addExtraLib(
+      sandboxGlobal,
+      'global.ts'
+    );
+
+    const validateAndReport = () => {
+      const model = editor.getModel();
+      if (!model) {
+        return;
+      }
+
+      const code = model.getValue();
+      const validation = validateCode(code);
+
+      if (!validation.isValid) {
+        const markers = validation.errors.map((error, index) => ({
+          severity: monaco.MarkerSeverity.Error,
+          startLineNumber: 1,
+          startColumn: 1,
+          endLineNumber: 1,
+          endColumn: 1,
+          message: error,
+          source: 'tianji-validator',
+        }));
+
+        monaco.editor.setModelMarkers(model, 'tianji-validator', markers);
+      } else {
+        // Clear custom markers if validation passes
+        monaco.editor.setModelMarkers(model, 'tianji-validator', []);
+      }
+    };
+
+    // Initial validation
+    if (props.value) {
+      setTimeout(validateAndReport, 100);
+    }
+
+    // Listen for content changes
+    const model = editor.getModel();
+    if (model) {
+      model.onDidChangeContent(() => {
+        setTimeout(validateAndReport, 300); // Debounce validation
+      });
+    }
+  });
 
   const handleEditorWillMount = useEvent((monaco: Monaco) => {
     monaco.languages.typescript.javascriptDefaults.addExtraLib(
@@ -27,14 +94,21 @@ export const CodeEditor: React.FC<CodeEditorProps> = React.memo((props) => {
     <Editor
       height={props.height}
       theme={theme}
-      defaultLanguage="javascript"
+      defaultLanguage="typescript"
       value={props.value}
       options={{
         tabSize: 2,
         readOnly,
+        automaticLayout: true,
+        scrollBeyondLastLine: false,
+        wordWrap: 'on',
+        wrappingIndent: 'indent',
+        formatOnPaste: true,
+        formatOnType: true,
       }}
       onChange={(val) => props.onChange?.(val ?? '')}
       beforeMount={handleEditorWillMount}
+      onMount={handleEditorDidMount}
     />
   );
 });

src/client/components/CodeEditor/validator/fetch.ts

@@ -0,0 +1,36 @@
+export type ValidatorFn = (code: string) => ValidatorResult;
+
+export interface ValidatorResult {
+  isValid: boolean;
+  errors: string[];
+}
+
+export function fetchValidator(code: string): ValidatorResult {
+  const errors: string[] = [];
+
+  // Check for fetch function declaration using multiple patterns
+  const fetchPatterns = [
+    /function\s+fetch\s*\(/, // function fetch(
+    /const\s+fetch\s*=\s*function/, // const fetch = function
+    /const\s+fetch\s*=\s*\(/, // const fetch = (
+    /let\s+fetch\s*=\s*function/, // let fetch = function
+    /let\s+fetch\s*=\s*\(/, // let fetch = (
+    /var\s+fetch\s*=\s*function/, // var fetch = function
+    /var\s+fetch\s*=\s*\(/, // var fetch = (
+    /export\s+function\s+fetch\s*\(/, // export function fetch(
+    /export\s+const\s+fetch\s*=/, // export const fetch =
+  ];
+
+  const hasFetchFunction = fetchPatterns.some((pattern) => pattern.test(code));
+
+  if (!hasFetchFunction) {
+    errors.push(
+      'A fetch function must be declared. Example: function fetch() { ... }'
+    );
+  }
+
+  return {
+    isValid: errors.length === 0,
+    errors,
+  };
+}

src/client/components/worker/WorkerEditForm.tsx

@@ -32,6 +32,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
+import { fetchValidator, ValidatorFn } from '../CodeEditor/validator/fetch';
 
 const formSchema = z
   .object({
@@ -67,6 +68,8 @@ interface WorkerEditFormProps {
   onSubmit: (values: WorkerEditFormValues) => Promise<void>;
 }
 
+const codeValidator: ValidatorFn[] = [fetchValidator];
+
 export const WorkerEditForm: React.FC<WorkerEditFormProps> = React.memo(
   (props) => {
     const { t } = useTranslation();
@@ -180,9 +183,10 @@ export const WorkerEditForm: React.FC<WorkerEditFormProps> = React.memo(
                     </FormLabel>
                     <FormControl>
                       <CodeEditor
-                        height={400}
+                        height={680}
                         value={field.value}
                         onChange={field.onChange}
+                        codeValidator={codeValidator}
                       />
                     </FormControl>
                     <FormDescription>
@@ -306,6 +310,7 @@ export const WorkerEditForm: React.FC<WorkerEditFormProps> = React.memo(
               height="100%"
               value={form.watch('code')}
               onChange={(value) => form.setValue('code', value)}
+              codeValidator={codeValidator}
             />
           </FullscreenModal>