monaco-1.0.0 - new monaco plugin

Author: elisherer

docs/package-lock.json

@@ -20,7 +20,8 @@
     "@mdx-js/react": "3.1.0",
     "@monaco-editor/react": "4.6.0",
     "@nlighten/json-transform": "^1.3.3",
-    "@nlighten/json-transform-core": "^1.3.4",
+    "@nlighten/json-transform-core": "^1.5.0",
+    "@nlighten/monaco-json-transform": "^1.0.0",
     "buffer": "^6.0.3",
     "clsx": "2.1.0",
     "crypto-browserify": "^3.12.1",

docs/package.json

@@ -1,7 +1,7 @@
 import React, {useEffect, useMemo, useState} from "react";
 import  { } from "@docusaurus/BrowserOnly"
 import { JSONSchemaUtils } from '@nlighten/json-schema-utils'
-import {jsonpathJoin} from "@nlighten/json-transform-core";
+import {ContextVariablesSchemas, jsonpathJoin} from "@nlighten/json-transform-core";
 import {DebuggableTransformerFunctions, JsonTransformer} from "@nlighten/json-transform";
 import {useLocation, useHistory} from "@docusaurus/router";
 import MonacoEditor from "./monaco/MonacoEditor";
@@ -71,15 +71,15 @@ const TransformerTester = () => {
       const generatedSchema = JSONSchemaUtils.generate(parsedInput);
       const result = JSONSchemaUtils.parse(generatedSchema);
       setSuggestions("/transformer",
-        ["#now", "#null", "#uuid"].concat(
+        Object.keys(ContextVariablesSchemas).concat(
           result?.paths.map(x => jsonpathJoin("$", x.$path)) ?? []
         ),
         result?.paths.reduce((a, c) => {
           a[jsonpathJoin("$", c.$path)] = c;
           return a;
         }, {} as any),)
     } else {
-      setSuggestions("/transformer", ["#now", "#null", "#uuid"], {});
+      setSuggestions("/transformer", Object.keys(ContextVariablesSchemas), {});
     }
   }, [parsedInput]);
 

docs/src/components/TransformerTester.tsx

@@ -1,11 +1,13 @@
-import { loader, type Monaco } from "@monaco-editor/react";
 import * as monaco from 'monaco-editor';
-import type { IRange, languages } from "monaco-editor";
-import { functionsParser, getFunctionInlineSignature, getFunctionObjectSignature } from "@nlighten/json-transform-core";
-import {formatSchemaType} from "@nlighten/json-schema-utils";
-import jsonVariablesTokensProvider from "./jsonVariablesTokensProvider";
-import registerHoverProvider from "./jsonHoverProvider";
-import {getSuggestions, resolveSuggestions} from "./suggestionsProvider";
+import { loader, type Monaco } from "@monaco-editor/react";
+import {getSuggestions} from "./suggestionsProvider";
+
+import {
+  registerJsonTransformItemCompletionProvider,
+  registerJsonTransformDSTProvider,
+  registerJsonTransformHoverProvider,
+  defineThemeVsDarkCustom
+} from "@nlighten/monaco-json-transform"
 
 const glob = window as unknown as { monaco: Monaco };
 
