saloe 0.0.1

package/src/actions.js

@@ -0,0 +1,284 @@
+import { html } from './html'
+
+const LISTENER_SCRIPT = html`
+    <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 })
+                        
+                        if (srcElement?.removeAttribute) srcElement.removeAttribute('on-' + event)
+                    }
+                })
+            }
+
+            fireListeners()
+
+            window.onload = () => {
+                setTimeout(() => {
+                    document?.body?.click()
+                }, 2_500)
+            }
+        })()
+    </script>
+`
+
+const SW_REGISTER_SCRIPT = html`
+    <script defer>
+        (async () => {
+            if (!navigator.serviceWorker) return
+
+            navigator.serviceWorker.register('/sw.worker.js', { scope: '/', type: 'module' })
+
+            let refreshing
+            // check to see if there is a current active service worker
+            const oldSw = (await navigator.serviceWorker.getRegistration())?.active?.state
+            navigator.serviceWorker.addEventListener('controllerchange', async () => {
+                if (refreshing) return
+                // when the controllerchange event has fired, we get the new service worker
+                const newSw = (await navigator.serviceWorker.getRegistration())?.active?.state
+                
+                // if there was already an old activated service worker, and a new activating service worker, do notify update
+                if (oldSw === 'activated' && newSw === 'activating') {
+                    refreshing = true
+                    // notifyUpdate()
+                    location.reload()
+                }
+            })
+        })()
+    </script> 
+`
+
+export {
+    LISTENER_SCRIPT,
+    SW_REGISTER_SCRIPT,
+}

package/src/cloudflare-kv.js

@@ -0,0 +1,36 @@
+const getKV = ({ env, kv }) => env[kv]
+
+const getKVResponse = async ({ env, kv, key }) => {
+    const result = await getFromKV({ env, kv, key })
+    if (result?.err) return result
+
+    const response = new Response(result?.data)
+    return { response }
+}
+
+const getFromKV = async ({ env, kv, key }) => {
+    try {
+        const data = await getKV({ env, kv }).get(key)
+        return { data }
+    } catch (err) {
+        return { err }
+    }
+}
+
+const putInKV = async ({ env, kv, key, data }) => {
+    try {
+        const result = await getKV({ env, kv }).put(key, data)
+        return result
+    } catch (err) {
+        return { err }
+    }
+}
+
+export {
+    getFromKV,
+    putInKV,
+
+    getKVResponse,
+
+    getKV,
+}

package/src/cloudflare-worker.js

@@ -0,0 +1,23 @@
+import { getAssetFromKV } from '@cloudflare/kv-asset-handler'
+
+
+const getStaticResponse = async ({ request, waitUntil, manifestJSON, env }) => {
+    try {
+        const ASSET_MANIFEST = JSON.parse(manifestJSON ?? {})
+        const response = await getAssetFromKV({
+            request,
+            waitUntil
+        }, {
+            ASSET_NAMESPACE: env.__STATIC_CONTENT,
+            ASSET_MANIFEST,
+        })
+
+        return { response }
+    } catch (err) {
+        return { err }
+    }
+}
+
+export {
+    getStaticResponse,
+}

package/src/cookie.js

@@ -0,0 +1,22 @@
+const setCookie = ({ key, value }) => {
+    return cookieStore?.set(key, value)
+}
+
+const getCookie = ({ key }) => {
+    return cookieStore?.get(key)
+}
+
+const getAllCookies = () => {
+    return cookieStore?.getAll()
+}
+
+const removeCookie = ({ key }) => {
+    return cookieStore?.delete(key)
+}
+
+export {
+    setCookie,
+    getCookie,
+    getAllCookies,
+    removeCookie,
+}

package/src/html.js

@@ -0,0 +1,99 @@
+import { stream as streamAsWorker } from './worker'
+import { addRoute, removeRoute } from './router'
+import { getScope, getEnv } from './util'
+
+
+const html = (s, ...args) => {
+    return s?.map((ss, i) => `${ss}${args?.at(i) ?? ''}`)?.join('')
+}
+
+const stream = ({ head, body, scripts, env, status, args }) => {
+    const headers = new Headers()
+    headers.append('Content-Type', 'text/html;charset=UTF-8')
+
+    const callbacks = [
+        () => html`
+            <!DOCTYPE html>
+            <html lang="${args?.lang ?? 'en'}">
+            <head>
+        `,
+        head,
+        () => html`
+            </head>
+            <body 
+                data-scope="${getScope({ env })}" 
+                data-env="${getEnv({ env })}" 
+                ${args?.isPublic ?? ''}
+                ${args?.isLoading ?? ''}
+            >
+        `,
+        body,
+        scripts ?? (() => ''),
+        () => html`
+            </body>
+            </html>
+        `
+    ]
+
+    return streamAsWorker({ callbacks, headers, status })
+}
+
+const awaitHtml = async ({ pending, success, error }) => {
+    const id = Math.floor(Math.random() * 1_000_000_000)
+
+    const pendingId = `pending_${id}`
+    const pendingRoutePathname = `/~/components/${pendingId}`
+
+    const getPage = async () => {
+        const headers = {
+            'Content-Type': 'text/html;charset=utf-8',
+            'Transfer-Encoding': 'chunked',
+        }
+        
+        const streamResult = streamAsWorker({ 
+            callbacks: [
+                async () => html`
+                    ${
+                        await success()
+                            .then((template) => template)
+                            .catch((err) => {
+                                console.error(err?.stack)
+                                return error ? error({ id, err }) : ''
+                            })
+                    }
+                `
+            ], 
+            headers, 
+        })
+
+        removeRoute({ pathname: pendingRoutePathname })
+
+        return streamResult
+    }
+
+    addRoute({
+        pathname: pendingRoutePathname,
+        route: { getPage }
+    })
+
+    return html`
+        ${await pending({ id: pendingId })}
+        <script
+            data-script-to-load="await-html_script-${id}" 
+            type="text/script-to-load"
+        >
+            (async () => {
+                const pendingEl = document?.querySelector('[data-await-pending-template="${pendingId}"]')
+                const response = await fetch('${pendingRoutePathname}')
+                const templateString = await response.text()
+                pendingEl.outerHTML = templateString
+            })()
+        </script>
+    `
+}
+
+export {
+    html,
+    stream,
+    awaitHtml,
+}

