fix: errors

KevinBLT · Jan 30, 2024 · 4c5d12b · 4c5d12b
1 parent 65d9836
commit 4c5d12b
Show file tree

Hide file tree

Showing 6 changed files with 116 additions and 103 deletions.
diff --git a/packages/@hec.js/api/package.json b/packages/@hec.js/api/package.json
@@ -7,7 +7,7 @@
   "main": "./lib/index.js",
   "types": "./lib/types/index.d.ts",
   "scripts": {
-    "types": "npx -p typescript tsc './lib/index.js' --declaration --allowJs --emitDeclarationOnly --outDir types && rm -rf ./lib/types && mv types ./lib/types"
+    "build:types": "npx -p typescript tsc './lib/index.js' --declaration --allowJs --emitDeclarationOnly --outDir types && rm -rf ./lib/types && mv types ./lib/types"
   },
   "dependencies": {
     "@hec.js/api": "file:./",

diff --git a/packages/@hec.js/ui/dist/hec.esm.min.js b/packages/@hec.js/ui/dist/hec.esm.min.js
diff --git a/packages/@hec.js/ui/dist/hec.min.js b/packages/@hec.js/ui/dist/hec.min.js
diff --git a/packages/@hec.js/ui/lib/src/plugins/data-lazy.js b/packages/@hec.js/ui/lib/src/plugins/data-lazy.js
@@ -1,5 +1,5 @@
 import { notifyVisible } from '../notify/visible.js';
-import { templateByNode } from '../template.js';
+import { executeNodeAttributesTemplate, templateByNode } from '../template.js';
 
 const loaded = new WeakSet();
 
@@ -19,6 +19,8 @@ export const dataLazyPlugin = {
 
     const execute = () => {
       node.removeAttribute('data-lazy');
+
+      executeNodeAttributesTemplate(node, props);
 
       for (const child of node.childNodes) {
         templateByNode(child, props);

diff --git a/packages/@hec.js/ui/lib/src/template.js b/packages/@hec.js/ui/lib/src/template.js
@@ -79,81 +79,6 @@ export function templateByString(template, props = {}) {
  */
 export function templateByNode(template, props = {}) {
 
-  /**
-   * @param { string } text
-   * @param { function(string): void } update
-   */
-  const bindExpressions = (text, update) => {
-
-    /** @type {import("./expression.js").Expression[]} */
-    let expressions = text.match(/{{[^}]+}}/g).map(expression),
-        sourceText  = text;
-
-    const evaluate = () => {
-      text = sourceText;
-
-      for (const exp of expressions) {
-        const v = f(exp.value);
-        text = text.replace(exp.text, v ?? '<null>');
-      }
-
-      return text;
-    };
-
-    for (const exp of expressions) {
-      const value = prop(props, exp.prop);
-
-      if (value == undefined) {
-        console.warn(`{{ ${exp.prop} }}: No value for this key`, { key: exp.prop, value });
-      }
-
-      if (isSignal(value)) {
-        /** @type { import("./signal.js").Signal<any> } */
-        let signal = value;
-
-        for (const key in exp.meta) {
-          if (pipes[key]) {
-            const pipe = pipes[key];
-
-            signal = signal.map((v) =>
-              pipe({
-                value: v,
-                key: exp.prop,
-                param: exp.meta[key],
-                options: exp.meta,
-              })
-            );
-          }
-        }
-
-        exp.value = signal;
-
-        signal.subscribe({ next: () => update(evaluate()) });
-      } else {
-
-        let v = value;
-
-        for (const key in exp.meta) {
-
-          if (pipes[key]) {
-            const pipe = pipes[key];
-
-            v = pipe({
-              value: f(value),
-              key: exp.prop,
-              param: exp.meta[key],
-              options: exp.meta,
-            });
-          }
-        }
-
-        exp.value = () => v;
-      }
-    }
-
-    update(evaluate());
-  };
-
   /** 
    * @param { Node } node 
    * @param { WeakSet<Node> } done 
@@ -170,7 +95,7 @@ export function templateByNode(template, props = {}) {
     }
 
     if (node instanceof HTMLElement) {
-      const attributeNames = node.getAttributeNames();
+
 
       setPropsOf(node, props);
 
@@ -180,30 +105,11 @@ export function templateByNode(template, props = {}) {
         }
       }
 
-      for (const attributeName of attributeNames) {
-        const attribute = node.getAttribute(attributeName);
-
-        if (attribute?.includes('{{')) {
-
-          bindExpressions(attribute, (text) => {
-            text = text.trim().replace(/ +/, ' ');
-
-            if (text === '<null>') {
-              node.removeAttribute(attributeName);
-            } else {
-              node.setAttribute(attributeName, text);
-            }
-
-          });
-
-        } else if (node.localName.includes('-') && hasProp(props, attribute)) {
-          node.setAttribute(attributeName, `@parent.${attribute}`);
-        }
-      }
-
       if (stopFlag) {
         return;
       }
+
+      executeNodeAttributesTemplate(node, props);
 
     } else if (node instanceof Text && node.textContent.includes('{{')) {
       const parts = node.textContent.split(/{{|}}/g);
@@ -212,7 +118,7 @@ export function templateByNode(template, props = {}) {
         text = document.createTextNode(parts[i]);
 
         if ((i % 2) != 0) {
-          bindExpressions(`{{${parts[i]}}}`, (v) => text.data = v.replaceAll('<null>', ''));
+          bindExpressions(`{{${parts[i]}}}`, props, (v) => text.data = v.replaceAll('<null>', ''));
         }
 
         done.add(text);
@@ -234,3 +140,108 @@ export function templateByNode(template, props = {}) {
 
   return template;
 }
+
+/**
+ * @param { HTMLElement } node 
+ * @param { {[key: string]: any } } props
+ */
+export const executeNodeAttributesTemplate = (node, props) => {
+  const attributeNames = node.getAttributeNames();
+
+  for (const attributeName of attributeNames) {
+    const attribute = node.getAttribute(attributeName);
+
+    if (attribute?.includes('{{')) {
+
+      bindExpressions(attribute, props, (text) => {
+        text = text.trim().replace(/ +/, ' ');
+
+        if (text === '<null>') {
+          node.removeAttribute(attributeName);
+        } else {
+          node.setAttribute(attributeName, text);
+        }
+
+      });
+
+    } else if (node.localName.includes('-') && hasProp(props, attribute)) {
+      node.setAttribute(attributeName, `@parent.${attribute}`);
+    }
+  }
+}
+
+/**
+ * @param { string } text
+ * @param { {[key: string]: any } } props
+ * @param { function(string): void } update
+ */
+const bindExpressions = (text, props, update) => {
+
+  /** @type {import("./expression.js").Expression[]} */
+  let expressions = text.match(/{{[^}]+}}/g).map(expression),
+      sourceText  = text;
+
+  const evaluate = () => {
+    text = sourceText;
+
+    for (const exp of expressions) {
+      const v = f(exp.value);
+      text = text.replace(exp.text, v ?? '<null>');
+    }
+
+    return text;
+  };
+
+  for (const exp of expressions) {
+    const value = prop(props, exp.prop);
+
+    if (value == undefined) {
+      console.warn(`{{ ${exp.prop} }}: No value for this key`, { key: exp.prop, value });
+    }
+
+    if (isSignal(value)) {
+      /** @type { import("./signal.js").Signal<any> } */
+      let signal = value;
+
+      for (const key in exp.meta) {
+        if (pipes[key]) {
+          const pipe = pipes[key];
+
+          signal = signal.map((v) =>
+            pipe({
+              value: v,
+              key: exp.prop,
+              param: exp.meta[key],
+              options: exp.meta,
+            })
+          );
+        }
+      }
+
+      exp.value = signal;
+
+      signal.subscribe({ next: () => update(evaluate()) });
+    } else {
+
+      let v = value;
+
+      for (const key in exp.meta) {
+
+        if (pipes[key]) {
+          const pipe = pipes[key];
+
+          v = pipe({
+            value: f(value),
+            key: exp.prop,
+            param: exp.meta[key],
+            options: exp.meta,
+          });
+        }
+      }
+
+      exp.value = () => v;
+    }
+  }
+
+  update(evaluate());
+};
diff --git a/packages/@hec.js/ui/package.json b/packages/@hec.js/ui/package.json
@@ -6,7 +6,7 @@
   "license": "MIT",
   "main": "./lib/index.js",
   "scripts": {
-    "build": "esbuild --minify --format=esm --bundle ./lib/index.js > ./dist/hec.esm.min.js && esbuild --minify --bundle ./lib/global.js > ./dist/hec.min.js"
+    "build:esm": "esbuild --minify --format=esm --bundle ./lib/index.js > ./dist/hec.esm.min.js && esbuild --minify --bundle ./lib/global.js > ./dist/hec.min.js"
   },
   "dependencies": {
     "@hec.js/ui": "file:./",