Create inline action

blocks/section.ts

@@ -1,4 +1,5 @@
 // deno-lint-ignore-file no-explicit-any
+import { PartialProps } from "$fresh/src/runtime/Partial.tsx";
 import { ComponentType } from "preact";
 import { HttpContext } from "../blocks/handler.ts";
 import { PropsLoader, propsLoader } from "../blocks/propsLoader.ts";
@@ -16,7 +17,6 @@ import {
 } from "../engine/block.ts";
 import { Resolver } from "../engine/core/resolver.ts";
 import { AppManifest, FunctionContext } from "../types.ts";
-import { PartialProps } from "$fresh/src/runtime/Partial.tsx";
 
 /**
  * @widget none
@@ -55,15 +55,21 @@ export interface ErrorBoundaryParams<TProps> {
 export type ErrorBoundaryComponent<TProps> = ComponentFunc<
   ErrorBoundaryParams<TProps>
 >;
-export interface SectionModule<TConfig = any, TProps = any> extends
+export interface SectionModule<
+  TConfig = any,
+  TProps = any,
+  TLoaderProps = TProps,
+  TActionProps = TProps,
+> extends
   BlockModule<
-    ComponentFunc<TProps>,
-    ReturnType<ComponentFunc<TProps>>,
+    ComponentFunc<TLoaderProps | TActionProps>,
+    ReturnType<ComponentFunc<TLoaderProps | TActionProps>>,
     PreactComponent
   > {
   LoadingFallback?: ComponentType;
   ErrorFallback?: ComponentType<{ error?: Error }>;
-  loader?: PropsLoader<TConfig, TProps>;
+  loader?: PropsLoader<TConfig, TLoaderProps>;
+  action?: PropsLoader<TConfig, TActionProps>;
   partialMode?: PartialProps["mode"];
 }
 
@@ -101,7 +107,10 @@ export const createSectionBlock = (
   type: "sections" | "pages",
 ): Block<SectionModule> => ({
   type,
-  introspect: { funcNames: ["loader", "default"], includeReturn: true },
+  introspect: {
+    funcNames: ["loader", "action", "default"],
+    includeReturn: true,
+  },
   adapt: <TConfig = any, TProps = any>(
     mod: SectionModule<TConfig, TProps>,
     resolver: string,
@@ -123,8 +132,8 @@ export const createSectionBlock = (
       mod.ErrorFallback,
       mod.partialMode,
     );
-    const loader = mod.loader;
-    if (!loader) {
+
+    if (!mod.action && !mod.loader) {
       return (
         props: TProps,
         ctx: HttpContext<RequestState>,
@@ -142,17 +151,26 @@ export const createSectionBlock = (
         resolve,
       } = httpCtx;
 
+      const loaderSectionProps = request.method === "POST"
+        ? mod.action ?? mod.loader
+        : mod.loader;
+
+      if (!loaderSectionProps) {
+        return componentFunc(props as unknown as TProps, httpCtx);
+      }
+
       const ctx = {
         ...context,
         state: { ...context.state, $live: props, resolve },
       } as FunctionContext;
 
+      const fnContext = fnContextFromHttpContext(httpCtx);
       const p = await wrapCaughtErrors(() =>
         propsLoader(
-          loader,
+          loaderSectionProps,
           ctx.state.$live,
           request,
-          fnContextFromHttpContext(httpCtx),
+          fnContext,
         ), props ?? {});
 
       return componentFunc(p, httpCtx);

components/Form.tsx

@@ -0,0 +1,8 @@
+import { JSX } from "preact";
+import { usePartialSection } from "../hooks/usePartialSection.ts";
+
+export function Form(props: JSX.IntrinsicElements["form"]) {
+  return (
+    <form {...props} method="POST" action={usePartialSection()["f-partial"]} />
+  );
+}