mithril-mobs 0.0.2 → 0.0.4

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.2",
+    "version": "0.0.4",
     "type": "module",
     "scripts": {
         "dev": "vite",

package/src/mobs/index.js

@@ -1,4 +1,4 @@
-import m from "mithril"
+import m from "mithril";
 
 /**
  * Reactive Observable (obs)
@@ -171,7 +171,7 @@ function prepare(ctx) {
 }
 
 /**
- * Styled Component Creator
+ * Styled Component Creator - MULTIPLE <style> TAG VERSION
  */
 const Component = {
   _counter: 0,
@@ -199,20 +199,14 @@ const Component = {
       return css;
     }
 
-    let styleTag = document.getElementById("component-styles");
-    if (!styleTag) {
-      styleTag = document.createElement("style");
-      styleTag.id = "component-styles";
+    // Inject a new <style> tag per component
+    if (def.staticStyles) {
+      const styleTag = document.createElement("style");
+      styleTag.setAttribute("data-comp-id", compId);
+      styleTag.textContent = stylesToCss(def.staticStyles);
       document.head.appendChild(styleTag);
     }
 
-    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) {
@@ -235,3 +229,18 @@ const Component = {
 };
 
 export const createComponent = (def) => Component.create(def);
+
+/**
+ * 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;
+    }
+  };
+};