@solidjs/start 1.2.1 → 2.0.0-alpha.1

package/src/config/manifest.ts

@@ -0,0 +1,84 @@
+import { type PluginOption, type ViteDevServer } from "vite";
+
+import { findStylesInModuleGraph } from "../server/collect-styles.ts";
+import { VIRTUAL_MODULES } from "./constants.ts";
+import { type SolidStartOptions } from "./index.ts";
+
+export function manifest(start: SolidStartOptions): PluginOption {
+  let devServer: ViteDevServer = undefined!;
+  return {
+    name: "solid-start:manifest-plugin",
+    enforce: "pre",
+    configureServer(server) {
+      devServer = server;
+    },
+    async resolveId(id) {
+      if (id === VIRTUAL_MODULES.clientViteManifest)
+        return `\0${VIRTUAL_MODULES.clientViteManifest}`;
+      if (id === VIRTUAL_MODULES.getClientManifest)
+        return this.resolve(
+          new URL("../server/manifest/client-manifest", import.meta.url).pathname,
+        );
+      if (id === VIRTUAL_MODULES.getManifest) {
+        return this.environment.config.consumer === "client"
+          ? this.resolve(new URL("../server/manifest/client-manifest", import.meta.url).pathname)
+          : this.resolve(new URL("../server/manifest/ssr-manifest", import.meta.url).pathname);
+      }
+      if (id === VIRTUAL_MODULES.middleware) {
+        if (start.middleware) return await this.resolve(start.middleware);
+        return `\0${VIRTUAL_MODULES.middleware}`;
+      }
+    },
+    async load(id) {
+      if (id === `\0${VIRTUAL_MODULES.clientViteManifest}`) {
+        let clientViteManifest: Record<string, Record<string, any>>;
+        if (this.environment.config.command === "serve") {
+          clientViteManifest = {};
+        } else {
+          const entry = Object.values(globalThis.START_CLIENT_BUNDLE).find(
+            v => "isEntry" in v && v.isEntry,
+          );
+          if (!entry) throw new Error("No client entry found");
+          clientViteManifest = JSON.parse(
+            (globalThis.START_CLIENT_BUNDLE[".vite/manifest.json"] as any).source,
+          );
+        }
+        return `export const clientViteManifest = ${JSON.stringify(clientViteManifest)};`;
+      } else if (id === `\0${VIRTUAL_MODULES.middleware}`) return "export default {};";
+      else if (id.startsWith("/@manifest")) {
+        if (this.environment.mode !== "dev")
+          throw new Error("@manifest queries are only allowed in dev");
+
+        const [path, query] = id.split("?");
+        const target = id.split("/")[2]!;
+        const params = new URLSearchParams(query);
+        if (!path || !query) return;
+        if (path.endsWith("assets")) {
+          const id = params.get("id");
+          if (!id) {
+            throw new Error("Missing id to get assets.");
+          }
+
+          // Client env does not have css dependencies in mod.transformResult
+          // Aalways use ssr env instead, to prevent hydration mismatches
+          const env = devServer.environments["ssr"];
+          const styles = await findStylesInModuleGraph(env, id);
+
+          const cssAssets = Object.entries(styles).map(
+            ([key, value]) => `{
+						tag: "style",
+						attrs: {
+							type: "text/css",
+							"data-vite-dev-id": "${key}",
+							"data-vite-ref": "0",
+						},
+						children: () => import("${value}?inline").then(mod => mod.default),
+					}`,
+          );
+
+          return `export default [${cssAssets.join(",")}]`;
+        }
+      }
+    },
+  };
+}

package/src/config/utils.ts

@@ -0,0 +1,5 @@
+export function parseIdQuery(id: string) {
+  if (!id.includes("?")) return { filename: id, query: new URLSearchParams() };
+  const [filename, rawQuery] = id.split(`?`, 2) as [string, string];
+  return { filename, query: new URLSearchParams(rawQuery) };
+}

package/src/config/vite-utils.ts

