feat: add define.layout helper (#3198)

Author: marvinhagemeister

docs/canary/advanced/define.md

@@ -71,3 +71,15 @@ export default define.page<typeof handler>((props) => {
   );
 });
 ```
+
+There is also a `define.layout()` helper for layouts:
+
+```tsx
+export default define.layout((props) => {
+  return (
+    <div>
+      <h1>I like {props.state.foo}</h1>
+    </div>
+  );
+});
+```

src/define.ts

@@ -136,6 +136,22 @@ export interface Define<State> {
   middleware<M extends Middleware<State> | Middleware<State>[]>(
     middleware: M,
   ): typeof middleware;
+  /**
+   * Define a layout component. This function returns the passed input as-is.
+   *
+   * You can use this function to help the TypeScript compiler infer the types
+   * of `props` that your component receives. For example:
+   *
+   * ```ts
+   * import { define } from "../utils.ts";
+   *
+   * export default define.layout((props) => {
+   *   const slug = props.params.slug; // Because props is inferred to be a Context object, slug is inferred to be a string
+   *   return <h1>{slug}</h1>;
+   * });
+   * ```
+   */
+  layout(render: AnyComponent<PageProps<unknown, State>>): typeof render;
 }
 
 /**
@@ -159,6 +175,9 @@ export function createDefine<State>(): Define<State> {
     page(render) {
       return render;
     },
+    layout(render) {
+      return render;
+    },
     middleware(middleware) {
       return middleware;
     },