package/src/router.js

@@ -0,0 +1,61 @@
+import { getURLPatern } from './urlpattern'
+import { fetch as fetchAsWorker } from './worker'
+
+
+const router = new Map()
+
+const getRouter = () => router
+const getRoute = ({ pathname }) => router.get(pathname)
+const addRoute = ({ pathname, route }) => router.set(pathname, route)
+const removeRoute = ({ pathname }) => router.delete(pathname)
+
+const findPatternFromUrl = ({ url }) => {
+    const patternPathname = [...new Set(getRouter()?.keys())]
+        .find((patternPathname) => {
+            const pattern = getURLPatern({ pathname: patternPathname })
+            return pattern.test(url.href)
+        })
+
+    return patternPathname ? getURLPatern({ pathname: patternPathname }) : null
+}
+
+const getRedirectResponse = ({ origin, pathname, isRedirectableCallback }) => {
+    if (origin !== self?.origin) return
+    const isRedirectable = isRedirectableCallback({ pathname })
+    const response = isRedirectable ? Response.redirect(pathname.slice(0, -1), 301) : null
+    return { response }
+}
+
+const getNotFoundResponse = async ({ request }) => {
+    const status = 404
+    const notFoundRoute = getRoute({ pathname: `/${status}` })
+    const response = notFoundRoute ? (await notFoundRoute({ request, status }))?.response : new Response('404', { status })
+    return { response }
+}
+
+const getForbiddenResponse = ({ origin, request, isForbiddenCallback }) => {  
+    if (origin !== self?.origin) return  
+    const isForbidden = isForbiddenCallback({ request })
+    if (!isForbidden) return
+    return { response: new Response(`${request?.url} is forbidden`, { status: 503 }) }
+}
+
+const getServerOnlyResponse = ({ origin, request, isServerOnlyCallback }) => {
+    if (origin !== self?.origin) return
+    const isServerOnly = isServerOnlyCallback({ request })
+    if (!isServerOnly) return
+    return fetchAsWorker({ request })
+}
+
+export {
+    getRouter,
+    getRoute,
+    addRoute,
+    removeRoute,
+
+    findPatternFromUrl,
+    getRedirectResponse,
+    getNotFoundResponse,
+    getForbiddenResponse,
+    getServerOnlyResponse,
+}

package/src/urlpattern.js

@@ -0,0 +1,11 @@
+import * as URLPatternPolyfill from 'urlpattern-polyfill'
+
+
+if (self?.URLPattern) self.URLPattern = URLPatternPolyfill.URLPattern
+
+const getURLPatern = ({ pathname }) => new self.URLPattern({ pathname })
+
+
+export {
+    getURLPatern,
+}

package/src/util.js

@@ -0,0 +1,44 @@
+const Scope = {
+    Cloudflare: 'cloudflare-worker',
+    ServiceWorker: 'service-worker',
+    Window: 'window',
+}
+
+const Environment = {
+    Production: 'prod',
+    Development: 'dev',
+    Qa: 'qa',
+}
+
+const isCloudflareWorker = ({ env }) => env?.IS_CLOUDFLARE_WORKER
+const isServiceWorker = ({ env }) => env?.IS_SERVICE_WORKER
+const isWindow = () => typeof window === 'object'
+
+const getScope = ({ env }) => {
+    if (isCloudflareWorker({ env })) return Scope.Cloudflare
+    if (isServiceWorker({ env })) return Scope.ServiceWorker
+    if (isWindow()) return Scope.Window
+}
+
+const getEnv = ({ env } = {}) => {
+    if (isCloudflareWorker({ env }) || isServiceWorker({ env })) return env.ENV
+    if (isWindow()) return document?.body?.getAttribute('data-env')
+} 
+
+const isProdEnv = ({ env }) => getEnv({ env }) === Environment.Production
+const isDevEnv = ({ env }) => getEnv({ env }) === Environment.Development
+const isQaEnv = ({ env }) => getEnv({ env }) === Environment.Qa
+
+
+export {
+    getScope,
+    getEnv,
+
+    isProdEnv,
+    isDevEnv,
+    isQaEnv,
+
+    isCloudflareWorker,
+    isWindow,
+    isServiceWorker,
+}