@@ -0,0 +1,109 @@
+import { DevEnvironment, Rollup } from "vite";
+import fs from "node:fs";
+import path from "node:path";
+
+const postfixRE = /[?#].*$/;
+export function cleanUrl(url: string): string {
+  return url.replace(postfixRE, "");
+}
+
+export const FS_PREFIX = `/@fs/`;
+
+export const VALID_ID_PREFIX = `/@id/`;
+
+export const NULL_BYTE_PLACEHOLDER = `__x00__`;
+
+export function normalizeResolvedIdToUrl(
+  environment: DevEnvironment,
+  url: string,
+  resolved: Rollup.PartialResolvedId,
+): string {
+  const root = environment.config.root;
+  const depsOptimizer = environment.depsOptimizer;
+
+  // normalize all imports into resolved URLs
+  // e.g. `import 'foo'` -> `import '/@fs/.../node_modules/foo/index.js'`
+  if (resolved.id.startsWith(withTrailingSlash(root))) {
+    // in root: infer short absolute path from root
+    url = resolved.id.slice(root.length);
+  } else if (
+    depsOptimizer?.isOptimizedDepFile(resolved.id) ||
+    // vite-plugin-react isn't following the leading \0 virtual module convention.
+    // This is a temporary hack to avoid expensive fs checks for React apps.
+    // We'll remove this as soon we're able to fix the react plugins.
+    (resolved.id !== "/@react-refresh" &&
+      path.isAbsolute(resolved.id) &&
+      fs.existsSync(cleanUrl(resolved.id)))
+  ) {
+    // an optimized deps may not yet exists in the filesystem, or
+    // a regular file exists but is out of root: rewrite to absolute /@fs/ paths
+    url = path.posix.join(FS_PREFIX, resolved.id);
+  } else {
+    url = resolved.id;
+  }
+
+  // if the resolved id is not a valid browser import specifier,
+  // prefix it to make it valid. We will strip this before feeding it
+  // back into the transform pipeline
+  if (url[0] !== "." && url[0] !== "/") {
+    url = wrapId(resolved.id);
+  }
+
+  return url;
+}
+
+export function wrapId(id: string): string {
+  return id.startsWith(VALID_ID_PREFIX)
+    ? id
+    : VALID_ID_PREFIX + id.replace("\0", NULL_BYTE_PLACEHOLDER);
+}
+
+export function unwrapId(id: string): string {
+  return id.startsWith(VALID_ID_PREFIX)
+    ? id.slice(VALID_ID_PREFIX.length).replace(NULL_BYTE_PLACEHOLDER, "\0")
+    : id;
+}
+
+export function normalizeViteImportAnalysisUrl(environment: DevEnvironment, id: string): string {
+  let url = normalizeResolvedIdToUrl(environment, id, { id });
+
+  // https://github.com/vitejs/vite/blob/c18ce868c4d70873406e9f7d1b2d0a03264d2168/packages/vite/src/node/plugins/importAnalysis.ts#L416
+  if (environment.config.consumer === "client") {
+    const mod = environment.moduleGraph.getModuleById(id);
+    if (mod && mod.lastHMRTimestamp > 0) {
+      url = injectQuery(url, `t=${mod.lastHMRTimestamp}`);
+    }
+  }
+
+  return url;
+}
+
+export function withTrailingSlash(path: string): string {
+  if (path[path.length - 1] !== "/") {
+    return `${path}/`;
+  }
+  return path;
+}
+
+export function splitFileAndPostfix(path: string): {
+  file: string;
+  postfix: string;
+} {
+  const file = cleanUrl(path);
+  return { file, postfix: path.slice(file.length) };
+}
+
+const windowsSlashRE = /\\/g;
+export function slash(p: string): string {
+  return p.replace(windowsSlashRE, "/");
+}
+
+const isWindows = typeof process !== "undefined" && process.platform === "win32";
+
+export function injectQuery(url: string, queryToInject: string): string {
+  const { file, postfix } = splitFileAndPostfix(url);
+  const normalizedFile = isWindows ? slash(file) : file;
+  return `${normalizedFile}?${queryToInject}${
+    postfix[0] === "?" ? `&${postfix.slice(1)}` : /* hash only */ postfix
+  }`;
+}

package/src/env.d.ts

@@ -0,0 +1,17 @@
+// This file contains global type definitions that are internal to SolidStart and are not exported
+
+declare module "solidstart:server-fn-manifest" {
+  type ServerFn = (...args: Array<any>) => Promise<any>;
+  export function getServerFnById(id: string): Promise<ServerFn>;
+}
+
+interface ImportMetaEnv extends SolidStartMetaEnv {}
+
+interface SolidStartMetaEnv {
+  START_SSR: boolean;
+  START_APP_ENTRY: string;
+  START_CLIENT_ENTRY: string;
+  START_ISLANDS: boolean;
+  // START_DEV_OVERLAY: boolean;
+  // SERVER_BASE_URL: string;
+}

package/src/http/index.ts

@@ -0,0 +1,216 @@
+import type { H3Event, HTTPEvent, InferEventInput } from "h3";
+import * as h3 from "h3";
+import { getRequestEvent } from "solid-js/web";
+
+function _setContext(event: H3Event, key: string, value: any) {
+  event.context[key] = value;
+}
+
+function _getContext(event: H3Event, key: string) {
+  return event.context[key];
+}
+
+function getEvent() {
+  return getRequestEvent()!.nativeEvent;
+}
+
+export function getWebRequest(): Request {
+  return getEvent().req;
+}
+
+export const HTTPEventSymbol = Symbol("$HTTPEvent");
+
+export function isEvent(obj: any): obj is h3.H3Event | { [HTTPEventSymbol]: h3.H3Event } {
+  return (
+    typeof obj === "object" &&
+    (obj instanceof h3.H3Event ||
+      obj?.[HTTPEventSymbol] instanceof h3.H3Event ||
+      obj?.__is_event__ === true)
+  );
+  // Implement logic to check if obj is an H3Event
+}
+
+type Tail<T> = T extends [any, ...infer U] ? U : never;
+
+type PrependOverload<
+  TOriginal extends (...args: Array<any>) => any,
+  TOverload extends (...args: Array<any>) => any,
+> = TOverload & TOriginal;
+
+// add an overload to the function without the event argument
+type WrapFunction<TFn extends (...args: Array<any>) => any> = PrependOverload<
+  TFn,
+  (
+    ...args: Parameters<TFn> extends [h3.HTTPEvent<any> | h3.H3Event<any>, ...infer TArgs]
+      ? TArgs
+      : Parameters<TFn>
+  ) => ReturnType<TFn>
+>;
+
+function createWrapperFunction<TFn extends (...args: Array<any>) => any>(
+  h3Function: TFn,
+): WrapFunction<TFn> {
+  return ((...args: Array<any>) => {
+    const event = args[0];
+    if (!isEvent(event)) {
+      args.unshift(getEvent());
+    } else {
+      args[0] =
+        event instanceof h3.H3Event || (event as any).__is_event__ ? event : event[HTTPEventSymbol];
+    }
+
+    return (h3Function as any)(...args);
+  }) as any;
+}
+
+// Creating wrappers for each utility and exporting them with their original names
+// readRawBody => getWebRequest().text()/.arrayBuffer()
+type WrappedReadBody = <T, TEventInput = InferEventInput<"body", H3Event, T>>(
+  ...args: Tail<Parameters<typeof h3.readBody<T, H3Event, TEventInput>>>
+) => ReturnType<typeof h3.readBody<T, h3.H3Event, TEventInput>>;
+export const readBody = createWrapperFunction(h3.readBody) as PrependOverload<
+  typeof h3.readBody,
+  WrappedReadBody
+>;
+type WrappedGetQuery = <T, TEventInput = Exclude<InferEventInput<"query", H3Event, T>, undefined>>(
+  ...args: Tail<Parameters<typeof h3.getQuery<T, H3Event, TEventInput>>>
+) => ReturnType<typeof h3.getQuery<T, H3Event, TEventInput>>;
+export const getQuery = createWrapperFunction(h3.getQuery) as PrependOverload<
+  typeof h3.getQuery,
+  WrappedGetQuery
+>;
+export const isMethod = createWrapperFunction(h3.isMethod);
+export const isPreflightRequest = createWrapperFunction(h3.isPreflightRequest);
+type WrappedGetValidatedQuery = <
+  T extends HTTPEvent,
+  TEventInput = InferEventInput<"query", H3Event, T>,
+>(
+  ...args: Tail<Parameters<typeof h3.getValidatedQuery<T, H3Event, TEventInput>>>
+) => ReturnType<typeof h3.getValidatedQuery<T, H3Event, TEventInput>>;
+export const getValidatedQuery = createWrapperFunction(h3.getValidatedQuery) as PrependOverload<
+  typeof h3.getValidatedQuery,
+  WrappedGetValidatedQuery
+>;
+export const getRouterParams = createWrapperFunction(h3.getRouterParams);
+export const getRouterParam = createWrapperFunction(h3.getRouterParam);
+type WrappedGetValidatedRouterParams = <
+  T extends HTTPEvent,
+  TEventInput = InferEventInput<"routerParams", H3Event, T>,
+>(
+  ...args: Tail<Parameters<typeof h3.getValidatedRouterParams<T, H3Event, TEventInput>>>
+) => ReturnType<typeof h3.getValidatedRouterParams<T, H3Event, TEventInput>>;
+export const getValidatedRouterParams = createWrapperFunction(
+  h3.getValidatedRouterParams,
+) as PrependOverload<typeof h3.getValidatedRouterParams, WrappedGetValidatedRouterParams>;
+export const assertMethod = createWrapperFunction(h3.assertMethod);
+export const getRequestHeaders = createWrapperFunction(h3.getRequestHeaders);
+export const getRequestHeader = createWrapperFunction(h3.getRequestHeader);
+export const getRequestURL = createWrapperFunction(h3.getRequestURL);
+export const getRequestHost = createWrapperFunction(h3.getRequestHost);
+export const getRequestProtocol = createWrapperFunction(h3.getRequestProtocol);
+export const getRequestIP = createWrapperFunction(h3.getRequestIP);
+export const setResponseStatus = (code?: number, text?: string) => {
+  const e = getEvent();
+
+  if (e.res.status !== undefined) e.res.status = code;
+  if (e.res.statusText !== undefined) e.res.statusText = text;
+};
+export const getResponseStatus = () => getEvent().res.status;
+export const getResponseStatusText = () => getEvent().res.statusText;
+export const getResponseHeaders = () => Object.fromEntries(getEvent().res.headers.entries());
+export const getResponseHeader = (name: string) => getEvent().res.headers.get(name);
+export const setResponseHeaders = (values: Record<string, string>) => {
+  const headers = getEvent().res.headers;
+  for (const [name, value] of Object.entries(values)) {
+    headers.set(name, value);
+  }
+};
+export const setResponseHeader = (name: string, value: string | string[]) => {
+  const headers = getEvent().res.headers;
+
+  (Array.isArray(value) ? value : [value]).forEach(value => {
+    headers.set(name, value);
+  });
+};
+export const appendResponseHeaders = (values: Record<string, string>) => {
+  const headers = getEvent().res.headers;
+  for (const [name, value] of Object.entries(values)) {
+    headers.append(name, value);
+  }
+};
+export const appendResponseHeader = (name: string, value: string | string[]) => {
+  const headers = getEvent().res.headers;
+
+  (Array.isArray(value) ? value : [value]).forEach(value => {
+    headers.append(name, value);
+  });
+};
+export const defaultContentType = (type: string) =>
+  getEvent().res.headers.set("content-type", type);
+export const proxyRequest = createWrapperFunction(h3.proxyRequest);
+export const fetchWithEvent = createWrapperFunction(h3.fetchWithEvent);
+export const getProxyRequestHeaders = createWrapperFunction(h3.getProxyRequestHeaders);
+
+export const parseCookies = createWrapperFunction(h3.parseCookies);
+export const getCookie = createWrapperFunction(h3.getCookie);
+export const setCookie = createWrapperFunction(h3.setCookie);
+export const deleteCookie = createWrapperFunction(h3.deleteCookie);
+// not exported :(
+type SessionDataT = Record<string, any>;
+type WrappedUseSession = <T extends SessionDataT>(
+  ...args: Tail<Parameters<typeof h3.useSession<T>>>
+) => ReturnType<typeof h3.useSession<T>>;
+export const useSession: WrappedUseSession = createWrapperFunction(h3.useSession);
+type WrappedGetSession = <T extends SessionDataT>(
+  ...args: Tail<Parameters<typeof h3.getSession<T>>>
+) => ReturnType<typeof h3.getSession<T>>;
+export const getSession: WrappedGetSession = createWrapperFunction(h3.getSession);
+type WrappedUpdateSession = <T extends SessionDataT>(
+  ...args: Tail<Parameters<typeof h3.updateSession<T>>>
+) => ReturnType<typeof h3.updateSession<T>>;
+export const updateSession: WrappedUpdateSession = createWrapperFunction(h3.updateSession);
+type WrappedSealSession = <T extends SessionDataT>(
+  ...args: Tail<Parameters<typeof h3.sealSession<T>>>
+) => ReturnType<typeof h3.sealSession<T>>;
+export const sealSession: WrappedSealSession = createWrapperFunction(h3.sealSession);
+export const unsealSession = createWrapperFunction(h3.unsealSession);
+export const clearSession = createWrapperFunction(h3.clearSession);
+export const handleCacheHeaders = createWrapperFunction(h3.handleCacheHeaders);
+export const handleCors = createWrapperFunction(h3.handleCors);
+export const appendCorsHeaders = createWrapperFunction(h3.appendCorsHeaders);
+export const appendCorsPreflightHeaders = createWrapperFunction(h3.appendCorsPreflightHeaders);
+export const appendHeader = appendResponseHeader;
+export const appendHeaders = appendResponseHeaders;
+export const setHeader = setResponseHeader;
+export const setHeaders = setResponseHeaders;
+export const getHeader = getRequestHeader;
+export const getHeaders = getRequestHeaders;
+export const getRequestFingerprint = createWrapperFunction(h3.getRequestFingerprint);
+export const getRequestWebStream = () => getEvent().req.body;
+export const readFormData = () => getEvent().req.formData();
+type WrappedReadValidatedBody = <
+  T extends HTTPEvent,
+  TEventInput = InferEventInput<"body", H3Event, T>,
+>(
+  ...args: Tail<Parameters<typeof h3.readValidatedBody<T, H3Event, TEventInput>>>
+) => ReturnType<typeof h3.readValidatedBody<T, H3Event, TEventInput>>;
+export const readValidatedBody = createWrapperFunction(h3.readValidatedBody) as PrependOverload<
+  typeof h3.readValidatedBody,
+  WrappedReadValidatedBody
+>;
+export const getContext = createWrapperFunction(_getContext);
+export const setContext = createWrapperFunction(_setContext);
+export const removeResponseHeader = (name: string) => getEvent().res.headers.delete(name);
+export const clearResponseHeaders = (headerNames?: string[]) => {
+  const headers = getEvent().res.headers;
+
+  if (headerNames && headerNames.length > 0) {
+    for (const name of headerNames) {
+      headers.delete(name);
+    }
+  } else {
+    for (const name of headers.keys()) {
+      headers.delete(name);
+    }
+  }
+};

package/src/index.tsx

@@ -0,0 +1,7 @@
+// @refresh skip
+
+export { default as clientOnly } from "./shared/clientOnly.ts";
+export { GET } from "./shared/GET.ts";
+export { HttpHeader } from "./shared/HttpHeader.tsx";
+export { HttpStatusCode } from "./shared/HttpStatusCode.ts";
+export { getServerFunctionMeta } from "./shared/serverFunction.ts";

package/src/internal.d.ts

@@ -0,0 +1,14 @@
+import "h3";
+declare module "h3" {
+  import { ViteDevServer } from "vite";
+
+  export interface H3EventContext {
+    viteDevServer?: ViteDevServer;
+  }
+}
+
+import type { Rollup } from "vite";
+declare global {
+  var START_CLIENT_BUNDLE: Rollup.OutputBundle;
+  var USING_SOLID_START_DEV_SERVER: boolean | undefined;
+}

package/src/middleware/index.ts

@@ -0,0 +1,72 @@
+// @refresh skip
+
+import type { H3Event, Middleware } from "h3";
+import { getFetchEvent } from "../server/fetchEvent.ts";
+import type { FetchEvent } from "../server/types.ts";
+
+/** Function responsible for receiving an observable [operation]{@link Operation} and returning a [result]{@link OperationResult}. */
+
+export type MiddlewareFn = (event: FetchEvent) => Promise<unknown> | unknown;
+/** This composes an array of Exchanges into a single ExchangeIO function */
+
+export type RequestMiddleware = (
+  event: FetchEvent,
+) => Response | Promise<Response> | void | Promise<void> | Promise<void | Response>;
+
+// copy-pasted from h3/dist/index.d.ts
+type EventHandlerResponse<T = any> = T | Promise<T>;
+type ResponseMiddlewareResponseParam = { body?: Awaited<EventHandlerResponse> };
+
+export type ResponseMiddleware = (
+  event: FetchEvent,
+  response: ResponseMiddlewareResponseParam,
+) => Response | Promise<Response> | void | Promise<void>;
+
+function wrapRequestMiddleware(onRequest: RequestMiddleware) {
+  return async (h3Event: H3Event) => {
+    const fetchEvent = getFetchEvent(h3Event);
+    const response = await onRequest(fetchEvent);
+    if (response) return response;
+  };
+}
+
+function wrapResponseMiddleware(onBeforeResponse: ResponseMiddleware): Middleware {
+  return async (h3Event, next) => {
+    const resp = await next();
+
+    const fetchEvent = getFetchEvent(h3Event);
+    const mwResponse = await onBeforeResponse(fetchEvent, {
+      body: (resp as any)?.body,
+    });
+    if (mwResponse) return mwResponse;
+  };
+}
+
+export function createMiddleware(
+  args:
+    | {
+        /** @deprecated Use H3 `Middleware` */
+        onRequest?: RequestMiddleware | RequestMiddleware[] | undefined;
+        /** @deprecated Use H3 `Middleware` */
+        onBeforeResponse?: ResponseMiddleware | ResponseMiddleware[] | undefined;
+      }
+    | Middleware[],
+): Middleware[] {
+  if (Array.isArray(args)) return args;
+
+  const mw: Middleware[] = [];
+
+  if (typeof args.onRequest === "function") {
+    mw.push(wrapRequestMiddleware(args.onRequest));
+  } else if (Array.isArray(args.onRequest)) {
+    mw.push(...args.onRequest.map(wrapRequestMiddleware));
+  }
+
+  if (typeof args.onBeforeResponse === "function") {
+    mw.push(wrapResponseMiddleware(args.onBeforeResponse));
+  } else if (Array.isArray(args.onBeforeResponse)) {
+    mw.push(...args.onBeforeResponse.map(wrapResponseMiddleware));
+  }
+
+  return mw;
+}

package/src/router.tsx

@@ -0,0 +1,37 @@
+import { lazy, type Component } from "solid-js";
+import { getRequestEvent, isServer } from "solid-js/web";
+
+import { pageRoutes as routeConfigs } from "./server/routes.ts";
+import type { PageEvent } from "./server/types.ts";
+
+const components: Record<string, Component> = {};
+
+export function createRoutes() {
+  function createRoute(route: any) {
+    const component =
+      route.$component && (components[route.$component.src] ??= lazy(route.$component.import));
+
+    return {
+      ...route,
+      ...(route.$$route ? route.$$route.require().route : undefined),
+      info: {
+        ...(route.$$route ? route.$$route.require().route.info : {}),
+        filesystem: true,
+      },
+      component,
+      children: route.children ? route.children.map(createRoute) : undefined,
+    };
+  }
+  const routes = routeConfigs.map(createRoute);
+  return routes;
+}
+
+let routes: any[];
+
+/**
+ *
+ * Read more: https://docs.solidjs.com/solid-start/reference/routing/file-routes
+ */
+export const FileRoutes = isServer
+  ? () => (getRequestEvent() as PageEvent).routes
+  : () => routes || (routes = createRoutes());

package/src/server/StartServer.tsx

@@ -0,0 +1,56 @@
+// @refresh skip
+import type { Component } from "solid-js";
+import { Hydration, HydrationScript, NoHydration, getRequestEvent, ssr } from "solid-js/web";
+import App from "solid-start:app";
+
+import { ErrorBoundary, TopErrorBoundary } from "../shared/ErrorBoundary.tsx";
+import { useAssets } from "./assets/index.ts";
+import { getSsrManifest } from "./manifest/ssr-manifest.ts";
+import type { DocumentComponentProps, PageEvent } from "./types.ts";
+
+const docType = ssr("<!DOCTYPE html>");
+
+/**
+ *
+ * Read more: https://docs.solidjs.com/solid-start/reference/server/start-server
+ */
+export function StartServer(props: { document: Component<DocumentComponentProps> }) {
+  const context = getRequestEvent() as PageEvent;
+
+  // @ts-ignore
+  const nonce = context.nonce;
+  useAssets(context.assets, nonce);
+
+  return (
+    <NoHydration>
+      {docType as unknown as any}
+      <TopErrorBoundary>
+        <props.document
+          assets={<HydrationScript />}
+          scripts={
+            <>
+              <script
+                type="module"
+                nonce={nonce}
+                async
+                src={getSsrManifest("client").path(import.meta.env.START_CLIENT_ENTRY)}
+              />
+            </>
+          }
+        >
+          {!import.meta.env.START_ISLANDS ? (
+            <Hydration>
+              <ErrorBoundary>
+                <App />
+              </ErrorBoundary>
+            </Hydration>
+          ) : (
+            <ErrorBoundary>
+              <App />
+            </ErrorBoundary>
+          )}
+        </props.document>
+      </TopErrorBoundary>
+    </NoHydration>
+  );
+}