From 48fb14fd7a414a49ab7a6713b80e0c370e2a6b7b Mon Sep 17 00:00:00 2001
From: newcat <freddy.wagner@web.de>
Date: Sat, 5 Jun 2021 00:38:44 +0200
Subject: [PATCH] Fixed linter errors for renderer

---
 .eslintrc.js                                  | 16 -----
 .eslintrc.json                                | 22 ++++++
 .prettierrc                                   |  3 +-
 .../package.json                              |  3 +-
 .../src/components/ContextMenu.vue            | 57 ++++++++++-----
 .../src/components/Minimap.vue                | 16 ++---
 .../src/components/Sidebar.vue                | 25 +++++--
 .../src/connection/ConnectionView.vue         |  5 +-
 .../src/connection/ConnectionWrapper.vue      | 20 ++++--
 .../src/connection/TemporaryConnection.vue    | 15 ++--
 .../src/editor/Editor.vue                     | 72 +++++++++++--------
 .../src/editor/panZoom.ts                     |  2 +-
 .../src/history/connectionStep.ts             |  2 +-
 .../src/history/index.ts                      |  4 +-
 .../src/node/Node.vue                         | 63 ++++++++++------
 .../src/node/NodeInterface.vue                | 26 +++++--
 .../src/node/viewNode.ts                      |  2 +-
 .../nodeinterfaces/button/ButtonInterface.vue |  8 ++-
 .../checkbox/CheckboxInterface.vue            | 17 ++++-
 .../src/nodeinterfaces/icons/Arrow.vue        |  7 +-
 .../integer/IntegerInterface.vue              | 46 ++++++++----
 .../nodeinterfaces/number/NumberInterface.vue | 46 ++++++++----
 .../nodeinterfaces/select/SelectInterface.vue | 25 ++++---
 .../nodeinterfaces/slider/SliderInterface.vue | 31 +++++---
 .../textinput/TextInputInterface.vue          |  9 ++-
 .../src/nodepalette/NodePalette.vue           | 17 +++--
 .../src/nodepalette/PaletteEntry.vue          |  7 +-
 .../src/utility/usePlugin.ts                  |  2 +-
 tsconfig.json                                 |  2 +-
 29 files changed, 383 insertions(+), 187 deletions(-)
 delete mode 100644 .eslintrc.js
 create mode 100644 .eslintrc.json

diff --git a/.eslintrc.js b/.eslintrc.js
deleted file mode 100644
index b4854d1e..00000000
--- a/.eslintrc.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/*eslint-env node*/
-
-module.exports = {
-    root: true,
-    parser: "vue-eslint-parser",
-    parserOptions: {
-        parser: "@typescript-eslint/parser",
-    },
-    plugins: ["@typescript-eslint"],
-    extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier", "plugin:vue/vue3-recommended"],
-    rules: {
-        "@typescript-eslint/no-non-null-assertion": 0,
-        "@typescript-eslint/no-explicit-any": 0,
-        "@typescript-eslint/explicit-module-boundary-types": 0,
-    },
-};
diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 00000000..ea284b8f
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,22 @@
+{
+    "root": true,
+    "parser": "vue-eslint-parser",
+    "parserOptions": {
+        "parser": "@typescript-eslint/parser"
+    },
+    "plugins": ["@typescript-eslint"],
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "prettier",
+        "plugin:vue/vue3-recommended"
+    ],
+    "rules": {
+        "indent": ["warn", 4],
+        "@typescript-eslint/no-non-null-assertion": 0,
+        "@typescript-eslint/no-explicit-any": 0,
+        "@typescript-eslint/explicit-module-boundary-types": 0,
+        "vue/html-indent": ["warn", 4],
+        "vue/no-mutating-props": "off"
+    }
+}
diff --git a/.prettierrc b/.prettierrc
index fc5018ff..49e684bd 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -2,5 +2,6 @@
     "tabWidth": 4,
     "arrowParens": "always",
     "printWidth": 120,
-    "quoteProps": "consistent"
+    "quoteProps": "consistent",
+    "trailingComma": "all"
 }
diff --git a/packages/baklavajs-plugin-renderer-vue/package.json b/packages/baklavajs-plugin-renderer-vue/package.json
index 7df881f2..2aa67164 100644
--- a/packages/baklavajs-plugin-renderer-vue/package.json
+++ b/packages/baklavajs-plugin-renderer-vue/package.json
@@ -20,7 +20,8 @@
     "scripts": {
         "dev": "vite",
         "build": "rimraf dist && vue-tsc --noEmit && vite build && tsc --emitDeclarationOnly",
-        "docs": "typedoc --json ../../docs/api/plugin-renderer-vue.json --options ../../typedoc.json"
+        "docs": "typedoc --json ../../docs/api/plugin-renderer-vue.json --options ../../typedoc.json",
+        "lint": "eslint --ext .ts,.vue src"
     },
     "repository": {
         "type": "git",
diff --git a/packages/baklavajs-plugin-renderer-vue/src/components/ContextMenu.vue b/packages/baklavajs-plugin-renderer-vue/src/components/ContextMenu.vue
index 102ca573..d40a959b 100644
--- a/packages/baklavajs-plugin-renderer-vue/src/components/ContextMenu.vue
+++ b/packages/baklavajs-plugin-renderer-vue/src/components/ContextMenu.vue
@@ -1,20 +1,39 @@
 <template>
-    <div ref="el" :class="classes" :style="styles" v-show="modelValue">
+    <div
+        v-show="modelValue"
+        ref="el"
+        :class="classes"
+        :style="styles"
+    >
         <template v-for="(item, index) in itemsWithHoverProperty">
-            <div v-if="item.isDivider" :key="`d-${index}`" class="divider"></div>
+            <div
+                v-if="item.isDivider"
+                :key="`d-${index}`"
+                class="divider"
+            />
 
             <div
                 v-else
                 :key="`i-${index}`"
                 :class="{ 'item': true, 'submenu': !!item.submenu, '--disabled': !!item.disabled }"
+                class="d-flex align-items-center"
                 @mouseenter="onMouseEnter($event, index)"
                 @mouseleave="onMouseLeave($event, index)"
                 @click.stop.prevent="onClick(item)"
-                class="d-flex align-items-center"
             >
-                <div class="flex-fill">{{ item.label }}</div>
-                <div v-if="item.submenu" class="ml-3" style="line-height: 1em">
-                    <svg width="13" height="13" viewBox="-60 120 250 250">
+                <div class="flex-fill">
+                    {{ item.label }}
+                </div>
+                <div
+                    v-if="item.submenu"
+                    class="ml-3"
+                    style="line-height: 1em"
+                >
+                    <svg
+                        width="13"
+                        height="13"
+                        viewBox="-60 120 250 250"
+                    >
                         <path
                             d="M160.875 279.5625 L70.875 369.5625 L70.875 189.5625 L160.875 279.5625 Z"
                             stroke="none"
@@ -30,14 +49,14 @@
                     :is-flipped="{ x: flippedX, y: flippedY }"
                     :flippable="flippable"
                     @click="onChildClick"
-                ></context-menu>
+                />
             </div>
         </template>
     </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, Ref, ref, watch, unref } from "vue";
