@tailorkit/react 0.1.0-beta.3 → 0.1.0-beta.33

package/src/__tests__/tailor-kit.test.tsx

@@ -1,424 +0,0 @@
-import { act, cleanup, render, screen as testingScreen, waitFor } from "@testing-library/react";
-import { createElement } from "react";
-import type { ReactNode } from "react";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { createTailorKitServer } from "@tailorkit/core/server";
-import type { IframeUiHost } from "@tailorkit/sandbox/host";
-import type { HostToWorkerPayload, RemoteNode } from "@tailorkit/sandbox/protocol";
-import { createTailorKitClient } from "../tailor-kit";
-import type { TailorKitApp } from "../tailor-kit";
-
-const hostRecords: { appUrl: string; props: Record<string, unknown> | undefined }[] = [];
-
-vi.mock("@tailorkit/sandbox/host", () => ({
-  createIframeUiHost: (
-    appUrl: string | URL,
-    options: { props?: Record<string, unknown> } = {},
-  ): IframeUiHost => {
-    hostRecords.push({ appUrl: appUrl.toString(), props: options.props });
-
-    const tree: RemoteNode = {
-      children: [{ id: `text-${hostRecords.length}`, kind: "text", text: appUrl.toString() }],
-      id: `root-${hostRecords.length}`,
-      kind: "element",
-      props: {},
-      type: appUrl.toString().includes("missing-component") ? "MissingComponent" : "Button",
-    };
-    let listener: (() => void) | null = null;
-
-    return {
-      destroy: () => {},
-      dispatch: (_payload: HostToWorkerPayload) => {},
-      getSnapshot: () => tree,
-      iframe: document.createElement("iframe"),
-      mount: () => {
-        listener?.();
-      },
-      subscribe: (nextListener: () => void) => {
-        listener = nextListener;
-        return () => {
-          listener = null;
-        };
-      },
-    } as unknown as IframeUiHost;
-  },
-}));
-
-const emptySchema = {
-  "~standard": {
-    jsonSchema: {
-      input: () => ({}),
-      output: () => ({}),
-    },
-    validate: (value: unknown) => ({ value }),
-    vendor: "test",
-    version: 1,
-  },
-} as const;
-
-const server = createTailorKitServer({
-  components: {
-    Button: {},
-  },
-  screens: {
-    "/": { context: emptySchema },
-    "/home": { context: emptySchema },
-    "/home/detail": { context: emptySchema },
-    "/user": { context: emptySchema },
-  },
-});
-
-const components = {
-  Button: ({ slots }: { slots: { default?: ReactNode } }) =>
-    createElement("button", null, slots.default),
-};
-
-const schema = server.$internal.schema;
-
-function CurrentScreenRoute({
-  nested,
-  tailor,
-}: {
-  nested: boolean;
-  tailor: ReturnType<typeof createTailorKitClient<typeof server>>;
-}) {
-  tailor.useCurrentScreen(
-    nested
-      ? {
-          context: { detail: "profile", page: "home" },
-          screen: "/home/detail",
-        }
-      : {
-          context: { page: "home" },
-          screen: "/home",
-        },
-  );
-
-  return <tailor.AppView app={{ clientPath: "/apps/todo.js", id: "todo" }} />;
-}
-
-function CurrentScreenHost({
-  nested,
-  tailor,
-}: {
-  nested: boolean;
-  tailor: ReturnType<typeof createTailorKitClient<typeof server>>;
-}) {
-  return (
-    <tailor.Root apps={[{ clientPath: "/apps/todo.js", id: "todo" }]}>
-      <CurrentScreenRoute nested={nested} tailor={tailor} />
-    </tailor.Root>
-  );
-}
-
-function HomeAppView({
-  app,
-  tailor,
-}: {
-  app: TailorKitApp;
-  tailor: ReturnType<typeof createTailorKitClient<typeof server>>;
-}) {
-  tailor.useCurrentScreen({ context: { page: "home" }, screen: "/home" });
-  return <tailor.AppView app={app} />;
-}
-
-describe("tailorKitClient React adapter", () => {
-  beforeEach(() => {
-    hostRecords.length = 0;
-    vi.restoreAllMocks();
-    vi.spyOn(globalThis, "fetch").mockResolvedValue(
-      Response.json({
-        assetsBaseUrl: "http://assets.test/",
-        schema: schema.serialize(),
-      }),
-    );
-  });
-
-  afterEach(() => {
-    cleanup();
-  });
-
-  it("fetches and caches apps", async () => {
-    vi.spyOn(globalThis, "fetch").mockResolvedValue(Response.json([{ id: "todo", name: "Todo" }]));
-    const tailor = createTailorKitClient<typeof server>({
-      baseUrl: "http://runtime.test/api/tailorkit",
-      components,
-    });
-
-    function AppList() {
-      const { data, status } = tailor.useApps();
-      return createElement("p", null, `${status}:${(data ?? []).map((app) => app.id).join(",")}`);
-    }
-
-    render(createElement("div", null, createElement(AppList), createElement(AppList)));
-
-    await waitFor(() => {
-      expect(testingScreen.getAllByText("ready:todo")).toHaveLength(2);
-    });
-    expect(globalThis.fetch).toHaveBeenCalledTimes(1);
-    expect(globalThis.fetch).toHaveBeenCalledWith(
-      new URL("apps", "http://runtime.test/api/tailorkit/"),
-    );
-    expect(tailor.getApps()).toEqual([{ id: "todo", name: "Todo" }]);
-    expect(tailor.getApp("todo")).toEqual({ id: "todo", name: "Todo" });
-  });
-
-  it("derives the hierarchy from the current screen and reuses its extended context", async () => {
-    const tailor = createTailorKitClient<typeof server>({
-      baseUrl: "http://runtime.test",
-      components,
-    });
-
-    const view = render(<CurrentScreenHost nested tailor={tailor} />);
-
-    await waitFor(() => {
-      expect(hostRecords.at(-1)?.props).toMatchObject({
-        screen: {
-          context: { detail: "profile", page: "home" },
-          path: "/home/detail",
-          status: "ready",
-        },
-      });
-    });
-
-    await act(() => {
-      view.rerender(<CurrentScreenHost nested={false} tailor={tailor} />);
-    });
-
-    await waitFor(() => {
-      expect(hostRecords.at(-1)?.props).toMatchObject({
-        screen: {
-          context: { page: "home" },
-          path: "/home",
-          status: "ready",
-        },
-      });
-    });
-  });
-
-  it("publishes loading and error states without stale context", async () => {
-    const tailor = createTailorKitClient<typeof server>({
-      baseUrl: "http://runtime.test",
-      components,
-    });
-
-    function Route({ status }: { status: "error" | "loading" }) {
-      tailor.useCurrentScreen({ screen: "/home/detail", status });
-      return <tailor.AppView app={{ clientPath: "/apps/todo.js", id: "todo" }} />;
-    }
-
-    const view = render(
-      <tailor.Root apps={[{ clientPath: "/apps/todo.js", id: "todo" }]}>
-        <Route status="loading" />
-      </tailor.Root>,
-    );
-
-    await waitFor(() => {
-      expect(hostRecords.at(-1)?.props).toEqual({
-        screen: { context: undefined, path: "/home/detail", status: "loading" },
-      });
-    });
-
-    view.rerender(
-      <tailor.Root apps={[{ clientPath: "/apps/todo.js", id: "todo" }]}>
-        <Route status="error" />
-      </tailor.Root>,
-    );
-
-    await waitFor(() => {
-      expect(hostRecords.at(-1)?.props).toEqual({
-        screen: { context: undefined, path: "/home/detail", status: "error" },
-      });
-    });
-  });
-
-  it("renders the current match for multiple direct app props", async () => {
-    hostRecords.length = 0;
-    const tailor = createTailorKitClient<typeof server>({
-      baseUrl: "http://runtime.test",
-      components,
-    });
-
-    function Route() {
-      tailor.useCurrentScreen({ context: { page: "home" }, screen: "/home" });
-      return (
-        <>
-          <tailor.AppView app={{ clientPath: "/apps/b.js", id: "b" }} />
-          <tailor.AppView
-            app={{
-              currentDeployment: { id: "deployment_1" },
-              id: "a",
-              projectId: "project_1",
-            }}
-          />
-        </>
-      );
-    }
-
-    render(
-      <tailor.Root
-        apps={[
-          { clientPath: "/apps/b.js", id: "b" },
-          {
-            currentDeployment: { id: "deployment_1" },
-            id: "a",
-            projectId: "project_1",
-          },
-        ]}
-      >
-        <Route />
-      </tailor.Root>,
-    );
-
-    await waitFor(() => {
-      expect(hostRecords).toHaveLength(2);
-    });
-    expect(hostRecords.map((record) => record.appUrl)).toEqual([
-      "http://runtime.test/apps/b.js",
-      "http://assets.test/projects/project_1/apps/a/deployments/deployment_1/files/client.js",
-    ]);
-    expect(hostRecords.map((record) => record.props?.screen)).toEqual([
-      { context: { page: "home" }, path: "/home", status: "ready" },
-      { context: { page: "home" }, path: "/home", status: "ready" },
-    ]);
-  });
-
-  it("renders an explicit screen override without a registered current screen", async () => {
-    const tailor = createTailorKitClient<typeof server>({
-      baseUrl: "http://runtime.test",
-      components,
-    });
-
-    render(
-      <tailor.AppView
-        app={{ clientPath: "/apps/todo.js", id: "todo" }}
-        context={{ userId: "user_1" }}
-        screen="/user"
-      />,
-    );
-
-    await waitFor(() => {
-      expect(hostRecords.at(-1)?.props).toMatchObject({
-        screen: {
-          context: { userId: "user_1" },
-          path: "/user",
-          status: "ready",
-        },
-      });
-    });
-  });
-
-  it("warns when multiple hooks register screens at the same hierarchy depth", async () => {
-    const consoleWarn = vi.spyOn(console, "warn").mockImplementation(() => {});
-    const tailor = createTailorKitClient<typeof server>({
-      baseUrl: "http://runtime.test",
-      components,
-    });
-
-    function HomeRoute() {
-      tailor.useCurrentScreen({ context: { page: "home" }, screen: "/home" });
-      return null;
-    }
-
-    function UserRoute() {
-      tailor.useCurrentScreen({ context: { userId: "user_1" }, screen: "/user" });
-      return <tailor.AppView app={{ clientPath: "/apps/todo.js", id: "todo" }} />;
-    }
-
-    render(
-      <tailor.Root apps={[{ clientPath: "/apps/todo.js", id: "todo" }]}>
-        <HomeRoute />
-        <UserRoute />
-      </tailor.Root>,
-    );
-
-    await waitFor(() => {
-      expect(consoleWarn).toHaveBeenCalledWith(expect.stringContaining('"/home", "/user"'));
-    });
-  });
-
-  it("passes primitive theme tokens into mounted screens", async () => {
-    const tailor = createTailorKitClient<typeof server>({
-      baseUrl: "http://runtime.test",
-      components,
-      theme: {
-        tokens: {
-          background: {
-            surface: "var(--card)",
-          },
-        },
-      },
-    });
-
-    render(
-      <tailor.Root apps={[{ clientPath: "/apps/todo.js", id: "todo" }]}>
-        <HomeAppView app={{ clientPath: "/apps/todo.js", id: "todo" }} tailor={tailor} />
-      </tailor.Root>,
-    );
-
-    await waitFor(() => {
-      expect(hostRecords).toHaveLength(1);
-    });
-    expect(document.querySelector("[data-tailorkit-theme-style]")?.textContent).toContain(
-      "--tailorkit-background-surface: var(--card);",
-    );
-  });
-
-  it("renders missing component errors inside the app container", async () => {
-    const consoleError = vi.spyOn(console, "error").mockImplementation(() => {});
-    const tailor = createTailorKitClient<typeof server>({
-      baseUrl: "http://runtime.test",
-    });
-
-    render(
-      <tailor.Root apps={[{ clientPath: "/apps/todo.js", id: "todo" }]}>
-        <HomeAppView app={{ clientPath: "/apps/todo.js", id: "todo" }} tailor={tailor} />
-      </tailor.Root>,
-    );
-
-    await waitFor(() => {
-      expect(
-        testingScreen.getByText('TailorKit component "Button" is not registered.'),
-      ).toBeTruthy();
-    });
-    expect(consoleError).toHaveBeenCalled();
-  });
-
-  it("clears a missing component error when switching apps", async () => {
-    vi.spyOn(console, "error").mockImplementation(() => {});
-    const tailor = createTailorKitClient<typeof server>({
-      baseUrl: "http://runtime.test",
-      components,
-    });
-
-    const view = render(
-      <tailor.Root apps={[{ clientPath: "/apps/missing-component.js", id: "bad" }]}>
-        <HomeAppView
-          app={{ clientPath: "/apps/missing-component.js", id: "bad" }}
-          tailor={tailor}
-        />
-      </tailor.Root>,
-    );
-
-    await waitFor(() => {
-      expect(
-        testingScreen.getByText('TailorKit component "MissingComponent" is not registered.'),
-      ).toBeTruthy();
-    });
-
-    await act(() => {
-      view.rerender(
-        <tailor.Root apps={[{ clientPath: "/apps/email.js", id: "email" }]}>
-          <HomeAppView app={{ clientPath: "/apps/email.js", id: "email" }} tailor={tailor} />
-        </tailor.Root>,
-      );
-    });
-
-    await waitFor(() => {
-      expect(
-        testingScreen.queryByText('TailorKit component "MissingComponent" is not registered.'),
-      ).toBeNull();
-      expect(testingScreen.getByRole("button").textContent).toContain("/apps/email.js");
-    });
-  });
-});

