Long live to Hono! 🔥

blocks/function.ts

@@ -1,13 +1,13 @@
 // deno-lint-ignore-file no-explicit-any
-import { wrapCaughtErrors } from "../blocks/loader.ts";
 import type { HttpContext } from "../blocks/handler.ts";
+import { wrapCaughtErrors } from "../blocks/loader.ts";
 import {
   newSingleFlightGroup,
   type SingleFlightKeyFunc,
 } from "../blocks/utils.tsx";
 import JsonViewer from "../components/JsonViewer.tsx";
-import type { HandlerContext } from "../deps.ts";
 import type { Block, BlockModule } from "../engine/block.ts";
+import type { HandlerContext } from "../engine/manifest/manifest.ts";
 import type { DecoState, LoaderFunction } from "../types.ts";
 
 export type Function<TProps = any, TState = any> = LoaderFunction<

blocks/handler.ts

@@ -1,5 +1,5 @@
 // deno-lint-ignore-file no-explicit-any
-import type { Handler as DenoHandler, ServeHandler } from "../deps.ts";
+import type { Handler as DenoHandler } from "../deps.ts";
 import type { Block, BlockModule, InstanceOf } from "../engine/block.ts";
 import type { BaseContext } from "../engine/core/resolver.ts";
 import type { PromiseOrValue } from "../engine/core/utils.ts";
