Add store and attrs types as generics (backwards compatible)

index.d.ts

@@ -1,3 +1,9 @@
+/** Default type of element attributes */
+export type EnhanceAttrs = Record<string, string>;
+
+/** Defaul type of Enhance store */
+export type EnhanceStore = Record<string, any>;
+
 export type EnhanceApiReq = {
 	/** The parsed JSON payload */
 	body: Record<string, any>;
@@ -44,9 +50,9 @@ type EnhanceApiResBase = {
 	html?: string;
 };
 
-type EnhanceApiResJson = {
+type EnhanceApiResJson<Store = EnhanceStore> = {
 	/** JSON response, or initial state for a corresponding page */
-	json?: Record<string, any>;
+	json?: Store;
 	/** body is incompatible when json is specified */
 	body?: never;
 };
@@ -58,9 +64,9 @@ type EnhanceApiResBody = {
 	json?: never;
 };
 
-export type EnhanceApiRes =
+export type EnhanceApiRes<Store = EnhanceStore> =
 	& EnhanceApiResBase
-	& (EnhanceApiResJson | EnhanceApiResBody);
+	& (EnhanceApiResJson<Store> | EnhanceApiResBody);
 
 export type EnhanceElemResult = string; // ez
 
@@ -71,36 +77,36 @@ export type EnhanceHtmlFn = (
 	...values: [...string[]]
 ) => EnhanceElemResult;
 
-export type EnhanceElemArg = {
+export type EnhanceElemArg<Attrs = EnhanceAttrs, Store = EnhanceStore> = {
 	/** Enhance's primary HTML rendering function */
 	html: EnhanceHtmlFn;
 	/** Enhance's state object with information about markup and the data store */
 	state: {
 		/** HTML element attributes as an object */
-		attrs: Record<string, string>;
+		attrs: Attrs;
 		/** Initial state data passed to all Enhance elements */
-		store: Record<string, any>;
+		store: Store;
 	};
 };
 
-export type EnhanceApiFn = (
+export type EnhanceApiFn<Store = EnhanceStore> = (
 	/** The parsed HTTP request */
 	request: EnhanceApiReq,
-) => Promise<EnhanceApiRes> | EnhanceApiRes;
+) => Promise<EnhanceApiRes<Store> | EnhanceApiRes<Store>>;
 
 export type EnhanceApiFnChain = EnhanceApiFn[];
 
-export type EnhanceHeadFnArg = {
+export type EnhanceHeadFnArg<Store = EnhanceStore> = {
 	/** The parsed HTTP request */
 	req: EnhanceApiReq;
 	/** The Resolved HTTP status code */
 	status: 200 | 404 | 500;
 	/** Error message, present when status is 404 or 500 */
 	error?: string;
 	/** Initial state data passed to all Enhance elements */
-	store: Record<string, any>;
+	store: Store;
 };
 
-export type EnhanceHeadFn = (arg0: EnhanceHeadFnArg) => EnhanceElemResult;
+export type EnhanceHeadFn<Store = EnhanceStore> = (arg0: EnhanceHeadFnArg<Store>) => EnhanceElemResult;
 
-export type EnhanceElemFn = (arg0: EnhanceElemArg) => EnhanceElemResult;
+export type EnhanceElemFn<Attrs = EnhanceAttrs, Store = EnhanceStore> = (arg0: EnhanceElemArg<Attrs, Store>) => EnhanceElemResult;

index.test-d.ts

@@ -81,6 +81,34 @@ export const TodoItem: EnhanceElemFn = function ({
   `;
 };
 
+// Custom Element with attrs and store types
+export const TodoItemWithStore: EnhanceElemFn<{ "todo-id": string }, { "some-value"}> = ({
+	html,
+	state: { attrs, store },
+}) => {
+	const todoId = attrs["todo-id"];
+
+	let invalidParam;
+	expectError(
+		(invalidParam = attrs.invalid)
+	)
+
+	const someValue = store["some-value"];
+
+	expectError(
+		(store.myCustomData)
+	)
+
+	return html`
+		<div class="flex gap-2 mb-1">
+			<input todo-id="${todoId}" type="checkbox"
+		} />
+			<slot></slot>
+		</div>
+  `;
+};
+
+
 // Head Function
 export const Head: EnhanceHeadFn = function (state) {
 	const { req, status, error, store } = state;