@lengkapp/edge 0.0.1

package/edge-client.js

@@ -0,0 +1,279 @@
+(() => {
+      'use strict';
+
+      const d = document,
+            body = d.body,
+            head = d.head;
+
+      // ---------- Constants and caches ----------
+      const VALID_EVENTS = new Set([
+        'click', 'dblclick', 'mousedown', 'mouseup', 'mouseover', 'mouseout',
+        'mouseenter', 'mouseleave', 'mousemove', 'contextmenu',
+        'focus', 'blur', 'focusin', 'focusout',
+        'keydown', 'keyup', 'keypress',
+        'change', 'input', 'submit', 'reset',
+        'load', 'DOMContentLoaded', 'ready',
+        'scroll', 'resize', 'wheel', 'touchstart', 'touchend', 'touchmove',
+        'visible', 'intersect'
+      ]);
+
+      // WeakMaps for per‑element caches
+      const triggerCache = new WeakMap();   // element -> Set of event names (lowercase)
+      const targetCache  = new WeakMap();   // element -> target DOM node (resolved)
+      const resourceCache = new Set();      // already injected CSS/JS URLs
+
+      // ---------- Injected base styles ----------
+      const injectBaseStyles = () => {
+        if (d.getElementById('df-style')) return;
+        const style = d.createElement('style');
+        style.id = 'df-style';
+        style.textContent = `
+          .df-skeleton { display:flex; flex-direction:column; gap:8px; padding:10px; }
+          .df-skeleton .df-bar {
+            height:12px; background:linear-gradient(90deg,#e0e0e0 25%,#f0f0f0 50%,#e0e0e0 75%);
+            background-size:200% 100%; animation:df-shimmer 1.5s infinite; border-radius:4px;
+          }
+          @keyframes df-shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
+          .df-retry {
+            display:inline-block; padding:8px 16px; background:#007bff; color:#fff;
+            border-radius:4px; cursor:pointer; text-decoration:none; font-size:14px;
+          }
+          .df-retry:hover { background:#0056b3; }
+        `;
+        head.appendChild(style);
+      };
+      injectBaseStyles();
+
+      // ---------- Pre‑built templates (cloned on use) ----------
+      const skeletonTemplate = d.createElement('template');
+      skeletonTemplate.innerHTML = `
+        <div class="df-skeleton">
+          <div class="df-bar"></div>
+          <div class="df-bar"></div>
+          <div class="df-bar"></div>
+        </div>`;
+      const retryTemplate = d.createElement('template');
+      retryTemplate.innerHTML = `<span class="df-retry">Retry</span>`;
+
+      // ---------- Resource helpers ----------
+      const parseHeaderList = (str) => {
+        if (!str) return [];
+        return str.replace(/^\[|\]$/g, '').split(',')
+                  .map(s => s.trim().replace(/^['"]|['"]$/g, ''))
+                  .filter(Boolean);
+      };
+
+      const injectResources = (resources, type) => {
+        resources.forEach(url => {
+          if (resourceCache.has(url)) return;
+          resourceCache.add(url);
+          if (type === 'css') {
+            const link = d.createElement('link');
+            link.rel = 'stylesheet'; link.href = url;
+            head.appendChild(link);
+          } else if (type === 'js') {
+            const script = d.createElement('script');
+            script.src = url;
+            body.appendChild(script);
+          }
+        });
+      };
+
+      // ---------- Visibility helpers ----------
+      const isElementActuallyVisible = (el) => {
+        const style = getComputedStyle(el);
+        if (style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0') return false;
+        const rect = el.getBoundingClientRect();
+        return rect.width > 0 && rect.height > 0;
+      };
+
+      // Shared IntersectionObserver
+      let intersectionObserver = null;
+      const getIO = () => {
+        if (!intersectionObserver) {
+          intersectionObserver = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+              const el = entry.target;
+              const visible = entry.isIntersecting && isElementActuallyVisible(el);
+              if (visible && el.dataset.wasVisible !== 'true') {
+                run(el);
+              }
+              el.dataset.wasVisible = visible ? 'true' : 'false';
+            });
+          }, { threshold: 0 });
+        }
+        return intersectionObserver;
+      };
+
+      // ---------- Core run function ----------
+      const run = async (el) => {
+        if (el.dataset.running === 'true') return;
+        el.dataset.running = 'true';
+
+        const post = el.hasAttribute('_post');
+        const url = el.getAttribute('_post') || el.getAttribute('_get');
+        let bodyData, headers = {};
+
+        if (post) {
+          const formId = el.getAttribute('_form');
+          const json = el.getAttribute('_json');
+          if (formId) {
+            const form = d.getElementById(formId);
+            if (form) bodyData = new URLSearchParams(new FormData(form));
+          } else if (json) {
+            bodyData = JSON.stringify(Object.fromEntries(
+              json.split(',').map(name => {
+                const input = d.querySelector(`[name="${name}"]`);
+                return [name, input ? input.value : ''];
+              })
+            ));
+            headers['Content-Type'] = 'application/json';
+          }
+        }
+
+        // Resolve target (cached)
+        const targetSelector = el.getAttribute('_target');
+        let container = targetCache.get(el);
+        if (!container) {
+          container = targetSelector === 'this' ? el : d.querySelector(targetSelector);
+          if (container) targetCache.set(el, container);
+        }
+        if (!container) {
+          console.warn('Target not found:', targetSelector);
+          el.dataset.running = 'false';
+          return;
+        }
+
+        // Show skeleton (clone template)
+        container.replaceChildren(skeletonTemplate.content.cloneNode(true));
+
+        try {
+          const res = await fetch(url, { method: post ? 'POST' : 'GET', body: bodyData, headers });
+
+          // Inject resources from headers
+          const css = res.headers.get('x-css-required') || res.headers.get('x-css-requiered');
+          const js  = res.headers.get('x-js-required');
+          if (css) injectResources(parseHeaderList(css), 'css');
+          if (js)  injectResources(parseHeaderList(js), 'js');
+
+          const text = await res.text();
+          container.innerHTML = text;   // MutationObserver picks up new declarative elements
+        } catch (err) {
+          console.error(err);
+          // Show retry (clone template)
+          const retry = retryTemplate.content.firstElementChild.cloneNode(true);
+          retry.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            run(el);
+          });
+          container.replaceChildren(retry);
+        } finally {
+          el.dataset.running = 'false';
+        }
+      };
+
+      // ---------- Trigger parsing and caching ----------
+      const getTriggerEvents = (el) => {
+        let events = triggerCache.get(el);
+        if (events) return events;
+        events = new Set();
+        const attr = el.getAttribute('_trigger');
+        if (attr && attr.trim() !== '') {
+          attr.split(',').forEach(s => {
+            const evt = s.trim().toLowerCase();
+            if (VALID_EVENTS.has(evt)) events.add(evt);
+          });
+        } else {
+          // Default: click (plus load if _target="this")
+          events.add('click');
+          if (el.getAttribute('_target') === 'this') events.add('load');
+        }
+        triggerCache.set(el, events);
+        return events;
+      };
+
+      // ---------- Element initialisation (no per‑element listeners) ----------
+      const initElement = (el) => {
+        if (el.dataset.initialized === 'true') return;
+        el.dataset.initialized = 'true';
+
+        const events = getTriggerEvents(el);
+
+        // Handle load / ready immediately
+        if (events.has('load') || events.has('domcontentloaded') || events.has('ready')) {
+          run(el);
+        }
+        // Set up visibility observation
+        if (events.has('visible') || events.has('intersect')) {
+          el.dataset.wasVisible = 'false';
+          getIO().observe(el);
+        }
+        // All other events are handled by the global delegated listener
+      };
+
+      // ---------- Global event delegation ----------
+      const delegatedEvents = new Set([
+        'click', 'dblclick', 'mousedown', 'mouseup', 'mouseover', 'mouseout',
+        'mouseenter', 'mouseleave', 'mousemove', 'contextmenu',
+        'focus', 'blur', 'focusin', 'focusout',
+        'keydown', 'keyup', 'keypress',
+        'change', 'input', 'submit', 'reset',
+        'scroll', 'resize', 'wheel', 'touchstart', 'touchend', 'touchmove'
+      ]);
+
+      // Attach one listener per event type, passive for scroll‑like events
+      delegatedEvents.forEach(evt => {
+        const isPassive = ['scroll', 'touchstart', 'touchmove', 'touchend', 'wheel'].includes(evt);
+        d.addEventListener(evt, (e) => {
+          const target = e.target;
+          if (!(target instanceof Element)) return;
+          const el = target.closest('[_get], [_post]');
+          if (!el) return;
+          const events = getTriggerEvents(el);
+          if (events.has(evt)) {
+            if (evt === 'click') e.preventDefault();
+            run(el);
+          }
+        }, isPassive ? { passive: true } : false);
+      });
+
+      // ---------- MutationObserver (batch processing) ----------
+      let mutationQueue = [];
+      let mutationScheduled = false;
+
+      const processMutations = () => {
+        mutationScheduled = false;
+        const nodes = mutationQueue;
+        mutationQueue = [];
+        nodes.forEach(node => {
+          if (node.nodeType !== 1) return;
+          if (node.matches('[_get], [_post]')) initElement(node);
+          node.querySelectorAll('[_get], [_post]').forEach(initElement);
+        });
+      };
+
+      const mo = new MutationObserver((mutations) => {
+        mutations.forEach(m => {
+          m.addedNodes.forEach(node => {
+            if (node.nodeType === 1) mutationQueue.push(node);
+          });
+        });
+        if (!mutationScheduled) {
+          mutationScheduled = true;
+          Promise.resolve().then(processMutations);
+        }
+      });
+      mo.observe(body, { childList: true, subtree: true });
+
+      // ---------- Initialisation on DOM ready ----------
+      const initAll = () => {
+        d.querySelectorAll('[_get], [_post]').forEach(initElement);
+      };
+
+      if (d.readyState === 'loading') {
+        d.addEventListener('DOMContentLoaded', initAll, { once: true });
+      } else {
+        initAll();
+      }
+    })();

