saloe 0.0.1

package/README.md

@@ -0,0 +1,19 @@
+# salo
+
+`salo` is a toolkit that makes building reactive web apps easy, with `0kb of initial JavaScript` and lightning-fast rendering.
+
+It works seamlessly with Cloudflare Workers and Service Workers, and can also be used in Node or other server-side JavaScript environments.
+
+**Note:** `salo` is still under development, and version 1.0 is not ready yet. Expect changes and improvements as we work towards the initial release.
+
+## Packages
+
+- [`@jaimytacovega/salo/router`](./src/router.js) - Manage web requests using URLPattern for route matching.
+  
+- [`@jaimytacovega/salo/html`](./src/html.js) - Stream HTML templates and render temporary templates while waiting for asynchronous functions to finish processing the final template.
+
+- [`@jaimytacovega/salo/actions`](./src/actions.js) - Add reactivity to HTML nodes with 0kb of initial JavaScript.
+
+## Coming Soon
+
+- [`@jaimytacovega/salo/offline`](./src/offline.js) Manage browser cache resources to handle HTML template requests.

package/demos/cloudflare-worker-actions/package.json

@@ -0,0 +1,29 @@
+{
+    "name": "cloudflare-worker-server",
+    "version": "1.0.0",
+    "description": "",
+    "main": "server.js",
+    "scripts": {
+        "watch:dev": "ENV=dev vite build --watch",
+        "watch:qa": "ENV=qa vite build --watch",
+        "watch:prod": "ENV=prod vite build --watch",
+        "build:dev": "ENV=dev vite build",
+        "build:qa": "ENV=qa vite build",
+        "build:prod": "ENV=prod vite build",
+        "local:dev": "wrangler dev --env=dev",
+        "local:qa": "wrangler dev --env=qa",
+        "local:prod": "wrangler dev --env=prod",
+        "deploy:dev": "npm run build:dev && wrangler deploy --env=dev",
+        "deploy:qa": "npm run build:qa && wrangler deploy --env=qa",
+        "deploy:prod": "npm run build:prod && wrangler deploy --env=prod",
+        "build-worker:dev": "wrangler deploy --dry-run --outdir=dist-worker"
+    },
+    "keywords": [],
+    "author": "",
+    "license": "ISC",
+    "devDependencies": {
+        "@cloudflare/kv-asset-handler": "^0.3.4",
+        "@jaimytacovega/salo": "^0.0.28",
+        "vite": "^5.4.2"
+    }
+}

package/demos/cloudflare-worker-actions/public/input.js

@@ -0,0 +1,5 @@
+const input = ({ e, srcElement }) => {
+    console.log('--- value =', srcElement?.value)
+}
+
+export { input }

package/demos/cloudflare-worker-actions/public/load.js

@@ -0,0 +1,5 @@
+const load = ({ e, srcElement }) => {
+    console.log('--- load')
+}
+
+export { load }

package/demos/cloudflare-worker-actions/public/submit.js

@@ -0,0 +1,6 @@
+const submit = ({ e, srcElement }) => {
+    e.preventDefault()
+    console.log('--- submit 2')
+}
+
+export { submit }

package/demos/cloudflare-worker-actions/server.js

