@tailorkit/react 0.1.0-beta.21 → 0.1.0-beta.22

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

@@ -1,6 +1,6 @@
 import type { TailorKitApp } from "../tailorkit";
-import type { FetchCacheOptions, TailorKitAppsSnapshot, TailorKitStore } from "@tailorkit/client-core";
-export interface UseAppsOptions<TScopeNames extends string = string> extends Pick<FetchCacheOptions, "staleTime"> {
+import type { TailorKitAppsSnapshot, TailorKitStore } from "@tailorkit/client-core";
+export interface UseAppsOptions<TScopeNames extends string = string> {
     scopes?: readonly TScopeNames[];
     appIds?: readonly string[];
 }
@@ -18,5 +18,5 @@ export interface UseAppsResult {
 export declare function useApps(options?: UseAppsOptions): UseAppsResult;
 export declare function useAppsStore(store: TailorKitStore, options?: UseAppsOptions): UseAppsResult;
 export { matchesApp } from "@tailorkit/client-core";
-export declare function useAppsSnapshot(store: TailorKitStore, options?: Pick<FetchCacheOptions, "staleTime">): TailorKitAppsSnapshot;
+export declare function useAppsSnapshot(store: TailorKitStore): TailorKitAppsSnapshot;
 export declare function toUseAppsResult(snapshot: TailorKitAppsSnapshot, refetch: () => Promise<void>): UseAppsResult;

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

@@ -0,0 +1,13 @@
+import type { TailorKitApp, SlotItem } from "@tailorkit/client-core";
+import type { UseAppsOptions, UseAppsResult } from "./use-apps";
+export type { SlotItem } from "@tailorkit/client-core";
+export interface UseSlotOptions<TScopeNames extends string = string, TSlot extends string = string> extends UseAppsOptions<TScopeNames> {
+    slot: TSlot;
+}
+export interface UseSlotResult<TMultiple extends boolean = boolean> extends Omit<UseAppsResult, "data"> {
+    data: SlotItem<TMultiple>[] | undefined;
+}
+/** List apps for single-view slots or resolve instances for multiple-view slots. */
+export declare function useSlot({ slot, scopes, appIds }: UseSlotOptions): UseSlotResult;
+/** Managed Slot resolves only its explicitly supplied app. */
+export declare function useAppSlot(app: TailorKitApp, slot: string): UseSlotResult;

package/dist/index.d.ts

@@ -1,10 +1,9 @@
 export { Slot } from "./components/slot";
 export type { ControlledSlotProps, SlotComponent, SlotContext, SlotProps } from "./components/slot";
 export { components, createTailorKitClient } from "./tailorkit";
-export type { TailorKitApp, TailorKitView, TailorKitClientConfig, TailorKitInstance, } from "./tailorkit";
+export type { TailorKitApp, TailorKitClientConfig, TailorKitInstance } from "./tailorkit";
 export { Root } from "./components/root";
 export type { UseAppsOptions, UseAppsResult } from "./hooks/use-apps";
-export type { UseViewsOptions, UseViewsResult } from "./hooks/use-views";
-export type { SlotInstance, UseSlotInstancesOptions, UseSlotInstancesResult, } from "./hooks/use-slot-instances";
+export type { SlotItem, UseSlotOptions, UseSlotResult } from "./hooks/use-slot";
 export type { UseRegisterView, ViewOptions, ViewState } from "./hooks/use-register-view";
 export { primitives } from "./primitives";

package/dist/index.js

@@ -12,8 +12,8 @@ function useStableContext(value) {
   return ref.current.value;
 }
 
-// src/hooks/use-slot-instances.ts
-import { createSlotInstancesStore } from "@tailorkit/client-core";
+// src/hooks/use-slot.ts
+import { createSlotStore, matchesApp as matchesApp3, serializeCacheKey } from "@tailorkit/client-core";
 import { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo2, useSyncExternalStore as useSyncExternalStore2 } from "react";
 
 // src/components/context.ts
@@ -45,28 +45,25 @@ function useApps(options = {}) {
   return useAppsStore(useTailorRootContext("useApps").store, options);
 }
 function useAppsStore(store, options = {}) {
-  const snapshot = useAppsSnapshot(store, options);
+  const snapshot = useAppsSnapshot(store);
   const scopes = normalizeScopeSelection(options.scopes);
   const appIds = normalizeScopeSelection(options.appIds);
   const data = useMemo(
     () => snapshot.status === "ready" ? snapshot.apps.filter((app) => matchesApp(app, scopes.scopes, appIds.scopes)) : void 0,
     [snapshot, scopes.key, appIds.key]
   );
-  const refetch = useCallback(
-    () => store.fetchApps({ force: true, staleTime: options.staleTime }),
-    [store, options.staleTime]
-  );
+  const refetch = useCallback(() => store.fetchApps({ force: true }), [store]);
   return { ...toUseAppsResult(snapshot, refetch), data };
 }
-function useAppsSnapshot(store, options = {}) {
+function useAppsSnapshot(store) {
   const snapshot = useSyncExternalStore(
     store.subscribeApps,
     store.getAppsSnapshot,
     store.getAppsSnapshot
   );
   useEffect(() => {
-    void store.fetchApps(options);
-  }, [store, options.staleTime]);
+    void store.fetchApps();
+  }, [store]);
   return snapshot;
 }
 function toUseAppsResult(snapshot, refetch) {
@@ -83,43 +80,59 @@ function toUseAppsResult(snapshot, refetch) {
   };
 }
 
-// src/hooks/use-slot-instances.ts
-function useSlotInstances({
-  slot,
-  staleTime,
-  gcTime
-}) {
-  const apps = useApps();
-  const instances = useResolvedSlotInstances(slot, apps.data, apps.status, apps.error, {
-    staleTime,
-    gcTime
-  });
+// src/hooks/use-slot.ts
+function useSlot({ slot, scopes, appIds }) {
+  const { store } = useTailorRootContext("useSlot");
+  const apps = useApps({ scopes, appIds });
+  const items = useResolvedSlot(slot, apps.data, apps.status, apps.error);
   const refetch = useCallback2(async () => {
-    if (apps.isSuccess) await instances.refetch();
-    else await apps.refetch();
-  }, [apps.isSuccess, apps.refetch, instances.refetch]);
-  return { ...instances, isFetching: apps.isFetching || instances.isFetching, refetch };
+    const multiple = store.client.meta().getSnapshot().data?.schema.slots[slot]?.multiple;
+    if (apps.isSuccess && multiple === true) {
+      await items.refetch();
+      return;
+    }
+    await apps.refetch();
+    let previousKey;
+    while (true) {
+      const discovery = store.getAppsSnapshot();
+      if (discovery.status !== "ready") return;
+      const schema = store.getMetaSnapshot().schema;
+      const options = {
+        apps: discovery.apps.filter((app) => matchesApp3(app, scopes, appIds)),
+        slot,
+        activeView: schema === null || schema.slots[slot]?.multiple === true ? store.views.getSnapshot() : null
+      };
+      const key = serializeCacheKey([options.apps, slot, options.activeView]);
+      if (key === previousKey) return;
+      previousKey = key;
+      await createSlotStore(store.client, options).fetch();
+    }
+  }, [store, slot, scopes, appIds, apps.isSuccess, apps.refetch, items.refetch]);
+  return { ...items, isFetching: apps.isFetching || items.isFetching, refetch };
 }
