@typed/ui 0.13.0 → 1.0.0-beta.0

package/src/HttpRouter.test.ts

@@ -0,0 +1,294 @@
+import { NodeHttpServer } from "@effect/platform-node";
+import assert from "node:assert";
+import { describe, it } from "vitest";
+import { Effect, Layer } from "effect";
+import { Fx } from "@typed/fx";
+import { Navigation } from "@typed/navigation";
+import { CurrentRoute } from "@typed/router/CurrentRoute";
+import * as Matcher from "@typed/router/Matcher";
+import * as Route from "@typed/router/Route";
+import { html, StaticHtmlRenderTemplate } from "@typed/template";
+import { handleHttpServerError, ssrForHttp } from "./HttpRouter.js";
+import { HttpClient, HttpRouter } from "effect/unstable/http";
+
+describe("typed/ui/HttpRouter", () => {
+  it("renders simple html template", () => {
+    const matcher = Matcher.empty.match(
+      Route.Parse("home"),
+      html`
+        <div>Hello, world!</div>
+      `,
+    );
+    const Live = HttpRouter.use(ssrForHttp(matcher)).pipe(
+      Layer.provide(StaticHtmlRenderTemplate),
+      HttpRouter.serve,
+      Layer.provideMerge([NodeHttpServer.layerTest]),
+    );
+    return Effect.gen(function* () {
+      const response = yield* HttpClient.get("/home").pipe(Effect.flatMap((r) => r.text));
+      assert.strictEqual(response, "<div>Hello, world!</div>");
+    }).pipe(Effect.provide(Live), Effect.scoped, Effect.runPromise);
+  });
+
+  it("renders html template with route params", () => {
+    const users = Route.Join(Route.Parse("users"), Route.Param("id"));
+    const matcher = Matcher.empty.match(
+      users,
+      (params) => html`<div>User ${params.pipe(Fx.map((p) => p.id))}</div>`,
+    );
+    const Live = HttpRouter.use(ssrForHttp(matcher)).pipe(
+      Layer.provide(StaticHtmlRenderTemplate),
+      HttpRouter.serve,
+      Layer.provideMerge(NodeHttpServer.layerTest),
+    );
+    return Effect.gen(function* () {
+      const response = yield* HttpClient.get("/users/123").pipe(Effect.flatMap((r) => r.text));
+      assert.strictEqual(response, "<div>User 123</div>");
+    }).pipe(Effect.provide(Live), Effect.scoped, Effect.runPromise);
+  });
+
+  it("renders html template with search params", () => {
+    const route = Route.Parse("search");
+    const matcher = Matcher.empty.match(
+      route,
+      html`
+        <div>Search results</div>
+      `,
+    );
+    const Live = HttpRouter.use(ssrForHttp(matcher)).pipe(
+      Layer.provide(StaticHtmlRenderTemplate),
+      HttpRouter.serve,
+      Layer.provideMerge(NodeHttpServer.layerTest),
+    );
+    return Effect.gen(function* () {
+      const response = yield* HttpClient.get("/search?q=test").pipe(Effect.flatMap((r) => r.text));
+      assert.strictEqual(response, "<div>Search results</div>");
+    }).pipe(Effect.provide(Live), Effect.scoped, Effect.runPromise);
+  });
+
+  it("handles multiple routes", () => {
+    const home = Route.Parse("home");
+    const about = Route.Parse("about");
+    const matcher = Matcher.empty
+      .match(
+        home,
+        html`
+          <div>Home</div>
+        `,
+      )
+      .match(
+        about,
+        html`
+          <div>About</div>
+        `,
+      );
+    const Live = HttpRouter.use(ssrForHttp(matcher)).pipe(
+      Layer.provide(StaticHtmlRenderTemplate),
+      HttpRouter.serve,
+      Layer.provideMerge(NodeHttpServer.layerTest),
+    );
+    return Effect.gen(function* () {
+      const homeResponse = yield* HttpClient.get("/home").pipe(Effect.flatMap((r) => r.text));
+      assert.strictEqual(homeResponse, "<div>Home</div>");
+      const aboutResponse = yield* HttpClient.get("/about").pipe(Effect.flatMap((r) => r.text));
+      assert.strictEqual(aboutResponse, "<div>About</div>");
+    }).pipe(Effect.provide(Live), Effect.scoped, Effect.runPromise);
+  });
+
+  it("returns 404 for unmatched routes", () => {
+    const matcher = Matcher.empty.match(
+      Route.Parse("home"),
+      html`
+        <div>Home</div>
+      `,
+    );
+    const Live = HttpRouter.use(
+      Effect.fn(function* (router) {
+        yield* ssrForHttp(router, matcher);
+        yield* handleHttpServerError(router);
+      }),
+    ).pipe(
+      Layer.provide(StaticHtmlRenderTemplate),
+      HttpRouter.serve,
+      Layer.provideMerge(NodeHttpServer.layerTest),
+    );
+    return Effect.gen(function* () {
+      const response = yield* HttpClient.get("/notfound");
+      assert.strictEqual(response.status, 404);
+    }).pipe(Effect.provide(Live), Effect.scoped, Effect.runPromise);
+  });
+
+  it("renders dynamic content from Effect", () => {
+    const matcher = Matcher.empty.match(
+      Route.Parse("dynamic"),
+      html`<div>Value: ${Effect.succeed("42")}</div>`,
+    );
+    const Live = HttpRouter.use(ssrForHttp(matcher)).pipe(
+      HttpRouter.serve,
+      Layer.provideMerge(NodeHttpServer.layerTest),
+      Layer.provide(StaticHtmlRenderTemplate),
+    );
+    return Effect.gen(function* () {
+      const response = yield* HttpClient.get("/dynamic").pipe(Effect.flatMap((r) => r.text));
+      assert.strictEqual(response, "<div>Value: 42</div>");
+    }).pipe(Effect.provide(Live), Effect.scoped, Effect.runPromise);
+  });
+
+  it("sets correct content-type header", () => {
+    const matcher = Matcher.empty.match(
+      Route.Parse("home"),
+      html`
+        <div>Hello</div>
+      `,
+    );
+    const Live = HttpRouter.use(ssrForHttp(matcher)).pipe(
+      Layer.provide(StaticHtmlRenderTemplate),
+      HttpRouter.serve,
+      Layer.provideMerge(NodeHttpServer.layerTest),
+    );
+    return Effect.gen(function* () {
+      const response = yield* HttpClient.get("/home");
+      const contentType = response.headers["content-type"];
+      assert.strictEqual(contentType, "text/html; charset=utf-8");
+    }).pipe(Effect.provide(Live), Effect.scoped, Effect.runPromise);
+  });
+
+  it("handles nested routes", () => {
+    const users = Route.Join(Route.Parse("api"), Route.Parse("users"));
+    const user = Route.Join(users, Route.Param("id"));
+    const matcher = Matcher.empty
+      .match(
+        users,
+        html`
+          <div>Users list</div>
+        `,
+      )
+      .match(user, (params) => html`<div>User ${params.pipe(Fx.map((p) => p.id))}</div>`);
+    const Live = HttpRouter.use(ssrForHttp(matcher)).pipe(
+      Layer.provide(StaticHtmlRenderTemplate),
+      HttpRouter.serve,
+      Layer.provideMerge(NodeHttpServer.layerTest),
+    );
+    return Effect.gen(function* () {
+      const listResponse = yield* HttpClient.get("/api/users").pipe(Effect.flatMap((r) => r.text));
+      assert.strictEqual(listResponse, "<div>Users list</div>");
+      const userResponse = yield* HttpClient.get("/api/users/456").pipe(
+        Effect.flatMap((r) => r.text),
+      );
+      assert.strictEqual(userResponse, "<div>User 456</div>");
+    }).pipe(Effect.provide(Live), Effect.scoped, Effect.runPromise);
+  });
+
+  it("provides Navigation with correct base and origin", () => {
+    const matcher = Matcher.empty.match(
+      Route.Parse("test"),
+      Fx.gen(function* () {
+        const origin = yield* Navigation.origin;
+        const base = yield* Navigation.base;
+        const currentEntry = yield* Navigation.currentEntry;
+        return html`<div data-origin="${origin}" data-base="${base}" data-url="${currentEntry.url.href}"></div>`;
+      }),
+    );
+    const Live = HttpRouter.use(ssrForHttp(matcher)).pipe(
+      Layer.provide(StaticHtmlRenderTemplate),
+      HttpRouter.serve,
+      Layer.provideMerge(NodeHttpServer.layerTest),
+    );
+    return Effect.gen(function* () {
+      const response = yield* HttpClient.get("/test").pipe(Effect.flatMap((r) => r.text));
+      assert.ok(response.includes('data-origin="http://localhost"'));
+      assert.ok(response.includes('data-base="/"'));
+      assert.ok(response.includes('data-url="http://localhost/test"'));
+    }).pipe(Effect.provide(Live), Effect.scoped, Effect.runPromise);
+  });
+
+  it("provides CurrentRoute with correct route path", () => {
+    const matcher = Matcher.empty.match(
+      Route.Parse("users"),
+      Fx.gen(function* () {
+        const currentRoute = yield* CurrentRoute;
+        return html`<div data-path="${currentRoute.route.path}"></div>`;
+      }),
+    );
+    const Live = HttpRouter.use(ssrForHttp(matcher)).pipe(
+      Layer.provide(StaticHtmlRenderTemplate),
+      HttpRouter.serve,
+      Layer.provideMerge(NodeHttpServer.layerTest),
+    );
+    return Effect.gen(function* () {
+      const response = yield* HttpClient.get("/users").pipe(Effect.flatMap((r) => r.text));
+      assert.ok(response.includes('data-path="/users"'));
+    }).pipe(Effect.provide(Live), Effect.scoped, Effect.runPromise);
+  });
+
+  it("provides CurrentRoute with no parent for root routes", () => {
+    const matcher = Matcher.empty.match(
+      Route.Parse("home"),
+      Fx.gen(function* () {
+        const currentRoute = yield* CurrentRoute;
+        const hasParent = currentRoute.parent !== undefined;
+        return html`<div data-has-parent="${hasParent}"></div>`;
+      }),
+    );
+    const Live = HttpRouter.use(ssrForHttp(matcher)).pipe(
+      Layer.provide(StaticHtmlRenderTemplate),
+      HttpRouter.serve,
+      Layer.provideMerge(NodeHttpServer.layerTest),
+    );
+    return Effect.gen(function* () {
+      const response = yield* HttpClient.get("/home").pipe(Effect.flatMap((r) => r.text));
+      assert.ok(response.includes('data-has-parent="false"'));
+    }).pipe(Effect.provide(Live), Effect.scoped, Effect.runPromise);
+  });
+
+  it("provides CurrentRoute with parent for nested routes", () => {
+    const api = Route.Parse("api");
+    const users = Route.Parse("users");
+    const matcher = Matcher.empty
+      .match(
+        Route.Slash,
+        html`
+          <div>API</div>
+        `,
+      )
+      .match(
+        users,
+        Fx.gen(function* () {
+          const currentRoute = yield* CurrentRoute;
+          const hasParent = currentRoute.parent !== undefined;
+          const parentPath = currentRoute.parent?.route.path ?? "none";
+          return html`<div data-has-parent="${hasParent}" data-parent-path="${parentPath}"></div>`;
+        }),
+      );
+    const Live = HttpRouter.use(ssrForHttp(matcher)).pipe(
+      Layer.provide(StaticHtmlRenderTemplate),
+      HttpRouter.serve,
+      Layer.provideMerge(NodeHttpServer.layerTest),
+      Layer.provide(CurrentRoute.extend(api)),
+    );
+    return Effect.gen(function* () {
+      const response = yield* HttpClient.get("/api/users").pipe(Effect.flatMap((r) => r.text));
+      assert.ok(response.includes('data-has-parent="true"'));
+      assert.ok(response.includes('data-parent-path="/api"'));
+    }).pipe(Effect.provide(Live), Effect.scoped, Effect.runPromise);
+  });
+
+  it("provides Navigation with correct currentEntry for different paths", () => {
+    const matcher = Matcher.empty.match(
+      Route.Parse("about"),
+      Fx.gen(function* () {
+        const currentEntry = yield* Navigation.currentEntry;
+        return html`<div data-pathname="${currentEntry.url.pathname}"></div>`;
+      }),
+    );
+    const Live = HttpRouter.use(ssrForHttp(matcher)).pipe(
+      Layer.provide(StaticHtmlRenderTemplate),
+      HttpRouter.serve,
+      Layer.provideMerge(NodeHttpServer.layerTest),
+    );
+    return Effect.gen(function* () {
+      const response = yield* HttpClient.get("/about").pipe(Effect.flatMap((r) => r.text));
+      assert.ok(response.includes('data-pathname="/about"'));
+    }).pipe(Effect.provide(Live), Effect.scoped, Effect.runPromise);
+  });
+});

