@typed/ui 1.0.0-beta.0 → 1.0.0-beta.10

package/src/Link.test.ts

@@ -1,85 +0,0 @@
-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;
-}

package/src/Link.ts

@@ -1,107 +0,0 @@
-import * as Effect from "effect/Effect";
-import type { Scope } from "effect/Scope";
-import type { Stream } from "effect/Stream";
-import { type Fx, gen } from "@typed/fx/Fx";
-import { RefSubject } from "@typed/fx/RefSubject";
-import { getUrl, type NavigationError, Navigation } from "@typed/navigation";
-import {
-  EventHandler,
-  type Renderable,
-  type RenderEvent,
-  type RenderTemplate,
-  html,
-} from "@typed/template";
-
-type EventHandlerProperty = `on${string}`;
-
-type AnchorEventHandlers = {
-  readonly [K in keyof HTMLAnchorElement as K extends EventHandlerProperty ? K : never]?:
-    | Effect.Effect<unknown, any, any>
-    | EventHandler.EventHandler<Event, any, any>;
-};
-
-type AnchorRef = {
-  readonly ref?: (
-    element: HTMLAnchorElement,
-  ) => void | Effect.Effect<unknown, any, any> | Stream<unknown, any, any> | Fx<unknown, any, any>;
-};
-
-type IfEquals<X, Y, Output> =
-  (<T>() => T extends X ? 1 : 2) extends <T>() => T extends Y ? 1 : 2 ? Output : never;
-
-type WritableKeys<T> = {
-  [P in keyof T]-?: IfEquals<{ [Q in P]: T[P] }, { -readonly [Q in P]: T[P] }, P>;
-}[keyof T];
-
-type AnchorProperties = {
-  readonly [K in WritableKeys<HTMLAnchorElement> as K extends EventHandlerProperty | "ref"
-    ? never
-    : K]?: Renderable<HTMLAnchorElement[K], any, any>;
-};
-
-export interface LinkOptions extends AnchorEventHandlers, AnchorRef, AnchorProperties {
-  readonly href: Renderable<string, any, any>;
-  readonly content: Renderable<
-    string | number | boolean | null | undefined | void | RenderEvent,
-    any,
-    any
-  >;
-  readonly replace?: boolean; // false
-}
-
-function makeLinkClickHandler(
-  replace$: RefSubject.RefSubject<boolean>,
-): EventHandler.EventHandler<
-  MouseEvent & { readonly currentTarget: HTMLAnchorElement },
-  NavigationError,
-  Navigation
-> {
-  return EventHandler.make((ev: MouseEvent & { readonly currentTarget: HTMLAnchorElement }) =>
-    Effect.gen(function* () {
-      const href = ev.currentTarget.href;
-      if (ev.ctrlKey || ev.metaKey || ev.shiftKey) return;
-      const t = ev.currentTarget.target;
-      if (t && t !== "_self") return;
-      const nav = yield* Navigation;
-      const target = getUrl(nav.origin, href);
-      if (target.origin !== nav.origin) return;
-      ev.preventDefault();
-      const replace = yield* replace$;
-      yield* nav.navigate(href, { history: replace ? "replace" : "push" });
-    }),
-  );
-}
-
-/**
- * Renders an `<a href="...">` that intercepts same-origin, same-document clicks
- * and navigates via `Navigation.navigate` instead of full page load. Requires
- * `Navigation` and `RenderTemplate` in the Effect context (e.g. `BrowserRouter`).
- */
-export function Link<const Opts extends LinkOptions>(
-  options: Opts,
-): Fx<
-  RenderEvent,
-  Renderable.ErrorFromObject<Opts>,
-  Renderable.ServicesFromObject<Opts> | Scope | RenderTemplate
-> {
-  return gen(function* () {
-    const { replace = false, onclick, content: children, ...rest } = options;
-    const replace$ = yield* RefSubject.make(replace);
-    const navigationHandler = makeLinkClickHandler(replace$);
-    const userHandler = onclick ? EventHandler.fromEffectOrEventHandler(onclick) : undefined;
-    const clickHandler = userHandler
-      ? EventHandler.make(
-          Effect.fn(function* (ev: MouseEvent & { readonly currentTarget: HTMLAnchorElement }) {
-            yield* userHandler.handler(ev);
-            if (ev.defaultPrevented) return;
-            yield* navigationHandler.handler(ev);
-          }),
-          { ...userHandler.options, preventDefault: true },
-        )
-      : navigationHandler;
-
-    const props: Record<string, unknown> = { ...rest, onclick: clickHandler };
-
-    return html`<a ...${props}>${children}</a>`;
-  });
-}

package/src/index.ts

@@ -1,2 +0,0 @@
-export * from "./HttpRouter.js";
-export * from "./Link.js";

package/tsconfig.json

@@ -1,6 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "compilerOptions": { "rootDir": "src", "outDir": "dist" },
-  "include": ["src"],
-  "exclude": ["**/*.test.ts"]
-}