@kestra-io/ui-libs 0.0.77 → 0.0.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kestra-io/ui-libs",
-  "version": "0.0.77",
+  "version": "0.0.78",
   "type": "module",
   "files": [
     "dist",

package/src/components/plugins/SchemaToCode.vue

@@ -21,7 +21,11 @@
 
 <script>
     import {createPopper} from "@popperjs/core";
-    import {codeToHtml} from "shiki";
+    import {createOnigurumaEngine} from "@shikijs/engine-oniguruma";
+    import {createHighlighterCore} from "shiki/core";
+    import yaml from "shiki/langs/yaml.mjs";
+    import python from "shiki/langs/python.mjs";
+    import javascript from "shiki/langs/javascript.mjs";
     import ContentCopy from "vue-material-design-icons/ContentCopy.vue";
     import Check from "vue-material-design-icons/Check.vue";
     import {defineComponent, nextTick, shallowRef} from "vue";
@@ -63,7 +67,19 @@
         },
         async created() {
             this.copyIcon = this.icons.ContentCopy;
-            this.codeData = await codeToHtml(this.code, {
+            const highlighter = await createHighlighterCore({
+                themes: [
+                    import("shiki/themes/github-dark.mjs")
+                ],
+                langs: [
+                    yaml,
+                    python,
+                    javascript
+                ],
+                // `shiki/wasm` contains the wasm binary inlined as base64 string.
+                engine: createOnigurumaEngine(() => import("shiki/wasm"))
+            })
+            this.codeData = highlighter.codeToHtml(this.code, {
                 lang: this.language,
                 theme: "github-dark",
             });

package/src/utils/YamlUtils.js

@@ -1,6 +1,6 @@
 import JsYaml from "js-yaml";
 import yaml, {Document, YAMLMap, isSeq, isMap, Pair, Scalar, YAMLSeq, LineCounter} from "yaml";
-import {cloneDeep} from "lodash"
+import cloneDeep from "lodash/cloneDeep"
 import {SECTIONS} from "./constants.js";
 
 const TOSTRING_OPTIONS = {lineWidth: 0};

package/src/utils/state.js

@@ -1,4 +1,4 @@
-import {mapValues} from "lodash";
+import mapValues from "lodash/mapValues";
 import PauseCircle from "vue-material-design-icons/PauseCircle.vue";
 import CheckCircle from "vue-material-design-icons/CheckCircle.vue";
 import PlayCircle from "vue-material-design-icons/PlayCircle.vue";