saloe 0.0.4 → 0.0.6

package/README.md

@@ -12,7 +12,7 @@ It works seamlessly with `Cloudflare Workers` and `Service Workers`, and can als
   
 - [`saloe/html`](./src/html.js) - Stream HTML templates and render temporary templates while waiting for asynchronous functions to finish processing the final template.
 
-- [`saloe/actions`](./src/actions.js) - Add reactivity to HTML nodes with 0kb of initial JavaScript.
+- [`saloe/listener`](./src/listener.js) - Add reactivity to HTML nodes with 0kb of initial JavaScript.
 
 ## Coming Soon
 

package/demos/demo-listener/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "demo-listener",
+  "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",
+    "saloe": "^0.0.4",
+    "vite": "^5.4.3"
+  }
+}

package/demos/demo-listener/public/input.js

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

package/demos/demo-listener/public/load.js

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

package/demos/demo-listener/public/submit.js

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

package/demos/demo-listener/server.js

@@ -0,0 +1,94 @@
+import { findPatternFromUrl, getRedirectResponse, getForbiddenResponse, getRoute, getNotFoundResponse, getServerOnlyResponse } from 'saloe/router'
+import { getStaticResponse } from 'saloe/cloudflare-worker'
+import { addRoute } from 'saloe/router'
+import { html, stream } from 'saloe/html'
+import { LISTENER_SCRIPT } from 'saloe/actions'
+import { listener, getScriptListener } from 'saloe/listener'
+
+import manifestJSON from '__STATIC_CONTENT_MANIFEST'
+
+
+const isRedirectableCallback = ({ pathname }) => {
+    return pathname !== '/' && pathname.endsWith('/')
+}
+
+const isForbiddenCallback = ({ request }) => {
+    const forbiddenURLs = []   
+    return forbiddenURLs.find((pathname) => request?.url?.endsWith(pathname))    
+}
+
+const isServerOnlyCallback = ({ request }) => {
+    const serverOnlyURLs = []
+    return serverOnlyURLs?.find((pathname) => request?.url?.endsWith(pathname))
+}
+
+
+(() => {
+    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`
+                    ${getScriptListener()}
+                    <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/demo-listener/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__: `'demo-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/demo-listener/wrangler.toml

@@ -0,0 +1,35 @@
+name = "demo-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 = "demo-actions"
+
+  [env.qa]
+  experimental-local = true
+
+    [env.qa.vars]
+    IS_CLOUDFLARE_WORKER = true
+    ENV = "qa"
+    APP_NAME = "demo-actions"
+
+  [env.dev]  
+  experimental-local = true
+
+    [env.dev.vars]
+    IS_CLOUDFLARE_WORKER = true
+    ENV = "dev"
+    APP_NAME = "demo-actions"

package/dist/listener.cjs.js

@@ -37,13 +37,13 @@ const listener = () => {
   const fetchListeners = async ({ srcElement, event, e }) => {
     var _a;
     if (!(srcElement == null ? void 0 : srcElement.getAttribute)) return;
-    const scriptNames = srcElement == null ? void 0 : srcElement.getAttribute("on-" + event);
+    const scriptNames = srcElement == null ? void 0 : srcElement.getAttribute(`on-${event}`);
     if (!scriptNames) return;
     if (scriptNames && EVENTS_PREVENT_DEFAULT_MANDATORY.includes(event)) e.preventDefault();
     const scripts = await Promise.all(
       (_a = scriptNames == null ? void 0 : scriptNames.split(",")) == null ? void 0 : _a.map((scriptName) => {
         var _a2;
-        const scriptToImport = "/" + (scriptName == null ? void 0 : scriptName.trim()) + ".js";
+        const scriptToImport = `/${scriptName == null ? void 0 : scriptName.trim()}.js`;
         return (_a2 = import(scriptToImport)) == null ? void 0 : _a2.catch((err) => {
         });
       })
@@ -92,18 +92,18 @@ const listener = () => {
       };
       script.onerror = () => {
         console.error("script failed to load");
-        reject(new Error("Failed to load script with src " + script.src));
+        reject(new Error(`Failed to load script with src ${script.src}`));
       };
       (_b = document == null ? void 0 : document.body) == null ? void 0 : _b.insertAdjacentElement("beforeend", script);
     });
   };
   const fireLoadListener = () => {
     const event = "load";
-    const srcElements = document == null ? void 0 : document.querySelectorAll("[on-" + event + "]");
+    const srcElements = document == null ? void 0 : document.querySelectorAll(`[on-${event}]`);
     srcElements == null ? void 0 : srcElements.forEach(async (srcElement) => {
       const listeners = await fetchListeners({ srcElement, event, e: null });
       executeListeners({ e: null, srcElement, listeners });
-      srcElement == null ? void 0 : srcElement.removeAttribute("on-" + event);
+      srcElement == null ? void 0 : srcElement.removeAttribute(`on-${event}`);
     });
   };
   const fireObserverListeners = () => {
@@ -118,8 +118,8 @@ const listener = () => {
     }, /* @__PURE__ */ new Map())) == null ? void 0 : _a.keys()];
     uniqueScriptNames == null ? void 0 : uniqueScriptNames.forEach(async (scriptName) => {
       var _a2;
-      const observedSrcElements = document.querySelectorAll('[on-observe*="' + scriptName + '"]');
-      const script = await ((_a2 = import("/" + (scriptName == null ? void 0 : scriptName.trim()) + ".js")) == null ? void 0 : _a2.catch((err) => {
+      const observedSrcElements = document.querySelectorAll(`[on-observe*="${scriptName}"]`);
+      const script = await ((_a2 = import(`/${scriptName == null ? void 0 : scriptName.trim()}.js`)) == null ? void 0 : _a2.catch((err) => {
       }));
       const listener2 = getListenerFromScript({ script, event: "observe" });
       if (!listener2) return;
@@ -138,29 +138,29 @@ const listener = () => {
   };
   const getSrcElement = ({ srcElement, event }) => {
     if (!(srcElement == null ? void 0 : srcElement.hasAttribute)) return srcElement;
-    const attribute = "on-" + event;
+    const attribute = `on-${event}`;
     const hasScriptName = srcElement == null ? void 0 : srcElement.hasAttribute(attribute);
     if (hasScriptName) return srcElement;
-    const query = ":is(a, button, li)[" + attribute + "]";
+    const query = `:is(a, button, li)[${attribute}]`;
     const closestButton = srcElement == null ? void 0 : srcElement.closest(query);
     if (closestButton) return closestButton;
     return srcElement;
   };
   const fireListeners = () => {
     EVENTS_FIRE_DOCUMENT_BODY_LISTENERS == null ? void 0 : EVENTS_FIRE_DOCUMENT_BODY_LISTENERS.forEach((event) => {
-      document.body["on" + event] = async (e) => {
+      document.body[`on${event}`] = async (e) => {
         await addScripts();
         fireLoadListener();
         fireObserverListeners();
       };
     });
     EVENTS == null ? void 0 : EVENTS.forEach((event) => {
-      document.body["on" + event] = async (e) => {
+      document.body[`on${event}`] = async (e) => {
         const srcElement = getSrcElement({ srcElement: e == null ? void 0 : e.srcElement, event });
         const listeners = await fetchListeners({ srcElement, event, e });
         executeListeners({ e, srcElement, listeners });
         addListener({ srcElement, event, listeners });
-        if (srcElement == null ? void 0 : srcElement.removeAttribute) srcElement.removeAttribute("on-" + event);
+        if (srcElement == null ? void 0 : srcElement.removeAttribute) srcElement.removeAttribute(`on-${event}`);
       };
     });
   };

package/dist/listener.es.js

@@ -35,13 +35,13 @@ const listener = () => {
   const fetchListeners = async ({ srcElement, event, e }) => {
     var _a;
     if (!(srcElement == null ? void 0 : srcElement.getAttribute)) return;
-    const scriptNames = srcElement == null ? void 0 : srcElement.getAttribute("on-" + event);
+    const scriptNames = srcElement == null ? void 0 : srcElement.getAttribute(`on-${event}`);
     if (!scriptNames) return;
     if (scriptNames && EVENTS_PREVENT_DEFAULT_MANDATORY.includes(event)) e.preventDefault();
     const scripts = await Promise.all(
       (_a = scriptNames == null ? void 0 : scriptNames.split(",")) == null ? void 0 : _a.map((scriptName) => {
         var _a2;
-        const scriptToImport = "/" + (scriptName == null ? void 0 : scriptName.trim()) + ".js";
+        const scriptToImport = `/${scriptName == null ? void 0 : scriptName.trim()}.js`;
         return (_a2 = import(scriptToImport)) == null ? void 0 : _a2.catch((err) => {
         });
       })
@@ -90,18 +90,18 @@ const listener = () => {
       };
       script.onerror = () => {
         console.error("script failed to load");
-        reject(new Error("Failed to load script with src " + script.src));
+        reject(new Error(`Failed to load script with src ${script.src}`));
       };
       (_b = document == null ? void 0 : document.body) == null ? void 0 : _b.insertAdjacentElement("beforeend", script);
     });
   };
   const fireLoadListener = () => {
     const event = "load";
-    const srcElements = document == null ? void 0 : document.querySelectorAll("[on-" + event + "]");
+    const srcElements = document == null ? void 0 : document.querySelectorAll(`[on-${event}]`);
     srcElements == null ? void 0 : srcElements.forEach(async (srcElement) => {
       const listeners = await fetchListeners({ srcElement, event, e: null });
       executeListeners({ e: null, srcElement, listeners });
-      srcElement == null ? void 0 : srcElement.removeAttribute("on-" + event);
+      srcElement == null ? void 0 : srcElement.removeAttribute(`on-${event}`);
     });
   };
   const fireObserverListeners = () => {
@@ -116,8 +116,8 @@ const listener = () => {
     }, /* @__PURE__ */ new Map())) == null ? void 0 : _a.keys()];
     uniqueScriptNames == null ? void 0 : uniqueScriptNames.forEach(async (scriptName) => {
       var _a2;
-      const observedSrcElements = document.querySelectorAll('[on-observe*="' + scriptName + '"]');
-      const script = await ((_a2 = import("/" + (scriptName == null ? void 0 : scriptName.trim()) + ".js")) == null ? void 0 : _a2.catch((err) => {
+      const observedSrcElements = document.querySelectorAll(`[on-observe*="${scriptName}"]`);
+      const script = await ((_a2 = import(`/${scriptName == null ? void 0 : scriptName.trim()}.js`)) == null ? void 0 : _a2.catch((err) => {
       }));
       const listener2 = getListenerFromScript({ script, event: "observe" });
       if (!listener2) return;
@@ -136,29 +136,29 @@ const listener = () => {
   };
   const getSrcElement = ({ srcElement, event }) => {
     if (!(srcElement == null ? void 0 : srcElement.hasAttribute)) return srcElement;
-    const attribute = "on-" + event;
+    const attribute = `on-${event}`;
     const hasScriptName = srcElement == null ? void 0 : srcElement.hasAttribute(attribute);
     if (hasScriptName) return srcElement;
-    const query = ":is(a, button, li)[" + attribute + "]";
+    const query = `:is(a, button, li)[${attribute}]`;
     const closestButton = srcElement == null ? void 0 : srcElement.closest(query);
     if (closestButton) return closestButton;
     return srcElement;
   };
   const fireListeners = () => {
     EVENTS_FIRE_DOCUMENT_BODY_LISTENERS == null ? void 0 : EVENTS_FIRE_DOCUMENT_BODY_LISTENERS.forEach((event) => {
-      document.body["on" + event] = async (e) => {
+      document.body[`on${event}`] = async (e) => {
         await addScripts();
         fireLoadListener();
         fireObserverListeners();
       };
     });
     EVENTS == null ? void 0 : EVENTS.forEach((event) => {
-      document.body["on" + event] = async (e) => {
+      document.body[`on${event}`] = async (e) => {
         const srcElement = getSrcElement({ srcElement: e == null ? void 0 : e.srcElement, event });
         const listeners = await fetchListeners({ srcElement, event, e });
         executeListeners({ e, srcElement, listeners });
         addListener({ srcElement, event, listeners });
-        if (srcElement == null ? void 0 : srcElement.removeAttribute) srcElement.removeAttribute("on-" + event);
+        if (srcElement == null ? void 0 : srcElement.removeAttribute) srcElement.removeAttribute(`on-${event}`);
       };
     });
   };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "saloe",
-    "version": "0.0.4",
+    "version": "0.0.6",
     "description": "Tools for making web development easy and efficient",
     "scripts": {
         "build": "vite build",

package/src/listener.js

@@ -40,14 +40,14 @@ const listener = () => {
     const fetchListeners = async ({ srcElement, event, e }) => {
         if (!srcElement?.getAttribute) return
 
-        const scriptNames = srcElement?.getAttribute('on-' + event)
+        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'
+                const scriptToImport = `/${scriptName?.trim()}.js`
                 return import(scriptToImport)?.catch((err) => { })
             })
         )
@@ -105,7 +105,7 @@ const listener = () => {
 
             script.onerror = () => {
                 console.error('script failed to load')
-                reject(new Error('Failed to load script with src ' + script.src))
+                reject(new Error(`Failed to load script with src ${script.src}`))
             }
 
             document?.body?.insertAdjacentElement('beforeend', script)
@@ -115,20 +115,20 @@ const listener = () => {
     // load
     const fireLoadListener = () => {
         const event = 'load'
-        const srcElements = document?.querySelectorAll('[on-' + event + ']')
+        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)
+            srcElement?.removeAttribute(`on-${event}`)
         })
     }
 
     // invalid
     const fireInvalidListener = () => {
         const event = 'invalid'
-        const srcElements = document?.querySelectorAll('[on-' + event + ']')
+        const srcElements = document?.querySelectorAll(`[on-${event}]`)
 
         srcElements?.forEach(async (srcElement) => {
             const listeners = await fetchListeners({ srcElement, event, e: null })
@@ -139,7 +139,7 @@ const listener = () => {
     // blur
     const fireBlurListener = () => {
         const event = 'blur'
-        const srcElements = document?.querySelectorAll('[on-' + event + ']')
+        const srcElements = document?.querySelectorAll(`[on-${event}]`)
 
         srcElements?.forEach(async (srcElement) => {
             const listeners = await fetchListeners({ srcElement, event, e: null })
@@ -150,7 +150,7 @@ const listener = () => {
     // focus
     const fireFocusListener = () => {
         const event = 'focus'
-        const srcElements = document?.querySelectorAll('[on-' + event + ']')
+        const srcElements = document?.querySelectorAll(`[on-${event}]`)
 
         srcElements?.forEach(async (srcElement) => {
             const listeners = await fetchListeners({ srcElement, event, e: null })
@@ -173,9 +173,9 @@ const listener = () => {
         }, new Map())?.keys()]
 
         uniqueScriptNames?.forEach(async (scriptName) => {
-            const observedSrcElements = document.querySelectorAll('[on-observe*="' + scriptName + '"]')
+            const observedSrcElements = document.querySelectorAll(`[on-observe*="${scriptName}"]`)
 
-            const script = await import('/' + scriptName?.trim() + '.js')?.catch((err) => { })
+            const script = await import(`/${scriptName?.trim()}.js`)?.catch((err) => { })
             const listener = getListenerFromScript({ script, event: 'observe' })
             if (!listener) return
 
@@ -197,11 +197,11 @@ const listener = () => {
 
     const getSrcElement = ({ srcElement, event }) => {
         if (!srcElement?.hasAttribute) return srcElement
-        const attribute = 'on-' + event
+        const attribute = `on-${event}`
         const hasScriptName = srcElement?.hasAttribute(attribute)
         if (hasScriptName) return srcElement
 
-        const query = ':is(a, button, li)[' + attribute + ']'
+        const query = `:is(a, button, li)[${attribute}]`
         const closestButton = srcElement?.closest(query)
         if (closestButton) return closestButton
 
@@ -210,7 +210,7 @@ const listener = () => {
 
     const fireListeners = () => {
         EVENTS_FIRE_DOCUMENT_BODY_LISTENERS?.forEach((event) => {
-            document.body['on' + event] = async (e) => {
+            document.body[`on${event}`] = async (e) => {
                 await addScripts()
 
                 fireLoadListener()
@@ -219,14 +219,14 @@ const listener = () => {
         })
 
         EVENTS?.forEach((event) => {
-            document.body['on' + event] = async (e) => {
+            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)
+                if (srcElement?.removeAttribute) srcElement.removeAttribute(`on-${event}`)
             }
         })
     }

package/vite.config.js

@@ -7,7 +7,6 @@ export default defineConfig({
         minify: false,
         lib: {
             entry: {
-                actions: resolve(__dirname, 'src/actions.js'),
                 'cloudflare-kv': resolve(__dirname, 'src/cloudflare-kv.js'),
                 'cloudflare-worker': resolve(__dirname, 'src/cloudflare-worker.js'),
                 cookie: resolve(__dirname, 'src/cookie.js'),