enigmatic 0.10.2 → 0.10.3

package/{components.mjs → components.js}

@@ -1,6 +1,7 @@
 window.components = {
     'hello-world': {
         style: 'color: red',
+        onMount: async x => console.log('mounted h-w'),
         template: 'Hello World'
     },
     'random-users': {
@@ -9,8 +10,8 @@ window.components = {
         beforeData: x => x.results[0].name.first = 'John'
     },
     'tailwind-example': {
-        template: '<div class="bg-blue-500 text-white font-bold py-2 px-4 rounded">Hello World</div>',
-        onMount: e => loadCSS('https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css')
+        template: '<div class="bg-blue-300 text-white font-bold py-2 px-4 rounded">I am Tailwind</div>',
+        onMount: async e => await loadCSS('https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css')
     }
 }
 

package/enigmatic.js

@@ -40,16 +40,18 @@ w.child = (type = 'div', html = '') => {
 
 // Custom element
 
-if(window.components) {
-  for(let name in window.components)
-    w.element(name, window.components[name])
-}
 w.element = (name, {onMount = x=>x, beforeData = x=>x, style, template = ''}) => {
   customElements.define(name, class extends HTMLElement {
-    connectedCallback(props) {
-        onMount()
-        if (style) this.innerHTML += `<style>${name} { ${style} }</style>`;
+    async connectedCallback(props) {
+        await onMount()
+        if (style) {
+          const s = document.createElement('style')
+          s.innerHTML = `${name} {${style}}`
+          d.body.appendChild(s);
+        }
         this.template = template;
+        if(!this.template.match('{'))
+          this.innerHTML = this.template
     }
     set(o)  {
       this.innerHTML = ''
@@ -61,6 +63,11 @@ w.element = (name, {onMount = x=>x, beforeData = x=>x, style, template = ''}) =>
   })
 }
 
+if (window.components) {
+  for (let name in window.components)
+    w.element(name, window.components[name])
+}
+
 // Data
 
 w.state = new Proxy(

package/index.html

@@ -1,3 +1,10 @@
+<script src='components.js'></script>
 <script src='enigmatic.js'></script>
 
-<div data='key'>This is data: {o.a}</div>
+<div data='key'>This is data: {o.a}</div>
+<hello-world></hello-world>
+<tailwind-example></tailwind-example>
+
+<script>
+    main = x => state.key = [{a: 'one'}, { a: 'two' }]
+</script>

package/package.json

@@ -1,5 +1,5 @@
 {
     "name": "enigmatic",
     "main": "enigmatic.js",
-    "version": "0.10.2"
+    "version": "0.10.3"
 }