fix: allow overriding browser entrypoint (#273)

* fix: allow overriding browser entrypoint

* fix: fmt

.devcontainer/devcontainer.json

@@ -6,7 +6,7 @@
  "image": "mcr.microsoft.com/devcontainers/base:jammy",
  "features": {
  "ghcr.io/devcontainers-contrib/features/deno:1": {
- "version": "1.35.0"
+ "version": "1.36.4"
  }
  },
  "customizations": {

deno.json

@@ -10,18 +10,21 @@
  },
  "lock": false,
  "lint": {
- "files": {
- "exclude": [
- ".deno-cache"
- ]
- }
+ "exclude": [
+ ".deno-cache"
+ ]
  },
  "fmt": {
- "files": {
- "exclude": [
- ".deno-cache"
- ]
- },
+ "exclude": [
+ ".deno-cache",
+ "examples/**/.ultra",
+ "examples/**/importMap.dev.json",
+ "examples/**/deno.dev.json",
+ "examples/with-netlify-(WIP)/.netlify/*",
+ "examples/ultra-website/src/content/*",
+ "examples/with-mdx/src/content/*",
+ "test/fixture/output/*"
+ ],
  "options": {
  "indentWidth": 2,
  "useTabs": false,

examples/lite/app.tsx

@@ -24,4 +24,4 @@ export default function App() {
  );
 }
 
-typeof (document) !== "undefined" && hydrate(document, <App />);
+typeof document !== "undefined" && hydrate(document, <App />);

lib/ultra.ts

@@ -14,6 +14,7 @@ import { Context, Env, ImportMap, Mode } from "./types.ts";
 import { toUltraUrl } from "./utils/url.ts";
 
 type UltraServerRenderOptions = {
+ entrypoint?: string;
  generateStaticHTML?: boolean;
  enableEsModuleShims?: boolean;
  disableHydration?: boolean;
@@ -47,8 +48,6 @@ export class UltraServer<
  public entrypoint?: string;
  public ultraDir?: string;
 
- #bootstrapModules?: string[];
-
  constructor(
  public root: string,
  options: UltraServerOptions,
@@ -97,15 +96,10 @@ export class UltraServer<
  */
  if (this.importMap) {
  this.#importMapHandler(this.importMap);
- this.entrypoint = this.#prepareEntrypoint(this.importMap);
-
- if (this.entrypoint) {
- this.#bootstrapModules = [
- this.entrypoint.startsWith("file://")
- ? fromFileUrl(this.entrypoint)
- : this.entrypoint,
- ];
- }
+ this.entrypoint = this.#prepareEntrypoint(
+ this.importMap,
+ this.entrypoint,
+ );
  }
 
  // Validate
@@ -126,14 +120,30 @@ export class UltraServer<
  ) {
  log.debug("Rendering component");
 
+ let bootstrapModules: string[] = [];
+
+ if (options?.entrypoint) {
+ options.entrypoint = options?.entrypoint && this.importMap
+ ? this.#prepareEntrypoint(this.importMap, options.entrypoint)
+ : undefined;
+ }
+
+ const entrypoint = options?.entrypoint || this.entrypoint;
+
+ if (entrypoint) {
+ bootstrapModules = [
+ entrypoint.startsWith("file://") ? fromFileUrl(entrypoint) : entrypoint,
+ ];
+ }
+
  return renderToStream(Component, context, {
  mode: this.mode,
  baseUrl: this.baseUrl,
  assetManifest: this.assetManifest,
  importMap: this.importMap,
  enableEsModuleShims: this.enableEsModuleShims,
  esModuleShimsPath: this.esModuleShimsPath,
- bootstrapModules: this.#bootstrapModules,
+ bootstrapModules,
  ...options,
  });
  }
@@ -180,16 +190,16 @@ export class UltraServer<
  }
  }
 
- #prepareEntrypoint(importMap: ImportMap) {
- if (!this.entrypoint) {
+ #prepareEntrypoint(importMap: ImportMap, entrypoint?: string) {
+ if (!entrypoint) {
  log.debug("No entrypoint provided, hydration disabled.");
- return this.entrypoint;
+ return entrypoint;
  }
 
- log.debug(sprintf("Resolving entrypoint: %s", this.entrypoint));
+ log.debug(sprintf("Resolving entrypoint: %s", entrypoint));
 
  let entrypointSpecifier = `./${
- relative(this.root, fromFileUrl(this.entrypoint))
+ relative(this.root, fromFileUrl(entrypoint))
  }`;
 
  if (this.mode === "production") {
@@ -199,7 +209,7 @@ export class UltraServer<
  }
  }
  } else {
- entrypointSpecifier = toUltraUrl(this.root, this.entrypoint, this.mode)!;
+ entrypointSpecifier = toUltraUrl(this.root, entrypoint, this.mode)!;
  }
 
  log.debug(sprintf("Resolved entrypoint: %s", entrypointSpecifier));

test/fixture/client.foo.tsx

@@ -0,0 +1,6 @@
+import hydrate from "ultra/hydrate.js";
+
+hydrate(
+ document,
+ <div>Something else!</div>,
+);

test/fixture/server.test.ts

@@ -37,6 +37,19 @@ Deno.test(
  assertEquals(content.includes("<strong>Ultra</strong>"), true);
  });
 
+ await t.step("it can override the entrypoint", async () => {
+ const response = await server.request("http://localhost/foo");
+ const content = await response.text();
+
+ assertEquals(response.status, 200);
+ assertEquals(
+ response.headers.get("content-type"),
+ "text/html; charset=utf-8",
+ );
+
+ assertEquals(content.includes("client.foo.tsx"), true);
+ });
+
  await t.step("it can serve static assets from '/public'", async () => {
  const response = await server.request("https://localhost/style.css");
  response.body?.cancel();

test/fixture/server.tsx

@@ -40,6 +40,12 @@ server.get("*", async (context) => {
  // clear query cache
  queryClient.clear();
 
+ const requestUrl = new URL(context.req.url);
+
+ const entrypoint = requestUrl.pathname === "/foo"
+ ? import.meta.resolve("./client.foo.tsx")
+ : import.meta.resolve("./client.tsx");
+
  /**
  * Render the request
  */
@@ -49,6 +55,9 @@ server.get("*", async (context) => {
  <App />
  </TWProvider>
  </TRPCServerProvider>,
+ {
+ entrypoint,
+ },
  );
 
  return context.body(result, 200, {