JDM Editor

If you are using Vite and need to self-host the Monaco Editor (used by the JDM Editor), you must configure the MonacoEnvironment to handle workers for different languages like JSON, CSS, HTML, and TypeScript. This ensures that language features like syntax highlighting and IntelliSense work correctly in your environment.

import type { Monaco } from '@monaco-editor/react';
import { loader } from '@monaco-editor/react';
import * as monaco from 'monaco-editor';
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';

declare global {
  interface Window {
    monaco?: Monaco;
  }
}

self.monaco = monaco;

self.MonacoEnvironment = {
  getWorker(workerId: string, label: string): Promise<Worker> | Worker {
    if (label === 'json') {
      return new jsonWorker();
    }
    if (label === 'css' || label === 'scss' || label === 'less') {
      return new cssWorker();
    }
    if (label === 'html' || label === 'handlebars' || label === 'razor') {
      return new htmlWorker();
    }
    if (label === 'typescript' || label === 'javascript') {
      return new tsWorker();
    }

    return new editorWorker();
  },
};

loader.config({ monaco });

When using createJdmNode, you can define a schema for the node's configuration data using the inputs array. This schema determines the shape of the config object within the node's content and dictates which UI controls are rendered in the node's settings form.

Each input in the inputs array follows the InputSchema type:

Nested Objects: If you use dot notation in the name (e.g., settings.threshold), the createJdmNode utility will automatically infer a nested object structure for the node's data type.

// Example of defining inputs that create a nested config object
const inputs = [
  { name: 'metadata.title', control: 'text', label: 'Title' },
  { name: 'metadata.active', control: 'bool', label: 'Is Active' }
] as const;

// The resulting config object will be: 
// { metadata: { title: string, active: boolean } }

Use validateZenExpression to perform manual linting and type checking on ZEN expressions. This function returns an array of CodeMirror Diagnostic objects. It checks for syntax errors (via the WASM engine) and validates the expression against provided types and expected variable types.

Key Behaviors:

• Syntax Errors: Detects parserError, lexerError, compilerError, and vmError.
• Type Checking: Validates the expression against a list of ZenType objects. If a type error is found, it maps the error message to a warning, info, or hint based on the error string prefix.
• Unary Expressions: If expressionType is set to 'unary', it ensures the result evaluates to a Bool type. If not, it reports a mismatch.
• Variable Type Matching: If expectedVariableType is provided, it checks if the expression's result satisfies that type. In strict mode, matching 'Any' against specific types is disallowed.
• Severity: In strict mode, type mismatches are reported as error; otherwise, they are reported as warning.

Note: This function requires the ZEN Engine WASM to be available to perform syntax validation.

import { validateZenExpression } from '@gorules/jdm-editor';

const diagnostics = validateZenExpression({
  source: 'my_expression',
  expressionType: 'standard',
  strict: true,
  types: [...],
  expectedVariableType: ...
});