@lengkapp/edge 0.0.3 → 0.0.5

package/edge-client.js

@@ -1,279 +1,287 @@
 (() => {
-      'use strict';
+  'use strict';
 
-      const d = document,
-            body = d.body,
-            head = d.head;
+  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'
-      ]);
+  // ---------- 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
+  // 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 {
+  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;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
 
-      // ---------- 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();
+    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>`;
+  // ---------- 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>`;
 
-      // ---------- Resource helpers ----------
-      const parseHeaderList = (str) => {
-        if (!str) return [];
-        return str.replace(/^\[|\]$/g, '').split(',')
-                  .map(s => s.trim().replace(/^['"]|['"]$/g, ''))
-                  .filter(Boolean);
-      };
+  // ---------- 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);
-          }
-        });
-      };
+  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;
-      };
+  // ---------- 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;
-      };
+  // 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';
+  // ---------- 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 = {};
+    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';
-          }
-        }
+    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;
-        }
+    // 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));
+    container.replaceChildren(skeletonTemplate.content.cloneNode(true));
 
-        try {
-          const res = await fetch(url, { method: post ? 'POST' : 'GET', body: bodyData, headers });
+    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');
+      // 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';
-        }
-      };
+      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;
-      };
+  // ---------- 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';
+  // ---------- Element initialisation (no per‑element listeners) ----------
+  const initElement = (el) => {
+    if (el.dataset.initialized === 'true') return;
+    el.dataset.initialized = 'true';
 
-        const events = getTriggerEvents(el);
+    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
-      };
+    // 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'
-      ]);
+  // ---------- 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);
-      });
+  // 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;
+  // ---------- 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 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);
-        }
+  const mo = new MutationObserver((mutations) => {
+    mutations.forEach(m => {
+      m.addedNodes.forEach(node => {
+        if (node.nodeType === 1) mutationQueue.push(node);
       });
-      mo.observe(body, { childList: true, subtree: true });
+    });
+    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);
-      };
+  // ---------- Initialisation on DOM ready ----------
+  const initAll = () => {
+    d.querySelectorAll('[_get], [_post]').forEach(initElement);
+  };
 
-      if (d.readyState === 'loading') {
-        d.addEventListener('DOMContentLoaded', initAll, { once: true });
-      } else {
-        initAll();
-      }
-    })();
+  if (d.readyState === 'loading') {
+    d.addEventListener('DOMContentLoaded', initAll, { once: true });
+  } else {
+    initAll();
+  }
+})();