mithril-mobs 0.0.1 → 0.0.3

package/README.md

@@ -1 +1,2 @@
 # mithril-mobs
+# mithril-template

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "mithril-mobs",
     "private": false,
-    "version": "0.0.1",
+    "version": "0.0.3",
     "type": "module",
     "scripts": {
         "dev": "vite",

package/src/mobs/index.js

@@ -1,66 +1,193 @@
 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;
-        }
-    };
+/**
+ * Reactive Observable (obs)
+ */
+export function obs(initialValue) {
+  let _value = initialValue;
+  const listeners = new Set();
+
+  const api = {
+    get value() {
+      return _value;
+    },
+    set value(newValue) {
+      _value = newValue;
+      listeners.forEach(listener => listener(_value));
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    toJSON() {
+      return { __obs__: true, value: _value }; // Mark for serialization
+    },
+    _isObs: true
+  };
 
-    return prepare(ctx)
+  return api;
 }
 
-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
+/**
+ * Helper to serialize state with obs() support
+ */
+function serializeState(state) {
+  const result = {};
+  for (const key in state) {
+    const val = state[key];
+    if (val && typeof val === 'object' && val._isObs) {
+      result[key] = val.toJSON();
+    } else {
+      result[key] = val;
+    }
+  }
+  return JSON.stringify(result);
+}
+
+/**
+ * Helper to deserialize and hydrate obs() in state
+ */
+function deserializeState(json, template = {}) {
+  const parsed = JSON.parse(json);
+  const result = {};
+
+  for (const key in parsed) {
+    const val = parsed[key];
+
+    if (val && typeof val === 'object' && val.__obs__) {
+      if (template[key] && template[key]._isObs) {
+        template[key].value = val.value;
+        result[key] = template[key];
+      } else {
+        result[key] = obs(val.value);
+      }
+    } else {
+      result[key] = val;
+    }
+  }
+
+  return result;
+}
+
+/**
+ * defineState - reactive state with localStorage
+ */
+export function defineState(name, stateTemplate) {
+  const listeners = new Set();
+  let state = { ...stateTemplate };
+
+  try {
+    const saved = localStorage.getItem(name);
+    if (saved) {
+      state = deserializeState(saved, stateTemplate);
+    }
+  } catch (e) {
+    console.warn(`Failed to load state '${name}' from localStorage:`, e);
+  }
+
+  return {
+    ...state,
+    set(setter, save) {
+      setter(state);
+      listeners.forEach(listener => listener(state));
+      if (save) this.save();
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    save() {
+      try {
+        localStorage.setItem(name, serializeState(state));
+      } catch (e) {
+        console.warn(`Failed to save state '${name}' to localStorage:`, e);
+      }
+    },
+    load() {
+      try {
+        const saved = localStorage.getItem(name);
+        if (saved) {
+          const newState = deserializeState(saved, state);
+          Object.assign(state, newState);
+          listeners.forEach(listener => listener(state));
+        }
+      } catch (e) {
+        console.warn(`Failed to reload state '${name}' from localStorage:`, e);
+      }
+    }
+  };
 }
 
+/**
+ * Class Binding Utility
+ */
+export function classes(classes_) {
+  const result = [];
+  for (let key in classes_) {
+    if (classes_[key]) result.push(key);
+  }
+  return result.join(" ");
+}
 
+/**
+ * Conditional Rendering Helper
+ */
+export function if_(firstCondition) {
+  const conditions = [firstCondition];
+  const vnodes = [];
 
+  const ctx = {
+    then(v) {
+      vnodes.push(v);
+      return prepare(ctx);
+    },
+    elseIf(newCondition) {
+      conditions.push(newCondition);
+      return prepare(ctx);
+    },
+    else(v) {
+      conditions.push(true);
+      vnodes.push(v);
+      return prepare(ctx);
+    },
+    view() {
+      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;
+}
 
+/**
+ * Styled Component Creator
+ */
 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]};`);
         }
       }
@@ -72,7 +199,6 @@ const Component = {
       return css;
     }
 
-    // Automatically add <style id="component-styles"> if missing
     let styleTag = document.getElementById("component-styles");
     if (!styleTag) {
       styleTag = document.createElement("style");
@@ -80,7 +206,6 @@ const Component = {
       document.head.appendChild(styleTag);
     }
 
-    // Use a Set to track injected components
     styleTag.__injectedComponents = styleTag.__injectedComponents || new Set();
 
     if (!styleTag.__injectedComponents.has(compId)) {
@@ -112,33 +237,19 @@ const Component = {
 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);
-    }
-  };
-}
 
-
-export function classes(classes_) {
-  const classes__ = []
-  for(let class_ in classes_) {
-    if(classes_[class_]) {
-      classes__.push(class_)
+/**
+ * Repeat Helper
+ */
+export const repeat = (times, increment = 1) => {
+  return {
+    map(cb) {
+      const items = [] 
+      for(let i = 0; i < times; i+=increment) {
+        items.push(cb(i))
+      }
+      return items
     }
   }
-  return classes__.join(" ")
 }