package/edge-client.min.js

@@ -0,0 +1 @@
+(()=>{'use strict';const d=document,b=d.body,h=d.head,V=new Set(['click','dblclick','mousedown','mouseup','mouseover','mouseout','mouseenter','mouseleave','mousemove','contextmenu','focus','blur','focusin','focusout','keydown','keyup','keypress','change','input','submit','reset','load','DOMContentLoaded','ready','scroll','resize','wheel','touchstart','touchend','touchmove','visible','intersect']),T=new WeakMap,C=new WeakMap,R=new Set;if(!d.getElementById('s')){let s=d.createElement('style');s.id='s';s.textContent='.sk{display:flex;flex-direction:column;gap:8px;padding:10px}.sk .b{height:12px;background:linear-gradient(90deg,#e0e0e0 25%,#f0f0f0 50%,#e0e0e0 75%);background-size:200% 100%;animation:sh 1.5s infinite;border-radius:4px}@keyframes sh{0%{background-position:-200% 0}100%{background-position:200% 0}}.rt{display:inline-block;padding:8px 16px;background:#007bff;color:#fff;border-radius:4px;cursor:pointer;text-decoration:none;font-size:14px}.rt:hover{background:#0056b3}';h.appendChild(s)}let skT=d.createElement('template');skT.innerHTML='<div class="sk"><div class="b"></div><div class="b"></div><div class="b"></div></div>';let rtT=d.createElement('template');rtT.innerHTML='<span class="rt">Retry</span>';const phl=s=>{if(!s)return[];return s.replace(/^\[|\]$/g,'').split(',').map(x=>x.trim().replace(/^['"]|['"]$/g,'')).filter(Boolean)},inj=(r,t)=>{r.forEach(u=>{if(R.has(u))return;R.add(u);if(t==='css'){let l=d.createElement('link');l.rel='stylesheet';l.href=u;h.appendChild(l)}else if(t==='js'){let s=d.createElement('script');s.src=u;b.appendChild(s)}})},vis=el=>{let st=getComputedStyle(el);if(st.display==='none'||st.visibility==='hidden'||st.opacity==='0')return false;let r=el.getBoundingClientRect();return r.width>0&&r.height>0};let io=null;const gio=()=>{if(!io){io=new IntersectionObserver(es=>{es.forEach(e=>{let el=e.target,v=e.isIntersecting&&vis(el);if(v&&el.dataset.wasVisible!=='true')run(el);el.dataset.wasVisible=v?'true':'false'})},{threshold:0})}return io};const run=async el=>{if(el.dataset.running==='true')return;el.dataset.running='true';let post=el.hasAttribute('_post'),url=el.getAttribute('_post')||el.getAttribute('_get'),bd,hd={};if(post){let fid=el.getAttribute('_form'),js=el.getAttribute('_json');if(fid){let f=d.getElementById(fid);if(f)bd=new URLSearchParams(new FormData(f))}else if(js){bd=JSON.stringify(Object.fromEntries(js.split(',').map(n=>{let i=d.querySelector(`[name="${n}"]`);return[n,i?i.value:'']})));hd['Content-Type']='application/json'}}let ts=el.getAttribute('_target'),ct=C.get(el);if(!ct){ct=ts==='this'?el:d.querySelector(ts);if(ct)C.set(el,ct)}if(!ct){console.warn('Target not found:',ts);el.dataset.running='false';return}ct.replaceChildren(skT.content.cloneNode(true));try{let res=await fetch(url,{method:post?'POST':'GET',body:bd,headers:hd});let css=res.headers.get('x-css-required')||res.headers.get('x-css-requiered'),js=res.headers.get('x-js-required');if(css)inj(phl(css),'css');if(js)inj(phl(js),'js');ct.innerHTML=await res.text()}catch(e){console.error(e);let rt=rtT.content.firstElementChild.cloneNode(true);rt.addEventListener('click',ev=>{ev.preventDefault();ev.stopPropagation();run(el)});ct.replaceChildren(rt)}finally{el.dataset.running='false'}};const gte=el=>{let ev=T.get(el);if(ev)return ev;ev=new Set;let a=el.getAttribute('_trigger');if(a&&a.trim()){a.split(',').forEach(s=>{let e=s.trim().toLowerCase();if(V.has(e))ev.add(e)})}else{ev.add('click');if(el.getAttribute('_target')==='this')ev.add('load')}T.set(el,ev);return ev};const init=el=>{if(el.dataset.initialized==='true')return;el.dataset.initialized='true';let evs=gte(el);if(evs.has('load')||evs.has('domcontentloaded')||evs.has('ready'))run(el);if(evs.has('visible')||evs.has('intersect')){el.dataset.wasVisible='false';gio().observe(el)}};const delegated=['click','dblclick','mousedown','mouseup','mouseover','mouseout','mouseenter','mouseleave','mousemove','contextmenu','focus','blur','focusin','focusout','keydown','keyup','keypress','change','input','submit','reset','scroll','resize','wheel','touchstart','touchend','touchmove'];delegated.forEach(ev=>{let pass=['scroll','touchstart','touchmove','touchend','wheel'].includes(ev);d.addEventListener(ev,e=>{let t=e.target;if(!(t instanceof Element))return;let el=t.closest('[_get],[_post]');if(!el)return;let evs=gte(el);if(evs.has(ev)){if(ev==='click')e.preventDefault();run(el)}},pass?{passive:true}:false)});let mq=[],ms=false;const pm=()=>{ms=false;let nodes=mq;mq=[];nodes.forEach(n=>{if(n.nodeType!==1)return;if(n.matches('[_get],[_post]'))init(n);n.querySelectorAll('[_get],[_post]').forEach(init)})};new MutationObserver(ms=>{ms.forEach(m=>m.addedNodes.forEach(n=>{if(n.nodeType===1)mq.push(n)}));if(!ms){ms=true;Promise.resolve().then(pm)}}).observe(b,{childList:true,subtree:true});const initAll=()=>d.querySelectorAll('[_get],[_post]').forEach(init);if(d.readyState==='loading')d.addEventListener('DOMContentLoaded',initAll,{once:true});else initAll()})();

package/edge-server.js

@@ -0,0 +1,488 @@
+class Context {
+  constructor(request, env, executionCtx, params = {}, parsedUrl = null) {
+    this.req = request;
+    this.env = env;
+    this.executionCtx = executionCtx;
+    this.params = params;
+    this.status = 200;
+    this.headers = new Headers();
+    this._rawCookie = request.headers.get('Cookie') || '';
+    this._cookies = null; // lazy parsed
+    this.url = parsedUrl || new URL(request.url); // reuse pre-parsed URL if provided
+  }
+
+  // Lazy cookie parsing
+  _ensureCookies() {
+    if (this._cookies === null) {
+      const cookies = {};
+      if (this._rawCookie) {
+        for (const pair of this._rawCookie.split(';')) {
+          const trimmed = pair.trim();
+          if (!trimmed) continue;
+          const idx = trimmed.indexOf('=');
+          if (idx > 0) {
+            const name = decodeURIComponent(trimmed.slice(0, idx));
+            const value = decodeURIComponent(trimmed.slice(idx + 1));
+            cookies[name] = value;
+          }
+        }
+      }
+      this._cookies = cookies;
+    }
+    return this._cookies;
+  }
+
+  getCookie(name) {
+    return this._ensureCookies()[name] ?? null;
+  }
+
+  // Lazy query parsing
+  get query() {
+    return this.url.searchParams;
+  }
+
+  setCookie(name, value, options = {}) {
+    let cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
+    if (options.path) cookie += `; Path=${options.path}`;
+    if (options.domain) cookie += `; Domain=${options.domain}`;
+    if (options.maxAge !== undefined) cookie += `; Max-Age=${options.maxAge}`;
+    if (options.expires) cookie += `; Expires=${options.expires.toUTCString()}`;
+    if (options.secure) cookie += `; Secure`;
+    if (options.httpOnly) cookie += `; HttpOnly`;
+    if (options.sameSite) cookie += `; SameSite=${options.sameSite}`;
+    this.headers.append('Set-Cookie', cookie);
+  }
+
+  deleteCookie(name, options = {}) {
+    this.setCookie(name, '', { ...options, maxAge: 0, expires: new Date(0) });
+  }
+
+  text(data, status = this.status, headers = {}) {
+    const h = this._buildHeaders(headers);
+    h.set('Content-Type', 'text/plain');
+    return new Response(data, { status, headers: h });
+  }
+
+  json(data, status = this.status, headers = {}) {
+    const h = this._buildHeaders(headers);
+    h.set('Content-Type', 'application/json');
+    return new Response(JSON.stringify(data), { status, headers: h });
+  }
+
+  html(data, status = this.status, headers = {}) {
+    const h = this._buildHeaders(headers);
+    h.set('Content-Type', 'text/html');
+    return new Response(data, { status, headers: h });
+  }
+
+  _buildHeaders(headers) {
+    if (Object.keys(headers).length === 0) {
+      return this.headers;
+    }
+    const h = new Headers(this.headers);
+    for (const key in headers) {
+      if (Object.prototype.hasOwnProperty.call(headers, key)) {
+        h.set(key, headers[key]);
+      }
+    }
+    return h;
+  }
+}
+
+export const Fragment = Symbol('Fragment');
+
+export function jsx(type, props, ...children) {
+  const normalizedProps = props || {};
+  const flatChildren = children.flat(Infinity);
+  return {
+    type,
+    props: normalizedProps,
+    children: flatChildren,
+    __isJSX: true,
+  };
+}
+
+export function renderToString(node) {
+  if (node == null || typeof node === 'boolean') return '';
+  if (typeof node === 'string' || typeof node === 'number') {
+    return escapeHtml(String(node));
+  }
+  if (Array.isArray(node)) {
+    const parts = [];
+    for (let i = 0; i < node.length; i++) {
+      parts.push(renderToString(node[i]));
+    }
+    return parts.join('');
+  }
+  if (!node.__isJSX) {
+    return escapeHtml(String(node));
+  }
+
+  const { type, props, children } = node;
+
+  if (type === Fragment) {
+    const parts = [];
+    for (let i = 0; i < children.length; i++) {
+      parts.push(renderToString(children[i]));
+    }
+    return parts.join('');
+  }
+
+  if (typeof type === 'symbol') {
+    return '';
+  }
+
+  if (typeof type === 'function') {
+    const componentResult = type({ ...props, children });
+    return renderToString(componentResult);
+  }
+
+  const attrsParts = [];
+  for (const key in props) {
+    if (key === 'children') continue;
+    const value = props[key];
+    if (value == null || value === false) continue;
+    if (key === 'className') {
+      attrsParts.push(` class="${escapeHtml(value)}"`);
+    } else if (key === 'htmlFor') {
+      attrsParts.push(` for="${escapeHtml(value)}"`);
+    } else if (key.startsWith('on') && typeof value === 'function') {
+      continue;
+    } else if (key === 'style' && typeof value === 'object') {
+      const styleStr = Object.entries(value)
+        .map(([prop, val]) => `${camelToKebab(prop)}:${val}`)
+        .join(';');
+      attrsParts.push(` style="${escapeHtml(styleStr)}"`);
+    } else if (value === true) {
+      attrsParts.push(` ${key}`);
+    } else {
+      attrsParts.push(` ${key}="${escapeHtml(String(value))}"`);
+    }
+  }
+  const attrs = attrsParts.join('');
+
+  const childParts = [];
+  for (let i = 0; i < children.length; i++) {
+    childParts.push(renderToString(children[i]));
+  }
+  const innerHTML = childParts.join('');
+
+  return `<${type}${attrs}>${innerHTML}</${type}>`;
+}
+
+const HTML_ESCAPE_MAP = {
+  '&': '&amp;',
+  '<': '&lt;',
+  '>': '&gt;',
+  '"': '&quot;',
+  "'": '&#039;'
+};
+
+function escapeHtml(str) {
+  return str.replace(/[&<>"']/g, char => HTML_ESCAPE_MAP[char]);
+}
+
+function camelToKebab(str) {
+  return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+}
+
+// ---------- Trie-based router for dynamic routes ----------
+class TrieNode {
+  constructor() {
+    this.children = new Map();  // exact segment -> TrieNode
+    this.paramChild = null;     // node for :param
+    this.paramName = null;      // param name if paramChild exists
+    this.handler = null;        // { handler, options }
+  }
+}
+
+class RouteTrie {
+  constructor() {
+    this.root = new TrieNode();
+  }
+
+  add(path, handler, options) {
+    const segments = path.split('/').filter(Boolean);
+    let node = this.root;
+    for (const seg of segments) {
+      if (seg.startsWith(':')) {
+        if (!node.paramChild) {
+          node.paramChild = new TrieNode();
+          node.paramName = seg.slice(1);
+        }
+        node = node.paramChild;
+      } else {
+        if (!node.children.has(seg)) {
+          node.children.set(seg, new TrieNode());
+        }
+        node = node.children.get(seg);
+      }
+    }
+    node.handler = { handler, options };
+  }
+
+  match(path) {
+    const segments = path.split('/').filter(Boolean);
+    let node = this.root;
+    const params = {};
+    for (const seg of segments) {
+      if (node.children.has(seg)) {
+        node = node.children.get(seg);
+      } else if (node.paramChild) {
+        params[node.paramName] = seg;
+        node = node.paramChild;
+      } else {
+        return null;
+      }
+    }
+    if (node.handler) {
+      return {
+        handler: node.handler.handler,
+        options: node.handler.options,
+        params
+      };
+    }
+    return null;
+  }
+}
+
+const HTTP_METHODS = ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'OPTIONS', 'HEAD'];
+
+export class Edge {
+  constructor() {
+    // Static routes: nested map method -> path -> handler
+    this.staticRoutes = new Map();
+    for (const m of HTTP_METHODS) {
+      this.staticRoutes.set(m, new Map());
+    }
+    // Dynamic routes per method: RouteTrie
+    this.dynamicTries = {};
+    for (const m of HTTP_METHODS) {
+      this.dynamicTries[m] = new RouteTrie();
+    }
+
+    this.authKvBinding = 'AUTH_KV';
+    this.rateLimitKvBinding = 'RATE_LIMIT_KV';
+    this.defaults = {
+      cors: { origin: '*', methods: 'GET, POST, PUT, DELETE, PATCH, OPTIONS, HEAD' },
+    };
+    this.scheduledHandler = null;
+  }
+
+  _addRoute(method, path, options, handler) {
+    if (typeof options === 'boolean') options = { auth: options };
+    if (typeof options === 'function') {
+      handler = options;
+      options = {};
+    }
+    if (typeof handler !== 'function') {
+      throw new Error(`Handler for ${method} ${path} must be a function`);
+    }
+
+    // Merge with defaults once
+    const mergedOptions = { ...this.defaults, ...(options || {}) };
+
+    if (!path.includes(':')) {
+      // Static route (optimized lookup)
+      const methodMap = this.staticRoutes.get(method);
+      methodMap.set(path, { handler, options: mergedOptions });
+    } else {
+      // Dynamic route
+      this.dynamicTries[method].add(path, handler, mergedOptions);
+    }
+  }
+
+  get(path, options, handler) { this._addRoute('GET', path, options, handler); }
+  post(path, options, handler) { this._addRoute('POST', path, options, handler); }
+  put(path, options, handler) { this._addRoute('PUT', path, options, handler); }
+  delete(path, options, handler) { this._addRoute('DELETE', path, options, handler); }
+  patch(path, options, handler) { this._addRoute('PATCH', path, options, handler); }
+  options(path, options, handler) { this._addRoute('OPTIONS', path, options, handler); }
+  head(path, options, handler) { this._addRoute('HEAD', path, options, handler); }
+
+  scheduled(handler) {
+    this.scheduledHandler = handler;
+  }
+
+  async _processAuth(ctx, flag) {
+    if (!flag) return true;
+    const token = ctx.getCookie('auth_token') ||
+                  ctx.req.headers.get('Authorization')?.replace(/^Bearer\s+/i, '');
+    if (!token) return false;
+
+    const kv = ctx.env[this.authKvBinding];
+    if (!kv) return false;
+    const data = await kv.get(token);
+    if (!data) return false;
+
+    if (typeof flag === 'object') {
+      try {
+        const payload = JSON.parse(data);
+        if (flag.role && payload.role !== flag.role) return false;
+        if (flag.scopes) {
+          const userScopes = payload.scopes || [];
+          if (!flag.scopes.every(s => userScopes.includes(s))) return false;
+        }
+      } catch {}
+    }
+    return true;
+  }
+
+  async _processRateLimit(ctx, flag) {
+    if (!flag) return true;
+    const options = flag === true ? {} : flag;
+    const { max = 100, window = 60 } = options;
+    const key = `rl:${ctx.req.headers.get('CF-Connecting-IP') || 'unknown'}`;
+    const kv = ctx.env[this.rateLimitKvBinding];
+    if (!kv) return true;
+    let count = await kv.get(key, 'json') || 0;
+    if (count >= max) return false;
+    count++;
+    await kv.put(key, JSON.stringify(count), { expirationTtl: window });
+    return true;
+  }
+
+  _processCors(ctx, flag) {
+    if (!flag) return;
+    const opts = typeof flag === 'object' ? flag : this.defaults.cors;
+    ctx.headers.set('Access-Control-Allow-Origin', opts.origin || '*');
+    ctx.headers.set('Access-Control-Allow-Methods', opts.methods || 'GET, POST, PUT, DELETE, PATCH, OPTIONS, HEAD');
+    ctx.headers.set('Access-Control-Allow-Headers', opts.headers || 'Content-Type, Authorization');
+    ctx.headers.set('Access-Control-Max-Age', '86400');
+  }
+
+  _processLog(ctx, flag) {
+    if (!flag) return;
+    console.log(`${ctx.req.method} ${ctx.req.url} - ${ctx.status}`);
+  }
+
+  _processCompress(request, response) {
+    const acceptEncoding = request.headers.get('Accept-Encoding') || '';
+    let encoding = null;
+    if (acceptEncoding.includes('gzip')) encoding = 'gzip';
+    else if (acceptEncoding.includes('deflate')) encoding = 'deflate';
+    else if (acceptEncoding.includes('br')) encoding = 'br';
+    if (!encoding || !response.body) return response;
+
+    const stream = response.body.pipeThrough(new CompressionStream(encoding));
+    const newHeaders = new Headers(response.headers);
+    newHeaders.set('Content-Encoding', encoding);
+    newHeaders.set('Vary', 'Accept-Encoding');
+    return new Response(stream, { status: response.status, statusText: response.statusText, headers: newHeaders });
+  }
+
+  async _validate(ctx, flag) {
+    if (!flag) return true;
+    if (typeof flag === 'function') {
+      try {
+        const result = await flag(ctx);
+        return !!result;
+      } catch {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  async _cacheGet(request) {
+    const cache = caches.default;
+    const cached = await cache.match(request);
+    if (!cached) return null;
+    return cached;
+  }
+
+  async _cachePut(request, response, flag) {
+    if (!flag) return;
+    const options = flag === true ? {} : flag;
+    const { ttl = 3600, staleWhileRevalidate = 0 } = options;
+    const cache = caches.default;
+    const responseClone = response.clone();
+    // Modify the clone's headers directly instead of creating a new Response
+    responseClone.headers.set('Cache-Control', `max-age=${ttl}${staleWhileRevalidate > 0 ? `, stale-while-revalidate=${staleWhileRevalidate}` : ''}`);
+    responseClone.headers.delete('Set-Cookie');
+    await cache.put(request, responseClone);
+  }
+
+  async fetch(request, env, executionCtx) {
+    const url = new URL(request.url);
+    const path = url.pathname;
+    const method = request.method;
+
+    // 1. Static route (fast lookup via nested map)
+    const methodMap = this.staticRoutes.get(method);
+    if (methodMap) {
+      const staticRoute = methodMap.get(path);
+      if (staticRoute) {
+        return this._handleRoute(staticRoute.handler, staticRoute.options, request, env, executionCtx, {}, url);
+      }
+    }
+
+    // 2. Dynamic route via trie
+    const trie = this.dynamicTries[method];
+    if (trie) {
+      const match = trie.match(path);
+      if (match) {
+        return this._handleRoute(match.handler, match.options, request, env, executionCtx, match.params, url);
+      }
+    }
+
+    return new Response('Not Found', { status: 404 });
+  }
+
+  async _handleRoute(handler, options, request, env, executionCtx, params, parsedUrl) {
+    const ctx = new Context(request, env, executionCtx, params, parsedUrl);
+
+    if (!(await this._validate(ctx, options.validate))) {
+      return ctx.text('Validation failed', 400);
+    }
+
+    if (!(await this._processAuth(ctx, options.auth))) {
+      return ctx.text('Unauthorized', 401);
+    }
+
+    if (!(await this._processRateLimit(ctx, options.rateLimit))) {
+      return ctx.text('Too Many Requests', 429);
+    }
+
+    // Caching (GET only)
+    let cachedResponse = null;
+    if (options.cache && request.method === 'GET') {
+      cachedResponse = await this._cacheGet(request);
+      if (cachedResponse) {
+        this._processCors(ctx, options.cors);
+        this._processLog(ctx, options.log);
+        return cachedResponse;
+      }
+    }
+
+    this._processCors(ctx, options.cors);
+
+    let response;
+    try {
+      const result = await handler(ctx);
+      if (result && result.__isJSX) {
+        response = ctx.html(renderToString(result));
+      } else {
+        response = result instanceof Response ? result : ctx.text('OK');
+      }
+      ctx.status = response.status;
+    } catch (err) {
+      console.error(err);
+      response = ctx.text('Internal Server Error', 500);
+      ctx.status = 500;
+    }
+
+    // Cache successful GET responses
+    if (options.cache && request.method === 'GET' && response.status === 200) {
+      ctx.executionCtx.waitUntil(this._cachePut(request, response.clone(), options.cache));
+    }
+
+    if (options.compress) {
+      response = this._processCompress(request, response);
+    }
+
+    this._processLog(ctx, options.log);
+
+    return response;
+  }
+}

package/edge-server.min.js

@@ -0,0 +1,12 @@
+class Context{constructor(r,e,x,p={},u=null){this.req=r;this.env=e;this.executionCtx=x;this.params=p;this.status=200;this.headers=new Headers;this._rawCookie=r.headers.get("Cookie")||"";this._cookies=null;this.url=u||new URL(r.url)}_ensureCookies(){if(this._cookies===null){let c={};if(this._rawCookie){for(const p of this._rawCookie.split(";")){const t=p.trim();if(!t)continue;const i=t.indexOf("=");if(i>0){const n=decodeURIComponent(t.slice(0,i)),v=decodeURIComponent(t.slice(i+1));c[n]=v}}}this._cookies=c}return this._cookies}getCookie(n){return this._ensureCookies()[n]??null}get query(){return this.url.searchParams}setCookie(n,v,o={}){let c=`${encodeURIComponent(n)}=${encodeURIComponent(v)}`;if(o.path)c+=`; Path=${o.path}`;if(o.domain)c+=`; Domain=${o.domain}`;if(o.maxAge!==undefined)c+=`; Max-Age=${o.maxAge}`;if(o.expires)c+=`; Expires=${o.expires.toUTCString()}`;if(o.secure)c+=`; Secure`;if(o.httpOnly)c+=`; HttpOnly`;if(o.sameSite)c+=`; SameSite=${o.sameSite}`;this.headers.append("Set-Cookie",c)}deleteCookie(n,o={}){this.setCookie(n,"",{...o,maxAge:0,expires:new Date(0)})}text(d,s=this.status,h={}){const r=this._buildHeaders(h);r.set("Content-Type","text/plain");return new Response(d,{status:s,headers:r})}json(d,s=this.status,h={}){const r=this._buildHeaders(h);r.set("Content-Type","application/json");return new Response(JSON.stringify(d),{status:s,headers:r})}html(d,s=this.status,h={}){const r=this._buildHeaders(h);r.set("Content-Type","text/html");return new Response(d,{status:s,headers:r})}_buildHeaders(h){if(Object.keys(h).length===0)return this.headers;const r=new Headers(this.headers);for(const k in h)if(Object.prototype.hasOwnProperty.call(h,k))r.set(k,h[k]);return r}}
+const Fragment=Symbol("Fragment");
+function jsx(t,p,...c){const n=p||{},f=c.flat(1/0);return{type:t,props:n,children:f,__isJSX:!0}}
+function renderToString(n){if(n==null||typeof n=="boolean")return"";if(typeof n=="string"||typeof n=="number")return escapeHtml(String(n));if(Array.isArray(n)){const a=[];for(let i=0;i<n.length;i++)a.push(renderToString(n[i]));return a.join("")}if(!n.__isJSX)return escapeHtml(String(n));const{type:t,props:p,children:c}=n;if(t===Fragment){const a=[];for(let i=0;i<c.length;i++)a.push(renderToString(c[i]));return a.join("")}if(typeof t=="symbol")return"";if(typeof t=="function")return renderToString(t({...p,children:c}));const ap=[];for(const k in p){if(k==="children")continue;const v=p[k];if(v==null||v===!1)continue;if(k==="className")ap.push(` class="${escapeHtml(v)}"`);else if(k==="htmlFor")ap.push(` for="${escapeHtml(v)}"`);else if(k.startsWith("on")&&typeof v=="function")continue;else if(k==="style"&&typeof v=="object"){const s=Object.entries(v).map(([a,b])=>`${camelToKebab(a)}:${b}`).join(";");ap.push(` style="${escapeHtml(s)}"`)}else if(v===!0)ap.push(` ${k}`);else ap.push(` ${k}="${escapeHtml(String(v))}"`)}const at=ap.join(""),cp=[];for(let i=0;i<c.length;i++)cp.push(renderToString(c[i]));return `<${t}${at}>${cp.join("")}</${t}>`}
+const HTML_ESCAPE_MAP={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#039;"};
+function escapeHtml(s){return s.replace(/[&<>"']/g,c=>HTML_ESCAPE_MAP[c])}
+function camelToKebab(s){return s.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()}
+class TrieNode{constructor(){this.children=new Map;this.paramChild=null;this.paramName=null;this.handler=null}}
+class RouteTrie{constructor(){this.root=new TrieNode}add(p,h,o){const s=p.split("/").filter(Boolean);let n=this.root;for(const seg of s){if(seg.startsWith(":")){if(!n.paramChild){n.paramChild=new TrieNode;n.paramName=seg.slice(1)}n=n.paramChild}else{if(!n.children.has(seg))n.children.set(seg,new TrieNode);n=n.children.get(seg)}}n.handler={handler:h,options:o}}match(p){const s=p.split("/").filter(Boolean);let n=this.root;const pr={};for(const seg of s){if(n.children.has(seg))n=n.children.get(seg);else if(n.paramChild){pr[n.paramName]=seg;n=n.paramChild}else return null}return n.handler?{handler:n.handler.handler,options:n.handler.options,params:pr}:null}}
+const HTTP_METHODS=["GET","POST","PUT","DELETE","PATCH","OPTIONS","HEAD"];
+class Edge{constructor(){this.staticRoutes=new Map;for(const m of HTTP_METHODS)this.staticRoutes.set(m,new Map);this.dynamicTries={};for(const m of HTTP_METHODS)this.dynamicTries[m]=new RouteTrie;this.authKvBinding="AUTH_KV";this.rateLimitKvBinding="RATE_LIMIT_KV";this.defaults={cors:{origin:"*",methods:"GET, POST, PUT, DELETE, PATCH, OPTIONS, HEAD"}};this.scheduledHandler=null}_addRoute(m,p,o,h){if(typeof o=="boolean")o={auth:o};if(typeof o=="function"){h=o;o={}}if(typeof h!="function")throw new Error(`Handler for ${m} ${p} must be a function`);const mo={...this.defaults,...(o||{})};if(!p.includes(":"))this.staticRoutes.get(m).set(p,{handler:h,options:mo});else this.dynamicTries[m].add(p,h,mo)}get(p,o,h){this._addRoute("GET",p,o,h)}post(p,o,h){this._addRoute("POST",p,o,h)}put(p,o,h){this._addRoute("PUT",p,o,h)}delete(p,o,h){this._addRoute("DELETE",p,o,h)}patch(p,o,h){this._addRoute("PATCH",p,o,h)}options(p,o,h){this._addRoute("OPTIONS",p,o,h)}head(p,o,h){this._addRoute("HEAD",p,o,h)}scheduled(h){this.scheduledHandler=h}async _processAuth(c,f){if(!f)return!0;const t=c.getCookie("auth_token")||c.req.headers.get("Authorization")?.replace(/^Bearer\s+/i,"");if(!t)return!1;const kv=c.env[this.authKvBinding];if(!kv)return!1;const d=await kv.get(t);if(!d)return!1;if(typeof f=="object"){try{const pl=JSON.parse(d);if(f.role&&pl.role!==f.role)return!1;if(f.scopes){const us=pl.scopes||[];if(!f.scopes.every(s=>us.includes(s)))return!1}}catch{}}return!0}async _processRateLimit(c,f){if(!f)return!0;const o=f===!0?{}:f,{max=100,window=60}=o;const key=`rl:${c.req.headers.get("CF-Connecting-IP")||"unknown"}`;const kv=c.env[this.rateLimitKvBinding];if(!kv)return!0;let cnt=await kv.get(key,"json")||0;if(cnt>=max)return!1;cnt++;await kv.put(key,JSON.stringify(cnt),{expirationTtl:window});return!0}_processCors(c,f){if(!f)return;const o=typeof f=="object"?f:this.defaults.cors;c.headers.set("Access-Control-Allow-Origin",o.origin||"*");c.headers.set("Access-Control-Allow-Methods",o.methods||"GET, POST, PUT, DELETE, PATCH, OPTIONS, HEAD");c.headers.set("Access-Control-Allow-Headers",o.headers||"Content-Type, Authorization");c.headers.set("Access-Control-Max-Age","86400")}_processLog(c,f){if(f)console.log(`${c.req.method} ${c.req.url} - ${c.status}`)}_processCompress(req,res){const ae=req.headers.get("Accept-Encoding")||"";let enc=null;if(ae.includes("gzip"))enc="gzip";else if(ae.includes("deflate"))enc="deflate";else if(ae.includes("br"))enc="br";if(!enc||!res.body)return res;const st=res.body.pipeThrough(new CompressionStream(enc));const nh=new Headers(res.headers);nh.set("Content-Encoding",enc);nh.set("Vary","Accept-Encoding");return new Response(st,{status:res.status,statusText:res.statusText,headers:nh})}async _validate(c,f){if(!f)return!0;if(typeof f=="function"){try{return!!(await f(c))}catch{return!1}}return!0}async _cacheGet(req){const cache=caches.default;return await cache.match(req)||null}async _cachePut(req,res,f){if(!f)return;const o=f===!0?{}:f,{ttl=3600,staleWhileRevalidate=0}=o;const cache=caches.default;const clone=res.clone();clone.headers.set("Cache-Control",`max-age=${ttl}${staleWhileRevalidate>0?`, stale-while-revalidate=${staleWhileRevalidate}`:""}`);clone.headers.delete("Set-Cookie");await cache.put(req,clone)}async fetch(req,env,ctx){const url=new URL(req.url),path=url.pathname,method=req.method;const mm=this.staticRoutes.get(method);if(mm){const sr=mm.get(path);if(sr)return this._handleRoute(sr.handler,sr.options,req,env,ctx,{},url)}const trie=this.dynamicTries[method];if(trie){const m=trie.match(path);if(m)return this._handleRoute(m.handler,m.options,req,env,ctx,m.params,url)}return new Response("Not Found",{status:404})}async _handleRoute(h,o,req,env,ctx,p,url){const c=new Context(req,env,ctx,p,url);if(!(await this._validate(c,o.validate)))return c.text("Validation failed",400);if(!(await this._processAuth(c,o.auth)))return c.text("Unauthorized",401);if(!(await this._processRateLimit(c,o.rateLimit)))return c.text("Too Many Requests",429);let cached=null;if(o.cache&&req.method==="GET"){cached=await this._cacheGet(req);if(cached){this._processCors(c,o.cors);this._processLog(c,o.log);return cached}}this._processCors(c,o.cors);let res;try{const r=await h(c);if(r&&r.__isJSX)res=c.html(renderToString(r));else res=r instanceof Response?r:c.text("OK");c.status=res.status}catch(e){console.error(e);res=c.text("Internal Server Error",500);c.status=500}if(o.cache&&req.method==="GET"&&res.status===200)c.executionCtx.waitUntil(this._cachePut(req,res.clone(),o.cache));if(o.compress)res=this._processCompress(req,res);this._processLog(c,o.log);return res}}
+export{Fragment,jsx,renderToString,Edge};

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@lengkapp/edge",
+  "version": "0.0.1",
+  "description": "Edge framework used by Lengkapp",
+  "main": "edge-server.js",              
+  "browser": "edge-client.js",
+  "exports": {
+    ".": {
+      "browser": "./edge-client.js",
+      "node": "./edge-server.js",
+      "default": "./edge-server.js"
+    },
+    "./client": "./edge-client.js",
+    "./server": "./edge-server.js",
+    "./client.min": "./edge-client.min.js",
+    "./server.min": "./edge-server.min.js",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "edge-client.js",
+    "edge-client.min.js",
+    "edge-server.js",
+    "edge-server.min.js"
+  ],
+  "scripts": {
+    "test": "echo \"No tests yet\""
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": ["cloudflare workers","minimal server library","minimal client library"],
+  "author": "Yasir Haris",
+  "license": "MIT"
+}

package/readme.md

@@ -0,0 +1,118 @@
+sample usage of edge.js
+```js
+import { Edge } from './edge.js';
+import { HomePage, AboutPage } from './Page.jsx'; // bundler resolves .jsx
+
+const app = new Edge();
+
+// Basic text
+app.get('/', (ctx) => {
+  return ctx.text('Hello from Edge!');
+});
+
+app.get('/home', (ctx) => {
+  // The component returns a JSX element; Edge automatically renders it to HTML
+  return ctx.html(renderToString(HomePage()));
+});
+
+app.get('/about', (ctx) => {
+  return ctx.html(renderToString(AboutPage()));
+});
+
+// JSON with route params
+app.get('/users/:id', (ctx) => {
+  return ctx.json({ userId: ctx.params.id });
+});
+
+// POST JSON
+app.post('/users', async (ctx) => {
+  const body = await ctx.req.json();
+  return ctx.json({ created: true, user: body }, 201);
+});
+
+// Auth (requires AUTH_KV binding)
+app.get('/protected', { auth: true }, (ctx) => {
+  return ctx.text('Authenticated area');
+});
+
+// Role‑based auth
+app.get('/admin', { auth: { role: 'admin' } }, (ctx) => {
+  return ctx.text('Admin only');
+});
+
+// Rate limiting
+app.get('/limited', { rateLimit: { max: 5, window: 60 } }, (ctx) => {
+  return ctx.text('Rate limited endpoint');
+});
+
+// Caching (GET only, 60s TTL)
+app.get('/cached', { cache: { ttl: 60 } }, (ctx) => {
+  return ctx.text('Cached response');
+});
+
+// CORS
+app.get('/cors', { cors: true }, (ctx) => {
+  return ctx.json({ message: 'CORS enabled' });
+});
+
+// Logging
+app.get('/log', { log: true }, (ctx) => {
+  return ctx.text('This request is logged');
+});
+
+// Compression
+app.get('/compress', { compress: true }, (ctx) => {
+  return ctx.text('x'.repeat(10000));
+});
+
+// Cookies
+app.get('/set-cookie', (ctx) => {
+  ctx.setCookie('session', 'abc123', { httpOnly: true, path: '/' });
+  return ctx.text('Cookie set');
+});
+
+app.get('/get-cookie', (ctx) => {
+  const session = ctx.getCookie('session');
+  return ctx.text(`Cookie: ${session}`);
+});
+
+// Custom validation
+app.post('/submit', {
+  validate: (ctx) => ctx.req.headers.get('Authorization') === 'Bearer secret-token'
+}, (ctx) => ctx.text('Validated'));
+
+// Scheduled handler (cron)
+app.scheduled(async (event, env, ctx) => {
+  console.log('Cron job:', event.cron);
+  // Do periodic work here
+});
+
+
+
+export default {
+  fetch: (request, env, ctx) => app.fetch(request, env, ctx),
+  scheduled: (event, env, ctx) => {
+    if (app.scheduledHandler) return app.scheduledHandler(event, env, ctx);
+  }
+};
+```
+
+
+```rust
+name = "my-edge-app"
+main = "worker.js"
+compatibility_date = "2024-09-01"
+
+# KV namespaces (if using auth/rate limit)
+[[kv_namespaces]]
+binding = "AUTH_KV"
+id = "your-auth-kv-id"
+
+[[kv_namespaces]]
+binding = "RATE_LIMIT_KV"
+id = "your-ratelimit-kv-id"
+
+# Cron triggers
+[triggers]
+crons = ["*/5 * * * *"]
+```