@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.
- package/dist/components/context.d.ts +3 -3
- package/dist/components/index.d.ts +1 -2
- package/dist/components/render-slot.d.ts +9 -0
- package/dist/hooks/use-apps.d.ts +3 -2
- package/dist/hooks/use-query-result.d.ts +9 -0
- package/dist/hooks/use-view-context.d.ts +1 -1
- package/dist/hooks/use-views.d.ts +3 -2
- package/dist/index.d.ts +4 -5
- package/dist/index.js +99 -151
- package/dist/remote-view.d.ts +3 -1
- package/dist/tailorkit.d.ts +24 -8
- package/package.json +6 -6
- package/dist/components/render.d.ts +0 -19
- package/dist/components/root.d.ts +0 -9
- package/dist/components/slot.d.ts +0 -9
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import type { TailorKitStore } from "@tailorkit/client-core";
|
|
2
2
|
import type { TailorKitClientConfig } from "../tailorkit";
|
|
3
|
-
export interface
|
|
3
|
+
export interface TailorkitContextValue {
|
|
4
4
|
store: TailorKitStore;
|
|
5
5
|
client: TailorKitClientConfig;
|
|
6
6
|
}
|
|
7
|
-
export declare const
|
|
8
|
-
export declare function
|
|
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 {
|
|
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;
|
package/dist/hooks/use-apps.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import type { AppsQueryOptions,
|
|
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 =
|
|
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 {
|
|
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> =
|
|
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 {
|
|
2
|
-
export type {
|
|
3
|
-
export { components,
|
|
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
|
|
138
|
-
function
|
|
139
|
-
const context = useContext3(
|
|
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
|
|
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
|
|
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
|
|
154
|
+
function ManagedRenderSlot(props) {
|
|
154
155
|
return /* @__PURE__ */ jsx3(SlotRenderer, { mode: "managed", ...props });
|
|
155
156
|
}
|
|
156
|
-
function
|
|
157
|
+
function ControlledRenderSlot(props) {
|
|
157
158
|
return /* @__PURE__ */ jsx3(SlotRenderer, { mode: "controlled", ...props });
|
|
158
159
|
}
|
|
159
|
-
var
|
|
160
|
+
var RenderSlot = Object.assign(ManagedRenderSlot, {
|
|
161
|
+
Controlled: ControlledRenderSlot
|
|
162
|
+
});
|
|
160
163
|
function SlotRenderer(options) {
|
|
161
|
-
const { store, client } =
|
|
162
|
-
options.mode === "managed" ? "
|
|
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 {
|
|
190
|
-
|
|
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 } =
|
|
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
|
-
|
|
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(
|
|
241
|
+
return useAppsStore(useTailorkitContext("useApps").store, options);
|
|
215
242
|
}
|
|
216
243
|
function useAppsStore(store, options = {}) {
|
|
217
244
|
const key = appsQueryKey(options);
|
|
218
|
-
const query =
|
|
219
|
-
return
|
|
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 {
|
|
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 } =
|
|
253
|
+
const { store } = useTailorkitContext("useViews");
|
|
228
254
|
const key = appsQueryKey2(options);
|
|
229
|
-
const query =
|
|
230
|
-
return
|
|
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(
|
|
260
|
+
function components(_contract, customComponents) {
|
|
235
261
|
return customComponents;
|
|
236
262
|
}
|
|
237
|
-
function
|
|
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
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
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
|
|
262
|
-
|
|
263
|
-
return createElement2(
|
|
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
|
-
|
|
327
|
+
useTailorkitContext("useApps", client);
|
|
269
328
|
return useApps(options2);
|
|
270
329
|
},
|
|
271
330
|
useViews: function useClientViews(options2) {
|
|
272
|
-
|
|
331
|
+
useTailorkitContext("useViews", client);
|
|
273
332
|
return useViews(options2);
|
|
274
333
|
},
|
|
275
334
|
useViewContext: function useClientViewContext(view, options2) {
|
|
276
|
-
|
|
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
|
-
|
|
394
|
-
Slot,
|
|
342
|
+
RenderSlot,
|
|
395
343
|
components,
|
|
396
|
-
|
|
344
|
+
createClient,
|
|
397
345
|
primitives
|
|
398
346
|
};
|
package/dist/remote-view.d.ts
CHANGED
|
@@ -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
|
}
|
package/dist/tailorkit.d.ts
CHANGED
|
@@ -1,18 +1,25 @@
|
|
|
1
|
-
import type { AnyComponentDefinition, ComponentRenderer, ComponentRenderers, CompleteComponentRenderers, TailorKitClientConfig,
|
|
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,
|
|
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 {
|
|
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
|
|
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>>(
|
|
25
|
-
|
|
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
|
-
|
|
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
|
-
}
|
|
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.
|
|
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.
|
|
28
|
-
"@tailorkit/client-core": "0.1.0-beta.
|
|
29
|
-
"@tailorkit/client-platform": "0.1.0-beta.
|
|
30
|
-
"@tailorkit/core": "0.1.0-beta.
|
|
31
|
-
"@tailorkit/sandbox": "0.1.0-beta.
|
|
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;
|