@ninetailed/experience.js-react 4.2.3-beta.0 → 4.3.0-beta.0

package/index.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var experience_js = require('@ninetailed/experience.js');
+var reactIs = require('react-is');
 var reactIntersectionObserver = require('react-intersection-observer');
 var experience_jsShared = require('@ninetailed/experience.js-shared');
 var radash = require('radash');
@@ -2087,6 +2088,36 @@ const useJoinExperiment = () => {
   return context.joinExperiment;
 };
 
+const ComponentMarker = /*#__PURE__*/React.forwardRef((_, ref) => {
+  const {
+    logger
+  } = useNinetailed();
+  const markerRef = React.useRef(null);
+  React.useEffect(() => {
+    // TODO: Create a better message
+    logger.debug('Using fallback mechanism to select component.');
+  }, [logger]);
+  React.useEffect(() => {
+    if (markerRef.current) {
+      const nextSibling = markerRef.current.nextSibling;
+      if (ref) {
+        if (typeof ref === 'function') {
+          ref(nextSibling);
+        } else {
+          ref.current = nextSibling;
+        }
+      }
+    }
+  }, []);
+  return jsxRuntime.jsx("div", {
+    className: "nt-cmp-marker",
+    style: {
+      display: 'none !important'
+    },
+    ref: markerRef
+  });
+});
+
 const DefaultExperienceLoadingComponent = _a => {
   var {
       component: Component,
@@ -2140,6 +2171,10 @@ const Experience = _a => {
       passthroughProps
     } = _a,
     baseline = __rest(_a, ["experiences", "component", "loadingComponent", "passthroughProps"]);
+  const {
+    observeElement,
+    unobserveElement
+  } = useNinetailed();
   // TODO we actually could hook into the experience hook here with the plugins
   const {
     status,
@@ -2154,6 +2189,10 @@ const Experience = _a => {
     experiences
   });
   const joinExperiment = useJoinExperiment();
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  const isComponentForwardRef = reactIs.isForwardRef(jsxRuntime.jsx(Component, {}));
+  const componentRef = React.useRef(null);
   React.useEffect(() => {
     if (status === 'success' && experience && profile) {
       joinExperiment({
@@ -2163,10 +2202,33 @@ const Experience = _a => {
       });
     }
   }, [status, experience, profile]);
+  React.useEffect(() => {
+    const componentElement = componentRef.current;
+    if (componentElement) {
+      observeElement({
+        element: componentElement,
+        experienceId: experience === null || experience === void 0 ? void 0 : experience.id,
+        variantId: variant === null || variant === void 0 ? void 0 : variant.id,
+        baselineId: baseline.id,
+        audienceId: audience === null || audience === void 0 ? void 0 : audience.id
+      });
+    }
+    return () => {
+      if (componentElement) {
+        unobserveElement(componentElement);
+      }
+    };
+  }, [observeElement, unobserveElement, experience, baseline, variant, audience]);
   if (!hasVariants) {
-    return /*#__PURE__*/React.createElement(Component, Object.assign({}, passthroughProps, baseline, {
-      key: baseline.id
-    }));
+    return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [!isComponentForwardRef && jsxRuntime.jsx(ComponentMarker, {
+        ref: componentRef
+      }), /*#__PURE__*/React.createElement(Component, Object.assign({}, passthroughProps, baseline, {
+        key: baseline.id
+      }, isComponentForwardRef ? {
+        ref: componentRef
+      } : {}))]
+    });
   }
   if (status === 'loading') {
     return /*#__PURE__*/React.createElement(LoadingComponent, Object.assign({}, baseline, {
@@ -2177,14 +2239,20 @@ const Experience = _a => {
     }));
   }
   if (!experience) {
-    return jsxRuntime.jsx(Component, Object.assign({}, passthroughProps, baseline, {
-      ninetailed: {
-        isPersonalized: false,
-        audience: {
-          id: 'baseline'
+    return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [!isComponentForwardRef && jsxRuntime.jsx(ComponentMarker, {
+        ref: componentRef
+      }), jsxRuntime.jsx(Component, Object.assign({}, passthroughProps, baseline, {
+        ninetailed: {
+          isPersonalized: false,
+          audience: {
+            id: 'baseline'
+          }
         }
-      }
-    }));
+      }, isComponentForwardRef ? {
+        ref: componentRef
+      } : {}))]
+    });
   }
   if (!variant) {
     return jsxRuntime.jsx(TrackExperience, Object.assign({
@@ -2193,14 +2261,20 @@ const Experience = _a => {
       // the profile is definitely defined, otherwise there wouldn't be an experience selected
       profile: profile
     }, {
-      children: jsxRuntime.jsx(Component, Object.assign({}, passthroughProps, baseline, {
-        ninetailed: {
-          isPersonalized: false,
-          audience: {
-            id: (audience === null || audience === void 0 ? void 0 : audience.id) || 'all visitors'
+      children: jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [!isComponentForwardRef && jsxRuntime.jsx(ComponentMarker, {
+          ref: componentRef
+        }), jsxRuntime.jsx(Component, Object.assign({}, passthroughProps, baseline, {
+          ninetailed: {
+            isPersonalized: false,
+            audience: {
+              id: (audience === null || audience === void 0 ? void 0 : audience.id) || 'all visitors'
+            }
           }
-        }
-      }))
+        }, isComponentForwardRef ? {
+          ref: componentRef
+        } : {}))]
+      })
     }), baseline.id);
   }
   const isVariantHidden = 'hidden' in variant && variant.hidden;
@@ -2210,15 +2284,21 @@ const Experience = _a => {
     // the profile is definitely defined, otherwise there wouldn't be an experience selected
     profile: profile
   }, {
-    children: !isVariantHidden ? /*#__PURE__*/React.createElement(Component, Object.assign({}, Object.assign(Object.assign({}, passthroughProps), variant), {
-      key: `${experience.id}-${variant.id}`,
-      ninetailed: {
-        isPersonalized,
-        audience: {
-          id: (audience === null || audience === void 0 ? void 0 : audience.id) || 'all visitors'
+    children: !isVariantHidden ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [!isComponentForwardRef && jsxRuntime.jsx(ComponentMarker, {
+        ref: componentRef
+      }), /*#__PURE__*/React.createElement(Component, Object.assign({}, Object.assign(Object.assign({}, passthroughProps), variant), {
+        key: `${experience.id}-${variant.id}`,
+        ninetailed: {
+          isPersonalized,
+          audience: {
+            id: (audience === null || audience === void 0 ? void 0 : audience.id) || 'all visitors'
+          }
         }
-      }
-    })) : null
+      }, isComponentForwardRef ? {
+        ref: componentRef
+      } : {}))]
+    }) : null
   }));
 };
 
