@ninetailed/experience.js-react 7.5.2 → 7.5.3-beta.2
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/index.cjs.d.ts +1 -0
- package/{index.cjs → index.cjs.js} +22 -4
- package/{index.js → index.esm.js} +121 -113
- package/package.json +18 -12
- package/src/lib/Experience/ComponentMarker.d.ts +5 -1
- package/src/lib/Experience/ESRLoadingComponent.d.ts +1 -1
- package/src/lib/Experience/Experience.d.ts +1 -1
- package/src/lib/MergeTag/MergeTag.d.ts +1 -1
- package/src/lib/NinetailedProvider.d.ts +1 -1
- package/src/lib/Personalize.d.ts +1 -1
package/index.cjs.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./src/index";
|
|
@@ -380,7 +380,9 @@ const useExperience = ({
|
|
|
380
380
|
}));
|
|
381
381
|
};
|
|
382
382
|
|
|
383
|
-
const ComponentMarker = /*#__PURE__*/React.forwardRef((
|
|
383
|
+
const ComponentMarker = /*#__PURE__*/React.forwardRef(({
|
|
384
|
+
hidden: _hidden = false
|
|
385
|
+
}, ref) => {
|
|
384
386
|
const {
|
|
385
387
|
logger
|
|
386
388
|
} = useNinetailed();
|
|
@@ -398,7 +400,7 @@ const ComponentMarker = /*#__PURE__*/React.forwardRef((_, ref) => {
|
|
|
398
400
|
}, [logger]);
|
|
399
401
|
React.useEffect(() => {
|
|
400
402
|
if (markerRef.current) {
|
|
401
|
-
const nextSibling = markerRef.current
|
|
403
|
+
const nextSibling = getNextSibling(markerRef.current, _hidden);
|
|
402
404
|
if (ref) {
|
|
403
405
|
if (typeof ref === 'function') {
|
|
404
406
|
ref(nextSibling);
|
|
@@ -407,7 +409,7 @@ const ComponentMarker = /*#__PURE__*/React.forwardRef((_, ref) => {
|
|
|
407
409
|
}
|
|
408
410
|
}
|
|
409
411
|
}
|
|
410
|
-
}, []);
|
|
412
|
+
}, [_hidden]);
|
|
411
413
|
return jsxRuntime.jsx("div", {
|
|
412
414
|
className: "nt-cmp-marker",
|
|
413
415
|
style: {
|
|
@@ -416,6 +418,21 @@ const ComponentMarker = /*#__PURE__*/React.forwardRef((_, ref) => {
|
|
|
416
418
|
ref: markerRef
|
|
417
419
|
});
|
|
418
420
|
});
|
|
421
|
+
const getNextSibling = (element, recursive = false) => {
|
|
422
|
+
if (!recursive) {
|
|
423
|
+
return element.nextSibling;
|
|
424
|
+
}
|
|
425
|
+
const {
|
|
426
|
+
parentElement
|
|
427
|
+
} = element;
|
|
428
|
+
if (!parentElement) {
|
|
429
|
+
return null;
|
|
430
|
+
}
|
|
431
|
+
if (parentElement.nextSibling) {
|
|
432
|
+
return parentElement.nextSibling;
|
|
433
|
+
}
|
|
434
|
+
return getNextSibling(parentElement, true);
|
|
435
|
+
};
|
|
419
436
|
|
|
420
437
|
const DefaultExperienceLoadingComponent = _a => {
|
|
421
438
|
var {
|
|
@@ -542,7 +559,8 @@ const Experience = _a => {
|
|
|
542
559
|
const isVariantHidden = 'hidden' in variant && variant.hidden;
|
|
543
560
|
if (isVariantHidden) {
|
|
544
561
|
return jsxRuntime.jsx(ComponentMarker, {
|
|
545
|
-
ref: componentRef
|
|
562
|
+
ref: componentRef,
|
|
563
|
+
hidden: true
|
|
546
564
|
}, `marker-hidden-${(experience === null || experience === void 0 ? void 0 : experience.id) || 'baseline'}-${variant.id}`);
|
|
547
565
|
}
|
|
548
566
|
return jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
1
|
import React, { createContext, useMemo, useContext, useState, useRef, useEffect, createElement, forwardRef } from 'react';
|
|
3
2
|
import { Ninetailed, selectVariant, makeExperienceSelectMiddleware, selectHasExperienceVariants, selectExperience, selectExperienceVariant } from '@ninetailed/experience.js';
|
|
3
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
4
4
|
import { logger, isBrowser } from '@ninetailed/experience.js-shared';
|
|
5
5
|
import { isEqual, get } from 'radash';
|
|
6
6
|
import { useInView } from 'react-intersection-observer';
|
|
@@ -48,11 +48,10 @@ const NinetailedProvider = props => {
|
|
|
48
48
|
const {
|
|
49
49
|
children
|
|
50
50
|
} = props;
|
|
51
|
-
return jsx(NinetailedContext.Provider,
|
|
52
|
-
value: ninetailed
|
|
53
|
-
}, {
|
|
51
|
+
return /*#__PURE__*/jsx(NinetailedContext.Provider, {
|
|
52
|
+
value: ninetailed,
|
|
54
53
|
children: children
|
|
55
|
-
})
|
|
54
|
+
});
|
|
56
55
|
};
|
|
57
56
|
|
|
58
57
|
const useNinetailed = () => {
|
|
@@ -63,42 +62,30 @@ const useNinetailed = () => {
|
|
|
63
62
|
return ninetailed;
|
|
64
63
|
};
|
|
65
64
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
78
|
-
PERFORMANCE OF THIS SOFTWARE.
|
|
79
|
-
***************************************************************************** */
|
|
80
|
-
|
|
81
|
-
function __rest(s, e) {
|
|
82
|
-
var t = {};
|
|
83
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
84
|
-
t[p] = s[p];
|
|
85
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
86
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
87
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
88
|
-
t[p[i]] = s[p[i]];
|
|
89
|
-
}
|
|
90
|
-
return t;
|
|
65
|
+
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
66
|
+
if (source == null) return {};
|
|
67
|
+
var target = {};
|
|
68
|
+
var sourceKeys = Object.keys(source);
|
|
69
|
+
var key, i;
|
|
70
|
+
for (i = 0; i < sourceKeys.length; i++) {
|
|
71
|
+
key = sourceKeys[i];
|
|
72
|
+
if (excluded.indexOf(key) >= 0) continue;
|
|
73
|
+
target[key] = source[key];
|
|
74
|
+
}
|
|
75
|
+
return target;
|
|
91
76
|
}
|
|
92
77
|
|
|
78
|
+
const _excluded$4 = ["experiences"];
|
|
93
79
|
const useProfile = () => {
|
|
94
80
|
const ninetailed = useNinetailed();
|
|
95
81
|
const [profileState, setProfileState] = useState(ninetailed.profileState);
|
|
96
82
|
const profileStateRef = useRef({});
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
*
|
|
100
|
-
*
|
|
101
|
-
*
|
|
83
|
+
|
|
84
|
+
/**
|
|
85
|
+
* This effect compares the old and new profile state before updating it.
|
|
86
|
+
* We use a ref to avoid an infinite loop which can happen when an empty profile state was updated with no changes.
|
|
87
|
+
* This behaviour occurred as the validation handling on the error property was not set properly in the "CreateProfile" and "UpdateProfile" endpoint types.
|
|
88
|
+
* Furthermore, it was also observed, that it "only" occurred when the preview plugin was used in parallel.
|
|
102
89
|
*/
|
|
103
90
|
useEffect(() => {
|
|
104
91
|
ninetailed.onProfileChange(profileState => {
|
|
@@ -112,8 +99,8 @@ const useProfile = () => {
|
|
|
112
99
|
}
|
|
113
100
|
});
|
|
114
101
|
}, []);
|
|
115
|
-
const profileStateWithoutExperiences =
|
|
116
|
-
return Object.assign(
|
|
102
|
+
const profileStateWithoutExperiences = _objectWithoutPropertiesLoose(profileState, _excluded$4);
|
|
103
|
+
return Object.assign({}, profileStateWithoutExperiences, {
|
|
117
104
|
loading: profileState.status === 'loading'
|
|
118
105
|
});
|
|
119
106
|
};
|
|
@@ -147,21 +134,22 @@ const TrackHasSeenComponent = ({
|
|
|
147
134
|
});
|
|
148
135
|
}
|
|
149
136
|
}, [inView]);
|
|
150
|
-
return jsxs(Fragment, {
|
|
151
|
-
children: [jsx("div", {
|
|
137
|
+
return /*#__PURE__*/jsxs(Fragment, {
|
|
138
|
+
children: [/*#__PURE__*/jsx("div", {
|
|
152
139
|
ref: ref
|
|
153
140
|
}), children]
|
|
154
141
|
});
|
|
155
142
|
};
|
|
156
143
|
|
|
157
|
-
const
|
|
158
|
-
|
|
144
|
+
const _excluded$3 = ["component", "loadingComponent", "variants", "holdout"];
|
|
145
|
+
const Personalize = _ref => {
|
|
146
|
+
let {
|
|
159
147
|
component: Component,
|
|
160
148
|
loadingComponent: LoadingComponent,
|
|
161
149
|
variants = [],
|
|
162
150
|
holdout = -1
|
|
163
|
-
} =
|
|
164
|
-
baseline =
|
|
151
|
+
} = _ref,
|
|
152
|
+
baseline = _objectWithoutPropertiesLoose(_ref, _excluded$3);
|
|
165
153
|
const {
|
|
166
154
|
loading,
|
|
167
155
|
variant,
|
|
@@ -172,7 +160,7 @@ const Personalize = _a => {
|
|
|
172
160
|
});
|
|
173
161
|
const hasVariants = variants.length > 0;
|
|
174
162
|
if (!hasVariants) {
|
|
175
|
-
return jsx(Component, Object.assign({}, baseline, {
|
|
163
|
+
return /*#__PURE__*/jsx(Component, Object.assign({}, baseline, {
|
|
176
164
|
ninetailed: {
|
|
177
165
|
isPersonalized,
|
|
178
166
|
audience
|
|
@@ -181,26 +169,24 @@ const Personalize = _a => {
|
|
|
181
169
|
}
|
|
182
170
|
if (loading) {
|
|
183
171
|
if (LoadingComponent) {
|
|
184
|
-
return jsx(LoadingComponent, {});
|
|
172
|
+
return /*#__PURE__*/jsx(LoadingComponent, {});
|
|
185
173
|
}
|
|
186
|
-
return jsx("div",
|
|
174
|
+
return /*#__PURE__*/jsx("div", {
|
|
187
175
|
style: {
|
|
188
176
|
opacity: 0
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
children: jsx(Component, Object.assign({}, variant, {
|
|
177
|
+
},
|
|
178
|
+
children: /*#__PURE__*/jsx(Component, Object.assign({}, variant, {
|
|
192
179
|
ninetailed: {
|
|
193
180
|
isPersonalized,
|
|
194
181
|
audience
|
|
195
182
|
}
|
|
196
183
|
}))
|
|
197
|
-
}
|
|
184
|
+
}, "hide");
|
|
198
185
|
}
|
|
199
|
-
return jsx(TrackHasSeenComponent,
|
|
186
|
+
return /*#__PURE__*/jsx(TrackHasSeenComponent, {
|
|
200
187
|
variant: variant,
|
|
201
188
|
audience: audience,
|
|
202
|
-
isPersonalized: isPersonalized
|
|
203
|
-
}, {
|
|
189
|
+
isPersonalized: isPersonalized,
|
|
204
190
|
children: /*#__PURE__*/createElement(Component, Object.assign({}, variant, {
|
|
205
191
|
key: `${audience.id}-${variant.id}`,
|
|
206
192
|
ninetailed: {
|
|
@@ -208,7 +194,7 @@ const Personalize = _a => {
|
|
|
208
194
|
audience
|
|
209
195
|
}
|
|
210
196
|
}))
|
|
211
|
-
})
|
|
197
|
+
});
|
|
212
198
|
};
|
|
213
199
|
|
|
214
200
|
const generateSelectors = id => {
|
|
@@ -239,7 +225,7 @@ const MergeTag = ({
|
|
|
239
225
|
return null;
|
|
240
226
|
}
|
|
241
227
|
const value = selectValueFromProfile(profile, id) || fallback;
|
|
242
|
-
return value ? jsx(Fragment, {
|
|
228
|
+
return value ? /*#__PURE__*/jsx(Fragment, {
|
|
243
229
|
children: value
|
|
244
230
|
}) : null;
|
|
245
231
|
};
|
|
@@ -273,6 +259,7 @@ const useExperienceSelectionMiddleware = ({
|
|
|
273
259
|
return middleware;
|
|
274
260
|
};
|
|
275
261
|
|
|
262
|
+
const _excluded$2 = ["experience", "variant", "variantIndex"];
|
|
276
263
|
const useExperience = ({
|
|
277
264
|
baseline,
|
|
278
265
|
experiences
|
|
@@ -288,13 +275,13 @@ const useExperience = ({
|
|
|
288
275
|
baseline,
|
|
289
276
|
profile
|
|
290
277
|
});
|
|
291
|
-
const overrideResult =
|
|
292
|
-
|
|
278
|
+
const overrideResult = _ref => {
|
|
279
|
+
let {
|
|
293
280
|
experience: originalExperience,
|
|
294
281
|
variant: originalVariant,
|
|
295
282
|
variantIndex: originalVariantIndex
|
|
296
|
-
} =
|
|
297
|
-
other =
|
|
283
|
+
} = _ref,
|
|
284
|
+
other = _objectWithoutPropertiesLoose(_ref, _excluded$2);
|
|
298
285
|
const {
|
|
299
286
|
experience,
|
|
300
287
|
variant,
|
|
@@ -304,20 +291,21 @@ const useExperience = ({
|
|
|
304
291
|
variant: originalVariant,
|
|
305
292
|
variantIndex: originalVariantIndex
|
|
306
293
|
});
|
|
294
|
+
|
|
307
295
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
308
296
|
// @ts-ignore
|
|
309
|
-
return Object.assign(
|
|
310
|
-
audience:
|
|
297
|
+
return Object.assign({}, other, {
|
|
298
|
+
audience: experience != null && experience.audience ? experience.audience : null,
|
|
311
299
|
experience,
|
|
312
300
|
variant,
|
|
313
301
|
variantIndex
|
|
314
302
|
});
|
|
315
303
|
};
|
|
316
|
-
const baseReturn = Object.assign(
|
|
304
|
+
const baseReturn = Object.assign({}, profileState, {
|
|
317
305
|
hasVariants,
|
|
318
306
|
baseline
|
|
319
307
|
});
|
|
320
|
-
const emptyReturn = Object.assign(
|
|
308
|
+
const emptyReturn = Object.assign({}, baseReturn, {
|
|
321
309
|
experience: null,
|
|
322
310
|
variant: baseline,
|
|
323
311
|
variantIndex: 0,
|
|
@@ -347,7 +335,7 @@ const useExperience = ({
|
|
|
347
335
|
if (!experience) {
|
|
348
336
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
349
337
|
// @ts-ignore
|
|
350
|
-
return overrideResult(Object.assign(
|
|
338
|
+
return overrideResult(Object.assign({}, emptyReturn, {
|
|
351
339
|
profile
|
|
352
340
|
}));
|
|
353
341
|
}
|
|
@@ -359,7 +347,7 @@ const useExperience = ({
|
|
|
359
347
|
experience,
|
|
360
348
|
profile
|
|
361
349
|
});
|
|
362
|
-
return overrideResult(Object.assign(
|
|
350
|
+
return overrideResult(Object.assign({}, baseReturn, {
|
|
363
351
|
status: 'success',
|
|
364
352
|
loading: false,
|
|
365
353
|
error: null,
|
|
@@ -372,25 +360,27 @@ const useExperience = ({
|
|
|
372
360
|
}));
|
|
373
361
|
};
|
|
374
362
|
|
|
375
|
-
const ComponentMarker = /*#__PURE__*/forwardRef((
|
|
363
|
+
const ComponentMarker = /*#__PURE__*/forwardRef(({
|
|
364
|
+
hidden: _hidden = false
|
|
365
|
+
}, ref) => {
|
|
376
366
|
const {
|
|
377
367
|
logger
|
|
378
368
|
} = useNinetailed();
|
|
379
369
|
const markerRef = useRef(null);
|
|
380
370
|
useEffect(() => {
|
|
381
|
-
var
|
|
382
|
-
/*
|
|
383
|
-
Due to React's limitation on setting !important styles during rendering, we set the display property on the DOM element directly.
|
|
384
|
-
See: https://github.com/facebook/react/issues/1881
|
|
371
|
+
var _markerRef$current;
|
|
372
|
+
/*
|
|
373
|
+
Due to React's limitation on setting !important styles during rendering, we set the display property on the DOM element directly.
|
|
374
|
+
See: https://github.com/facebook/react/issues/1881
|
|
385
375
|
*/
|
|
386
|
-
(
|
|
376
|
+
(_markerRef$current = markerRef.current) == null || _markerRef$current.style.setProperty('display', 'none', 'important');
|
|
387
377
|
}, []);
|
|
388
378
|
useEffect(() => {
|
|
389
379
|
logger.debug('Using fallback mechanism to detect when experiences are seen. This can lead to inaccurate results. Consider using a forwardRef instead. See: https://docs.ninetailed.io/for-developers/experience-sdk/rendering-experiences#tracking-impressions-of-experiences');
|
|
390
380
|
}, [logger]);
|
|
391
381
|
useEffect(() => {
|
|
392
382
|
if (markerRef.current) {
|
|
393
|
-
const nextSibling = markerRef.current
|
|
383
|
+
const nextSibling = getNextSibling(markerRef.current, _hidden);
|
|
394
384
|
if (ref) {
|
|
395
385
|
if (typeof ref === 'function') {
|
|
396
386
|
ref(nextSibling);
|
|
@@ -399,8 +389,8 @@ const ComponentMarker = /*#__PURE__*/forwardRef((_, ref) => {
|
|
|
399
389
|
}
|
|
400
390
|
}
|
|
401
391
|
}
|
|
402
|
-
}, []);
|
|
403
|
-
return jsx("div", {
|
|
392
|
+
}, [_hidden]);
|
|
393
|
+
return /*#__PURE__*/jsx("div", {
|
|
404
394
|
className: "nt-cmp-marker",
|
|
405
395
|
style: {
|
|
406
396
|
display: 'none'
|
|
@@ -408,14 +398,31 @@ const ComponentMarker = /*#__PURE__*/forwardRef((_, ref) => {
|
|
|
408
398
|
ref: markerRef
|
|
409
399
|
});
|
|
410
400
|
});
|
|
401
|
+
const getNextSibling = (element, recursive = false) => {
|
|
402
|
+
if (!recursive) {
|
|
403
|
+
return element.nextSibling;
|
|
404
|
+
}
|
|
405
|
+
const {
|
|
406
|
+
parentElement
|
|
407
|
+
} = element;
|
|
408
|
+
if (!parentElement) {
|
|
409
|
+
return null;
|
|
410
|
+
}
|
|
411
|
+
if (parentElement.nextSibling) {
|
|
412
|
+
return parentElement.nextSibling;
|
|
413
|
+
}
|
|
414
|
+
return getNextSibling(parentElement, true);
|
|
415
|
+
};
|
|
411
416
|
|
|
412
|
-
const
|
|
413
|
-
|
|
417
|
+
const _excluded$1 = ["component", "unhideAfterMs", "passthroughProps"],
|
|
418
|
+
_excluded2 = ["experiences", "component", "loadingComponent", "passthroughProps"];
|
|
419
|
+
const DefaultExperienceLoadingComponent = _ref => {
|
|
420
|
+
let {
|
|
414
421
|
component: Component,
|
|
415
422
|
unhideAfterMs = 5000,
|
|
416
423
|
passthroughProps
|
|
417
|
-
} =
|
|
418
|
-
baseline =
|
|
424
|
+
} = _ref,
|
|
425
|
+
baseline = _objectWithoutPropertiesLoose(_ref, _excluded$1);
|
|
419
426
|
const {
|
|
420
427
|
logger
|
|
421
428
|
} = useNinetailed();
|
|
@@ -430,12 +437,11 @@ const DefaultExperienceLoadingComponent = _a => {
|
|
|
430
437
|
};
|
|
431
438
|
}, []);
|
|
432
439
|
if (hidden) {
|
|
433
|
-
return jsx("div",
|
|
440
|
+
return /*#__PURE__*/jsx("div", {
|
|
434
441
|
style: {
|
|
435
442
|
opacity: 0
|
|
436
|
-
}
|
|
437
|
-
|
|
438
|
-
children: jsx(Component, Object.assign({}, passthroughProps, baseline, {
|
|
443
|
+
},
|
|
444
|
+
children: /*#__PURE__*/jsx(Component, Object.assign({}, passthroughProps, baseline, {
|
|
439
445
|
ninetailed: {
|
|
440
446
|
isPersonalized: false,
|
|
441
447
|
audience: {
|
|
@@ -443,9 +449,9 @@ const DefaultExperienceLoadingComponent = _a => {
|
|
|
443
449
|
}
|
|
444
450
|
}
|
|
445
451
|
}))
|
|
446
|
-
}
|
|
452
|
+
}, "hide");
|
|
447
453
|
}
|
|
448
|
-
return jsx(Component, Object.assign({}, passthroughProps, baseline, {
|
|
454
|
+
return /*#__PURE__*/jsx(Component, Object.assign({}, passthroughProps, baseline, {
|
|
449
455
|
ninetailed: {
|
|
450
456
|
isPersonalized: false,
|
|
451
457
|
audience: {
|
|
@@ -454,14 +460,14 @@ const DefaultExperienceLoadingComponent = _a => {
|
|
|
454
460
|
}
|
|
455
461
|
}));
|
|
456
462
|
};
|
|
457
|
-
const Experience =
|
|
458
|
-
|
|
463
|
+
const Experience = _ref2 => {
|
|
464
|
+
let {
|
|
459
465
|
experiences,
|
|
460
466
|
component: Component,
|
|
461
467
|
loadingComponent: LoadingComponent = DefaultExperienceLoadingComponent,
|
|
462
468
|
passthroughProps
|
|
463
|
-
} =
|
|
464
|
-
baseline =
|
|
469
|
+
} = _ref2,
|
|
470
|
+
baseline = _objectWithoutPropertiesLoose(_ref2, _excluded2);
|
|
465
471
|
const {
|
|
466
472
|
observeElement,
|
|
467
473
|
unobserveElement,
|
|
@@ -479,9 +485,10 @@ const Experience = _a => {
|
|
|
479
485
|
baseline,
|
|
480
486
|
experiences
|
|
481
487
|
});
|
|
488
|
+
|
|
482
489
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
483
490
|
// @ts-ignore
|
|
484
|
-
const isComponentForwardRef = isForwardRef(jsx(Component, {}));
|
|
491
|
+
const isComponentForwardRef = isForwardRef( /*#__PURE__*/jsx(Component, {}));
|
|
485
492
|
const componentRef = useRef(null);
|
|
486
493
|
useEffect(() => {
|
|
487
494
|
const componentElement = componentRef.current;
|
|
@@ -513,10 +520,10 @@ const Experience = _a => {
|
|
|
513
520
|
};
|
|
514
521
|
}, [observeElement, unobserveElement, experience, baseline, variant, variantIndex, audience]);
|
|
515
522
|
if (!hasVariants) {
|
|
516
|
-
return jsxs(Fragment, {
|
|
517
|
-
children: [!isComponentForwardRef && jsx(ComponentMarker, {
|
|
523
|
+
return /*#__PURE__*/jsxs(Fragment, {
|
|
524
|
+
children: [!isComponentForwardRef && /*#__PURE__*/jsx(ComponentMarker, {
|
|
518
525
|
ref: componentRef
|
|
519
|
-
}, `marker-no-variants-${(experience
|
|
526
|
+
}, `marker-no-variants-${(experience == null ? void 0 : experience.id) || 'baseline'}-${variant.id}`), /*#__PURE__*/createElement(Component, Object.assign({}, passthroughProps, baseline, {
|
|
520
527
|
key: baseline.id
|
|
521
528
|
}, isComponentForwardRef ? {
|
|
522
529
|
ref: componentRef
|
|
@@ -533,19 +540,20 @@ const Experience = _a => {
|
|
|
533
540
|
}
|
|
534
541
|
const isVariantHidden = 'hidden' in variant && variant.hidden;
|
|
535
542
|
if (isVariantHidden) {
|
|
536
|
-
return jsx(ComponentMarker, {
|
|
537
|
-
ref: componentRef
|
|
538
|
-
|
|
543
|
+
return /*#__PURE__*/jsx(ComponentMarker, {
|
|
544
|
+
ref: componentRef,
|
|
545
|
+
hidden: true
|
|
546
|
+
}, `marker-hidden-${(experience == null ? void 0 : experience.id) || 'baseline'}-${variant.id}`);
|
|
539
547
|
}
|
|
540
|
-
return jsxs(Fragment, {
|
|
541
|
-
children: [!isComponentForwardRef && jsx(ComponentMarker, {
|
|
548
|
+
return /*#__PURE__*/jsxs(Fragment, {
|
|
549
|
+
children: [!isComponentForwardRef && /*#__PURE__*/jsx(ComponentMarker, {
|
|
542
550
|
ref: componentRef
|
|
543
|
-
}, `marker-${(experience
|
|
544
|
-
key: `${(experience
|
|
551
|
+
}, `marker-${(experience == null ? void 0 : experience.id) || 'baseline'}-${variant.id}`), /*#__PURE__*/createElement(Component, Object.assign({}, Object.assign({}, passthroughProps, variant), {
|
|
552
|
+
key: `${(experience == null ? void 0 : experience.id) || 'baseline'}-${variant.id}`,
|
|
545
553
|
ninetailed: {
|
|
546
554
|
isPersonalized,
|
|
547
555
|
audience: {
|
|
548
|
-
id: (audience
|
|
556
|
+
id: (audience == null ? void 0 : audience.id) || 'all visitors'
|
|
549
557
|
}
|
|
550
558
|
}
|
|
551
559
|
}, isComponentForwardRef ? {
|
|
@@ -554,18 +562,18 @@ const Experience = _a => {
|
|
|
554
562
|
});
|
|
555
563
|
};
|
|
556
564
|
|
|
565
|
+
const _excluded = ["experiences", "component", "passthroughProps"];
|
|
557
566
|
const ESRContext = /*#__PURE__*/React.createContext(undefined);
|
|
558
567
|
const ESRProvider = ({
|
|
559
568
|
experienceVariantsMap,
|
|
560
569
|
children
|
|
561
570
|
}) => {
|
|
562
|
-
return jsx(ESRContext.Provider,
|
|
571
|
+
return /*#__PURE__*/jsx(ESRContext.Provider, {
|
|
563
572
|
value: {
|
|
564
573
|
experienceVariantsMap
|
|
565
|
-
}
|
|
566
|
-
}, {
|
|
574
|
+
},
|
|
567
575
|
children: children
|
|
568
|
-
})
|
|
576
|
+
});
|
|
569
577
|
};
|
|
570
578
|
const useESR = () => {
|
|
571
579
|
const context = React.useContext(ESRContext);
|
|
@@ -576,19 +584,19 @@ const useESR = () => {
|
|
|
576
584
|
experienceVariantsMap: context.experienceVariantsMap
|
|
577
585
|
};
|
|
578
586
|
};
|
|
579
|
-
const ESRLoadingComponent =
|
|
580
|
-
|
|
587
|
+
const ESRLoadingComponent = _ref => {
|
|
588
|
+
let {
|
|
581
589
|
experiences,
|
|
582
590
|
component: Component,
|
|
583
591
|
passthroughProps
|
|
584
|
-
} =
|
|
585
|
-
baseline =
|
|
592
|
+
} = _ref,
|
|
593
|
+
baseline = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
586
594
|
const {
|
|
587
595
|
experienceVariantsMap
|
|
588
596
|
} = useESR();
|
|
589
597
|
const experience = experiences.find(experience => Object.prototype.hasOwnProperty.call(experienceVariantsMap, experience.id));
|
|
590
598
|
if (!experience) {
|
|
591
|
-
return jsx(Component, Object.assign({}, passthroughProps, baseline, {
|
|
599
|
+
return /*#__PURE__*/jsx(Component, Object.assign({}, passthroughProps, baseline, {
|
|
592
600
|
ninetailed: {
|
|
593
601
|
isPersonalized: false,
|
|
594
602
|
audience: {
|
|
@@ -599,7 +607,7 @@ const ESRLoadingComponent = _a => {
|
|
|
599
607
|
}
|
|
600
608
|
const component = experience.components.find(component => component.baseline.id === baseline.id);
|
|
601
609
|
if (!component) {
|
|
602
|
-
return jsx(Component, Object.assign({}, passthroughProps, baseline, {
|
|
610
|
+
return /*#__PURE__*/jsx(Component, Object.assign({}, passthroughProps, baseline, {
|
|
603
611
|
ninetailed: {
|
|
604
612
|
isPersonalized: false,
|
|
605
613
|
audience: {
|
|
@@ -609,7 +617,7 @@ const ESRLoadingComponent = _a => {
|
|
|
609
617
|
}));
|
|
610
618
|
}
|
|
611
619
|
if (experienceVariantsMap[experience.id] === 0) {
|
|
612
|
-
return jsx(Component, Object.assign({}, passthroughProps, baseline, {
|
|
620
|
+
return /*#__PURE__*/jsx(Component, Object.assign({}, passthroughProps, baseline, {
|
|
613
621
|
ninetailed: {
|
|
614
622
|
isPersonalized: false,
|
|
615
623
|
audience: {
|
|
@@ -620,7 +628,7 @@ const ESRLoadingComponent = _a => {
|
|
|
620
628
|
}
|
|
621
629
|
const variant = component.variants[experienceVariantsMap[experience.id] - 1];
|
|
622
630
|
if (!variant) {
|
|
623
|
-
return jsx(Component, Object.assign({}, passthroughProps, baseline, {
|
|
631
|
+
return /*#__PURE__*/jsx(Component, Object.assign({}, passthroughProps, baseline, {
|
|
624
632
|
ninetailed: {
|
|
625
633
|
isPersonalized: false,
|
|
626
634
|
audience: {
|
|
@@ -629,7 +637,7 @@ const ESRLoadingComponent = _a => {
|
|
|
629
637
|
}
|
|
630
638
|
}));
|
|
631
639
|
}
|
|
632
|
-
return jsx(Component, Object.assign({}, passthroughProps, variant, {
|
|
640
|
+
return /*#__PURE__*/jsx(Component, Object.assign({}, passthroughProps, variant, {
|
|
633
641
|
ninetailed: {
|
|
634
642
|
isPersonalized: false,
|
|
635
643
|
audience: {
|
package/package.json
CHANGED
|
@@ -1,7 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ninetailed/experience.js-react",
|
|
3
|
-
"version": "7.5.2",
|
|
3
|
+
"version": "7.5.3-beta.2",
|
|
4
4
|
"description": "Ninetailed SDK for React",
|
|
5
|
+
"dependencies": {
|
|
6
|
+
"@ninetailed/experience.js": "*",
|
|
7
|
+
"@ninetailed/experience.js-shared": "*",
|
|
8
|
+
"radash": "10.9.0",
|
|
9
|
+
"react-intersection-observer": "8.34.0",
|
|
10
|
+
"react-is": "18.2.0",
|
|
11
|
+
"@testing-library/react-hooks": "7.0.2",
|
|
12
|
+
"@testing-library/react": "13.4.0"
|
|
13
|
+
},
|
|
5
14
|
"peerDependencies": {
|
|
6
15
|
"react": ">=16.8.0"
|
|
7
16
|
},
|
|
@@ -11,15 +20,12 @@
|
|
|
11
20
|
"url": "https://github.com/ninetailed-inc/experience.js.git",
|
|
12
21
|
"directory": "packages/sdks/react"
|
|
13
22
|
},
|
|
14
|
-
"
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
"react-intersection-observer": "8.34.0",
|
|
23
|
-
"react-is": "18.2.0"
|
|
24
|
-
}
|
|
23
|
+
"keywords": [
|
|
24
|
+
"react",
|
|
25
|
+
"ninetailed",
|
|
26
|
+
"personalization",
|
|
27
|
+
"a/b testing"
|
|
28
|
+
],
|
|
29
|
+
"module": "./index.esm.js",
|
|
30
|
+
"main": "./index.cjs.js"
|
|
25
31
|
}
|
|
@@ -1,2 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
|
|
2
|
+
type ComponentMarkerProps = {
|
|
3
|
+
hidden?: boolean;
|
|
4
|
+
};
|
|
5
|
+
export declare const ComponentMarker: React.ForwardRefExoticComponent<ComponentMarkerProps & React.RefAttributes<unknown>>;
|
|
6
|
+
export {};
|
|
@@ -12,5 +12,5 @@ export declare const ESRProvider: React.FC<PropsWithChildren<ESRProviderProps>>;
|
|
|
12
12
|
export declare const useESR: () => {
|
|
13
13
|
experienceVariantsMap: Record<string, number>;
|
|
14
14
|
};
|
|
15
|
-
export declare const ESRLoadingComponent: <P, PassThroughProps extends Partial<P> = Partial<P>, Variant extends Pick<P, Exclude<keyof P, keyof PassThroughProps>> & Reference = Pick<P, Exclude<keyof P, keyof PassThroughProps>> & Reference>({ experiences, component: Component, passthroughProps, ...baseline }: ExperienceBaseProps<P, PassThroughProps, Variant>) => JSX.Element;
|
|
15
|
+
export declare const ESRLoadingComponent: <P, PassThroughProps extends Partial<P> = Partial<P>, Variant extends Pick<P, Exclude<keyof P, keyof PassThroughProps>> & Reference = Pick<P, Exclude<keyof P, keyof PassThroughProps>> & Reference>({ experiences, component: Component, passthroughProps, ...baseline }: ExperienceBaseProps<P, PassThroughProps, Variant>) => import("react/jsx-runtime").JSX.Element;
|
|
16
16
|
export {};
|
|
@@ -23,5 +23,5 @@ type DefaultExperienceLoadingComponentProps = ExperienceBaseProps<Record<string,
|
|
|
23
23
|
unhideAfterMs?: number;
|
|
24
24
|
};
|
|
25
25
|
export declare const DefaultExperienceLoadingComponent: React.FC<DefaultExperienceLoadingComponentProps>;
|
|
26
|
-
export declare const Experience: <P, PassThroughProps extends Partial<P> = Partial<P>, Variant extends Pick<P, Exclude<keyof P, keyof PassThroughProps>> & Reference = Pick<P, Exclude<keyof P, keyof PassThroughProps>> & Reference>({ experiences, component: Component, loadingComponent: LoadingComponent, passthroughProps, ...baseline }: ExperienceProps<P, PassThroughProps, Variant>) => JSX.Element;
|
|
26
|
+
export declare const Experience: <P, PassThroughProps extends Partial<P> = Partial<P>, Variant extends Pick<P, Exclude<keyof P, keyof PassThroughProps>> & Reference = Pick<P, Exclude<keyof P, keyof PassThroughProps>> & Reference>({ experiences, component: Component, loadingComponent: LoadingComponent, passthroughProps, ...baseline }: ExperienceProps<P, PassThroughProps, Variant>) => import("react/jsx-runtime").JSX.Element;
|
|
27
27
|
export {};
|
|
@@ -3,5 +3,5 @@ type MergeTagProps = {
|
|
|
3
3
|
id: string;
|
|
4
4
|
fallback?: string;
|
|
5
5
|
};
|
|
6
|
-
export declare const MergeTag: ({ id, fallback, }: PropsWithChildren<MergeTagProps>) => JSX.Element | null;
|
|
6
|
+
export declare const MergeTag: ({ id, fallback, }: PropsWithChildren<MergeTagProps>) => import("react/jsx-runtime").JSX.Element | null;
|
|
7
7
|
export {};
|
|
@@ -19,4 +19,4 @@ export type NinetailedProviderInstantiationProps = {
|
|
|
19
19
|
export type NinetailedProviderProps = NinetailedProviderInstantiationProps | {
|
|
20
20
|
ninetailed: Ninetailed;
|
|
21
21
|
};
|
|
22
|
-
export declare const NinetailedProvider: (props: React.PropsWithChildren<NinetailedProviderProps>) => JSX.Element;
|
|
22
|
+
export declare const NinetailedProvider: (props: React.PropsWithChildren<NinetailedProviderProps>) => import("react/jsx-runtime").JSX.Element;
|
package/src/lib/Personalize.d.ts
CHANGED
|
@@ -19,5 +19,5 @@ type PersonalizeProps<P> = Baseline<P> & {
|
|
|
19
19
|
loadingComponent?: React.ComponentType;
|
|
20
20
|
holdout?: number;
|
|
21
21
|
};
|
|
22
|
-
export declare const Personalize: <P extends object>({ component: Component, loadingComponent: LoadingComponent, variants, holdout, ...baseline }: PersonalizeProps<P>) => JSX.Element;
|
|
22
|
+
export declare const Personalize: <P extends object>({ component: Component, loadingComponent: LoadingComponent, variants, holdout, ...baseline }: PersonalizeProps<P>) => import("react/jsx-runtime").JSX.Element;
|
|
23
23
|
export {};
|