mithril-mobs 0.0.0

package/package.json

@@ -0,0 +1,23 @@
+{
+    "name": "mithril-mobs",
+    "private": false,
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "preview": "vite preview"
+    },
+    "exports": {
+        ".": "./src/mobs/index.js"
+    },
+    "files": [
+        "./src/mobs/"
+    ],
+    "devDependencies": {
+        "vite": "^6.3.5"
+    },
+    "dependencies": {
+        "mithril": "^2.3.1"
+    }
+}

package/src/mobs/index.js

@@ -0,0 +1,133 @@
+import m from "mithril"
+
+export function if_(firstCondition) {
+    const conditions = [firstCondition];
+    const vnodes     = [];
+
+    const ctx = {
+        then(v) {
+            vnodes.push(v);
+            return prepare(ctx);
+        },
+        elseIf(newCondition) {
+            conditions.push(newCondition);      // <- fixed
+            return prepare(ctx);
+        },
+        else(v) {
+            conditions.push(true);              // the default branch
+            vnodes.push(v);
+            return prepare(ctx);
+        },
+        view() {                              // evaluate
+            for (let i = 0; i < conditions.length; i++) {
+            if (conditions[i]) return vnodes[i] || null;
+            }
+            return null;
+        }
+    };
+
+    return prepare(ctx)
+}
+
+function prepare(ctx) {
+    const n = m(ctx)
+    n.then = ctx.then 
+    n.elseIf = ctx.elseIf 
+    n.else = ctx.else 
+    n.view = ctx.view 
+    return n
+}
+
+
+
+
+
+
+const Component = {
+  _counter: 0,
+
+  create(def) {
+    const compId = `comp-${Component._counter++}`;
+
+    // Convert SASS-like staticStyles object to CSS string
+    function stylesToCss(styles, prefix = `[data-comp-id="${compId}"]`) {
+      let css = "";
+      let props = [];
+
+      for (const key in styles) {
+        if (key.startsWith("/")) {
+          // Nested selector, replace "/" with space for nesting
+          const selector = prefix + key.replace(/\//g, " ");
+          css += stylesToCss(styles[key], selector);
+        } else {
+          // Style property
+          props.push(`${key}: ${styles[key]};`);
+        }
+      }
+
+      if (props.length > 0) {
+        css = `${prefix} { ${props.join(" ")} }\n` + css;
+      }
+
+      return css;
+    }
+
+    // Automatically add <style id="component-styles"> if missing
+    let styleTag = document.getElementById("component-styles");
+    if (!styleTag) {
+      styleTag = document.createElement("style");
+      styleTag.id = "component-styles";
+      document.head.appendChild(styleTag);
+    }
+
+    // Use a Set to track injected components
+    styleTag.__injectedComponents = styleTag.__injectedComponents || new Set();
+
+    if (!styleTag.__injectedComponents.has(compId)) {
+      styleTag.appendChild(document.createTextNode(stylesToCss(def.staticStyles || {})));
+      styleTag.__injectedComponents.add(compId);
+    }
+
+    return {
+      ...def,
+      view(vnode) {
+        const v = def.view.call(this, vnode);
+
+        if (Array.isArray(v)) {
+          return m("div", { "data-comp-id": compId }, v);
+        }
+
+        if (v && typeof v === "object" && v.tag) {
+          v.attrs = v.attrs || {};
+          v.attrs["data-comp-id"] = compId;
+          return v;
+        }
+
+        return m("div", { "data-comp-id": compId }, v);
+      },
+    };
+  },
+};
+
+export const createComponent = (def) => Component.create(def);
+
+
+export function obs(initialValue) {
+  let value = initialValue;
+  const listeners = new Set();
+
+  return {
+    get() {
+      return value;
+    },
+    set(newValue) {
+      value = newValue
+      listeners.forEach((listener) => listener(value))
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      // Return an unsubscribe function
+      return () => listeners.delete(listener);
+    }
+  };
+}