123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388
import { renderToString } from "preact-render-to-string";import { ComponentChildren, ComponentType, h, options } from "preact";import {  AppModule,  ErrorPage,  Island,  Plugin,  PluginRenderFunctionResult,  PluginRenderResult,  PluginRenderStyleTag,  RenderFunction,  Route,  UnknownPage,} from "./types.ts";import { HEAD_CONTEXT } from "../runtime/head.ts";import { CSP_CONTEXT, nonce, NONE, UNSAFE_INLINE } from "../runtime/csp.ts";import { ContentSecurityPolicy } from "../runtime/csp.ts";import { bundleAssetUrl } from "./constants.ts";import { assetHashingHook } from "../runtime/utils.ts";import { htmlEscapeJsonString } from "./htmlescape.ts";
export interface RenderOptions<Data> {  route: Route<Data> | UnknownPage | ErrorPage;  islands: Island[];  plugins: Plugin[];  app: AppModule;  imports: string[];  preloads: string[];  url: URL;  params: Record<string, string | string[]>;  renderFn: RenderFunction;  data?: Data;  error?: unknown;  lang?: string;}
export type InnerRenderFunction = () => string;
export class RenderContext {  #id: string;  #state: Map<string, unknown> = new Map();  #styles: string[] = [];  #url: URL;  #route: string;  #lang: string;
  constructor(id: string, url: URL, route: string, lang: string) {    this.#id = id;    this.#url = url;    this.#route = route;    this.#lang = lang;  }
  /** A unique ID for this logical JIT render. */  get id(): string {    return this.#id;  }
  /**   * State that is persisted between multiple renders with the same render   * context. This is useful because one logical JIT render could have multiple   * preact render passes due to suspense.   */  get state(): Map<string, unknown> {    return this.#state;  }
  /**   * All of the CSS style rules that should be inlined into the document.   * Adding to this list across multiple renders is supported (even across   * suspense!). The CSS rules will always be inserted on the client in the   * order specified here.   */  get styles(): string[] {    return this.#styles;  }
  /** The URL of the page being rendered. */  get url(): URL {    return this.#url;  }
  /** The route matcher (e.g. /blog/:id) that the request matched for this page   * to be rendered. */  get route(): string {    return this.#route;  }
  /** The language of the page being rendered. Defaults to "en". */  get lang(): string {    return this.#lang;  }  set lang(lang: string) {    this.#lang = lang;  }}
function defaultCsp() {  return {    directives: { defaultSrc: [NONE], styleSrc: [UNSAFE_INLINE] },    reportOnly: false,  };}
/** * This function renders out a page. Rendering is synchronous and non streaming. * Suspense boundaries are not supported. */export async function render<Data>(  opts: RenderOptions<Data>,): Promise<[string, ContentSecurityPolicy | undefined]> {  const props: Record<string, unknown> = {    params: opts.params,    url: opts.url,    route: opts.route.pattern,    data: opts.data,  };  if (opts.error) {    props.error = opts.error;  }
  const csp: ContentSecurityPolicy | undefined = opts.route.csp    ? defaultCsp()    : undefined;  const headComponents: ComponentChildren[] = [];
  const vnode = h(CSP_CONTEXT.Provider, {    value: csp,    children: h(HEAD_CONTEXT.Provider, {      value: headComponents,      children: h(opts.app.default, {        Component() {          return h(opts.route.component! as ComponentType<unknown>, props);        },      }),    }),  });
  const ctx = new RenderContext(    crypto.randomUUID(),    opts.url,    opts.route.pattern,    opts.lang ?? "en",  );
  if (csp) {    // Clear the csp    const newCsp = defaultCsp();    csp.directives = newCsp.directives;    csp.reportOnly = newCsp.reportOnly;  }  // Clear the head components  headComponents.splice(0, headComponents.length);
  // Setup the interesting VNode types  ISLANDS.splice(0, ISLANDS.length, ...opts.islands);
  // Clear the encountered vnodes  ENCOUNTERED_ISLANDS.clear();
  // Clear the island props  ISLAND_PROPS = [];
  let bodyHtml: string | null = null;
  function realRender(): string {    bodyHtml = renderToString(vnode);    return bodyHtml;  }
  const plugins = opts.plugins.filter((p) => p.render !== null);  const renderResults: [Plugin, PluginRenderResult][] = [];
  function render(): PluginRenderFunctionResult {    const plugin = plugins.shift();    if (plugin) {      const res = plugin.render!({ render });      if (res === undefined) {        throw new Error(          `${plugin?.name}'s render hook did not return a PluginRenderResult object.`,        );      }      renderResults.push([plugin, res]);    } else {      realRender();    }    if (bodyHtml === null) {      throw new Error(        `The 'render' function was not called by ${plugin?.name}'s render hook.`,      );    }    return {      htmlText: bodyHtml,      requiresHydration: ENCOUNTERED_ISLANDS.size > 0,    };  }
  await opts.renderFn(ctx, () => render().htmlText);
  if (bodyHtml === null) {    throw new Error("The `render` function was not called by the renderer.");  }
  bodyHtml = bodyHtml as string;
  const imports = opts.imports.map((url) => {    const randomNonce = crypto.randomUUID().replace(/-/g, "");    if (csp) {      csp.directives.scriptSrc = [        ...csp.directives.scriptSrc ?? [],        nonce(randomNonce),      ];    }    return [url, randomNonce] as const;  });
  const state: [islands: unknown[], plugins: unknown[]] = [ISLAND_PROPS, []];  const styleTags: PluginRenderStyleTag[] = [];
  let script =    `const STATE_COMPONENT = document.getElementById("__FRSH_STATE");const STATE = JSON.parse(STATE_COMPONENT?.textContent ?? "[[],[]]");`;
  for (const [plugin, res] of renderResults) {    for (const hydrate of res.scripts ?? []) {      const i = state[1].push(hydrate.state) - 1;      const randomNonce = crypto.randomUUID().replace(/-/g, "");      if (csp) {        csp.directives.scriptSrc = [          ...csp.directives.scriptSrc ?? [],          nonce(randomNonce),        ];      }      const url = bundleAssetUrl(        `/plugin-${plugin.name}-${hydrate.entrypoint}.js`,      );      imports.push([url, randomNonce] as const);
      script += `import p${i} from "${url}";p${i}(STATE[1][${i}]);`;    }    styleTags.splice(styleTags.length, 0, ...res.styles ?? []);  }
  if (ENCOUNTERED_ISLANDS.size > 0) {    // Load the main.js script    {      const randomNonce = crypto.randomUUID().replace(/-/g, "");      if (csp) {        csp.directives.scriptSrc = [          ...csp.directives.scriptSrc ?? [],          nonce(randomNonce),        ];      }      const url = bundleAssetUrl("/main.js");      imports.push([url, randomNonce] as const);    }
    script += `import { revive } from "${bundleAssetUrl("/main.js")}";`;
    // Prepare the inline script that loads and revives the islands    let islandRegistry = "";    for (const island of ENCOUNTERED_ISLANDS) {      const randomNonce = crypto.randomUUID().replace(/-/g, "");      if (csp) {        csp.directives.scriptSrc = [          ...csp.directives.scriptSrc ?? [],          nonce(randomNonce),        ];      }      const url = bundleAssetUrl(`/island-${island.id}.js`);      imports.push([url, randomNonce] as const);      script += `import ${island.name} from "${url}";`;      islandRegistry += `${island.id}:${island.name},`;    }    script += `revive({${islandRegistry}}, STATE[0]);`;  }
  if (state[0].length > 0 || state[1].length > 0) {    // Append state to the body    bodyHtml += `<script id="__FRSH_STATE" type="application/json">${      htmlEscapeJsonString(JSON.stringify(state))    }</script>`;
    // Append the inline script to the body    const randomNonce = crypto.randomUUID().replace(/-/g, "");    if (csp) {      csp.directives.scriptSrc = [        ...csp.directives.scriptSrc ?? [],        nonce(randomNonce),      ];    }    bodyHtml +=      `<script type="module" nonce="${randomNonce}">${script}</script>`;  }
  if (ctx.styles.length > 0) {    const node = h("style", {      id: "__FRSH_STYLE",      dangerouslySetInnerHTML: { __html: ctx.styles.join("\n") },    });    headComponents.splice(0, 0, node);  }
  for (const style of styleTags) {    const node = h("style", {      id: style.id,      dangerouslySetInnerHTML: { __html: style.cssText },      media: style.media,    });    headComponents.splice(0, 0, node);  }
  const html = template({    bodyHtml,    headComponents,    imports,    preloads: opts.preloads,    lang: ctx.lang,  });
  return [html, csp];}
export interface TemplateOptions {  bodyHtml: string;  headComponents: ComponentChildren[];  imports: (readonly [string, string])[];  preloads: string[];  lang: string;}
export function template(opts: TemplateOptions): string {  const page = h(    "html",    { lang: opts.lang },    h(      "head",      null,      h("meta", { charSet: "UTF-8" }),      h("meta", {        name: "viewport",        content: "width=device-width, initial-scale=1.0",      }),      opts.preloads.map((src) =>        h("link", { rel: "modulepreload", href: src })      ),      opts.imports.map(([src, nonce]) =>        h("script", { src: src, nonce: nonce, type: "module" })      ),      opts.headComponents,    ),    h("body", { dangerouslySetInnerHTML: { __html: opts.bodyHtml } }),  );  return "<!DOCTYPE html>" + renderToString(page);}
// Set up a preact option hook to track when vnode with custom functions are// created.const ISLANDS: Island[] = [];const ENCOUNTERED_ISLANDS: Set<Island> = new Set([]);let ISLAND_PROPS: unknown[] = [];const originalHook = options.vnode;let ignoreNext = false;options.vnode = (vnode) => {  assetHashingHook(vnode);  const originalType = vnode.type as ComponentType<unknown>;  if (typeof vnode.type === "function") {    const island = ISLANDS.find((island) => island.component === originalType);    if (island) {      if (ignoreNext) {        ignoreNext = false;        return;      }      ENCOUNTERED_ISLANDS.add(island);      vnode.type = (props) => {        ignoreNext = true;        const child = h(originalType, props);        ISLAND_PROPS.push(props);        return h(          `!--frsh-${island.id}:${ISLAND_PROPS.length - 1}--`,          null,          child,        );      };    }  }  if (originalHook) originalHook(vnode);};