@@ -30,7 +30,7 @@ export type HttpHandler = <State = any, TConfig = any>(
 type HandlerFunc<TConfig = any, TState = any> = (
   config: TConfig,
   ctx: FnContext<TState>,
-) => DenoHandler | ServeHandler;
+) => DenoHandler;
 
 const handlerBlock: Block<BlockModule<HandlerFunc>> = {
   type: "handlers",

blocks/utils.tsx

@@ -141,6 +141,7 @@ export const fnContextFromHttpContext = <TState = {}>(
 ): FnContext<TState> => {
   let device: Device | null = null;
   let isBot: boolean | null = null;
+
   return {
     ...ctx?.context?.state?.global,
     revision: ctx.revision,

clients/proxy.ts

@@ -8,7 +8,7 @@ import type {
 } from "../utils/invoke.types.ts";
 import type { DotNestedKeys } from "../utils/object.ts";
 import type { Fulfilled, Rejected } from "../utils/promise.ts";
-import type { invokeKey } from "./withManifest.ts";
+import type { invokeKey, InvokerRequestInit } from "./withManifest.ts";
 
 export type InvocationProxyHandler = {
   (props?: any, init?: RequestInit | undefined): Promise<any>;
@@ -86,7 +86,12 @@ export const newHandler = <TManifest extends AppManifest>(
       ): InvokeAwaiter<TManifest, any, any> {
         const ext = part === "x" ? "tsx" : "ts";
         return new InvokeAwaiter<TManifest, any, any>(
-          (payload, init) => invoker(payload.key, payload.props, init),
+          (payload, init) =>
+            invoker(
+              payload.key,
+              payload.props,
+              init as InvokerRequestInit,
+            ) as Promise<InvokeResult<Invoke<TManifest, any, any>, TManifest>>,
           {
             key: `${currentParts.join("/")}.${ext}`,
             props,

clients/withManifest.ts

@@ -1,5 +1,4 @@
 // deno-lint-ignore-file no-explicit-any
-import { IS_BROWSER } from "$fresh/runtime.ts";
 import type { App, AppManifest, ManifestOf } from "../blocks/app.ts";
 import type { StreamProps } from "../mod.ts";
 import type {
@@ -88,7 +87,7 @@ const fetchWithProps = async (
   props: unknown,
   init?: InvokerRequestInit | undefined,
 ) => {
-  if (!IS_BROWSER) {
+  if (typeof document === "undefined") {
     console.warn(
       "👋 Oops! Runtime.invoke should be called only on the client-side, but it seems to be called on the server-side instead. No worries, mistakes happen! 😉",
     );
@@ -121,7 +120,7 @@ const fetchWithProps = async (
     body,
     ...init,
     headers,
-  });
+  } as RequestInit);
 
   if (response.status === 204) {
     return;
@@ -265,7 +264,12 @@ export const invoke = <
       return invokeKey((payload as any).key, (payload as any).props, {
         ...init ?? {},
         fetcher,
-      });
+      }) as Promise<
+        InvokeResult<
+          TPayload,
+          TManifest
+        >
+      >;
     }
     const reqs: Record<
       string,
@@ -278,9 +282,19 @@ export const invoke = <
         reqs[key] = val;
       }
     }
-    return batchInvoke(reqs, { ...init ?? {}, fetcher });
+    return batchInvoke(reqs, { ...init ?? {}, fetcher }) as Promise<
+      InvokeResult<
+        TPayload,
+        TManifest
+      >
+    >;
   }
-  return batchInvoke(payload, { ...init ?? {}, fetcher });
+  return batchInvoke(payload, { ...init ?? {}, fetcher }) as Promise<
+    InvokeResult<
+      TPayload,
+      TManifest
+    >
+  >;
 };
 
 export const create = <
@@ -308,7 +322,13 @@ export const create = <
     TPayload,
     TManifest
   >
-> => invokeKey(key, props, init);
+> =>
+  invokeKey(key, props, init) as Promise<
+    InvokeResult<
+      TPayload,
+      TManifest
+    >
+  >;
 
 /**
  * Creates a set of strongly-typed utilities to be used across the repositories where pointing to an existing function is supported.

components/JsonViewer.tsx

@@ -1,4 +1,4 @@
-import { Head } from "../deps.ts";
+import { useFramework } from "../components/section.tsx";
 
 export interface Props {
   body: string;
@@ -35,13 +35,16 @@ const snippet = (json: string) => {
 
   node?.addEventListener(
     "load",
+    // deno-lint-ignore no-explicit-any
     () => (globalThis.window as any).jQuery("#json-renderer").JSONView(json),
   );
 };
 
 export default function JsonViewer(p: Props) {
+  const { Head } = useFramework();
   return (
     <>
+      {/** @ts-ignore: could not type it well */}
       <Head>
         <script
           type="module"

components/LiveControls.tsx

@@ -1,5 +1,5 @@
 import { context } from "../deco.ts";
-import { DomInspectorActivators, Head, inspectVSCode } from "../deps.ts";
+import { DomInspectorActivators, inspectVSCode } from "../deps.ts";
 import type { Flag, Site } from "../types.ts";
 
 const IS_LOCALHOST = context.deploymentId === undefined;
@@ -172,21 +172,19 @@ const main = () => {
 function LiveControls({ site, page, flags }: Props) {
   return (
     <>
-      <Head>
-        <script
-          type="application/json"
-          id="__DECO_STATE"
-          dangerouslySetInnerHTML={{
-            __html: JSON.stringify({ page, site, flags }),
-          }}
-        />
-        <script
-          type="module"
-          dangerouslySetInnerHTML={{
-            __html: `${domInspectorModule}\n(${main})()`,
-          }}
-        />
-      </Head>
+      <script
+        type="application/json"
+        id="__DECO_STATE"
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify({ page, site, flags }),
+        }}
+      />
+      <script
+        type="module"
+        dangerouslySetInnerHTML={{
+          __html: `${domInspectorModule}\n(${main})()`,
+        }}
+      />
     </>
   );
 }

components/section.tsx

@@ -1,5 +1,9 @@
-import type { PartialProps } from "$fresh/src/runtime/Partial.tsx";
-import { Component, type ComponentType, createContext } from "preact";
+import {
+  Component,
+  type ComponentChildren,
+  type ComponentType,
+  createContext,
+} from "preact";
 import { useContext } from "preact/hooks";
 import type { HttpContext } from "../blocks/handler.ts";
 import type { RequestState } from "../blocks/utils.tsx";
