enigmatic 0.11.1 → 0.11.2

package/components.js

@@ -13,4 +13,4 @@ window.components = {
         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,8 +1,34 @@
-body {
-  font-family: var(--font-primary, -apple-system, BlinkMacSystemFont, sans-serif);
-  height: 100vh;
-  background-color: var(--bg-color, #fff);
-  padding: .5rem;
+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,
@@ -48,9 +74,14 @@ section {
   top: 0;
 }
 
-.bottom { bottom: 0 }
+.bottom {
+  bottom: 0
+}
 
-.fill { height: 100vh; width: 100wh }
+.fill {
+  height: 100vh;
+  width: 100wh
+}
 
 .hide {
   opacity: 0;

package/enigmatic.js

@@ -1,26 +1,5 @@
-/*
-    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
+const w = {}, d = document
+w.enigmatic = { version: '2022-09-24 0.11.2' }
 
 /////// Helpers
 
@@ -54,8 +33,23 @@ w.ready = async () => {
   })
 }
 
-/////// Custom element
+// 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 = '' }
@@ -90,7 +84,6 @@ if (window.components) {
 }
 
 /////// State, data, and reactivity
-
 w.state = new Proxy({}, {
     set: (obj, prop, value) => {
       console.log(prop, value)
@@ -110,15 +103,18 @@ w.state = new Proxy({}, {
   }
 )
 
-w.get = async (
-  url,
-  options = null,
-  transform = null,
-  key = 'temp'
-) => {
+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)
-  state[key] = data
+  if (key) w.state[key] = data
   return data
 }
 
@@ -126,13 +122,12 @@ w.stream = async (url, key) => {
   const ev = new EventSource(url)
   ev.onmessage = (ev) => {
     const data = JSON.parse(ev.data)
-    w.state[key] = data
+    if (key) w.state[key] = data
     return data
   }
 }
 
 /////// Startup
-
 w.start = async () => {
   await w.ready();
   [...$$('*')].map(e => {
@@ -151,25 +146,18 @@ w.start = async () => {
     }
     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 = ''
+      console.log(`processing ${e}`)
+      if (e.innerHTML) {
+        e.template = e.innerHTML
+        if(e.innerHTML.match('{')) {
+          e.innerHTML = ''
+        }
       }
       e.set = (o) => {
-        e.innerHTML = ''
-        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)
-        })
+        e.innerHTML = w.flatten(o, e.template)
       }
       if (e.attr?.value) {
-        let o = e.attr.value
+         let o = e.attr.value
          try { o = JSON.parse(o) } catch(e) {} 
          w.state[dta] = o
       }
@@ -177,7 +165,6 @@ w.start = async () => {
   })
 }
 
-w.enigmatic = { version: '2022-09-24 0.11.1' }
 Object.assign(window, w);
 
 (async () => {

package/package.json

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

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-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/.vscode/launch.json

@@ -1,15 +0,0 @@
-{
-    // 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}"
-        }
-    ]
-}