@@ -0,0 +1,93 @@
+import { findPatternFromUrl, getRedirectResponse, getForbiddenResponse, getRoute, getNotFoundResponse, getServerOnlyResponse } from '@jaimytacovega/salo/router'
+import { getStaticResponse } from '@jaimytacovega/salo/cloudflare-worker'
+import { addRoute } from '@jaimytacovega/salo/router'
+import { html, stream } from '@jaimytacovega/salo/html'
+import { LISTENER_SCRIPT } from '@jaimytacovega/salo/actions'
+
+import manifestJSON from '__STATIC_CONTENT_MANIFEST'
+
+
+const isRedirectableCallback = ({ pathname }) => {
+    return pathname !== '/' && pathname.endsWith('/')
+}
+
+const isForbiddenCallback = ({ request }) => {
+    const forbiddenURLs = []   
+    return forbiddenURLs.find((filename) => request?.url?.endsWith(filename))    
+}
+
+const isServerOnlyCallback = ({ request }) => {
+    const serverOnlyURLs = []
+    return serverOnlyURLs?.find((filename) => request?.url?.endsWith(filename))
+}
+
+
+(() => {
+    addRoute({
+        pathname: '/',
+        route: ({ request, env }) => {
+            return stream({
+                head: () => html`
+                    <meta charset="UTF-8">
+                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+                    <title>Cloudflare Worker Server</title>
+                `,
+                body: () => html`
+                    
+                    <form 
+                        on-submit="submit"
+                    >
+                        <h1
+                            on-load="load"
+                        >
+                            Hello world!
+                        </h1>
+                        <input 
+                            type="text"
+                            on-input="input"
+                        />
+                        <button type="submit">Submit!</button>     
+                    </form>
+                `,
+                scripts: () => html`
+                    ${LISTENER_SCRIPT}
+                    <script>
+                        console.log('Hello world!')
+                    </script>
+                `,
+                env,
+            })
+        }
+    })
+
+})()
+
+const handleFetch = async ({ request, env, ctx }) => {
+    const url = new URL(request.url)
+    const { origin, pathname } = url
+
+    const pattern = findPatternFromUrl({ url })
+
+    const redirectResult = getRedirectResponse({ origin, pathname, isRedirectableCallback })
+    if (redirectResult?.response) return redirectResult.response
+
+    const forbiddenResult = getForbiddenResponse({ origin, request, isForbiddenCallback })
+    if (forbiddenResult?.response) return forbiddenResult.response
+
+    const serverOnlyResult = getServerOnlyResponse({ origin, request, isServerOnlyCallback })
+    if (serverOnlyResult?.response) return serverOnlyResult.response
+
+    const route = getRoute({ pathname: pattern?.pathname })
+    const routeResult = route ? await route({ request, pattern, env }) : null
+    if (routeResult?.response) return routeResult.response
+
+    const staticResult = await getStaticResponse({ request, waitUntil: ctx.waitUntil.bind(ctx), manifestJSON, env })
+    if (staticResult?.response) return staticResult?.response
+
+    const notFoundResult = await getNotFoundResponse({ request })
+    return notFoundResult?.response
+}
+
+export default {
+    fetch: (request, env, ctx) => handleFetch({ request, env, ctx })
+}

package/demos/cloudflare-worker-actions/vite.config.js

@@ -0,0 +1,25 @@
+import { defineConfig } from 'vite'
+
+
+export default defineConfig({
+    define: {
+        __ENV__: `'${process.env.ENV}'`,
+        __BUILD_TIME__: `'${new Date().toISOString()}'`,
+        __APP_NAME__: `'cloudflare-worker-server'`,
+    },
+    plugins: [],
+    build: {
+        outDir: './dist',
+        manifest: true,
+        emptyOutDir: true,
+        minify: false,
+        rollupOptions: {
+            input: {},
+            output: {
+                entryFileNames: `[name].js`,
+                chunkFileNames: `[name].js`,
+                assetFileNames: `[name].[ext]`,
+            },
+        },
+    },
+})

package/demos/cloudflare-worker-actions/wrangler.toml

@@ -0,0 +1,35 @@
+name = "cloudflare-worker-actions"
+main = "server.js"
+compatibility_date = "2022-11-01"
+compatibility_flags = ["transformstream_enable_standard_constructor", "streams_enable_constructors"]
+minify = false
+#node_compat = true
+
+[site]
+bucket = "./public"
+
+[env]
+
+  [env.prod]
+  experimental-local = true
+
+    [env.prod.vars]
+    IS_CLOUDFLARE_WORKER = true
+    ENV = "prod"
+    APP_NAME = "cloudflare-worker-actions"
+
+  [env.qa]
+  experimental-local = true
+
+    [env.qa.vars]
+    IS_CLOUDFLARE_WORKER = true
+    ENV = "qa"
+    APP_NAME = "cloudflare-worker-actions"
+
+  [env.dev]  
+  experimental-local = true
+
+    [env.dev.vars]
+    IS_CLOUDFLARE_WORKER = true
+    ENV = "dev"
+    APP_NAME = "cloudflare-worker-actions"

package/demos/cloudflare-worker-server/package.json

