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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,8 +1,8 @@
1
1
  import type { TailorKitStore } from "@tailorkit/client-core";
2
2
  import type { TailorKitClientConfig } from "../tailorkit";
3
- export interface TailorRootContextValue {
3
+ export interface TailorkitContextValue {
4
4
  store: TailorKitStore;
5
5
  client: TailorKitClientConfig;
6
6
  }
7
- export declare const TailorRootContext: import("react").Context<TailorRootContextValue | null>;
8
- export declare function useTailorRootContext(component: string, expectedClient?: TailorKitClientConfig): TailorRootContextValue;
7
+ export declare const TailorkitContext: import("react").Context<TailorkitContextValue | null>;
8
+ export declare function useTailorkitContext(component: string, expectedClient?: TailorKitClientConfig): TailorkitContextValue;
@@ -1,2 +1 @@
1
- export { Root } from "./root";
2
- export { Slot } from "./slot";
1
+ export { RenderSlot } from "./render-slot";
@@ -0,0 +1,9 @@
1
+ import type { ControlledRenderSlotProps, RenderSlotProps } from "@tailorkit/client-core";
2
+ import type { SlotDefinitions, ViewDefinition } from "@tailorkit/core/schema";
3
+ import type { ReactNode } from "react";
4
+ export type { ControlledRenderSlotProps, RenderSlotProps, RenderSlotContext, } from "@tailorkit/client-core";
5
+ type DefaultViews = Record<`/${string}`, ViewDefinition>;
6
+ export type RenderSlotComponent<TViews extends Record<string, ViewDefinition> = DefaultViews, TSlots extends SlotDefinitions = SlotDefinitions> = ((props: RenderSlotProps<TSlots>) => ReactNode) & {
7
+ Controlled: (props: ControlledRenderSlotProps<TViews, TSlots>) => ReactNode;
8
+ };
9
+ export declare const RenderSlot: RenderSlotComponent;
@@ -1,5 +1,6 @@
1
- import type { AppsQueryOptions, QueryResult, TailorKitApp, TailorKitStore } from "@tailorkit/client-core";
1
+ import type { AppsQueryOptions, TailorKitApp, TailorKitStore } from "@tailorkit/client-core";
2
+ import type { UseQueryResult } from "./use-query-result";
2
3
  export type UseAppsOptions<TScopeNames extends string = string> = AppsQueryOptions<TScopeNames>;
3
- export type UseAppsResult = QueryResult<TailorKitApp[]>;
4
+ export type UseAppsResult = UseQueryResult<TailorKitApp[]>;
4
5
  export declare function useApps(options?: UseAppsOptions): UseAppsResult;
5
6
  export declare function useAppsStore(store: TailorKitStore, options?: UseAppsOptions): UseAppsResult;
@@ -0,0 +1,9 @@
1
+ import type { QueryResult } from "@tailorkit/client-core";
2
+ import type { ReadableAtom } from "nanostores";
3
+ export type UseQueryResult<T> = Pick<QueryResult<T>, "data" | "isPending" | "error"> & {
4
+ /** Whether a background fetch is running after the initial pending state. */
5
+ isRefetching: boolean;
6
+ /** Fetch fresh data, bypassing the cache's freshness window. */
7
+ fetch: () => Promise<void>;
8
+ };
9
+ export declare function useQueryResult<T>(state: ReadableAtom<QueryResult<T>>): UseQueryResult<T>;
@@ -1,6 +1,6 @@
1
1
  import type { ViewDefinition } from "@tailorkit/core/schema";
2
2
  import type { ViewName, ViewState } from "@tailorkit/client-core";
3
- export type { ViewName, ViewContext, ViewOptions, ViewState } from "@tailorkit/client-core";
3
+ export type { ViewName, ViewContext, ViewContextInput, ViewOptions, ViewState, } from "@tailorkit/client-core";
4
4
  type DefaultViews = Record<`/${string}`, ViewDefinition>;
5
5
  export type UseViewContext<TViews extends Record<string, ViewDefinition>> = <TView extends ViewName<TViews>>(view: TView, options: ViewState<TViews, NoInfer<TView>>) => void;
6
6
  export declare function useViewContext<TViews extends Record<string, ViewDefinition> = DefaultViews, TView extends ViewName<TViews> = ViewName<TViews>>(view: TView, options: ViewState<TViews, NoInfer<TView>>): void;
@@ -1,6 +1,7 @@
1
- import type { ViewsQueryOptions, ViewsQueryResult } from "@tailorkit/client-core";
1
+ import type { SlotItem, ViewsQueryOptions } from "@tailorkit/client-core";
2
+ import type { UseQueryResult } from "./use-query-result";
2
3
  export type { SlotItem } from "@tailorkit/client-core";
3
4
  export type UseViewsOptions<TScopeNames extends string = string, TSlot extends string = string> = ViewsQueryOptions<TScopeNames, TSlot>;
4
- export type UseViewsResult<TMultiple extends boolean = boolean> = ViewsQueryResult<TMultiple>;
5
+ export type UseViewsResult<TMultiple extends boolean = boolean> = UseQueryResult<SlotItem<TMultiple>[]>;
5
6
  /** Subscribe to the shared views query using React's lifecycle. */
6
7
  export declare function useViews(options: UseViewsOptions): UseViewsResult;
package/dist/index.d.ts CHANGED
@@ -1,8 +1,7 @@
1
- export { Slot } from "./components/slot";
2
- export type { ControlledSlotProps, SlotComponent, SlotContext, SlotProps } from "./components/slot";
3
- export { components, createTailorKitClient } from "./tailorkit";
4
- export type { TailorKitApp, TailorKitClientConfig, TailorKitInstance } from "./tailorkit";
5
- export { Root } from "./components/root";
1
+ export { RenderSlot } from "./components/render-slot";
2
+ export type { ControlledRenderSlotProps, RenderSlotComponent, RenderSlotContext, RenderSlotProps, } from "./components/render-slot";
3
+ export { components, createClient } from "./tailorkit";
4
+ export type { TailorKitApp, TailorKitClientConfig, TailorKitInstance, TailorKitProviderProps, } from "./tailorkit";
6
5
  export type { UseAppsOptions, UseAppsResult } from "./hooks/use-apps";
7
6
  export type { SlotItem, UseViewsOptions, UseViewsResult } from "./hooks/use-views";
8
7
  export type { UseViewContext, ViewOptions, ViewState } from "./hooks/use-view-context";
package/dist/index.js CHANGED
@@ -1,4 +1,4 @@
1
- // src/components/slot.tsx
1
+ // src/components/render-slot.tsx
2
2
  import { useStore as useStore2 } from "@nanostores/react";
3
3
  import { createSlotRuntime, buildThemeCss } from "@tailorkit/client-core";
4
4
  import { useEffect as useEffect2, useId as useId2, useMemo as useMemo3 } from "react";
@@ -74,6 +74,7 @@ var RemoteErrorBoundary = class extends Component {
74
74
  function RemoteViewHost({
75
75
  appUrl,
76
76
  sourceText,
77
+ toolBridge,
77
78
  getBackendSession,
78
79
  components: components2,
79
80
  createIframe,
@@ -89,8 +90,8 @@ function RemoteViewHost({
89
90
  store.setProps(props);
90
91
  }, [props, store]);
91
92
  useEffect(
92
- () => store.mount({ appUrl, sourceText, getBackendSession, createIframe }),
93
- [appUrl, sourceText, getBackendSession, createIframe, store]
93
+ () => store.mount({ appUrl, sourceText, toolBridge, getBackendSession, createIframe }),
94
+ [appUrl, sourceText, toolBridge, getBackendSession, createIframe, store]
94
95
  );
95
96
  if (snapshot.status === "error" && snapshot.error) {
96
97
  return createElement("div", null, formatError(snapshot.error));
@@ -134,32 +135,34 @@ var RemoteView = memo(RemoteViewComponent);
134
135
 
135
136
  // src/components/context.ts
136
137
  import { createContext as createContext3, useContext as useContext3 } from "react";
137
- var TailorRootContext = createContext3(null);
138
- function useTailorRootContext(component, expectedClient) {
139
- const context = useContext3(TailorRootContext);
138
+ var TailorkitContext = createContext3(null);
139
+ function useTailorkitContext(component, expectedClient) {
140
+ const context = useContext3(TailorkitContext);
140
141
  if (!context) {
141
- throw new Error(`${component} must be rendered inside Root.`);
142
+ throw new Error(`${component} must be rendered inside a TailorKit Provider.`);
142
143
  }
143
144
  if (expectedClient && context.client !== expectedClient) {
144
145
  throw new Error(
145
- `${component} was created for a different TailorKit client than the one passed to Root.`
146
+ `${component} was created for a different TailorKit client than the surrounding Provider.`
146
147
  );
147
148
  }
148
149
  return context;
149
150
  }
150
151
 
151
- // src/components/slot.tsx
152
+ // src/components/render-slot.tsx
152
153
  import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
153
- function ManagedSlot(props) {
154
+ function ManagedRenderSlot(props) {
154
155
  return /* @__PURE__ */ jsx3(SlotRenderer, { mode: "managed", ...props });
155
156
  }
156
- function ControlledSlot(props) {
157
+ function ControlledRenderSlot(props) {
157
158
  return /* @__PURE__ */ jsx3(SlotRenderer, { mode: "controlled", ...props });
158
159
  }
159
- var Slot = Object.assign(ManagedSlot, { Controlled: ControlledSlot });
160
+ var RenderSlot = Object.assign(ManagedRenderSlot, {
161
+ Controlled: ControlledRenderSlot
162
+ });
160
163
  function SlotRenderer(options) {
161
- const { store, client } = useTailorRootContext(
162
- options.mode === "managed" ? "Slot" : "Slot.Controlled"
164
+ const { store, client } = useTailorkitContext(
165
+ options.mode === "managed" ? "RenderSlot" : "RenderSlot.Controlled"
163
166
  );
164
167
  const reactId = useId2();
165
168
  const runtime = useMemo3(() => createSlotRuntime(store, options), [store]);
@@ -176,6 +179,7 @@ function SlotRenderer(options) {
176
179
  {
177
180
  appUrl: snapshot.appUrl,
178
181
  sourceText: snapshot.sourceText,
182
+ toolBridge: snapshot.toolBridge,
179
183
  getBackendSession: snapshot.getBackendSession,
180
184
  components: client.components,
181
185
  props: snapshot.props
@@ -186,13 +190,18 @@ function SlotRenderer(options) {
186
190
  }
187
191
 
188
192
  // src/tailorkit.tsx
189
- import { createTailorKitClientConfig, createComponentRegistry } from "@tailorkit/client-core";
190
- import { createElement as createElement2 } from "react";
193
+ import {
194
+ createTailorKitClientConfig,
195
+ createComponentRegistry,
196
+ createTailorKitStore,
197
+ createTailorKitFetchClient
198
+ } from "@tailorkit/client-core";
199
+ import { createElement as createElement2, useEffect as useEffect4, useMemo as useMemo8 } from "react";
191
200
 
192
201
  // src/hooks/use-view-context.ts
193
202
  import { useEffect as useEffect3, useMemo as useMemo4 } from "react";
194
203
  function useViewContext(view, options) {
195
- const { store } = useTailorRootContext("useViewContext");
204
+ const { store } = useTailorkitContext("useViewContext");
196
205
  const id = useMemo4(() => /* @__PURE__ */ Symbol("tailorkit-current-view"), []);
197
206
  const { context, loading, error } = options;
198
207
  useEffect3(
@@ -207,34 +216,51 @@ function useViewContext(view, options) {
207
216
  }
208
217
 
209
218
  // src/hooks/use-apps.ts
219
+ import { useMemo as useMemo6 } from "react";
220
+ import { appsQueryKey, createAppsQuery } from "@tailorkit/client-core";
221
+
222
+ // src/hooks/use-query-result.ts
210
223
  import { useStore as useStore3 } from "@nanostores/react";
211
224
  import { useMemo as useMemo5 } from "react";
212
- import { appsQueryKey, createAppsQuery } from "@tailorkit/client-core";
225
+ function useQueryResult(state) {
226
+ const result = useStore3(state);
227
+ return useMemo5(
228
+ () => ({
229
+ data: result.data,
230
+ isPending: result.isPending,
231
+ error: result.error,
232
+ isRefetching: result.isFetching && !result.isPending,
233
+ fetch: result.refetch
234
+ }),
235
+ [result]
236
+ );
237
+ }
238
+
239
+ // src/hooks/use-apps.ts
213
240
  function useApps(options = {}) {
214
- return useAppsStore(useTailorRootContext("useApps").store, options);
241
+ return useAppsStore(useTailorkitContext("useApps").store, options);
215
242
  }
216
243
  function useAppsStore(store, options = {}) {
217
244
  const key = appsQueryKey(options);
218
- const query = useMemo5(() => createAppsQuery(store, options), [store, key]);
219
- return useStore3(query.state);
245
+ const query = useMemo6(() => createAppsQuery(store, options), [store, key]);
246
+ return useQueryResult(query.state);
220
247
  }
221
248
 
222
249
  // src/hooks/use-views.ts
223
- import { useStore as useStore4 } from "@nanostores/react";
224
- import { useMemo as useMemo6 } from "react";
250
+ import { useMemo as useMemo7 } from "react";
225
251
  import { appsQueryKey as appsQueryKey2, createViewsQuery } from "@tailorkit/client-core";
226
252
  function useViews(options) {
227
- const { store } = useTailorRootContext("useViews");
253
+ const { store } = useTailorkitContext("useViews");
228
254
  const key = appsQueryKey2(options);
229
- const query = useMemo6(() => createViewsQuery(store, options), [store, key, options.slot]);
230
- return useStore4(query.state);
255
+ const query = useMemo7(() => createViewsQuery(store, options), [store, key, options.slot]);
256
+ return useQueryResult(query.state);
231
257
  }
232
258
 
233
259
  // src/tailorkit.tsx
234
- function components(_schema, customComponents) {
260
+ function components(_contract, customComponents) {
235
261
  return customComponents;
236
262
  }
237
- function createTailorKitClient(options) {
263
+ function createClient(options) {
238
264
  return createReactTailorKitClient(options);
239
265
  }
240
266
  function createReactTailorKitClient(options) {
@@ -250,149 +276,71 @@ function createReactTailorKitClient(options) {
250
276
  };
251
277
  });
252
278
  const clientConfig = createTailorKitClientConfig({ ...options, components: wrappedComponents });
279
+ const subjectClients = /* @__PURE__ */ new Map();
280
+ subjectClients.set(void 0, clientConfig.fetchClient);
253
281
  const client = {
254
282
  ...clientConfig,
255
- Slot: Object.assign(
256
- function ClientSlot(props) {
257
- useTailorRootContext("Slot", client);
258
- return createElement2(Slot, props);
283
+ Provider: function TailorKitProvider({ children, apps, subjectId }) {
284
+ const store = useMemo8(() => {
285
+ let fetchClient = subjectClients.get(subjectId);
286
+ if (!fetchClient) {
287
+ fetchClient = createTailorKitFetchClient({ ...options });
288
+ fetchClient.endpoints.setSubject(subjectId);
289
+ subjectClients.set(subjectId, fetchClient);
290
+ }
291
+ return createTailorKitStore({
292
+ baseUrl: client.baseUrl,
293
+ contract: client.contract,
294
+ tools: client.tools,
295
+ apps,
296
+ client: fetchClient,
297
+ assetsBaseUrl: client.assetsBaseUrl
298
+ });
299
+ }, [subjectId]);
300
+ useEffect4(() => {
301
+ store.setProvidedApps(apps);
302
+ }, [store, apps]);
303
+ useEffect4(() => () => store.previews.dispose(), [store]);
304
+ const context = useMemo8(() => ({ store, client }), [store]);
305
+ return createElement2(
306
+ TailorkitContext.Provider,
307
+ { value: context, key: subjectId ?? "installation" },
308
+ children
309
+ );
310
+ },
311
+ RenderSlot: Object.assign(
312
+ function ClientRenderSlot(props) {
313
+ useTailorkitContext("RenderSlot", client);
314
+ return createElement2(RenderSlot, props);
259
315
  },
260
316
  {
261
- Controlled: function ClientControlledSlot(props) {
262
- useTailorRootContext("Slot.Controlled", client);
263
- return createElement2(Slot.Controlled, props);
317
+ Controlled: function ClientControlledRenderSlot(props) {
318
+ useTailorkitContext("RenderSlot.Controlled", client);
319
+ return createElement2(
320
+ RenderSlot.Controlled,
321
+ props
322
+ );
264
323
  }
265
324
  }
266
325
  ),
267
326
  useApps: function useClientApps(options2) {
268
- useTailorRootContext("useApps", client);
327
+ useTailorkitContext("useApps", client);
269
328
  return useApps(options2);
270
329
  },
271
330
  useViews: function useClientViews(options2) {
272
- useTailorRootContext("useViews", client);
331
+ useTailorkitContext("useViews", client);
273
332
  return useViews(options2);
274
333
  },
275
334
  useViewContext: function useClientViewContext(view, options2) {
276
- useTailorRootContext("useViewContext", client);
335
+ useTailorkitContext("useViewContext", client);
277
336
  useViewContext(view, options2);
278
337
  }
279
338
  };
280
339
  return client;
281
340
  }
282
-
283
- // src/components/root.tsx
284
- import { useEffect as useEffect4, useMemo as useMemo8, useState } from "react";
285
- import { createTailorKitStore, toBaseUrl } from "@tailorkit/client-core";
286
-
287
- // src/components/render.tsx
288
- import { cloneElement, createElement as createElement3, isValidElement, useMemo as useMemo7 } from "react";
289
- function useRender({
290
- defaultTagName,
291
- props,
292
- render
293
- }) {
294
- return useMemo7(() => {
295
- if (render) {
296
- if (!isValidElement(render)) {
297
- throw new Error("The render prop must be a valid React element.");
298
- }
299
- return cloneElement(render, mergeProps(render.props, props));
300
- }
301
- return createElement3(defaultTagName, props);
302
- }, [defaultTagName, props, render]);
303
- }
304
- function mergeProps(...propSets) {
305
- const merged = {};
306
- for (const props of propSets) {
307
- if (!props) {
308
- continue;
309
- }
310
- for (const [key, value] of Object.entries(props)) {
311
- if (value === void 0) {
312
- continue;
313
- }
314
- const existing = merged[key];
315
- if (key === "className" && existing && value) {
316
- merged[key] = `${existing} ${value}`;
317
- continue;
318
- }
319
- if (key === "style" && existing && value) {
320
- merged[key] = {
321
- ...existing,
322
- ...value
323
- };
324
- continue;
325
- }
326
- if (key === "ref" && existing && value) {
327
- merged[key] = composeRefs(existing, value);
328
- continue;
329
- }
330
- if (isEventHandler(key) && typeof existing === "function" && typeof value === "function") {
331
- merged[key] = (...args) => {
332
- existing(...args);
333
- const event = args[0];
334
- if (!event?.defaultPrevented) {
335
- value(...args);
336
- }
337
- };
338
- continue;
339
- }
340
- merged[key] = value;
341
- }
342
- }
343
- return merged;
344
- }
345
- function composeRefs(...refs) {
346
- return (node) => {
347
- for (const ref of refs) {
348
- if (typeof ref === "function") {
349
- ref(node);
350
- } else if (ref) {
351
- ref.current = node;
352
- }
353
- }
354
- };
355
- }
356
- function isEventHandler(key) {
357
- return /^on[A-Z]/u.test(key);
358
- }
359
-
360
- // src/components/root.tsx
361
- import { jsx as jsx4 } from "react/jsx-runtime";
362
- function Root({ apps: appsProp, children, render, client, ...props }) {
363
- const baseUrl = toBaseUrl(client.baseUrl).toString();
364
- const [previous, setStore] = useState(() => ({
365
- store: createTailorKitStore(baseUrl, appsProp, client.fetchClient),
366
- fetchClient: client.fetchClient
367
- }));
368
- const previousStore = previous.store;
369
- let store = previousStore;
370
- if (previousStore.baseUrl.toString() !== baseUrl || previous.fetchClient !== client.fetchClient) {
371
- store = createTailorKitStore(baseUrl, appsProp, client.fetchClient);
372
- setStore({ store, fetchClient: client.fetchClient });
373
- }
374
- useEffect4(() => {
375
- store.setProvidedApps(appsProp);
376
- }, [store, appsProp]);
377
- useEffect4(() => () => store.previews.dispose(), [store]);
378
- const context = useMemo8(
379
- () => ({
380
- store,
381
- client
382
- }),
383
- [store, client]
384
- );
385
- const element = render ? useRender({
386
- defaultTagName: "div",
387
- props: mergeProps({ children }, props),
388
- render
389
- }) : children;
390
- return /* @__PURE__ */ jsx4(TailorRootContext.Provider, { value: context, children: element });
391
- }
392
341
  export {
393
- Root,
394
- Slot,
342
+ RenderSlot,
395
343
  components,
396
- createTailorKitClient,
344
+ createClient,
397
345
  primitives
398
346
  };
@@ -1,8 +1,10 @@
1
+ import type { ToolBridge } from "@tailorkit/app/client";
1
2
  import type { Session } from "@tailorkit/app/client";
2
3
  import type { ReactNode } from "react";
3
4
  interface RemoteViewHostProps {
4
5
  appUrl: string | URL;
5
6
  sourceText?: string;
7
+ toolBridge?: ToolBridge;
6
8
  getBackendSession?: (options: {
7
9
  refresh: boolean;
8
10
  }) => Promise<Session>;
@@ -10,7 +12,7 @@ interface RemoteViewHostProps {
10
12
  createIframe?: () => HTMLIFrameElement;
11
13
  props?: Record<string, unknown>;
12
14
  }
13
- export declare function RemoteViewHost({ appUrl, sourceText, getBackendSession, components, createIframe, props, }: RemoteViewHostProps): ReactNode;
15
+ export declare function RemoteViewHost({ appUrl, sourceText, toolBridge, getBackendSession, components, createIframe, props, }: RemoteViewHostProps): ReactNode;
14
16
  interface RemoteViewProps {
15
17
  nodeId: string;
16
18
  }
@@ -1,18 +1,25 @@
1
- import type { AnyComponentDefinition, ComponentRenderer, ComponentRenderers, CompleteComponentRenderers, TailorKitClientConfig, TailorKitServerShape, ServerComponents, ServerViews, ServerSlots, ServerScopeNames, SlotMultiple } from "@tailorkit/client-core";
1
+ import type { AnyComponentDefinition, ComponentRenderer, ComponentRenderers, CompleteComponentRenderers, TailorKitClientConfig, TailorKitApp, SlotMultiple } from "@tailorkit/client-core";
2
2
  export type { TailorKitClientConfig } from "@tailorkit/client-core";
3
3
  import type { TailorKitCacheOptions } from "@tailorkit/client-core";
4
4
  import type { ReactNode } from "react";
5
- import type { TailorKitTheme, ViewDefinition, SlotDefinitions, TailorKitSchema } from "@tailorkit/core/schema";
5
+ import type { TailorKitTheme, ViewDefinition, SlotDefinitions, TailorKitContract, ToolImplementations } from "@tailorkit/core/schema";
6
6
  import type { primitives } from "./primitives";
7
7
  import type { UseViewContext } from "./hooks/use-view-context";
8
8
  import type { UseAppsOptions, UseAppsResult } from "./hooks/use-apps";
9
9
  import type { UseViewsOptions, UseViewsResult } from "./hooks/use-views";
10
- import type { SlotComponent } from "./components/slot";
10
+ import type { RenderSlotComponent } from "./components/render-slot";
11
11
  export type { TailorKitApp } from "@tailorkit/client-core";
12
+ export interface TailorKitProviderProps {
13
+ apps?: TailorKitApp[];
14
+ /** Cache partition for the authenticated product principal. */
15
+ subjectId?: string;
16
+ children?: ReactNode;
17
+ }
12
18
  export interface TailorKitInstance<TViews extends Record<string, ViewDefinition> = Record<string, ViewDefinition>, TSlots extends SlotDefinitions = SlotDefinitions, TScopeNames extends string = string> extends TailorKitClientConfig {
13
19
  readonly $slots?: TSlots;
14
20
  readonly $views?: TViews;
15
- readonly Slot: SlotComponent<TViews, TSlots>;
21
+ readonly Provider: (props: TailorKitProviderProps) => ReactNode;
22
+ readonly RenderSlot: RenderSlotComponent<TViews, TSlots>;
16
23
  readonly useApps: (options?: UseAppsOptions<TScopeNames>) => UseAppsResult;
17
24
  readonly useViews: <TSlot extends keyof TSlots & string>(options: UseViewsOptions<TScopeNames, TSlot>) => UseViewsResult<SlotMultiple<TSlots[TSlot]>>;
18
25
  readonly useViewContext: UseViewContext<TViews>;
@@ -21,12 +28,21 @@ type PrimitiveRenderers = typeof primitives;
21
28
  type CustomComponentRenderers<TComponents extends Record<string, AnyComponentDefinition>> = {
22
29
  [TName in Exclude<keyof TComponents, keyof PrimitiveRenderers>]?: ComponentRenderer<TComponents[TName], ReactNode>;
23
30
  };
24
- export declare function components<TComponents extends Record<string, AnyComponentDefinition>>(_schema: TailorKitSchema<TComponents, Record<string, ViewDefinition>>, customComponents: CustomComponentRenderers<TComponents>): ComponentRenderers<TComponents, ReactNode>;
25
- export declare function createTailorKitClient<TTailor extends TailorKitServerShape>(options: {
31
+ export declare function components<TComponents extends Record<string, AnyComponentDefinition>>(_contract: {
32
+ components: TComponents;
33
+ }, customComponents: CustomComponentRenderers<TComponents>): ComponentRenderers<TComponents, ReactNode>;
34
+ export declare function createClient<const TContract extends TailorKitContract>(options: {
35
+ contract: TContract;
36
+ tools?: ToolImplementations<NoInfer<TContract["tools"]>, "client">;
26
37
  baseUrl: string | URL;
27
- components?: CompleteComponentRenderers<ServerComponents<TTailor>, ReactNode>;
38
+ assetsBaseUrl?: string | URL;
39
+ components?: CompleteComponentRenderers<NoInfer<TContract["components"]>, ReactNode>;
28
40
  theme?: TailorKitTheme;
29
41
  cache?: TailorKitCacheOptions;
30
42
  fetch?: typeof fetch;
31
- }): TailorKitInstance<ServerViews<TTailor>, ServerSlots<TTailor>, ServerScopeNames<TTailor>>;
43
+ } & (keyof ToolImplementations<TContract["tools"], "client"> extends never ? {
44
+ tools?: ToolImplementations<TContract["tools"], "client">;
45
+ } : {
46
+ tools: ToolImplementations<TContract["tools"], "client">;
47
+ })): TailorKitInstance<TContract["views"], TContract["slots"], keyof TContract["scopes"] & string>;
32
48
  export type { ViewOptions } from "./hooks/use-view-context";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tailorkit/react",
3
- "version": "0.1.0-beta.24",
3
+ "version": "0.1.0-beta.26",
4
4
  "license": "Apache-2.0",
5
5
  "repository": {
6
6
  "type": "git",
@@ -24,11 +24,11 @@
24
24
  "@floating-ui/react-dom": "^2.1.9",
25
25
  "@nanostores/react": "2.0.1",
26
26
  "@standard-schema/spec": "^1.1.0",
27
- "@tailorkit/app": "0.1.0-beta.24",
28
- "@tailorkit/client-core": "0.1.0-beta.24",
29
- "@tailorkit/client-platform": "0.1.0-beta.24",
30
- "@tailorkit/core": "0.1.0-beta.24",
31
- "@tailorkit/sandbox": "0.1.0-beta.24",
27
+ "@tailorkit/app": "0.1.0-beta.26",
28
+ "@tailorkit/client-core": "0.1.0-beta.26",
29
+ "@tailorkit/client-platform": "0.1.0-beta.26",
30
+ "@tailorkit/core": "0.1.0-beta.26",
31
+ "@tailorkit/sandbox": "0.1.0-beta.26",
32
32
  "nanostores": "1.5.4"
33
33
  },
34
34
  "devDependencies": {
@@ -1,19 +0,0 @@
1
- import type { ComponentPropsWithoutRef, ElementType, HTMLAttributes, ReactElement, ReactNode, Ref } from "react";
2
- type ElementProps<TTagName extends ElementType> = ComponentPropsWithoutRef<TTagName> & {
3
- ref?: Ref<unknown>;
4
- };
5
- export interface RenderProps {
6
- render?: ReactElement<Record<string, unknown>>;
7
- }
8
- export type ComponentProps<TTagName extends ElementType> = ElementProps<TTagName> & RenderProps;
9
- export declare function useRender<TTagName extends ElementType>({ defaultTagName, props, render, }: {
10
- defaultTagName: TTagName;
11
- props: ElementProps<TTagName>;
12
- render?: ReactElement<Record<string, unknown>>;
13
- }): ReactNode;
14
- export declare function mergeProps<TProps extends Record<string, unknown>>(...propSets: (TProps | Record<string, unknown> | undefined)[]): TProps;
15
- export declare function composeRefs<T>(...refs: (Ref<T> | undefined)[]): Ref<T>;
16
- export type HtmlProps<TElement extends HTMLElement> = HTMLAttributes<TElement> & {
17
- ref?: Ref<TElement>;
18
- };
19
- export {};
@@ -1,9 +0,0 @@
1
- import type { ReactNode } from "react";
2
- import type { TailorKitApp, TailorKitClientConfig } from "../tailorkit";
3
- import type { ComponentProps } from "./render";
4
- export interface RootProps extends ComponentProps<"div"> {
5
- apps?: TailorKitApp[];
6
- children?: ReactNode;
7
- client: TailorKitClientConfig;
8
- }
9
- export declare function Root({ apps: appsProp, children, render, client, ...props }: RootProps): ReactNode;
@@ -1,9 +0,0 @@
1
- import type { ControlledSlotProps, SlotProps } from "@tailorkit/client-core";
2
- import type { SlotDefinitions, ViewDefinition } from "@tailorkit/core/schema";
3
- import type { ReactNode } from "react";
4
- export type { ControlledSlotProps, SlotProps, SlotContext } from "@tailorkit/client-core";
5
- type DefaultViews = Record<`/${string}`, ViewDefinition>;
6
- export type SlotComponent<TViews extends Record<string, ViewDefinition> = DefaultViews, TSlots extends SlotDefinitions = SlotDefinitions> = ((props: SlotProps<TSlots>) => ReactNode) & {
7
- Controlled: (props: ControlledSlotProps<TViews, TSlots>) => ReactNode;
8
- };
9
- export declare const Slot: SlotComponent;