deno-fresh-composable.tsx

import { useContext } from 'preact/hooks';
import { createContext, Fragment, JSX } from 'preact';
import { HandlerContext, Handlers, PageProps } from "$fresh/server.ts";

const RequestContext = createContext(new Request('http://localhost:8000/'));

const useRequest = () => useContext(RequestContext);

export const passRequestHandler: Handlers<Request> = {
  GET(request, ctx) {
    return ctx.render(request);
  },
  POST(request, ctx) {
    return ctx.render(request);
  },
  PUT(request, ctx) {
    return ctx.render(request);
  },
  DELETE(request, ctx) {
    return ctx.render(request);
  },
};

export function withRequest(Component: (props: any) => JSX.Element) {
  return ({ data }: PageProps<Request>) => {
    return (
      <RequestContext.Provider value={data}>
        {<Component/>}
      </RequestContext.Provider>
    )
  }
}

export function withData<T extends {[key: string]: any}>(Component: (props: T) => JSX.Element, useHook: (req: Request) => T) {
  return ({ data }: PageProps<any>) => {
    const req = data instanceof Request ? data : useRequest()
    const props = useHook(req)
    return (
      <Component {...props}/>
    )
  }
}

export function withDataRequest<T extends {[key: string]: any}>(Component: (props: T) => JSX.Element, useHook: (req: Request) => T) {
  return withRequest(withData(Component, useHook))
}

// this shifts the { data } prop from the route to be spread top-level
export function withShiftData <T>(Component: (props: T) => JSX.Element) {
  return ({ data }: PageProps<any>) => {
    return <Component {...data} />
  }
}

export function getRequest<T>(useHook: (req: Request, ctx?: HandlerContext<T, Record<string, unknown>>) => T) {
  const handlers: Handlers<T> = {
    GET(req, ctx) {
      const res = useHook(req, ctx);
      if (res instanceof Response) return res;
      return ctx.render(res);
    }
  }
  return handlers
}