thunderous 2.0.8 → 2.1.1

package/dist/index.cjs

@@ -193,21 +193,27 @@ var getServerRenderArgs = (tagName, registry) => ({
   get elementRef() {
     return new Proxy({}, {
       get: () => {
-        throw new Error("The `elementRef` property is not available on the server.");
+        const error = new Error("The `elementRef` property is not available on the server.");
+        console.error(error);
+        throw error;
       }
     });
   },
   get root() {
     return new Proxy({}, {
       get: () => {
-        throw new Error("The `root` property is not available on the server.");
+        const error = new Error("The `root` property is not available on the server.");
+        console.error(error);
+        throw error;
       }
     });
   },
   get internals() {
     return new Proxy({}, {
       get: () => {
-        throw new Error("The `internals` property is not available on the server.");
+        const error = new Error("The `internals` property is not available on the server.");
+        console.error(error);
+        throw error;
       }
     });
   },
@@ -295,6 +301,13 @@ var logValueError = (value) => {
     value
   );
 };
+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;
@@ -377,7 +390,6 @@ var evaluateBindings = (element, fragment) => {
         const signal = uniqueKey !== text ? renderState.signalMap.get(uniqueKey) : void 0;
         const newValue = signal !== void 0 ? signal() : text;
         const newNode = createNewNode(newValue, element, uniqueKey);
-        const clone = newNode.cloneNode(true);
         if (i === 0) {
           child.replaceWith(newNode);
         } else {
@@ -393,9 +405,11 @@ var evaluateBindings = (element, fragment) => {
             const result = signal();
             const nextNode = createNewNode(result, element, uniqueKey);
             if (nextNode instanceof Text) {
-              throw new TypeError(
+              const error = new TypeError(
                 "Signal mismatch: expected DocumentFragment or Array<DocumentFragment>, but got Text"
               );
+              console.error(error);
+              throw error;
             }
             for (const child2 of element.children) {
               const key = child2.getAttribute("key");
@@ -434,22 +448,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)) {
@@ -471,10 +494,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);
@@ -591,7 +624,9 @@ var customElement = (render, options) => {
         return this;
       },
       eject() {
-        throw new Error("Cannot eject a custom element on the server.");
+        const error = new Error("Cannot eject a custom element on the server.");
+        console.error(error);
+        throw error;
       }
     };
   }
@@ -689,15 +724,15 @@ var customElement = (render, options) => {
             };
             const getter = () => {
               const value = _getter();
-              if (value === void 0)
-                throw new Error(
-                  `
-
-Property: ${prop}
-
+              if (value === void 0) {
+                const error = new Error(
+                  `Error accessing property: "${prop}"
 You must set an initial value before calling a property signal's getter.
 `
                 );
+                console.error(error);
+                throw error;
+              }
               return value;
             };
             getter.getter = true;
@@ -763,7 +798,16 @@ You must set an initial value before calling a property signal's getter.
       return observedAttributes;
     }
     constructor() {
-      super();
+      try {
+        super();
+      } catch (error) {
+        const _error = new Error(
+          "Error instantiating element:\nThis usually occurs if you have errors in the function body of your component. Check prior logs for possible causes.\n",
+          { cause: error }
+        );
+        console.error(_error);
+        throw _error;
+      }
       if (!Object.prototype.hasOwnProperty.call(this, "__customCallbackFns")) {
         this.__customCallbackFns = /* @__PURE__ */ new Map();
       }
@@ -945,7 +989,9 @@ var createRegistry = (args) => {
     getAllTagNames: () => Array.from(customElementTags),
     eject: () => {
       if (nativeRegistry === void 0) {
-        throw new Error("Cannot eject a registry on the server.");
+        const error = new Error("Cannot eject a registry on the server.");
+        console.error(error);
+        throw error;
       }
       return nativeRegistry;
     },

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

@@ -158,21 +158,27 @@ var getServerRenderArgs = (tagName, registry) => ({
   get elementRef() {
     return new Proxy({}, {
       get: () => {
-        throw new Error("The `elementRef` property is not available on the server.");
+        const error = new Error("The `elementRef` property is not available on the server.");
+        console.error(error);
+        throw error;
       }
     });
   },
   get root() {
     return new Proxy({}, {
       get: () => {
-        throw new Error("The `root` property is not available on the server.");
+        const error = new Error("The `root` property is not available on the server.");
+        console.error(error);
+        throw error;
       }
     });
   },
   get internals() {
     return new Proxy({}, {
       get: () => {
-        throw new Error("The `internals` property is not available on the server.");
+        const error = new Error("The `internals` property is not available on the server.");
+        console.error(error);
+        throw error;
       }
     });
   },
@@ -260,6 +266,13 @@ var logValueError = (value) => {
     value
   );
 };
+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;
@@ -342,7 +355,6 @@ var evaluateBindings = (element, fragment) => {
         const signal = uniqueKey !== text ? renderState.signalMap.get(uniqueKey) : void 0;
         const newValue = signal !== void 0 ? signal() : text;
         const newNode = createNewNode(newValue, element, uniqueKey);
-        const clone = newNode.cloneNode(true);
         if (i === 0) {
           child.replaceWith(newNode);
         } else {
@@ -358,9 +370,11 @@ var evaluateBindings = (element, fragment) => {
             const result = signal();
             const nextNode = createNewNode(result, element, uniqueKey);
             if (nextNode instanceof Text) {
-              throw new TypeError(
+              const error = new TypeError(
                 "Signal mismatch: expected DocumentFragment or Array<DocumentFragment>, but got Text"
               );
+              console.error(error);
+              throw error;
             }
             for (const child2 of element.children) {
               const key = child2.getAttribute("key");
@@ -399,22 +413,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)) {
@@ -436,10 +459,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);
@@ -556,7 +589,9 @@ var customElement = (render, options) => {
         return this;
       },
       eject() {
-        throw new Error("Cannot eject a custom element on the server.");
+        const error = new Error("Cannot eject a custom element on the server.");
+        console.error(error);
+        throw error;
       }
     };
   }
@@ -654,15 +689,15 @@ var customElement = (render, options) => {
             };
             const getter = () => {
               const value = _getter();
-              if (value === void 0)
-                throw new Error(
-                  `
-
-Property: ${prop}
-
+              if (value === void 0) {
+                const error = new Error(
+                  `Error accessing property: "${prop}"
 You must set an initial value before calling a property signal's getter.
 `
                 );
+                console.error(error);
+                throw error;
+              }
               return value;
             };
             getter.getter = true;
@@ -728,7 +763,16 @@ You must set an initial value before calling a property signal's getter.
       return observedAttributes;
     }
     constructor() {
-      super();
+      try {
+        super();
+      } catch (error) {
+        const _error = new Error(
+          "Error instantiating element:\nThis usually occurs if you have errors in the function body of your component. Check prior logs for possible causes.\n",
+          { cause: error }
+        );
+        console.error(_error);
+        throw _error;
+      }
       if (!Object.prototype.hasOwnProperty.call(this, "__customCallbackFns")) {
         this.__customCallbackFns = /* @__PURE__ */ new Map();
       }
@@ -910,7 +954,9 @@ var createRegistry = (args) => {
     getAllTagNames: () => Array.from(customElementTags),
     eject: () => {
       if (nativeRegistry === void 0) {
-        throw new Error("Cannot eject a registry on the server.");
+        const error = new Error("Cannot eject a registry on the server.");
+        console.error(error);
+        throw error;
       }
       return nativeRegistry;
     },

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "thunderous",
-	"version": "2.0.8",
+	"version": "2.1.1",
 	"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",