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

package/lib/utils/json.js

@@ -0,0 +1,43 @@
+function flatten(obj, parentKey = '', res = {}) {
+  Object.entries(obj).forEach(([key, value]) => {
+    const newKey = parentKey ? `${parentKey}.${key}` : key;
+    if (Array.isArray(value)) {
+      value.forEach((item, index) => {
+        if (item !== null && typeof item === 'object') {
+          flatten(item, `${newKey}.${index}`, res);
+        } else {
+          res[`${newKey}.${index}`] = item;
+        }
+      });
+    } else if (value !== null && typeof value === 'object') {
+      flatten(value, newKey, res);
+    } else {
+      res[newKey] = value;
+    }
+  });
+  return res;
+}
+function unflatten(obj) {
+  const result = {};
+  if (!obj || typeof obj !== 'object') return result;
+  for (const [flatKey, value] of Object.entries(obj)) {
+    const keys = flatKey.split('.');
+    keys.reduce((acc, cur, i) => {
+      const isLast = i === keys.length - 1;
+      const nextKey = keys[i + 1];
+      const curIsIndex = !Number.isNaN(Number(cur));
+      const nextIsIndex = !Number.isNaN(Number(nextKey));
+      // If current key is numeric, treat parent as an array
+      if (curIsIndex) {
+        if (!Array.isArray(acc)) return [];
+      }
+      if (isLast) {
+        acc[cur] = value;
+      } else if (acc[cur] == null) {
+        acc[cur] = nextIsIndex ? [] : {};
+      }
+      return acc[cur];
+    }, result);
+  }
+  return result;
+}export{flatten,unflatten};//# sourceMappingURL=json.js.map

package/lib/utils/json.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"json.js","sources":["../../src/utils/json.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA,SAAA,OAAA,CAAgB,GAAA,EAAA,cAAmB,EAAC,GAAA,GAAM,EAAE,EAAA;AAsB5C,EAAA,MAAA,CAAA,OAAA,CAAA,GAAA,CAAA,CAAA,OAAgB,CAAA,CAAA,CAAA,GAAU,EAAG,KAAE,CAAA,KAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@adminide-stack/form-builder-core",
-    "version": "5.1.4-alpha.62",
+    "version": "5.1.4-alpha.81",
     "sideEffects": false,
     "type": "module",
     "main": "lib/index.js",
@@ -24,5 +24,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "fcec3b786ecb2cf883d2ca10d7e97bc7381f341d"
+    "gitHead": "883372f3751305aa9c87265af7b7b75ac9eee30e"
 }

package/src/index.ts

@@ -1,3 +1,5 @@
 export * from './inngest/interfaces/types';
 export * from './inngest/generateFunctionCode';
-export { generateFromExtractedFunctions } from './inngest/stepGenerator';
+export { generateFromExtractedFunctions, extractFunctionBody } from './inngest/stepGenerator';
+export * from './inngest/monacoAutocompleteIntegration';
+export * from './utils/json';

package/src/inngest/MONACO_INTEGRATION_EXAMPLE.md