@@ -2380,47 +2460,39 @@ const ExperimentsProvider = ({
   }));
 };
 
-const NinetailedProvider = props => {
-  const ninetailed = React.useMemo(() => {
-    if ('ninetailed' in props) {
-      return props.ninetailed;
-    }
-    const {
-      clientId,
-      environment,
-      preview,
-      url,
-      profile,
-      locale,
-      requestTimeout,
-      plugins = [],
-      onLog,
-      onError
-    } = props;
-    return new experience_js.Ninetailed({
-      clientId,
-      environment,
-      preview
-    }, {
-      url,
-      plugins,
-      profile,
-      locale,
-      requestTimeout,
-      onLog,
-      onError
-    });
-  }, []);
-  const {
-    experiments = [],
-    maximumActiveExperiments,
-    children
-  } = props;
+const NinetailedProvider = ({
+  children,
+  clientId,
+  experiments: _experiments = [],
+  maximumActiveExperiments,
+  environment,
+  preview,
+  url,
+  profile,
+  locale,
+  requestTimeout,
+  plugins: _plugins = [],
+  onLog,
+  onError
+}) => {
+  const ninetailed = React.useMemo(() => new experience_js.Ninetailed({
+    clientId,
+    environment,
+    preview
+  }, {
+    url,
+    plugins: _plugins,
+    profile,
+    locale,
+    requestTimeout,
+    onLog,
+    onError
+  }), []);
   return jsxRuntime.jsx(NinetailedContext.Provider, Object.assign({
     value: ninetailed
   }, {
     children: jsxRuntime.jsx(ExperimentsProvider, Object.assign({
-      experiments: experiments,
+      experiments: _experiments,
       maximumActiveExperiments: maximumActiveExperiments
     }, {
       children: children

package/index.js

@@ -1,6 +1,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import React, { createContext, useContext, useEffect, useState, useRef, useMemo, createElement as createElement$1, useCallback } from 'react';
+import React, { createContext, useContext, useEffect, useState, useRef, useMemo, forwardRef, createElement as createElement$1, useCallback } from 'react';
 import { selectDistribution, makeExperienceSelectMiddleware, selectHasExperienceVariants, selectActiveExperiments, selectExperience, selectExperienceVariant, Ninetailed, selectVariant } from '@ninetailed/experience.js';
+import { isForwardRef } from 'react-is';
 import { useInView } from 'react-intersection-observer';
 import { isBrowser, logger } from '@ninetailed/experience.js-shared';
 import { isEqual, debounce as debounce$1, get as get$1 } from 'radash';
@@ -2079,6 +2080,36 @@ const useJoinExperiment = () => {
   return context.joinExperiment;
 };
 
+const ComponentMarker = /*#__PURE__*/forwardRef((_, ref) => {
+  const {
+    logger
+  } = useNinetailed();
+  const markerRef = useRef(null);
+  useEffect(() => {
+    // TODO: Create a better message
+    logger.debug('Using fallback mechanism to select component.');
+  }, [logger]);
+  useEffect(() => {
+    if (markerRef.current) {
+      const nextSibling = markerRef.current.nextSibling;
+      if (ref) {
+        if (typeof ref === 'function') {
+          ref(nextSibling);
+        } else {
+          ref.current = nextSibling;
+        }
+      }
+    }
+  }, []);
+  return jsx("div", {
+    className: "nt-cmp-marker",
+    style: {
+      display: 'none !important'
+    },
+    ref: markerRef
+  });
+});
+
 const DefaultExperienceLoadingComponent = _a => {
   var {
       component: Component,
@@ -2132,6 +2163,10 @@ const Experience = _a => {
       passthroughProps
     } = _a,
     baseline = __rest(_a, ["experiences", "component", "loadingComponent", "passthroughProps"]);
+  const {
+    observeElement,
+    unobserveElement
+  } = useNinetailed();
   // TODO we actually could hook into the experience hook here with the plugins
   const {
     status,
@@ -2146,6 +2181,10 @@ const Experience = _a => {
     experiences
   });
   const joinExperiment = useJoinExperiment();
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  const isComponentForwardRef = isForwardRef(jsx(Component, {}));
+  const componentRef = useRef(null);
   useEffect(() => {
     if (status === 'success' && experience && profile) {
       joinExperiment({
@@ -2155,10 +2194,33 @@ const Experience = _a => {
       });
     }
   }, [status, experience, profile]);
+  useEffect(() => {
+    const componentElement = componentRef.current;
+    if (componentElement) {
+      observeElement({
+        element: componentElement,
+        experienceId: experience === null || experience === void 0 ? void 0 : experience.id,
+        variantId: variant === null || variant === void 0 ? void 0 : variant.id,
+        baselineId: baseline.id,
+        audienceId: audience === null || audience === void 0 ? void 0 : audience.id
+      });
+    }
+    return () => {
+      if (componentElement) {
+        unobserveElement(componentElement);
+      }
+    };
+  }, [observeElement, unobserveElement, experience, baseline, variant, audience]);
   if (!hasVariants) {
-    return /*#__PURE__*/createElement$1(Component, Object.assign({}, passthroughProps, baseline, {
-      key: baseline.id
-    }));
+    return jsxs(Fragment, {
+      children: [!isComponentForwardRef && jsx(ComponentMarker, {
+        ref: componentRef
+      }), /*#__PURE__*/createElement$1(Component, Object.assign({}, passthroughProps, baseline, {
+        key: baseline.id
+      }, isComponentForwardRef ? {
+        ref: componentRef
+      } : {}))]
+    });
   }
   if (status === 'loading') {
     return /*#__PURE__*/createElement$1(LoadingComponent, Object.assign({}, baseline, {
@@ -2169,14 +2231,20 @@ const Experience = _a => {
     }));
   }
   if (!experience) {
-    return jsx(Component, Object.assign({}, passthroughProps, baseline, {
-      ninetailed: {
-        isPersonalized: false,
-        audience: {
-          id: 'baseline'
+    return jsxs(Fragment, {
+      children: [!isComponentForwardRef && jsx(ComponentMarker, {
+        ref: componentRef
+      }), jsx(Component, Object.assign({}, passthroughProps, baseline, {
+        ninetailed: {
+          isPersonalized: false,
+          audience: {
+            id: 'baseline'
+          }
         }
-      }
-    }));
+      }, isComponentForwardRef ? {
+        ref: componentRef
+      } : {}))]
+    });
   }
   if (!variant) {
     return jsx(TrackExperience, Object.assign({
@@ -2185,14 +2253,20 @@ const Experience = _a => {
       // the profile is definitely defined, otherwise there wouldn't be an experience selected
       profile: profile
     }, {
-      children: jsx(Component, Object.assign({}, passthroughProps, baseline, {
-        ninetailed: {
-          isPersonalized: false,
-          audience: {
-            id: (audience === null || audience === void 0 ? void 0 : audience.id) || 'all visitors'
+      children: jsxs(Fragment, {
+        children: [!isComponentForwardRef && jsx(ComponentMarker, {
+          ref: componentRef
+        }), jsx(Component, Object.assign({}, passthroughProps, baseline, {
+          ninetailed: {
+            isPersonalized: false,
+            audience: {
+              id: (audience === null || audience === void 0 ? void 0 : audience.id) || 'all visitors'
+            }
           }
-        }
-      }))
+        }, isComponentForwardRef ? {
+          ref: componentRef
+        } : {}))]
+      })
     }), baseline.id);
   }
   const isVariantHidden = 'hidden' in variant && variant.hidden;
@@ -2202,15 +2276,21 @@ const Experience = _a => {
     // the profile is definitely defined, otherwise there wouldn't be an experience selected
     profile: profile
   }, {
-    children: !isVariantHidden ? /*#__PURE__*/createElement$1(Component, Object.assign({}, Object.assign(Object.assign({}, passthroughProps), variant), {
-      key: `${experience.id}-${variant.id}`,
-      ninetailed: {
-        isPersonalized,
-        audience: {
-          id: (audience === null || audience === void 0 ? void 0 : audience.id) || 'all visitors'
+    children: !isVariantHidden ? jsxs(Fragment, {
+      children: [!isComponentForwardRef && jsx(ComponentMarker, {
+        ref: componentRef
+      }), /*#__PURE__*/createElement$1(Component, Object.assign({}, Object.assign(Object.assign({}, passthroughProps), variant), {
+        key: `${experience.id}-${variant.id}`,
+        ninetailed: {
+          isPersonalized,
+          audience: {
+            id: (audience === null || audience === void 0 ? void 0 : audience.id) || 'all visitors'
+          }
         }
-      }
-    })) : null
+      }, isComponentForwardRef ? {
+        ref: componentRef
+      } : {}))]
+    }) : null
   }));
 };
 
@@ -2372,47 +2452,39 @@ const ExperimentsProvider = ({
   }));
 };
 
-const NinetailedProvider = props => {
-  const ninetailed = useMemo(() => {
-    if ('ninetailed' in props) {
-      return props.ninetailed;
-    }
-    const {
-      clientId,
-      environment,
-      preview,
-      url,
-      profile,
-      locale,
-      requestTimeout,
-      plugins = [],
-      onLog,
-      onError
-    } = props;
-    return new Ninetailed({
-      clientId,
-      environment,
-      preview
-    }, {
-      url,
-      plugins,
-      profile,
-      locale,
-      requestTimeout,
-      onLog,
-      onError
-    });
-  }, []);
-  const {
-    experiments = [],
-    maximumActiveExperiments,
-    children
-  } = props;
+const NinetailedProvider = ({
+  children,
+  clientId,
+  experiments: _experiments = [],
+  maximumActiveExperiments,
+  environment,
+  preview,
+  url,
+  profile,
+  locale,
+  requestTimeout,
+  plugins: _plugins = [],
+  onLog,
+  onError
+}) => {
+  const ninetailed = useMemo(() => new Ninetailed({
+    clientId,
+    environment,
+    preview
+  }, {
+    url,
+    plugins: _plugins,
+    profile,
+    locale,
+    requestTimeout,
+    onLog,
+    onError
+  }), []);
   return jsx(NinetailedContext.Provider, Object.assign({
     value: ninetailed
   }, {
     children: jsx(ExperimentsProvider, Object.assign({
-      experiments: experiments,
+      experiments: _experiments,
       maximumActiveExperiments: maximumActiveExperiments
     }, {
       children: children

package/lib/Experience/ComponentMarker.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ComponentMarker: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>;

package/lib/NinetailedProvider.d.ts

@@ -1,13 +1,11 @@
 import React from 'react';
-import { Ninetailed, NinetailedPlugin, ExperienceConfiguration } from '@ninetailed/experience.js';
+import { NinetailedPlugin, ExperienceConfiguration } from '@ninetailed/experience.js';
 import { Profile, Locale, OnErrorHandler, OnLogHandler } from '@ninetailed/experience.js-shared';
-type ExperimentProviderProps = {
-    experiments?: ExperienceConfiguration<any>[];
-    maximumActiveExperiments?: number;
-};
-export type NinetailedProviderInstantiationProps = {
+export type NinetailedProviderProps = {
     clientId: string;
     environment?: string;
+    experiments?: ExperienceConfiguration<any>[];
+    maximumActiveExperiments?: number;
     preview?: boolean;
     url?: string;
     plugins?: (NinetailedPlugin | NinetailedPlugin[])[];
@@ -16,9 +14,5 @@ export type NinetailedProviderInstantiationProps = {
     requestTimeout?: number;
     onLog?: OnLogHandler;
     onError?: OnErrorHandler;
-} & ExperimentProviderProps;
-export type NinetailedProviderProps = NinetailedProviderInstantiationProps | ({
-    ninetailed: Ninetailed;
-} & ExperimentProviderProps);
-export declare const NinetailedProvider: (props: React.PropsWithChildren<NinetailedProviderProps>) => JSX.Element;
-export {};
+};
+export declare const NinetailedProvider: ({ children, clientId, experiments, maximumActiveExperiments, environment, preview, url, profile, locale, requestTimeout, plugins, onLog, onError, }: React.PropsWithChildren<NinetailedProviderProps>) => JSX.Element;

package/lib/index.d.ts

@@ -1,7 +1,7 @@
 export type { Profile, Variant } from '@ninetailed/experience.js-shared';
 export type { ExperienceConfiguration, ExperienceType, EXPERIENCE_TRAIT_PREFIX, } from '@ninetailed/experience.js';
 export { NinetailedProvider } from './NinetailedProvider';
-export type { NinetailedProviderProps, NinetailedProviderInstantiationProps, } from './NinetailedProvider';
+export type { NinetailedProviderProps } from './NinetailedProvider';
 export { useNinetailed } from './useNinetailed';
 export { useProfile } from './useProfile';
 export { usePersonalize } from './usePersonalize';

package/lib/useProfile.d.ts

@@ -10,6 +10,7 @@ export declare const useProfile: () => {
     status: "success";
     profile: {
         id: string;
+        stableId: string;
         random: number;
         audiences: string[];
         traits: import("@ninetailed/experience.js-shared").Properties;
@@ -28,6 +29,7 @@ export declare const useProfile: () => {
             timezone?: string | undefined;
         };
         session: {
+            id: string;
             isReturningVisitor: boolean;
             landingPage: {
                 path: string;

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "@ninetailed/experience.js-react",
-  "version": "4.2.3-beta.0",
+  "version": "4.3.0-beta.0",
   "peerDependencies": {
     "react": ">=16.8.0"
   },
   "dependencies": {
     "@analytics/google-analytics": "0.5.3",
     "react-visibility-sensor": "5.1.1",
-    "@ninetailed/experience.js": "4.2.3-beta.0",
+    "@ninetailed/experience.js": "4.3.0-beta.0",
+    "react-is": "18.2.0",
     "react-intersection-observer": "8.34.0",
-    "@ninetailed/experience.js-shared": "4.2.3-beta.0",
+    "@ninetailed/experience.js-shared": "4.3.0-beta.0",
     "radash": "10.9.0",
     "analytics": "0.8.1"
   },