instaserve 0.0.44 → 0.1.0

package/README.md

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

package/bun/http.js

@@ -0,0 +1,45 @@
+import {existsSync} from 'fs'
+import routes from '../routes.mjs'
+console.log(routes)
+
+class s {
+    end(s) {
+        this.resp = s
+    }
+}
+
+Bun.serve({
+    port: 3000,
+    async fetch(r) {
+
+        let url = new URL(r.url).pathname
+        const data = await r.text()
+
+        const ru = {method: r.method, url: url}
+        const rs = new s()
+        
+        const midware = Object.keys(routes)
+            .filter(k => k.startsWith('_'))
+            .find(k => routes[k](ru, rs, data))
+
+        // Routes.mjs
+        if(routes[url]) {
+            const f = routes[url](ru, rs, data)
+            return new Response(rs.resp)
+        }
+        
+        // Static
+        const fn = (url == '/') ? `public/index.html` : `public/${url}`
+        if (existsSync(fn))
+          return new Response(Bun.file(fn))
+
+        return new Response('', { status: 404 })
+
+    },
+    error(e) {
+        console.error(e)
+        return new Response('', { status: 404 })
+    }
+})
+
+console.log('Running on 3000')

package/deno/server.js

@@ -0,0 +1,35 @@
+import { existsSync } from "https://deno.land/std/fs/mod.ts"; 
+import routes from '../routes.mjs'
+console.log(routes)
+
+class s {
+  end(s) {
+    this.resp = s
+  }
+}
+
+Deno.serve(async (r) => {
+
+  const data = await r.text()
+  let url = new URL(r.url).pathname
+  const ru = { method: r.method, url: url }
+  const rs = new s()
+
+  const midware = Object.keys(routes)
+    .filter((k) => k.startsWith('_'))
+    .find((k) => routes[k](ru, rs, data))
+
+  // Routes.mjs
+  if (routes[url]) {
+    const f = routes[url](ru, rs, data)
+    return new Response(rs.resp)
+  }
+
+  // Static
+  const fn = (url == '/') ? `public/index.html` : `public/${url}`
+  if (existsSync(fn))
+    return new Response(await Deno.readTextFile(fn), { headers: { 'Content-Type': 'text/html' } })
+
+  return new Response('', { status: 404 })
+
+}, {port: 3000})

package/package.json

@@ -1,10 +1,12 @@
-{
-  "name": "instaserve",
-  "version": "0.0.44",
-  "description": "Instant web stack",
-  "main": "server.mjs",
-  "bin": "./server.mjs",
-  "scripts": {
-    "start": "node server.mjs"
-  }
-}
+{
+  "name": "instaserve",
+  "version": "0.1.0",
+  "description": "Instant web stack",
+  "main": "server.mjs",
+  "bin": "./server.mjs",
+  "scripts": {
+    "start": "node server.mjs",
+    "deno": "deno run --unstable --allow-net --allow-read deno/server.js",
+    "bun": "bun run bun/http.js"
+  }
+}

package/public/enigmatic.js

@@ -1,150 +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()
+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

@@ -1,7 +1,12 @@
-<!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>
+<!DOCTYPE html>
+<script src="enigmatic.js"></script>
+
+<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>
+<script>
+  document.write(enigmatic.version)
+</script>

package/public/sw.js

@@ -1,18 +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
-  })
+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

@@ -1,5 +1,5 @@
 export default {
-        _debug: ({method, url}, s) => !console.log(method, url),
-        _example: (r, s) => console.log('returning a falsy value (above) will stop the chain'),
-        '/api': (r, s) => s.end('an example api response')
+        _debug: ({method, url}, s, data) => !console.log(method, url, data),
+        _example: (r, s, data) => console.log('returning a falsy value (above) will stop the chain'),
+        '/api': (r, s, data) => s.end('an example api response')
   }

package/server.mjs

@@ -1,48 +1,48 @@
-#!/usr/bin/env node
-
-import http from 'node:http'
-import { pathToFileURL } from 'node:url'
-import { resolve } from 'node:path'
-import fs from 'node:fs'
-
-const routesfile = resolve('routes.mjs')
-
-if (!fs.existsSync(routesfile)) {
-  fs.writeFileSync(routesfile, `export default {
-        _debug: ({method, url}, s) => !console.log(method, url),
-        _example: (r, s) => console.log('returning a falsy value (above) will stop the chain'),
-        '/api': (r, s) => s.end('an example api response')
-  }`)
-}
-
-const routesurl = pathToFileURL(routesfile).href
-console.log(routesfile, routesurl)
-const routes = (await import(routesurl)).default
-
-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 {}
-      });
-      const midware = Object.keys(routes)
-        .filter((k) => k.startsWith('_'))
-        .find((k) => routes[k](r, s, data));
-      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'))
-      }
-      if (routes[r.url]) return routes[r.url](r, s, data)
-      else s.writeHead(404).end()
-    } catch (e) {
-      console.log(e)
-      s.writeHead(404).end()
-    }
-  })
-  .listen(3000, (x) => console.log('listening on 3000'))
+#!/usr/bin/env node
+
+import http from 'node:http'
+import { pathToFileURL } from 'node:url'
+import { resolve } from 'node:path'
+import fs from 'node:fs'
+
+const routesfile = resolve('routes.mjs')
+
+if (!fs.existsSync(routesfile)) {
+  fs.writeFileSync(routesfile, `export default {
+        _debug: ({method, url}, s) => !console.log(method, url),
+        _example: (r, s) => console.log('returning a falsy value (above) will stop the chain'),
+        '/api': (r, s) => s.end('an example api response')
+  }`)
+}
+
+const routesurl = pathToFileURL(routesfile).href
+console.log(routesfile, routesurl)
+const routes = (await import(routesurl)).default
+
+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 {}
+      });
+      const midware = Object.keys(routes)
+        .filter((k) => k.startsWith('_'))
+        .find((k) => routes[k](r, s, data));
+      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'))
+      }
+      if (routes[r.url]) return routes[r.url](r, s, data)
+      else s.writeHead(404).end()
+    } catch (e) {
+      console.log(e)
+      s.writeHead(404).end()
+    }
+  })
+  .listen(3000, (x) => console.log('listening on 3000'))