fix: stopflag had wrong position

KevinBLT · Jan 11, 2024 · 3032a26 · 3032a26
1 parent 7e0d688
commit 3032a26
Show file tree

Hide file tree

Showing 13 changed files with 107 additions and 84 deletions.
diff --git a/packages/@hec.js/ui/example/component/component.js b/packages/@hec.js/ui/example/component/component.js
@@ -2,6 +2,8 @@ import { component, templateByName } from '../../lib/index.js';
 
 component('my-counter', { count: 0, camelCase: '' }, ({ count, camelCase }) => {
 
+  console.log('EXECUTE')
+
   let isDown = false;
 
   const mousedown = async () => {
@@ -16,8 +18,7 @@ component('my-counter', { count: 0, camelCase: '' }, ({ count, camelCase }) => {
 
   }
 
-  return templateByName(
-    new URL('./component.html', import.meta.url), 
+  return templateByName('./component.html', 
     {
       count,
       mousedown,

diff --git a/packages/@hec.js/ui/example/component/index.html b/packages/@hec.js/ui/example/component/index.html
@@ -5,16 +5,23 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>hec.js :: Component</title>
     <script type="module" async src="./component.js"></script>
+
+    <style>
+      my-counter {
+        min-height: 10rem;
+        display: block;
+      }
+    </style>
   </head>
   <body>
 
-    <my-counter data-for="let e of list" camelCase="{{ e.count }}" count="{{ e.count }}"></my-counter>
+    <my-counter data-lazy data-for="let e of list" camelCase="{{ e.count }}" count="{{ e.count }}"></my-counter>
 
     <script type="module">
       import { templateByNode } from '../../lib/index.js';
 
       templateByNode(document.body, {
-        list: Array.from({ length: Math.round(Math.random() * 100)}, () => (
+        list: Array.from({ length: Math.round(Math.random() * 1000)}, () => (
           { count: Math.round(Math.random() * 0xffffff) })
         ),
       });

diff --git a/packages/@hec.js/ui/example/lazy-list/index.html b/packages/@hec.js/ui/example/lazy-list/index.html
@@ -9,7 +9,6 @@
   <body>
     <ul>
       <li data-lazy data-include="part.html" data-for="let person of persons"></li>
-      <li data-lazy data-include="part.html" data-for="let person of persons"></li>
     </ul>
   </body>
 </html>
diff --git a/packages/@hec.js/ui/example/lazy-list/lazy-list.js b/packages/@hec.js/ui/example/lazy-list/lazy-list.js
@@ -1,9 +1,8 @@
-import { templateByNode } from '../../lib/index.js';
+import { signal, templateByNode } from '../../lib/index.js';
+import { generateRandomName } from '../nested-signal/util.js';
 
-templateByNode(document.body, {
-  persons: [
-    { name: 'Herbert' },
-    { name: 'Klaus' },
-    { name: 'Günther' },
-  ]
-})
+const persons = Array.from({ length: 500 }, () => {
+  return  { name: generateRandomName }
+});
+
+templateByNode(document.body, { persons });
diff --git a/packages/@hec.js/ui/lib/src/component.js b/packages/@hec.js/ui/lib/src/component.js
@@ -66,10 +66,9 @@ export function component(name, props, fn) {
     }
 
     async connectedCallback() {
-      const hidden = this.closest('[hidden]');
-
-      if (this.hasAttribute('data-lazy') && hidden) {
-        await notifyVisible(this, hidden);
+
+      if (this.hasAttribute('data-lazy')) {
+        await notifyVisible(this);
         this.removeAttribute('data-lazy');
       }
 

diff --git a/packages/@hec.js/ui/lib/src/notify/visible.js b/packages/@hec.js/ui/lib/src/notify/visible.js
@@ -1,29 +1,29 @@
-/** 
- * @param { Element } node 
- * @param { Element | undefined } hidden 
- */
-export function notifyVisible(node, hidden = null) {
-  hidden ??= node.closest('[hidden]');
+/** @type { WeakMap<Node, ((value?: any) => void)[]> } */
+const notifiers = new WeakMap();
 
-  return new Promise((resolve, reject) => {
-    const observer = new MutationObserver(() => {
-      hidden = node.closest('[hidden]');
-
-      if (hidden) {
-        return observer.observe(hidden, {
-          attributes: true, 
-          attributeFilter: ['hidden']
-        });
+const observer = new IntersectionObserver((entries) => {
+
+  for (const entry of entries) {
+    if (entry.isIntersecting && notifiers.has(entry.target)) {
+      for (const resolve of notifiers.get(entry.target)) {
+        resolve();
       }
 
-      observer.disconnect();
-
-      resolve();
-    });
-
-    observer.observe(hidden, {
-      attributes: true, 
-      attributeFilter: ['hidden']
-    });
+      notifiers.delete(entry.target);
+      observer.unobserve(entry.target);
+    }
+  }
+}, {
+  rootMargin: '256px',
+});
+
+/** @param { Element } node */
+export function notifyVisible(node) {
+  return new Promise((resolve) => {
+    const resolvers = notifiers.get(node) ?? [];
+
+    resolvers.push(resolve);
+    notifiers.set(node, resolvers);
+    observer.observe(node);
   });
 }
diff --git a/packages/@hec.js/ui/lib/src/plugins.js b/packages/@hec.js/ui/lib/src/plugins.js
@@ -22,12 +22,12 @@ import { dataRoutePlugin } from "./plugins/data-route.js";
  */
 export const plugins = [ 
   dataForPlugin,
-  dataIncludePlugin,
-  dataRoutePlugin,
   dataIfPlugin,
+  dataRoutePlugin,
   dataPreloadPlugin,
+  dataIncludePlugin,
   dataOnPlugin,
   dataBindPlugin,
-  dataLazyPlugin,
   dataMatchPlugin,
+  dataLazyPlugin,
 ];
diff --git a/packages/@hec.js/ui/lib/src/plugins/data-for.js b/packages/@hec.js/ui/lib/src/plugins/data-for.js
@@ -1,6 +1,7 @@
 import { isSignal } from "../signal.js";
 import { templateByNode } from "../template.js";
 import { f, prop } from "../props.js";
+import { loaded } from "./data-include.js";
 
 const done = new WeakSet();
 
@@ -24,6 +25,8 @@ export const dataForPlugin = {
 
     node.replaceWith(placeholder);
 
+    loaded.add(node);
+
     const clear = () => {
       /** @type { Node } */
       let n = placeholder;

diff --git a/packages/@hec.js/ui/lib/src/plugins/data-include.js b/packages/@hec.js/ui/lib/src/plugins/data-include.js
@@ -1,14 +1,14 @@
 import { notifyVisible } from '../notify/visible.js';
 import { templateByNode } from '../template.js';
 
-const loaded = new WeakSet();
+export const loaded = new WeakSet();
 
 /** @type { import("../plugins.js").Plugin } */
 export const dataIncludePlugin = {
   select: '[data-include]',
 
   run: (node, props) => {
-    
+
     if (loaded.has(node) || node.children.length) {
       return;
     }
@@ -41,8 +41,8 @@ export const dataIncludePlugin = {
       }
     }
 
-    if (hidden) {
-      notifyVisible(node, hidden).then(execute);
+    if (node.hasAttribute('data-lazy')) {
+      notifyVisible(node).then(execute);
     } else {
       execute();
     }    

diff --git a/packages/@hec.js/ui/lib/src/plugins/data-lazy.js b/packages/@hec.js/ui/lib/src/plugins/data-lazy.js
@@ -27,17 +27,12 @@ export const dataLazyPlugin = {
       node.removeAttribute('data-lazy');
     }
 
-    if (hidden) {
-
-      if (className) {
-        node.addEventListener('::load',   () => node.classList.add(className),    { once: true });
-        node.addEventListener('::loaded', () => node.classList.remove(className), { once: true });
-      }
-
-      notifyVisible(node, hidden).then(execute);
-      stopTemplate();
-    } else {
-      node.removeAttribute('data-lazy');
+    if (className) {
+      node.addEventListener('::load',   () => node.classList.add(className),    { once: true });
+      node.addEventListener('::loaded', () => node.classList.remove(className), { once: true });
     }
+
+    notifyVisible(node).then(execute);
+    stopTemplate();
   }
 }
diff --git a/packages/@hec.js/ui/lib/src/plugins/data-preload.js b/packages/@hec.js/ui/lib/src/plugins/data-preload.js
@@ -1,3 +1,6 @@
+import { notifyVisible } from "../notify/visible.js";
+import { preload } from "../preload.js";
+
 const loaded = new WeakSet();
 
 /** @type { import("../plugins.js").Plugin } */
@@ -9,25 +12,26 @@ export const dataPreloadPlugin = {
     if (loaded.has(node) || node.hidden) {
       return;
     }
-
-    loaded.add(node);
-
-    const hrefs = node.dataset.preload.split(',');
 
-    const addLink = (href, as) => {
-      const link = document.createElement('link');
+    loaded.add(node);
 
-      link.rel  = 'preload';
-      link.as   = as;
-      link.href = href;
+    const execute = () => {
+      const hrefs = node.dataset.preload.split(',');
+
+      for (const href of hrefs) {
+        const v = href.split(':');
 
-      document.head.append(link);
+        preload({
+          href: v[0], 
+          as: v[1] ?? 'fetch',
+        });
+      }
     }
-
-    for (const href of hrefs) {
-      const v = href.split(':');
 
-      addLink(v[0], v[1] ?? 'fetch');
-    }
+    if (node.hasAttribute('data-lazy')) {
+      notifyVisible(node).then(execute);
+    } else {
+      execute();
+    }  
   }
 }
diff --git a/packages/@hec.js/ui/lib/src/preload.js b/packages/@hec.js/ui/lib/src/preload.js
@@ -0,0 +1,17 @@
+/**
+ * @param {{
+ *   href: string,
+ *   type?: string,
+ *   as: string,
+ *   crossOrigin?: string
+ * }} attributes 
+ */
+export const preload = (attributes) => {
+  const link = document.createElement('link');
+
+  Object.assign(link, attributes);
+
+  link.rel = 'preload';
+
+  document.head.append(link);
+}
diff --git a/packages/@hec.js/ui/lib/src/template.js b/packages/@hec.js/ui/lib/src/template.js
@@ -19,7 +19,7 @@ export function templateByName(name, props = {}) {
   }
 
   /** @type { HTMLTemplateElement } */
-  let tmpl = document.querySelector(`template[id="${name}"]`);
+  let tmpl = document.querySelector(`template[name="${name}"]`);
 
   if (!tmpl) {
     /** @type { HTMLMetaElement } */
@@ -41,7 +41,7 @@ export function templateByName(name, props = {}) {
     return templatesLoading[name].then(e => templateByNode(e.content.cloneNode(true), props));
   }
 
-  return templateByNode(tmpl.content.cloneNode(true).lastChild, props);
+  return templateByNode(tmpl.content.cloneNode(true), props);
 }
 
 /**
@@ -146,25 +146,24 @@ export function templateByNode(template, props = {}) {
     }
 
     if (node instanceof HTMLElement) {
+      const attributeNames = node.getAttributeNames();
 
       setPropsOf(node, props);
 
       for (const plugin of plugins) {
         if (node.matches(plugin.select)) {
-          plugin.run(node, props, () => stopFlag = true);
-
-          if (stopFlag) {
-            return;
-          }
+          plugin.run(node, props, () => stopFlag = true);    
         }
       }
 
-      const attributeNames = node.getAttributeNames();
-
+      if (stopFlag) {
+        return;
+      }
+
       for (const attributeName of attributeNames) {
         const attribute = node.getAttribute(attributeName);
 
-        if (attribute.includes('{{')) {
+        if (attribute?.includes('{{')) {
 
           bindExpressions(attribute, (text) => {
             node.setAttribute(attributeName, text.trim().replace(/ +/, ' '))
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,7 +9,6 @@ @@
       <body>
         <ul>
           <li data-lazy data-include="part.html" data-for="let person of persons"></li>
-          <li data-lazy data-include="part.html" data-for="let person of persons"></li>
         </ul>
       </body>
     </html>