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

package/src/components/render.tsx

@@ -1,116 +0,0 @@
-import { cloneElement, createElement, isValidElement, useMemo } from "react";
-import type {
-  CSSProperties,
-  ComponentPropsWithoutRef,
-  DOMAttributes,
-  ElementType,
-  HTMLAttributes,
-  ReactElement,
-  ReactNode,
-  Ref,
-} from "react";
-
-type ElementProps<TTagName extends ElementType> = ComponentPropsWithoutRef<TTagName> & {
-  ref?: Ref<unknown>;
-};
-
-export interface RenderProps {
-  render?: ReactElement<Record<string, unknown>>;
-}
-
-export type ComponentProps<TTagName extends ElementType> = ElementProps<TTagName> & RenderProps;
-
-export function useRender<TTagName extends ElementType>({
-  defaultTagName,
-  props,
-  render,
-}: {
-  defaultTagName: TTagName;
-  props: ElementProps<TTagName>;
-  render?: ReactElement<Record<string, unknown>>;
-}): ReactNode {
-  return useMemo(() => {
-    if (render) {
-      if (!isValidElement(render)) {
-        throw new Error("The render prop must be a valid React element.");
-      }
-
-      return cloneElement(render, mergeProps(render.props, props));
-    }
-
-    return createElement(defaultTagName, props);
-  }, [defaultTagName, props, render]);
-}
-
-export function mergeProps<TProps extends Record<string, unknown>>(
-  ...propSets: (TProps | Record<string, unknown> | undefined)[]
-): TProps {
-  const merged: Record<string, unknown> = {};
-
-  for (const props of propSets) {
-    if (!props) {
-      continue;
-    }
-
-    for (const [key, value] of Object.entries(props)) {
-      if (value === undefined) {
-        continue;
-      }
-
-      const existing = merged[key];
-
-      if (key === "className" && existing && value) {
-        merged[key] = `${existing as string} ${value as string}`;
-        continue;
-      }
-
-      if (key === "style" && existing && value) {
-        merged[key] = {
-          ...(existing as CSSProperties),
-          ...(value as CSSProperties),
-        };
-        continue;
-      }
-
-      if (key === "ref" && existing && value) {
-        merged[key] = composeRefs(existing as Ref<unknown>, value as Ref<unknown>);
-        continue;
-      }
-
-      if (isEventHandler(key) && typeof existing === "function" && typeof value === "function") {
-        merged[key] = (...args: unknown[]) => {
-          (existing as (...eventArgs: unknown[]) => void)(...args);
-          const event = args[0] as { defaultPrevented?: boolean } | undefined;
-          if (!event?.defaultPrevented) {
-            (value as (...eventArgs: unknown[]) => void)(...args);
-          }
-        };
-        continue;
-      }
-
-      merged[key] = value;
-    }
-  }
-
-  return merged as TProps;
-}
-
-export function composeRefs<T>(...refs: (Ref<T> | undefined)[]): Ref<T> {
-  return (node: T) => {
-    for (const ref of refs) {
-      if (typeof ref === "function") {
-        ref(node);
-      } else if (ref) {
-        (ref as { current: T | null }).current = node;
-      }
-    }
-  };
-}
-
-function isEventHandler(key: string): key is keyof DOMAttributes<HTMLElement> {
-  return /^on[A-Z]/u.test(key);
-}
-
-export type HtmlProps<TElement extends HTMLElement> = HTMLAttributes<TElement> & {
-  ref?: Ref<TElement>;
-};

package/src/components/root.tsx

@@ -1,37 +0,0 @@
-import { useMemo } from "react";
-import type { ReactNode } from "react";
-import type { TailorKitApp } from "../tailor-kit";
-import type { ComponentProps } from "./render";
-import { mergeProps, useRender } from "./render";
-import { TailorRootContext } from "./context";
-import type { RootTailor, TailorRootContextValue } from "./context";
-
-const EMPTY_APPS: TailorKitApp[] = [];
-
-export interface RootProps extends ComponentProps<"div"> {
-  apps?: TailorKitApp[];
-  children?: ReactNode;
-  tailor: RootTailor;
-}
-
-export function Root({ apps: appsProp, children, render, tailor, ...props }: RootProps): ReactNode {
-  const appsResult = tailor.useApps();
-  const apps = appsProp ?? appsResult.data ?? EMPTY_APPS;
-
-  const context = useMemo<TailorRootContextValue>(
-    () => ({
-      apps,
-    }),
-    [apps],
-  );
-
-  const element = render
-    ? useRender({
-        defaultTagName: "div",
-        props: mergeProps({ children }, props),
-        render,
-      })
-    : children;
-
-  return <TailorRootContext.Provider value={context}>{element}</TailorRootContext.Provider>;
-}

