@ninetailed/experience.js-react 7.4.2 → 7.5.0-beta.0

package/README.md

@@ -1,7 +1,32 @@
-# experience-sdk-react
+# @ninetailed/experience.js-react
 
-This library was generated with [Nx](https://nx.dev).
+<!--Insert badges begin-->
+<!--GENERATED TEXT - DO NOT EDIT HERE -->
+<p align="center">
+<a href="https://www.npmjs.com/package/@ninetailed/experience.js-react"><img src="https://img.shields.io/npm/v/@ninetailed/experience.js-react.svg" alt="NPM Version" /></a>
+<a href="https://www.npmjs.com/package/@ninetailed/experience.js-react"><img src="https://img.shields.io/npm/l/@ninetailed/experience.js-react.svg" alt="Package License" /></a>
+<a href="https://www.npmjs.com/package/@ninetailed/experience.js-react"><img src="https://img.shields.io/npm/dm/@ninetailed/experience.js-react.svg" alt="NPM Downloads" /></a>
+<a href="https://docs.ninetailed.io/" target="_blank"><img src="https://img.shields.io/badge/%F0%9F%93%96-Documentation-green.svg" alt="Documentation"/></a>
+<a href="ninetailed-community.slack.com" target="_blank"><img src="https://img.shields.io/badge/Slack-Ninetailed%20Community-blue.svg" alt="Join the official Slack community"/>
+</p>
+
+<!--Insert badges end-->
+
+<!--Insert template begin-->
+<!--GENERATED TEXT - DO NOT EDIT HERE -->
+
+## About Ninetailed
+
+Our extensible [Experience SDKs](https://docs.ninetailed.io/#getting-started-for-developers) help you integrate Ninetailed Experiences into your JavaScript / TypeScript applications. With support for ESR and SSR, out-of-the-box utilities, and plugins, you have all the tools you need to get started.
+
+Using a framework we don't currently support? No problem! Our [Experience API](https://docs.ninetailed.io/for-developers/experience-api) enables you to use Ninetailed Experiences virtually anywhere.
+
+<!--Insert template end-->
+
+## Building
+
+Run `nx test sdks-react` to build the library.
 
 ## Running unit tests
 
-Run `nx test experience-sdk-react` to execute the unit tests via [Jest](https://jestjs.io).
+Run `nx test sdks-react` to execute the unit tests via [Jest](https://jestjs.io).

package/index.cjs

@@ -32,6 +32,7 @@ const NinetailedProvider = props => {
       onLog,
       onError,
       buildClientContext,
+      onInitProfileId,
       componentViewTrackingThreshold,
       storageImpl
     } = props;
@@ -47,6 +48,7 @@ const NinetailedProvider = props => {
       onLog,
       onError,
       buildClientContext,
+      onInitProfileId,
       componentViewTrackingThreshold,
       storageImpl
     });
@@ -118,15 +120,6 @@ const useProfile = () => {
       }
     });
   }, []);
