enigmatic 0.10.3 → 0.11.1

package/.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080/test.html",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

package/components.js

@@ -14,5 +14,3 @@ window.components = {
         onMount: async e => await loadCSS('https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css')
     }
 }
-
-console.log('components.mjs', components)

package/enigmatic.js

@@ -1,150 +1,185 @@
-const w = {}, d = document;
-
-// helpers
-
-w.$ = d.querySelector.bind(d);
-w.$$ = d.querySelectorAll.bind(d);
+/*
+    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
+
+/////// Helpers
+
+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 = 'div', html = '') => {
-  const e = d.createElement(type);
-  e.innerHTML = html;
-  d.body.appendChild(e);
-  return e;
-};
-
-// Custom element
+      if (document.readyState === 'complete') r()
+    }
+  })
+}
 
-w.element = (name, {onMount = x=>x, beforeData = x=>x, style, template = ''}) => {
-  customElements.define(name, class extends HTMLElement {
-    async connectedCallback(props) {
-        await onMount()
+/////// Custom element
+
+w.element = (
+  name,
+  { onMount = x => x, beforeData = (x) => x, style, template = '' }
+) => {
+  customElements.define(
+    name,
+    class extends HTMLElement {
+      connectedCallback(props) {
+        onMount(this)
         if (style) {
           const s = document.createElement('style')
           s.innerHTML = `${name} {${style}}`
-          d.body.appendChild(s);
+          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(o)));
+        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
+      }
     }
-  })
+  )
 }
 
 if (window.components) {
-  for (let name in window.components)
-    w.element(name, window.components[name])
+  for (let name in window.components) w.element(name, window.components[name])
 }
 
-// Data
+/////// State, data, and reactivity
 
-w.state = new Proxy(
-  {}, {
+w.state = new Proxy({}, {
     set: (obj, prop, value) => {
-      let ret = []
-      for (const e of $$(`[data*=${prop}]`)) {
-        console.log(['setting e', e.tagName, e.id, value])
-        e.set(value);
+      console.log(prop, value)
+      if(this[prop] === value) {
+        return true
       }
-      obj[prop] = value;
+      for (const e of $$(`[data=${prop}]`)) {
+        if(e.set) e.set(value)
+      }
+      obj[prop] = value
+      return value
     },
     get: (obj, prop, receiver) => {
-      if (prop == '_state') return obj;
-      return obj[prop];
-    },
+      if (prop == '_all') return obj
+      return obj[prop]
+    }
   }
 )
 
-w.dataEvent = (x) => console.log(`dataevent: ${x}`);
-
-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)
+    w.state[key] = data
+    return data
+  }
+}
 
-// Startup
+/////// Startup
 
 w.start = async () => {
   await w.ready();
-  [...$$('div')].map((e) => {
-    if (!e.id)
-      e.id = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 3)
-    e.pr = {};
-    [...e.attributes].map((a) => (e.pr[a.name] = a.value));
-    if (e.pr.fetch) e.fetch = fetchJSON.bind(null, e.pr.fetch, e.id);
-    if ('immediate' in e.pr) e.fetch();
-    if (e.pr.stream) e.stream = streamJSON.bind(null, e.pr.stream, e.id);
-    if (e.pr.data) {
+  [...$$('*')].map(e => {
+    e.attr = {};
+    [...e.attributes].map((a) => (e.attr[a.name] = a.value))
+    if (e.attr?.fetch) {
+      e.fetch = async () => {
+        return w.get(e.attr?.fetch, {}, w[e.attr?.transform], e.attr.data)
+      }
+    }
+    if (e.hasAttribute('immediate')) {
+      e.fetch()
+    }
+    if (e.attr?.stream) {
+      e.stream = w.stream.bind(null, e.pr.stream, null, window[e.pr.transform], e.id)
+    }
+    let dta = e.attr?.data
+    if (dta) {
+      if(dta.endsWith('[]')) {
+        dta = dta.replace('[]', '')
+      }
       if (e.innerHTML && e.innerHTML.includes('{')) {
-        e.template = e.innerHTML.replaceAll('{', '${');
-        e.innerHTML = '';
+        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)));
-      };
+        const template = e.template.replaceAll('{', '{rec.')
+        if (!Array.isArray(o)) o = [o]
+        const f = new Function('rec', 'return `' + template + '`')
+        o.map(rec => {
+            if(typeof rec !== 'object') rec = {value: rec}
+            e.innerHTML += f(rec)
+        })
+      }
+      if (e.attr?.value) {
+        let o = e.attr.value
+         try { o = JSON.parse(o) } catch(e) {} 
+         w.state[dta] = o
+      }
     }
   })
 }
 
-w.enigmatic = { version: '2022-03-05 0.10.2' };
+w.enigmatic = { version: '2022-09-24 0.11.1' }
 Object.assign(window, w);
 
-(async() => {
+(async () => {
   await w.start()
-  if(window.main) window.main()
-})();
+})()

package/package.json

@@ -1,5 +1,12 @@
 {
     "name": "enigmatic",
     "main": "enigmatic.js",
-    "version": "0.10.3"
-}
+    "version": "0.11.1",
+    "scripts": {
+        "test": "node test.mjs"
+    },
+    "devDependencies": {
+        "instax": "^0.1.5",
+        "puppeteer": "^17.1.3"
+    }
+}

package/server.mjs

@@ -0,0 +1,9 @@
+import http from 'node:http'
+import { read } from 'instax'
+
+http.createServer(({url}, s) => {
+    console.log(url)
+    s.end(read(`.${url}`))
+}).listen(3000)
+
+console.log('started on 3000')

package/test.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<script src='components.js'></script>
+<script src='enigmatic.js'></script>
+
+<div id="counter" data="count" value="0">{value}</div>
+<button onclick="state.count++">Incr</button>
+
+<div id='div1' data="users" fetch="randomuser.me/api" value='{"results": [ {"name": {"first": "set", "last": "me"}} ]}'>
+ {results[0].name.first} {results[0].name.last} 
+</div>
+
+<button onclick='state.users = {"results": [ {"name": {"first": "first", "last": "last"} }]}'>Set user</button>
+<button onclick="div1.fetch()">Fetch user</button>
+
+<div id='div2' data="users2" fetch="randomuser.me/api" immediate>
+  <div>{results[0].name.first} {results[0].name.last}</div>
+</div>
+
+<div id='div3' data="users2">
+  <div>{results[0].name.first} {results[0].name.last}</div>
+</div>
+
+<random-users data="users"></random-users>
+<tailwind-example></tailwind-example>

package/test.mjs

@@ -0,0 +1,26 @@
+// wsl install:
+// wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
+// sudo apt - y install./ google - chrome - stable_current_amd64.deb
+
+import puppeteer from 'puppeteer'
+import { te, tde, tm, wait } from 'instax'
+const host = 'http://127.0.0.1:8080'
+
+const browser = await puppeteer.launch({ headless: true })
+const page = await browser.newPage()
+await page.goto(`${host}/test.html`, {
+    waitUntil: 'networkidle2',
+    timeout: 5000
+})
+
+const e = (await page.evaluate("enigmatic"))
+tm(e.version, /0.11.1/)
+tm(await page.evaluate("$('#div1').template"), /results/)
+
+// get
+// state
+// div
+// custom
+await wait(2000)
+await page.close()
+await browser.close()

package/index.html

@@ -1,10 +0,0 @@
-<script src='components.js'></script>
-<script src='enigmatic.js'></script>
-
-<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>