@tailorkit/react 0.1.0-beta.24 → 0.1.0-beta.25

package/dist/components/context.d.ts

@@ -1,8 +1,8 @@
 import type { TailorKitStore } from "@tailorkit/client-core";
 import type { TailorKitClientConfig } from "../tailorkit";
-export interface TailorRootContextValue {
+export interface TailorkitContextValue {
     store: TailorKitStore;
     client: TailorKitClientConfig;
 }
-export declare const TailorRootContext: import("react").Context<TailorRootContextValue | null>;
-export declare function useTailorRootContext(component: string, expectedClient?: TailorKitClientConfig): TailorRootContextValue;
+export declare const TailorkitContext: import("react").Context<TailorkitContextValue | null>;
+export declare function useTailorkitContext(component: string, expectedClient?: TailorKitClientConfig): TailorkitContextValue;

package/dist/components/index.d.ts

@@ -1,2 +1 @@
-export { Root } from "./root";
-export { Slot } from "./slot";
+export { RenderSlot } from "./render-slot";

package/dist/components/render-slot.d.ts

@@ -0,0 +1,9 @@
+import type { ControlledRenderSlotProps, RenderSlotProps } from "@tailorkit/client-core";
+import type { SlotDefinitions, ViewDefinition } from "@tailorkit/core/schema";
+import type { ReactNode } from "react";
+export type { ControlledRenderSlotProps, RenderSlotProps, RenderSlotContext, } from "@tailorkit/client-core";
+type DefaultViews = Record<`/${string}`, ViewDefinition>;
+export type RenderSlotComponent<TViews extends Record<string, ViewDefinition> = DefaultViews, TSlots extends SlotDefinitions = SlotDefinitions> = ((props: RenderSlotProps<TSlots>) => ReactNode) & {
+    Controlled: (props: ControlledRenderSlotProps<TViews, TSlots>) => ReactNode;
+};
+export declare const RenderSlot: RenderSlotComponent;

package/dist/hooks/use-apps.d.ts

@@ -1,5 +1,6 @@
-import type { AppsQueryOptions, QueryResult, TailorKitApp, TailorKitStore } from "@tailorkit/client-core";
+import type { AppsQueryOptions, TailorKitApp, TailorKitStore } from "@tailorkit/client-core";
+import type { UseQueryResult } from "./use-query-result";
 export type UseAppsOptions<TScopeNames extends string = string> = AppsQueryOptions<TScopeNames>;
-export type UseAppsResult = QueryResult<TailorKitApp[]>;
+export type UseAppsResult = UseQueryResult<TailorKitApp[]>;
 export declare function useApps(options?: UseAppsOptions): UseAppsResult;
 export declare function useAppsStore(store: TailorKitStore, options?: UseAppsOptions): UseAppsResult;

package/dist/hooks/use-query-result.d.ts

@@ -0,0 +1,9 @@
+import type { QueryResult } from "@tailorkit/client-core";
+import type { ReadableAtom } from "nanostores";
+export type UseQueryResult<T> = Pick<QueryResult<T>, "data" | "isPending" | "error"> & {
+    /** Whether a background fetch is running after the initial pending state. */
+    isRefetching: boolean;
+    /** Fetch fresh data, bypassing the cache's freshness window. */
+    fetch: () => Promise<void>;
+};
+export declare function useQueryResult<T>(state: ReadableAtom<QueryResult<T>>): UseQueryResult<T>;

package/dist/hooks/use-views.d.ts

@@ -1,6 +1,7 @@
-import type { ViewsQueryOptions, ViewsQueryResult } from "@tailorkit/client-core";
+import type { SlotItem, ViewsQueryOptions } from "@tailorkit/client-core";
+import type { UseQueryResult } from "./use-query-result";
 export type { SlotItem } from "@tailorkit/client-core";
 export type UseViewsOptions<TScopeNames extends string = string, TSlot extends string = string> = ViewsQueryOptions<TScopeNames, TSlot>;
-export type UseViewsResult<TMultiple extends boolean = boolean> = ViewsQueryResult<TMultiple>;
+export type UseViewsResult<TMultiple extends boolean = boolean> = UseQueryResult<SlotItem<TMultiple>[]>;
 /** Subscribe to the shared views query using React's lifecycle. */
 export declare function useViews(options: UseViewsOptions): UseViewsResult;

package/dist/index.d.ts

@@ -1,8 +1,7 @@
-export { Slot } from "./components/slot";
-export type { ControlledSlotProps, SlotComponent, SlotContext, SlotProps } from "./components/slot";
+export { RenderSlot } from "./components/render-slot";
+export type { ControlledRenderSlotProps, RenderSlotComponent, RenderSlotContext, RenderSlotProps, } from "./components/render-slot";
 export { components, createTailorKitClient } from "./tailorkit";
-export type { TailorKitApp, TailorKitClientConfig, TailorKitInstance } from "./tailorkit";
-export { Root } from "./components/root";
+export type { TailorKitApp, TailorKitClientConfig, TailorKitInstance, TailorKitProviderProps, } from "./tailorkit";
 export type { UseAppsOptions, UseAppsResult } from "./hooks/use-apps";
 export type { SlotItem, UseViewsOptions, UseViewsResult } from "./hooks/use-views";
 export type { UseViewContext, ViewOptions, ViewState } from "./hooks/use-view-context";

package/dist/index.js

@@ -1,4 +1,4 @@
-// src/components/slot.tsx
+// src/components/render-slot.tsx
 import { useStore as useStore2 } from "@nanostores/react";
 import { createSlotRuntime, buildThemeCss } from "@tailorkit/client-core";
 import { useEffect as useEffect2, useId as useId2, useMemo as useMemo3 } from "react";
@@ -134,32 +134,34 @@ var RemoteView = memo(RemoteViewComponent);
 
 // src/components/context.ts
 import { createContext as createContext3, useContext as useContext3 } from "react";
-var TailorRootContext = createContext3(null);
-function useTailorRootContext(component, expectedClient) {
-  const context = useContext3(TailorRootContext);
+var TailorkitContext = createContext3(null);
+function useTailorkitContext(component, expectedClient) {
+  const context = useContext3(TailorkitContext);
   if (!context) {
-    throw new Error(`${component} must be rendered inside Root.`);
+    throw new Error(`${component} must be rendered inside a TailorKit Provider.`);
   }
   if (expectedClient && context.client !== expectedClient) {
     throw new Error(
-      `${component} was created for a different TailorKit client than the one passed to Root.`
+      `${component} was created for a different TailorKit client than the surrounding Provider.`
     );
   }
   return context;
 }
 
-// src/components/slot.tsx
+// src/components/render-slot.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-function ManagedSlot(props) {
+function ManagedRenderSlot(props) {
   return /* @__PURE__ */ jsx3(SlotRenderer, { mode: "managed", ...props });
 }
-function ControlledSlot(props) {
+function ControlledRenderSlot(props) {
   return /* @__PURE__ */ jsx3(SlotRenderer, { mode: "controlled", ...props });
 }
-var Slot = Object.assign(ManagedSlot, { Controlled: ControlledSlot });
+var RenderSlot = Object.assign(ManagedRenderSlot, {
+  Controlled: ControlledRenderSlot
+});
 function SlotRenderer(options) {
-  const { store, client } = useTailorRootContext(
-    options.mode === "managed" ? "Slot" : "Slot.Controlled"
+  const { store, client } = useTailorkitContext(
+    options.mode === "managed" ? "RenderSlot" : "RenderSlot.Controlled"
   );
   const reactId = useId2();
   const runtime = useMemo3(() => createSlotRuntime(store, options), [store]);
@@ -186,13 +188,17 @@ function SlotRenderer(options) {
 }
 
 // src/tailorkit.tsx
-import { createTailorKitClientConfig, createComponentRegistry } from "@tailorkit/client-core";
-import { createElement as createElement2 } from "react";
+import {
+  createTailorKitClientConfig,
+  createComponentRegistry,
+  createTailorKitStore
+} from "@tailorkit/client-core";
+import { createElement as createElement2, useEffect as useEffect4, useMemo as useMemo8, useState } from "react";
 
 // src/hooks/use-view-context.ts
 import { useEffect as useEffect3, useMemo as useMemo4 } from "react";
 function useViewContext(view, options) {
-  const { store } = useTailorRootContext("useViewContext");
+  const { store } = useTailorkitContext("useViewContext");
   const id = useMemo4(() => /* @__PURE__ */ Symbol("tailorkit-current-view"), []);
   const { context, loading, error } = options;
   useEffect3(
@@ -207,27 +213,44 @@ function useViewContext(view, options) {
 }
 
 // src/hooks/use-apps.ts
+import { useMemo as useMemo6 } from "react";
+import { appsQueryKey, createAppsQuery } from "@tailorkit/client-core";
+
+// src/hooks/use-query-result.ts
 import { useStore as useStore3 } from "@nanostores/react";
 import { useMemo as useMemo5 } from "react";
-import { appsQueryKey, createAppsQuery } from "@tailorkit/client-core";
+function useQueryResult(state) {
+  const result = useStore3(state);
+  return useMemo5(
+    () => ({
+      data: result.data,
+      isPending: result.isPending,
+      error: result.error,
+      isRefetching: result.isFetching && !result.isPending,
+      fetch: result.refetch
+    }),
+    [result]
+  );
+}
+
+// src/hooks/use-apps.ts
 function useApps(options = {}) {
-  return useAppsStore(useTailorRootContext("useApps").store, options);
+  return useAppsStore(useTailorkitContext("useApps").store, options);
 }
 function useAppsStore(store, options = {}) {
   const key = appsQueryKey(options);
-  const query = useMemo5(() => createAppsQuery(store, options), [store, key]);
-  return useStore3(query.state);
+  const query = useMemo6(() => createAppsQuery(store, options), [store, key]);
+  return useQueryResult(query.state);
 }
 
 // src/hooks/use-views.ts
-import { useStore as useStore4 } from "@nanostores/react";
-import { useMemo as useMemo6 } from "react";
+import { useMemo as useMemo7 } from "react";
 import { appsQueryKey as appsQueryKey2, createViewsQuery } from "@tailorkit/client-core";
 function useViews(options) {
-  const { store } = useTailorRootContext("useViews");
+  const { store } = useTailorkitContext("useViews");
   const key = appsQueryKey2(options);
-  const query = useMemo6(() => createViewsQuery(store, options), [store, key, options.slot]);
-  return useStore4(query.state);
+  const query = useMemo7(() => createViewsQuery(store, options), [store, key, options.slot]);
+  return useQueryResult(query.state);
 }
 
 // src/tailorkit.tsx
@@ -252,146 +275,49 @@ function createReactTailorKitClient(options) {
   const clientConfig = createTailorKitClientConfig({ ...options, components: wrappedComponents });
   const client = {
     ...clientConfig,
-    Slot: Object.assign(
-      function ClientSlot(props) {
-        useTailorRootContext("Slot", client);
-        return createElement2(Slot, props);
+    Provider: function TailorKitProvider({ children, apps }) {
+      const [store] = useState(
+        () => createTailorKitStore(client.baseUrl, apps, client.fetchClient)
+      );
+      useEffect4(() => {
+        store.setProvidedApps(apps);
+      }, [store, apps]);
+      useEffect4(() => () => store.previews.dispose(), [store]);
+      const context = useMemo8(() => ({ store, client }), [store]);
+      return createElement2(TailorkitContext.Provider, { value: context }, children);
+    },
+    RenderSlot: Object.assign(
+      function ClientRenderSlot(props) {
+        useTailorkitContext("RenderSlot", client);
+        return createElement2(RenderSlot, props);
       },
       {
-        Controlled: function ClientControlledSlot(props) {
-          useTailorRootContext("Slot.Controlled", client);
-          return createElement2(Slot.Controlled, props);
+        Controlled: function ClientControlledRenderSlot(props) {
+          useTailorkitContext("RenderSlot.Controlled", client);
+          return createElement2(
+            RenderSlot.Controlled,
+            props
+          );
         }
       }
     ),
     useApps: function useClientApps(options2) {
-      useTailorRootContext("useApps", client);
+      useTailorkitContext("useApps", client);
       return useApps(options2);
     },
     useViews: function useClientViews(options2) {
-      useTailorRootContext("useViews", client);
+      useTailorkitContext("useViews", client);
       return useViews(options2);
     },
     useViewContext: function useClientViewContext(view, options2) {
-      useTailorRootContext("useViewContext", client);
+      useTailorkitContext("useViewContext", client);
       useViewContext(view, options2);
     }
   };
   return client;
 }
-
-// src/components/root.tsx
-import { useEffect as useEffect4, useMemo as useMemo8, useState } from "react";
-import { createTailorKitStore, toBaseUrl } from "@tailorkit/client-core";
-
-// src/components/render.tsx
-import { cloneElement, createElement as createElement3, isValidElement, useMemo as useMemo7 } from "react";
-function useRender({
-  defaultTagName,
-  props,
-  render
-}) {
-  return useMemo7(() => {
-    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 createElement3(defaultTagName, props);
-  }, [defaultTagName, props, render]);
-}
-function mergeProps(...propSets) {
-  const merged = {};
-  for (const props of propSets) {
-    if (!props) {
-      continue;
-    }
-    for (const [key, value] of Object.entries(props)) {
-      if (value === void 0) {
-        continue;
-      }
-      const existing = merged[key];
-      if (key === "className" && existing && value) {
-        merged[key] = `${existing} ${value}`;
-        continue;
-      }
-      if (key === "style" && existing && value) {
-        merged[key] = {
-          ...existing,
-          ...value
-        };
-        continue;
-      }
-      if (key === "ref" && existing && value) {
-        merged[key] = composeRefs(existing, value);
-        continue;
-      }
-      if (isEventHandler(key) && typeof existing === "function" && typeof value === "function") {
-        merged[key] = (...args) => {
-          existing(...args);
-          const event = args[0];
-          if (!event?.defaultPrevented) {
-            value(...args);
-          }
-        };
-        continue;
-      }
-      merged[key] = value;
-    }
-  }
-  return merged;
-}
-function composeRefs(...refs) {
-  return (node) => {
-    for (const ref of refs) {
-      if (typeof ref === "function") {
-        ref(node);
-      } else if (ref) {
-        ref.current = node;
-      }
-    }
-  };
-}
-function isEventHandler(key) {
-  return /^on[A-Z]/u.test(key);
-}
-
-// src/components/root.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
-function Root({ apps: appsProp, children, render, client, ...props }) {
-  const baseUrl = toBaseUrl(client.baseUrl).toString();
-  const [previous, setStore] = useState(() => ({
-    store: createTailorKitStore(baseUrl, appsProp, client.fetchClient),
-    fetchClient: client.fetchClient
-  }));
-  const previousStore = previous.store;
-  let store = previousStore;
-  if (previousStore.baseUrl.toString() !== baseUrl || previous.fetchClient !== client.fetchClient) {
-    store = createTailorKitStore(baseUrl, appsProp, client.fetchClient);
-    setStore({ store, fetchClient: client.fetchClient });
-  }
-  useEffect4(() => {
-    store.setProvidedApps(appsProp);
-  }, [store, appsProp]);
-  useEffect4(() => () => store.previews.dispose(), [store]);
-  const context = useMemo8(
-    () => ({
-      store,
-      client
-    }),
-    [store, client]
-  );
-  const element = render ? useRender({
-    defaultTagName: "div",
-    props: mergeProps({ children }, props),
-    render
-  }) : children;
-  return /* @__PURE__ */ jsx4(TailorRootContext.Provider, { value: context, children: element });
-}
 export {
-  Root,
-  Slot,
+  RenderSlot,
   components,
   createTailorKitClient,
   primitives

package/dist/tailorkit.d.ts

@@ -1,4 +1,4 @@
-import type { AnyComponentDefinition, ComponentRenderer, ComponentRenderers, CompleteComponentRenderers, TailorKitClientConfig, TailorKitServerShape, ServerComponents, ServerViews, ServerSlots, ServerScopeNames, SlotMultiple } from "@tailorkit/client-core";
+import type { AnyComponentDefinition, ComponentRenderer, ComponentRenderers, CompleteComponentRenderers, TailorKitClientConfig, TailorKitApp, TailorKitServerShape, ServerComponents, ServerViews, ServerSlots, ServerScopeNames, SlotMultiple } from "@tailorkit/client-core";
 export type { TailorKitClientConfig } from "@tailorkit/client-core";
 import type { TailorKitCacheOptions } from "@tailorkit/client-core";
 import type { ReactNode } from "react";
@@ -7,12 +7,17 @@ import type { primitives } from "./primitives";
 import type { UseViewContext } from "./hooks/use-view-context";
 import type { UseAppsOptions, UseAppsResult } from "./hooks/use-apps";
 import type { UseViewsOptions, UseViewsResult } from "./hooks/use-views";
-import type { SlotComponent } from "./components/slot";
+import type { RenderSlotComponent } from "./components/render-slot";
 export type { TailorKitApp } from "@tailorkit/client-core";
+export interface TailorKitProviderProps {
+    apps?: TailorKitApp[];
+    children?: ReactNode;
+}
 export interface TailorKitInstance<TViews extends Record<string, ViewDefinition> = Record<string, ViewDefinition>, TSlots extends SlotDefinitions = SlotDefinitions, TScopeNames extends string = string> extends TailorKitClientConfig {
     readonly $slots?: TSlots;
     readonly $views?: TViews;
-    readonly Slot: SlotComponent<TViews, TSlots>;
+    readonly Provider: (props: TailorKitProviderProps) => ReactNode;
+    readonly RenderSlot: RenderSlotComponent<TViews, TSlots>;
     readonly useApps: (options?: UseAppsOptions<TScopeNames>) => UseAppsResult;
     readonly useViews: <TSlot extends keyof TSlots & string>(options: UseViewsOptions<TScopeNames, TSlot>) => UseViewsResult<SlotMultiple<TSlots[TSlot]>>;
     readonly useViewContext: UseViewContext<TViews>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tailorkit/react",
-  "version": "0.1.0-beta.24",
+  "version": "0.1.0-beta.25",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -24,11 +24,11 @@
     "@floating-ui/react-dom": "^2.1.9",
     "@nanostores/react": "2.0.1",
     "@standard-schema/spec": "^1.1.0",
-    "@tailorkit/app": "0.1.0-beta.24",
-    "@tailorkit/client-core": "0.1.0-beta.24",
-    "@tailorkit/client-platform": "0.1.0-beta.24",
-    "@tailorkit/core": "0.1.0-beta.24",
-    "@tailorkit/sandbox": "0.1.0-beta.24",
+    "@tailorkit/app": "0.1.0-beta.25",
+    "@tailorkit/client-core": "0.1.0-beta.25",
+    "@tailorkit/client-platform": "0.1.0-beta.25",
+    "@tailorkit/core": "0.1.0-beta.25",
+    "@tailorkit/sandbox": "0.1.0-beta.25",
     "nanostores": "1.5.4"
   },
   "devDependencies": {

package/dist/components/render.d.ts

@@ -1,19 +0,0 @@
-import type { ComponentPropsWithoutRef, 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 declare function useRender<TTagName extends ElementType>({ defaultTagName, props, render, }: {
-    defaultTagName: TTagName;
-    props: ElementProps<TTagName>;
-    render?: ReactElement<Record<string, unknown>>;
-}): ReactNode;
-export declare function mergeProps<TProps extends Record<string, unknown>>(...propSets: (TProps | Record<string, unknown> | undefined)[]): TProps;
-export declare function composeRefs<T>(...refs: (Ref<T> | undefined)[]): Ref<T>;
-export type HtmlProps<TElement extends HTMLElement> = HTMLAttributes<TElement> & {
-    ref?: Ref<TElement>;
-};
-export {};

package/dist/components/root.d.ts

@@ -1,9 +0,0 @@
-import type { ReactNode } from "react";
-import type { TailorKitApp, TailorKitClientConfig } from "../tailorkit";
-import type { ComponentProps } from "./render";
-export interface RootProps extends ComponentProps<"div"> {
-    apps?: TailorKitApp[];
-    children?: ReactNode;
-    client: TailorKitClientConfig;
-}
-export declare function Root({ apps: appsProp, children, render, client, ...props }: RootProps): ReactNode;

package/dist/components/slot.d.ts

@@ -1,9 +0,0 @@
-import type { ControlledSlotProps, SlotProps } from "@tailorkit/client-core";
-import type { SlotDefinitions, ViewDefinition } from "@tailorkit/core/schema";
-import type { ReactNode } from "react";
-export type { ControlledSlotProps, SlotProps, SlotContext } from "@tailorkit/client-core";
-type DefaultViews = Record<`/${string}`, ViewDefinition>;
-export type SlotComponent<TViews extends Record<string, ViewDefinition> = DefaultViews, TSlots extends SlotDefinitions = SlotDefinitions> = ((props: SlotProps<TSlots>) => ReactNode) & {
-    Controlled: (props: ControlledSlotProps<TViews, TSlots>) => ReactNode;
-};
-export declare const Slot: SlotComponent;