Add page definition

Signed-off-by: macdonst <[email protected]>

index.d.ts

@@ -110,6 +110,8 @@ export type EnhanceHeadFn = (payload: EnhanceHeadFnArg) => EnhanceElemResult;
 
 export type EnhanceElemFn = (payload: EnhanceElemArg) => EnhanceElemResult;
 
+export type EnhancePageFn = EnhanceElemFn;
+
 export type EnhancePreflightFn = (
   payload: EnhanceApiReq,
 ) => Promise<Record<string, any>> | Record<string, any>;

index.test-d.ts

@@ -6,6 +6,7 @@ import type {
   EnhanceElemFn,
   EnhanceHeadFn,
   EnhanceHtmlFn,
+  EnhancePageFn,
   EnhancePreflightFn,
 } from ".";
 
@@ -97,6 +98,34 @@ export const TodoItem: EnhanceElemFn = function ({
   `;
 };
 
+// Page Element
+export const page: EnhancePageFn = function ({
+  html,
+  state: { attrs, store, instanceID, context },
+}) {
+  const todoId = attrs["todo-id"];
+  const completed = typeof attrs.completed === "string";
+  const myHtml: EnhanceHtmlFn = html;
+  typeof myHtml === "function";
+
+  context.todoId = todoId;
+
+  store.myCustomData;
+
+  return html`
+    <div class="flex gap-2 mb-1">
+      <input
+        id="todo-${instanceID}"
+        todo-id="${todoId}"
+        type="checkbox"
+        name="completed"
+        ${completed ? "checked" : ""}
+      />
+      <slot></slot>
+    </div>
+  `;
+};
+
 // Head Function
 export const Head: EnhanceHeadFn = function (state) {
   const { req, status, error, store } = state;