enigmatic 0.11.5 → 0.21.2

package/README.md

@@ -0,0 +1,81 @@
+**Enigmatic.js - Documentation**
+
+*Note: The code provided is a self-contained JavaScript file that defines a library named Enigmatic.js. The documentation below explains the functions and features available in the library.*
+
+**1. Introduction**
+
+Enigmatic.js is a JavaScript library designed to provide utility functions and tools to simplify common tasks such as loading resources, working with custom elements, managing state, and handling data reactivity. The library aims to enhance web development productivity and offers the following features:
+
+- Resource Loading: Load JavaScript and CSS files dynamically.
+- Custom Element: Define custom web components with ease.
+- State Management: Easily manage and react to changes in application state.
+- Data Handling: Fetch data from remote sources and stream real-time data.
+
+**2. Helpers**
+
+Enigmatic.js provides several helper functions to simplify common tasks:
+
+- `w.$(selector)`: Returns the first element matching the given CSS selector within the document.
+- `w.$$(selector)`: Returns a list of all elements matching the given CSS selector within the document.
+- `w.loadJS(src)`: Loads a JavaScript file dynamically by creating a script element in the document's head.
+- `w.loadCSS(src)`: Loads a CSS file dynamically by creating a link element in the document's head.
+- `w.wait(ms)`: Returns a Promise that resolves after the specified number of milliseconds.
+- `w.ready()`: Returns a Promise that resolves when the DOM is ready and the document has completed loading.
+
+**3. Template Flattening**
+
+Enigmatic.js provides the `w.flatten(obj, text)` function to template a string using placeholders. The placeholders can be in the form of `{$key}`, `{_key_}`, or `{_val_}`. The function recursively replaces the placeholders with the corresponding keys and values from the provided object.
+
+**4. Custom Element**
+
+Enigmatic.js simplifies the process of defining custom elements with the `w.element(name, options)` function. It takes the following parameters:
+
+- `name` (string): The name of the custom element.
+- `options` (object): An object containing configuration options for the custom element.
+  - `onMount`: A function to be executed when the custom element is connected to the DOM.
+  - `beforeData`: A function to preprocess the data before rendering the template.
+  - `style`: A string containing CSS rules specific to the custom element.
+  - `template`: A string representing the HTML template for the custom element.
+
+**5. State, Data, and Reactivity**
+
+Enigmatic.js introduces reactive state management with the `w.state` object. It is implemented using a Proxy to reactively update DOM elements when state changes. DOM elements with `data` attributes that match state keys will be automatically updated when the corresponding state changes.
+
+- `w.state`: An object acting as reactive state storage. Changes to this object trigger updates in associated DOM elements with matching `data` attributes.
+
+- `w.save(obj, name)`: Saves a JavaScript object to the local storage under the specified name.
+- `w.load(name)`: Loads a JavaScript object from local storage using the given name.
+- `w.get(url, options, transform, key)`: Fetches data from a remote URL using the `fetch` API. Transforms the fetched data using the optional `transform` function and updates the state with the specified `key`.
+- `w.stream(url, key)`: Sets up an EventSource to stream real-time data from the specified URL and updates the state with the specified `key`.
+
+**6. Startup**
+
+Enigmatic.js provides the `w.start()` function to kickstart the library and process elements on the page with special attributes like `fetch`, `immediate`, and `stream`.
+
+**7. Global Object**
+
+The code creates a global object `w` that holds all the utility functions and state management features.
+
+**8. Usage Example**
+
+To use Enigmatic.js, include the script in your HTML file and call its functions as needed. For example:
+
+```html
+<script src="path/to/enigmatic.js"></script>
+<script>
+  // Perform custom element registration
+  w.element('custom-element', {
+    template: '<div>{_key_}: {_val_}</div>',
+  });
+
+  // Initialize Enigmatic.js
+  (async () => {
+    await w.start();
+    w.state.exampleData = { key1: 'value1', key2: 'value2' };
+  })();
+</script>
+```
+
+**9. Support**
+
+For bug reports, feature requests, or general inquiries, please visit the GitHub repository of Enigmatic.js.