package/src/hooks/use-apps.ts

@@ -1,47 +0,0 @@
-import { useCallback, useEffect, useSyncExternalStore } from "react";
-import type { TailorKitApp, TailorKitAppsSnapshot, TailorKitStore } from "../tailor-kit";
-
-export interface UseAppsResult {
-  data: TailorKitApp[] | undefined;
-  error: Error | null;
-  isError: boolean;
-  isLoading: boolean;
-  isPending: boolean;
-  isSuccess: boolean;
-  refetch: () => Promise<void>;
-  status: "error" | "idle" | "loading" | "ready";
-}
-
-export function createUseApps(store: TailorKitStore): () => UseAppsResult {
-  return function useApps(): UseAppsResult {
-    const snapshot = useSyncExternalStore(
-      store.subscribe,
-      store.getAppsSnapshot,
-      store.getAppsSnapshot,
-    );
-
-    useEffect(() => {
-      void store.fetchApps();
-    }, []);
-
-    const refetch = useCallback(() => store.fetchApps({ force: true }), []);
-
-    return toUseAppsResult(snapshot, refetch);
-  };
-}
-
-function toUseAppsResult(
-  snapshot: TailorKitAppsSnapshot,
-  refetch: () => Promise<void>,
-): UseAppsResult {
-  return {
-    data: snapshot.status === "ready" ? snapshot.apps : undefined,
-    error: snapshot.error,
-    isError: snapshot.status === "error",
-    isLoading: snapshot.status === "loading",
-    isPending: snapshot.status === "idle" || snapshot.status === "loading",
-    isSuccess: snapshot.status === "ready",
-    refetch,
-    status: snapshot.status,
-  };
-}

package/src/hooks/use-current-screen.ts

@@ -1,81 +0,0 @@
-import { useEffect, useMemo, useRef } from "react";
-import type { StandardJSONSchemaV1 } from "@standard-schema/spec";
-import type { ScreenDefinition } from "@tailorkit/core/schema";
-import type { TailorKitStore } from "../tailor-kit";
-import { useTailorRootContext } from "../components/context";
-
-export type ScreenName<TScreens extends Record<string, ScreenDefinition>> = keyof TScreens & string;
-
-export type ScreenContext<TScreen> =
-  TScreen extends ScreenDefinition<infer TContext>
-    ? TContext extends StandardJSONSchemaV1
-      ? StandardJSONSchemaV1.InferOutput<TContext>
-      : Record<string, never>
-    : never;
-
-interface ReadyScreenOptions<
-  TScreens extends Record<string, ScreenDefinition>,
-  TScreen extends ScreenName<TScreens>,
-> {
-  context: ScreenContext<TScreens[TScreen]>;
-  screen: TScreen;
-  status?: "ready";
-}
-
-interface LoadingScreenOptions<TScreen extends string> {
-  context?: never;
-  screen: TScreen;
-  status: "loading";
-}
-
-interface ErrorScreenOptions<TScreen extends string> {
-  context?: never;
-  screen: TScreen;
-  status: "error";
-}
-
-export type CurrentScreenOptions<
-  TScreens extends Record<string, ScreenDefinition>,
-  TScreen extends ScreenName<TScreens> = ScreenName<TScreens>,
-> =
-  TScreen extends ScreenName<TScreens>
-    ?
-        | ReadyScreenOptions<TScreens, TScreen>
-        | LoadingScreenOptions<TScreen>
-        | ErrorScreenOptions<TScreen>
-    : never;
-
-export function createUseCurrentScreen<TScreens extends Record<string, ScreenDefinition>>(
-  store: TailorKitStore,
-) {
-  return function useCurrentScreen<TScreen extends ScreenName<TScreens>>(
-    options: CurrentScreenOptions<TScreens, TScreen>,
-  ): void {
-    useTailorRootContext("tailor.useCurrentScreen");
-    const id = useMemo(() => Symbol("tailorkit-current-screen"), []);
-    const status = options.status ?? "ready";
-    const context = "context" in options ? options.context : undefined;
-    const contextKey = JSON.stringify(context);
-    const contextRef = useRef({ key: contextKey, value: context });
-    if (contextRef.current.key !== contextKey) {
-      contextRef.current = { key: contextKey, value: context };
-    }
-    const contextSnapshot = contextRef.current.value;
-
-    useEffect(
-      () => () => {
-        store.unregisterScreen(id);
-      },
-      [id],
-    );
-
-    useEffect(() => {
-      store.registerScreen({
-        context: contextSnapshot,
-        id,
-        screen: options.screen,
-        status,
-      });
-    }, [contextSnapshot, id, options.screen, status]);
-  };
-}