-  /**
-   * Old implementation without profile state deep comparison
-   */
-  /*useEffect(() => {
-    return ninetailed.onProfileChange((profileState) => {
-      console.log('profileState', profileState);
-      setProfileState(profileState);
-    });
-  }, []);*/
   const profileStateWithoutExperiences = __rest(profileState, ["experiences"]);
   return Object.assign(Object.assign({}, profileStateWithoutExperiences), {
     loading: profileState.status === 'loading'
@@ -392,8 +385,15 @@ const ComponentMarker = /*#__PURE__*/React.forwardRef((_, ref) => {
   } = useNinetailed();
   const markerRef = React.useRef(null);
   React.useEffect(() => {
-    // TODO: Create a better message
-    logger.debug('Using fallback mechanism to select component.');
+    var _a;
+    /*
+    Due to React's limitation on setting !important styles during rendering, we set the display property on the DOM element directly.
+    See: https://github.com/facebook/react/issues/1881
+    */
+    (_a = markerRef.current) === null || _a === void 0 ? void 0 : _a.style.setProperty('display', 'none', 'important');
+  }, []);
+  React.useEffect(() => {
+    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');
   }, [logger]);
   React.useEffect(() => {
     if (markerRef.current) {
@@ -410,7 +410,7 @@ const ComponentMarker = /*#__PURE__*/React.forwardRef((_, ref) => {
   return jsxRuntime.jsx("div", {
     className: "nt-cmp-marker",
     style: {
-      display: 'none !important'
+      display: 'none'
     },
     ref: markerRef
   });
@@ -474,7 +474,6 @@ const Experience = _a => {
     unobserveElement,
     logger
   } = useNinetailed();
-  // TODO we actually could hook into the experience hook here with the plugins
   const {
     status,
     hasVariants,

package/index.js

@@ -24,6 +24,7 @@ const NinetailedProvider = props => {
       onLog,
       onError,
       buildClientContext,
+      onInitProfileId,
       componentViewTrackingThreshold,
       storageImpl
     } = props;
@@ -39,6 +40,7 @@ const NinetailedProvider = props => {
       onLog,
       onError,
       buildClientContext,
+      onInitProfileId,
       componentViewTrackingThreshold,
       storageImpl
     });
@@ -110,15 +112,6 @@ const useProfile = () => {
       }
     });
   }, []);
-  /**
-   * Old implementation without profile state deep comparison
-   */
-  /*useEffect(() => {
-    return ninetailed.onProfileChange((profileState) => {
-      console.log('profileState', profileState);
-      setProfileState(profileState);
-    });
-  }, []);*/
   const profileStateWithoutExperiences = __rest(profileState, ["experiences"]);
   return Object.assign(Object.assign({}, profileStateWithoutExperiences), {
     loading: profileState.status === 'loading'
@@ -384,8 +377,15 @@ const ComponentMarker = /*#__PURE__*/forwardRef((_, ref) => {
   } = useNinetailed();
   const markerRef = useRef(null);
   useEffect(() => {
-    // TODO: Create a better message
-    logger.debug('Using fallback mechanism to select component.');
+    var _a;
+    /*
+    Due to React's limitation on setting !important styles during rendering, we set the display property on the DOM element directly.
+    See: https://github.com/facebook/react/issues/1881
+    */
+    (_a = markerRef.current) === null || _a === void 0 ? void 0 : _a.style.setProperty('display', 'none', 'important');
+  }, []);
+  useEffect(() => {
+    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');
   }, [logger]);
   useEffect(() => {
     if (markerRef.current) {
@@ -402,7 +402,7 @@ const ComponentMarker = /*#__PURE__*/forwardRef((_, ref) => {
   return jsx("div", {
     className: "nt-cmp-marker",
     style: {
-      display: 'none !important'
+      display: 'none'
     },
     ref: markerRef
   });
@@ -466,7 +466,6 @@ const Experience = _a => {
     unobserveElement,
     logger
   } = useNinetailed();
-  // TODO we actually could hook into the experience hook here with the plugins
   const {
     status,
     hasVariants,

package/package.json

@@ -1,18 +1,19 @@
 {
   "name": "@ninetailed/experience.js-react",
-  "version": "7.4.2",
+  "version": "7.5.0-beta.0",
   "peerDependencies": {
     "react": ">=16.8.0"
   },
+  "license": "BSL-1.1",
   "module": "./index.js",
   "main": "./index.cjs",
   "type": "module",
-  "types": "./index.d.ts",
+  "types": "./src/index.d.ts",
   "dependencies": {
-    "@ninetailed/experience.js": "7.4.2",
-    "react-is": "18.2.0",
-    "@ninetailed/experience.js-shared": "7.4.2",
+    "@ninetailed/experience.js": "7.5.0-beta.0",
+    "@ninetailed/experience.js-shared": "7.5.0-beta.0",
     "radash": "10.9.0",
-    "react-intersection-observer": "8.34.0"
+    "react-intersection-observer": "8.34.0",
+    "react-is": "18.2.0"
   }
 }

package/{lib → src/lib}/NinetailedProvider.d.ts

@@ -14,6 +14,7 @@ export type NinetailedProviderInstantiationProps = {
     onError?: OnErrorHandler;
     componentViewTrackingThreshold?: number;
     buildClientContext?: () => NinetailedRequestContext;
+    onInitProfileId?: (profileId?: string) => string | undefined;
     storageImpl?: Storage;
 };
 export type NinetailedProviderProps = NinetailedProviderInstantiationProps | {

package/src/lib/useNinetailed.d.ts

@@ -0,0 +1 @@
+export declare const useNinetailed: () => import("dist/packages/sdks/javascript/src").NinetailedInstance;

package/lib/useNinetailed.d.ts

@@ -1 +0,0 @@
-export declare const useNinetailed: () => import("@ninetailed/experience.js").NinetailedInstance;