-function useAppSlotInstances(app, slot) {
-  return useResolvedSlotInstances(slot, [app], "ready", null);
+function useAppSlot(app, slot) {
+  return useResolvedSlot(slot, [app], "ready", null);
 }
-function useResolvedSlotInstances(slot, apps, appsStatus, appsError, { staleTime, gcTime } = {}) {
-  const { store } = useTailorRootContext("useSlotInstances");
+function useResolvedSlot(slot, apps, appsStatus, appsError) {
+  const { store } = useTailorRootContext("useSlot");
   const activeView = useSyncExternalStore2(
     store.views.subscribe,
     store.views.getSnapshot,
     store.views.getSnapshot
   );
-  const options = useStableContext({ apps: apps ?? [], slot, activeView });
+  const meta = useSyncExternalStore2(store.subscribe, store.getMetaSnapshot, store.getMetaSnapshot);
+  const options = useStableContext({
+    apps: apps ?? [],
+    slot,
+    activeView: meta.schema === null || meta.schema.slots[slot]?.multiple === true ? activeView : null
+  });
   const query = useMemo2(
-    () => createSlotInstancesStore(store.client, {
+    () => createSlotStore(store.client, {
       ...options,
       appsStatus,
-      appsError,
-      staleTime,
-      gcTime
+      appsError
     }),
-    [store.client, options, appsStatus, appsError, staleTime, gcTime]
+    [store.client, options, appsStatus, appsError]
   );
   const snapshot = useSyncExternalStore2(query.subscribe, query.getSnapshot, query.getSnapshot);
   useEffect2(() => {
@@ -537,9 +550,11 @@ function InstanceSlot({
   state
 }) {
   const { store } = useTailorRootContext("Slot");
-  const instances = useAppSlotInstances(app, name);
+  const instances = useAppSlot(app, name);
   const meta = useSyncExternalStore4(store.subscribe, store.getMetaSnapshot, store.getMetaSnapshot);
-  const instance = instances.data?.find((instance2) => instance2.key === instanceKey);
+  const instance = instances.data?.find(
+    (item) => "key" in item && item.key === instanceKey
+  );
   const resolved = instances.isSuccess && instance && meta.schema ? resolveSlotView(app.views ?? [], name, state, meta.schema) : null;
   const view = resolved?.status === "ready" ? resolved.view : void 0;
   const stableContext = useStableContext(resolved?.context);
@@ -716,23 +731,6 @@ function useRegisterView(view, options) {
   }, [contextSnapshot, id, view, status, store]);
 }
 
-// src/hooks/use-views.ts
-import { useCallback as useCallback5, useMemo as useMemo7 } from "react";
-function useViews(options = {}) {
-  const { store } = useTailorRootContext("useViews");
-  const snapshot = useAppsSnapshot(store, options);
-  const scopes = normalizeScopeSelection(options.scopes);
-  const appIds = normalizeScopeSelection(options.appIds);
-  const data = useMemo7(
-    () => snapshot.status === "ready" ? snapshot.views.filter(
-      (view) => (options.slot === void 0 || view.slot === options.slot) && matchesApp2(view.app, scopes.scopes, appIds.scopes)
-    ) : void 0,
-    [snapshot, scopes.key, appIds.key, options.slot]
-  );
-  const refetch = useCallback5(() => store.fetchApps({ force: true }), [store]);
-  return { ...toUseAppsResult(snapshot, refetch), data };
-}
-
 // src/tailorkit.tsx
 var componentTagPrefix = "tailorkit-";
 var toComponentTagName = (name) => `${componentTagPrefix}${name.replaceAll(/([a-z0-9])([A-Z])/gu, "$1-$2").replaceAll(/[\s_]+/gu, "-").toLowerCase()}`;
@@ -788,13 +786,9 @@ function createReactTailorKitClient(options) {
       useTailorRootContext("useApps", client);
       return useApps(options2);
     },
-    useViews: function useClientViews(options2) {
-      useTailorRootContext("useViews", client);
-      return useViews(options2);
-    },
-    useSlotInstances: function useClientSlotInstances(options2) {
-      useTailorRootContext("useSlotInstances", client);
-      return useSlotInstances(options2);
+    useSlot: function useClientSlot(options2) {
+      useTailorRootContext("useSlot", client);
+      return useSlot(options2);
     },
     useRegisterView: function useClientRegisterView(view, options2) {
       useTailorRootContext("useRegisterView", client);
@@ -805,17 +799,17 @@ function createReactTailorKitClient(options) {
 }
 
 // src/components/root.tsx
-import { useEffect as useEffect6, useMemo as useMemo9, useState as useState2 } from "react";
+import { useEffect as useEffect6, useMemo as useMemo8, useState as useState2 } from "react";
 import { createTailorKitStore, toBaseUrl as toBaseUrl2 } from "@tailorkit/client-core";
 
 // src/components/render.tsx
-import { cloneElement, createElement as createElement3, isValidElement, useMemo as useMemo8 } from "react";
+import { cloneElement, createElement as createElement3, isValidElement, useMemo as useMemo7 } from "react";
 function useRender({
   defaultTagName,
   props,
   render
 }) {
-  return useMemo8(() => {
+  return useMemo7(() => {
     if (render) {
       if (!isValidElement(render)) {
         throw new Error("The render prop must be a valid React element.");
@@ -899,7 +893,7 @@ function Root({ apps: appsProp, children, render, client, ...props }) {
     store.setProvidedApps(appsProp);
   }, [store, appsProp]);
   useEffect6(() => () => store.previews.dispose(), [store]);
-  const context = useMemo9(
+  const context = useMemo8(
     () => ({
       store,
       client

package/dist/tailorkit.d.ts

@@ -4,8 +4,7 @@ import type { TailorKitTheme, CallbackMap, ComponentDefinition, ComponentProps,
 import type { primitives } from "./primitives";
 import type { UseRegisterView } from "./hooks/use-register-view";
 import type { UseAppsOptions, UseAppsResult } from "./hooks/use-apps";
-import type { UseViewsOptions, UseViewsResult } from "./hooks/use-views";
-import type { UseSlotInstancesOptions, UseSlotInstancesResult } from "./hooks/use-slot-instances";
+import type { UseSlotOptions, UseSlotResult } from "./hooks/use-slot";
 import type { SlotComponent } from "./components/slot";
 type AnyComponentDefinition = ComponentDefinition<Schema | undefined, CallbackMap, boolean | undefined>;
 type ComponentRenderer<TComponent extends AnyComponentDefinition> = (args: {
@@ -20,7 +19,7 @@ type ComponentRenderers<TComponents extends Record<string, AnyComponentDefinitio
 type CompleteComponentRenderers<TComponents extends Record<string, AnyComponentDefinition>> = {
     [TName in keyof TComponents]-?: ComponentRenderer<TComponents[TName]>;
 };
-export type { TailorKitApp, TailorKitView } from "@tailorkit/client-core";
+export type { TailorKitApp } from "@tailorkit/client-core";
 export interface TailorKitClientConfig {
     readonly baseUrl: string | URL;
     readonly fetchClient?: TailorKitFetchClient;
@@ -32,10 +31,14 @@ export interface TailorKitInstance<TViews extends Record<string, ViewDefinition>
     readonly $views?: TViews;
     readonly Slot: SlotComponent<TViews, TSlots>;
     readonly useApps: (options?: UseAppsOptions<TScopeNames>) => UseAppsResult;
-    readonly useViews: (options?: UseViewsOptions<TScopeNames, keyof TSlots & string>) => UseViewsResult;
-    readonly useSlotInstances: (options: UseSlotInstancesOptions<keyof TSlots & string>) => UseSlotInstancesResult;
+    readonly useSlot: <TSlot extends keyof TSlots & string>(options: UseSlotOptions<TScopeNames, TSlot>) => UseSlotResult<SlotMultiple<TSlots[TSlot]>>;
     readonly useRegisterView: UseRegisterView<TViews>;
 }
+type SlotMultiple<TSlot> = TSlot extends {
+    multiple: infer TMultiple extends boolean;
+} ? TMultiple : TSlot extends {
+    multiple?: infer TMultiple extends boolean;
+} ? TMultiple | false : false;
 type PrimitiveRenderers = typeof primitives;
 type CustomComponentRenderers<TComponents extends Record<string, AnyComponentDefinition>> = {
     [TName in Exclude<keyof TComponents, keyof PrimitiveRenderers>]?: ComponentRenderer<TComponents[TName]>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tailorkit/react",
-  "version": "0.1.0-beta.21",
+  "version": "0.1.0-beta.22",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -23,11 +23,11 @@
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.9",
     "@standard-schema/spec": "^1.1.0",
-    "@tailorkit/app": "0.1.0-beta.21",
-    "@tailorkit/client-core": "0.1.0-beta.21",
-    "@tailorkit/client-platform": "0.1.0-beta.21",
-    "@tailorkit/core": "0.1.0-beta.21",
-    "@tailorkit/sandbox": "0.1.0-beta.21"
+    "@tailorkit/app": "0.1.0-beta.22",
+    "@tailorkit/client-core": "0.1.0-beta.22",
+    "@tailorkit/client-platform": "0.1.0-beta.22",
+    "@tailorkit/core": "0.1.0-beta.22",
+    "@tailorkit/sandbox": "0.1.0-beta.22"
   },
   "devDependencies": {
     "@tailorkit/config": "0.0.0",

package/dist/hooks/use-slot-instances.d.ts

@@ -1,13 +0,0 @@
-import type { FetchCacheOptions, TailorKitApp, SlotInstance } from "@tailorkit/client-core";
-import type { UseAppsResult } from "./use-apps";
-export type { SlotInstance } from "@tailorkit/client-core";
-export interface UseSlotInstancesOptions<TSlot extends string = string> extends FetchCacheOptions {
-    slot: TSlot;
-}
-export interface UseSlotInstancesResult extends Omit<UseAppsResult, "data"> {
-    data: SlotInstance[] | undefined;
-}
-/** Resolve instances across discovered apps while sharing endpoint state in client-core. */
-export declare function useSlotInstances({ slot, staleTime, gcTime, }: UseSlotInstancesOptions): UseSlotInstancesResult;
-/** Managed Slot resolves only its explicitly supplied app. */
-export declare function useAppSlotInstances(app: TailorKitApp, slot: string): UseSlotInstancesResult;

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

@@ -1,9 +0,0 @@
-import type { TailorKitView } from "../tailorkit";
-import type { UseAppsOptions, UseAppsResult } from "./use-apps";
-export interface UseViewsOptions<TScopeNames extends string = string, TSlot extends string = string> extends UseAppsOptions<TScopeNames> {
-    slot?: TSlot;
-}
-export interface UseViewsResult extends Omit<UseAppsResult, "data"> {
-    data: TailorKitView[] | undefined;
-}
-export declare function useViews(options?: UseViewsOptions): UseViewsResult;