+import { computed, defineComponent, Ref, ref, watch } from "vue";
 import { onClickOutside } from "@vueuse/core";
 
 export interface IMenuItem {
@@ -52,32 +71,32 @@ export default defineComponent({
     props: {
         modelValue: {
             type: Boolean,
-            default: false,
+            default: false
         },
         items: {
             type: Array as () => IMenuItem[],
-            required: true,
+            required: true
         },
         x: {
             type: Number,
-            default: 0,
+            default: 0
         },
         y: {
             type: Number,
-            default: 0,
+            default: 0
         },
         isNested: {
             type: Boolean,
-            default: false,
+            default: false
         },
         isFlipped: {
             type: Object as () => { x: boolean; y: boolean },
-            default: () => ({ x: false, y: false }),
+            default: () => ({ x: false, y: false })
         },
         flippable: {
             type: Boolean,
-            default: false,
-        },
+            default: false
+        }
     },
     emits: ["click", "update:modelValue"],
     setup(props, { emit }) {
@@ -105,7 +124,7 @@ export default defineComponent({
                 "dark-context-menu": true,
                 "--flipped-x": flippedX.value,
                 "--flipped-y": flippedY.value,
-                "--nested": props.isNested,
+                "--nested": props.isNested
             };
         });
 
@@ -171,8 +190,8 @@ export default defineComponent({
             onChildClick,
             onClickOutside,
             onMouseEnter,
-            onMouseLeave,
+            onMouseLeave
         };
-    },
+    }
 });
 </script>
diff --git a/packages/baklavajs-plugin-renderer-vue/src/components/Minimap.vue b/packages/baklavajs-plugin-renderer-vue/src/components/Minimap.vue
index 20da7049..bed9875c 100644
--- a/packages/baklavajs-plugin-renderer-vue/src/components/Minimap.vue
+++ b/packages/baklavajs-plugin-renderer-vue/src/components/Minimap.vue
@@ -7,11 +7,11 @@
         @mousedown.self="mousedown"
         @mousemove.self="mousemove"
         @mouseup="mouseup"
-    ></canvas>
+    />
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, ref, toRef, watch } from "vue";
+import { defineComponent, onMounted, ref } from "vue";
 import { AbstractNode } from "@baklavajs/core";
 import getDomElements, { getDomElementOfNode } from "../connection/domResolver";
 import { getPortCoordinates } from "../connection/portCoordinates";
@@ -53,7 +53,7 @@ export default defineComponent({
                     x1: posX,
                     y1: posY,
                     x2: posX + width,
-                    y2: posY + height,
+                    y2: posY + height
                 });
                 nodeDomElements.set(n, domElement);
             }
