enigmatic 0.21.5 → 0.21.6

package/enigmatic.css

@@ -32,7 +32,6 @@ ol {
 }
 
 body,
-home,
 section {
   display: grid;
   margin: 0;

package/enigmatic.js

@@ -70,9 +70,22 @@ w.flatten = (obj, text) => {
   return htmls
 }
 
+w.e = (name, mount, style, fn) => {
+  customElements.define(name, class extends HTMLElement {
+    connectedCallback() {
+      Object.assign(this.style, style)
+      if (mount) mount()
+      Object.assign(this, fn)
+      Object.keys(fn).filter(k=>k.match(/click/)).forEach(k=>{
+        this.addEventListener(k, fn[k], true)
+      })
+    }
+  })
+}
+
 w.element = (
   name,
-  { onMount = x => x, beforeData = (x) => x, style, template = '' }
+  { onMount = x => x, beforeData = (x) => x, style, template = '', fn = {} }
 ) => {
   customElements.define(
     name,
@@ -86,6 +99,7 @@ w.element = (
         }
         this.template = template
         if (!this.template.match('{')) this.innerHTML = this.template
+        Object.assign(this, fn)
       }
       set(o) {
         o = beforeData(o)
@@ -162,7 +176,8 @@ w.start = async () => {
         e.innerHTML = w.flatten(obj, template) + ignore
         let pos = 0
         for(c in e.children) {
-          if('set' in e.children[c])
+          const ele = e.children[c]
+          if(typeof ele === 'object' && 'set' in ele)
             e.children[c].set(obj[pos++])
         }
         return obj

package/package.json

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

package/tests/test.html

@@ -8,21 +8,32 @@
 
        <div id='par' fetch='[{"id": 1, "control": "input"},{"id": 2, "control": "select"}]'>
             <div>{control}</div>
-            <test-element id="{id}"></test-element>
+            <test-element id="a{id}"></test-element>
             <br>
             <!--IGNORE-->
                 ignore this
             <!--ENDIGNORE-->
        </div>
-
     </section>
     <div class="bg-yellow"></div>
 </body>
 
 <script>
+    e('test-element', null, {border: '4px green solid'}, {
+        set: o=>console.log(o),
+        click: x=>alert()
+    })
+    /*
+    More verbose:
     customElements.define('test-element', class extends HTMLElement {
+        connectedCallback() {
+            this.style.border = '3px black solid'
+        }
         set(o) {
             this.innerHTML = `<${o.control}></${o.control}>`
         }
-    })
+        myfunc() {
+            alert('custom func')
+        }
+    })*/
 </script>