test

src/app/editor.ts

@@ -0,0 +1,36 @@
+import van from "vanjs-core";
+import * as vanX from "vanjs-ext";
+const v = van.tags;
+
+import { basicSetup } from "codemirror";
+import { EditorView } from "@codemirror/view";
+import { oneDark } from "@codemirror/theme-one-dark";
+
+const fixedHeightEditor = EditorView.theme({
+    "&": {
+        height: "100%",
+        minHeight: "0px",
+        resize: "horizontal",
+        overflow: "auto",
+        width: "600px",
+        minWidth: "8em",
+    },
+    ".cm-scroller": { overflow: "auto" },
+});
+
+export class EditorColumn {
+    view: EditorView;
+    wrapper: HTMLElement;
+
+    constructor() {
+        this.view = new EditorView({
+            doc: "Start document",
+            extensions: [basicSetup, oneDark, fixedHeightEditor],
+        });
+        console.log("Character width: ", this.view.defaultCharacterWidth);
+        this.wrapper = v.div({ class: "editorWrapper" }, this.view.dom);
+    }
+    get dom() {
+        return this.wrapper;
+    }
+}

src/app/foldernav.ts

@@ -61,5 +61,4 @@ const FsItemView = (tree: FolderTree): HTMLElement => {
     return folder;
 };
 
-// Mount the folder tree view to the nav
-van.add(document.querySelector("aside nav"), FolderTreeView);
+export const NavBar = FolderTreeView;

src/app/renderer.ts

@@ -33,40 +33,8 @@ import van from "vanjs-core";
 import * as vanX from "vanjs-ext";
 const v = van.tags;
 
-import { basicSetup } from "codemirror";
-import { EditorView } from "@codemirror/view";
-import { oneDark } from "@codemirror/theme-one-dark";
-
-import "./foldernav.ts";
-
-const fixedHeightEditor = EditorView.theme({
-    "&": {
-        height: "100%",
-        minHeight: "0px",
-        resize: "horizontal",
-        overflow: "auto",
-        width: "600px",
-        minWidth: "8em",
-    },
-    ".cm-scroller": { overflow: "auto" },
-});
-
-class EditorColumn {
-    view: EditorView;
-    wrapper: HTMLElement;
-
-    constructor() {
-        this.view = new EditorView({
-            doc: "Start document",
-            extensions: [basicSetup, oneDark, fixedHeightEditor],
-        });
-        console.log("Character width: ", this.view.defaultCharacterWidth);
-        this.wrapper = v.div({ class: "editorWrapper" }, this.view.dom);
-    }
-    get dom() {
-        return this.wrapper;
-    }
-}
+import { EditorColumn } from "./editor";
+import { NavBar } from "./foldernav";
 
 // Create and mount editor list
 const editors = vanX.reactive([]);
@@ -77,5 +45,6 @@ function addView() {
 }
 
 document.getElementById("addEditor")?.addEventListener("click", addView);
+van.add(document.querySelector("aside nav"), NavBar);
 
 addView();