refactor: assemble main js files into a single bundle

core/static/bundled/alpine-index.js

@@ -1,12 +0,0 @@
-import sort from "@alpinejs/sort";
-import Alpine from "alpinejs";
-import { limitedChoices } from "#core:alpine/limited-choices.ts";
-import { alpinePlugin as notificationPlugin } from "#core:utils/notifications.ts";
-
-Alpine.plugin([sort, limitedChoices]);
-Alpine.magic("notifications", notificationPlugin);
-window.Alpine = Alpine;
-
-window.addEventListener("DOMContentLoaded", () => {
-  Alpine.start();
-});

core/static/bundled/base-bundle-index.ts

@@ -0,0 +1,43 @@
+import sort from "@alpinejs/sort";
+import Alpine from "alpinejs";
+import { polyfillCountryFlagEmojis } from "country-flag-emoji-polyfill";
+import htmx from "htmx.org";
+import { limitedChoices } from "#core:alpine/limited-choices";
+import { default as navbar } from "#core:core/navbar";
+import { alpinePlugin as notificationPlugin } from "#core:utils/notifications";
+
+/**
+ * Alpine
+ */
+Alpine.plugin([sort, limitedChoices]);
+Alpine.magic("notifications", notificationPlugin);
+
+// biome-ignore lint/style/useNamingConvention: it's how it's named
+Object.assign(window, { Alpine });
+
+window.addEventListener("DOMContentLoaded", () => {
+  Alpine.start();
+});
+
+/**
+ * Polyfill for country flags (used for language choice)
+ */
+polyfillCountryFlagEmojis();
+
+/**
+ * HTMX
+ */
+document.body.addEventListener("htmx:beforeRequest", (event: CustomEvent) => {
+  event.detail.target.ariaBusy = true;
+});
+
+document.body.addEventListener("htmx:beforeSwap", (event: CustomEvent) => {
+  event.detail.target.ariaBusy = null;
+});
+
+Object.assign(window, { htmx });
+
+/**
+ * navbar
+ */
+navbar();

core/static/bundled/core/navbar.ts

@@ -1,12 +1,10 @@
-import { exportToHtml } from "#core:utils/globals.ts";
-
-exportToHtml("showMenu", () => {
+function showMenu() {
   const navbar = document.getElementById("navbar-content");
   const current = navbar.getAttribute("mobile-display");
   navbar.setAttribute("mobile-display", current === "hidden" ? "revealed" : "hidden");
-});
+}
 
-document.addEventListener("alpine:init", () => {
+function navbarInit() {
   const menuItems = document.querySelectorAll(".navbar details[name='navbar'].menu");
   const isDesktop = () => {
     return window.innerWidth >= 500;
@@ -33,4 +31,9 @@ document.addEventListener("alpine:init", () => {
       }
     });
   }
-});
+}
+
+export default () => {
+  Object.assign(document, { showMenu });
+  document.addEventListener("alpine:init", navbarInit);
+};

core/static/bundled/country-flags-index.ts

@@ -1,3 +0,0 @@
-import { polyfillCountryFlagEmojis } from "country-flag-emoji-polyfill";
-
-polyfillCountryFlagEmojis();

core/static/bundled/htmx-index.js

@@ -1,11 +0,0 @@
-import htmx from "htmx.org";
-
-document.body.addEventListener("htmx:beforeRequest", (event) => {
-  event.detail.target.ariaBusy = true;
-});
-
-document.body.addEventListener("htmx:beforeSwap", (event) => {
-  event.detail.target.ariaBusy = null;
-});
-
-Object.assign(window, { htmx });

core/templates/core/base.jinja

@@ -35,12 +35,9 @@
       <noscript><link rel="stylesheet" href="{{ static('bundled/fontawesome-index.css') }}"></noscript>
 
       <script src="{{ url('javascript-catalog') }}"></script>
-      <script type="module" src="{{ static("bundled/core/navbar-index.ts") }}"></script>
+      <script type="module" src="{{ static("bundled/base-bundle-index.ts") }}"></script>
       <script type="module" src="{{ static("bundled/core/components/include-index.ts") }}"></script>
-      <script type="module" src="{{ static('bundled/alpine-index.js') }}"></script>
-      <script type="module" src="{{ static('bundled/htmx-index.js') }}"></script>
-      <script type="module" src="{{ static('bundled/country-flags-index.ts') }}"></script>
-      <script type="module" src="{{ static('bundled/core/tooltips-index.ts') }}"></script>
+      <script type="module" src="{{ static("bundled/core/tooltips-index.ts") }}"></script>
 
       {% block additional_css %}{% endblock %}
       {% block additional_js %}{% endblock %}

package-lock.json

@@ -44,6 +44,7 @@
         "@biomejs/biome": "^2.4.13",
         "@hey-api/openapi-ts": "^0.94.5",
         "@types/alpinejs": "^3.13.11",
+        "@types/alpinejs__sort": "^3.13.0",
         "@types/cytoscape-cxtmenu": "^3.4.5",
         "@types/cytoscape-klay": "^3.1.5",
         "@types/js-cookie": "^3.0.6",
@@ -2481,6 +2482,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/alpinejs__sort": {
+      "version": "3.13.0",
+      "resolved": "https://registry.npmjs.org/@types/alpinejs__sort/-/alpinejs__sort-3.13.0.tgz",
+      "integrity": "sha512-iR9vEy6e3yXbYAK45/hpulzlt8SSKTsvYUl/t5nuWjtbJPoGxzxUUqOm3egp83Gqtf//TyJnDCI4OTebAKDRAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/alpinejs": "*"
+      }
+    },
     "node_modules/@types/codemirror": {
       "version": "5.60.17",
       "resolved": "https://registry.npmjs.org/@types/codemirror/-/codemirror-5.60.17.tgz",

package.json

@@ -29,6 +29,7 @@
     "@biomejs/biome": "^2.4.13",
     "@hey-api/openapi-ts": "^0.94.5",
     "@types/alpinejs": "^3.13.11",
+    "@types/alpinejs__sort": "^3.13.0",
     "@types/cytoscape-cxtmenu": "^3.4.5",
     "@types/cytoscape-klay": "^3.1.5",
     "@types/js-cookie": "^3.0.6",