@@ -34,116 +36,29 @@ export const getModel = (value: string, uri: string, language = "json", path?: s
 };
 
 const initMonaco = (monaco: Monaco) => {
-  jsonVariablesTokensProvider(monaco);
-
-  // add suggestions
-  const jsonVariableMapper = (v: any, paths: any, range: IRange, inline: boolean): languages.CompletionItem => {
-    let label = v[0] === "<" ? v.replace(/^<[^>]*>/, "") : v;
-    let insertText: string = label.replace(/"/g, '\\"');
-    let insertTextRules: any = undefined;
-    let documentation: string | undefined = undefined;
-    let detail = paths?.[v]
-      ? `(${paths[v].type}${paths[v].format ? ":" + paths[v].format : ""})${
-          paths[v].description ? " " + paths[v].description : ""
-        }`
-      : undefined;
-    let kind = monaco.languages.CompletionItemKind.Field;
-    let tags: any = undefined;
-    if (inline && v[0] === "$" && v[1] === "$") {
-      const inlineFunction = functionsParser.get(v.substring(2));
-      if (inlineFunction) {
-        if (inlineFunction.deprecated) {
-          tags = [monaco.languages.CompletionItemTag.Deprecated];
-        }
-        let counter = 1;
-        label = v + " (inline)";
-
-        insertText = getFunctionInlineSignature(v.substring(2), inlineFunction, true).replace("$$", "\\$\\$"); // escape the first $$
-        if (insertText.includes("{")) {
-          insertText = insertText.replace(/{/g, () => `$\{${counter++}:`);
-        }
-        insertText += `:$\{${counter}:input}`;
-        insertTextRules = monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet;
-        kind = monaco.languages.CompletionItemKind.Function;
-        documentation = inlineFunction.description;
-      }
-    } else if (!inline && v[0] === "$" && v[1] === "$") {
-      const objectFunction = functionsParser.get(v.substring(2));
-      if (objectFunction) {
-        let counter = 1;
-        label = v + " (object)";
-        insertText = getFunctionObjectSignature(v.substring(2), objectFunction);
-        insertText = insertText.replace(/\{\w+}/g, m => `$\{${counter++}:"${m.substring(1)}"`);
-        insertTextRules = monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet;
-        kind = monaco.languages.CompletionItemKind.Module;
-        detail = objectFunction.outputSchema
-          ? formatSchemaType(objectFunction.outputSchema)
-          : objectFunction.description;
-        documentation = objectFunction.description;
-      }
-    }
-    return {
-      label,
-      kind,
-      insertText,
-      insertTextRules,
-      range,
-      detail,
-      documentation,
-      tags,
-    };
-  };
-  const functionSuggestions = functionsParser.getNames()
-    .filter(x => !functionsParser.get(x).deprecated)
-    .map(x => `$$${x}`);
+  registerJsonTransformDSTProvider(monaco);
 
-  monaco.languages.registerCompletionItemProvider("json", {
-    provideCompletionItems: (model, position) => {
+  registerJsonTransformItemCompletionProvider(monaco, {
+    getTypeMap: (model) => {
       const path = model.uri.path.replace(/\.\w+$/, "");
-      const [suggestions, paths] = getSuggestions(path);
-      const word = model.getWordUntilPosition(position);
-      const range = {
-        startLineNumber: position.lineNumber,
-        endLineNumber: position.lineNumber,
-        startColumn: word.startColumn,
-        endColumn: word.endColumn,
-      };
-      // find out if we are inside a string or after a key inside an object
-      // we count (") before position on same line
-      // if even number then we are not in a string, otherwise a string (this is not precise, could have been escaped)
-      const quotesCount =
-        model
-          .getLineContent(position.lineNumber)
-          .substring(0, position.column - 1)
-          .match(/^"|[^\\]"/g)?.length ?? 0; // ignore escaped double quotes
-      const inline = quotesCount % 2 !== 0; // if inside a string, suggest inline functions otherwise object functions
-      return {
-        suggestions: suggestions.concat(functionSuggestions).map(s => jsonVariableMapper(s, paths, range, inline)),
-      };
+      const [, paths] = getSuggestions(path);
+      return paths;
     },
+    getSuggestions: (model) => {
+      const path = model.uri.path.replace(/\.\w+$/, "");
+      return getSuggestions(path)[0];
+    }
   });
 
-  monaco.editor.registerCommand("docs", function (accessor: any, arg: any) {
-    window.open(functionsParser.resolveDocsUrl(arg.func, arg.type), "_blank");
+  registerJsonTransformHoverProvider(monaco, {
+    getTypeMap: (model) => {
+      const path = model.uri.path.replace(/\.\w+$/, "");
+      console.log('looking for: ' + path);
+      return getSuggestions(path, true)[1];
+    }
   });
 
-  registerHoverProvider(monaco, { resolveSuggestions });
-
-  monaco.editor.defineTheme("vs-dark-custom", {
-    base: "vs-dark",
-    colors: {},
-    inherit: true,
-    rules: [
-      { token: "variable", foreground: "#80ff80".substring(1) },
-      { token: "variable_deprecated", foreground: "#80ff80".substring(1), fontStyle: "strikethrough" },
-      { token: "member", foreground: "#30ffee".substring(1) },
-      { token: "context", foreground: "#d7a6ff".substring(1) },
-      { token: "annotation", foreground: "#ff8080".substring(1) },
-      { token: "function", foreground: "#ffff80".substring(1) },
-      { token: "function_context", foreground: "#7d7df3".substring(1) },
-      { token: "function_deprecated", foreground: "#ffff80".substring(1), fontStyle: "strikethrough" },
-    ],
-  });
+  defineThemeVsDarkCustom(monaco);
 };
 
 loader.config({ monaco })