@@ -18,7 +22,9 @@ export interface SectionContext extends HttpContext<RequestState> {
   device: Device;
   framework: "fresh" | "htmx";
   deploymentId?: string;
+  // deno-lint-ignore no-explicit-any
   FallbackWrapper: ComponentType<any>;
+  bindings: Framework;
 }
 
 export const SectionContext = createContext<SectionContext | undefined>(
@@ -93,6 +99,7 @@ export class ErrorBoundary extends Component<BoundaryProps, BoundaryState> {
 }
 
 export interface Framework {
+  Head?: (headProps: { children: ComponentChildren }) => null;
   Wrapper: ComponentType<
     { id: string; partialMode?: "replace" | "append" | "prepend" }
   >;
@@ -113,6 +120,13 @@ export const bindings = {
   htmx: HTMXBindings,
 };
 
+export const useFramework = () => {
+  const {
+    bindings: mbindings,
+  } = useContext(SectionContext) ?? { bindings: bindings.fresh };
+  return mbindings;
+};
+
 export const alwaysThrow =
   (err: unknown): ComponentFunc => (_props: unknown) => {
     throw err;
@@ -130,7 +144,7 @@ export const withSection = <TProps, TLoaderProps = TProps>(
   ctx: HttpContext<
     RequestState & {
       renderSalt?: string;
-      partialMode?: PartialProps["mode"];
+      partialMode?: "replace" | "prepend" | "append";
       framework?: "fresh" | "htmx";
     }
   >,
@@ -141,7 +155,7 @@ export const withSection = <TProps, TLoaderProps = TProps>(
   const renderSaltFromState = ctx.context?.state?.renderSalt;
   const frameworkFromState = ctx.context?.state?.framework;
   // TODO @gimenes This is a fresh thing only. We need to remove it on other framework bindings
-  const partialMode = ctx.context.state.partialMode ||
+  const partialMode = ctx?.context?.state?.partialMode ||
     "replace";
   const metadata = {
     resolveChain: ctx.resolveChain,
@@ -175,6 +189,7 @@ export const withSection = <TProps, TLoaderProps = TProps>(
             deploymentId,
             renderSalt,
             framework,
+            bindings: bindings[framework],
             FallbackWrapper: ({ children, ...props }) => (
               <binding.LoadingFallback id={id} {...props}>
                 {children}

deco.ts

@@ -13,8 +13,10 @@ import type { DecofileProvider } from "./engine/decofile/provider.ts";
 import type { AppManifest } from "./mod.ts";
 import { randId } from "./utils/rand.ts";
 
-export interface DecoRuntimeState {
-  manifest: AppManifest;
+export interface DecoRuntimeState<
+  TAppManifest extends AppManifest = AppManifest,
+> {
+  manifest: TAppManifest;
   // deno-lint-ignore no-explicit-any
   resolver: ReleaseResolver<any>;
   importMap: ImportMap;
@@ -45,7 +47,7 @@ export const DaemonMode = {
 };
 
 // The global deco context
-export interface DecoContext {
+export interface DecoContext<TAppManifest extends AppManifest = AppManifest> {
   deploymentId: string | undefined;
   isDeploy: boolean;
   decodMode?: DecodMode;
@@ -56,7 +58,7 @@ export interface DecoContext {
   base?: string;
   namespace?: string;
   release?: DecofileProvider;
-  runtime?: Promise<DecoRuntimeState>;
+  runtime?: Promise<DecoRuntimeState<TAppManifest>>;
   instance: InstanceInfo;
   request?: RequestContext;
 }
@@ -76,7 +78,8 @@ const getHostingPlatform = (): WellKnownHostingPlatform => {
   }
 };
 
-const defaultContext: Omit<DecoContext, "schema"> = {
+// deno-lint-ignore no-explicit-any
+let defaultContext: Omit<DecoContext<any>, "schema"> = {
   deploymentId,
   siteId: 0,
   isDeploy: isDeploy,
@@ -92,8 +95,13 @@ const defaultContext: Omit<DecoContext, "schema"> = {
 const asyncLocalStorage = new AsyncLocalStorage<DecoContext>();
 
 export const Context = {
+  setDefault: <T extends AppManifest = AppManifest>(
+    ctx: DecoContext<T>,
+  ): void => {
+    defaultContext = ctx;
+  },
   // Function to retrieve the active context
-  active: (): DecoContext => {
+  active: <T extends AppManifest = AppManifest>(): DecoContext<T> => {
     // Retrieve the context associated with the async ID
     return asyncLocalStorage.getStore() ?? defaultContext;
   },

deno.json

@@ -30,13 +30,13 @@
     }
   },
   "imports": {
-    "preact-render-to-string": "https://esm.sh/*preact-render-to-string@6.2.0?pin=102",
-    "preact/": "https://esm.sh/preact@10.16.0/",
-    "preact": "https://esm.sh/preact@10.16.0?pin=102",
-    "partytown/": "https://deno.land/x/partytown@0.3.0/",
-    "std/": "https://deno.land/std@0.203.0/",
+    "deco/": "./",
     "$fresh/": "https://denopkg.com/denoland/fresh@1.6.8/",
-    "deco/": "./"
+    "partytown/": "https://deno.land/x/partytown@0.3.0/",
+    "preact": "https://esm.sh/preact@10.16.0?pin=102",
+    "preact-render-to-string": "https://esm.sh/*preact-render-to-string@6.4.0?pin=102",
+    "preact/": "https://esm.sh/preact@10.16.0/",
+    "std/": "https://deno.land/std@0.203.0/"
   },
   "compilerOptions": {
     "jsx": "react-jsx",

deps.ts

@@ -1,20 +1,3 @@
-export { Head, IS_BROWSER } from "$fresh/runtime.ts";
-export type {
-  FreshContext,
-  Handler as FreshHandler,
-  HandlerContext,
-  Handlers,
-  MiddlewareHandler,
-  MiddlewareHandlerContext,
-  PageProps,
-  RouteConfig,
-} from "$fresh/server.ts";
-export type { ServeHandler } from "$fresh/src/server/deps.ts";
-export type {
-  IslandModule,
-  MiddlewareModule,
-  RouteModule,
-} from "$fresh/src/server/types.ts";
 export { DomInspectorActivators } from "https://deno.land/x/inspect_vscode@0.2.1/inspector.ts";
 export * as inspectVSCode from "https://deno.land/x/inspect_vscode@0.2.1/mod.ts";
 export * as weakcache from "https://deno.land/x/weakcache@v1.1.4/index.js";

engine/decofile/fetcher.ts

@@ -1,5 +1,5 @@
-import { context } from "deco/live.ts";
 import { fromFileUrl } from "std/path/mod.ts";
+import { context } from "../../live.ts";
 import { randId as ulid } from "../../utils/rand.ts";
 import { assertAllowedAuthority as assertAllowedAuthorityFor } from "../trustedAuthority.ts";
 import { newFsProviderFromPath } from "./fs.ts";

engine/manifest/fresh.ts

@@ -1,12 +1,12 @@
 import type { ResolverMap } from "../../engine/core/resolver.ts";
-import type { FreshContext } from "../../engine/manifest/manifest.ts";
 import defaultResolvers from "../../engine/manifest/defaults.ts";
+import type { RouteContext } from "../../engine/manifest/manifest.ts";
 
 const freshResolvers = {
   ...defaultResolvers,
   render: function render(props, { context: { render } }) {
     return render(props);
   },
-} satisfies ResolverMap<FreshContext>;
+} satisfies ResolverMap<RouteContext>;
 
 export default freshResolvers;