@adminide-stack/form-builder-core 5.1.4-alpha.62 → 5.1.4-alpha.66

package/src/inngest/monacoAutocompleteIntegration.ts

@@ -0,0 +1,432 @@
+/**
+ * Monaco Editor Integration for JavaScript Autocomplete
+ *
+ * Integrates with the js-autocomplete-extension via command execution
+ * to provide intelligent code completions in step function editors.
+ */
+
+import { getStepCompletionContext, getStepTypeDefinitions } from './stepGenerator';
+import type { InngestStep } from './interfaces/types';
+
+export interface MonacoAutocompleteOptions {
+    /** Enable Inngest step functions context */
+    enableInngestContext?: boolean;
+    /** Custom scope variables */
+    customScope?: string[];
+    /** Enable type info on hover */
+    enableHoverInfo?: boolean;
+    /** Command service for executing extension commands */
+    commandService?: any;
+}
+
+/**
+ * Setup JavaScript autocomplete for Monaco Editor using extension commands
+ *
+ * @param monaco Monaco editor instance
+ * @param options Configuration options
+ * @param commandService Service for executing extension commands
+ */
+export async function setupMonacoAutocomplete(
+    monaco: any,
+    options: MonacoAutocompleteOptions = {},
+    commandService?: any,
+) {
+    const { enableInngestContext = true, customScope = [], enableHoverInfo = true } = options;
+
+    const commands = commandService || options.commandService;
+
+    if (!commands) {
+        console.warn('No command service provided, autocomplete will not be available');
+        return;
+    }
+
+    // Build scope context
+    const scope = [...customScope];
+    if (enableInngestContext) {
+        scope.push('step', 'event', 'run', 'sleep', 'sendEvent', 'waitForEvent');
+    }
+
+    // Configure TypeScript/JavaScript compiler options to prevent worker errors
+    const compilerOptions = {
+        target: monaco.languages.typescript.ScriptTarget.ES2020,
+        allowNonTsExtensions: true,
+        moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+        module: monaco.languages.typescript.ModuleKind.CommonJS,
+        noEmit: true,
+        esModuleInterop: true,
+        allowJs: true,
+        checkJs: false,
+        noSemanticValidation: false,
+        noSyntaxValidation: false,
+    };
+
+    // Set compiler options for both JavaScript and TypeScript
+    monaco.languages.typescript.javascriptDefaults.setCompilerOptions(compilerOptions);
+    monaco.languages.typescript.typescriptDefaults.setCompilerOptions(compilerOptions);
+
+    // Configure diagnostics options to prevent unnecessary worker calls
+    monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
+        noSemanticValidation: false,
+        noSyntaxValidation: false,
+        diagnosticCodesToIgnore: [1108], // Ignore "A 'return' statement can only be used within a function body"
+    });
+
+    monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+        noSemanticValidation: false,
+        noSyntaxValidation: false,
+    });
+
+    // Disable eager model sync to prevent worker trying to access non-existent models
+    monaco.languages.typescript.javascriptDefaults.setEagerModelSync(false);
+    monaco.languages.typescript.typescriptDefaults.setEagerModelSync(false);
+
+    // Register completion provider for JavaScript
+    monaco.languages.registerCompletionItemProvider('javascript', {
+        triggerCharacters: ['.', ' '],
+
+        provideCompletionItems: async (model: any, position: any) => {
+            try {
+                const text = model.getValue();
+                const offset = model.getOffsetAt(position);
+
+                // Call the autocomplete extension command
+                const result = await commands.executeCommand({
+                    command: 'jsAutocomplete.getCompletions',
+                    arguments: [text, offset, scope.length > 0 ? scope : undefined],
+                });
+
+                if (!result || !result.completions) {
+                    return { suggestions: [] };
+                }
+
+                // Convert to Monaco completion items
+                const suggestions = result.completions.map((completion: any) => ({
+                    label: completion.name,
+                    kind: determineCompletionKind(completion.type, monaco),
+                    documentation: formatDocumentation(completion),
+                    insertText: completion.name,
+                    detail: completion.type || 'any',
+                    sortText: getSortText(completion),
+                }));
+
+                return {
+                    suggestions,
+                    incomplete: result.isIncomplete || false,
+                };
+            } catch (error) {
+                console.error('Autocomplete error:', error);
+                return { suggestions: [] };
+            }
+        },
+
+        resolveCompletionItem: async (item: any) => {
+            if (!enableHoverInfo) {
+                return item;
+            }
+
+            try {
+                // Get detailed type info for the completion
+                const typeInfo = await commands.executeCommand({
+                    command: 'jsAutocomplete.getTypeInfo',
+                    arguments: [item.label, scope.length > 0 ? scope : undefined],
+                });
+
+                if (typeInfo) {
+                    item.documentation = {
+                        value: formatDetailedDocumentation(item.label, typeInfo),
+                        isTrusted: true,
+                    };
+                }
+            } catch (error) {
+                console.error('Type info resolution error:', error);
+            }
+
+            return item;
+        },
+    });
+
+    // Register completion provider for TypeScript
+    monaco.languages.registerCompletionItemProvider('typescript', {
+        triggerCharacters: ['.', ' '],
+
+        provideCompletionItems: async (model: any, position: any) => {
+            try {
+                const text = model.getValue();
+                const offset = model.getOffsetAt(position);
+
+                // Call the autocomplete extension command
+                const result = await commands.executeCommand({
+                    command: 'jsAutocomplete.getCompletions',
+                    arguments: [text, offset, scope.length > 0 ? scope : undefined],
+                });
+
+                if (!result || !result.completions) {
+                    return { suggestions: [] };
+                }
+
+                // Convert to Monaco completion items
+                const suggestions = result.completions.map((completion: any) => ({
+                    label: completion.name,
+                    kind: determineCompletionKind(completion.type, monaco),
+                    documentation: formatDocumentation(completion),
+                    insertText: completion.name,
+                    detail: completion.type || 'any',
+                    sortText: getSortText(completion),
+                }));
+
+                return {
+                    suggestions,
+                    incomplete: result.isIncomplete || false,
+                };
+            } catch (error) {
+                console.error('TypeScript autocomplete error:', error);
+                return { suggestions: [] };
+            }
+        },
+    });
+
+    // Register hover provider for type information
+    if (enableHoverInfo) {
+        monaco.languages.registerHoverProvider('javascript', {
+            provideHover: async (model: any, position: any) => {
+                try {
+                    const word = model.getWordAtPosition(position);
+                    if (!word) {
+                        return null;
+                    }
+
+                    // Get type info via extension command
+                    const typeInfo = await commands.executeCommand({
+                        command: 'jsAutocomplete.getTypeInfo',
+                        arguments: [word.word, scope.length > 0 ? scope : undefined],
+                    });
+
+                    if (!typeInfo) {
+                        return null;
+                    }
+
+                    return {
+                        range: new monaco.Range(
+                            position.lineNumber,
+                            word.startColumn,
+                            position.lineNumber,
+                            word.endColumn,
+                        ),
+                        contents: [
+                            { value: `**${word.word}**: \`${typeInfo.type || 'any'}\`` },
+                            { value: typeInfo.doc || 'No documentation available' },
+                        ],
+                    };
+                } catch (error) {
+                    console.error('Hover provider error:', error);
+                    return null;
+                }
+            },
+        });
+
+        monaco.languages.registerHoverProvider('typescript', {
+            provideHover: async (model: any, position: any) => {
+                try {
+                    const word = model.getWordAtPosition(position);
+                    if (!word) {
+                        return null;
+                    }
+
+                    const typeInfo = await commands.executeCommand({
+                        command: 'jsAutocomplete.getTypeInfo',
+                        arguments: [word.word, scope.length > 0 ? scope : undefined],
+                    });
+
+                    if (!typeInfo) {
+                        return null;
+                    }
+
+                    return {
+                        range: new monaco.Range(
+                            position.lineNumber,
+                            word.startColumn,
+                            position.lineNumber,
+                            word.endColumn,
+                        ),
+                        contents: [
+                            { value: `**${word.word}**: \`${typeInfo.type || 'any'}\`` },
+                            { value: typeInfo.doc || 'No documentation available' },
+                        ],
+                    };
+                } catch (error) {
+                    console.error('TypeScript hover provider error:', error);
+                    return null;
+                }
+            },
+        });
+    }
+
+    console.log('Monaco autocomplete integration setup complete');
+}
+
+/**
+ * Setup autocomplete for a specific Inngest step
+ * Provides step-specific context and completions
+ */
+export async function setupStepAutocomplete(monaco: any, step: InngestStep, code: string, commandService: any) {
+    const context = getStepCompletionContext(step, code);
+
+    await setupMonacoAutocomplete(
+        monaco,
+        {
+            enableInngestContext: true,
+            customScope: [...context.scope, ...context.variables],
+            enableHoverInfo: true,
+            commandService,
+        },
+        commandService,
+    );
+
+    // Add step-specific type definitions
+    const typeDefinitions = getStepTypeDefinitions();
+    monaco.languages.typescript.javascriptDefaults.addExtraLib(typeDefinitions, 'file:///inngest-step-types.d.ts');
+}
+
+/**
+ * Install a library for autocomplete
+ */
+export async function installLibraryForAutocomplete(
+    commandService: any,
+    url: string,
+    accessors: string[],
+): Promise<boolean> {
+    try {
+        await commandService.executeCommand({
+            command: 'jsAutocomplete.installLibrary',
+            arguments: [url, accessors],
+        });
+        console.log(`Library installed: ${accessors.join(', ')}`);
+        return true;
+    } catch (error) {
+        console.error('Failed to install library:', error);
+        return false;
+    }
+}
+
+/**
+ * Update autocomplete configuration
+ */
+export async function updateAutocompleteConfig(
+    commandService: any,
+    config: {
+        includeDefaults?: boolean;
+        includeLibraries?: boolean;
+        enableDynamicLibraries?: boolean;
+        customDefinitions?: string[];
+    },
+): Promise<boolean> {
+    try {
+        await commandService.executeCommand({
+            command: 'jsAutocomplete.updateConfig',
+            arguments: [config],
+        });
+        console.log('Autocomplete config updated');
+        return true;
+    } catch (error) {
+        console.error('Failed to update autocomplete config:', error);
+        return false;
+    }
+}
+
+/**
+ * Get available type definitions
+ */
+export async function getAvailableDefinitions(commandService: any): Promise<string[]> {
+    try {
+        const definitions = await commandService.executeCommand({
+            command: 'jsAutocomplete.getAvailableDefinitions',
+            arguments: [],
+        });
+        return definitions || [];
+    } catch (error) {
+        console.error('Failed to get available definitions:', error);
+        return [];
+    }
+}
+
+// Helper functions
+
+function determineCompletionKind(type: string | undefined, monaco: any): number {
+    if (!type) {
+        return monaco.languages.CompletionItemKind.Variable;
+    }
+
+    if (type.includes('fn(') || type.includes('=>')) {
+        return monaco.languages.CompletionItemKind.Function;
+    }
+
+    if (type.startsWith('class ') || type.includes('{}')) {
+        return monaco.languages.CompletionItemKind.Class;
+    }
+
+    if (type.includes('[]')) {
+        return monaco.languages.CompletionItemKind.Field;
+    }
+
+    if (type === 'number' || type === 'string' || type === 'boolean') {
+        return monaco.languages.CompletionItemKind.Keyword;
+    }
+
+    return monaco.languages.CompletionItemKind.Variable;
+}
+
+function formatDocumentation(completion: { name: string; type?: string; doc?: string; url?: string }): string {
+    const parts: string[] = [];
+
+    if (completion.type) {
+        parts.push(`\`${completion.type}\``);
+    }
+
+    if (completion.doc) {
+        parts.push(completion.doc);
+    }
+
+    if (completion.url) {
+        parts.push(`[Documentation](${completion.url})`);
+    }
+
+    return parts.join('\n\n') || completion.name;
+}
+
+function formatDetailedDocumentation(name: string, typeInfo: { type?: string; doc?: string; url?: string }): string {
+    const parts: string[] = [];
+
+    parts.push(`## ${name}`);
+    parts.push('');
+
+    if (typeInfo.type) {
+        parts.push('```typescript');
+        parts.push(typeInfo.type);
+        parts.push('```');
+        parts.push('');
+    }
+
+    if (typeInfo.doc) {
+        parts.push(typeInfo.doc);
+        parts.push('');
+    }
+
+    if (typeInfo.url) {
+        parts.push(`[View Documentation](${typeInfo.url})`);
+    }
+
+    return parts.join('\n');
+}
+
+function getSortText(completion: { name: string; type?: string }): string {
+    // Prioritize functions and commonly used types
+    if (completion.type?.includes('fn(') || completion.type?.includes('=>')) {
+        return `0_${completion.name}`;
+    }
+
+    if (completion.type?.startsWith('class ')) {
+        return `1_${completion.name}`;
+    }
+
+    return `2_${completion.name}`;
+}

