enigmatic 0.11.2 → 0.11.4

package/enigmatic.js

@@ -41,8 +41,9 @@ w.flatten = (obj, text) => {
   for (let k in obj) {
     let html = text.replaceAll('{$key}', k)
     for (let j in obj[k]) {
-      html = html.replaceAll('{_key_}', j).replaceAll('{_val_}', obj[k][j])
-      html = html.replaceAll(`{${j}}`, obj[k][j])
+      const val = typeof obj[k] === 'object' ? obj[k][j] : obj[k]
+      html = html.replaceAll('{_key_}', j).replaceAll('{_val_}', val)
+      html = html.replaceAll(`{${j}}`, val)
     }
     htmls += html
   }
@@ -68,12 +69,9 @@ w.element = (
         if (!this.template.match('{')) this.innerHTML = this.template
       }
       set(o) {
-        this.innerHTML = ''
         o = beforeData(o)
-        if (!Array.isArray(o)) o = [o]
-        const m = new Function('o', 'return `' + this.template + '`')
-        o.map((i) => (this.innerHTML += m(i)))
-        return true
+        w.flatten(o, this.template)
+        return o
       }
     }
   )
@@ -85,22 +83,22 @@ if (window.components) {
 
 /////// State, data, and reactivity
 w.state = new Proxy({}, {
-    set: (obj, prop, value) => {
-      console.log(prop, value)
-      if(this[prop] === value) {
-        return true
-      }
-      for (const e of $$(`[data=${prop}]`)) {
-        if(e.set) e.set(value)
-      }
-      obj[prop] = value
-      return value
-    },
-    get: (obj, prop, receiver) => {
-      if (prop == '_all') return obj
-      return obj[prop]
+  set: (obj, prop, value) => {
+    console.log(prop, value)
+    if (this[prop] === value) {
+      return true
+    }
+    for (const e of $$(`[data=${prop}]`)) {
+      if (e.set) e.set(value)
     }
+    obj[prop] = value
+    return value
+  },
+  get: (obj, prop, receiver) => {
+    if (prop == '_all') return obj
+    return obj[prop]
   }
+}
 )
 
 w.save = (obj, name) => {
@@ -147,19 +145,21 @@ w.start = async () => {
     let dta = e.attr?.data
     if (dta) {
       console.log(`processing ${e}`)
-      if (e.innerHTML) {
-        e.template = e.innerHTML
-        if(e.innerHTML.match('{')) {
-          e.innerHTML = ''
+      if (!e.set) {
+        if (e.innerHTML) {
+          e.template = e.innerHTML
+          if (e.innerHTML.match('{')) {
+            e.innerHTML = ''
+          }
+        }
+        e.set = (o) => {
+          e.innerHTML = w.flatten(o, e.template)
         }
-      }
-      e.set = (o) => {
-        e.innerHTML = w.flatten(o, e.template)
       }
       if (e.attr?.value) {
-         let o = e.attr.value
-         try { o = JSON.parse(o) } catch(e) {} 
-         w.state[dta] = o
+        let o = e.attr.value
+        try { o = JSON.parse(o) } catch (e) { }
+        w.state[dta] = o
       }
     }
   })

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "enigmatic",
     "main": "enigmatic.js",
-    "version": "0.11.2",
+    "version": "0.11.4",
     "scripts": {
         "test": "node test.mjs"
     },

package/test-flatten.html

@@ -6,6 +6,7 @@
 
 <button onclick='window.testone()'>Test one</button>
 <button onclick='window.testtwo()'>Test two</button>
+<button onclick='window.testthree()'>Test three</button>
 
 <script type="module">
     window.testone = () => {
@@ -22,4 +23,11 @@
         }
         state.akey = testt
     }
+    window.testthree = () => {
+        const testt = {
+            "k1": 'val1',
+            "k2": 'val2',
+        }
+        state.akey = testt
+    }
 </script>