package/src/__tests__/tailor-kit.types.tsx

@@ -1,151 +0,0 @@
-import { createTailorKitServer } from "@tailorkit/core/server";
-import type { StandardJSONSchemaV1, StandardSchemaV1 } from "@standard-schema/spec";
-import type { ReactNode } from "react";
-import { components, createTailorKitClient } from "../tailor-kit";
-
-const typedSchema = <TValue,>(): StandardSchemaV1<unknown, TValue> &
-  StandardJSONSchemaV1<unknown, TValue> =>
-  ({
-    "~standard": {
-      jsonSchema: {
-        input: () => ({}),
-        output: () => ({}),
-      },
-      validate: (value: unknown) => ({ value: value as TValue }),
-      vendor: "test",
-      version: 1,
-    },
-  }) as const satisfies StandardSchemaV1<unknown, TValue> & StandardJSONSchemaV1<unknown, TValue>;
-
-const server = createTailorKitServer({
-  components: {
-    Button: {},
-  },
-  screens: {
-    "/": { context: typedSchema<{ user: { id: string } }>() },
-    "/home": { context: typedSchema<{ page: { title: string }; user: { id: string } }>() },
-    "/home/detail": {
-      context: typedSchema<{
-        detail: { id: string };
-        page: { title: string };
-        user: { id: string };
-      }>(),
-    },
-    "/user": { context: typedSchema<{ user: { id: string }; userId: string }>() },
-  },
-});
-
-const tailor = createTailorKitClient<typeof server>({ baseUrl: "http://runtime.test" });
-const app = { clientPath: "/apps/todo.js", id: "todo" };
-
-const slotsServer = createTailorKitServer({
-  components: {
-    Button: {
-      slots: ["default"] as const,
-    },
-  },
-});
-
-const slotsSchema = slotsServer.$internal.schema;
-
-createTailorKitClient<typeof slotsServer>({
-  baseUrl: "http://runtime.test",
-  components: {
-    Button: ({ slots }) => {
-      const slot: ReactNode = slots.default;
-      return slot;
-    },
-  },
-});
-
-const requiredComponentsServer = createTailorKitServer({
-  components: {
-    Button: {},
-    Input: {},
-  },
-});
-
-createTailorKitClient<typeof requiredComponentsServer>({
-  baseUrl: "http://runtime.test",
-  // @ts-expect-error all server components must have client renderers when components are provided
-  components: {
-    Button: () => null,
-  },
-});
-
-components(slotsSchema, {
-  Button: ({ props, slots }) => {
-    const typedProps = props satisfies Record<string, never>;
-    const typedSlot: ReactNode = slots.default;
-    void typedProps;
-    void typedSlot;
-    return null;
-  },
-});
-
-const callbackServer = createTailorKitServer({
-  components: {
-    Button: {
-      fields: typedSchema<{ variant?: "default" | "secondary" }>(),
-      callbacks: {
-        onClick: {},
-      },
-      slots: ["default"] as const,
-    },
-  },
-});
-
-components(callbackServer.$internal.schema, {
-  Button: ({ props }) => {
-    const variant: "default" | "secondary" | undefined = props.variant;
-    const onClick: (() => void) | undefined = props.onClick;
-    void variant;
-    void onClick;
-    return null;
-  },
-});
-
-tailor.useCurrentScreen({
-  screen: "/home",
-  context: { page: { title: "Home" }, user: { id: "user_1" } },
-});
-
-tailor.useCurrentScreen({ screen: "/user", status: "loading" });
-
-tailor.useCurrentScreen({ screen: "/user", status: "error" });
-
-// @ts-expect-error invalid screen name
-tailor.useCurrentScreen({ screen: "missing", context: {} });
-
-// @ts-expect-error invalid context shape for selected screen
-tailor.useCurrentScreen({ screen: "/user", context: { page: { title: "Home" } } });
-
-// @ts-expect-error ready matches require context
-tailor.useCurrentScreen({ screen: "/home" });
-
-// @ts-expect-error loading screens cannot expose partial context
-tailor.useCurrentScreen({ screen: "/user", status: "loading", context: { userId: "user_1" } });
-
-<tailor.AppView app={app} />;
-
-<tailor.AppView
-  app={app}
-  screen="/home"
-  context={{ page: { title: "Home" }, user: { id: "user_1" } }}
-/>;
-
-<tailor.AppView app={app} screen="/user" status="loading" />;
-
-<tailor.AppView app={app} screen="/user" status="error" />;
-
-// @ts-expect-error invalid screen name
-<tailor.AppView app={app} screen="missing" context={{}} />;
-
-// @ts-expect-error invalid context shape for selected screen
-<tailor.AppView app={app} screen="/user" context={{ page: { title: "Home" } }} />;
-
-// @ts-expect-error ready app views require context when screen is provided
-<tailor.AppView app={app} screen="/home" />;
-
-// @ts-expect-error loading app views cannot expose context
-<tailor.AppView app={app} screen="/user" status="loading" context={{ userId: "user_1" }} />;

package/src/components/context.ts

@@ -1,21 +0,0 @@
-import { createContext, useContext } from "react";
-import type { UseAppsResult } from "../hooks/use-apps";
-import type { TailorKitApp } from "../tailor-kit";
-
-export interface TailorRootContextValue {
-  apps: TailorKitApp[];
-}
-
-export interface RootTailor {
-  useApps: () => UseAppsResult;
-}
-
-export const TailorRootContext = createContext<TailorRootContextValue | null>(null);
-
-export function useTailorRootContext(component: string): TailorRootContextValue {
-  const context = useContext(TailorRootContext);
-  if (!context) {
-    throw new Error(`${component} must be rendered inside tailor.Root.`);
-  }
-  return context;
-}

package/src/components/index.ts

@@ -1 +0,0 @@
-export { Root } from "./root";