package/src/inngest/stepGenerator.ts

@@ -6,8 +6,191 @@ export type { ExtractedFunction } from './interfaces/types';
 /**
  * Step function generation utilities for unified code generation
  * Used by both browser editor and server execution
+ *
+ * Integrates with js-autocomplete-extension for intelligent code completion
  */
 
+/**
+ * Get scope context for code completion in step functions
+ * Returns available variables and their types for autocomplete
+ */
+export function getStepCompletionScope(): string[] {
+    return [
+        'step',
+        'event',
+        'run',
+        'sleep',
+        'sendEvent',
+        'waitForEvent',
+        'Promise',
+        'console',
+        'Date',
+        'JSON',
+        'Array',
+        'Object',
+    ];
+}
+
+/**
+ * Get type definitions for step function context
+ * Used by Monaco editor for enhanced IntelliSense
+ */
+export function getStepTypeDefinitions(): string {
+    return `
+// Inngest Step API
+declare const step: {
+    run<T>(id: string, fn: (event: any, step: any) => Promise<T> | T): Promise<T>;
+    sendEvent(id: string, input: { name: string; data?: any }): Promise<void>;
+    waitForEvent<T = any>(id: string, opts: { event: string; timeout?: string | number }): Promise<T>;
+    sleep(id: string, ms: string | number): Promise<void>;
+};
+
+// Event context
+declare const event: {
+    data: any;
+    id: string;
+    name: string;
+    ts: number;
+    user?: any;
+};
+
+// Common utilities available in step functions
+declare const console: {
+    log(...args: any[]): void;
+    error(...args: any[]): void;
+    warn(...args: any[]): void;
+    info(...args: any[]): void;
+};
+
+// Promise and async utilities
+declare class Promise<T> {
+    then<TResult>(onfulfilled?: (value: T) => TResult | Promise<TResult>): Promise<TResult>;
+    catch<TResult>(onrejected?: (reason: any) => TResult | Promise<TResult>): Promise<TResult>;
+    finally(onfinally?: () => void): Promise<T>;
+    static all<T>(promises: Promise<T>[]): Promise<T[]>;
+    static race<T>(promises: Promise<T>[]): Promise<T>;
+    static resolve<T>(value: T): Promise<T>;
+    static reject(reason?: any): Promise<never>;
+}
+
+// Date utilities
+declare class Date {
+    constructor();
+    constructor(value: number | string);
+    toISOString(): string;
+    getTime(): number;
+    static now(): number;
+}
+`;
+}
+
+/**
+ * Get autocomplete suggestions for a specific step type
+ * Returns context-specific completions based on step type
+ */
+export function getStepTypeCompletions(stepType: string): Array<{ name: string; snippet: string; doc: string }> {
+    const completions: Record<string, Array<{ name: string; snippet: string; doc: string }>> = {
+        sleep: [
+            {
+                name: 'step.sleep',
+                snippet: "await step.sleep('${1:step-id}', '${2:5s}');",
+                doc: 'Sleep for a specified duration. Accepts time strings like "5s", "1m", "1h"',
+            },
+        ],
+        sendEvent: [
+            {
+                name: 'step.sendEvent',
+                snippet: `await step.sendEvent('\${1:step-id}', {
+  name: '\${2:event.name}',
+  data: {
+    \${3:key}: \${4:value}
+  }
+});`,
+                doc: 'Send an event to trigger other workflows',
+            },
+        ],
+        waitForEvent: [
+            {
+                name: 'step.waitForEvent',
+                snippet: `const \${1:result} = await step.waitForEvent('\${2:step-id}', {
+  event: '\${3:event.name}',
+  timeout: '\${4:60s}'
+});`,
+                doc: 'Wait for a specific event before continuing',
+            },
+        ],
+        run: [
+            {
+                name: 'step.run',
+                snippet: `const \${1:result} = await step.run('\${2:step-id}', async () => {
+  \${3:// Your logic here}
+  return { success: true };
+});`,
+                doc: 'Run a unit of work with automatic retries and error handling',
+            },
+        ],
+        parallel: [
+            {
+                name: 'Promise.all',
+                snippet: `const results = await Promise.all([
+  \${1:step.run('step-1', async () => { return 1; })},
+  \${2:step.run('step-2', async () => { return 2; })}
+]);`,
+                doc: 'Execute multiple steps in parallel',
+            },
+        ],
+    };
+
+    return completions[stepType] || completions.run;
+}
+
+/**
+ * Extract variable names from step code for completion context
+ * Returns all declared variables in the step function
+ */
+export function extractVariablesFromCode(code: string): string[] {
+    const variables: string[] = [];
+
+    // Match const/let/var declarations
+    const declRegex = /(?:const|let|var)\s+(\w+)/g;
+    let match;
+
+    while ((match = declRegex.exec(code)) !== null) {
+        variables.push(match[1]);
+    }
+
+    // Match function parameters
+    const paramRegex = /(?:async\s+)?\(([^)]*)\)\s*=>/g;
+    while ((match = paramRegex.exec(code)) !== null) {
+        const params = match[1].split(',').map((p) => p.trim().split(/\s+/)[0]);
+        variables.push(...params.filter((p) => p && p !== ''));
+    }
+
+    return [...new Set(variables)]; // Remove duplicates
+}
+
+/**
+ * Get completion context for a step at a specific position
+ * Used by Monaco editor to provide context-aware completions
+ */
+export interface CompletionContext {
+    scope: string[];
+    typeDefinitions: string;
+    snippets: Array<{ name: string; snippet: string; doc: string }>;
+    variables: string[];
+}
+
+export function getStepCompletionContext(step: InngestStep, code: string): CompletionContext {
+    const stepType = step.type || 'run';
+
+    return {
+        scope: getStepCompletionScope(),
+        typeDefinitions: getStepTypeDefinitions(),
+        snippets: getStepTypeCompletions(stepType),
+        variables: extractVariablesFromCode(code),
+    };
+}
+
 // Pass through code without any cleaning/validation
 export function cleanStepCode(code: string): string {
     return code;