start interface

dist/index.js

@@ -1,4 +1,104 @@
 (() => {
+  // node_modules/bloatless-react/index.ts
+  function createElement(tagName, attributes = {}, ...children) {
+    const element = document.createElement(tagName);
+    if (attributes != null)
+      Object.entries(attributes).forEach((entry) => {
+        const [attributename, value] = entry;
+        const [directiveKey, directiveValue] = attributename.split(":");
+        switch (directiveKey) {
+          case "on": {
+            switch (directiveValue) {
+              case "enter": {
+                element.addEventListener("keydown", (e) => {
+                  if (e.key != "Enter") return;
+                  value();
+                });
+                break;
+              }
+              default: {
+                element.addEventListener(directiveValue, value);
+              }
+            }
+            break;
+          }
+          case "subscribe": {
+            if (directiveValue == "children") {
+              try {
+                const [listState, toElement] = value;
+                listState.handleAddition((newItem) => {
+                  const child = toElement(newItem, listState);
+                  listState.handleRemoval(
+                    newItem,
+                    () => child.remove()
+                  );
+                  element.append(child);
+                });
+              } catch {
+                throw `error: cannot process subscribe:children directive because ListItemConverter is not defined. Usage: "subscribe:children={[list, converter]}"; you can find a more detailed example in the documentation`;
+              }
+            } else {
+              const state = value;
+              state.subscribe(
+                (newValue) => element[directiveValue] = newValue
+              );
+            }
+            break;
+          }
+          case "bind": {
+            const state = value;
+            state.subscribe(
+              (newValue) => element[directiveValue] = newValue
+            );
+            element.addEventListener(
+              "input",
+              () => state.value = element[directiveValue]
+            );
+            break;
+          }
+          case "toggle": {
+            const state = value;
+            state.subscribe(
+              (newValue) => element.toggleAttribute(directiveValue, newValue)
+            );
+            break;
+          }
+          case "set": {
+            const state = value;
+            state.subscribe(
+              (newValue) => element.setAttribute(directiveValue, newValue)
+            );
+            break;
+          }
+          default:
+            element.setAttribute(attributename, value);
+        }
+      });
+    children.filter((x) => x).forEach((child) => element.append(child));
+    return element;
+  }
+
+  // src/translations.ts
+  var englishTranslations = {
+    // settings
+    settings: "Settings",
+    // messages
+    messages: "Messages"
+  };
+  var translations = {
+    en: englishTranslations
+  };
+  function getText(key) {
+    const language = navigator.language.substring(0, 2);
+    if (translations[language]) {
+      return translations[language][key];
+    }
+    return translations.en[key];
+  }
+
   // src/index.tsx
+  document.body.prepend(
+    /* @__PURE__ */ createElement("menu", null, /* @__PURE__ */ createElement("a", { class: "tab-link", href: "settings-tab", active: true }, /* @__PURE__ */ createElement("span", { class: "icon" }, "settings"), getText("settings")), /* @__PURE__ */ createElement("a", { class: "tab-link", href: "message-tab" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "forum"), getText("messages")))
+  );
   document.querySelector("main").append();
 })();

src/index.tsx

@@ -1,3 +1,17 @@
-document.querySelector("main")!.append(
+import * as React from "bloatless-react";
 
-)
+import { getText } from "./translations";
+
+document.body.prepend(
+  <menu>
+    <a class="tab-link" href="#settings-tab" active>
+      <span class="icon">settings</span>
+      {getText("settings")}
+    </a>
+    <a class="tab-link" href="#message-tab">
+      <span class="icon">forum</span>
+      {getText("messages")}
+    </a>
+  </menu>
+);
+document.querySelector("main")!.append();

src/translations.ts

@@ -0,0 +1,19 @@
+const englishTranslations = {
+  // settings
+  settings: "Settings",
+
+  // messages
+  messages: "Messages"
+};
+
+const translations = {
+  en: englishTranslations,
+};
+
+export function getText(key: keyof typeof englishTranslations): string {
+  const language = navigator.language.substring(0, 2);
+  if (translations[language]) {
+    return translations[language][key];
+  }
+  return translations.en[key];
+}