feat: build javascript using vite

.storybook/preview.ts

@@ -1,5 +1,6 @@
 import type { Preview } from "@storybook/web-components";
 
+import "../src/js/main.js";
 import "../src/scss/main.scss";
 import DocsTemplate from "./DocsTemplate.mdx";
 

eslint.config.js

@@ -10,6 +10,7 @@ export default [
     languageOptions: {
       globals: {
         ...globals.node,
+        ...globals.browser,
       },
     },
   },

package.json

@@ -14,7 +14,8 @@
   },
   "files": [
     "src/scss/**/*.scss",
-    "dist/css/**/*.css"
+    "dist/css/**/*.css",
+    "dist/js/**/*.js"
   ],
   "scripts": {
     "start": "storybook dev -p 6006",

static/js/header.js → src/js/components/header/header.js

@@ -14,7 +14,6 @@
 
     show = () => {
       this.wrapper.removeAttribute("hidden");
-      const reflow = this.wrapper.offsetHeight;
       document.addEventListener("keydown", (e) => this.handleKeyDown(e));
       this.wrapper.classList.add(this.openClass);
       setTimeout(() => {
@@ -48,20 +47,22 @@
     }
   }
 
-  const iatiMobileNav = new IatiMobileNav(
-    document.querySelector(".js-iati-mobile-nav"),
-    "iati-mobile-nav--open",
-  );
+  document.addEventListener("DOMContentLoaded", function () {
+    const iatiMobileNav = new IatiMobileNav(
+      document.querySelector(".js-iati-mobile-nav"),
+      "iati-mobile-nav--open",
+    );
 
-  const overlay = document.querySelector(".js-iati-mobile-overlay");
-  const menuOpenBtn = document.querySelector(".js-iati-menu-toggle-open");
-  const menuCloseBtn = document.querySelector(".js-iati-menu-toggle-close");
-  const restoreFocus = () => {
-    menuOpenBtn.focus();
-  };
-  menuOpenBtn.addEventListener("click", iatiMobileNav.show);
-  menuCloseBtn.addEventListener("click", () =>
-    iatiMobileNav.hide(restoreFocus),
-  );
-  overlay.addEventListener("click", () => iatiMobileNav.hide(restoreFocus));
+    const overlay = document.querySelector(".js-iati-mobile-overlay");
+    const menuOpenBtn = document.querySelector(".js-iati-menu-toggle-open");
+    const menuCloseBtn = document.querySelector(".js-iati-menu-toggle-close");
+    const restoreFocus = () => {
+      menuOpenBtn.focus();
+    };
+    menuOpenBtn.addEventListener("click", iatiMobileNav.show);
+    menuCloseBtn.addEventListener("click", () =>
+      iatiMobileNav.hide(restoreFocus),
+    );
+    overlay.addEventListener("click", () => iatiMobileNav.hide(restoreFocus));
+  });
 })();

src/js/main.js

@@ -0,0 +1 @@
+import "./components/header/header.js";

vite.config.js

@@ -6,12 +6,15 @@ export default defineConfig({
   build: {
     lib: {
       entry: {
+        iati: path.resolve(__dirname, "src/js/main.js"),
         css: path.resolve(__dirname, "src/scss/main.scss"),
       },
+      fileName: "iati",
       formats: ["es"],
     },
     rollupOptions: {
       output: {
+        entryFileNames: "js/[name].js",
         assetFileNames: (assetInfo) => {
           if (assetInfo.name == "style.css") {
             return `css/iati.css`;