package/src/index.ts

@@ -1,8 +0,0 @@
-export { components, createTailorKitClient } from "./tailor-kit";
-export type {
-  AppViewProps,
-  CurrentScreenOptions,
-  TailorKitApp,
-  TailorKitInstance,
-} from "./tailor-kit";
-export { primitives } from "./primitives";

package/src/node-store.ts

@@ -1,131 +0,0 @@
-import type { RemoteNode } from "@tailorkit/sandbox/protocol";
-
-type Listener = () => void;
-
-const childIds = (children: RemoteNode[]): string => children.map((c) => c.id).join(",");
-
-const nodeSignature = (node: RemoteNode): string => {
-  if (node.kind === "text") {
-    return `text:${node.text}`;
-  }
-  if (node.kind === "fragment") {
-    return `frag:${childIds(node.children)}`;
-  }
-  // For elements: type + child IDs + serialized props + callback bindings
-  const propsStr = JSON.stringify(node.props);
-  const callbacksStr = (node.callbacks ?? [])
-    .map((binding) => `${binding.callback}:${binding.event}`)
-    .join(",");
-  return `elem:${node.type}|${childIds(node.children)}|${propsStr}|${callbacksStr}`;
-};
-
-const flattenTree = (node: RemoteNode, out: Map<string, RemoteNode>): void => {
-  out.set(node.id, node);
-  if (node.kind === "text") {
-    return;
-  }
-  for (const child of node.children) {
-    flattenTree(child, out);
-  }
-};
-
-export class NodeStore {
-  private nodes = new Map<string, RemoteNode>();
-  private signatures = new Map<string, string>();
-  private nodeListeners = new Map<string, Set<Listener>>();
-  private rootListeners = new Set<Listener>();
-  private rootId: string | null = null;
-
-  clear(): void {
-    const nodeIds = [...this.nodeListeners.keys()];
-    const hadRoot = this.rootId !== null;
-
-    this.nodes = new Map();
-    this.signatures = new Map();
-    this.rootId = null;
-
-    for (const id of nodeIds) {
-      const subs = this.nodeListeners.get(id);
-      if (subs) {
-        for (const l of subs) {
-          l();
-        }
-      }
-    }
-
-    if (hadRoot) {
-      for (const l of this.rootListeners) {
-        l();
-      }
-    }
-  }
-
-  setSnapshot(tree: RemoteNode): void {
-    const next = new Map<string, RemoteNode>();
-    flattenTree(tree, next);
-
-    const changed = new Set<string>();
-
-    for (const [id, node] of next) {
-      const sig = nodeSignature(node);
-      if (this.signatures.get(id) !== sig) {
-        changed.add(id);
-        this.signatures.set(id, sig);
-      }
-    }
-
-    for (const id of this.signatures.keys()) {
-      if (!next.has(id)) {
-        this.signatures.delete(id);
-      }
-    }
-
-    this.nodes = next;
-
-    const prevRootId = this.rootId;
-    this.rootId = tree.id;
-
-    for (const id of changed) {
-      const subs = this.nodeListeners.get(id);
-      if (subs) {
-        for (const l of subs) {
-          l();
-        }
-      }
-    }
-
-    if (prevRootId !== this.rootId) {
-      for (const l of this.rootListeners) {
-        l();
-      }
-    }
-  }
-
-  getRootId(): string | null {
-    return this.rootId;
-  }
-
-  getNode(id: string): RemoteNode | null {
-    return this.nodes.get(id) ?? null;
-  }
-
-  subscribe(id: string, listener: Listener): () => void {
-    let subs = this.nodeListeners.get(id);
-    if (!subs) {
-      subs = new Set();
-      this.nodeListeners.set(id, subs);
-    }
-    subs.add(listener);
-    return () => {
-      subs.delete(listener);
-      if (subs.size === 0) {
-        this.nodeListeners.delete(id);
-      }
-    };
-  }
-
-  subscribeRoot(listener: Listener): () => void {
-    this.rootListeners.add(listener);
-    return () => this.rootListeners.delete(listener);
-  }
-}

package/src/primitives.tsx