package/src/HttpRouter.ts

@@ -0,0 +1,168 @@
+import * as Effect from "effect/Effect";
+import * as Exit from "effect/Exit";
+import { dual } from "effect/Function";
+import * as Layer from "effect/Layer";
+import * as Option from "effect/Option";
+import * as Scope from "effect/Scope";
+import * as ServiceMap from "effect/ServiceMap";
+import { type HttpRouter, type Route, RouteContext } from "effect/unstable/http/HttpRouter";
+import * as HttpServerError from "effect/unstable/http/HttpServerError";
+import * as HttpServerRequest from "effect/unstable/http/HttpServerRequest";
+import * as HttpServerResponse from "effect/unstable/http/HttpServerResponse";
+import { RefSubject } from "@typed/fx";
+import {
+  type CurrentRouteTree,
+  type CompiledEntry,
+  compile,
+  CurrentRoute,
+  makeCatchManager,
+  makeLayerManager,
+  makeLayoutManager,
+  type Matcher,
+  Join,
+  Parse,
+  type Router,
+} from "@typed/router";
+import { initialMemory } from "@typed/navigation";
+import { renderToHtmlString, type RenderEvent } from "@typed/template";
+
+type ProvidedForSsr = Scope.Scope | Router;
+
+export const ssrForHttp: {
+  <E, R>(
+    input: Matcher<RenderEvent, E, R>,
+  ): (router: HttpRouter) => Effect.Effect<void, never, Exclude<R, ProvidedForSsr>>;
+  <E, R>(
+    router: HttpRouter,
+    input: Matcher<RenderEvent, E, R>,
+  ): Effect.Effect<void, never, Exclude<R, ProvidedForSsr>>;
+} = dual(2, <E, R>(router: HttpRouter, input: Matcher<RenderEvent, E, R>) => {
+  return Effect.gen(function* () {
+    const matcher = Option.match(yield* Effect.serviceOption(CurrentRoute), {
+      onNone: () => input,
+      onSome: (parent: CurrentRouteTree) => input.prefix(parent.route),
+    });
+    const entries = compile(matcher.cases);
+    const currentServices = yield* Effect.services<R>();
+
+    yield* router.addAll(entries.map((e: CompiledEntry) => toRoute(e, currentServices)));
+  });
+});
+
+export function handleHttpServerError(router: HttpRouter) {
+  return router.addGlobalMiddleware(
+    Effect.catch((error: unknown) =>
+      HttpServerError.isHttpServerError(error)
+        ? Effect.succeed(HttpServerResponse.text(error.message, { status: getStatus(error) }))
+        : Effect.fail(error),
+    ),
+  );
+}
+
+function getStatus(error: HttpServerError.HttpServerError): number {
+  switch (error.reason._tag) {
+    case "RouteNotFound":
+      return 404;
+    case "RequestParseError":
+      return 400;
+    case "InternalError":
+    case "ResponseError":
+      return 500;
+  }
+}
+
+function toRoute(
+  entry: CompiledEntry,
+  currentServices: ServiceMap.ServiceMap<never>,
+): Route<any, any> {
+  return {
+    "~effect/http/HttpRouter/Route": "~effect/http/HttpRouter/Route",
+    method: "GET",
+    path: entry.route.path,
+    handler: Effect.gen(function* () {
+      const fiberId = yield* Effect.fiberId;
+      const rootScope = yield* Effect.scope;
+      const routeContext = yield* RouteContext;
+      const request = yield* HttpServerRequest.HttpServerRequest;
+      const searchParams = yield* HttpServerRequest.ParsedSearchParams;
+      const provided = Layer.mergeAll(
+        initialMemory({ url: request.url }),
+        Layer.succeed(
+          CurrentRoute,
+          yield* Effect.serviceOption(CurrentRoute).pipe(
+            Effect.map(
+              Option.match({
+                onNone: (): CurrentRouteTree => ({
+                  route: Parse(request.url),
+                  parent: undefined,
+                }),
+                onSome: (parent: CurrentRouteTree): CurrentRouteTree => ({
+                  route: Join(parent.route, Parse(request.url)),
+                  parent,
+                }),
+              }),
+            ),
+          ),
+        ),
+      );
+      const input = { ...routeContext.params, ...searchParams };
+
+      const params = yield* Effect.mapError(
+        entry.decode(input),
+        (cause) =>
+          new HttpServerError.HttpServerError({
+            reason: new HttpServerError.RequestParseError({ request, cause }),
+          }),
+      );
+
+      const memoMap = yield* Layer.makeMemoMap;
+      const layerManager = makeLayerManager(memoMap, rootScope, fiberId);
+      const layoutManager = makeLayoutManager(rootScope, fiberId);
+      const catchManager = makeCatchManager(rootScope, fiberId);
+      const prepared = yield* layerManager.prepare(entry.layers.concat(provided));
+
+      const guardExit = yield* entry
+        .guard(params)
+        .pipe(Effect.provideServices(prepared.services), Effect.exit);
+
+      if (Exit.isFailure(guardExit) || Option.isNone(guardExit.value)) {
+        yield* prepared.rollback;
+        return yield* new HttpServerError.HttpServerError({
+          reason: new HttpServerError.RouteNotFound({ request }),
+        });
+      }
+
+      const matchedParams = guardExit.value.value;
+      yield* prepared.commit;
+
+      const scope = yield* Scope.fork(rootScope);
+      const paramsRef = yield* RefSubject.make(matchedParams).pipe(Scope.provide(scope));
+
+      const preparedServices = prepared.services as ServiceMap.ServiceMap<any>;
+      const handlerServices = ServiceMap.merge(
+        ServiceMap.merge(currentServices, preparedServices),
+        ServiceMap.make(Scope.Scope, scope),
+      );
+
+      const handlerFx = entry.handler(paramsRef);
+
+      const withLayouts = yield* layoutManager.apply(
+        entry.layouts,
+        matchedParams,
+        handlerFx,
+        preparedServices,
+      );
+
+      const withCatches = yield* catchManager.apply(entry.catches, withLayouts, preparedServices);
+
+      const html = yield* renderToHtmlString(withCatches).pipe(
+        Effect.provideServices(handlerServices),
+      );
+      return HttpServerResponse.text(html, {
+        headers: { "content-type": "text/html; charset=utf-8" },
+      });
+    }),
+    uninterruptible: false,
+    prefix: undefined,
+  };
+}

