thunderous 2.0.7 → 2.1.0

package/dist/index.cjs

@@ -136,6 +136,14 @@ var createEffect = (fn) => {
 
 // src/utilities.ts
 var NOOP = () => void 0;
+var queryComment = (node, comment) => {
+  for (const child of node.childNodes) {
+    if (child.nodeType === Node.COMMENT_NODE && child.nodeValue === comment) {
+      return child;
+    }
+  }
+  return null;
+};
 
 // src/server-side.ts
 var isServer = typeof window === "undefined";
@@ -287,12 +295,19 @@ var logValueError = (value) => {
     value
   );
 };
-var arrayToDocumentFragment = (array, parent) => {
+var logPropertyWarning = (propName, element) => {
+  console.warn(
+    `Property "${propName}" does not exist on element:`,
+    element,
+    "\n\nThunderous will attempt to set the property anyway, but this may result in unexpected behavior. Please make sure the property exists on the element prior to setting it."
+  );
+};
+var arrayToDocumentFragment = (array, parent, uniqueKey) => {
   const documentFragment = new DocumentFragment();
   let count = 0;
   const keys = /* @__PURE__ */ new Set();
   for (const item of array) {
-    const node = createNewNode(item, parent);
+    const node = createNewNode(item, parent, uniqueKey);
     if (node instanceof DocumentFragment) {
       const child = node.firstElementChild;
       if (node.children.length > 1) {
@@ -322,11 +337,13 @@ var arrayToDocumentFragment = (array, parent) => {
     }
     documentFragment.append(node);
   }
+  const comment = document.createComment(uniqueKey);
+  documentFragment.append(comment);
   return documentFragment;
 };
-var createNewNode = (value, parent) => {
+var createNewNode = (value, parent, uniqueKey) => {
   if (typeof value === "string") return new Text(value);
-  if (Array.isArray(value)) return arrayToDocumentFragment(value, parent);
+  if (Array.isArray(value)) return arrayToDocumentFragment(value, parent, uniqueKey);
   if (value instanceof DocumentFragment) return value;
   return new Text("");
 };
@@ -366,7 +383,7 @@ var evaluateBindings = (element, fragment) => {
         const uniqueKey = text.replace(/\{\{signal:(.+)\}\}/, "$1");
         const signal = uniqueKey !== text ? renderState.signalMap.get(uniqueKey) : void 0;
         const newValue = signal !== void 0 ? signal() : text;
-        const newNode = createNewNode(newValue, element);
+        const newNode = createNewNode(newValue, element, uniqueKey);
         if (i === 0) {
           child.replaceWith(newNode);
         } else {
@@ -380,13 +397,12 @@ var evaluateBindings = (element, fragment) => {
           let init = false;
           createEffect(() => {
             const result = signal();
-            const nextNode = createNewNode(result, element);
+            const nextNode = createNewNode(result, element, uniqueKey);
             if (nextNode instanceof Text) {
               throw new TypeError(
                 "Signal mismatch: expected DocumentFragment or Array<DocumentFragment>, but got Text"
               );
             }
-            let lastSibling = element.lastChild;
             for (const child2 of element.children) {
               const key = child2.getAttribute("key");
               if (key === null) continue;
@@ -395,6 +411,7 @@ var evaluateBindings = (element, fragment) => {
                 child2.remove();
               }
             }
+            let anchor = queryComment(element, uniqueKey);
             for (const child2 of nextNode.children) {
               const key = child2.getAttribute("key");
               const matchingNode = element.querySelector(`[key="${key}"]`);
@@ -404,10 +421,12 @@ var evaluateBindings = (element, fragment) => {
                 matchingNode.setAttribute(attr.name, attr.value);
               }
               matchingNode.replaceChildren(...child2.childNodes);
-              lastSibling = matchingNode.nextSibling;
+              anchor = matchingNode.nextSibling;
               child2.replaceWith(matchingNode);
             }
-            element.insertBefore(nextNode, lastSibling);
+            const nextAnchor = queryComment(nextNode, uniqueKey);
+            nextAnchor?.remove();
+            element.insertBefore(nextNode, anchor);
             if (!init) init = true;
           });
         }
@@ -421,22 +440,31 @@ var evaluateBindings = (element, fragment) => {
       }
     } else if (child instanceof Element) {
       for (const attr of child.attributes) {
+        const attrName = attr.name;
         if (SIGNAL_BINDING_REGEX.test(attr.value)) {
           const textList = attr.value.split(SIGNAL_BINDING_REGEX);
           createEffect(() => {
             let newText = "";
             let hasNull = false;
+            let signal;
             for (const text of textList) {
               const uniqueKey = text.replace(/\{\{signal:(.+)\}\}/, "$1");
-              const signal = uniqueKey !== text ? renderState.signalMap.get(uniqueKey) : void 0;
+              signal = uniqueKey !== text ? renderState.signalMap.get(uniqueKey) : void 0;
               const value = signal !== void 0 ? signal() : text;
               if (value === null) hasNull = true;
               newText += String(value);
             }
-            if (hasNull && newText === "null") {
-              child.removeAttribute(attr.name);
+            if (hasNull && newText === "null" || attrName.startsWith("prop:")) {
+              child.removeAttribute(attrName);
             } else {
-              child.setAttribute(attr.name, newText);
+              child.setAttribute(attrName, newText);
+            }
+            if (attrName.startsWith("prop:")) {
+              child.removeAttribute(attrName);
+              const propName = attrName.replace("prop:", "");
+              if (!(propName in child)) logPropertyWarning(propName, child);
+              const newValue = hasNull && newText === "null" ? null : newText;
+              child[propName] = signal !== void 0 ? signal() : newValue;
             }
           });
         } else if (LEGACY_CALLBACK_BINDING_REGEX.test(attr.value)) {
@@ -458,10 +486,20 @@ var evaluateBindings = (element, fragment) => {
                 child.__customCallbackFns.set(uniqueKey, callback);
               }
             }
-            if (uniqueKey !== "") {
-              child.setAttribute(attr.name, `this.__customCallbackFns.get('${uniqueKey}')(event)`);
+            if (uniqueKey !== "" && !attrName.startsWith("prop:")) {
+              child.setAttribute(attrName, `this.__customCallbackFns.get('${uniqueKey}')(event)`);
+            } else if (attrName.startsWith("prop:")) {
+              child.removeAttribute(attrName);
+              const propName = attrName.replace("prop:", "");
+              if (!(propName in child)) logPropertyWarning(propName, child);
+              child[propName] = child.__customCallbackFns.get(uniqueKey);
             }
           });
+        } else if (attrName.startsWith("prop:")) {
+          child.removeAttribute(attrName);
+          const propName = attrName.replace("prop:", "");
+          if (!(propName in child)) logPropertyWarning(propName, child);
+          child[propName] = attr.value;
         }
       }
       evaluateBindings(child, fragment);

package/dist/index.d.cts

@@ -2,7 +2,7 @@ declare global {
 	interface DocumentFragment {
 		host: HTMLElement;
 	}
-	interface Element {
+	interface Node {
 		__customCallbackFns?: Map<string, AnyFn>;
 	}
 	interface CustomElementRegistry {

package/dist/index.d.ts

@@ -2,7 +2,7 @@ declare global {
 	interface DocumentFragment {
 		host: HTMLElement;
 	}
-	interface Element {
+	interface Node {
 		__customCallbackFns?: Map<string, AnyFn>;
 	}
 	interface CustomElementRegistry {

package/dist/index.js

@@ -101,6 +101,14 @@ var createEffect = (fn) => {
 
 // src/utilities.ts
 var NOOP = () => void 0;
+var queryComment = (node, comment) => {
+  for (const child of node.childNodes) {
+    if (child.nodeType === Node.COMMENT_NODE && child.nodeValue === comment) {
+      return child;
+    }
+  }
+  return null;
+};
 
 // src/server-side.ts
 var isServer = typeof window === "undefined";
@@ -252,12 +260,19 @@ var logValueError = (value) => {
     value
   );
 };
-var arrayToDocumentFragment = (array, parent) => {
+var logPropertyWarning = (propName, element) => {
+  console.warn(
+    `Property "${propName}" does not exist on element:`,
+    element,
+    "\n\nThunderous will attempt to set the property anyway, but this may result in unexpected behavior. Please make sure the property exists on the element prior to setting it."
+  );
+};
+var arrayToDocumentFragment = (array, parent, uniqueKey) => {
   const documentFragment = new DocumentFragment();
   let count = 0;
   const keys = /* @__PURE__ */ new Set();
   for (const item of array) {
-    const node = createNewNode(item, parent);
+    const node = createNewNode(item, parent, uniqueKey);
     if (node instanceof DocumentFragment) {
       const child = node.firstElementChild;
       if (node.children.length > 1) {
@@ -287,11 +302,13 @@ var arrayToDocumentFragment = (array, parent) => {
     }
     documentFragment.append(node);
   }
+  const comment = document.createComment(uniqueKey);
+  documentFragment.append(comment);
   return documentFragment;
 };
-var createNewNode = (value, parent) => {
+var createNewNode = (value, parent, uniqueKey) => {
   if (typeof value === "string") return new Text(value);
-  if (Array.isArray(value)) return arrayToDocumentFragment(value, parent);
+  if (Array.isArray(value)) return arrayToDocumentFragment(value, parent, uniqueKey);
   if (value instanceof DocumentFragment) return value;
   return new Text("");
 };
@@ -331,7 +348,7 @@ var evaluateBindings = (element, fragment) => {
         const uniqueKey = text.replace(/\{\{signal:(.+)\}\}/, "$1");
         const signal = uniqueKey !== text ? renderState.signalMap.get(uniqueKey) : void 0;
         const newValue = signal !== void 0 ? signal() : text;
-        const newNode = createNewNode(newValue, element);
+        const newNode = createNewNode(newValue, element, uniqueKey);
         if (i === 0) {
           child.replaceWith(newNode);
         } else {
@@ -345,13 +362,12 @@ var evaluateBindings = (element, fragment) => {
           let init = false;
           createEffect(() => {
             const result = signal();
-            const nextNode = createNewNode(result, element);
+            const nextNode = createNewNode(result, element, uniqueKey);
             if (nextNode instanceof Text) {
               throw new TypeError(
                 "Signal mismatch: expected DocumentFragment or Array<DocumentFragment>, but got Text"
               );
             }
-            let lastSibling = element.lastChild;
             for (const child2 of element.children) {
               const key = child2.getAttribute("key");
               if (key === null) continue;
@@ -360,6 +376,7 @@ var evaluateBindings = (element, fragment) => {
                 child2.remove();
               }
             }
+            let anchor = queryComment(element, uniqueKey);
             for (const child2 of nextNode.children) {
               const key = child2.getAttribute("key");
               const matchingNode = element.querySelector(`[key="${key}"]`);
@@ -369,10 +386,12 @@ var evaluateBindings = (element, fragment) => {
                 matchingNode.setAttribute(attr.name, attr.value);
               }
               matchingNode.replaceChildren(...child2.childNodes);
-              lastSibling = matchingNode.nextSibling;
+              anchor = matchingNode.nextSibling;
               child2.replaceWith(matchingNode);
             }
-            element.insertBefore(nextNode, lastSibling);
+            const nextAnchor = queryComment(nextNode, uniqueKey);
+            nextAnchor?.remove();
+            element.insertBefore(nextNode, anchor);
             if (!init) init = true;
           });
         }
@@ -386,22 +405,31 @@ var evaluateBindings = (element, fragment) => {
       }
     } else if (child instanceof Element) {
       for (const attr of child.attributes) {
+        const attrName = attr.name;
         if (SIGNAL_BINDING_REGEX.test(attr.value)) {
           const textList = attr.value.split(SIGNAL_BINDING_REGEX);
           createEffect(() => {
             let newText = "";
             let hasNull = false;
+            let signal;
             for (const text of textList) {
               const uniqueKey = text.replace(/\{\{signal:(.+)\}\}/, "$1");
-              const signal = uniqueKey !== text ? renderState.signalMap.get(uniqueKey) : void 0;
+              signal = uniqueKey !== text ? renderState.signalMap.get(uniqueKey) : void 0;
               const value = signal !== void 0 ? signal() : text;
               if (value === null) hasNull = true;
               newText += String(value);
             }
-            if (hasNull && newText === "null") {
-              child.removeAttribute(attr.name);
+            if (hasNull && newText === "null" || attrName.startsWith("prop:")) {
+              child.removeAttribute(attrName);
             } else {
-              child.setAttribute(attr.name, newText);
+              child.setAttribute(attrName, newText);
+            }
+            if (attrName.startsWith("prop:")) {
+              child.removeAttribute(attrName);
+              const propName = attrName.replace("prop:", "");
+              if (!(propName in child)) logPropertyWarning(propName, child);
+              const newValue = hasNull && newText === "null" ? null : newText;
+              child[propName] = signal !== void 0 ? signal() : newValue;
             }
           });
         } else if (LEGACY_CALLBACK_BINDING_REGEX.test(attr.value)) {
@@ -423,10 +451,20 @@ var evaluateBindings = (element, fragment) => {
                 child.__customCallbackFns.set(uniqueKey, callback);
               }
             }
-            if (uniqueKey !== "") {
-              child.setAttribute(attr.name, `this.__customCallbackFns.get('${uniqueKey}')(event)`);
+            if (uniqueKey !== "" && !attrName.startsWith("prop:")) {
+              child.setAttribute(attrName, `this.__customCallbackFns.get('${uniqueKey}')(event)`);
+            } else if (attrName.startsWith("prop:")) {
+              child.removeAttribute(attrName);
+              const propName = attrName.replace("prop:", "");
+              if (!(propName in child)) logPropertyWarning(propName, child);
+              child[propName] = child.__customCallbackFns.get(uniqueKey);
             }
           });
+        } else if (attrName.startsWith("prop:")) {
+          child.removeAttribute(attrName);
+          const propName = attrName.replace("prop:", "");
+          if (!(propName in child)) logPropertyWarning(propName, child);
+          child[propName] = attr.value;
         }
       }
       evaluateBindings(child, fragment);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "thunderous",
-	"version": "2.0.7",
+	"version": "2.1.0",
 	"description": "",
 	"type": "module",
 	"main": "./dist/index.cjs",
@@ -35,7 +35,10 @@
 		"www": "cd www && npm run dev",
 		"build": "tsup src/index.ts --format cjs,esm --dts --no-clean",
 		"test": "find src -name '*.test.ts' | xargs c8 node --import tsx --test",
-		"lint": "tsc && eslint ."
+		"lint": "tsc && eslint .",
+		"version:patch": "npm run build && npm version patch && cd demo && npm version patch && cd ../www && npm version patch && git add -A && git commit -m 'bump version'",
+		"version:minor": "npm run build && npm version minor && cd demo && npm version minor && cd ../www && npm version minor && git add -A && git commit -m 'bump version'",
+		"version:major": "npm run build && npm version major && cd demo && npm version major && cd ../www && npm version major && git add -A && git commit -m 'bump version'"
 	},
 	"devDependencies": {
 		"@types/dompurify": "^3.2.0",