instaserve 0.0.30 → 0.0.41

package/README.md

@@ -0,0 +1,2 @@
+# instaserve
+Instant web stack

package/{db.json → data/db.json}

@@ -1,11 +1,11 @@
-[
-  [
-    "user:admin",
-    {
-      "type": "user",
-      "name": "admin",
-      "pass": "01b613da484bee91c3f3806b52a6f40fd61ade874b5ffc0f62a2091cce38158b",
-      "id": "user:admin"
-    }
-  ]
+[
+  [
+    "user:admin",
+    {
+      "type": "user",
+      "name": "admin",
+      "pass": "01b613da484bee91c3f3806b52a6f40fd61ade874b5ffc0f62a2091cce38158b",
+      "id": "user:admin"
+    }
+  ]
 ]

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "instaserve",
-  "version": "0.0.30",
-  "description": "",
-  "main": "index.mjs",
-  "bin": "./index.mjs"
-}
+  "version": "0.0.41",
+  "description": "Instant web stack",
+  "main": "server.mjs",
+  "bin": "./server.mjs"
+}

package/public/enigmatic.js

@@ -0,0 +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 = '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/public/index.html

@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<script>
+  // navigator.serviceWorker.register('sw.js')
+</script>
+<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css'>
+
+<div class='bg-yellow-200'>hello</div>

package/public/sw.js

@@ -0,0 +1,18 @@
+self.addEventListener('fetch', event => {
+  const cache = await caches.open('e')
+  const req = event.request
+
+  event.respondWith(async () => {
+    if(!req.url.match(/\.js$|\.css$/))
+      return fetch(req)
+
+    const response = await cache.match(req)
+    if(response) return response
+    response = await fetch(req)
+
+    if(response.status == 200)
+      cache.put(req, response)
+
+    return response
+  })
+})

package/routes.mjs

@@ -0,0 +1,19 @@
+/* 
+routes.mjs
+Unders
+*/
+
+import FS from 'node:fs'
+export default {
+    _debug: ({ r, s, db }) => console.log(r.url, r.method),
+    _static: ({r, s}) => {
+        if(r.url == '/') r.url = '/index.html'
+        const fn = `./public${r.url.replace('..', '')}`
+        if(FS.existsSync(fn)) {
+            if (fn.match(/sw\.js/)) s.writeHead(200, { 'Content-Type': 'application/javascript' })
+            return !s.end(FS.readFileSync(fn, 'utf-8'))
+        }
+    },
+
+    '/api': ({s})=>s.end('example of an api response'),
+}

package/server.mjs

@@ -0,0 +1,37 @@
+#!/usr/bin/env node
+
+import http from 'node:http';
+import { pathToFileURL } from 'node:url';
+import { resolve } from 'node:path';
+
+const routesfile = resolve('routes.mjs');
+const routesurl = pathToFileURL(routesfile).href;
+console.log(routesfile, routesurl);
+
+const routes = (await import(routesurl)).default;
+const VastDB = (await import(`./vastdb.mjs`)).default;
+const db = new VastDB(routes);
+console.log(db.filename, routes);
+
+http
+  .createServer(async (r, s) => {
+    try {
+      let data = '';
+      r.on('data', (s) => (data += s.toString()));
+      r.on('end', (x) => {
+        try {
+          data = JSON.parse(data);
+        } catch {}
+      });
+      s.endJSON = (o) => s.end(JSON.stringify(o));
+      const midware = Object.keys(routes)
+        .filter((k) => k.startsWith('_'))
+        .find((k) => routes[k]({ r, s, data, db }));
+      if (routes[r.url]) return routes[r.url]({ r, s, data, db });
+      else s.writeHead(404).end();
+    } catch (e) {
+      console.log(e);
+      s.writeHead(404).end();
+    }
+  })
+  .listen(3000, (x) => console.log('listening on 3000'));

package/vastdb.mjs