@@ -1,261 +0,0 @@
-import { createContext, useContext, useId, useMemo } from "react";
-import type { CSSProperties, ReactNode } from "react";
-import type { TailorKitTheme } from "@tailorkit/core/schema";
-import { resolveTheme } from "@tailorkit/core/primitives/theme";
-
-type Responsive<T> = T | Record<string, T | undefined>;
-type PrimitiveValue = number | string;
-type PrimitiveProps = Record<string, unknown>;
-
-interface PrimitiveThemeContextValue {
-  screenId: string;
-  theme: TailorKitTheme;
-}
-
-export const PrimitiveThemeContext = createContext<PrimitiveThemeContextValue | null>(null);
-
-const tokenGroups = [
-  "space",
-  "radius",
-  "background",
-  "border",
-  "borderColor",
-  "textColor",
-] as const;
-
-const cssEscape = (value: string): string => {
-  const css = (globalThis as { CSS?: { escape?: (input: string) => string } }).CSS;
-  if (typeof css?.escape === "function") {
-    return css.escape(value);
-  }
-  return value.replaceAll(/[^A-Za-z0-9_-]/gu, "\\$&");
-};
-
-const toCssValue = (
-  group: (typeof tokenGroups)[number] | "size" | "raw",
-  value: PrimitiveValue,
-): string => {
-  if (typeof value === "number") {
-    return `${value}px`;
-  }
-  if (group === "size" || group === "raw") {
-    return value;
-  }
-  return `var(--tailorkit-${group}-${cssEscape(value)})`;
-};
-
-const toResponsiveEntries = <T,>(value: Responsive<T> | undefined): [string, T][] => {
-  if (value === undefined) {
-    return [];
-  }
-  if (!(value && typeof value === "object") || Array.isArray(value)) {
-    return [["base", value as T]];
-  }
-  return Object.entries(value as Record<string, T | undefined>).filter(
-    (entry): entry is [string, T] => entry[1] !== undefined,
-  );
-};
-
-const declarationsForProp = (prop: string, value: PrimitiveValue): string[] => {
-  if (prop === "columns") {
-    return [`grid-template-columns: repeat(${String(value)}, minmax(0, 1fr));`];
-  }
-  const tokenDeclarations: Record<string, [(typeof tokenGroups)[number], string]> = {
-    background: ["background", "background"],
-    border: ["border", "border"],
-    borderColor: ["borderColor", "border-color"],
-    textColor: ["textColor", "color"],
-  };
-  const tokenDeclaration = tokenDeclarations[prop];
-  if (tokenDeclaration) {
-    const [group, property] = tokenDeclaration;
-    if (prop === "border") {
-      return [`border-style: ${toCssValue(group, value)};`, "border-width: 1px;"];
-    }
-    return [`${property}: ${toCssValue(group, value)};`];
-  }
-  if (prop === "gap" || prop === "margin" || prop === "padding") {
-    return [`${prop}: ${toCssValue("space", value)};`];
-  }
-  if (prop === "height" || prop === "width") {
-    return [`${prop}: ${toCssValue("size", value)};`];
-  }
-  if (prop === "radius") {
-    return [`border-radius: ${toCssValue("radius", value)};`];
-  }
-  if (prop === "align") {
-    return [`align-items: ${toFlexAlignment(value)};`];
-  }
-  if (prop === "justify") {
-    return [`justify-content: ${toFlexJustification(value)};`];
-  }
-  if (prop === "direction") {
-    return [`flex-direction: ${toCssValue("raw", value)};`];
-  }
-  if (prop === "overflow") {
-    return [`overflow: ${toCssValue("raw", value)};`];
-  }
-  if (prop === "grow") {
-    return [`flex-grow: ${String(value)};`];
-  }
-  if (prop === "shrink") {
-    return [`flex-shrink: ${String(value)};`];
-  }
-  if (prop === "minHeight") {
-    return [`min-height: ${toCssValue("size", value)};`];
-  }
-  if (prop === "minWidth") {
-    return [`min-width: ${toCssValue("size", value)};`];
-  }
-  if (prop === "basis") {
-    return [`flex-basis: ${toCssValue("size", value)};`];
-  }
-  if (prop === "wrap") {
-    return [`flex-wrap: ${toCssValue("raw", value)};`];
-  }
-  return [];
-};
-
-const toFlexAlignment = (value: PrimitiveValue): string => {
-  if (value === "start") {
-    return "flex-start";
-  }
-  if (value === "end") {
-    return "flex-end";
-  }
-  return String(value);
-};
-
-const toFlexJustification = (value: PrimitiveValue): string => {
-  if (value === "start") {
-    return "flex-start";
-  }
-  if (value === "end") {
-    return "flex-end";
-  }
-  if (value === "between") {
-    return "space-between";
-  }
-  return String(value);
-};
-
-const buildPrimitiveCss = ({
-  display,
-  nodeId,
-  props,
-  screenId,
-  theme,
-}: {
-  display: "block" | "flex" | "grid" | "inline";
-  nodeId: string;
-  props: PrimitiveProps;
-  screenId: string;
-  theme: TailorKitTheme;
-}): string => {
-  const selector = `[data-tailorkit-screen="${cssEscape(screenId)}"] [data-tailorkit-node="${cssEscape(
-    nodeId,
-  )}"]`;
-  const base = [`display: ${display};`];
-  const byBreakpoint = new Map<string, string[]>();
-
-  for (const [prop, rawValue] of Object.entries(props)) {
-    for (const [breakpoint, value] of toResponsiveEntries(rawValue as Responsive<PrimitiveValue>)) {
-      const declarations = declarationsForProp(prop, value);
-      if (declarations.length === 0) {
-        continue;
-      }
-      const target = breakpoint === "base" ? base : (byBreakpoint.get(breakpoint) ?? []);
-      target.push(...declarations);
-      if (breakpoint !== "base") {
-        byBreakpoint.set(breakpoint, target);
-      }
-    }
-  }
-
-  const rules = [`${selector} { ${base.join(" ")} }`];
-  for (const [breakpoint, declarations] of byBreakpoint) {
-    const minWidth = theme.breakpoints?.[breakpoint];
-    if (!minWidth) {
-      continue;
-    }
-    rules.push(`@media (min-width: ${minWidth}) { ${selector} { ${declarations.join(" ")} } }`);
-  }
-
-  return rules.join("\n");
-};
-
-export const buildThemeCss = (screenId: string, theme: TailorKitTheme): string => {
-  const selector = `[data-tailorkit-screen="${cssEscape(screenId)}"]`;
-  const declarations: string[] = [];
-  const resolvedTheme = resolveTheme(theme);
-
-  for (const group of tokenGroups) {
-    for (const [name, value] of Object.entries(resolvedTheme.tokens?.[group] ?? {})) {
-      declarations.push(`--tailorkit-${group}-${cssEscape(name)}: ${value};`);
-    }
-  }
-
-  return `${selector} { ${declarations.join(" ")} }`;
-};
-
-const usePrimitiveNodeId = (): string => {
-  const id = useId();
-  return useMemo(() => `tailorkit-${id.replaceAll(":", "")}`, [id]);
-};
-
-const Primitive = ({
-  children,
-  display,
-  element,
-  props,
-}: {
-  children?: ReactNode;
-  display: "block" | "flex" | "grid" | "inline";
-  element: "div" | "span";
-  props: PrimitiveProps;
-}): ReactNode => {
-  const context = useContext(PrimitiveThemeContext);
-  const nodeId = usePrimitiveNodeId();
-  const Element = element;
-  const css = context
-    ? buildPrimitiveCss({
-        display,
-        nodeId,
-        props,
-        screenId: context.screenId,
-        theme: context.theme,
-      })
-    : "";
-
-  return (
-    <Element data-tailorkit-node={nodeId}>
-      {css === "" ? null : <style data-tailorkit-node-style={nodeId}>{css}</style>}
-      {children}
-    </Element>
-  );
-};
-
-export const primitives = {
-  Box: ({ props, slots }: { props: PrimitiveProps; slots: { default?: ReactNode } }) => (
-    <Primitive display="block" element="div" props={props}>
-      {slots.default}
-    </Primitive>
-  ),
-  Flex: ({ props, slots }: { props: PrimitiveProps; slots: { default?: ReactNode } }) => (
-    <Primitive display="flex" element="div" props={props}>
-      {slots.default}
-    </Primitive>
-  ),
-  Grid: ({ props, slots }: { props: PrimitiveProps; slots: { default?: ReactNode } }) => (
-    <Primitive display="grid" element="div" props={props}>
-      {slots.default}
-    </Primitive>
-  ),
-  Inline: ({ props, slots }: { props: PrimitiveProps; slots: { default?: ReactNode } }) => (
-    <Primitive display="inline" element="span" props={props}>
-      {slots.default}
-    </Primitive>
-  ),
-} as const;
-
-export type PrimitiveStyle = CSSProperties;

package/src/remote-context.ts

@@ -1,11 +0,0 @@
-import { createContext } from "react";
-import type { HostToWorkerPayload } from "@tailorkit/sandbox/protocol";
-import type { NodeStore } from "./node-store";
-
-export interface RemoteViewContext {
-  components: Record<string, unknown>;
-  dispatch: (payload: HostToWorkerPayload) => void;
-  store: NodeStore;
-}
-
-export const RemoteUIContext = createContext<RemoteViewContext | null>(null);