package/authn.mjs

@@ -0,0 +1,123 @@
+ArrayBuffer.from = (string) => Uint8Array.from(string.split('').map(e => e.charCodeAt(0))).buffer
+
+const webauthn = async () => {
+    const op = {}
+    op.attestation = 'direct'
+    op.authenticatorSelection = {
+        authenticatorAttachment: 'platform',
+        requireResidentKey: false,
+        userVerification: 'discouraged'
+    }
+    op.challenge = ArrayBuffer.from('challenge')
+    op.pubKeyCredParams = []
+    op.rp = { id: location.hostname, name: location.hostname }
+    op.timeout = 60000,
+        op.user = { name: 'cb', displayName: 'cb', id: ArrayBuffer.from('cb') }
+
+    return {
+        async makeCredential() {
+            return await navigator.credentials.create({ publicKey: op })
+        },
+        async getAssertion() {
+            return await navigator.credentials.get({ publicKey: op })
+        }
+    }
+}
+
+const w = await webauthn()
+const credential = await w.makeCredential()
+const decodedClientData = JSON.parse(new TextDecoder('utf-8').decode(credential.response.clientDataJSON))
+console.log(decodedClientData)
+// decode credential.response.attestationObject
+
+//
+ // w.getAssertion()
+//
+
+/*
+const credential = await navigator.credentials.create({
+    publicKey: {
+        challenge: Uint8Array.from(
+            'xxxxxx', c => c.charCodeAt(0)),
+        rp: {
+            name: "Test",
+            id: "localhost",
+        },
+        user: {
+            id: Uint8Array.from(
+                "UZSL85T9AFC", c => c.charCodeAt(0)),
+            name: "lee@webauthn.guide",
+            displayName: "Lee",
+        },
+        pubKeyCredParams: [{ alg: -7, type: "public-key" }],
+        authenticatorSelection: {
+            authenticatorAttachment: "cross-platform",
+        },
+        timeout: 60000,
+        attestation: "direct"
+    }
+})
+
+console.log(credential)
+
+// Auth
+const publicKeyCredentialRequestOptions = {
+    challenge: Uint8Array.from(
+        randomStringFromServer, c => c.charCodeAt(0)),
+    allowCredentials: [{
+        id: Uint8Array.from(
+            credentialId, c => c.charCodeAt(0)),
+        type: 'public-key',
+        transports: ['usb', 'ble', 'nfc'],
+    }],
+    timeout: 60000,
+}
+
+const assertion = await navigator.credentials.get({
+    publicKey: publicKeyCredentialRequestOptions
+})
+
+
+ArrayBuffer.from = (string) => Uint8Array.from(string.split('').map(e => e.charCodeAt(0))).buffer
+
+const webauthn = async () => {
+    //if(!await PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable())
+    //    return false
+    const op = {}
+    op.attestation = 'direct'
+    op.authenticatorSelection = {
+        authenticatorAttachment: 'platform',
+        requireResidentKey: false,
+        userVerification: 'discouraged'
+    }
+    op.challenge = ArrayBuffer.from('challenge')
+    op.pubKeyCredParams = [{ alg: -7, type: 'public-key' }]
+    op.rp = { id: 'localhost', name: 'localhost' }
+    op.timeout = 60000,
+        op.user = { name: 'cb', displayName: 'cb', id: ArrayBuffer.from('cb') }
+
+    return {
+        async makeCredential() {
+            const cred = await navigator.credentials.create({ publicKey: op })
+            return cred
+        },
+        async getAssertion() {
+            const cred = await navigator.credentials.get({ publicKey: op })
+            return cred
+        }
+    }
+}
+
+const w = await webauthn()
+w.makeCredential().then(e => console.log(e))
+//w.getAssertion().then(e => console.log(e))
+
+/*
+send to server
+{
+            credential: {type: 'FIDO', id: attestation.id},
+            clientData: attestation.signature.clientData,
+            authnrData: attestation.signature.authnrData,
+            signature: attestation.signature.signature
+        }
+        */

