@schematichq/schematic-react 0.1.5 → 0.1.6
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/schematic-react.cjs.js +34 -20
- package/dist/schematic-react.d.ts +20 -7
- package/dist/schematic-react.esm.js +34 -20
- package/package.json +2 -2
@@ -101,7 +101,7 @@ var Schematic = class {
|
|
101
101
|
if (options?.webSocketUrl !== void 0) {
|
102
102
|
this.webSocketUrl = options.webSocketUrl;
|
103
103
|
}
|
104
|
-
if (
|
104
|
+
if (window?.addEventListener) {
|
105
105
|
window.addEventListener("beforeunload", () => {
|
106
106
|
this.flushEventQueue();
|
107
107
|
});
|
@@ -222,7 +222,7 @@ var Schematic = class {
|
|
222
222
|
tracker_user_id: this.getAnonymousId(),
|
223
223
|
type: eventType
|
224
224
|
};
|
225
|
-
if (
|
225
|
+
if (document?.hidden) {
|
226
226
|
this.storeEvent(event);
|
227
227
|
} else {
|
228
228
|
this.sendEvent(event);
|
@@ -337,28 +337,29 @@ var SchematicContext = (0, import_react.createContext)({
|
|
337
337
|
flagValues: {}
|
338
338
|
});
|
339
339
|
var SchematicProvider = ({
|
340
|
-
apiUrl,
|
341
340
|
children,
|
342
|
-
|
343
|
-
|
344
|
-
|
341
|
+
client: providedClient,
|
342
|
+
clientOpts,
|
343
|
+
publishableKey
|
345
344
|
}) => {
|
346
345
|
const [client, setClient] = (0, import_react.useState)();
|
347
346
|
const [flagValues, setFlagValues] = (0, import_react.useState)({});
|
348
347
|
(0, import_react.useEffect)(() => {
|
348
|
+
if (providedClient) {
|
349
|
+
setClient(providedClient);
|
350
|
+
return providedClient.cleanup;
|
351
|
+
}
|
349
352
|
if (publishableKey === void 0) {
|
350
353
|
return;
|
351
354
|
}
|
352
|
-
const
|
353
|
-
|
354
|
-
eventUrl,
|
355
|
+
const newClient = new Schematic(publishableKey, {
|
356
|
+
...clientOpts,
|
355
357
|
flagListener: setFlagValues,
|
356
|
-
useWebSocket: true
|
357
|
-
webSocketUrl
|
358
|
+
useWebSocket: true
|
358
359
|
});
|
359
|
-
setClient(
|
360
|
-
return
|
361
|
-
}, [
|
360
|
+
setClient(newClient);
|
361
|
+
return newClient.cleanup;
|
362
|
+
}, [clientOpts, providedClient, publishableKey]);
|
362
363
|
const contextValue = {
|
363
364
|
client,
|
364
365
|
flagValues
|
@@ -366,23 +367,36 @@ var SchematicProvider = ({
|
|
366
367
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SchematicContext.Provider, { value: contextValue, children });
|
367
368
|
};
|
368
369
|
var useSchematic = () => (0, import_react.useContext)(SchematicContext);
|
369
|
-
var
|
370
|
-
const
|
370
|
+
var useSchematicClient = (opts) => {
|
371
|
+
const schematic = useSchematic();
|
372
|
+
const { client } = opts ?? {};
|
373
|
+
if (client) {
|
374
|
+
return client;
|
375
|
+
}
|
376
|
+
return schematic.client;
|
377
|
+
};
|
378
|
+
var useSchematicContext = (opts) => {
|
379
|
+
const client = useSchematicClient(opts);
|
371
380
|
const { setContext } = client ?? {};
|
372
381
|
return { setContext };
|
373
382
|
};
|
374
|
-
var useSchematicEvents = () => {
|
375
|
-
const
|
383
|
+
var useSchematicEvents = (opts) => {
|
384
|
+
const client = useSchematicClient(opts);
|
376
385
|
const { track, identify } = client ?? {};
|
377
386
|
return { track, identify };
|
378
387
|
};
|
379
|
-
var useSchematicFlag = (key,
|
388
|
+
var useSchematicFlag = (key, opts) => {
|
380
389
|
const { flagValues } = useSchematic();
|
390
|
+
const { client } = opts ?? {};
|
391
|
+
const { fallback = false } = opts ?? {};
|
381
392
|
const [value, setValue] = (0, import_react.useState)(fallback ?? false);
|
382
393
|
const flagValue = flagValues[key];
|
383
394
|
(0, import_react.useEffect)(() => {
|
384
|
-
typeof flagValue === "undefined" ? setValue(fallback
|
395
|
+
typeof flagValue === "undefined" ? setValue(fallback) : setValue(flagValue);
|
385
396
|
}, [key, fallback, flagValue]);
|
397
|
+
if (client) {
|
398
|
+
return client.checkFlag({ key, fallback });
|
399
|
+
}
|
386
400
|
return value;
|
387
401
|
};
|
388
402
|
/*! Bundled license information:
|
@@ -9,8 +9,10 @@ import { FlagCheckWithKeyResponseBody } from '@schematichq/schematic-js';
|
|
9
9
|
import { Keys } from '@schematichq/schematic-js';
|
10
10
|
import { default as React_2 } from 'react';
|
11
11
|
import { ReactNode } from 'react';
|
12
|
+
import { Schematic } from '@schematichq/schematic-js';
|
12
13
|
import { SchematicContext } from '@schematichq/schematic-js';
|
13
14
|
import * as SchematicJS from '@schematichq/schematic-js';
|
15
|
+
import { SchematicOptions } from '@schematichq/schematic-js';
|
14
16
|
import { Traits } from '@schematichq/schematic-js';
|
15
17
|
|
16
18
|
export { Event_2 as Event }
|
@@ -31,6 +33,8 @@ export { FlagCheckWithKeyResponseBody }
|
|
31
33
|
|
32
34
|
export { Keys }
|
33
35
|
|
36
|
+
export { Schematic }
|
37
|
+
|
34
38
|
export { SchematicContext }
|
35
39
|
|
36
40
|
declare interface SchematicContextProps {
|
@@ -42,29 +46,38 @@ export declare interface SchematicFlags {
|
|
42
46
|
[key: string]: boolean;
|
43
47
|
}
|
44
48
|
|
49
|
+
export declare interface SchematicHookOpts {
|
50
|
+
client?: SchematicJS.Schematic;
|
51
|
+
}
|
52
|
+
|
53
|
+
export { SchematicOptions }
|
54
|
+
|
45
55
|
export declare const SchematicProvider: React_2.FC<SchematicProviderProps>;
|
46
56
|
|
47
|
-
declare interface SchematicProviderProps {
|
57
|
+
export declare interface SchematicProviderProps {
|
48
58
|
children: ReactNode;
|
59
|
+
client?: SchematicJS.Schematic;
|
60
|
+
clientOpts?: SchematicJS.SchematicOptions;
|
49
61
|
publishableKey?: string;
|
50
|
-
apiUrl?: string;
|
51
|
-
eventUrl?: string;
|
52
|
-
webSocketUrl?: string;
|
53
62
|
}
|
54
63
|
|
55
64
|
export { Traits }
|
56
65
|
|
57
66
|
export declare const useSchematic: () => SchematicContextProps;
|
58
67
|
|
59
|
-
export declare const useSchematicContext: () => {
|
68
|
+
export declare const useSchematicContext: (opts?: SchematicHookOpts) => {
|
60
69
|
setContext: ((context: SchematicJS.SchematicContext) => Promise<void>) | undefined;
|
61
70
|
};
|
62
71
|
|
63
|
-
export declare const useSchematicEvents: () => {
|
72
|
+
export declare const useSchematicEvents: (opts?: SchematicHookOpts) => {
|
64
73
|
track: ((body: SchematicJS.EventBodyTrack) => void) | undefined;
|
65
74
|
identify: ((body: SchematicJS.EventBodyIdentify) => void) | undefined;
|
66
75
|
};
|
67
76
|
|
68
|
-
export declare const useSchematicFlag: (key: string,
|
77
|
+
export declare const useSchematicFlag: (key: string, opts?: UseSchematicFlagOpts) => boolean | Promise<boolean>;
|
78
|
+
|
79
|
+
export declare type UseSchematicFlagOpts = SchematicHookOpts & {
|
80
|
+
fallback?: boolean;
|
81
|
+
};
|
69
82
|
|
70
83
|
export { }
|
@@ -71,7 +71,7 @@ var Schematic = class {
|
|
71
71
|
if (options?.webSocketUrl !== void 0) {
|
72
72
|
this.webSocketUrl = options.webSocketUrl;
|
73
73
|
}
|
74
|
-
if (
|
74
|
+
if (window?.addEventListener) {
|
75
75
|
window.addEventListener("beforeunload", () => {
|
76
76
|
this.flushEventQueue();
|
77
77
|
});
|
@@ -192,7 +192,7 @@ var Schematic = class {
|
|
192
192
|
tracker_user_id: this.getAnonymousId(),
|
193
193
|
type: eventType
|
194
194
|
};
|
195
|
-
if (
|
195
|
+
if (document?.hidden) {
|
196
196
|
this.storeEvent(event);
|
197
197
|
} else {
|
198
198
|
this.sendEvent(event);
|
@@ -312,28 +312,29 @@ var SchematicContext = createContext({
|
|
312
312
|
flagValues: {}
|
313
313
|
});
|
314
314
|
var SchematicProvider = ({
|
315
|
-
apiUrl,
|
316
315
|
children,
|
317
|
-
|
318
|
-
|
319
|
-
|
316
|
+
client: providedClient,
|
317
|
+
clientOpts,
|
318
|
+
publishableKey
|
320
319
|
}) => {
|
321
320
|
const [client, setClient] = useState();
|
322
321
|
const [flagValues, setFlagValues] = useState({});
|
323
322
|
useEffect(() => {
|
323
|
+
if (providedClient) {
|
324
|
+
setClient(providedClient);
|
325
|
+
return providedClient.cleanup;
|
326
|
+
}
|
324
327
|
if (publishableKey === void 0) {
|
325
328
|
return;
|
326
329
|
}
|
327
|
-
const
|
328
|
-
|
329
|
-
eventUrl,
|
330
|
+
const newClient = new Schematic(publishableKey, {
|
331
|
+
...clientOpts,
|
330
332
|
flagListener: setFlagValues,
|
331
|
-
useWebSocket: true
|
332
|
-
webSocketUrl
|
333
|
+
useWebSocket: true
|
333
334
|
});
|
334
|
-
setClient(
|
335
|
-
return
|
336
|
-
}, [
|
335
|
+
setClient(newClient);
|
336
|
+
return newClient.cleanup;
|
337
|
+
}, [clientOpts, providedClient, publishableKey]);
|
337
338
|
const contextValue = {
|
338
339
|
client,
|
339
340
|
flagValues
|
@@ -341,23 +342,36 @@ var SchematicProvider = ({
|
|
341
342
|
return /* @__PURE__ */ jsx(SchematicContext.Provider, { value: contextValue, children });
|
342
343
|
};
|
343
344
|
var useSchematic = () => useContext(SchematicContext);
|
344
|
-
var
|
345
|
-
const
|
345
|
+
var useSchematicClient = (opts) => {
|
346
|
+
const schematic = useSchematic();
|
347
|
+
const { client } = opts ?? {};
|
348
|
+
if (client) {
|
349
|
+
return client;
|
350
|
+
}
|
351
|
+
return schematic.client;
|
352
|
+
};
|
353
|
+
var useSchematicContext = (opts) => {
|
354
|
+
const client = useSchematicClient(opts);
|
346
355
|
const { setContext } = client ?? {};
|
347
356
|
return { setContext };
|
348
357
|
};
|
349
|
-
var useSchematicEvents = () => {
|
350
|
-
const
|
358
|
+
var useSchematicEvents = (opts) => {
|
359
|
+
const client = useSchematicClient(opts);
|
351
360
|
const { track, identify } = client ?? {};
|
352
361
|
return { track, identify };
|
353
362
|
};
|
354
|
-
var useSchematicFlag = (key,
|
363
|
+
var useSchematicFlag = (key, opts) => {
|
355
364
|
const { flagValues } = useSchematic();
|
365
|
+
const { client } = opts ?? {};
|
366
|
+
const { fallback = false } = opts ?? {};
|
356
367
|
const [value, setValue] = useState(fallback ?? false);
|
357
368
|
const flagValue = flagValues[key];
|
358
369
|
useEffect(() => {
|
359
|
-
typeof flagValue === "undefined" ? setValue(fallback
|
370
|
+
typeof flagValue === "undefined" ? setValue(fallback) : setValue(flagValue);
|
360
371
|
}, [key, fallback, flagValue]);
|
372
|
+
if (client) {
|
373
|
+
return client.checkFlag({ key, fallback });
|
374
|
+
}
|
361
375
|
return value;
|
362
376
|
};
|
363
377
|
export {
|
package/package.json
CHANGED
@@ -42,9 +42,9 @@
|
|
42
42
|
"test": "jest --config jest.config.js"
|
43
43
|
},
|
44
44
|
"types": "dist/schematic-react.d.ts",
|
45
|
-
"version": "0.1.
|
45
|
+
"version": "0.1.6",
|
46
46
|
"dependencies": {
|
47
|
-
"@schematichq/schematic-js": "^0.1.
|
47
|
+
"@schematichq/schematic-js": "^0.1.7"
|
48
48
|
},
|
49
49
|
"peerDependencies": {
|
50
50
|
"react": ">=18"
|