@lengkapp/edge 0.0.5 → 0.0.6

package/edge-client.js

@@ -1,284 +1,303 @@
-(() => {
-  'use strict';
+(function () {
+  if (window.__edge) return;
+  window.__edge = true;
 
-  const d = document,
-    body = d.body,
-    head = d.head;
+  var d = document, head = d.head, root = d.documentElement;
 
-  // ---------- Constants and caches ----------
-  const VALID_EVENTS = new Set([
+  var METHODS = ['get', 'post', 'put', 'patch', 'delete'];
+  var METHOD_ATTRS = METHODS.map(function (m) { return '_' + m; });
+  var HAS_BODY = { post: 1, put: 1, patch: 1 };
+  var SEL = METHOD_ATTRS.map(function (a) { return '[' + a + ']'; }).join(',');
+
+  var DELEGATABLE = 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'
+    'mousemove', 'contextmenu', 'focusin', 'focusout', 'keydown', 'keyup',
+    'keypress', 'change', 'input', 'submit', 'reset', 'wheel',
+    'touchstart', 'touchend', 'touchmove'
   ]);
 
-  // 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
+  var bound = new WeakSet();
+  var running = new WeakSet();
+  var targetCache = new WeakMap();
+  var wasVisible = new WeakMap();
+  var ioObservers = new Map();
+  var injected = new Set();
+  var executedSrc = new Set();
+
+  var style = d.createElement('style');
+  style.textContent =
+    '.aj-skel-wrap{box-sizing:border-box;width:100%;height:100%;min-width:80px;min-height:48px;' +
+    'max-width:100%;max-height:600px;display:flex;align-items:center;justify-content:center}' +
+    '.aj-skel-wrap svg{width:1.75em;height:1.75em;color:#c7c7c7;' +
+    'animation:aj-pulse 1.4s ease-in-out infinite}' +
+    '@keyframes aj-pulse{0%,100%{opacity:.35;transform:scale(.92)}50%{opacity:1;transform:scale(1)}}' +
+    '.aj-retry-wrap{box-sizing:border-box;width:100%;height:100%;min-width:80px;min-height:48px;' +
+    'max-height:600px;display:flex;align-items:center;justify-content:center}' +
+    '.aj-retry{width:2.5em;height:2.5em;padding:0;cursor:pointer;background:#007bff;color:#fff;' +
+    'border:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;' +
+    'transition:background .15s ease}' +
+    '.aj-retry:hover{background:#0056b3}' +
+    '.aj-retry:hover svg{transform:rotate(-90deg)}' +
+    '.aj-retry svg{width:1.25em;height:1.25em;transition:transform .3s ease}';
+  head.appendChild(style);
 
-  // ---------- Injected base styles ----------
-  const injectBaseStyles = () => {
-    if (d.getElementById('df-style')) return;
-    const style = d.createElement('style');
-    style.id = 'df-style';
-    style.textContent = `
-.df-skeleton {
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
-  background-size: 200% 100%;
-  animation: df-shimmer 1.5s ease-in-out infinite;
-  border-radius: inherit;
-  pointer-events: none;
-  box-sizing: border-box;
-}
-@keyframes df-shimmer {
-  0% {
-    background-position: -200% 0;
+  function cfg(el) {
+    var attr = null;
+    for (var i = 0; i < METHOD_ATTRS.length; i++) {
+      if (el.hasAttribute(METHOD_ATTRS[i])) { attr = METHOD_ATTRS[i]; break; }
+    }
+    if (!attr) return null;
+    var method = attr.slice(1);
+    return {
+      url: el.getAttribute(attr),
+      method: method.toUpperCase(),
+      hasBody: !!HAS_BODY[method],
+      target: el.getAttribute('_target'),
+      trigger: el.getAttribute('_trigger'),
+      form: el.getAttribute('_form'),
+      json: el.getAttribute('_json'),
+      skeleton: el.getAttribute('_skeleton') !== 'false',
+      retry: el.getAttribute('_retry') !== 'false'
+    };
   }
-  100% {
-    background-position: 200% 0;
+
+  function resolveTarget(el, c) {
+    if (!c.target || c.target === 'this') return el;
+    var cached = targetCache.get(el);
+    if (cached && cached.isConnected) return cached;
+    var found = d.querySelector(c.target);
+    if (found) targetCache.set(el, found);
+    return found;
   }
-}
 
-          .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();
+  function triggersFor(c) {
+    return (c.trigger || (c.target === 'this' ? 'load' : 'click'))
+      .split(',').map(function (s) { return s.trim().toLowerCase(); });
+  }
 
-  // ---------- Pre‑built templates (cloned on use) ----------
-  const skeletonTemplate = d.createElement('template');
-  skeletonTemplate.innerHTML = `
-        <div class="df-skeleton"></div>`;
-  const retryTemplate = d.createElement('template');
-  retryTemplate.innerHTML = `<span class="df-retry">Retry</span>`;
+  function isActuallyVisible(el) {
+    var s = getComputedStyle(el);
+    if (s.display === 'none' || s.visibility === 'hidden' || s.opacity === '0') return false;
+    var r = el.getBoundingClientRect();
+    return r.width > 0 && r.height > 0;
+  }
 
-  // ---------- Resource helpers ----------
-  const parseHeaderList = (str) => {
-    if (!str) return [];
-    return str.replace(/^\[|\]$/g, '').split(',')
-      .map(s => s.trim().replace(/^['"]|['"]$/g, ''))
-      .filter(Boolean);
-  };
+  var SKELETON_ICON =
+    '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" ' +
+    'fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" ' +
+    'stroke-linejoin="round" aria-hidden="true">' +
+    '<path d="m12 14 4-4"/><path d="M3.34 19a10 10 0 1 1 17.32 0"/>' +
+    '</svg>';
 
-  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);
-      }
-    });
-  };
+  function showSkeleton(el) {
+    el.innerHTML = '<div class="aj-skel-wrap">' + SKELETON_ICON + '</div>';
+  }
 
-  // ---------- 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;
-  };
+  var RETRY_ICON =
+    '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" ' +
+    'fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" ' +
+    'stroke-linejoin="round" aria-hidden="true">' +
+    '<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/>' +
+    '</svg>';
 
-  // 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;
-  };
+  function showRetry(el, fn) {
+    el.innerHTML = '';
+    var wrap = d.createElement('div');
+    wrap.className = 'aj-retry-wrap';
+    var b = d.createElement('button');
+    b.type = 'button';
+    b.className = 'aj-retry';
+    b.setAttribute('aria-label', 'Retry');
+    b.innerHTML = RETRY_ICON;
+    b.addEventListener('click', fn, { once: true });
+    wrap.appendChild(b);
+    el.appendChild(wrap);
+  }
 
-  // ---------- Core run function ----------
-  const run = async (el) => {
-    if (el.dataset.running === 'true') return;
-    el.dataset.running = 'true';
+  function parseList(raw) {
+    if (!raw) return [];
+    return raw.replace(/^\[|\]$/g, '').split(',')
+      .map(function (s) { return s.trim().replace(/^['"]|['"]$/g, ''); })
+      .filter(Boolean);
+  }
 
-    const post = el.hasAttribute('_post');
-    const url = el.getAttribute('_post') || el.getAttribute('_get');
-    let bodyData, headers = {};
+  function injectResources(headers) {
+    parseList(headers.get('x-css-required')).forEach(function (url) {
+      if (injected.has(url)) return;
+      injected.add(url);
+      var link = d.createElement('link');
+      link.rel = 'stylesheet'; link.href = url;
+      head.appendChild(link);
+    });
+    parseList(headers.get('x-js-required')).forEach(function (url) {
+      if (injected.has(url)) return;
+      injected.add(url);
+      var s = d.createElement('script');
+      s.src = url;
+      head.appendChild(s);
+    });
+  }
 
-    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';
+  function execScripts(container) {
+    var scripts = Array.prototype.slice.call(container.querySelectorAll('script'));
+    var i = 0;
+    function next() {
+      if (i >= scripts.length) return;
+      var old = scripts[i];
+      var s = d.createElement('script');
+      for (var a = 0; a < old.attributes.length; a++) {
+        s.setAttribute(old.attributes[a].name, old.attributes[a].value);
+      }
+      if (old.nonce) s.nonce = old.nonce;
+      if (old.src) {
+        if (executedSrc.has(old.src)) { old.remove(); i++; next(); return; }
+        executedSrc.add(old.src);
+        s.onload = s.onerror = function () { i++; next(); };
+        old.replaceWith(s);
+      } else {
+        s.textContent = '{\n' + old.textContent + '\n}';
+        old.replaceWith(s);
+        i++; next();
       }
     }
+    next();
+  }
 
-    // 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;
-    }
-
-    container.replaceChildren(skeletonTemplate.content.cloneNode(true));
-
-    try {
-      const res = await fetch(url, { method: post ? 'POST' : 'GET', body: bodyData, headers });
+  function setContent(el, html) {
+    el.innerHTML = html;
+    execScripts(el);
+    bind(el);
+  }
 
-      // 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');
+  function doFetch(el, c) {
+    if (running.has(el)) return;
+    running.add(el);
 
-      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';
-    }
-  };
+    var target = resolveTarget(el, c);
+    if (!target) { running.delete(el); return; }
+    if (c.skeleton) showSkeleton(target);
 
-  // ---------- 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');
+    var opts = { method: c.method };
+    if (c.hasBody) {
+      if (c.json) {
+        var obj = {};
+        c.json.split(',').forEach(function (name) {
+          name = name.trim();
+          var input = d.querySelector('[name="' + name + '"]');
+          obj[name] = input ? input.value : undefined;
+        });
+        opts.headers = { 'Content-Type': 'application/json' };
+        opts.body = JSON.stringify(obj);
+      } else if (c.form) {
+        var form = d.getElementById(c.form);
+        opts.headers = { 'Content-Type': 'application/x-www-form-urlencoded' };
+        opts.body = form ? new URLSearchParams(new FormData(form)).toString() : '';
+      }
     }
-    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);
+    fetch(c.url, opts)
+      .then(function (res) {
+        if (!res.ok) throw new Error('HTTP ' + res.status);
+        injectResources(res.headers);
+        return res.text();
+      })
+      .then(function (html) { setContent(target, html); })
+      .catch(function (err) {
+        console.error(err);
+        if (c.retry) showRetry(target, function () { doFetch(el, c); });
+      })
+      .finally(function () { running.delete(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
-  };
+  var delegationInit = false;
+  function initDelegation() {
+    if (delegationInit) return;
+    delegationInit = true;
+    DELEGATABLE.forEach(function (evt) {
+      var isClickOrSubmit = evt === 'click' || evt === 'submit';
+      d.addEventListener(evt, function (e) {
+        var t = e.target;
+        if (!(t instanceof Element)) return;
+        var el = t.closest(SEL);
+        if (!el) return;
+        var c = cfg(el);
+        if (!c || triggersFor(c).indexOf(evt) === -1) return;
+        if (isClickOrSubmit) e.preventDefault();
+        doFetch(el, c);
+      }, isClickOrSubmit ? false : { passive: true });
+    });
+  }
 
-  // ---------- 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'
-  ]);
+  function bindOne(el) {
+    if (bound.has(el)) return;
+    bound.add(el);
+    var c = cfg(el);
+    if (!c) return;
 
-  // 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);
+    triggersFor(c).forEach(function (trig) {
+      if (trig === 'load' || trig === 'domcontentloaded' || trig === 'ready') {
+        queueMicrotask(function () { doFetch(el, c); });
+      } else if (trig === 'visible' || trig === 'intersect') {
+        wasVisible.set(el, false);
+        var obs = new IntersectionObserver(function (entries) {
+          entries.forEach(function (entry) {
+            if (!entry.target.isConnected) { obs.disconnect(); ioObservers.delete(el); return; }
+            var vis = entry.isIntersecting && isActuallyVisible(el);
+            if (vis && !wasVisible.get(el)) doFetch(el, c);
+            wasVisible.set(el, vis);
+          });
+        });
+        obs.observe(el);
+        ioObservers.set(el, obs);
+      } else if (!DELEGATABLE.has(trig)) {
+        el.addEventListener(trig, function () { doFetch(el, c); });
       }
-    }, isPassive ? { passive: true } : false);
-  });
+    });
+  }
 
-  // ---------- MutationObserver (batch processing) ----------
-  let mutationQueue = [];
-  let mutationScheduled = false;
+  function bind(subtreeRoot) {
+    if (subtreeRoot.nodeType !== 1) return;
+    if (subtreeRoot.matches && subtreeRoot.matches(SEL)) bindOne(subtreeRoot);
+    if (subtreeRoot.querySelectorAll) subtreeRoot.querySelectorAll(SEL).forEach(bindOne);
+  }
 
-  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);
+  function cleanup(removedRoot) {
+    if (!ioObservers.size) return;
+    ioObservers.forEach(function (obs, el) {
+      if (removedRoot === el || removedRoot.contains(el)) {
+        obs.disconnect();
+        ioObservers.delete(el);
+        bound.delete(el);
+      }
     });
-  };
+  }
 
-  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 });
+  var addQueue = new Set(), removeQueue = new Set(), flushScheduled = false;
+  function flush() {
+    flushScheduled = false;
+    var adds = Array.from(addQueue); addQueue.clear();
+    var rems = Array.from(removeQueue); removeQueue.clear();
+    adds.forEach(bind);
+    rems.forEach(cleanup);
+  }
+  function scheduleFlush() {
+    if (flushScheduled) return;
+    flushScheduled = true;
+    queueMicrotask(flush);
+  }
 
-  // ---------- Initialisation on DOM ready ----------
-  const initAll = () => {
-    d.querySelectorAll('[_get], [_post]').forEach(initElement);
-  };
+  new MutationObserver(function (mutations) {
+    mutations.forEach(function (m) {
+      m.addedNodes.forEach(function (n) { if (n.nodeType === 1) addQueue.add(n); });
+      m.removedNodes.forEach(function (n) { if (n.nodeType === 1) removeQueue.add(n); });
+    });
+    scheduleFlush();
+  }).observe(root, { childList: true, subtree: true });
 
+  function initAll() {
+    initDelegation();
+    bind(root);
+  }
   if (d.readyState === 'loading') {
     d.addEventListener('DOMContentLoaded', initAll, { once: true });
   } else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lengkapp/edge",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Edge framework used by Lengkapp",
   "main": "edge-server.js",
   "types": "./edge-server.d.ts",