package/enigmatic.css

@@ -275,4 +275,12 @@ li:hover {
 
 .bg-green {
   background-color: green;
+}
+
+.bg-black {
+  background-color: black;
+}
+
+.white {
+  color: white;
 }

package/enigmatic.js

@@ -1,7 +1,9 @@
 const w = {}, d = document
-w.enigmatic = { version: '2022-09-24 0.11.2' }
+w.enigmatic = { version: '2023-07-29 0.21.2' }
 
-/////// Helpers
+window.onerror = (err, l, n) => {
+  document.write(`<h2 style="border:8px solid Tomato;">${[l, 'line: ' + n, err].join('<br>')}</h2>`)
+}
 
 w.$ = d.querySelector.bind(d)
 w.$$ = d.querySelectorAll.bind(d)
@@ -14,6 +16,7 @@ w.loadJS = (src) => {
     d.head.appendChild(s)
   })
 }
+
 w.loadCSS = (src) => {
   return new Promise((r, j) => {
     const s = document.createElement('link')
@@ -23,7 +26,9 @@ w.loadCSS = (src) => {
     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)
@@ -33,16 +38,31 @@ w.ready = async () => {
   })
 }
 
-// Template a string, using {$key}, {_key_}, {_val_}
-// ie.. {key1: {name: 'value'}, key2: {name: 'value2'}} OR [{name: 'value'}, {name: 'value2'}]
+w.flattenMap = (obj, text) => {
+  let template = ''
+  if (text.match(/\$key|\$val/i)) {
+    for (let k in obj) {
+      template += text.replaceAll('{$key}', k).replaceAll('{$val}', obj[k])
+    }
+    return template
+  }
+  for (let k in obj) {
+    text = text.replaceAll(`{${k}}`, obj[k])
+  }
+  return text
+}
+
 w.flatten = (obj, text) => {
+  if (!(obj instanceof Array) && typeof Object.values(obj)[0] === 'string') {
+    return w.flattenMap(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]) {
       const val = typeof obj[k] === 'object' ? obj[k][j] : obj[k]
-      html = html.replaceAll('{_key_}', j).replaceAll('{_val_}', val)
+      html = html.replaceAll('{_key_}', j).replaceAll('{$val}', val)
       html = html.replaceAll(`{${j}}`, val)
     }
     htmls += html
@@ -50,7 +70,6 @@ w.flatten = (obj, text) => {
   return htmls
 }
 
-/////// Custom element
 w.element = (
   name,
   { onMount = x => x, beforeData = (x) => x, style, template = '' }
@@ -81,10 +100,9 @@ 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)
+    console.log('state change:', prop, value)
     if (this[prop] === value) {
       return true
     }
@@ -101,17 +119,13 @@ w.state = new Proxy({}, {
 }
 )
 
-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)
+  console.log(`fetching ${url}`)
+  let data = await (await fetch(url, options)).json()
+  if (transform) {
+    console.log('transforming ' + data)
+    data = transform(data)
+  }
   if (key) w.state[key] = data
   return data
 }
@@ -125,38 +139,36 @@ w.stream = async (url, key) => {
   }
 }
 
