it works!!

build.rs

@@ -13,7 +13,7 @@ use swc_common::{
 
 fn main() {
     // Find all Typescript files (that are not type declaration)
-    let ts_files: Vec<_> = glob::glob(&format!("{}/**/*.ts", "static/source"))
+    let ts_files: Vec<_> = glob::glob(&format!("{}/**/*.ts", "static/scripts"))
         .expect("Failed to read glob pattern")
         .filter_map(|entry| entry.ok())
         .filter(|entry| !entry.to_string_lossy().ends_with(".d.ts"))

static/scripts/ace.mjs

@@ -1,5 +1,5 @@
 import "../vendor/ace/ace.js";
-import { findNearestParent } from "./node-utils.mjs";
+import { findNearestParent } from "./node-utils.js";
 
 export default class Editor {
 	editor;

static/scripts/components/editor/script.ts

@@ -6,6 +6,7 @@ class Editor extends HTMLElement {
 	private tabEl: HTMLDivElement;
 	private files: Record<string, AceAjax.IEditSession>;
 	private root: ShadowRoot;
+	private addTabButton: HTMLDivElement;
 
 	constructor() {
 		super();
@@ -14,13 +15,15 @@ class Editor extends HTMLElement {
 	}
 
 	connectedCallback() {
-		this.tabEl = $el("div", { className: "tab-container" });
+		this.addTabButton = $el("div", { className: "tab" }, "+");
+		this.tabEl = $el("div", { className: "tab-container" }, this.addTabButton);
 		this.root.append(this.tabEl);
 
 		const style = $el("style");
 		style.textContent = `
 		.tab-container {
 			display: flex;
+			margin-bottom: -2px;
 
 			& .tab {
 				border: 2px solid var(--table-border-color);
@@ -73,6 +76,14 @@ class Editor extends HTMLElement {
 		tab.click();
 	}
 
+	setCurrent(name: string) {
+		this.editor.setSession(this.files[name]);
+		this.tabEl.querySelectorAll<HTMLDivElement>(".tab").forEach(el => {
+			if (el.dataset.name === name) el.classList.add("active");
+			else el.classList.remove("active");
+		});
+	}
+
 	/**
 	 * Create a new tab
 	 * @param name Tab name
@@ -81,13 +92,10 @@ class Editor extends HTMLElement {
 	#addTab(name: string) {
 		const tab = $el("div", {
 			className: "tab",
-			"@click": () => {
-				this.editor.setSession(this.files[name]);
-				this.tabEl.querySelectorAll(".tab").forEach(el => el.classList.remove("active"));
-				tab.classList.add("active");
-			}
+			dataset: { name },
+			"@click": () => this.setCurrent(name)
 		}, name);
-		this.tabEl.append(tab);
+		this.tabEl.insertBefore(tab, this.addTabButton);
 		return tab;
 	}
 }

templates/stack/get-one.html

@@ -3,7 +3,7 @@
 {% block title %}Stack {{stack_name}}{% endblock %}
 
 {% block content %}
-<script type="module" src="/static/components/editor/script.mjs" defer></script>
+<script type="module" src="/static/scripts/components/editor/script.js" defer></script>
 <main>
 	<header>
 		<h1>Stack details for <span class="stack-name">{{stack_name}}</span></h1>
@@ -113,12 +113,11 @@
 </style>
 
 <script type="module">
-	import { add_check } from "/static/js/enhancements/check.mjs";
-
 	const editor = document.querySelector("file-editor");
 	document.querySelectorAll("script[type=stackfile]").forEach((script) => {
 		editor.addFile(script.dataset.name, script.innerText);
 	});
+	editor.setCurrent("arion-compose.nix");
 
 	/* Enforce check pre-submit */
 	//const form = document.getElementById("editor-form");

templates/stack/new-form.html

@@ -28,8 +28,8 @@
 </style>
 
 <script type="module">
-	import Editor from "/static/js/ace.mjs";
-	import { add_check } from "/static/js/enhancements/check.mjs";
+	import Editor from "/static/scripts/ace.mjs";
+	import { add_check } from "/static/scripts/enhancements/check.js";
 
 	const editor = new Editor("editor");