@uniformdev/context-react 17.7.1-alpha.140 → 17.7.1-alpha.169
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/index.esm.js +403 -1
- package/dist/index.js +443 -1
- package/dist/index.mjs +403 -1
- package/package.json +4 -4
package/dist/index.esm.js
CHANGED
|
@@ -1 +1,403 @@
|
|
|
1
|
-
|
|
1
|
+
// src/hooks/useQuirks.ts
|
|
2
|
+
import { useEffect, useState } from "react";
|
|
3
|
+
function useQuirks() {
|
|
4
|
+
const { context } = useUniformContext();
|
|
5
|
+
const [quirks, setQuirks] = useState(context.quirks);
|
|
6
|
+
const quirkChangeListener = (updatedQuirks) => {
|
|
7
|
+
setQuirks(updatedQuirks);
|
|
8
|
+
};
|
|
9
|
+
useEffect(() => {
|
|
10
|
+
context.events.on("quirksUpdated", quirkChangeListener);
|
|
11
|
+
return () => {
|
|
12
|
+
context.events.off("quirksUpdated", quirkChangeListener);
|
|
13
|
+
};
|
|
14
|
+
}, [context]);
|
|
15
|
+
return quirks;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
// src/hooks/useScores.ts
|
|
19
|
+
import { dequal } from "dequal/lite";
|
|
20
|
+
import { useEffect as useEffect2, useState as useState2 } from "react";
|
|
21
|
+
function useScores() {
|
|
22
|
+
const { context } = useUniformContext();
|
|
23
|
+
const [scores, setScores] = useState2(context.scores);
|
|
24
|
+
useEffect2(() => {
|
|
25
|
+
const scoringChangeListener = (updatedScores) => {
|
|
26
|
+
setScores(updatedScores);
|
|
27
|
+
};
|
|
28
|
+
const currentScores = context.scores;
|
|
29
|
+
if (!dequal(scores, currentScores)) {
|
|
30
|
+
setScores(currentScores);
|
|
31
|
+
}
|
|
32
|
+
context.events.on("scoresUpdated", scoringChangeListener);
|
|
33
|
+
return () => {
|
|
34
|
+
context.events.off("scoresUpdated", scoringChangeListener);
|
|
35
|
+
};
|
|
36
|
+
}, [context]);
|
|
37
|
+
return scores;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
// src/hooks/useUniformContext.ts
|
|
41
|
+
import { useContext } from "react";
|
|
42
|
+
|
|
43
|
+
// src/contexts.tsx
|
|
44
|
+
import { createContext } from "react";
|
|
45
|
+
var UniformContextContext = createContext(void 0);
|
|
46
|
+
var PersonalizationContext = createContext({});
|
|
47
|
+
|
|
48
|
+
// src/hooks/useUniformContext.ts
|
|
49
|
+
function useUniformContext(options = {}) {
|
|
50
|
+
const { throwOnMissingProvider = true } = options;
|
|
51
|
+
const value = useContext(UniformContextContext);
|
|
52
|
+
if (throwOnMissingProvider) {
|
|
53
|
+
if (value === void 0) {
|
|
54
|
+
throw new Error("useUniformContext must be used within a <UniformContext> provider");
|
|
55
|
+
}
|
|
56
|
+
return value;
|
|
57
|
+
}
|
|
58
|
+
return value;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
// src/components/Personalize.tsx
|
|
62
|
+
import React3 from "react";
|
|
63
|
+
|
|
64
|
+
// src/constants.ts
|
|
65
|
+
var isServer = typeof window === "undefined";
|
|
66
|
+
|
|
67
|
+
// src/components/PersonalizeEdge.tsx
|
|
68
|
+
import { ScriptType } from "@uniformdev/context";
|
|
69
|
+
import React, { Fragment } from "react";
|
|
70
|
+
|
|
71
|
+
// src/components/EdgeTag.tsx
|
|
72
|
+
import { EdgeNodeTagName } from "@uniformdev/context";
|
|
73
|
+
import { createElement } from "react";
|
|
74
|
+
var EdgeTag = (props) => {
|
|
75
|
+
return createElement(EdgeNodeTagName, props);
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
// src/components/PersonalizeEdge.tsx
|
|
79
|
+
function PersonalizeEdge(props) {
|
|
80
|
+
const { variations, count, component } = props;
|
|
81
|
+
const options = {
|
|
82
|
+
name: props.name,
|
|
83
|
+
count: count != null ? count : 1
|
|
84
|
+
};
|
|
85
|
+
const Component = component;
|
|
86
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
|
|
87
|
+
EdgeTag,
|
|
88
|
+
{
|
|
89
|
+
"data-type": ScriptType.ListStart,
|
|
90
|
+
dangerouslySetInnerHTML: { __html: JSON.stringify(options) }
|
|
91
|
+
}
|
|
92
|
+
), variations.map((variant) => /* @__PURE__ */ React.createElement(Fragment, { key: variant.id }, /* @__PURE__ */ React.createElement(
|
|
93
|
+
EdgeTag,
|
|
94
|
+
{
|
|
95
|
+
"data-type": ScriptType.ListItemSettings,
|
|
96
|
+
dangerouslySetInnerHTML: {
|
|
97
|
+
__html: JSON.stringify({
|
|
98
|
+
id: variant.id,
|
|
99
|
+
pz: variant.pz || null
|
|
100
|
+
})
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
), /* @__PURE__ */ React.createElement(EdgeTag, { "data-type": ScriptType.ListItem }, /* @__PURE__ */ React.createElement(
|
|
104
|
+
Component,
|
|
105
|
+
{
|
|
106
|
+
key: variant.id,
|
|
107
|
+
personalizationResult: { variation: variant, personalizationOccurred: false },
|
|
108
|
+
...variant
|
|
109
|
+
}
|
|
110
|
+
)))), /* @__PURE__ */ React.createElement(EdgeTag, { "data-type": ScriptType.ListEnd }));
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
// src/components/PersonalizeStandard.tsx
|
|
114
|
+
import React2, { useMemo } from "react";
|
|
115
|
+
function PersonalizeStandard({
|
|
116
|
+
variations,
|
|
117
|
+
component,
|
|
118
|
+
wrapperComponent,
|
|
119
|
+
name,
|
|
120
|
+
count = 1
|
|
121
|
+
}) {
|
|
122
|
+
const { context } = useUniformContext();
|
|
123
|
+
const scores = useScores();
|
|
124
|
+
const { variations: personalizedVariations, personalized: personalizationOccurred } = useMemo(
|
|
125
|
+
() => context.personalize({
|
|
126
|
+
name,
|
|
127
|
+
variations,
|
|
128
|
+
take: count
|
|
129
|
+
}),
|
|
130
|
+
[scores, context, count, name, variations]
|
|
131
|
+
);
|
|
132
|
+
const Wrapper = wrapperComponent != null ? wrapperComponent : ({ children }) => /* @__PURE__ */ React2.createElement(React2.Fragment, null, children);
|
|
133
|
+
const Component = component;
|
|
134
|
+
return /* @__PURE__ */ React2.createElement(PersonalizationContext.Provider, { value: { personalized: true } }, personalizedVariations.length ? /* @__PURE__ */ React2.createElement(Wrapper, { personalizationOccurred }, personalizedVariations.map((variant) => /* @__PURE__ */ React2.createElement(
|
|
135
|
+
Component,
|
|
136
|
+
{
|
|
137
|
+
key: variant.id,
|
|
138
|
+
personalizationResult: { variation: variant, personalizationOccurred },
|
|
139
|
+
...variant
|
|
140
|
+
}
|
|
141
|
+
))) : null);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
// src/components/Personalize.tsx
|
|
145
|
+
function Personalize(props) {
|
|
146
|
+
var _a;
|
|
147
|
+
const { outputType } = (_a = useUniformContext({ throwOnMissingProvider: false })) != null ? _a : {};
|
|
148
|
+
if (!outputType) {
|
|
149
|
+
throw new Error(
|
|
150
|
+
"Using the <Personalize /> component requires the <UniformContext> provider to be present."
|
|
151
|
+
);
|
|
152
|
+
}
|
|
153
|
+
if (!isServer || outputType === "standard") {
|
|
154
|
+
return /* @__PURE__ */ React3.createElement(PersonalizeStandard, { ...props });
|
|
155
|
+
} else if (outputType === "edge") {
|
|
156
|
+
return /* @__PURE__ */ React3.createElement(PersonalizeEdge, { ...props });
|
|
157
|
+
}
|
|
158
|
+
return null;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
// src/components/Test.tsx
|
|
162
|
+
import React6 from "react";
|
|
163
|
+
|
|
164
|
+
// src/components/TestEdge.tsx
|
|
165
|
+
import { ScriptType as ScriptType2 } from "@uniformdev/context";
|
|
166
|
+
import React4, { Fragment as Fragment2 } from "react";
|
|
167
|
+
function TestEdge(props) {
|
|
168
|
+
const { name, variations, component } = props;
|
|
169
|
+
const options = {
|
|
170
|
+
name
|
|
171
|
+
};
|
|
172
|
+
const Component = component;
|
|
173
|
+
return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(
|
|
174
|
+
EdgeTag,
|
|
175
|
+
{
|
|
176
|
+
"data-type": ScriptType2.TestStart,
|
|
177
|
+
dangerouslySetInnerHTML: { __html: JSON.stringify(options) }
|
|
178
|
+
}
|
|
179
|
+
), variations.map((variation, index) => {
|
|
180
|
+
return /* @__PURE__ */ React4.createElement(Fragment2, { key: variation.id }, /* @__PURE__ */ React4.createElement(
|
|
181
|
+
EdgeTag,
|
|
182
|
+
{
|
|
183
|
+
"data-type": ScriptType2.ListItemSettings,
|
|
184
|
+
dangerouslySetInnerHTML: {
|
|
185
|
+
__html: JSON.stringify({
|
|
186
|
+
id: variation.id
|
|
187
|
+
})
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
), /* @__PURE__ */ React4.createElement(EdgeTag, { "data-type": ScriptType2.ListItem }, /* @__PURE__ */ React4.createElement(Component, { key: index, ...variation })));
|
|
191
|
+
}), /* @__PURE__ */ React4.createElement(EdgeTag, { "data-type": ScriptType2.TestEnd }));
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
// src/components/TestStandard.tsx
|
|
195
|
+
import React5 from "react";
|
|
196
|
+
var TestStandard = ({
|
|
197
|
+
name,
|
|
198
|
+
variations,
|
|
199
|
+
component
|
|
200
|
+
}) => {
|
|
201
|
+
const { context } = useUniformContext();
|
|
202
|
+
const { result } = context.test({
|
|
203
|
+
name,
|
|
204
|
+
variations
|
|
205
|
+
});
|
|
206
|
+
if (!result) {
|
|
207
|
+
return null;
|
|
208
|
+
}
|
|
209
|
+
const Component = component;
|
|
210
|
+
return /* @__PURE__ */ React5.createElement(Component, { ...result });
|
|
211
|
+
};
|
|
212
|
+
|
|
213
|
+
// src/components/Test.tsx
|
|
214
|
+
var Test = (props) => {
|
|
215
|
+
var _a;
|
|
216
|
+
const { outputType } = (_a = useUniformContext({ throwOnMissingProvider: false })) != null ? _a : {};
|
|
217
|
+
if (!outputType) {
|
|
218
|
+
throw new Error("Using the <Test /> component requires the <UniformContext> provider to be present.");
|
|
219
|
+
}
|
|
220
|
+
if (!isServer || outputType === "standard") {
|
|
221
|
+
return /* @__PURE__ */ React6.createElement(TestStandard, { ...props });
|
|
222
|
+
} else if (outputType === "edge") {
|
|
223
|
+
return /* @__PURE__ */ React6.createElement(TestEdge, { ...props });
|
|
224
|
+
}
|
|
225
|
+
return null;
|
|
226
|
+
};
|
|
227
|
+
|
|
228
|
+
// src/components/Track.tsx
|
|
229
|
+
import { createElement as createElement2, useEffect as useEffect3, useRef, useState as useState3 } from "react";
|
|
230
|
+
|
|
231
|
+
// src/hooks/useIsPersonalized.ts
|
|
232
|
+
import { useContext as useContext2 } from "react";
|
|
233
|
+
var useIsPersonalized = (options) => {
|
|
234
|
+
const { personalized } = useContext2(PersonalizationContext);
|
|
235
|
+
if (typeof personalized !== "undefined") {
|
|
236
|
+
return personalized;
|
|
237
|
+
}
|
|
238
|
+
if (typeof (options == null ? void 0 : options.personalized) !== "undefined") {
|
|
239
|
+
return options.personalized;
|
|
240
|
+
}
|
|
241
|
+
return false;
|
|
242
|
+
};
|
|
243
|
+
|
|
244
|
+
// src/components/Track.tsx
|
|
245
|
+
var Track = ({
|
|
246
|
+
behavior,
|
|
247
|
+
children,
|
|
248
|
+
tagName = "div",
|
|
249
|
+
threshold = 0.5,
|
|
250
|
+
disableVisibilityTrigger = typeof window === "undefined" || !("IntersectionObserver" in window),
|
|
251
|
+
...rest
|
|
252
|
+
}) => {
|
|
253
|
+
const currentUrl = typeof document === "undefined" ? "__uniform_ssr_url" : document.location.href;
|
|
254
|
+
const { context } = useUniformContext();
|
|
255
|
+
const insidePersonalizeComponent = useIsPersonalized();
|
|
256
|
+
const [lastUrl, setLastUrl] = useState3();
|
|
257
|
+
const [hasTracked, setHasTracked] = useState3(false);
|
|
258
|
+
const wrapperEl = useRef(null);
|
|
259
|
+
const disconnect = useRef();
|
|
260
|
+
useEffect3(() => {
|
|
261
|
+
const urlHasChanged = lastUrl !== currentUrl;
|
|
262
|
+
if (urlHasChanged) {
|
|
263
|
+
setHasTracked(false);
|
|
264
|
+
setLastUrl(currentUrl);
|
|
265
|
+
}
|
|
266
|
+
}, [currentUrl, lastUrl]);
|
|
267
|
+
useEffect3(() => {
|
|
268
|
+
var _a;
|
|
269
|
+
const hasNoBehaviorValue = !behavior || Array.isArray(behavior) && !behavior.length;
|
|
270
|
+
const cannotTrack = insidePersonalizeComponent || hasNoBehaviorValue;
|
|
271
|
+
if (cannotTrack || !wrapperEl.current)
|
|
272
|
+
return;
|
|
273
|
+
const enrichments = Array.isArray(behavior) ? behavior : [behavior];
|
|
274
|
+
const pushBehaviorEnrichment = () => {
|
|
275
|
+
var _a2;
|
|
276
|
+
if (hasTracked) {
|
|
277
|
+
return;
|
|
278
|
+
}
|
|
279
|
+
context.update({
|
|
280
|
+
enrichments
|
|
281
|
+
});
|
|
282
|
+
setHasTracked(true);
|
|
283
|
+
(_a2 = disconnect.current) == null ? void 0 : _a2.call(disconnect);
|
|
284
|
+
};
|
|
285
|
+
if (disableVisibilityTrigger) {
|
|
286
|
+
pushBehaviorEnrichment();
|
|
287
|
+
} else {
|
|
288
|
+
(_a = disconnect.current) == null ? void 0 : _a.call(disconnect);
|
|
289
|
+
const instance = new IntersectionObserver(
|
|
290
|
+
([entry]) => {
|
|
291
|
+
if (entry.isIntersecting) {
|
|
292
|
+
pushBehaviorEnrichment();
|
|
293
|
+
}
|
|
294
|
+
},
|
|
295
|
+
{
|
|
296
|
+
threshold
|
|
297
|
+
}
|
|
298
|
+
);
|
|
299
|
+
instance.observe(wrapperEl.current);
|
|
300
|
+
disconnect.current = () => {
|
|
301
|
+
var _a2;
|
|
302
|
+
return (_a2 = instance.disconnect) == null ? void 0 : _a2.call(instance);
|
|
303
|
+
};
|
|
304
|
+
}
|
|
305
|
+
return () => {
|
|
306
|
+
var _a2;
|
|
307
|
+
(_a2 = disconnect.current) == null ? void 0 : _a2.call(disconnect);
|
|
308
|
+
};
|
|
309
|
+
}, [
|
|
310
|
+
context,
|
|
311
|
+
behavior,
|
|
312
|
+
disableVisibilityTrigger,
|
|
313
|
+
threshold,
|
|
314
|
+
insidePersonalizeComponent,
|
|
315
|
+
lastUrl,
|
|
316
|
+
currentUrl,
|
|
317
|
+
hasTracked
|
|
318
|
+
]);
|
|
319
|
+
const element = createElement2(tagName, { ...rest, ref: wrapperEl }, children);
|
|
320
|
+
return element;
|
|
321
|
+
};
|
|
322
|
+
|
|
323
|
+
// src/components/TrackFragment.tsx
|
|
324
|
+
import React7 from "react";
|
|
325
|
+
import { useEffect as useEffect4, useState as useState4 } from "react";
|
|
326
|
+
var TrackFragment = ({ behavior, children }) => {
|
|
327
|
+
const currentUrl = typeof document === "undefined" ? "__uniform_ssr_url" : document.location.href;
|
|
328
|
+
const { context } = useUniformContext();
|
|
329
|
+
const insidePersonalizeComponent = useIsPersonalized();
|
|
330
|
+
const [lastUrl, setLastUrl] = useState4();
|
|
331
|
+
const [hasTracked, setHasTracked] = useState4(false);
|
|
332
|
+
useEffect4(() => {
|
|
333
|
+
const urlHasChanged = lastUrl !== currentUrl;
|
|
334
|
+
if (urlHasChanged) {
|
|
335
|
+
setHasTracked(false);
|
|
336
|
+
setLastUrl(currentUrl);
|
|
337
|
+
}
|
|
338
|
+
}, [currentUrl, lastUrl]);
|
|
339
|
+
useEffect4(() => {
|
|
340
|
+
const hasNoBehaviorValue = !behavior || Array.isArray(behavior) && !behavior.length;
|
|
341
|
+
const cannotTrack = insidePersonalizeComponent || hasNoBehaviorValue;
|
|
342
|
+
if (cannotTrack)
|
|
343
|
+
return;
|
|
344
|
+
const pushBehaviorEnrichment = () => {
|
|
345
|
+
if (hasTracked) {
|
|
346
|
+
return;
|
|
347
|
+
}
|
|
348
|
+
const enrichments = Array.isArray(behavior) ? behavior : [behavior];
|
|
349
|
+
context.update({
|
|
350
|
+
enrichments
|
|
351
|
+
});
|
|
352
|
+
setHasTracked(true);
|
|
353
|
+
};
|
|
354
|
+
pushBehaviorEnrichment();
|
|
355
|
+
}, [context, behavior, insidePersonalizeComponent, hasTracked]);
|
|
356
|
+
return /* @__PURE__ */ React7.createElement(React7.Fragment, null, children);
|
|
357
|
+
};
|
|
358
|
+
|
|
359
|
+
// src/components/UniformContext.tsx
|
|
360
|
+
import { SERVER_STATE_ID } from "@uniformdev/context";
|
|
361
|
+
import cookie from "cookie";
|
|
362
|
+
import React8, { useEffect as useEffect5 } from "react";
|
|
363
|
+
var UniformContext = ({
|
|
364
|
+
context,
|
|
365
|
+
children,
|
|
366
|
+
outputType = "standard",
|
|
367
|
+
trackRouteOnRender = true
|
|
368
|
+
}) => {
|
|
369
|
+
useEffect5(() => {
|
|
370
|
+
if (isServer || !trackRouteOnRender) {
|
|
371
|
+
return;
|
|
372
|
+
}
|
|
373
|
+
context.update({
|
|
374
|
+
url: new URL(window.location.href),
|
|
375
|
+
cookies: cookie.parse(document.cookie)
|
|
376
|
+
});
|
|
377
|
+
});
|
|
378
|
+
return /* @__PURE__ */ React8.createElement(UniformContextContext.Provider, { value: { context, outputType } }, children, isServer ? /* @__PURE__ */ React8.createElement(TransferState, null) : null);
|
|
379
|
+
};
|
|
380
|
+
function TransferState() {
|
|
381
|
+
const { context } = useUniformContext();
|
|
382
|
+
const transferState = context.getServerToClientTransitionState();
|
|
383
|
+
return /* @__PURE__ */ React8.createElement(
|
|
384
|
+
"script",
|
|
385
|
+
{
|
|
386
|
+
id: SERVER_STATE_ID,
|
|
387
|
+
type: "application/json",
|
|
388
|
+
dangerouslySetInnerHTML: {
|
|
389
|
+
__html: JSON.stringify(transferState)
|
|
390
|
+
}
|
|
391
|
+
}
|
|
392
|
+
);
|
|
393
|
+
}
|
|
394
|
+
export {
|
|
395
|
+
Personalize,
|
|
396
|
+
Test,
|
|
397
|
+
Track,
|
|
398
|
+
TrackFragment,
|
|
399
|
+
UniformContext,
|
|
400
|
+
useQuirks,
|
|
401
|
+
useScores,
|
|
402
|
+
useUniformContext
|
|
403
|
+
};
|
package/dist/index.js
CHANGED
|
@@ -1 +1,443 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
24
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
25
|
+
|
|
26
|
+
// src/index.ts
|
|
27
|
+
var src_exports = {};
|
|
28
|
+
__export(src_exports, {
|
|
29
|
+
Personalize: () => Personalize,
|
|
30
|
+
Test: () => Test,
|
|
31
|
+
Track: () => Track,
|
|
32
|
+
TrackFragment: () => TrackFragment,
|
|
33
|
+
UniformContext: () => UniformContext,
|
|
34
|
+
useQuirks: () => useQuirks,
|
|
35
|
+
useScores: () => useScores,
|
|
36
|
+
useUniformContext: () => useUniformContext
|
|
37
|
+
});
|
|
38
|
+
module.exports = __toCommonJS(src_exports);
|
|
39
|
+
|
|
40
|
+
// src/hooks/useQuirks.ts
|
|
41
|
+
var import_react = require("react");
|
|
42
|
+
function useQuirks() {
|
|
43
|
+
const { context } = useUniformContext();
|
|
44
|
+
const [quirks, setQuirks] = (0, import_react.useState)(context.quirks);
|
|
45
|
+
const quirkChangeListener = (updatedQuirks) => {
|
|
46
|
+
setQuirks(updatedQuirks);
|
|
47
|
+
};
|
|
48
|
+
(0, import_react.useEffect)(() => {
|
|
49
|
+
context.events.on("quirksUpdated", quirkChangeListener);
|
|
50
|
+
return () => {
|
|
51
|
+
context.events.off("quirksUpdated", quirkChangeListener);
|
|
52
|
+
};
|
|
53
|
+
}, [context]);
|
|
54
|
+
return quirks;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
// src/hooks/useScores.ts
|
|
58
|
+
var import_lite = require("dequal/lite");
|
|
59
|
+
var import_react2 = require("react");
|
|
60
|
+
function useScores() {
|
|
61
|
+
const { context } = useUniformContext();
|
|
62
|
+
const [scores, setScores] = (0, import_react2.useState)(context.scores);
|
|
63
|
+
(0, import_react2.useEffect)(() => {
|
|
64
|
+
const scoringChangeListener = (updatedScores) => {
|
|
65
|
+
setScores(updatedScores);
|
|
66
|
+
};
|
|
67
|
+
const currentScores = context.scores;
|
|
68
|
+
if (!(0, import_lite.dequal)(scores, currentScores)) {
|
|
69
|
+
setScores(currentScores);
|
|
70
|
+
}
|
|
71
|
+
context.events.on("scoresUpdated", scoringChangeListener);
|
|
72
|
+
return () => {
|
|
73
|
+
context.events.off("scoresUpdated", scoringChangeListener);
|
|
74
|
+
};
|
|
75
|
+
}, [context]);
|
|
76
|
+
return scores;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
// src/hooks/useUniformContext.ts
|
|
80
|
+
var import_react4 = require("react");
|
|
81
|
+
|
|
82
|
+
// src/contexts.tsx
|
|
83
|
+
var import_react3 = require("react");
|
|
84
|
+
var UniformContextContext = (0, import_react3.createContext)(void 0);
|
|
85
|
+
var PersonalizationContext = (0, import_react3.createContext)({});
|
|
86
|
+
|
|
87
|
+
// src/hooks/useUniformContext.ts
|
|
88
|
+
function useUniformContext(options = {}) {
|
|
89
|
+
const { throwOnMissingProvider = true } = options;
|
|
90
|
+
const value = (0, import_react4.useContext)(UniformContextContext);
|
|
91
|
+
if (throwOnMissingProvider) {
|
|
92
|
+
if (value === void 0) {
|
|
93
|
+
throw new Error("useUniformContext must be used within a <UniformContext> provider");
|
|
94
|
+
}
|
|
95
|
+
return value;
|
|
96
|
+
}
|
|
97
|
+
return value;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
// src/components/Personalize.tsx
|
|
101
|
+
var import_react8 = __toESM(require("react"));
|
|
102
|
+
|
|
103
|
+
// src/constants.ts
|
|
104
|
+
var isServer = typeof window === "undefined";
|
|
105
|
+
|
|
106
|
+
// src/components/PersonalizeEdge.tsx
|
|
107
|
+
var import_context2 = require("@uniformdev/context");
|
|
108
|
+
var import_react6 = __toESM(require("react"));
|
|
109
|
+
|
|
110
|
+
// src/components/EdgeTag.tsx
|
|
111
|
+
var import_context = require("@uniformdev/context");
|
|
112
|
+
var import_react5 = require("react");
|
|
113
|
+
var EdgeTag = (props) => {
|
|
114
|
+
return (0, import_react5.createElement)(import_context.EdgeNodeTagName, props);
|
|
115
|
+
};
|
|
116
|
+
|
|
117
|
+
// src/components/PersonalizeEdge.tsx
|
|
118
|
+
function PersonalizeEdge(props) {
|
|
119
|
+
const { variations, count, component } = props;
|
|
120
|
+
const options = {
|
|
121
|
+
name: props.name,
|
|
122
|
+
count: count != null ? count : 1
|
|
123
|
+
};
|
|
124
|
+
const Component = component;
|
|
125
|
+
return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, /* @__PURE__ */ import_react6.default.createElement(
|
|
126
|
+
EdgeTag,
|
|
127
|
+
{
|
|
128
|
+
"data-type": import_context2.ScriptType.ListStart,
|
|
129
|
+
dangerouslySetInnerHTML: { __html: JSON.stringify(options) }
|
|
130
|
+
}
|
|
131
|
+
), variations.map((variant) => /* @__PURE__ */ import_react6.default.createElement(import_react6.Fragment, { key: variant.id }, /* @__PURE__ */ import_react6.default.createElement(
|
|
132
|
+
EdgeTag,
|
|
133
|
+
{
|
|
134
|
+
"data-type": import_context2.ScriptType.ListItemSettings,
|
|
135
|
+
dangerouslySetInnerHTML: {
|
|
136
|
+
__html: JSON.stringify({
|
|
137
|
+
id: variant.id,
|
|
138
|
+
pz: variant.pz || null
|
|
139
|
+
})
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
), /* @__PURE__ */ import_react6.default.createElement(EdgeTag, { "data-type": import_context2.ScriptType.ListItem }, /* @__PURE__ */ import_react6.default.createElement(
|
|
143
|
+
Component,
|
|
144
|
+
{
|
|
145
|
+
key: variant.id,
|
|
146
|
+
personalizationResult: { variation: variant, personalizationOccurred: false },
|
|
147
|
+
...variant
|
|
148
|
+
}
|
|
149
|
+
)))), /* @__PURE__ */ import_react6.default.createElement(EdgeTag, { "data-type": import_context2.ScriptType.ListEnd }));
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
// src/components/PersonalizeStandard.tsx
|
|
153
|
+
var import_react7 = __toESM(require("react"));
|
|
154
|
+
function PersonalizeStandard({
|
|
155
|
+
variations,
|
|
156
|
+
component,
|
|
157
|
+
wrapperComponent,
|
|
158
|
+
name,
|
|
159
|
+
count = 1
|
|
160
|
+
}) {
|
|
161
|
+
const { context } = useUniformContext();
|
|
162
|
+
const scores = useScores();
|
|
163
|
+
const { variations: personalizedVariations, personalized: personalizationOccurred } = (0, import_react7.useMemo)(
|
|
164
|
+
() => context.personalize({
|
|
165
|
+
name,
|
|
166
|
+
variations,
|
|
167
|
+
take: count
|
|
168
|
+
}),
|
|
169
|
+
[scores, context, count, name, variations]
|
|
170
|
+
);
|
|
171
|
+
const Wrapper = wrapperComponent != null ? wrapperComponent : ({ children }) => /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, children);
|
|
172
|
+
const Component = component;
|
|
173
|
+
return /* @__PURE__ */ import_react7.default.createElement(PersonalizationContext.Provider, { value: { personalized: true } }, personalizedVariations.length ? /* @__PURE__ */ import_react7.default.createElement(Wrapper, { personalizationOccurred }, personalizedVariations.map((variant) => /* @__PURE__ */ import_react7.default.createElement(
|
|
174
|
+
Component,
|
|
175
|
+
{
|
|
176
|
+
key: variant.id,
|
|
177
|
+
personalizationResult: { variation: variant, personalizationOccurred },
|
|
178
|
+
...variant
|
|
179
|
+
}
|
|
180
|
+
))) : null);
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
// src/components/Personalize.tsx
|
|
184
|
+
function Personalize(props) {
|
|
185
|
+
var _a;
|
|
186
|
+
const { outputType } = (_a = useUniformContext({ throwOnMissingProvider: false })) != null ? _a : {};
|
|
187
|
+
if (!outputType) {
|
|
188
|
+
throw new Error(
|
|
189
|
+
"Using the <Personalize /> component requires the <UniformContext> provider to be present."
|
|
190
|
+
);
|
|
191
|
+
}
|
|
192
|
+
if (!isServer || outputType === "standard") {
|
|
193
|
+
return /* @__PURE__ */ import_react8.default.createElement(PersonalizeStandard, { ...props });
|
|
194
|
+
} else if (outputType === "edge") {
|
|
195
|
+
return /* @__PURE__ */ import_react8.default.createElement(PersonalizeEdge, { ...props });
|
|
196
|
+
}
|
|
197
|
+
return null;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
// src/components/Test.tsx
|
|
201
|
+
var import_react11 = __toESM(require("react"));
|
|
202
|
+
|
|
203
|
+
// src/components/TestEdge.tsx
|
|
204
|
+
var import_context3 = require("@uniformdev/context");
|
|
205
|
+
var import_react9 = __toESM(require("react"));
|
|
206
|
+
function TestEdge(props) {
|
|
207
|
+
const { name, variations, component } = props;
|
|
208
|
+
const options = {
|
|
209
|
+
name
|
|
210
|
+
};
|
|
211
|
+
const Component = component;
|
|
212
|
+
return /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, /* @__PURE__ */ import_react9.default.createElement(
|
|
213
|
+
EdgeTag,
|
|
214
|
+
{
|
|
215
|
+
"data-type": import_context3.ScriptType.TestStart,
|
|
216
|
+
dangerouslySetInnerHTML: { __html: JSON.stringify(options) }
|
|
217
|
+
}
|
|
218
|
+
), variations.map((variation, index) => {
|
|
219
|
+
return /* @__PURE__ */ import_react9.default.createElement(import_react9.Fragment, { key: variation.id }, /* @__PURE__ */ import_react9.default.createElement(
|
|
220
|
+
EdgeTag,
|
|
221
|
+
{
|
|
222
|
+
"data-type": import_context3.ScriptType.ListItemSettings,
|
|
223
|
+
dangerouslySetInnerHTML: {
|
|
224
|
+
__html: JSON.stringify({
|
|
225
|
+
id: variation.id
|
|
226
|
+
})
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
), /* @__PURE__ */ import_react9.default.createElement(EdgeTag, { "data-type": import_context3.ScriptType.ListItem }, /* @__PURE__ */ import_react9.default.createElement(Component, { key: index, ...variation })));
|
|
230
|
+
}), /* @__PURE__ */ import_react9.default.createElement(EdgeTag, { "data-type": import_context3.ScriptType.TestEnd }));
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
// src/components/TestStandard.tsx
|
|
234
|
+
var import_react10 = __toESM(require("react"));
|
|
235
|
+
var TestStandard = ({
|
|
236
|
+
name,
|
|
237
|
+
variations,
|
|
238
|
+
component
|
|
239
|
+
}) => {
|
|
240
|
+
const { context } = useUniformContext();
|
|
241
|
+
const { result } = context.test({
|
|
242
|
+
name,
|
|
243
|
+
variations
|
|
244
|
+
});
|
|
245
|
+
if (!result) {
|
|
246
|
+
return null;
|
|
247
|
+
}
|
|
248
|
+
const Component = component;
|
|
249
|
+
return /* @__PURE__ */ import_react10.default.createElement(Component, { ...result });
|
|
250
|
+
};
|
|
251
|
+
|
|
252
|
+
// src/components/Test.tsx
|
|
253
|
+
var Test = (props) => {
|
|
254
|
+
var _a;
|
|
255
|
+
const { outputType } = (_a = useUniformContext({ throwOnMissingProvider: false })) != null ? _a : {};
|
|
256
|
+
if (!outputType) {
|
|
257
|
+
throw new Error("Using the <Test /> component requires the <UniformContext> provider to be present.");
|
|
258
|
+
}
|
|
259
|
+
if (!isServer || outputType === "standard") {
|
|
260
|
+
return /* @__PURE__ */ import_react11.default.createElement(TestStandard, { ...props });
|
|
261
|
+
} else if (outputType === "edge") {
|
|
262
|
+
return /* @__PURE__ */ import_react11.default.createElement(TestEdge, { ...props });
|
|
263
|
+
}
|
|
264
|
+
return null;
|
|
265
|
+
};
|
|
266
|
+
|
|
267
|
+
// src/components/Track.tsx
|
|
268
|
+
var import_react13 = require("react");
|
|
269
|
+
|
|
270
|
+
// src/hooks/useIsPersonalized.ts
|
|
271
|
+
var import_react12 = require("react");
|
|
272
|
+
var useIsPersonalized = (options) => {
|
|
273
|
+
const { personalized } = (0, import_react12.useContext)(PersonalizationContext);
|
|
274
|
+
if (typeof personalized !== "undefined") {
|
|
275
|
+
return personalized;
|
|
276
|
+
}
|
|
277
|
+
if (typeof (options == null ? void 0 : options.personalized) !== "undefined") {
|
|
278
|
+
return options.personalized;
|
|
279
|
+
}
|
|
280
|
+
return false;
|
|
281
|
+
};
|
|
282
|
+
|
|
283
|
+
// src/components/Track.tsx
|
|
284
|
+
var Track = ({
|
|
285
|
+
behavior,
|
|
286
|
+
children,
|
|
287
|
+
tagName = "div",
|
|
288
|
+
threshold = 0.5,
|
|
289
|
+
disableVisibilityTrigger = typeof window === "undefined" || !("IntersectionObserver" in window),
|
|
290
|
+
...rest
|
|
291
|
+
}) => {
|
|
292
|
+
const currentUrl = typeof document === "undefined" ? "__uniform_ssr_url" : document.location.href;
|
|
293
|
+
const { context } = useUniformContext();
|
|
294
|
+
const insidePersonalizeComponent = useIsPersonalized();
|
|
295
|
+
const [lastUrl, setLastUrl] = (0, import_react13.useState)();
|
|
296
|
+
const [hasTracked, setHasTracked] = (0, import_react13.useState)(false);
|
|
297
|
+
const wrapperEl = (0, import_react13.useRef)(null);
|
|
298
|
+
const disconnect = (0, import_react13.useRef)();
|
|
299
|
+
(0, import_react13.useEffect)(() => {
|
|
300
|
+
const urlHasChanged = lastUrl !== currentUrl;
|
|
301
|
+
if (urlHasChanged) {
|
|
302
|
+
setHasTracked(false);
|
|
303
|
+
setLastUrl(currentUrl);
|
|
304
|
+
}
|
|
305
|
+
}, [currentUrl, lastUrl]);
|
|
306
|
+
(0, import_react13.useEffect)(() => {
|
|
307
|
+
var _a;
|
|
308
|
+
const hasNoBehaviorValue = !behavior || Array.isArray(behavior) && !behavior.length;
|
|
309
|
+
const cannotTrack = insidePersonalizeComponent || hasNoBehaviorValue;
|
|
310
|
+
if (cannotTrack || !wrapperEl.current)
|
|
311
|
+
return;
|
|
312
|
+
const enrichments = Array.isArray(behavior) ? behavior : [behavior];
|
|
313
|
+
const pushBehaviorEnrichment = () => {
|
|
314
|
+
var _a2;
|
|
315
|
+
if (hasTracked) {
|
|
316
|
+
return;
|
|
317
|
+
}
|
|
318
|
+
context.update({
|
|
319
|
+
enrichments
|
|
320
|
+
});
|
|
321
|
+
setHasTracked(true);
|
|
322
|
+
(_a2 = disconnect.current) == null ? void 0 : _a2.call(disconnect);
|
|
323
|
+
};
|
|
324
|
+
if (disableVisibilityTrigger) {
|
|
325
|
+
pushBehaviorEnrichment();
|
|
326
|
+
} else {
|
|
327
|
+
(_a = disconnect.current) == null ? void 0 : _a.call(disconnect);
|
|
328
|
+
const instance = new IntersectionObserver(
|
|
329
|
+
([entry]) => {
|
|
330
|
+
if (entry.isIntersecting) {
|
|
331
|
+
pushBehaviorEnrichment();
|
|
332
|
+
}
|
|
333
|
+
},
|
|
334
|
+
{
|
|
335
|
+
threshold
|
|
336
|
+
}
|
|
337
|
+
);
|
|
338
|
+
instance.observe(wrapperEl.current);
|
|
339
|
+
disconnect.current = () => {
|
|
340
|
+
var _a2;
|
|
341
|
+
return (_a2 = instance.disconnect) == null ? void 0 : _a2.call(instance);
|
|
342
|
+
};
|
|
343
|
+
}
|
|
344
|
+
return () => {
|
|
345
|
+
var _a2;
|
|
346
|
+
(_a2 = disconnect.current) == null ? void 0 : _a2.call(disconnect);
|
|
347
|
+
};
|
|
348
|
+
}, [
|
|
349
|
+
context,
|
|
350
|
+
behavior,
|
|
351
|
+
disableVisibilityTrigger,
|
|
352
|
+
threshold,
|
|
353
|
+
insidePersonalizeComponent,
|
|
354
|
+
lastUrl,
|
|
355
|
+
currentUrl,
|
|
356
|
+
hasTracked
|
|
357
|
+
]);
|
|
358
|
+
const element = (0, import_react13.createElement)(tagName, { ...rest, ref: wrapperEl }, children);
|
|
359
|
+
return element;
|
|
360
|
+
};
|
|
361
|
+
|
|
362
|
+
// src/components/TrackFragment.tsx
|
|
363
|
+
var import_react14 = __toESM(require("react"));
|
|
364
|
+
var import_react15 = require("react");
|
|
365
|
+
var TrackFragment = ({ behavior, children }) => {
|
|
366
|
+
const currentUrl = typeof document === "undefined" ? "__uniform_ssr_url" : document.location.href;
|
|
367
|
+
const { context } = useUniformContext();
|
|
368
|
+
const insidePersonalizeComponent = useIsPersonalized();
|
|
369
|
+
const [lastUrl, setLastUrl] = (0, import_react15.useState)();
|
|
370
|
+
const [hasTracked, setHasTracked] = (0, import_react15.useState)(false);
|
|
371
|
+
(0, import_react15.useEffect)(() => {
|
|
372
|
+
const urlHasChanged = lastUrl !== currentUrl;
|
|
373
|
+
if (urlHasChanged) {
|
|
374
|
+
setHasTracked(false);
|
|
375
|
+
setLastUrl(currentUrl);
|
|
376
|
+
}
|
|
377
|
+
}, [currentUrl, lastUrl]);
|
|
378
|
+
(0, import_react15.useEffect)(() => {
|
|
379
|
+
const hasNoBehaviorValue = !behavior || Array.isArray(behavior) && !behavior.length;
|
|
380
|
+
const cannotTrack = insidePersonalizeComponent || hasNoBehaviorValue;
|
|
381
|
+
if (cannotTrack)
|
|
382
|
+
return;
|
|
383
|
+
const pushBehaviorEnrichment = () => {
|
|
384
|
+
if (hasTracked) {
|
|
385
|
+
return;
|
|
386
|
+
}
|
|
387
|
+
const enrichments = Array.isArray(behavior) ? behavior : [behavior];
|
|
388
|
+
context.update({
|
|
389
|
+
enrichments
|
|
390
|
+
});
|
|
391
|
+
setHasTracked(true);
|
|
392
|
+
};
|
|
393
|
+
pushBehaviorEnrichment();
|
|
394
|
+
}, [context, behavior, insidePersonalizeComponent, hasTracked]);
|
|
395
|
+
return /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, children);
|
|
396
|
+
};
|
|
397
|
+
|
|
398
|
+
// src/components/UniformContext.tsx
|
|
399
|
+
var import_context4 = require("@uniformdev/context");
|
|
400
|
+
var import_cookie = __toESM(require("cookie"));
|
|
401
|
+
var import_react16 = __toESM(require("react"));
|
|
402
|
+
var UniformContext = ({
|
|
403
|
+
context,
|
|
404
|
+
children,
|
|
405
|
+
outputType = "standard",
|
|
406
|
+
trackRouteOnRender = true
|
|
407
|
+
}) => {
|
|
408
|
+
(0, import_react16.useEffect)(() => {
|
|
409
|
+
if (isServer || !trackRouteOnRender) {
|
|
410
|
+
return;
|
|
411
|
+
}
|
|
412
|
+
context.update({
|
|
413
|
+
url: new URL(window.location.href),
|
|
414
|
+
cookies: import_cookie.default.parse(document.cookie)
|
|
415
|
+
});
|
|
416
|
+
});
|
|
417
|
+
return /* @__PURE__ */ import_react16.default.createElement(UniformContextContext.Provider, { value: { context, outputType } }, children, isServer ? /* @__PURE__ */ import_react16.default.createElement(TransferState, null) : null);
|
|
418
|
+
};
|
|
419
|
+
function TransferState() {
|
|
420
|
+
const { context } = useUniformContext();
|
|
421
|
+
const transferState = context.getServerToClientTransitionState();
|
|
422
|
+
return /* @__PURE__ */ import_react16.default.createElement(
|
|
423
|
+
"script",
|
|
424
|
+
{
|
|
425
|
+
id: import_context4.SERVER_STATE_ID,
|
|
426
|
+
type: "application/json",
|
|
427
|
+
dangerouslySetInnerHTML: {
|
|
428
|
+
__html: JSON.stringify(transferState)
|
|
429
|
+
}
|
|
430
|
+
}
|
|
431
|
+
);
|
|
432
|
+
}
|
|
433
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
434
|
+
0 && (module.exports = {
|
|
435
|
+
Personalize,
|
|
436
|
+
Test,
|
|
437
|
+
Track,
|
|
438
|
+
TrackFragment,
|
|
439
|
+
UniformContext,
|
|
440
|
+
useQuirks,
|
|
441
|
+
useScores,
|
|
442
|
+
useUniformContext
|
|
443
|
+
});
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1,403 @@
|
|
|
1
|
-
|
|
1
|
+
// src/hooks/useQuirks.ts
|
|
2
|
+
import { useEffect, useState } from "react";
|
|
3
|
+
function useQuirks() {
|
|
4
|
+
const { context } = useUniformContext();
|
|
5
|
+
const [quirks, setQuirks] = useState(context.quirks);
|
|
6
|
+
const quirkChangeListener = (updatedQuirks) => {
|
|
7
|
+
setQuirks(updatedQuirks);
|
|
8
|
+
};
|
|
9
|
+
useEffect(() => {
|
|
10
|
+
context.events.on("quirksUpdated", quirkChangeListener);
|
|
11
|
+
return () => {
|
|
12
|
+
context.events.off("quirksUpdated", quirkChangeListener);
|
|
13
|
+
};
|
|
14
|
+
}, [context]);
|
|
15
|
+
return quirks;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
// src/hooks/useScores.ts
|
|
19
|
+
import { dequal } from "dequal/lite";
|
|
20
|
+
import { useEffect as useEffect2, useState as useState2 } from "react";
|
|
21
|
+
function useScores() {
|
|
22
|
+
const { context } = useUniformContext();
|
|
23
|
+
const [scores, setScores] = useState2(context.scores);
|
|
24
|
+
useEffect2(() => {
|
|
25
|
+
const scoringChangeListener = (updatedScores) => {
|
|
26
|
+
setScores(updatedScores);
|
|
27
|
+
};
|
|
28
|
+
const currentScores = context.scores;
|
|
29
|
+
if (!dequal(scores, currentScores)) {
|
|
30
|
+
setScores(currentScores);
|
|
31
|
+
}
|
|
32
|
+
context.events.on("scoresUpdated", scoringChangeListener);
|
|
33
|
+
return () => {
|
|
34
|
+
context.events.off("scoresUpdated", scoringChangeListener);
|
|
35
|
+
};
|
|
36
|
+
}, [context]);
|
|
37
|
+
return scores;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
// src/hooks/useUniformContext.ts
|
|
41
|
+
import { useContext } from "react";
|
|
42
|
+
|
|
43
|
+
// src/contexts.tsx
|
|
44
|
+
import { createContext } from "react";
|
|
45
|
+
var UniformContextContext = createContext(void 0);
|
|
46
|
+
var PersonalizationContext = createContext({});
|
|
47
|
+
|
|
48
|
+
// src/hooks/useUniformContext.ts
|
|
49
|
+
function useUniformContext(options = {}) {
|
|
50
|
+
const { throwOnMissingProvider = true } = options;
|
|
51
|
+
const value = useContext(UniformContextContext);
|
|
52
|
+
if (throwOnMissingProvider) {
|
|
53
|
+
if (value === void 0) {
|
|
54
|
+
throw new Error("useUniformContext must be used within a <UniformContext> provider");
|
|
55
|
+
}
|
|
56
|
+
return value;
|
|
57
|
+
}
|
|
58
|
+
return value;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
// src/components/Personalize.tsx
|
|
62
|
+
import React3 from "react";
|
|
63
|
+
|
|
64
|
+
// src/constants.ts
|
|
65
|
+
var isServer = typeof window === "undefined";
|
|
66
|
+
|
|
67
|
+
// src/components/PersonalizeEdge.tsx
|
|
68
|
+
import { ScriptType } from "@uniformdev/context";
|
|
69
|
+
import React, { Fragment } from "react";
|
|
70
|
+
|
|
71
|
+
// src/components/EdgeTag.tsx
|
|
72
|
+
import { EdgeNodeTagName } from "@uniformdev/context";
|
|
73
|
+
import { createElement } from "react";
|
|
74
|
+
var EdgeTag = (props) => {
|
|
75
|
+
return createElement(EdgeNodeTagName, props);
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
// src/components/PersonalizeEdge.tsx
|
|
79
|
+
function PersonalizeEdge(props) {
|
|
80
|
+
const { variations, count, component } = props;
|
|
81
|
+
const options = {
|
|
82
|
+
name: props.name,
|
|
83
|
+
count: count != null ? count : 1
|
|
84
|
+
};
|
|
85
|
+
const Component = component;
|
|
86
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
|
|
87
|
+
EdgeTag,
|
|
88
|
+
{
|
|
89
|
+
"data-type": ScriptType.ListStart,
|
|
90
|
+
dangerouslySetInnerHTML: { __html: JSON.stringify(options) }
|
|
91
|
+
}
|
|
92
|
+
), variations.map((variant) => /* @__PURE__ */ React.createElement(Fragment, { key: variant.id }, /* @__PURE__ */ React.createElement(
|
|
93
|
+
EdgeTag,
|
|
94
|
+
{
|
|
95
|
+
"data-type": ScriptType.ListItemSettings,
|
|
96
|
+
dangerouslySetInnerHTML: {
|
|
97
|
+
__html: JSON.stringify({
|
|
98
|
+
id: variant.id,
|
|
99
|
+
pz: variant.pz || null
|
|
100
|
+
})
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
), /* @__PURE__ */ React.createElement(EdgeTag, { "data-type": ScriptType.ListItem }, /* @__PURE__ */ React.createElement(
|
|
104
|
+
Component,
|
|
105
|
+
{
|
|
106
|
+
key: variant.id,
|
|
107
|
+
personalizationResult: { variation: variant, personalizationOccurred: false },
|
|
108
|
+
...variant
|
|
109
|
+
}
|
|
110
|
+
)))), /* @__PURE__ */ React.createElement(EdgeTag, { "data-type": ScriptType.ListEnd }));
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
// src/components/PersonalizeStandard.tsx
|
|
114
|
+
import React2, { useMemo } from "react";
|
|
115
|
+
function PersonalizeStandard({
|
|
116
|
+
variations,
|
|
117
|
+
component,
|
|
118
|
+
wrapperComponent,
|
|
119
|
+
name,
|
|
120
|
+
count = 1
|
|
121
|
+
}) {
|
|
122
|
+
const { context } = useUniformContext();
|
|
123
|
+
const scores = useScores();
|
|
124
|
+
const { variations: personalizedVariations, personalized: personalizationOccurred } = useMemo(
|
|
125
|
+
() => context.personalize({
|
|
126
|
+
name,
|
|
127
|
+
variations,
|
|
128
|
+
take: count
|
|
129
|
+
}),
|
|
130
|
+
[scores, context, count, name, variations]
|
|
131
|
+
);
|
|
132
|
+
const Wrapper = wrapperComponent != null ? wrapperComponent : ({ children }) => /* @__PURE__ */ React2.createElement(React2.Fragment, null, children);
|
|
133
|
+
const Component = component;
|
|
134
|
+
return /* @__PURE__ */ React2.createElement(PersonalizationContext.Provider, { value: { personalized: true } }, personalizedVariations.length ? /* @__PURE__ */ React2.createElement(Wrapper, { personalizationOccurred }, personalizedVariations.map((variant) => /* @__PURE__ */ React2.createElement(
|
|
135
|
+
Component,
|
|
136
|
+
{
|
|
137
|
+
key: variant.id,
|
|
138
|
+
personalizationResult: { variation: variant, personalizationOccurred },
|
|
139
|
+
...variant
|
|
140
|
+
}
|
|
141
|
+
))) : null);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
// src/components/Personalize.tsx
|
|
145
|
+
function Personalize(props) {
|
|
146
|
+
var _a;
|
|
147
|
+
const { outputType } = (_a = useUniformContext({ throwOnMissingProvider: false })) != null ? _a : {};
|
|
148
|
+
if (!outputType) {
|
|
149
|
+
throw new Error(
|
|
150
|
+
"Using the <Personalize /> component requires the <UniformContext> provider to be present."
|
|
151
|
+
);
|
|
152
|
+
}
|
|
153
|
+
if (!isServer || outputType === "standard") {
|
|
154
|
+
return /* @__PURE__ */ React3.createElement(PersonalizeStandard, { ...props });
|
|
155
|
+
} else if (outputType === "edge") {
|
|
156
|
+
return /* @__PURE__ */ React3.createElement(PersonalizeEdge, { ...props });
|
|
157
|
+
}
|
|
158
|
+
return null;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
// src/components/Test.tsx
|
|
162
|
+
import React6 from "react";
|
|
163
|
+
|
|
164
|
+
// src/components/TestEdge.tsx
|
|
165
|
+
import { ScriptType as ScriptType2 } from "@uniformdev/context";
|
|
166
|
+
import React4, { Fragment as Fragment2 } from "react";
|
|
167
|
+
function TestEdge(props) {
|
|
168
|
+
const { name, variations, component } = props;
|
|
169
|
+
const options = {
|
|
170
|
+
name
|
|
171
|
+
};
|
|
172
|
+
const Component = component;
|
|
173
|
+
return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(
|
|
174
|
+
EdgeTag,
|
|
175
|
+
{
|
|
176
|
+
"data-type": ScriptType2.TestStart,
|
|
177
|
+
dangerouslySetInnerHTML: { __html: JSON.stringify(options) }
|
|
178
|
+
}
|
|
179
|
+
), variations.map((variation, index) => {
|
|
180
|
+
return /* @__PURE__ */ React4.createElement(Fragment2, { key: variation.id }, /* @__PURE__ */ React4.createElement(
|
|
181
|
+
EdgeTag,
|
|
182
|
+
{
|
|
183
|
+
"data-type": ScriptType2.ListItemSettings,
|
|
184
|
+
dangerouslySetInnerHTML: {
|
|
185
|
+
__html: JSON.stringify({
|
|
186
|
+
id: variation.id
|
|
187
|
+
})
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
), /* @__PURE__ */ React4.createElement(EdgeTag, { "data-type": ScriptType2.ListItem }, /* @__PURE__ */ React4.createElement(Component, { key: index, ...variation })));
|
|
191
|
+
}), /* @__PURE__ */ React4.createElement(EdgeTag, { "data-type": ScriptType2.TestEnd }));
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
// src/components/TestStandard.tsx
|
|
195
|
+
import React5 from "react";
|
|
196
|
+
var TestStandard = ({
|
|
197
|
+
name,
|
|
198
|
+
variations,
|
|
199
|
+
component
|
|
200
|
+
}) => {
|
|
201
|
+
const { context } = useUniformContext();
|
|
202
|
+
const { result } = context.test({
|
|
203
|
+
name,
|
|
204
|
+
variations
|
|
205
|
+
});
|
|
206
|
+
if (!result) {
|
|
207
|
+
return null;
|
|
208
|
+
}
|
|
209
|
+
const Component = component;
|
|
210
|
+
return /* @__PURE__ */ React5.createElement(Component, { ...result });
|
|
211
|
+
};
|
|
212
|
+
|
|
213
|
+
// src/components/Test.tsx
|
|
214
|
+
var Test = (props) => {
|
|
215
|
+
var _a;
|
|
216
|
+
const { outputType } = (_a = useUniformContext({ throwOnMissingProvider: false })) != null ? _a : {};
|
|
217
|
+
if (!outputType) {
|
|
218
|
+
throw new Error("Using the <Test /> component requires the <UniformContext> provider to be present.");
|
|
219
|
+
}
|
|
220
|
+
if (!isServer || outputType === "standard") {
|
|
221
|
+
return /* @__PURE__ */ React6.createElement(TestStandard, { ...props });
|
|
222
|
+
} else if (outputType === "edge") {
|
|
223
|
+
return /* @__PURE__ */ React6.createElement(TestEdge, { ...props });
|
|
224
|
+
}
|
|
225
|
+
return null;
|
|
226
|
+
};
|
|
227
|
+
|
|
228
|
+
// src/components/Track.tsx
|
|
229
|
+
import { createElement as createElement2, useEffect as useEffect3, useRef, useState as useState3 } from "react";
|
|
230
|
+
|
|
231
|
+
// src/hooks/useIsPersonalized.ts
|
|
232
|
+
import { useContext as useContext2 } from "react";
|
|
233
|
+
var useIsPersonalized = (options) => {
|
|
234
|
+
const { personalized } = useContext2(PersonalizationContext);
|
|
235
|
+
if (typeof personalized !== "undefined") {
|
|
236
|
+
return personalized;
|
|
237
|
+
}
|
|
238
|
+
if (typeof (options == null ? void 0 : options.personalized) !== "undefined") {
|
|
239
|
+
return options.personalized;
|
|
240
|
+
}
|
|
241
|
+
return false;
|
|
242
|
+
};
|
|
243
|
+
|
|
244
|
+
// src/components/Track.tsx
|
|
245
|
+
var Track = ({
|
|
246
|
+
behavior,
|
|
247
|
+
children,
|
|
248
|
+
tagName = "div",
|
|
249
|
+
threshold = 0.5,
|
|
250
|
+
disableVisibilityTrigger = typeof window === "undefined" || !("IntersectionObserver" in window),
|
|
251
|
+
...rest
|
|
252
|
+
}) => {
|
|
253
|
+
const currentUrl = typeof document === "undefined" ? "__uniform_ssr_url" : document.location.href;
|
|
254
|
+
const { context } = useUniformContext();
|
|
255
|
+
const insidePersonalizeComponent = useIsPersonalized();
|
|
256
|
+
const [lastUrl, setLastUrl] = useState3();
|
|
257
|
+
const [hasTracked, setHasTracked] = useState3(false);
|
|
258
|
+
const wrapperEl = useRef(null);
|
|
259
|
+
const disconnect = useRef();
|
|
260
|
+
useEffect3(() => {
|
|
261
|
+
const urlHasChanged = lastUrl !== currentUrl;
|
|
262
|
+
if (urlHasChanged) {
|
|
263
|
+
setHasTracked(false);
|
|
264
|
+
setLastUrl(currentUrl);
|
|
265
|
+
}
|
|
266
|
+
}, [currentUrl, lastUrl]);
|
|
267
|
+
useEffect3(() => {
|
|
268
|
+
var _a;
|
|
269
|
+
const hasNoBehaviorValue = !behavior || Array.isArray(behavior) && !behavior.length;
|
|
270
|
+
const cannotTrack = insidePersonalizeComponent || hasNoBehaviorValue;
|
|
271
|
+
if (cannotTrack || !wrapperEl.current)
|
|
272
|
+
return;
|
|
273
|
+
const enrichments = Array.isArray(behavior) ? behavior : [behavior];
|
|
274
|
+
const pushBehaviorEnrichment = () => {
|
|
275
|
+
var _a2;
|
|
276
|
+
if (hasTracked) {
|
|
277
|
+
return;
|
|
278
|
+
}
|
|
279
|
+
context.update({
|
|
280
|
+
enrichments
|
|
281
|
+
});
|
|
282
|
+
setHasTracked(true);
|
|
283
|
+
(_a2 = disconnect.current) == null ? void 0 : _a2.call(disconnect);
|
|
284
|
+
};
|
|
285
|
+
if (disableVisibilityTrigger) {
|
|
286
|
+
pushBehaviorEnrichment();
|
|
287
|
+
} else {
|
|
288
|
+
(_a = disconnect.current) == null ? void 0 : _a.call(disconnect);
|
|
289
|
+
const instance = new IntersectionObserver(
|
|
290
|
+
([entry]) => {
|
|
291
|
+
if (entry.isIntersecting) {
|
|
292
|
+
pushBehaviorEnrichment();
|
|
293
|
+
}
|
|
294
|
+
},
|
|
295
|
+
{
|
|
296
|
+
threshold
|
|
297
|
+
}
|
|
298
|
+
);
|
|
299
|
+
instance.observe(wrapperEl.current);
|
|
300
|
+
disconnect.current = () => {
|
|
301
|
+
var _a2;
|
|
302
|
+
return (_a2 = instance.disconnect) == null ? void 0 : _a2.call(instance);
|
|
303
|
+
};
|
|
304
|
+
}
|
|
305
|
+
return () => {
|
|
306
|
+
var _a2;
|
|
307
|
+
(_a2 = disconnect.current) == null ? void 0 : _a2.call(disconnect);
|
|
308
|
+
};
|
|
309
|
+
}, [
|
|
310
|
+
context,
|
|
311
|
+
behavior,
|
|
312
|
+
disableVisibilityTrigger,
|
|
313
|
+
threshold,
|
|
314
|
+
insidePersonalizeComponent,
|
|
315
|
+
lastUrl,
|
|
316
|
+
currentUrl,
|
|
317
|
+
hasTracked
|
|
318
|
+
]);
|
|
319
|
+
const element = createElement2(tagName, { ...rest, ref: wrapperEl }, children);
|
|
320
|
+
return element;
|
|
321
|
+
};
|
|
322
|
+
|
|
323
|
+
// src/components/TrackFragment.tsx
|
|
324
|
+
import React7 from "react";
|
|
325
|
+
import { useEffect as useEffect4, useState as useState4 } from "react";
|
|
326
|
+
var TrackFragment = ({ behavior, children }) => {
|
|
327
|
+
const currentUrl = typeof document === "undefined" ? "__uniform_ssr_url" : document.location.href;
|
|
328
|
+
const { context } = useUniformContext();
|
|
329
|
+
const insidePersonalizeComponent = useIsPersonalized();
|
|
330
|
+
const [lastUrl, setLastUrl] = useState4();
|
|
331
|
+
const [hasTracked, setHasTracked] = useState4(false);
|
|
332
|
+
useEffect4(() => {
|
|
333
|
+
const urlHasChanged = lastUrl !== currentUrl;
|
|
334
|
+
if (urlHasChanged) {
|
|
335
|
+
setHasTracked(false);
|
|
336
|
+
setLastUrl(currentUrl);
|
|
337
|
+
}
|
|
338
|
+
}, [currentUrl, lastUrl]);
|
|
339
|
+
useEffect4(() => {
|
|
340
|
+
const hasNoBehaviorValue = !behavior || Array.isArray(behavior) && !behavior.length;
|
|
341
|
+
const cannotTrack = insidePersonalizeComponent || hasNoBehaviorValue;
|
|
342
|
+
if (cannotTrack)
|
|
343
|
+
return;
|
|
344
|
+
const pushBehaviorEnrichment = () => {
|
|
345
|
+
if (hasTracked) {
|
|
346
|
+
return;
|
|
347
|
+
}
|
|
348
|
+
const enrichments = Array.isArray(behavior) ? behavior : [behavior];
|
|
349
|
+
context.update({
|
|
350
|
+
enrichments
|
|
351
|
+
});
|
|
352
|
+
setHasTracked(true);
|
|
353
|
+
};
|
|
354
|
+
pushBehaviorEnrichment();
|
|
355
|
+
}, [context, behavior, insidePersonalizeComponent, hasTracked]);
|
|
356
|
+
return /* @__PURE__ */ React7.createElement(React7.Fragment, null, children);
|
|
357
|
+
};
|
|
358
|
+
|
|
359
|
+
// src/components/UniformContext.tsx
|
|
360
|
+
import { SERVER_STATE_ID } from "@uniformdev/context";
|
|
361
|
+
import cookie from "cookie";
|
|
362
|
+
import React8, { useEffect as useEffect5 } from "react";
|
|
363
|
+
var UniformContext = ({
|
|
364
|
+
context,
|
|
365
|
+
children,
|
|
366
|
+
outputType = "standard",
|
|
367
|
+
trackRouteOnRender = true
|
|
368
|
+
}) => {
|
|
369
|
+
useEffect5(() => {
|
|
370
|
+
if (isServer || !trackRouteOnRender) {
|
|
371
|
+
return;
|
|
372
|
+
}
|
|
373
|
+
context.update({
|
|
374
|
+
url: new URL(window.location.href),
|
|
375
|
+
cookies: cookie.parse(document.cookie)
|
|
376
|
+
});
|
|
377
|
+
});
|
|
378
|
+
return /* @__PURE__ */ React8.createElement(UniformContextContext.Provider, { value: { context, outputType } }, children, isServer ? /* @__PURE__ */ React8.createElement(TransferState, null) : null);
|
|
379
|
+
};
|
|
380
|
+
function TransferState() {
|
|
381
|
+
const { context } = useUniformContext();
|
|
382
|
+
const transferState = context.getServerToClientTransitionState();
|
|
383
|
+
return /* @__PURE__ */ React8.createElement(
|
|
384
|
+
"script",
|
|
385
|
+
{
|
|
386
|
+
id: SERVER_STATE_ID,
|
|
387
|
+
type: "application/json",
|
|
388
|
+
dangerouslySetInnerHTML: {
|
|
389
|
+
__html: JSON.stringify(transferState)
|
|
390
|
+
}
|
|
391
|
+
}
|
|
392
|
+
);
|
|
393
|
+
}
|
|
394
|
+
export {
|
|
395
|
+
Personalize,
|
|
396
|
+
Test,
|
|
397
|
+
Track,
|
|
398
|
+
TrackFragment,
|
|
399
|
+
UniformContext,
|
|
400
|
+
useQuirks,
|
|
401
|
+
useScores,
|
|
402
|
+
useUniformContext
|
|
403
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uniformdev/context-react",
|
|
3
|
-
"version": "17.7.1-alpha.
|
|
3
|
+
"version": "17.7.1-alpha.169+522807b78",
|
|
4
4
|
"description": "Uniform Context React integration package",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
"types": "./dist/index.d.ts",
|
|
16
16
|
"sideEffects": false,
|
|
17
17
|
"scripts": {
|
|
18
|
-
"build": "tsup
|
|
18
|
+
"build": "tsup",
|
|
19
19
|
"dev": "tsup --watch",
|
|
20
20
|
"clean": "rimraf dist",
|
|
21
21
|
"test": "jest --maxWorkers=1",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"react-dom": "18.2.0"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@uniformdev/context": "^17.7.1-alpha.
|
|
32
|
+
"@uniformdev/context": "^17.7.1-alpha.169+522807b78",
|
|
33
33
|
"cookie": "0.5.0",
|
|
34
34
|
"dequal": "2.0.3"
|
|
35
35
|
},
|
|
@@ -43,5 +43,5 @@
|
|
|
43
43
|
"publishConfig": {
|
|
44
44
|
"access": "public"
|
|
45
45
|
},
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "522807b78c5e15b076bd07b4a1a4124de07dcb5b"
|
|
47
47
|
}
|