enigmatic 0.10.1 → 0.11.0

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,9 +10,7 @@ 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')
     }
 }
-
-console.log('components.mjs', components)

package/enigmatic.js

@@ -1,157 +1,157 @@
+/*
+    enigmatic v 0.11.0 front end js utils
+    
+    Usage:
+    <div id='mykey' transform='func1' fetch='some.site/data' immediate>${name} ${value}</div>
+    <div id='mykey2' transform='func2' stream='some.site/data'>${name} ${value}</div>
+
+    $('selector')
+    $$('selector')
+    await loadJS('sounds.js')
+    await loadCSS('enigmatic.css')
+    await wait(1000)
+    await ready()
+    beep()
+    element(beforeData=>beforeData.field, '<div>${o.mykey}</div>')
+    window.components
+    state
+    await get
+    await stream
+*/
+
 const w = {},
-  d = document;
+  d = document
 
-// helpers
+/////// Helpers
 
-w.$ = d.querySelector.bind(d);
-w.$$ = d.querySelectorAll.bind(d);
+w.$ = d.querySelector.bind(d)
+w.$$ = d.querySelectorAll.bind(d)
 w.loadJS = (src) => {
   return new Promise((r, j) => {
-    if ($(`script[src="${src}"]`)) return r(true);
-    const s = d.createElement('script');
-    s.src = src;
-    s.addEventListener('load', r);
-    d.head.appendChild(s);
-  });
-};
+    if ($(`script[src="${src}"]`)) return r(true)
+    const s = d.createElement('script')
+    s.src = src
+    s.addEventListener('load', r)
+    d.head.appendChild(s)
+  })
+}
 w.loadCSS = (src) => {
   return new Promise((r, j) => {
-    const s = document.createElement('link');
-    s.rel = 'stylesheet';
-    s.href = src;
-    s.addEventListener('load', r);
-    d.head.appendChild(s);
-  });
-};
-w.wait = (ms) => new Promise((r) => setTimeout(r, ms));
+    const s = document.createElement('link')
+    s.rel = 'stylesheet'
+    s.href = src
+    s.addEventListener('load', r)
+    d.head.appendChild(s)
+  })
+}
+w.wait = (ms) => new Promise((r) => setTimeout(r, ms))
 w.ready = async () => {
   return new Promise((r) => {
-    if (document.readyState === 'complete') r(true);
+    if (document.readyState === 'complete') r(true)
     document.onreadystatechange = () => {
-      if (document.readyState === 'complete') r();
-    };
-  });
-};
-w.child = (type, html) => {
-  const e = d.createElement(type);
-  e.innerHTML = html;
-  d.body.appendChild(e);
-  return e;
-};
+      if (document.readyState === 'complete') r()
+    }
+  })
+}
 
-// Custom element
+/////// Custom element
 
-w.element = (s, style, onMount = () => { }) => {
-  let [name, html] = s[0].split(', ');
+w.element = (
+  name,
+  { onMount = x => x, beforeData = (x) => x, style, template = '' }
+) => {
   customElements.define(
     name,
     class extends HTMLElement {
       connectedCallback(props) {
-        const om = onMount;
-        om();
-        if (style) this.innerHTML += `<style>${name} { ${style} }</style>`;
-        this.innerHTML += html;
+        onMount(this)
+        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 = ''
+        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
       }
     }
-  );
-};
+  )
+}
 
-// Data
+if (window.components) {
+  for (let name in window.components) w.element(name, window.components[name])
+}
 
-w.state = new Proxy(
-  {},
-  {
-    set: (obj, prop, value) => {
-      for (const e of $$(`[data*=${prop}]`)) {
-        console.log('setting e', e.tagName, e.id, value);
-        if (!e.set) {
-          e.set = new Function(
-            'o',
-            'return this.innerHTML = `' +
-            e.innerHTML.replaceAll('{', '${o.') +
-            '`'
-          );
-          console.log(e, 'defaulting set', e.set);
-        }
-        console.log(value);
-        e.set(value);
-      }
-      obj[prop] = value;
-      return value;
-    },
-    get: (obj, prop, receiver) => {
-      if (prop == '_state') return obj;
-      return obj[prop];
-    },
-  }
-);
+/////// State, data, and reactivity
 
