enigmatic 0.11.0 → 0.11.2

package/components.js

@@ -1,16 +1,16 @@
-window.components = {
-    'hello-world': {
-        style: 'color: red',
-        onMount: async x => console.log('mounted h-w'),
-        template: 'Hello World'
-    },
-    'random-users': {
-        template: 'Hello Random user: {results[0].name.first} {results[0].name.last}',
-        onMount: e => console.log('Mounted', e.tagName, e.props),
-        beforeData: x => x.results[0].name.first = 'John'
-    },
-    'tailwind-example': {
-        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')
-    }
-}
+window.components = {
+    'hello-world': {
+        style: 'color: red',
+        onMount: async x => console.log('mounted h-w'),
+        template: 'Hello World'
+    },
+    'random-users': {
+        template: 'Hello Random user: {results[0].name.first} {results[0].name.last}',
+        onMount: e => console.log('Mounted', e.tagName, e.props),
+        beforeData: x => x.results[0].name.first = 'John'
+    },
+    'tailwind-example': {
+        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.css

@@ -1,247 +1,278 @@
-body {
-  font-family: var(--font-primary, -apple-system, BlinkMacSystemFont, sans-serif);
-  height: 100vh;
-  background-color: var(--bg-color, #fff);
-  padding: .5rem;
-}
-
-body,
-section {
-  display: grid;
-  margin: 0;
-  grid-template-columns: var(--cols, 1fr 4fr 1fr);
-  grid-template-rows: var(--rows, 1fr 9fr 1fr);
-}
-
-* {
-  grid-column: span var(--span, 1);
-  grid-row: span var(--span-rows, 1);
-}
-
-.flex {
-  display: flex;
-}
-
-/** positioning ***/
-
-.center {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  margin-top: -50px;
-  margin-left: -100px;
-}
-
-.right {
-  float: right;
-}
-
-.left {
-  float: left;
-}
-
-.fixed {
-  position: fixed;
-}
-
-.top {
-  top: 0;
-}
-
-.bottom { bottom: 0 }
-
-.fill { height: 100vh; width: 100wh }
-
-.hide {
-  opacity: 0;
-  transition: opacity 0.25s linear;
-}
-
-.show {
-  opacity: 1;
-  transition: opacity 0.25s linear;
-}
-
-.slide-in {
-  animation: slide-in 0.1s forwards;
-  -webkit-animation: slide-in 0.1s forwards;
-}
-
-.slide-out {
-  animation: slide-out 0.1s forwards;
-  -webkit-animation: slide-out 0.1s forwards;
-}
-
-@keyframes slide-in {
-  100% {
-    transform: translateX(0%);
-  }
-}
-
-@-webkit-keyframes slide-in {
-  100% {
-    -webkit-transform: translateX(0%);
-  }
-}
-
-@keyframes slide-out {
-  0% {
-    transform: translateX(0%);
-  }
-
-  100% {
-    transform: translateX(-100%);
-  }
-}
-
-@-webkit-keyframes slide-out {
-  0% {
-    -webkit-transform: translateX(0%);
-  }
-
-  100% {
-    -webkit-transform: translateX(-100%);
-  }
-}
-
-a {
-  text-decoration: none;
-}
-
-.shadow {
-  box-shadow: 6px 6px 6px #dbdbdb;
-}
-
-.cursor {
-  cursor: default;
-}
-
-.margins {
-  margin: var(--margins, 15px);
-}
-
-.padding {
-  padding: var(--padding, 15px);
-}
-
-.rem {
-  font-size: var(--rem, 2rem);
-}
-
-.faded {
-  opacity: 0.5;
-}
-
-.fade {
-  opacity: 1;
-  transition: opacity 0.25s ease-in-out;
-  -moz-transition: opacity 0.25s ease-in-out;
-  -webkit-transition: opacity 0.25s ease-in-out;
-}
-
-.fade:hover {
-  opacity: 0.5;
-}
-
-.unfade {
-  opacity: 0.5;
-  transition: opacity 0.25s ease-in-out;
-  -moz-transition: opacity 0.25s ease-in-out;
-  -webkit-transition: opacity 0.25s ease-in-out;
-}
-
-.unfade:hover {
-  opacity: 1;
-}
-
-.rounded {
-  -moz-border-radius: 10px;
-  -webkit-border-radius: 10px;
-  border-radius: 10px;
-  -khtml-border-radius: 10px;
-}
-
-.round {
-  vertical-align: middle;
-  width: 50px;
-  height: 50px;
-  border-radius: 50%;
-}
-
-/** html elements **/
-
-canvas {
-  position: fixed;
-  top: 0;
-  left: 0;
-}
-
-ul {
-  list-style-type: none;
-  border: 20px;
-  padding: 20px;
-  width: 50%;
-}
-
-li {
-  list-style-type: none;
-  border: 10px;
-  padding: 10px;
-}
-
-li:hover {
-  background-color: rgb(243, 241, 241);
-  cursor: pointer;
-}
-
-.opacity1 {
-  opacity: .1
-}
-
-.opacity2 {
-  opacity: .2
-}
-
-.opacity3 {
-  opacity: .3
-}
-
-.opacity4 {
-  opacity: .4
-}
-
-.opacity5 {
-  opacity: .5
-}
-
-.opacity6 {
-  opacity: .6
-}
-
-.opacity7 {
-  opacity: .7
-}
-
-.opacity8 {
-  opacity: .8
-}
-
-.opacity9 {
-  opacity: .9
-}
-
-.bg-red {
-  background-color: red;
-}
-
-.bg-blue {
-  background-color: blue;
-}
-
-.bg-yellow {
-  background-color: yellow;
-}
-
-.bg-green {
-  background-color: green;
+html {
+  max-width: 70ch;
+  /* larger spacing on larger screens, very small spacing on tiny screens */
+  padding: calc(1vmin + .5rem);
+  /* shorthand for margin-left/margin-right */
+  margin-inline: auto;
+  /* fluid sizing: https://frontaid.io/blog/fluid-typography-2d-css-locks-clamp/ */
+  font-size: clamp(1em, 0.909em + 0.45vmin, 1.25em);
+  /* use system font stack: https://developer.mozilla.org/en-US/docs/Web/CSS/font-family */
+  font-family: system-ui
+}
+
+/* increase line-height for everything except headings */
+body :not(:is(h1, h2, h3, h4, h5, h6)) {
+  line-height: 1.75;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 3em 0 1em;
+}
+
+p,
+ul,
+ol {
+  margin-bottom: 2em;
+  color: #1d1d1d;
+}
+
+body,
+section {
+  display: grid;
+  margin: 0;
+  grid-template-columns: var(--cols, 1fr 4fr 1fr);
+  grid-template-rows: var(--rows, 1fr 9fr 1fr);
+}
+
+* {
+  grid-column: span var(--span, 1);
+  grid-row: span var(--span-rows, 1);
+}
+
+.flex {
+  display: flex;
+}
+
+/** positioning ***/
+
+.center {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  margin-top: -50px;
+  margin-left: -100px;
+}
+
+.right {
+  float: right;
+}
+
+.left {
+  float: left;
+}
+
+.fixed {
+  position: fixed;
+}
+
+.top {
+  top: 0;
+}
+
+.bottom {
+  bottom: 0
+}
+
+.fill {
+  height: 100vh;
+  width: 100wh
+}
+
+.hide {
+  opacity: 0;
+  transition: opacity 0.25s linear;
+}
+
+.show {
+  opacity: 1;
+  transition: opacity 0.25s linear;
+}
+
+.slide-in {
+  animation: slide-in 0.1s forwards;
+  -webkit-animation: slide-in 0.1s forwards;
+}
+
+.slide-out {
+  animation: slide-out 0.1s forwards;
+  -webkit-animation: slide-out 0.1s forwards;
+}
+
+@keyframes slide-in {
+  100% {
+    transform: translateX(0%);
+  }
+}
+
+@-webkit-keyframes slide-in {
+  100% {
+    -webkit-transform: translateX(0%);
+  }
+}
+
+@keyframes slide-out {
+  0% {
+    transform: translateX(0%);
+  }
+
+  100% {
+    transform: translateX(-100%);
+  }
+}
+
+@-webkit-keyframes slide-out {
+  0% {
+    -webkit-transform: translateX(0%);
+  }
+
+  100% {
+    -webkit-transform: translateX(-100%);
+  }
+}
+
+a {
+  text-decoration: none;
+}
+
+.shadow {
+  box-shadow: 6px 6px 6px #dbdbdb;
+}
+
+.cursor {
+  cursor: default;
+}
+
+.margins {
+  margin: var(--margins, 15px);
+}
+
+.padding {
+  padding: var(--padding, 15px);
+}
+
+.rem {
+  font-size: var(--rem, 2rem);
+}
+
+.faded {
+  opacity: 0.5;
+}
+
+.fade {
+  opacity: 1;
+  transition: opacity 0.25s ease-in-out;
+  -moz-transition: opacity 0.25s ease-in-out;
+  -webkit-transition: opacity 0.25s ease-in-out;
+}
+
+.fade:hover {
+  opacity: 0.5;
+}
+
+.unfade {
+  opacity: 0.5;
+  transition: opacity 0.25s ease-in-out;
+  -moz-transition: opacity 0.25s ease-in-out;
+  -webkit-transition: opacity 0.25s ease-in-out;
+}
+
+.unfade:hover {
+  opacity: 1;
+}
+
+.rounded {
+  -moz-border-radius: 10px;
+  -webkit-border-radius: 10px;
+  border-radius: 10px;
+  -khtml-border-radius: 10px;
+}
+
+.round {
+  vertical-align: middle;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+}
+
+/** html elements **/
+
+canvas {
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+
+ul {
+  list-style-type: none;
+  border: 20px;
+  padding: 20px;
+  width: 50%;
+}
+
+li {
+  list-style-type: none;
+  border: 10px;
+  padding: 10px;
+}
+
+li:hover {
+  background-color: rgb(243, 241, 241);
+  cursor: pointer;
+}
+
+.opacity1 {
+  opacity: .1
+}
+
+.opacity2 {
+  opacity: .2
+}
+
+.opacity3 {
+  opacity: .3
+}
+
+.opacity4 {
+  opacity: .4
+}
+
+.opacity5 {
+  opacity: .5
+}
+
+.opacity6 {
+  opacity: .6
+}
+
+.opacity7 {
+  opacity: .7
+}
+
+.opacity8 {
+  opacity: .8
+}
+
+.opacity9 {
+  opacity: .9
+}
+
+.bg-red {
+  background-color: red;
+}
+
+.bg-blue {
+  background-color: blue;
+}
+
+.bg-yellow {
+  background-color: yellow;
+}
+
+.bg-green {
+  background-color: green;
 }

package/enigmatic.js

@@ -1,157 +1,172 @@
-/*
-    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)
-  })
-}
-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))
-w.ready = async () => {
-  return new Promise((r) => {
-    if (document.readyState === 'complete') r(true)
-    document.onreadystatechange = () => {
-      if (document.readyState === 'complete') r()
-    }
-  })
-}
-
-/////// 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)
-        }
-        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])
-}
-
-/////// State, data, and reactivity
-
-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.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.stream = async (url, key) => {
-  const ev = new EventSource(url)
-  ev.onmessage = (ev) => {
-    const data = JSON.parse(ev.data)
-    state(key, data)
-    return data
-  }
-}
-
-/////// Startup
-
-w.start = async () => {
-  await w.ready();
-  [...$$('div')].map((e) => {
-    e.pr = {};
-    [...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 (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)))
-      }
-    }
-  })
-}
-
-w.enigmatic = { version: '2022-07-24 0.11.0' }
-Object.assign(window, w);
-
-(async () => {
-  await w.start()
-})()
+const w = {}, d = document
+w.enigmatic = { version: '2022-09-24 0.11.2' }
+
+/////// 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)
+  })
+}
+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))
+w.ready = async () => {
+  return new Promise((r) => {
+    if (document.readyState === 'complete') r(true)
+    document.onreadystatechange = () => {
+      if (document.readyState === 'complete') r()
+    }
+  })
+}
+
+// Template a string, using {$key}, {_key_}, {_val_}
+// ie.. {key1: {name: 'value'}, key2: {name: 'value2'}} OR [{name: 'value'}, {name: 'value2'}]
+w.flatten = (obj, text) => {
+  let htmls = ''
+  if (obj instanceof Array) obj = { ...obj }
+  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])
+    }
+    htmls += html
+  }
+  return htmls
+}
+
+/////// 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)
+        }
+        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])
+}
+
+/////// 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]
+    }
+  }
+)
+
+w.save = (obj, name) => {
+  return localStorage.setItem(name, JSON.stringify(obj))
+}
+
+w.load = (name) => {
+  return localStorage.getItem(name)
+}
+
+w.get = async (url, options = {}, transform, key) => {
+  let data = await (await fetch(`https://${url}`, options)).json()
+  if (transform) data = transform(data)
+  if (key) w.state[key] = data
+  return data
+}
+
+w.stream = async (url, key) => {
+  const ev = new EventSource(url)
+  ev.onmessage = (ev) => {
+    const data = JSON.parse(ev.data)
+    if (key) w.state[key] = data
+    return data
+  }
+}
+
+/////// Startup
+w.start = async () => {
+  await w.ready();
+  [...$$('*')].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) {
+      console.log(`processing ${e}`)
+      if (e.innerHTML) {
+        e.template = e.innerHTML
+        if(e.innerHTML.match('{')) {
+          e.innerHTML = ''
+        }
+      }
+      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
+      }
+    }
+  })
+}
+
+Object.assign(window, w);
+
+(async () => {
+  await w.start()
+})()

package/package.json

@@ -1,5 +1,12 @@
-{
-    "name": "enigmatic",
-    "main": "enigmatic.js",
-    "version": "0.11.0"
-}
+{
+    "name": "enigmatic",
+    "main": "enigmatic.js",
+    "version": "0.11.2",
+    "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-components.html

@@ -0,0 +1,16 @@
+<script>
+customElements.define('is-online', class IsOnline extends HTMLElement {
+    connectedCallback() {
+        this.setAttribute('rel', 'icon')
+        this.setAttribute('href', "data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎯</text></svg>")
+    }
+})
+</script>
+
+<link rel="stylesheet" href="enigmatic.css">
+<body style="--cols:1fr 6fr 1fr; --rows:1fr 10fr">
+<my-e>hey</my-e>
+<my-e>hey</my-e>
+<my-e>hey</my-e>
+<my-e>hey</my-e>
+<my-e>hey</my-e>

package/test-flatten.html

@@ -0,0 +1,25 @@
+<script src='enigmatic.js'></script>
+
+<div id='templ' data="akey">
+    {$key}: {_key_} : {_val_}, name = {name}, value = {value} <br>
+</div>
+
+<button onclick='window.testone()'>Test one</button>
+<button onclick='window.testtwo()'>Test two</button>
+
+<script type="module">
+    window.testone = () => {
+        const testone = [
+            { name: 'myname', value: 'myvalue' },
+            { name: 'myname2', value: 'myvalue2' },
+        ]
+        state.akey = testone
+    }
+    window.testtwo = () => {
+        const testt = {
+            "k1": { name: 'myname3', value: 'myvalue3' },
+            "k2": { name: 'myname4', value: 'myvalue4' },
+        }
+        state.akey = testt
+    }
+</script>

package/test-js.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-layout.html

@@ -0,0 +1,13 @@
+<link rel=stylesheet href=enigmatic.css>
+
+<body style="--cols:1fr 1fr 1fr 10fr; --rows:1fr 10fr">
+    <div class="bg-red" style="--span:2">Hello</div>
+    <div class="bg-green"></div>
+    <div class="bg-yellow"></div>
+    <div class="bg-blue"></div>
+    <div class="bg-red"></div>
+    <div class="bg-green"></div>
+    <div class="bg-yellow"></div>
+    <div class="bg-blue"></div>
+    <div class="bg-red"></div>
+</body>

package/test-schema.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+
+<script src=enigmatic.js></script>
+<script type=module src=https://unpkg.com/e-schema@0.0.2/module.mjs></script>
+
+<script type="module">
+  const es = new eSchema({MyType: {message: 'string'}})
+  es.validate({message: 'you are'}, 'MyType')
+  save(es.schema, 'myschema')
+  console.log(load('myschema'))
+  console.log(load('nothing'))
+</script>

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,19 +0,0 @@
-<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>