thunderous 0.3.4 → 0.4.1

package/dist/index.cjs

@@ -166,15 +166,19 @@ var html = (strings, ...values) => {
         const textList = child.data.split(signalBindingRegex);
         textList.forEach((text, i) => {
           const uniqueKey = text.replace(/\{\{signal:(.+)\}\}/, "$1");
-          const signal = uniqueKey !== text ? signalMap.get(uniqueKey) : null;
-          const newText = signal !== null ? signal() : text;
-          const newNode = new Text(newText);
+          const signal = uniqueKey !== text ? signalMap.get(uniqueKey) : void 0;
+          const newValue = signal !== void 0 ? signal() : text;
+          const newNode = (() => {
+            if (typeof newValue === "string") return new Text(newValue);
+            if (newValue instanceof DocumentFragment) return newValue;
+            return new Text("");
+          })();
           if (i === 0) {
             child.replaceWith(newNode);
           } else {
             element.insertBefore(newNode, child.nextSibling);
           }
-          if (signal !== null) {
+          if (signal !== void 0 && newNode instanceof Text) {
             createEffect(() => {
               newNode.data = signal();
             });
@@ -190,8 +194,8 @@ var html = (strings, ...values) => {
               let hasNull = false;
               for (const text of textList) {
                 const uniqueKey = text.replace(/\{\{signal:(.+)\}\}/, "$1");
-                const signal = uniqueKey !== text ? signalMap.get(uniqueKey) : null;
-                const value = signal !== null ? signal() : text;
+                const signal = uniqueKey !== text ? signalMap.get(uniqueKey) : void 0;
+                const value = signal !== void 0 ? signal() : text;
                 if (value === null) hasNull = true;
                 newText += value;
               }
@@ -350,24 +354,34 @@ var customElement = (render, options) => {
             }
           }
         ),
-        propSignals: new Proxy(
-          {},
-          {
-            get: (_, prop) => {
-              if (!(prop in this.#propSignals)) this.#propSignals[prop] = createSignal(null);
-              const [getter, _setter] = this.#propSignals[prop];
-              const setter = (newValue) => {
-                this[prop] = newValue;
-                _setter(newValue);
-              };
-              return [getter, setter];
-            },
-            set: () => {
-              console.error("Signals must be assigned via setters.");
-              return false;
-            }
+        propSignals: new Proxy({}, {
+          get: (_, prop) => {
+            if (!(prop in this.#propSignals)) this.#propSignals[prop] = createSignal();
+            const [_getter, _setter] = this.#propSignals[prop];
+            const setter = (newValue) => {
+              this[prop] = newValue;
+              _setter(newValue);
+            };
+            const getter = () => {
+              const value = _getter();
+              if (value === void 0)
+                throw new Error(
+                  `
+
+Property: ${prop}
+
+You must set an initial value before calling a property signal's getter.
+`
+                );
+              return value;
+            };
+            return [getter, setter];
+          },
+          set: () => {
+            console.error("Signals must be assigned via setters.");
+            return false;
           }
-        ),
+        }),
         refs: new Proxy(
           {},
           {

package/dist/index.d.cts

@@ -56,7 +56,8 @@ type ElementResult = {
     eject: () => CustomElementConstructor;
 };
 type AttributeChangedCallback = (name: string, oldValue: string | null, newValue: string | null) => void;
-type RenderProps = {
+type CustomElementProps = Record<PropertyKey, unknown>;
+type RenderArgs<Props extends CustomElementProps> = {
     elementRef: HTMLElement;
     root: ShadowRoot | HTMLElement;
     internals: ElementInternals;
@@ -70,7 +71,9 @@ type RenderProps = {
     formAssociatedCallback: (fn: () => void) => void;
     customCallback: (fn: () => void) => `{{callback:${string}}}`;
     attrSignals: Record<string, Signal<string | null>>;
-    propSignals: Record<string, Signal<unknown>>;
+    propSignals: {
+        [K in keyof Props]: Signal<Props[K]>;
+    };
     refs: Record<string, HTMLElement | null>;
     adoptStyleSheet: (stylesheet: Styles) => void;
 };
@@ -82,7 +85,7 @@ type RenderOptions = {
     attachShadow: boolean;
     shadowRootOptions: ShadowRootInit;
 };
-type RenderFunction = (props: RenderProps) => DocumentFragment;
+type RenderFunction<Props extends CustomElementProps> = (args: RenderArgs<Props>) => DocumentFragment;
 /**
  * Create a custom element that can be defined for use in the DOM.
  * @example
@@ -93,7 +96,7 @@ type RenderFunction = (props: RenderProps) => DocumentFragment;
  * MyElement.define('my-element');
  * ```
  */
-declare const customElement: (render: RenderFunction, options?: Partial<RenderOptions>) => ElementResult;
+declare const customElement: <Props extends CustomElementProps>(render: RenderFunction<Props>, options?: Partial<RenderOptions>) => ElementResult;
 type Registry = {
     register: (tagName: string, element: CustomElementConstructor) => void;
     getTagName: (element: CustomElementConstructor) => string | undefined;
@@ -110,4 +113,4 @@ type Registry = {
  */
 declare const createRegistry: () => Registry;
 
-export { type RenderFunction, type RenderProps, type Signal, type SignalGetter, type SignalSetter, createEffect, createRegistry, createSignal, css, customElement, derived, html };
+export { type RenderArgs, type RenderFunction, type RenderArgs as RenderProps, type Signal, type SignalGetter, type SignalSetter, createEffect, createRegistry, createSignal, css, customElement, derived, html };

package/dist/index.d.ts

@@ -56,7 +56,8 @@ type ElementResult = {
     eject: () => CustomElementConstructor;
 };
 type AttributeChangedCallback = (name: string, oldValue: string | null, newValue: string | null) => void;
-type RenderProps = {
+type CustomElementProps = Record<PropertyKey, unknown>;
+type RenderArgs<Props extends CustomElementProps> = {
     elementRef: HTMLElement;
     root: ShadowRoot | HTMLElement;
     internals: ElementInternals;
@@ -70,7 +71,9 @@ type RenderProps = {
     formAssociatedCallback: (fn: () => void) => void;
     customCallback: (fn: () => void) => `{{callback:${string}}}`;
     attrSignals: Record<string, Signal<string | null>>;
-    propSignals: Record<string, Signal<unknown>>;
+    propSignals: {
+        [K in keyof Props]: Signal<Props[K]>;
+    };
     refs: Record<string, HTMLElement | null>;
     adoptStyleSheet: (stylesheet: Styles) => void;
 };
@@ -82,7 +85,7 @@ type RenderOptions = {
     attachShadow: boolean;
     shadowRootOptions: ShadowRootInit;
 };
-type RenderFunction = (props: RenderProps) => DocumentFragment;
+type RenderFunction<Props extends CustomElementProps> = (args: RenderArgs<Props>) => DocumentFragment;
 /**
  * Create a custom element that can be defined for use in the DOM.
  * @example
@@ -93,7 +96,7 @@ type RenderFunction = (props: RenderProps) => DocumentFragment;
  * MyElement.define('my-element');
  * ```
  */
-declare const customElement: (render: RenderFunction, options?: Partial<RenderOptions>) => ElementResult;
+declare const customElement: <Props extends CustomElementProps>(render: RenderFunction<Props>, options?: Partial<RenderOptions>) => ElementResult;
 type Registry = {
     register: (tagName: string, element: CustomElementConstructor) => void;
     getTagName: (element: CustomElementConstructor) => string | undefined;
@@ -110,4 +113,4 @@ type Registry = {
  */
 declare const createRegistry: () => Registry;
 
-export { type RenderFunction, type RenderProps, type Signal, type SignalGetter, type SignalSetter, createEffect, createRegistry, createSignal, css, customElement, derived, html };
+export { type RenderArgs, type RenderFunction, type RenderArgs as RenderProps, type Signal, type SignalGetter, type SignalSetter, createEffect, createRegistry, createSignal, css, customElement, derived, html };

package/dist/index.js

@@ -124,15 +124,19 @@ var html = (strings, ...values) => {
         const textList = child.data.split(signalBindingRegex);
         textList.forEach((text, i) => {
           const uniqueKey = text.replace(/\{\{signal:(.+)\}\}/, "$1");
-          const signal = uniqueKey !== text ? signalMap.get(uniqueKey) : null;
-          const newText = signal !== null ? signal() : text;
-          const newNode = new Text(newText);
+          const signal = uniqueKey !== text ? signalMap.get(uniqueKey) : void 0;
+          const newValue = signal !== void 0 ? signal() : text;
+          const newNode = (() => {
+            if (typeof newValue === "string") return new Text(newValue);
+            if (newValue instanceof DocumentFragment) return newValue;
+            return new Text("");
+          })();
           if (i === 0) {
             child.replaceWith(newNode);
           } else {
             element.insertBefore(newNode, child.nextSibling);
           }
-          if (signal !== null) {
+          if (signal !== void 0 && newNode instanceof Text) {
             createEffect(() => {
               newNode.data = signal();
             });
@@ -148,8 +152,8 @@ var html = (strings, ...values) => {
               let hasNull = false;
               for (const text of textList) {
                 const uniqueKey = text.replace(/\{\{signal:(.+)\}\}/, "$1");
-                const signal = uniqueKey !== text ? signalMap.get(uniqueKey) : null;
-                const value = signal !== null ? signal() : text;
+                const signal = uniqueKey !== text ? signalMap.get(uniqueKey) : void 0;
+                const value = signal !== void 0 ? signal() : text;
                 if (value === null) hasNull = true;
                 newText += value;
               }
@@ -308,24 +312,34 @@ var customElement = (render, options) => {
             }
           }
         ),
-        propSignals: new Proxy(
-          {},
-          {
-            get: (_, prop) => {
-              if (!(prop in this.#propSignals)) this.#propSignals[prop] = createSignal(null);
-              const [getter, _setter] = this.#propSignals[prop];
-              const setter = (newValue) => {
-                this[prop] = newValue;
-                _setter(newValue);
-              };
-              return [getter, setter];
-            },
-            set: () => {
-              console.error("Signals must be assigned via setters.");
-              return false;
-            }
+        propSignals: new Proxy({}, {
+          get: (_, prop) => {
+            if (!(prop in this.#propSignals)) this.#propSignals[prop] = createSignal();
+            const [_getter, _setter] = this.#propSignals[prop];
+            const setter = (newValue) => {
+              this[prop] = newValue;
+              _setter(newValue);
+            };
+            const getter = () => {
+              const value = _getter();
+              if (value === void 0)
+                throw new Error(
+                  `
+
+Property: ${prop}
+
+You must set an initial value before calling a property signal's getter.
+`
+                );
+              return value;
+            };
+            return [getter, setter];
+          },
+          set: () => {
+            console.error("Signals must be assigned via setters.");
+            return false;
           }
-        ),
+        }),
         refs: new Proxy(
           {},
           {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "thunderous",
-	"version": "0.3.4",
+	"version": "0.4.1",
 	"description": "",
 	"type": "module",
 	"main": "./dist/index.cjs",
@@ -30,7 +30,8 @@
 	"homepage": "https://github.com/Thunder-Solutions/Thunderous#readme",
 	"license": "MIT",
 	"scripts": {
-		"demo": "cd demo && rm -rf node_modules && npm i && npm start",
+		"demo": "cd demo && npm start",
+		"www": "cd www && npm run dev",
 		"build": "tsup src/index.ts --format cjs,esm --dts --no-clean"
 	},
 	"devDependencies": {