-w.dataEvent = (x) => console.log(`dataevent: ${x}`);
+w.state = (key, data) => {
+  if (!key && !data)
+    return localStorage.clear()
+  if (data) {
+    const stored_data = { when: new Date().toISOString(), data: data }
+    localStorage.setItem(key, JSON.stringify(stored_data))
+    for (const e of $$(`[data*=${key}]`)) e.set(stored_data.data)
+    return stored_data
+  }
+  return JSON.parse(localStorage.getItem(key))
+}
 
-w.fetchJSON = async (url, key) => {
-  const j = await (await fetch(url)).json();
-  if (key) state[key] = j;
-  dataEvent(j);
-  return j;
-};
+w.get = async (
+  url,
+  options = null,
+  transform = null,
+  key = 'temp'
+) => {
+  let data = await (await fetch(`https://${url}`, options)).json()
+  if (transform) data = transform(data)
+  state(key, data)
+  return data
+}
 
-w.streamJSON = async (url, key) => {
-  const ev = new EventSource(url);
+w.stream = async (url, key) => {
+  const ev = new EventSource(url)
   ev.onmessage = (ev) => {
-    const j = JSON.parse(ev.data);
-    if (key) state[key] = j;
-    dataEvent(j);
-    return j;
-  };
-};
-
-// State changes
-
-w.trackStateChanges = () =>
-(w.dataEvent = (o) =>
-  localStorage.set(new Date().toISOString(), JSON.stringify(o)));
-w.untrackStateChanges = () =>
-  (w.dataEvent = (o) => console.log('dataevent:', o));
+    const data = JSON.parse(ev.data)
+    state(key, data)
+    return data
+  }
+}
 
-// Startup
+/////// Startup
 
 w.start = async () => {
   await w.ready();
   [...$$('div')].map((e) => {
-    if (!e.id)
-      e.id = (Math.random() + 1).toString(36).substring(7).toUpperCase();
     e.pr = {};
-    [...e.attributes].map((a) => (e.pr[a.name] = a.value));
-    if (!e.fetch && e.pr.fetch)
-      e.fetch = fetchJSON.bind(null, e.pr.fetch, e.id);
-    if ('immediate' in e.pr) e.fetch();
-    if (!e.stream && e.pr.stream)
-      e.stream = streamJSON.bind(null, e.pr.stream, e.id);
+    [...e.attributes].map((a) => (e.pr[a.name] = a.value))
+    if (e.pr.fetch) e.fetch = w.get.bind(null, e.pr.fetch, null, window[e.pr.transform], e.id)
+    if ('immediate' in e.pr) e.fetch()
+    if (e.pr.stream) e.stream = w.stream.bind(null, e.pr.stream, null, window[e.pr.transform], e.id)
     if (e.pr.data) {
-      if (this.innerHTML.contains('{')) {
-        this.template = this.innerHTML.replaceAll('{', '${');
-        this.innerHTML = '';
+      if (e.innerHTML && e.innerHTML.includes('{')) {
+        e.template = e.innerHTML.replaceAll('{', '${')
+        e.innerHTML = ''
+      }
+      e.set = (o) => {
+        e.innerHTML = ''
+        if (!Array.isArray(o)) o = [o]
+        const m = new Function('o', 'return `' + e.template + '`')
+        o.map((i) => (e.innerHTML += m(i)))
       }
-      this.set = (o) => {
-        if (!Array.isArray(o)) o = [o];
-        const m = new Function('o', 'return `' + this.template + '`');
-        o.map((i) => (this.innerHTML += m(o)));
-      };
     }
-  });
-  d.body.child = (html, parent = document.body) => {
-    const ch = document.createElement('div');
-    ch.id = 'testchild';
-    ch.html = html;
-    parent.appendChild(ch);
-    return ch;
-  };
-};
+  })
+}
 
-w.enigmatic = { version: '2022-03-01T17:12:33.046Z' };
+w.enigmatic = { version: '2022-07-24 0.11.0' }
 Object.assign(window, w);
 
-(async() => {
+(async () => {
   await w.start()
-  if(main) main()
-})();
+})()

package/index.html

@@ -0,0 +1,19 @@
+<script src='enigmatic.js'></script>
+
+<div id='tests'></div>
+
+<script type='module'>
+
+    element('my-custom', data=>data.myvalue, '<div>${o.mykey}</div>')
+    const e = document.createElement('my-custom')
+    e.setAttribute('data', 'mydata')
+
+    state('mydata', {myvalue: 'my value'})
+
+    await get('', null, data=>data.myvalue, 'my-fetched-data')
+    state('my-fetched-data')
+
+    await stream('', 'my-streamed-data')
+    state('my-streamed-data')
+
+</script>

package/package.json

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