@ninetailed/experience.js-react 7.4.1 → 7.4.3

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.
Files changed (3) hide show
  1. package/index.cjs +10 -3
  2. package/index.js +10 -3
  3. package/package.json +3 -3
package/index.cjs CHANGED
@@ -392,8 +392,15 @@ const ComponentMarker = /*#__PURE__*/React.forwardRef((_, ref) => {
392
392
  } = useNinetailed();
393
393
  const markerRef = React.useRef(null);
394
394
  React.useEffect(() => {
395
- // TODO: Create a better message
396
- logger.debug('Using fallback mechanism to select component.');
395
+ var _a;
396
+ /*
397
+ Due to React's limitation on setting !important styles during rendering, we set the display property on the DOM element directly.
398
+ See: https://github.com/facebook/react/issues/1881
399
+ */
400
+ (_a = markerRef.current) === null || _a === void 0 ? void 0 : _a.style.setProperty('display', 'none', 'important');
401
+ }, []);
402
+ React.useEffect(() => {
403
+ 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');
397
404
  }, [logger]);
398
405
  React.useEffect(() => {
399
406
  if (markerRef.current) {
@@ -410,7 +417,7 @@ const ComponentMarker = /*#__PURE__*/React.forwardRef((_, ref) => {
410
417
  return jsxRuntime.jsx("div", {
411
418
  className: "nt-cmp-marker",
412
419
  style: {
413
- display: 'none !important'
420
+ display: 'none'
414
421
  },
415
422
  ref: markerRef
416
423
  });
package/index.js CHANGED
@@ -384,8 +384,15 @@ const ComponentMarker = /*#__PURE__*/forwardRef((_, ref) => {
384
384
  } = useNinetailed();
385
385
  const markerRef = useRef(null);
386
386
  useEffect(() => {
387
- // TODO: Create a better message
388
- logger.debug('Using fallback mechanism to select component.');
387
+ var _a;
388
+ /*
389
+ Due to React's limitation on setting !important styles during rendering, we set the display property on the DOM element directly.
390
+ See: https://github.com/facebook/react/issues/1881
391
+ */
392
+ (_a = markerRef.current) === null || _a === void 0 ? void 0 : _a.style.setProperty('display', 'none', 'important');
393
+ }, []);
394
+ useEffect(() => {
395
+ 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');
389
396
  }, [logger]);
390
397
  useEffect(() => {
391
398
  if (markerRef.current) {
@@ -402,7 +409,7 @@ const ComponentMarker = /*#__PURE__*/forwardRef((_, ref) => {
402
409
  return jsx("div", {
403
410
  className: "nt-cmp-marker",
404
411
  style: {
405
- display: 'none !important'
412
+ display: 'none'
406
413
  },
407
414
  ref: markerRef
408
415
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ninetailed/experience.js-react",
3
- "version": "7.4.1",
3
+ "version": "7.4.3",
4
4
  "peerDependencies": {
5
5
  "react": ">=16.8.0"
6
6
  },
@@ -9,9 +9,9 @@
9
9
  "type": "module",
10
10
  "types": "./index.d.ts",
11
11
  "dependencies": {
12
- "@ninetailed/experience.js": "7.4.1",
12
+ "@ninetailed/experience.js": "7.4.3",
13
13
  "react-is": "18.2.0",
14
- "@ninetailed/experience.js-shared": "7.4.1",
14
+ "@ninetailed/experience.js-shared": "7.4.3",
15
15
  "radash": "10.9.0",
16
16
  "react-intersection-observer": "8.34.0"
17
17
  }