@@ -63,7 +63,7 @@ export default defineComponent({
                 x1: Number.MAX_SAFE_INTEGER,
                 y1: Number.MAX_SAFE_INTEGER,
                 x2: Number.MIN_SAFE_INTEGER,
-                y2: Number.MIN_SAFE_INTEGER,
+                y2: Number.MIN_SAFE_INTEGER
             };
             for (const nc of nodeCoords.values()) {
                 if (nc.x1 < newBounds.x1) {
@@ -120,7 +120,7 @@ export default defineComponent({
                 ctx.stroke();
             }
 
-            if (showViewBounds) {
+            if (showViewBounds.value) {
                 const viewBounds = getViewBounds();
                 const [x1, y1] = transformCoordinates(viewBounds.x1, viewBounds.y1);
                 const [x2, y2] = transformCoordinates(viewBounds.x2, viewBounds.y2);
@@ -133,7 +133,7 @@ export default defineComponent({
         const transformCoordinates = (origX: number, origY: number): [number, number] => {
             return [
                 ((origX - bounds.x1) / (bounds.x2 - bounds.x1)) * ctx!.canvas.clientWidth,
-                ((origY - bounds.y1) / (bounds.y2 - bounds.y1)) * ctx!.canvas.clientHeight,
+                ((origY - bounds.y1) / (bounds.y2 - bounds.y1)) * ctx!.canvas.clientHeight
             ];
         };
 
@@ -141,7 +141,7 @@ export default defineComponent({
         const reverseTransform = (thisX: number, thisY: number): [number, number] => {
             return [
                 (thisX * (bounds.x2 - bounds.x1)) / ctx!.canvas.clientWidth + bounds.x1,
-                (thisY * (bounds.y2 - bounds.y1)) / ctx!.canvas.clientHeight + bounds.y1,
+                (thisY * (bounds.y2 - bounds.y1)) / ctx!.canvas.clientHeight + bounds.y1
             ];
         };
 
@@ -240,6 +240,6 @@ export default defineComponent({
         });
 
         return { canvas, showViewBounds, mousedown, mousemove, mouseup, mouseenter, mouseleave };
-    },
+    }
 });
 </script>
diff --git a/packages/baklavajs-plugin-renderer-vue/src/components/Sidebar.vue b/packages/baklavajs-plugin-renderer-vue/src/components/Sidebar.vue
index fd866fa1..dca24549 100644
--- a/packages/baklavajs-plugin-renderer-vue/src/components/Sidebar.vue
+++ b/packages/baklavajs-plugin-renderer-vue/src/components/Sidebar.vue
@@ -1,16 +1,29 @@
 <template>
-    <div ref="el" :class="['sidebar', { '--open': graph.sidebar.visible }]" :style="styles">
-        <div class="__resizer" @mousedown="startResize"></div>
+    <div
+        ref="el"
+        :class="['sidebar', { '--open': graph.sidebar.visible }]"
+        :style="styles"
+    >
+        <div
+            class="__resizer"
+            @mousedown="startResize"
+        />
 
         <div class="d-flex align-items-center">
-            <button tabindex="-1" class="__close" @click="close">&times;</button>
+            <button
+                tabindex="-1"
+                class="__close"
+                @click="close"
+            >
+                &times;
+            </button>
             <div class="ml-2">
                 <b>{{ nodeName }}</b>
             </div>
         </div>
 
         <!-- TODO: Make unique so it works with multiple Baklava instances on the same page -->
-        <div id="sidebar-container"></div>
+        <div id="sidebar-container" />
     </div>
 </template>
 
@@ -32,7 +45,7 @@ export default defineComponent({
         });
 
         const styles = computed(() => ({
-            width: `${width}px`,
+            width: `${width.value}px`
         }));
 
         const close = () => {
@@ -61,6 +74,6 @@ export default defineComponent({
         };
 
         return { el, graph, nodeName, styles, startResize, close };
-    },
+    }
 });
 </script>
diff --git a/packages/baklavajs-plugin-renderer-vue/src/connection/ConnectionView.vue b/packages/baklavajs-plugin-renderer-vue/src/connection/ConnectionView.vue
index 69a0618b..33b21ec1 100644
--- a/packages/baklavajs-plugin-renderer-vue/src/connection/ConnectionView.vue
+++ b/packages/baklavajs-plugin-renderer-vue/src/connection/ConnectionView.vue
@@ -1,5 +1,8 @@
 <template>
-    <path :d="d" :class="classes"></path>
+    <path
+        :d="d"
+        :class="classes"
+    />
 </template>
 
 <script lang="ts">
diff --git a/packages/baklavajs-plugin-renderer-vue/src/connection/ConnectionWrapper.vue b/packages/baklavajs-plugin-renderer-vue/src/connection/ConnectionWrapper.vue
index 26a8b4aa..31dcaf2f 100644
--- a/packages/baklavajs-plugin-renderer-vue/src/connection/ConnectionWrapper.vue
+++ b/packages/baklavajs-plugin-renderer-vue/src/connection/ConnectionWrapper.vue
@@ -1,5 +1,11 @@
 <template>
-    <connection-view :x1="d.x1" :y1="d.y1" :x2="d.x2" :y2="d.y2" :state="state"></connection-view>
+    <connection-view
+        :x1="d.x1"
+        :y1="d.y1"
+        :x2="d.x2"
+        :y2="d.y2"
+        :state="state"
+    />
 </template>
 
 <script lang="ts">
@@ -12,13 +18,13 @@ import { useGraph } from "../utility";
 
 export default defineComponent({
     components: {
-        "connection-view": ConnectionView,
+        "connection-view": ConnectionView
     },
     props: {
         connection: {
             type: Object as () => Connection,
-            required: true,
-        },
+            required: true
+        }
     },
     setup(props) {
         const { graph } = useGraph();
@@ -43,7 +49,7 @@ export default defineComponent({
                     resolved.node.offsetTop +
                         resolved.interface.offsetTop +
                         resolved.port.offsetTop +
-                        resolved.port.clientHeight / 2,
+                        resolved.port.clientHeight / 2
                 ];
             } else {
                 return [0, 0];
@@ -80,7 +86,7 @@ export default defineComponent({
 
         watch([fromNodePosition, toNodePosition], () => updateCoords(), { deep: true });
 
-        return { d, state, connection: props.connection };
-    },
+        return { d, state };
+    }
 });
 </script>
diff --git a/packages/baklavajs-plugin-renderer-vue/src/connection/TemporaryConnection.vue b/packages/baklavajs-plugin-renderer-vue/src/connection/TemporaryConnection.vue
index 86b04fda..050378a8 100644
--- a/packages/baklavajs-plugin-renderer-vue/src/connection/TemporaryConnection.vue
+++ b/packages/baklavajs-plugin-renderer-vue/src/connection/TemporaryConnection.vue
@@ -6,7 +6,7 @@
         :y2="d.output[1]"
         :state="status"
         is-temporary
-    ></connection-view>
+    />
 </template>
 
 <script lang="ts">
@@ -19,12 +19,13 @@ import { getPortCoordinates } from "./portCoordinates";
 
 export default defineComponent({
     components: {
-        "connection-view": ConnectionView,
+        "connection-view": ConnectionView
     },
     props: {
         connection: {
             type: Object as () => ITemporaryConnection,
-        },
+            required: true
+        }
     },
     setup(props) {
         const status = computed(() => (props.connection ? props.connection.status : TemporaryConnectionState.NONE));
@@ -33,7 +34,7 @@ export default defineComponent({
             if (!props.connection) {
                 return {
                     input: [0, 0],
-                    output: [0, 0],
+                    output: [0, 0]
                 };
             }
 
@@ -45,17 +46,17 @@ export default defineComponent({
             if (props.connection.from.isInput) {
                 return {
                     input: end,
-                    output: start,
+                    output: start
                 };
             } else {
                 return {
                     input: start,
-                    output: end,
+                    output: end
                 };
             }
         });
 
         return { d, status };
-    },
+    }
 });
 </script>
diff --git a/packages/baklavajs-plugin-renderer-vue/src/editor/Editor.vue b/packages/baklavajs-plugin-renderer-vue/src/editor/Editor.vue
index da4f73da..c17469d0 100644
--- a/packages/baklavajs-plugin-renderer-vue/src/editor/Editor.vue
+++ b/packages/baklavajs-plugin-renderer-vue/src/editor/Editor.vue
@@ -1,11 +1,11 @@
 <template>
     <div
+        ref="el"
         tabindex="-1"
         :class="[
             'node-editor',
-            { 'ignore-mouse': !!temporaryConnection, '--temporary-connection': !!temporaryConnection },
+            { 'ignore-mouse': !!temporaryConnection, '--temporary-connection': !!temporaryConnection }
         ]"
-        ref="el"
         @mousemove.self="mouseMoveHandler"
         @mousedown="mouseDown"
         @mouseup="mouseUp"
@@ -15,7 +15,10 @@
         @dragover="dragOver"
         @drop="drop"
     >
-        <div class="background" :style="backgroundStyle"></div>
+        <div
+            class="background"
+            :style="plugin.backgroundStyles"
+        />
 
         <slot name="toolbar">
             <toolbar />
@@ -26,39 +29,55 @@
         </slot>
 
         <svg class="connections-container">
-            <g v-for="connection in connections" :key="connection.id + counter.toString()">
-                <slot name="connections" :connection="connection">
-                    <connection-wrapper :connection="connection"></connection-wrapper>
+            <g
+                v-for="connection in connections"
+                :key="connection.id + counter.toString()"
+            >
+                <slot
+                    name="connections"
+                    :connection="connection"
+                >
+                    <connection-wrapper :connection="connection" />
                 </slot>
             </g>
-            <slot name="temporaryConnection" :temporaryConnection="temporaryConnection">
+            <slot
+                name="temporaryConnection"
+                :temporary-connection="temporaryConnection"
+            >
                 <temporary-connection
                     v-if="temporaryConnection"
                     :connection="temporaryConnection"
-                ></temporary-connection>
+                />
             </slot>
         </svg>
 
-        <div class="node-container" :style="nodeContainerStyle">
+        <div
+            class="node-container"
+            :style="nodeContainerStyle"
+        >
             <template v-for="node in nodes">
-                <slot name="node" :node="node" :selected="selectedNodes.includes(node)" @select="selectNode(node)">
+                <slot
+                    name="node"
+                    :node="node"
+                    :selected="selectedNodes.includes(node)"
+                    @select="selectNode(node)"
+                >
                     <node
                         :key="node.id + counter.toString()"
                         :node="node"
                         :selected="selectedNodes.includes(node)"
                         @select="selectNode(node)"
-                    >
-                    </node>
+                    />
                 </slot>
             </template>
         </div>
 
         <slot name="sidebar">
-            <sidebar></sidebar>
+            <sidebar />
         </slot>
 
         <slot name="minimap">
-            <minimap v-if="plugin.settings.enableMinimap"></minimap>
+            <minimap v-if="plugin.settings.enableMinimap" />
         </slot>
     </div>
 </template>
@@ -86,8 +105,8 @@ export default defineComponent({
     props: {
         plugin: {
             type: Object as () => IBaklavaView,
-            required: true,
-        },
+            required: true
+        }
     },
     setup(props) {
         const token = Symbol("EditorToken");
@@ -97,18 +116,16 @@ export default defineComponent({
 
         const el = ref<HTMLElement | null>(null);
 
-        const currentGraph = props.plugin.displayedGraph;
-        const nodes = computed(() => currentGraph.value.nodes);
-        const connections = computed(() => currentGraph.value.connections);
-        const selectedNodes = computed(() => currentGraph.value.selectedNodes);
+        const nodes = computed(() => props.plugin.displayedGraph.value.nodes);
+        const connections = computed(() => props.plugin.displayedGraph.value.connections);
+        const selectedNodes = computed(() => props.plugin.displayedGraph.value.selectedNodes);
 
         const panZoom = usePanZoom();
         const temporaryConnection = useTemporaryConnection();
         const { transform } = useTransform();
 
-        const backgroundStyle = props.plugin.backgroundStyles;
         const nodeContainerStyle = computed(() => ({
-            ...panZoom.styles.value,
+            ...panZoom.styles.value
         }));
 
         // Reason: https://github.com/newcat/baklavajs/issues/54
@@ -171,7 +188,7 @@ export default defineComponent({
                 }
 
                 const instance = reactive(new nodeTypeInfo.type()) as AbstractNode;
-                currentGraph.value.addNode(instance);
+                props.plugin.displayedGraph.value.addNode(instance);
                 const [x, y] = transform(ev.clientX, ev.clientY);
                 instance.position.x = x;
                 instance.position.y = y;
@@ -182,11 +199,11 @@ export default defineComponent({
             if (!props.plugin.commandHandler.pressedKeys.value.includes("Control")) {
                 unselectAllNodes();
             }
-            currentGraph.value.selectedNodes.push(node);
+            props.plugin.displayedGraph.value.selectedNodes.push(node);
         };
 
         const unselectAllNodes = () => {
-            currentGraph.value.selectedNodes = [];
+            props.plugin.displayedGraph.value.selectedNodes = [];
         };
 
         return {
@@ -195,7 +212,6 @@ export default defineComponent({
             nodes,
             connections,
             selectedNodes,
-            backgroundStyle,
             nodeContainerStyle,
             mouseMoveHandler,
             mouseDown,
@@ -206,9 +222,9 @@ export default defineComponent({
             drop,
             selectNode,
             temporaryConnection: temporaryConnection.temporaryConnection,
-            mouseWheel: panZoom.onMouseWheel,
+            mouseWheel: panZoom.onMouseWheel
         };
-    },
+    }
 });
 </script>
 
diff --git a/packages/baklavajs-plugin-renderer-vue/src/editor/panZoom.ts b/packages/baklavajs-plugin-renderer-vue/src/editor/panZoom.ts
index cf671d02..729bfe1a 100644
--- a/packages/baklavajs-plugin-renderer-vue/src/editor/panZoom.ts
+++ b/packages/baklavajs-plugin-renderer-vue/src/editor/panZoom.ts
@@ -1,4 +1,4 @@
-import { computed, toRef } from "vue";
+import { computed } from "vue";
 import { useDragMove, useGraph } from "../utility";
 
 export function usePanZoom() {
diff --git a/packages/baklavajs-plugin-renderer-vue/src/history/connectionStep.ts b/packages/baklavajs-plugin-renderer-vue/src/history/connectionStep.ts
index cf59c4da..bed9e299 100644
--- a/packages/baklavajs-plugin-renderer-vue/src/history/connectionStep.ts
+++ b/packages/baklavajs-plugin-renderer-vue/src/history/connectionStep.ts
@@ -1,4 +1,4 @@
-import { Editor, IConnectionState, IConnection, Graph } from "@baklavajs/core";
+import { IConnectionState, IConnection, Graph } from "@baklavajs/core";
 import { IStep } from "./step";
 
 export default class ConnectionStep implements IStep {
diff --git a/packages/baklavajs-plugin-renderer-vue/src/history/index.ts b/packages/baklavajs-plugin-renderer-vue/src/history/index.ts
index dad02330..d5f81892 100644
--- a/packages/baklavajs-plugin-renderer-vue/src/history/index.ts
+++ b/packages/baklavajs-plugin-renderer-vue/src/history/index.ts
@@ -1,4 +1,4 @@
-import { computed, Ref, ref, watch } from "vue";
+import { Ref, ref, watch } from "vue";
 import { Graph } from "@baklavajs/core";
 
 import type { ICommandHandler, ICommand } from "../commands";
@@ -111,7 +111,7 @@ export function useHistory(graph: Ref<Graph>, commandHandler: ICommandHandler):
                 // TODO: Also add moving nodes to the history
             }
         },
-        { immediate: true }
+        { immediate: true },
     );
 
     commandHandler.registerCommand<UndoCommand>(UNDO_COMMAND, {
diff --git a/packages/baklavajs-plugin-renderer-vue/src/node/Node.vue b/packages/baklavajs-plugin-renderer-vue/src/node/Node.vue
index c8416266..6227e7cf 100644
--- a/packages/baklavajs-plugin-renderer-vue/src/node/Node.vue
+++ b/packages/baklavajs-plugin-renderer-vue/src/node/Node.vue
@@ -1,29 +1,43 @@
 <template>
-    <div ref="el" :id="node.id" :class="classes" :style="styles" @mousedown="select" :data-node-type="node.type">
-        <div class="__title" @mousedown.self.stop="startDrag">
+    <div
+        :id="node.id"
+        ref="el"
+        :class="classes"
+        :style="styles"
+        :data-node-type="node.type"
+        @mousedown="select"
+    >
+        <div
+            class="__title"
+            @mousedown.self.stop="startDrag"
+        >
             <template v-if="!renaming">
-                <div class="__title-label">{{ node.title }}</div>
+                <div class="__title-label">
+                    {{ node.title }}
+                </div>
                 <div class="__menu">
-                    <button @click="openContextMenu">E</button>
+                    <button @click="openContextMenu">
+                        E
+                    </button>
                     <context-menu
                         v-model="showContextMenu"
                         :x="0"
                         :y="0"
                         :items="contextMenuItems"
                         @click="onContextMenuClick"
-                    ></context-menu>
+                    />
                 </div>
             </template>
             <input
                 v-else
                 ref="renameInputEl"
+                v-model="tempName"
                 type="text"
                 class="dark-input"
-                v-model="tempName"
                 placeholder="Node Name"
                 @blur="doneRenaming"
                 @keydown.enter="doneRenaming"
-            />
+            >
         </div>
 
         <div class="__content">
@@ -34,12 +48,17 @@
                     :key="output.id"
                     :node="node"
                     :intf="output"
-                ></NodeInterface>
+                />
             </div>
 
             <!-- Inputs -->
             <div class="__inputs">
-                <NodeInterface v-for="input in node.inputs" :key="input.id" :node="node" :intf="input"></NodeInterface>
+                <NodeInterface
+                    v-for="input in node.inputs"
+                    :key="input.id"
+                    :node="node"
+                    :intf="input"
+                />
             </div>
         </div>
     </div>
@@ -65,6 +84,7 @@ export default defineComponent({
             default: false,
         },
     },
+    emits: ["select"],
     setup(props, { emit }) {
         const { plugin } = usePlugin();
         const { graph, switchGraph } = useGraph();
@@ -125,19 +145,18 @@ export default defineComponent({
 
         const onContextMenuClick = async (action: string) => {
             switch (action) {
-                case "delete":
-                    graph.value.removeNode(props.node);
-                    break;
-                case "rename":
-                    tempName.value = props.node.title;
-                    renaming.value = true;
-                    await nextTick();
-                    renameInputEl.value?.focus();
-                    break;
-                case "editSubgraph":
-                    const graphNode = props.node as AbstractNode & IGraphNode;
-                    switchGraph(graphNode.template);
-                    break;
+            case "delete":
+                graph.value.removeNode(props.node);
+                break;
+            case "rename":
+                tempName.value = props.node.title;
+                renaming.value = true;
+                await nextTick();
+                renameInputEl.value?.focus();
+                break;
+            case "editSubgraph":
+                switchGraph((props.node as AbstractNode & IGraphNode).template);
+                break;
             }
         };
 
diff --git a/packages/baklavajs-plugin-renderer-vue/src/node/NodeInterface.vue b/packages/baklavajs-plugin-renderer-vue/src/node/NodeInterface.vue
index 82bb92ba..cec38525 100644
--- a/packages/baklavajs-plugin-renderer-vue/src/node/NodeInterface.vue
+++ b/packages/baklavajs-plugin-renderer-vue/src/node/NodeInterface.vue
@@ -1,10 +1,28 @@
 <template>
-    <div ref="el" :id="intf.id" :class="classes">
-        <div v-if="intf.port" class="__port" @mouseover="startHover" @mouseout="endHover"></div>
-        <span v-if="intf.connectionCount > 0 || !intf.component" class="align-middle">
+    <div
+        :id="intf.id"
+        ref="el"
+        :class="classes"
+    >
+        <div
+            v-if="intf.port"
+            class="__port"
+            @mouseover="startHover"
+            @mouseout="endHover"
+        />
+        <span
+            v-if="intf.connectionCount > 0 || !intf.component"
+            class="align-middle"
+        >
             {{ intf.name }}
         </span>
-        <component v-else :is="intf.component" v-model="intf.value" :node="node" :intf="intf"></component>
+        <component
+            :is="intf.component"
+            v-else
+            v-model="intf.value"
+            :node="node"
+            :intf="intf"
+        />
     </div>
 </template>
 
diff --git a/packages/baklavajs-plugin-renderer-vue/src/node/viewNode.ts b/packages/baklavajs-plugin-renderer-vue/src/node/viewNode.ts
index a219a0e1..21afaed8 100644
--- a/packages/baklavajs-plugin-renderer-vue/src/node/viewNode.ts
+++ b/packages/baklavajs-plugin-renderer-vue/src/node/viewNode.ts
@@ -1,4 +1,4 @@
-import { AbstractNode, INodeState, Node } from "@baklavajs/core";
+import { AbstractNode, INodeState } from "@baklavajs/core";
 
 export interface IViewNodeState extends INodeState<unknown, unknown> {
     position: { x: number; y: number };
diff --git a/packages/baklavajs-plugin-renderer-vue/src/nodeinterfaces/button/ButtonInterface.vue b/packages/baklavajs-plugin-renderer-vue/src/nodeinterfaces/button/ButtonInterface.vue
index 00cd58e6..db44a899 100644
--- a/packages/baklavajs-plugin-renderer-vue/src/nodeinterfaces/button/ButtonInterface.vue
+++ b/packages/baklavajs-plugin-renderer-vue/src/nodeinterfaces/button/ButtonInterface.vue
@@ -1,5 +1,11 @@
 <template>
-    <button class="dark-button --block" :title="intf.name" @click="onClick">{{ intf.name }}</button>
+    <button
+        class="dark-button --block"
+        :title="intf.name"
+        @click="onClick"
+    >
+        {{ intf.name }}
+    </button>
 </template>
 
 <script lang="ts">
diff --git a/packages/baklavajs-plugin-renderer-vue/src/nodeinterfaces/checkbox/CheckboxInterface.vue b/packages/baklavajs-plugin-renderer-vue/src/nodeinterfaces/checkbox/CheckboxInterface.vue
index 3f7a4726..93b5eb9a 100644
--- a/packages/baklavajs-plugin-renderer-vue/src/nodeinterfaces/checkbox/CheckboxInterface.vue
+++ b/packages/baklavajs-plugin-renderer-vue/src/nodeinterfaces/checkbox/CheckboxInterface.vue
@@ -5,11 +5,22 @@
         @click="intf.value = !intf.value"
     >
         <div class="__checkmark-container">
-            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
-                <path class="__checkmark" d="M 6 5 L 6 10 L 16 10" transform="rotate(-45 10 10)"></path>
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="18"
+                height="18"
+                viewBox="0 0 18 18"
+            >
+                <path
+                    class="__checkmark"
+                    d="M 6 5 L 6 10 L 16 10"
+                    transform="rotate(-45 10 10)"
+                />
             </svg>
         </div>
-        <div class="ml-2">{{ intf.name }}</div>
+        <div class="ml-2">
+            {{ intf.name }}
+        </div>
     </div>
 </template>
 
diff --git a/packages/baklavajs-plugin-renderer-vue/src/nodeinterfaces/icons/Arrow.vue b/packages/baklavajs-plugin-renderer-vue/src/nodeinterfaces/icons/Arrow.vue
index a77e405d..7c538bba 100644
--- a/packages/baklavajs-plugin-renderer-vue/src/nodeinterfaces/icons/Arrow.vue
+++ b/packages/baklavajs-plugin-renderer-vue/src/nodeinterfaces/icons/Arrow.vue
@@ -1,5 +1,10 @@
 <template>
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+    >
         <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" />
     </svg>
 </template>
diff --git a/packages/baklavajs-plugin-renderer-vue/src/nodeinterfaces/integer/IntegerInterface.vue b/packages/baklavajs-plugin-renderer-vue/src/nodeinterfaces/integer/IntegerInterface.vue
index 3fc6b9ea..035bec5c 100644
--- a/packages/baklavajs-plugin-renderer-vue/src/nodeinterfaces/integer/IntegerInterface.vue
+++ b/packages/baklavajs-plugin-renderer-vue/src/nodeinterfaces/integer/IntegerInterface.vue
@@ -1,32 +1,52 @@
 <template>
     <div class="dark-num-input">
-        <div @click="decrement" class="__button --dec">
-            <i-arrow></i-arrow>
+        <div
+            class="__button --dec"
+            @click="decrement"
+        >
+            <i-arrow />
         </div>
-        <div v-if="!editMode" class="__content" @click="enterEditMode">
-            <div class="__label" :title="intf.name">{{ intf.name }}</div>
-            <div class="__value">{{ stringRepresentation }}</div>
+        <div
+            v-if="!editMode"
+            class="__content"
+            @click="enterEditMode"
+        >
+            <div
+                class="__label"
+                :title="intf.name"
+            >
+                {{ intf.name }}
+            </div>
+            <div class="__value">
+                {{ stringRepresentation }}
+            </div>
         </div>
-        <div v-else class="__content">
+        <div
+            v-else
+            class="__content"
+        >
             <input
-                type="number"
+                ref="inputEl"
                 v-model="tempValue"
+                type="number"
                 class="dark-input"
                 :class="{ '--invalid': invalid }"
-                ref="inputEl"
+                style="text-align: right"
                 @blur="leaveEditMode"
                 @keydown.enter="leaveEditMode"
-                style="text-align: right"
-            />
+            >
         </div>
-        <div @click="increment" class="__button --inc">
-            <i-arrow></i-arrow>
+        <div
+            class="__button --inc"
+            @click="increment"
+        >
+            <i-arrow />
         </div>
     </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, Ref, ref, toRef } from "vue";
+import { defineComponent, Ref, toRef } from "vue";
 import Arrow from "../icons/Arrow.vue";
 import { useBaseNumericInterface } from "../baseNumericInterface";
 import type { IntegerInterface } from "./IntegerInterface";
diff --git a/packages/baklavajs-plugin-renderer-vue/src/nodeinterfaces/number/NumberInterface.vue b/packages/baklavajs-plugin-renderer-vue/src/nodeinterfaces/number/NumberInterface.vue
index e4020ff2..d3f0ebf4 100644
--- a/packages/baklavajs-plugin-renderer-vue/src/nodeinterfaces/number/NumberInterface.vue
+++ b/packages/baklavajs-plugin-renderer-vue/src/nodeinterfaces/number/NumberInterface.vue
@@ -1,32 +1,52 @@
 <template>
     <div class="dark-num-input">
-        <div @click="decrement" class="__button --dec">
-            <i-arrow></i-arrow>
+        <div
+            class="__button --dec"
+            @click="decrement"
+        >
+            <i-arrow />
         </div>
-        <div v-if="!editMode" class="__content" @click="enterEditMode">
-            <div class="__label" :title="intf.name">{{ intf.name }}</div>
-            <div class="__value">{{ stringRepresentation }}</div>
+        <div
+            v-if="!editMode"
+            class="__content"
+            @click="enterEditMode"
+        >
+            <div
+                class="__label"
+                :title="intf.name"
+            >
+                {{ intf.name }}
+            </div>
+            <div class="__value">
+                {{ stringRepresentation }}
+            </div>
         </div>
-        <div v-else class="__content">
+        <div
+            v-else
+            class="__content"
+        >
             <input
-                type="number"
+                ref="inputEl"
                 v-model="tempValue"
+                type="number"
                 class="dark-input"
                 :class="{ '--invalid': invalid }"
-                ref="inputEl"
+                style="text-align: right"
                 @blur="leaveEditMode"
                 @keydown.enter="leaveEditMode"
-                style="text-align: right"
-            />
+            >
         </div>
-        <div @click="increment" class="__button --inc">
-            <i-arrow></i-arrow>
+        <div
+            class="__button --inc"
+            @click="increment"
+        >
+            <i-arrow />
         </div>
     </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, Ref, ref, toRef } from "vue";
+import { defineComponent, Ref, toRef } from "vue";
 import Arrow from "../icons/Arrow.vue";
 import { useBaseNumericInterface } from "../baseNumericInterface";
 import type { NumberInterface } from "./NumberInterface";
diff --git a/packages/baklavajs-plugin-renderer-vue/src/nodeinterfaces/select/SelectInterface.vue b/packages/baklavajs-plugin-renderer-vue/src/nodeinterfaces/select/SelectInterface.vue
index 189ad57e..983fec43 100644
--- a/packages/baklavajs-plugin-renderer-vue/src/nodeinterfaces/select/SelectInterface.vue
+++ b/packages/baklavajs-plugin-renderer-vue/src/nodeinterfaces/select/SelectInterface.vue
@@ -6,14 +6,21 @@
         @click-outside="open = false"
     >
         <div class="__selected">
-            <div class="__text">{{ selectedText }}</div>
+            <div class="__text">
+                {{ selectedText }}
+            </div>
             <div class="__icon">
-                <i-arrow></i-arrow>
+                <i-arrow />
             </div>
         </div>
         <transition name="slide-fade">
-            <div class="__dropdown" v-show="open">
-                <div class="item --header">{{ intf.name }}</div>
+            <div
+                v-show="open"
+                class="__dropdown"
+            >
+                <div class="item --header">
+                    {{ intf.name }}
+                </div>
                 <div
                     v-for="(item, i) in intf.items"
                     :key="i"
@@ -32,16 +39,12 @@ import { computed, defineComponent, ref } from "vue";
 import Arrow from "../icons/Arrow.vue";
 import type { SelectInterface, SelectInterfaceItem } from "./SelectInterface";
 
-// @ts-ignore
-// import ClickOutside from "v-click-outside";
+// TODO: Click outside
 
 export default defineComponent({
     components: {
         "i-arrow": Arrow,
     },
-    /*directives: {
-        ClickOutside: ClickOutside.directive,
-    },*/
     props: {
         intf: {
             type: Object as () => SelectInterface<unknown>,
@@ -53,8 +56,8 @@ export default defineComponent({
 
         const selectedItem = computed(() =>
             props.intf.items.find((v) =>
-                typeof v === "string" ? v === props.intf.value : v.value === props.intf.value
-            )
+                typeof v === "string" ? v === props.intf.value : v.value === props.intf.value,
+            ),
         );
 
         const selectedText = computed(() => {
diff --git a/packages/baklavajs-plugin-renderer-vue/src/nodeinterfaces/slider/SliderInterface.vue b/packages/baklavajs-plugin-renderer-vue/src/nodeinterfaces/slider/SliderInterface.vue
index 8ebc6a71..ea5d0d90 100644
--- a/packages/baklavajs-plugin-renderer-vue/src/nodeinterfaces/slider/SliderInterface.vue
+++ b/packages/baklavajs-plugin-renderer-vue/src/nodeinterfaces/slider/SliderInterface.vue
@@ -8,22 +8,35 @@
         @mousemove="mousemove"
         @mouseleave="mouseleave"
     >
-        <div class="__slider" :style="{ width: percentage + '%' }"></div>
-        <div v-if="!editMode" class="__content">
-            <div class="__label">{{ intf.name }}</div>
-            <div class="__value">{{ stringRepresentation }}</div>
+        <div
+            class="__slider"
+            :style="{ width: percentage + '%' }"
+        />
+        <div
+            v-if="!editMode"
+            class="__content"
+        >
+            <div class="__label">
+                {{ intf.name }}
+            </div>
+            <div class="__value">
+                {{ stringRepresentation }}
+            </div>
         </div>
-        <div v-else class="__content">
+        <div
+            v-else
+            class="__content"
+        >
             <input
-                type="number"
+                ref="inputEl"
                 v-model="tempValue"
+                type="number"
                 class="dark-input"
                 :class="{ '--invalid': invalid }"
-                ref="inputEl"
+                style="text-align: right"
                 @blur="leaveEditMode"
                 @keydown.enter="leaveEditMode"
-                style="text-align: right"
-            />
+            >
         </div>
     </div>
 </template>
diff --git a/packages/baklavajs-plugin-renderer-vue/src/nodeinterfaces/textinput/TextInputInterface.vue b/packages/baklavajs-plugin-renderer-vue/src/nodeinterfaces/textinput/TextInputInterface.vue
index 8b1c30bf..86f227f6 100644
--- a/packages/baklavajs-plugin-renderer-vue/src/nodeinterfaces/textinput/TextInputInterface.vue
+++ b/packages/baklavajs-plugin-renderer-vue/src/nodeinterfaces/textinput/TextInputInterface.vue
@@ -1,6 +1,12 @@
 <template>
     <div>
-        <input type="text" class="dark-input" v-model="v" :placeholder="intf.name" :title="intf.name" />
+        <input
+            v-model="v"
+            type="text"
+            class="dark-input"
+            :placeholder="intf.name"
+            :title="intf.name"
+        >
     </div>
 </template>
 
@@ -19,6 +25,7 @@ export default defineComponent({
             required: true,
         },
     },
+    emits: ["update:modelValue"],
     setup(props, { emit }) {
         const v = computed({
             get: () => props.modelValue,
diff --git a/packages/baklavajs-plugin-renderer-vue/src/nodepalette/NodePalette.vue b/packages/baklavajs-plugin-renderer-vue/src/nodepalette/NodePalette.vue
index e450c80f..5fa4e819 100644
--- a/packages/baklavajs-plugin-renderer-vue/src/nodepalette/NodePalette.vue
+++ b/packages/baklavajs-plugin-renderer-vue/src/nodepalette/NodePalette.vue
@@ -1,7 +1,12 @@
 <template>
     <div class="node-palette">
-        <section v-for="c in categories" :key="c.name">
-            <h1 v-if="c.name !== 'default'">{{ c.name }}</h1>
+        <section
+            v-for="c in categories"
+            :key="c.name"
+        >
+            <h1 v-if="c.name !== 'default'">
+                {{ c.name }}
+            </h1>
             <PaletteEntry
                 v-for="(ni, nt) in c.nodeTypes"
                 :key="nt"
@@ -31,21 +36,21 @@ export default defineComponent({
         const categories = computed<Array<{ name: string; nodeTypes: NodeTypeInformations }>>(() => {
             const nodeTypeEntries = Array.from(plugin.value.editor.value.nodeTypes.entries());
 
-            const categoryNames = new Set(nodeTypeEntries.map(([nt, ni]) => ni.category));
+            const categoryNames = new Set(nodeTypeEntries.map(([, ni]) => ni.category));
 
             const categories: Array<{ name: string; nodeTypes: NodeTypeInformations }> = [];
             for (const c of categoryNames.values()) {
-                let nodeTypesInCategory = nodeTypeEntries.filter(([nt, ni]) => ni.category === c);
+                let nodeTypesInCategory = nodeTypeEntries.filter(([, ni]) => ni.category === c);
 
                 if (plugin.value.displayedGraph.value.template) {
                     // don't show the graph node for the current subgraph to prevent recursion
                     nodeTypesInCategory = nodeTypesInCategory.filter(
-                        ([nt]) => nt !== getGraphNodeTypeString(plugin.value.displayedGraph.value.template!)
+                        ([nt]) => nt !== getGraphNodeTypeString(plugin.value.displayedGraph.value.template!),
                     );
                 } else {
                     // if we are not in a subgraph, don't show subgraph input & output nodes
                     nodeTypesInCategory = nodeTypesInCategory.filter(
-                        ([nt]) => ![SUBGRAPH_INPUT_NODE_TYPE, SUBGRAPH_OUTPUT_NODE_TYPE].includes(nt)
+                        ([nt]) => ![SUBGRAPH_INPUT_NODE_TYPE, SUBGRAPH_OUTPUT_NODE_TYPE].includes(nt),
                     );
                 }
 
diff --git a/packages/baklavajs-plugin-renderer-vue/src/nodepalette/PaletteEntry.vue b/packages/baklavajs-plugin-renderer-vue/src/nodepalette/PaletteEntry.vue
index e2224266..adfcbee5 100644
--- a/packages/baklavajs-plugin-renderer-vue/src/nodepalette/PaletteEntry.vue
+++ b/packages/baklavajs-plugin-renderer-vue/src/nodepalette/PaletteEntry.vue
@@ -1,5 +1,8 @@
 <template>
-    <div class="node --palette" :data-node-type="type">
+    <div
+        class="node --palette"
+        :data-node-type="type"
+    >
         <div class="__title">
             {{ title }}
         </div>
@@ -17,7 +20,7 @@ export default defineComponent({
         },
         title: {
             type: String,
-            default: false,
+            required: true,
         },
     },
 });
diff --git a/packages/baklavajs-plugin-renderer-vue/src/utility/usePlugin.ts b/packages/baklavajs-plugin-renderer-vue/src/utility/usePlugin.ts
index 564ddd11..25bf3c8d 100644
--- a/packages/baklavajs-plugin-renderer-vue/src/utility/usePlugin.ts
+++ b/packages/baklavajs-plugin-renderer-vue/src/utility/usePlugin.ts
@@ -1,4 +1,4 @@
-import { Ref, inject, provide } from "vue";
+import { Ref } from "vue";
 import { IBaklavaView } from "../useBaklava";
 
 // const injectionKey = Symbol("viewPlugin");
diff --git a/tsconfig.json b/tsconfig.json
index f3005bc7..a97c4d4e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,6 @@
 {
     "compilerOptions": {
-        "target": "esnext",
+        "target": "ES2019",
         "module": "esnext",
         "strict": true,
         "moduleResolution": "node",