@@ -0,0 +1,406 @@
+# Monaco Autocomplete Integration Example
+
+This guide shows how to integrate the JavaScript autocomplete extension with your CodeEditor component using the command service pattern.
+
+## Integration in CodeEditor Component
+
+Here's how to update your `CodeEditor.tsx` to use the autocomplete extension:
+
+```tsx
+import React from 'react';
+import Editor from '@monaco-editor/react';
+import {
+    setupMonacoAutocomplete,
+    setupStepAutocomplete,
+} from '@form-builder/core/inngest/monacoAutocompleteIntegration';
+import { EditorSettings } from '../../types/inngest';
+
+interface CodeEditorProps {
+    value: string;
+    onChange: (value: string | undefined) => void;
+    language?: string;
+    settings: EditorSettings;
+    height?: string;
+    readOnly?: boolean;
+    step?: any; // Current Inngest step being edited
+    services?: any; // Service container with command service
+}
+
+const CodeEditor: React.FC<CodeEditorProps> = ({
+    value,
+    onChange,
+    language = 'typescript',
+    settings,
+    height = '400px',
+    readOnly = false,
+    step,
+    services,
+}) => {
+    const handleEditorWillMount = async (monaco: any) => {
+        // 🆕 Setup autocomplete using the extension
+        if (services?.commands) {
+            if (step) {
+                // Setup step-specific autocomplete
+                await setupStepAutocomplete(monaco, step, value, services.commands);
+            } else {
+                // Setup general JavaScript autocomplete
+                await setupMonacoAutocomplete(
+                    monaco,
+                    {
+                        enableInngestContext: true,
+                        customScope: ['step', 'event'],
+                        enableHoverInfo: true,
+                        commandService: services.commands,
+                    },
+                    services.commands,
+                );
+            }
+        }
+
+        // Add cdeops API type definitions
+        const cdeopsTypes = `
+declare module 'cdeops/client' {
+  export interface ICodeJavascriptRequest {
+    script: string;
+    args: any[];
+    timeout?: number;
+    context?: Record<string, any>;
+  }
+
+  export namespace code {
+    export namespace javascript {
+      export function executeScript(request: ICodeJavascriptRequest): Promise<any>;
+      export function getCompletions(context: { text: string; position: number; scope?: string[] }): Promise<any>;
+    }
+  }
+}
+`;
+
+        monaco.languages.typescript.typescriptDefaults.addExtraLib(cdeopsTypes, 'file:///cdeops-types.d.ts');
+
+        // Add Inngest ambient types
+        const inngestAmbientTypes = `
+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>;
+};
+
+declare const event: { data: any };
+`;
+
+        monaco.languages.typescript.typescriptDefaults.addExtraLib(
+            inngestAmbientTypes,
+            'file:///inngest-ambient-types.d.ts',
+        );
+
+        // Configure TypeScript compiler options
+        monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+            target: monaco.languages.typescript.ScriptTarget.ES2020,
+            allowNonTSExtensions: true,
+            moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+            module: monaco.languages.typescript.ModuleKind.CommonJS,
+            noEmit: true,
+            esModuleInterop: true,
+            jsx: monaco.languages.typescript.JsxEmit.React,
+            reactNamespace: 'React',
+            allowJs: true,
+            typeRoots: ['node_modules/@types'],
+        });
+    };
+
+    const editorOptions = {
+        fontSize: settings.fontSize,
+        tabSize: settings.tabSize,
+        wordWrap: settings.wordWrap ? ('on' as 'on') : ('off' as 'off'),
+        minimap: { enabled: false },
+        scrollBeyondLastLine: false,
+        automaticLayout: true,
+        formatOnPaste: true,
+        formatOnType: true,
+        readOnly,
+        suggest: {
+            showWords: false,
+            showSnippets: true,
+            preview: true, // Show completion preview
+            showIcons: true, // Show icons for completions
+        },
+        quickSuggestions: {
+            other: true,
+            comments: false,
+            strings: false,
+        },
+        hover: {
+            enabled: true, // Enable hover info
+        },
+    };
+
+    const handleEditorDidMount = (_editor: any, monaco: any) => {
+        // Your existing Inngest snippets still work alongside autocomplete!
+        monaco.languages.registerCompletionItemProvider('typescript', {
+            provideCompletionItems: () => {
+                const suggestions = [
+                    {
+                        label: 'step.run',
+                        kind: monaco.languages.CompletionItemKind.Snippet,
+                        insertText: [
+                            "const ${1:result} = await step.run('${2:step-id}', async (event, step) => {",
+                            '  ${3:// your logic}',
+                            '  return ${4:{ success: true }};',
+                            '});',
+                        ].join('\n'),
+                        insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+                        documentation: 'Run a unit of work inside an Workflow step',
+                    },
+                    // ... other snippets
+                ];
+
+                return { suggestions };
+            },
+        });
+    };
+
+    return (
+        <Editor
+            height={height}
+            language={language}
+            value={value}
+            onChange={onChange}
+            theme={settings.theme}
+            options={editorOptions}
+            beforeMount={handleEditorWillMount}
+            onMount={handleEditorDidMount}
+        />
+    );
+};
+
+export default CodeEditor;
+```
+
+## Using in InngestEditor Component
+
+Here's how to pass the services to your CodeEditor:
+
+```tsx
+import React, { useContext } from 'react';
+import CodeEditor from './CodeEditor';
+import { ServiceContext } from '../../context/ServiceContext'; // Your service context
+
+const InngestEditor: React.FC = () => {
+    const services = useContext(ServiceContext); // Get services from context
+    const [code, setCode] = React.useState('');
+    const [currentStep, setCurrentStep] = React.useState(null);
+
+    return (
+        <div>
+            <CodeEditor
+                value={code}
+                onChange={setCode}
+                language="typescript"
+                settings={editorSettings}
+                step={currentStep}
+                services={services} // Pass services including commands
+            />
+        </div>
+    );
+};
+```
+
+## Calling Extension Commands
+
+The integration uses your existing command pattern:
+
+```typescript
+// Example: Get completions
+const result = await services.commands.executeCommand({
+    command: 'jsAutocomplete.getCompletions',
+    arguments: [text, position, scope],
+});
+
+// Example: Get type info
+const typeInfo = await services.commands.executeCommand({
+    command: 'jsAutocomplete.getTypeInfo',
+    arguments: ['functionName', ['step', 'event']],
+});
+
+// Example: Install a library
+await services.commands.executeCommand({
+    command: 'jsAutocomplete.installLibrary',
+    arguments: ['https://cdn.jsdelivr.net/npm/@types/lodash/index.d.ts', ['_', 'lodash']],
+});
+
+// Example: Update config
+await services.commands.executeCommand({
+    command: 'jsAutocomplete.updateConfig',
+    arguments: [
+        {
+            includeDefaults: true,
+            includeLibraries: true,
+            customDefinitions: ['lodash', 'moment'],
+        },
+    ],
+});
+```
+
+## Available Extension Commands
+
+### `jsAutocomplete.getCompletions`
+
+Get code completions at a specific position.
+
+**Arguments:** `[text: string, position: number, scope?: string[]]`
+
+**Returns:**
+
+```typescript
+{
+    completions: Array<{
+        name: string;
+        type?: string;
+        doc?: string;
+        url?: string;
+    }>;
+    isIncomplete: boolean;
+}
+```
+
+### `jsAutocomplete.getTypeInfo`
+
+Get type information for a symbol.
+
+**Arguments:** `[symbol: string, scope?: string[]]`
+
+**Returns:**
+
+```typescript
+{
+    type?: string;
+    doc?: string;
+    url?: string;
+} | null
+```
+
+### `jsAutocomplete.installLibrary`
+
+Install a library for autocomplete.
+
+**Arguments:** `[url: string, accessors: string[]]`
+
+**Returns:** `boolean`
+
+### `jsAutocomplete.uninstallLibrary`
+
+Uninstall a library.
+
+**Arguments:** `[accessors: string[]]`
+
+**Returns:** `{ success: boolean; error?: string }`
+
+### `jsAutocomplete.updateConfig`
+
+Update autocomplete configuration.
+
+**Arguments:** `[config: Partial<AutocompleteConfig>]`
+
+**Returns:** `boolean`
+
+### `jsAutocomplete.getAvailableDefinitions`
+
+Get list of available type definitions.
+
+**Arguments:** `[]`
+
+**Returns:** `string[]`
+
+### `jsAutocomplete.resetContext`
+
+Reset the JavaScript execution context.
+
+**Arguments:** `[]`
+
+**Returns:** `boolean`
+
+## Helper Functions
+
+The `monacoAutocompleteIntegration.ts` provides helper functions:
+
+```typescript
+import {
+    setupMonacoAutocomplete,
+    setupStepAutocomplete,
+    installLibraryForAutocomplete,
+    updateAutocompleteConfig,
+    getAvailableDefinitions,
+} from '@form-builder/core/inngest/monacoAutocompleteIntegration';
+
+// Setup general autocomplete
+await setupMonacoAutocomplete(monaco, options, commandService);
+
+// Setup step-specific autocomplete
+await setupStepAutocomplete(monaco, step, code, commandService);
+
+// Install a library
+await installLibraryForAutocomplete(commandService, 'https://cdn.jsdelivr.net/npm/@types/lodash/index.d.ts', [
+    '_',
+    'lodash',
+]);
+
+// Update config
+await updateAutocompleteConfig(commandService, {
+    includeDefaults: true,
+    includeLibraries: true,
+});
+
+// Get available definitions
+const defs = await getAvailableDefinitions(commandService);
+```
+
+## Testing the Integration
+
+1. **Start your application** with the js-autocomplete-extension installed
+2. **Open a step editor** with a code block
+3. **Type `step.`** - You should see intelligent completions with type info
+4. **Hover over `step`** - You should see type information
+5. **Type any JavaScript** - Get ECMAScript completions
+
+## Debugging
+
+Check if the extension is working:
+
+```typescript
+// In your component
+React.useEffect(() => {
+    if (services?.commands) {
+        // Test if extension commands are available
+        services.commands
+            .executeCommand({
+                command: 'jsAutocomplete.getAvailableDefinitions',
+                arguments: [],
+            })
+            .then((defs) => {
+                console.log('Available definitions:', defs);
+            })
+            .catch((err) => {
+                console.error('Extension not available:', err);
+            });
+    }
+}, [services]);
+```
+
+## Benefits
+
+✅ **Context-aware completions** based on your step type  
+✅ **Type information** on hover  
+✅ **Library support** (lodash, moment, custom libs)  
+✅ **Dynamic updates** as you edit code  
+✅ **Inngest-specific** completions for step functions  
+✅ **Works alongside** your existing snippets  
+✅ **Uses your existing** command execution pattern
+
+## Next Steps
+
+-   Add more step-specific completions
+-   Integrate with your workflow execution context
+-   Add custom library definitions for your domain
+-   Implement signature help for function parameters