@@ -2,9 +2,8 @@ import fs from 'node:fs'
 export default class VastDB extends Map {
     constructor(v) {
         super();
-        this.filename = `${process.cwd()}/db.json`;
+        this.filename = `${process.cwd()}/data/db.json`;
         this.views = v
-        this.triggers = []
         if (!fs.existsSync(this.filename)) {
             this.set({
                 type: 'user',
@@ -23,18 +22,18 @@ export default class VastDB extends Map {
     query(q = () => false) {
         return [...this].filter(q).map(([k, v]) => v)
     }
-    getView(name) {
-        if(!this.views[name]) throw `view ${name} does not exist`
-        return this.query(this.views[name])
+    getView(name, param) {
+        const res = [...this].filter(this.views[name](param));
+        return res.map(([k, v]) => v);
     }
     set(arr) {
         if (!arr.push) arr = [arr];
         for (const o of arr) {
             if (!o.name || !o.type) return false;
             if (!o.id) o.id = o.type + ':' + o.name;
-            this.triggers.map(t => o = t(o))
         }
         arr.map((o) => super.set(o.id, o));
+        if(this.event) this.event(arr)
         this.save();
     }
     save() {

package/index.mjs

@@ -1,64 +0,0 @@
-#!/usr/bin/env node
-import http from 'node:http'
-import fs from 'node:fs'
-import {pathToFileURL} from 'node:url'
-import { resolve } from 'node:path'
-
-const routesfile = resolve('routes.mjs')
-const routesurl = pathToFileURL(routesfile).href
-const indexfile = resolve('index.html')
-
-console.log(routesfile, routesurl)
-
-if (!fs.existsSync(routesfile)) {
-    fs.writeFileSync(routesfile, `import fs from 'node:fs'
-export default {
-    _debug: ({ r, s, db }) => console.log(r.url, r.method),
-    '/': e => e.s.end(fs.readFileSync('index.html', 'utf-8')),
-    '/post': ({ e, body }) => db.set(body),
-    '/tables': ({s}) => s.endJSON(db.getView('tables')),
-    'tables': name => ([k, v]) => k.match(name + ':')
-}`)
-}
-if (!fs.existsSync(indexfile)) {
-    fs.writeFileSync(indexfile, `<!DOCTYPE html>
-<link rel="icon" href="data:,">
-<script>navigator.serviceWorker.register('sw.js')</script>
-<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css'>
-<script src='https://unpkg.com/enigmatic/enigmatic.js'></script>
-
-<div class='bg-yellow-200'>hello</div>`)
-}
-
-const routes = (await import(routesurl)).default
-routes['/sw.js'] = e => {
-    e.s.writeHead(201, { 'Content-Type': 'application/javascript' })
-    e.s.end('self.addEventListener("fetch",e=>{e.respondWith(caches.open("e").then(function(t){return t.match(e.request).then(function(n){return n||fetch(e.request).then(function(n){return e.request.url.match(/\.js$|\.css$/)&&t.put(e.request,n.clone()),n})})}))});')
-}
-const VastDB = (await import(`./vastdb.mjs`)).default
-const db = new VastDB(routes)
-console.log(db.filename, routes)
-
-http
-    .createServer(async (r, s) => {
-        try {
-            let data = '';
-            r.on('data', (s) => (data += s.toString()));
-            r.on('end', (x) => {
-                try {
-                    data = JSON.parse(data);
-                } catch { }
-            });
-            s.endJSON = o => s.end(JSON.stringify(o))
-            const midware = Object.keys(routes)
-                .filter((k) => k.startsWith('_'))
-                .map((k) => routes[k]({ r, s, data, db }));
-            if (midware.includes(true)) return;
-            if (routes[r.url]) return routes[r.url]({ r, s, data, db });
-            else s.writeHead(404).end()
-        } catch (e) {
-            console.log(e);
-            s.writeHead(404).end();
-        }
-    })
-    .listen(3000, (x) => console.log('listening on 3000'));

package/test.mjs

@@ -1,22 +0,0 @@
-import Vast from './vastdb.mjs'
-const db = new Vast()
-
-db.views = {
-    tables: ([k, v]) => k.match('user')
-}
-
-db.triggers = {
-    test_trigger: record => record.value = 100
-}
-
-db.workflows = {
-    'testwf' : {
-        start: db => 'wait_two_sec',
-        wait_two_sec: db => new Promise(r => setTimeout(r('end'), 2000)),
-        end: db => console.log('done')
-    }
-}
-
-//console.log(db.getView('tables'))
-db.set({name: 'testrec', value: 0})
-console.log(db)