@knime/scripting-editor 0.0.4 → 0.0.5

package/README.md

@@ -1,26 +1,11 @@
-# org.knime.scripting.editor.js
+# KNIME Scripting Editor Components
 
-This template should help get you started developing with Vue 3 in Vite.
+This package contains shared components that are used in scripting editor dialogs in KNIME Analytics Platform.
 
 ## Recommended IDE Setup
 
 [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
 
-## Type Support for `.vue` Imports in TS
-
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
-
-If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
-
-1. Disable the built-in TypeScript Extension
-   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
-   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
-2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
-
-## Customize configuration
-
-See [Vite Configuration Reference](https://vitejs.dev/config/).
-
 ## Project Setup
 
 ```sh
@@ -30,7 +15,7 @@ npm install
 ### Compile and Hot-Reload for Development
 
 ```sh
-npm run dev
+npm run build-watch
 ```
 
 ### Type-Check, Compile and Minify for Production

package/dist/knime-scripting-editor.js

@@ -1,36 +1,59 @@
-import { defineComponent as _, openBlock as a, createElementBlock as l, createElementVNode as t, toDisplayString as p, pushScopeId as d, popScopeId as i, createTextVNode as r } from "vue";
-const h = (e) => (d("data-v-af185b77"), e = e(), i(), e), u = { class: "greetings" }, f = { class: "green" }, g = /* @__PURE__ */ h(() => /* @__PURE__ */ t("h3", null, [
-  /* @__PURE__ */ r(" You’ve successfully created a project with - yes! "),
-  /* @__PURE__ */ t("a", {
-    href: "https://vitejs.dev/",
-    target: "_blank",
-    rel: "noopener"
-  }, "Vite"),
-  /* @__PURE__ */ r(" + "),
-  /* @__PURE__ */ t("a", {
-    href: "https://vuejs.org/",
-    target: "_blank",
-    rel: "noopener"
-  }, "Vue 3"),
-  /* @__PURE__ */ r(". ")
-], -1)), v = /* @__PURE__ */ _({
-  __name: "HelloWorld",
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".code-editor[data-v-6ef3894e]{height:100%}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
+import { defineComponent as l, ref as c, onMounted as d, openBlock as s, createElementBlock as u } from "vue";
+import * as i from "monaco-editor";
+const p = /* @__PURE__ */ l({
+  __name: "CodeEditor",
   props: {
-    msg: {}
+    initialScript: {
+      type: String,
+      default: ""
+    },
+    language: {
+      type: String,
+      default: null
+    },
+    fileName: {
+      type: String,
+      default: "main.txt"
+    }
   },
-  setup(e) {
-    return (o, s) => (a(), l("div", u, [
-      t("h1", f, p(o.msg), 1),
-      g
-    ]));
+  emits: ["monaco-created"],
+  setup(r, { emit: n }) {
+    const e = r, t = c(null);
+    return d(() => {
+      if (t.value === null)
+        throw new Error(
+          "Editor reference is null. This is an implementation error"
+        );
+      const o = i.editor.createModel(
+        e.initialScript,
+        e.language,
+        i.Uri.parse(`inmemory://${e.fileName}`)
+      ), a = i.editor.create(t.value, {
+        model: o,
+        glyphMargin: !1,
+        lightbulb: {
+          enabled: !0
+        },
+        minimap: { enabled: !0 },
+        automaticLayout: !0,
+        scrollBeyondLastLine: !0,
+        fixedOverflowWidgets: !0
+      });
+      n("monaco-created", { editor: a, editorModel: o });
+    }), (o, a) => (s(), u("div", {
+      ref_key: "editorRef",
+      ref: t,
+      class: "code-editor"
+    }, null, 512));
   }
 });
-const m = (e, o) => {
-  const s = e.__vccOpts || e;
-  for (const [c, n] of o)
-    s[c] = n;
-  return s;
-}, b = /* @__PURE__ */ m(v, [["__scopeId", "data-v-af185b77"]]);
+const f = (r, n) => {
+  const e = r.__vccOpts || r;
+  for (const [t, o] of n)
+    e[t] = o;
+  return e;
+}, _ = /* @__PURE__ */ f(p, [["__scopeId", "data-v-6ef3894e"]]);
 export {
-  b as HelloWorld
+  _ as CodeEditor
 };

package/dist/lib/main.d.ts

@@ -1,2 +1,2 @@
-import HelloWorld from "../src/components/HelloWorld.vue";
-export { HelloWorld };
+import CodeEditor from "../src/components/CodeEditor.vue";
+export { CodeEditor };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@knime/scripting-editor",
   "type": "module",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Shared Scripting Editor components for KNIME",
   "author": "KNIME AG, Zurich, Switzerland",
   "license": "See the file license.txt",
@@ -24,7 +24,7 @@
     "prepare": "cd .. && husky install ./org.knime.scripting.editor.js/.husky"
   },
   "dependencies": {
-    "consola": "3.2.3",
+    "monaco-editor": "0.40.0",
     "pinia": "2.1.4",
     "vue": "3.x",
     "webapps-common": "file:webapps-common"
@@ -51,6 +51,7 @@
     "stylelint": "15.10.2",
     "typescript": "5.1.6",
     "vite": "4.4.6",
+    "vite-plugin-css-injected-by-js": "3.2.1",
     "vite-plugin-dts": "3.4.0",
     "vitest": "0.33.0",
     "vue-tsc": "1.8.6"

package/dist/style.css

@@ -1 +0,0 @@
-h1[data-v-af185b77]{font-weight:500;font-size:2.6rem;position:relative;top:-10px}h3[data-v-af185b77]{font-size:1.2rem}.greetings h1[data-v-af185b77],.greetings h3[data-v-af185b77]{text-align:center}@media (min-width: 1024px){.greetings h1[data-v-af185b77],.greetings h3[data-v-af185b77]{text-align:left}}