@@ -0,0 +1,29 @@
+{
+    "name": "cloudflare-worker-server",
+    "version": "1.0.0",
+    "description": "",
+    "main": "server.js",
+    "scripts": {
+        "watch:dev": "ENV=dev vite build --watch",
+        "watch:qa": "ENV=qa vite build --watch",
+        "watch:prod": "ENV=prod vite build --watch",
+        "build:dev": "ENV=dev vite build",
+        "build:qa": "ENV=qa vite build",
+        "build:prod": "ENV=prod vite build",
+        "local:dev": "wrangler dev --env=dev",
+        "local:qa": "wrangler dev --env=qa",
+        "local:prod": "wrangler dev --env=prod",
+        "deploy:dev": "npm run build:dev && wrangler deploy --env=dev",
+        "deploy:qa": "npm run build:qa && wrangler deploy --env=qa",
+        "deploy:prod": "npm run build:prod && wrangler deploy --env=prod",
+        "build-worker:dev": "wrangler deploy --dry-run --outdir=dist-worker"
+    },
+    "keywords": [],
+    "author": "",
+    "license": "ISC",
+    "devDependencies": {
+        "@cloudflare/kv-asset-handler": "^0.3.4",
+        "@jaimytacovega/salo": "^0.0.16",
+        "vite": "^5.4.2"
+    }
+}

package/demos/cloudflare-worker-server/server.js

@@ -0,0 +1,75 @@
+import { findPatternFromUrl, getRedirectResponse, getForbiddenResponse, getRoute, getNotFoundResponse, getServerOnlyResponse } from '@jaimytacovega/salo/router'
+import { getStaticResponse } from '@jaimytacovega/salo/cloudflare-worker'
+import { addRoute } from '@jaimytacovega/salo/router'
+import { html, stream } from '@jaimytacovega/salo/html'
+
+
+const isRedirectableCallback = ({ pathname }) => {
+    return pathname !== '/' && pathname.endsWith('/')
+}
+
+const isForbiddenCallback = ({ request }) => {
+    const forbiddenURLs = []   
+    return forbiddenURLs.find((filename) => request?.url?.endsWith(filename))    
+}
+
+const isServerOnlyCallback = ({ request }) => {
+    const serverOnlyURLs = []
+    return serverOnlyURLs?.find((filename) => request?.url?.endsWith(filename))
+}
+
+
+(() => {
+    addRoute({
+        pathname: '/',
+        route: ({ request, env }) => {
+            return stream({
+                head: () => html`
+                    <meta charset="UTF-8">
+                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+                    <title>Cloudflare Worker Server</title>
+                `,
+                body: () => html`
+                    <h1>Hello world!</h1>
+                `,
+                scripts: () => html`
+                    <script>
+                        console.log('Hello world!')
+                    </script>
+                `,
+                env,
+            })
+        }
+    })
+
+})()
+
+const handleFetch = async ({ request, env, ctx }) => {
+    const url = new URL(request.url)
+    const { origin, pathname } = url
+
+    const pattern = findPatternFromUrl({ url })
+
+    const redirectResult = getRedirectResponse({ origin, pathname, isRedirectableCallback })
+    if (redirectResult?.response) return redirectResult.response
+
+    const forbiddenResult = getForbiddenResponse({ origin, request, isForbiddenCallback })
+    if (forbiddenResult?.response) return forbiddenResult.response
+
+    const serverOnlyResult = getServerOnlyResponse({ origin, request, isServerOnlyCallback })
+    if (serverOnlyResult?.response) return serverOnlyResult.response
+
+    const route = getRoute({ pathname: pattern?.pathname })
+    const routeResult = route ? await route({ request, pattern, env }) : null
+    if (routeResult?.response) return routeResult.response
+
+    const staticResult = await getStaticResponse({ request, waitUntil: ctx.waitUntil.bind(ctx), env })
+    if (staticResult?.response) return staticResult?.response
+
+    const notFoundResult = await getNotFoundResponse({ request })
+    return notFoundResult?.response
+}
+
+export default {
+    fetch: (request, env, ctx) => handleFetch({ request, env, ctx })
+}

package/demos/cloudflare-worker-server/vite.config.js

