feat: throw if aborted while rendering section

blocks/section.ts

@@ -73,7 +73,8 @@ export interface SectionModule<
     ReturnType<ComponentFunc<TLoaderProps | TActionProps>>,
     PreactComponent
   > {
-  LoadingFallback?: ComponentType;
+  // Fix this ComponentType<any>
+  LoadingFallback?: ComponentType<any>;
   ErrorFallback?: ComponentType<{ error?: Error }>;
   loader?: PropsLoader<TConfig, TLoaderProps>;
   action?: PropsLoader<TConfig, TActionProps>;

components/section.tsx

@@ -3,7 +3,7 @@ import { Component, type ComponentType, createContext, Fragment } from "preact";
 import { useContext } from "preact/hooks";
 import type { HttpContext } from "../blocks/handler.ts";
 import type { RequestState } from "../blocks/utils.tsx";
-import { Context } from "../deco.ts";
+import { Context, RequestContext } from "../deco.ts";
 import { Murmurhash3 } from "../deps.ts";
 import type { ComponentFunc } from "../engine/block.ts";
 import type { FieldResolver } from "../engine/core/resolver.ts";
@@ -17,7 +17,7 @@ export interface SectionContext extends HttpContext<RequestState> {
   renderSalt?: string;
   device: Device;
   framework: "fresh" | "htmx";
-  deploymentId?: string
+  deploymentId?: string;
 }
 
 export const SectionContext = createContext<SectionContext | undefined>(
@@ -146,6 +146,11 @@ export const withSection = <TProps,>(
   };
   let device: Device | null = null;
 
+  /**
+   * Get the signal created during the request;
+   */
+  const signal = RequestContext.signal;
+
   return {
     props,
     Component: (props: TProps) => {
@@ -162,6 +167,12 @@ export const withSection = <TProps,>(
       const id = `${idPrefix}-${renderSalt}`; // all children of the same parent will have the same renderSalt, but different renderCount
       renderCount = ++renderCount % MAX_RENDER_COUNT;
 
+      const Throw = () => {
+        // If the signal from request is aborted, then throw
+        signal?.throwIfAborted();
+        return null;
+      };
+
       return (
         <SectionContext.Provider
           value={{
@@ -187,7 +198,17 @@ export const withSection = <TProps,>(
                 loading={() => (
                   <binding.LoadingFallback id={id}>
                     {/* @ts-ignore difficult typing this */}
-                    <LoadingFallback {...props} />
+                    <LoadingFallback
+                      {...new Proxy<Partial<TProps>>(props, {
+                        get: (value: Partial<TProps>, prop) => {
+                          try {
+                            return Reflect.get(value, prop);
+                          } catch (_) {
+                            return undefined;
+                          }
+                        },
+                      })}
+                    />
                   </binding.LoadingFallback>
                 )}
                 error={({ error }) => (
@@ -204,6 +225,7 @@ export const withSection = <TProps,>(
                     )
                 )}
               >
+                {<Throw />}
                 <ComponentFunc {...props} />
               </ErrorBoundary>
             </section>

deno.json

@@ -35,7 +35,7 @@
     "preact": "https://esm.sh/[email protected]?pin=102",
     "partytown/": "https://deno.land/x/[email protected]/",
     "std/": "https://deno.land/[email protected]/",
-    "$fresh/": "https://denopkg.com/denoland/[email protected].5/",
+    "$fresh/": "https://denopkg.com/denoland/[email protected].8/",
     "deco/": "./"
   },
   "compilerOptions": {