thunderous 0.3.4 → 0.4.0

package/dist/index.cjs

@@ -350,24 +350,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

@@ -308,24 +308,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.0",
 	"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": {