@@ -0,0 +1,25 @@
+import { defineConfig } from 'vite'
+
+
+export default defineConfig({
+    define: {
+        __ENV__: `'${process.env.ENV}'`,
+        __BUILD_TIME__: `'${new Date().toISOString()}'`,
+        __APP_NAME__: `'cloudflare-worker-server'`,
+    },
+    plugins: [],
+    build: {
+        outDir: './dist',
+        manifest: true,
+        emptyOutDir: true,
+        minify: false,
+        rollupOptions: {
+            input: {},
+            output: {
+                entryFileNames: `[name].js`,
+                chunkFileNames: `[name].js`,
+                assetFileNames: `[name].[ext]`,
+            },
+        },
+    },
+})

package/demos/cloudflare-worker-server/wrangler.toml

@@ -0,0 +1,32 @@
+name = "cloudflare-worker-server"
+main = "server.js"
+compatibility_date = "2022-11-01"
+compatibility_flags = ["transformstream_enable_standard_constructor", "streams_enable_constructors"]
+minify = false
+#node_compat = true
+
+[env]
+
+  [env.prod]
+  experimental-local = true
+
+    [env.prod.vars]
+    IS_CLOUDFLARE_WORKER = true
+    ENV = "prod"
+    APP_NAME = "cloudflare-worker-server"
+
+  [env.qa]
+  experimental-local = true
+
+    [env.qa.vars]
+    IS_CLOUDFLARE_WORKER = true
+    ENV = "qa"
+    APP_NAME = "cloudflare-worker-server"
+
+  [env.dev]  
+  experimental-local = true
+
+    [env.dev.vars]
+    IS_CLOUDFLARE_WORKER = true
+    ENV = "dev"
+    APP_NAME = "cloudflare-worker-server"

package/dist/actions.cjs.js

