enigmatic 0.10.0 → 0.10.3

package/{components.mjs → components.js}

@@ -1,17 +1,18 @@
-window.components = {
-    'hello-world': {
-        style: 'color: red',
-        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-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')
-    }
-}
-
+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')
+    }
+}
+
 console.log('components.mjs', components)

package/enigmatic.css

@@ -1,247 +1,247 @@
-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;
+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;
 }

package/enigmatic.js

@@ -1,157 +1,150 @@
-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();
-    };
-  });
-};
-w.child = (type, html) => {
-  const e = d.createElement(type);
-  e.innerHTML = html;
-  d.body.appendChild(e);
-  return e;
-};
-
-// Custom element
-
-w.element = (s, style, onMount = () => { }) => {
-  let [name, html] = s[0].split(', ');
-  customElements.define(
-    name,
-    class extends HTMLElement {
-      connectedCallback(props) {
-        const om = onMount;
-        om();
-        if (style) this.innerHTML += `<style>${name} { ${style} }</style>`;
-        this.innerHTML += html;
-      }
-    }
-  );
-};
-
-// Data
-
-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];
-    },
-  }
-);
-
-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.streamJSON = 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));
-
-// 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);
-    if (e.pr.data) {
-      if (this.innerHTML.contains('{')) {
-        this.template = this.innerHTML.replaceAll('{', '${');
-        this.innerHTML = '';
-      }
-      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' };
-Object.assign(window, w);
-
-(async() => {
-  await w.start()
-  if(w.main) w.main()
+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();
+    };
+  });
+};
+w.child = (type = 'div', html = '') => {
+  const e = d.createElement(type);
+  e.innerHTML = html;
+  d.body.appendChild(e);
+  return e;
+};
+
+// Custom element
+
+w.element = (name, {onMount = x=>x, beforeData = x=>x, style, template = ''}) => {
+  customElements.define(name, class extends HTMLElement {
+    async connectedCallback(props) {
+        await onMount()
+        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(o)));
+    }
+  })
+}
+
+if (window.components) {
+  for (let name in window.components)
+    w.element(name, window.components[name])
+}
+
+// Data
+
+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);
+      }
+      obj[prop] = value;
+    },
+    get: (obj, prop, receiver) => {
+      if (prop == '_state') 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.streamJSON = 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));
+
+// 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) {
+      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-03-05 0.10.2' };
+Object.assign(window, w);
+
+(async() => {
+  await w.start()
+  if(window.main) window.main()
 })();

package/index.html

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

package/package.json

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