package/src/Link.test.ts

@@ -0,0 +1,85 @@
+import assert from "node:assert";
+import { describe, it } from "vitest";
+import { Effect } from "effect";
+import * as Layer from "effect/Layer";
+import { Fx } from "@typed/fx";
+import { CurrentPath } from "@typed/navigation";
+import { ServerRouter } from "@typed/router/Router";
+import { DomRenderTemplate, render } from "@typed/template";
+import { Link } from "./Link.js";
+import { Window } from "happy-dom";
+
+describe("typed/ui/Link", () => {
+  it("renders <a> with href and content", () =>
+    Effect.gen(function* () {
+      const [window, layer] = createHappyDomLayer();
+
+      const [root] = yield* render(
+        Link({ href: "/about", content: "Go to about" }),
+        window.document.body,
+      ).pipe(Fx.provide(layer), Fx.take(1), Fx.collectAll);
+
+      assert(root instanceof window.HTMLElement);
+      const anchor = root as HTMLAnchorElement;
+      assert(anchor.tagName === "A");
+      assert(anchor.getAttribute("href") === "/about");
+      assert(anchor.textContent === "Go to about");
+    }).pipe(Effect.scoped, Effect.runPromise));
+
+  it("intercepts same-origin click and navigates", () => {
+    const [window, layer] = createHappyDomLayer({ url: "http://localhost/" });
+    return Effect.gen(function* () {
+      const [root] = yield* render(
+        Link({ href: "/about", content: "Go" }),
+        window.document.body,
+      ).pipe(Fx.take(1), Fx.collectAll);
+
+      assert(root instanceof window.HTMLElement);
+      const anchor = root as HTMLAnchorElement;
+      assert(anchor.tagName === "A");
+
+      const pathBefore = yield* CurrentPath;
+      anchor.click();
+      yield* Effect.sleep(50);
+      const pathAfter = yield* CurrentPath;
+
+      assert(pathBefore === "/" || pathBefore === "");
+      assert(pathAfter === "/about");
+    }).pipe(Effect.provide(layer), Effect.scoped, Effect.runPromise);
+  });
+
+  it("does not intercept when modifier key is pressed", () => {
+    const [window, layer] = createHappyDomLayer();
+    return Effect.gen(function* () {
+      const [root] = yield* render(
+        Link({ href: "/other", content: "Go" }),
+        window.document.body,
+      ).pipe(Fx.take(1), Fx.collectAll);
+
+      assert(root instanceof window.HTMLElement);
+      const anchor = root as HTMLAnchorElement;
+      assert(anchor.tagName === "A");
+
+      const ev = new window.MouseEvent("click", {
+        bubbles: true,
+        cancelable: true,
+        ctrlKey: true,
+      });
+      anchor.dispatchEvent(ev);
+      yield* Effect.sleep(50);
+      const pathAfter = yield* CurrentPath;
+
+      assert(pathAfter === "/" || pathAfter === "");
+    }).pipe(Effect.provide(layer), Effect.scoped, Effect.runPromise);
+  });
+});
+
+function createHappyDomLayer(...params: ConstructorParameters<typeof Window>) {
+  const window = new Window(...params) as unknown as globalThis.Window & typeof globalThis;
+  const domLayer = DomRenderTemplate.using(window.document);
+  const opts = params[0] as { url?: string } | undefined;
+  const url = opts?.url ?? "http://localhost/";
+  const routerLayer = ServerRouter({ url });
+  const layer = domLayer.pipe(Layer.merge(routerLayer));
+  return [window, layer] as const;
+}