@@ -0,0 +1,280 @@
+"use strict";
+var __freeze = Object.freeze;
+var __defProp = Object.defineProperty;
+var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", { value: __freeze(raw || cooked.slice()) }));
+var _a, _b;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const html = require("./html.cjs.js");
+const LISTENER_SCRIPT = html.html(_a || (_a = __template([`
+    <script defer>
+        (() => {
+            const EVENTS_PREVENT_DEFAULT_MANDATORY = [
+                'submit'
+            ]
+
+            const EVENTS_FIRE_DOCUMENT_BODY_LISTENERS = [
+                'mouseover',
+                'click',
+            ]
+
+            const EVENTS = [
+                'submit',
+                'input',
+                'blur',
+                'change',
+                'focus',
+                'invalid',
+            ]
+
+
+            const addListener = ({ srcElement, event, listeners }) => {
+                srcElement?.addEventListener(event, (e) => {
+                    executeListeners({ e, srcElement, listeners })
+                })
+            }
+
+            const executeListeners = ({ e, srcElement, listeners }) => {
+                listeners?.forEach((listener) => {
+                    if (listener) listener({ e, srcElement })
+                })
+            }
+
+            const getListenerFromScript = ({ script, event }) => {
+                if (!script) return null
+                if (script[event]) return script[event]
+                const prev = Object.keys(script)?.find((key) => script[key][event])
+                if (!prev) return null
+                return script[prev][event]
+            }
+
+            const fetchListeners = async ({ srcElement, event, e }) => {
+                if (!srcElement?.getAttribute) return
+
+                const scriptNames = srcElement?.getAttribute('on-' + event)
+                if (!scriptNames) return
+
+                if (scriptNames && EVENTS_PREVENT_DEFAULT_MANDATORY.includes(event)) e.preventDefault()
+
+                const scripts = await Promise.all(
+                    scriptNames?.split(',')?.map((scriptName) => {
+                        const scriptToImport = '/' + scriptName?.trim() + '.js'
+                        return import(scriptToImport)?.catch((err) => { })
+                    })
+                )
+
+                const listeners = scripts?.map((script) => getListenerFromScript({ script, event }))
+
+                return listeners
+
+                // if (['load', 'click', 'submit', 'input', 'change'].includes(event)) executeListeners({ e, srcElement, listeners })
+                // if (['focus', 'blur', 'invalid', 'click', 'submit', 'input', 'change'].includes(event)) addListener({ srcElement, event, listeners })
+
+                // srcElement?.removeAttribute('on-' + event)
+            }
+
+            const addScripts = () => {
+                const scriptsToLoad = [...document.querySelectorAll('script[data-script-to-load]')]
+                return Promise.all(
+                    scriptsToLoad?.map((scriptToLoad) => {
+                        const id = scriptToLoad?.getAttribute('data-script-to-load')
+                        scriptToLoad.removeAttribute('data-script-to-load')
+
+                        const attrs = scriptToLoad?.getAttributeNames()?.reduce((acc, attrName) => {
+                            const attrValue = scriptToLoad.getAttribute(attrName)
+                            if (attrValue !== 'text/script-to-load') acc[attrName] = attrValue
+                            return acc
+                        }, {})
+
+                        const content = scriptToLoad?.textContent
+
+                        scriptToLoad?.remove()
+
+                        return loadScript({ id, attrs, content }).catch((err) => {
+                            console.error(err)
+                        })
+                    })
+                )
+            }
+
+            const loadScript = ({ id, attrs, content }) => {
+                const script = document?.createElement('script')
+
+                Object.keys(attrs)?.forEach((attrKey) => script?.setAttribute(attrKey, attrs[attrKey]))
+                script.id = id
+
+                if (content) script?.insertAdjacentHTML('beforeend', content)
+
+                return new Promise((resolve, reject) => {
+                    if (!attrs.src) {
+                        resolve()
+                        document?.body?.insertAdjacentElement('beforeend', script)
+                        return
+                    }
+
+                    script.onload = script.onreadystatechange = function () {
+                        if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') {
+                            resolve()
+                            script.onload = script.onreadystatechange = null
+                        }
+                    }
+
+                    script.onerror = () => {
+                        console.error('script failed to load')
+                        reject(new Error('Failed to load script with src ' + script.src))
+                    }
+
+                    document?.body?.insertAdjacentElement('beforeend', script)
+                })
+            }
+
+            // load
+            const fireLoadListener = () => {
+                const event = 'load'
+                const srcElements = document?.querySelectorAll('[on-' + event + ']')
+
+                srcElements?.forEach(async (srcElement) => {
+                    const listeners = await fetchListeners({ srcElement, event, e: null })
+                    executeListeners({ e: null, srcElement, listeners })
+
+                    srcElement?.removeAttribute('on-' + event)
+                })
+            }
+
+            // invalid
+            const fireInvalidListener = () => {
+                const event = 'invalid'
+                const srcElements = document?.querySelectorAll('[on-' + event + ']')
+
+                srcElements?.forEach(async (srcElement) => {
+                    const listeners = await fetchListeners({ srcElement, event, e: null })
+                    addListener({ srcElement, event, listeners })
+                })
+            }
+
+            // blur
+            const fireBlurListener = () => {
+                const event = 'blur'
+                const srcElements = document?.querySelectorAll('[on-' + event + ']')
+
+                srcElements?.forEach(async (srcElement) => {
+                    const listeners = await fetchListeners({ srcElement, event, e: null })
+                    addListener({ srcElement, event, listeners })
+                })
+            }
+
+            // focus
+            const fireFocusListener = () => {
+                const event = 'focus'
+                const srcElements = document?.querySelectorAll('[on-' + event + ']')
+
+                srcElements?.forEach(async (srcElement) => {
+                    const listeners = await fetchListeners({ srcElement, event, e: null })
+                    addListener({ srcElement, event, listeners })
+                })
+            }
+
+            // observers
+            const fireObserverListeners = () => {
+                const srcElements = [...document.querySelectorAll('[on-observe]')]
+
+                const uniqueScriptNames = [...srcElements?.reduce((acc, srcElement) => {
+                    const attribute = srcElement?.getAttribute('on-observe')
+                    if (attribute === 'undefined') return acc
+
+                    const scriptNames = attribute?.split(',')
+                    scriptNames?.forEach((scriptName) => acc?.set(scriptName, 1))
+
+                    return acc
+                }, new Map())?.keys()]
+
+                uniqueScriptNames?.forEach(async (scriptName) => {
+                    const observedSrcElements = document.querySelectorAll('[on-observe*="' + scriptName + '"]')
+
+                    const script = await import('/' + scriptName?.trim() + '.js')?.catch((err) => { })
+                    const listener = getListenerFromScript({ script, event: 'observe' })
+                    if (!listener) return
+
+                    const observer = new IntersectionObserver((entries) => {
+                        entries.forEach((entry) => listener({ entry, observer }))
+                    })
+
+                    observedSrcElements?.forEach((observerSrcElement) => {
+                        observer.observe(observerSrcElement)
+
+                        const observerAttr = observerSrcElement?.getAttribute('on-observe')
+                        const updatedObserverAttr = observerAttr?.replaceAll(scriptName + ', ', '')?.replaceAll(', ' + scriptName, '')?.replaceAll(scriptName, '')
+
+                        if (updatedObserverAttr === '') observerSrcElement.removeAttribute('on-observe')
+                        else observerSrcElement.setAttribute('on-observe', updatedObserverAttr)
+                    })
+                })
+            }
+
+            const getSrcElement = ({ srcElement, event }) => {
+                if (!srcElement?.hasAttribute) return srcElement
+                const attribute = 'on-' + event
+                const hasScriptName = srcElement?.hasAttribute(attribute)
+                if (hasScriptName) return srcElement
+
+                const query = ':is(a, button, li)[' + attribute + ']'
+                const closestButton = srcElement?.closest(query)
+                if (closestButton) return closestButton
+
+                return srcElement
+            }
+
+            const fireListeners = () => {
+                EVENTS_FIRE_DOCUMENT_BODY_LISTENERS?.forEach((event) => {
+                    document.body['on' + event] = async (e) => {
+                        await addScripts()
+
+                        fireLoadListener()
+                        fireObserverListeners()
+                    }
+                })
+
+                EVENTS?.forEach((event) => {
+                    document.body['on' + event] = async (e) => {
+                        const srcElement = getSrcElement({ srcElement: e?.srcElement, event })
+                        const listeners = await fetchListeners({ srcElement, event, e })
+                        
+                        executeListeners({ e, srcElement, listeners })
+                        addListener({ srcElement, event, listeners })
+                        
+                        console.log('--- removeAttribute =', srcElement?.removeAttribute)
+                        if (srcElement?.removeAttribute) srcElement.removeAttribute('on-' + event)
+                    }
+                })
+
+                // ['mouseover', 'click', 'submit', 'input', 'blur', 'change']?.forEach((event) => {
+                //     document.body['on' + event] = async (e) => {
+                //         if (EVENTS_FIRE_DOCUMENT_BODY_LISTENERS.includes(event)) {
+                //             await addScripts()
+
+                //             fireLoadListener()
+                //             fireInvalidListener()
+                //             fireBlurListener()
+                //             fireFocusListener()
+
+                //             fireObserverListeners()
+                //         }
+
+                //         const srcElement = getSrcElement({ srcElement: e.srcElement, event })
+                //         fetchListeners({ srcElement, event, e })
+                //     }
+                // })
+            }
+
+            fireListeners()
+
+            window.onload = () => {
+                setTimeout(() => {
+                    document?.body?.click()
+                }, 2_500)
+            }
+        })()
+    <\/script>
+`])));
+const SW_REGISTER_SCRIPT = html.html(_b || (_b = __template(["\n    <script defer>\n        (async () => {\n            if (!navigator.serviceWorker) return\n\n            navigator.serviceWorker.register('/sw.worker.js', { scope: '/', type: 'module' })\n\n            let refreshing\n            // check to see if there is a current active service worker\n            const oldSw = (await navigator.serviceWorker.getRegistration())?.active?.state\n            navigator.serviceWorker.addEventListener('controllerchange', async () => {\n                if (refreshing) return\n                // when the controllerchange event has fired, we get the new service worker\n                const newSw = (await navigator.serviceWorker.getRegistration())?.active?.state\n                \n                // if there was already an old activated service worker, and a new activating service worker, do notify update\n                if (oldSw === 'activated' && newSw === 'activating') {\n                    refreshing = true\n                    // notifyUpdate()\n                    location.reload()\n                }\n            })\n        })()\n    <\/script> \n"])));
+exports.LISTENER_SCRIPT = LISTENER_SCRIPT;
+exports.SW_REGISTER_SCRIPT = SW_REGISTER_SCRIPT;