-/////// 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) {
+    if (e.attr.fetch) {
       e.fetch = async () => {
-        return w.get(e.attr?.fetch, {}, w[e.attr?.transform], e.attr.data)
+        return w.get(e.attr.fetch, {}, null, e.attr.data)
       }
-    }
-    if (e.hasAttribute('immediate')) {
-      e.fetch()
+      if (!e.hasAttribute('defer'))
+        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}`)
+      console.log(`reactive ${e} ${dta}`)
       if (!e.set) {
         if (e.innerHTML) {
           e.template = e.innerHTML
-          if (e.innerHTML.match('{')) {
+          if (e.innerHTML.match('{') && !e.attr.preserve) {
             e.innerHTML = ''
           }
         }
         e.set = (o) => {
-          e.innerHTML = w.flatten(o, e.template)
+          e.innerHTML = w.flatten(o, e.template) || o
         }
       }
-      if (e.attr?.value) {
+      if (e.attr.value) {
         let o = e.attr.value
         try { o = JSON.parse(o) } catch (e) { }
         w.state[dta] = o

package/index.html

@@ -0,0 +1,33 @@
+<script src=components.js></script>
+<script src=enigmatic.js></script>
+<link rel=stylesheet href=enigmatic.css>
+
+<body style="--cols:3fr 10fr 3fr; --rows:3fr 11fr 2fr">
+
+    <div class="bg-white"></div>
+    <div class="bg-white">
+        <img height='62' style='filter:invert(50%)' 
+          src='https://unpkg.com/simple-icons@v7/icons/apple.svg'>
+
+    </div>
+    <div class="bg-white"></div>
+
+    <div class="bg-white"></div>
+    <section class="bg-white" style="--cols: 1fr 1fr 1fr; --rows: 1fr 1fr 1fr">
+        <div class="bg-green"></div>
+        <div class="bg-white"><hello-world></hello-world></div>
+        <div class="bg-white"></div>
+        <div class="bg-white"></div>
+        <div class="bg-white"></div>
+        <div class="bg-white"></div>
+        <div class="bg-white"></div>
+        <div class="bg-white"></div>
+        <div class="bg-green"></div>
+    </section>
+    <div class="bg-white"></div>
+
+    <div class="bg-yellow"></div>
+    <div class="bg-yellow"></div>
+    <div class="bg-yellow"></div>
+
+</body>

package/package.json

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

package/tests/test-element-classic.html

@@ -0,0 +1,14 @@
+<script src='../enigmatic.js'></script>
+
+<script type="module">
+
+    customElements.define('classic-syntax', class CS extends HTMLElement {
+        set(data) {
+            this.innerHTML = flatten(data, this.innerHTML)
+        }
+    })
+    state.mykey = {message: 'somedata'}
+
+</script>
+
+<classic-syntax data="mykey">{message}</classic-syntax>

package/tests/test-error.html

@@ -0,0 +1,5 @@
+<script src='../enigmatic.js'></script>
+
+<script>
+    not a keyword
+</script>

package/tests/test-fetch.html

@@ -0,0 +1,26 @@
+<script src='../enigmatic.js'></script>
+
+<!-- HTML declarative -->
+<div data='users_declare' fetch='toydb-687z3zxxqk0r.runkit.sh/'>{test_message}</div>
+
+<!-- Not immediate -->
+<div id='f' data='users_declare2' fetch='toydb-687z3zxxqk0r.runkit.sh/' defer>Delayed: {test_message}</div>
+<button onclick='f.fetch()'>Fetch</button>
+
+<!-- Transform results -->
+<script>
+    get('randomuser.me/api', null, x=>x.results, 'users')
+</script>
+<div data="users">
+    <div>{gender} {picture}</div>
+</div>
+
+<!-- Component -->
+<script>
+    element('my-c', {
+        onmount: e=>e.style.border='1px solid black',
+        template: 'is: {gender}', 
+        style: 'color:red'})
+</script>
+
+<my-c data='users_component'></my-c>

package/tests/test-flatten.html

@@ -0,0 +1,38 @@
+<script src='../enigmatic.js'></script>
+<link rel=stylesheet href='../enigmatic.css'>
+
+<body style='--rows: 1fr 1fr 1fr 1fr 10fr; --cols: 1fr 10fr 1fr'>
+    <h1 style='--span: 3'>Text templating (Flatten)</h1>
+
+    <div data="testobj" style='--span: 4' preserve='true'>
+        {k1} {k2}
+    </div>
+
+    <div data="testobjkv" style='--span: 4' preserve='true'>
+        {$key} {$val}
+    </div>
+
+    <div data="testarray" style='--span: 4' preserve='true'>
+        {$key}: {name}={value}
+    </div>
+
+    <div data="testobjobj" style='--span: 4' preserve='true'>
+        {$key}: {name}={value}
+    </div>
+
+    <div></div>
+
+    <section style='--cols: 1fr 1fr 1fr 1fr'>
+        <button onclick='state.testobj={"k1": "val1", "k2": "val2"}'>{k1: 'val1', k2: 'val2'}</button>
+        <button onclick='state.testobjkv={"k1": "val1", "k2": "val2"}'>{k1: 'val1', k2: 'val2'}</button>
+        <button onclick='state.testarray=[{ name: "myname", value: "myvalue" },{ name: "myname2", value: "myvalue2" }]'>[
+        { name: 'myname', value: 'myvalue' },
+        { name: 'myname2', value: 'myvalue2' },
+        ]</button>
+        <button onclick='state.testobjobj={ "k1": {name: "myname3", value: "myvalue3"}, "k2": {name: "myname4", value: "myvalue4"} }'>{
+        "k1": { name: 'myname3', value: 'myvalue3' },
+        "k2": { name: 'myname4', value: 'myvalue4' },
+        }</button>
+    </section>
+
+</body>

package/tests/test-icons.html

@@ -0,0 +1,3 @@
+<img height='62'
+    style='filter: invert(64%) sepia(73%) saturate(2067%) hue-rotate(156deg) brightness(87%) contrast(103%)'
+    src='https://unpkg.com/simple-icons@v7/icons/apple.svg'>

package/tests/test-layout.html

@@ -0,0 +1,32 @@
+<script src=components.js></script>
+<script src=enigmatic.js></script>
+<link rel=stylesheet href=enigmatic.css>
+
+<body style="--cols:3fr 10fr 3fr; --rows:3fr 11fr 2fr">
+
+    <div class="bg-white"></div>
+    <div class="bg-white">
+        <img height='62' style='filter:invert(50%)' src='https://unpkg.com/simple-icons@v7/icons/apple.svg'>
+
+    </div>
+    <div class="bg-white"></div>
+
+    <div class="bg-white"></div>
+    <section class="bg-white" style="--cols: 1fr 1fr 1fr; --rows: 1fr 1fr 1fr">
+        <div class="bg-green"></div>
+        <div class="bg-white"><hello-world></hello-world></div>
+        <div class="bg-white"></div>
+        <div class="bg-white"></div>
+        <div class="bg-white"></div>
+        <div class="bg-white"></div>
+        <div class="bg-white"></div>
+        <div class="bg-white"></div>
+        <div class="bg-green"></div>
+    </section>
+    <div class="bg-white"></div>
+
+    <div class="bg-yellow"></div>
+    <div class="bg-yellow"></div>
+    <div class="bg-yellow"></div>
+
+</body>

package/{test-schema.html → tests/test-schema.html}

@@ -1,6 +1,4 @@
-<!DOCTYPE html>
-
-<script src=enigmatic.js></script>
+<script src=../enigmatic.js></script>
 <script type=module src=https://unpkg.com/e-schema@0.0.2/module.mjs></script>
 
 <script type="module">

package/tests/test-state.html

@@ -0,0 +1,4 @@
+<script src='../enigmatic.js'></script>
+
+<div data="mykey" value="1"></div>
+<button onclick="state.mykey++">Increment</button>

package/theme.css

@@ -0,0 +1,9 @@
+:root {
+    --bg-color: #1d1d1d;
+    --color-primary: #f0dda3;
+    --color-secondary: #ff9800;
+    --color-tertiary: #f44336;
+    --color-quaternary: #9c27b0;
+    --color-quinary: #2196f3;
+    --color-senary: #009688;
+}

package/server.mjs

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

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

@@ -1,33 +0,0 @@
-<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>
-<button onclick='window.testthree()'>Test three</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
-    }
-    window.testthree = () => {
-        const testt = {
-            "k1": 'val1',
-            "k2": 'val2',
-        }
-        state.akey = testt
-    }
-</script>

package/test-js.html

@@ -1,24 +0,0 @@
-<!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

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