@ninetailed/experience.js-react 4.3.0-beta.2 → 5.0.0-beta.2

package/index.cjs

@@ -5,7 +5,6 @@ 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');
@@ -2054,7 +2053,7 @@ const useExperience = ({
     }));
   }
   const audience = experience.audience;
-  const variant = experience_js.selectExperienceVariant({
+  const variant = experience_js.selectExperienceVariantClientSide({
     baseline,
     experience,
     profile
@@ -2088,36 +2087,6 @@ 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,
@@ -2171,10 +2140,6 @@ 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,
@@ -2189,10 +2154,6 @@ 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({
@@ -2202,33 +2163,10 @@ 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 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
-      } : {}))]
-    });
+    return /*#__PURE__*/React.createElement(Component, Object.assign({}, passthroughProps, baseline, {
+      key: baseline.id
+    }));
   }
   if (status === 'loading') {
     return /*#__PURE__*/React.createElement(LoadingComponent, Object.assign({}, baseline, {
@@ -2239,20 +2177,14 @@ const Experience = _a => {
     }));
   }
   if (!experience) {
-    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'
-          }
+    return jsxRuntime.jsx(Component, Object.assign({}, passthroughProps, baseline, {
+      ninetailed: {
+        isPersonalized: false,
+        audience: {
+          id: 'baseline'
         }
-      }, isComponentForwardRef ? {
-        ref: componentRef
-      } : {}))]
-    });
+      }
+    }));
   }
   if (!variant) {
     return jsxRuntime.jsx(TrackExperience, Object.assign({
@@ -2261,20 +2193,14 @@ const Experience = _a => {
       // the profile is definitely defined, otherwise there wouldn't be an experience selected
       profile: profile
     }, {
-      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'
-            }
+      children: 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;
@@ -2284,21 +2210,15 @@ const Experience = _a => {
     // the profile is definitely defined, otherwise there wouldn't be an experience selected
     profile: profile
   }, {
-    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'
-          }
+    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'
         }
-      }, isComponentForwardRef ? {
-        ref: componentRef
-      } : {}))]
-    }) : null
+      }
+    })) : null
   }));
 };
 
@@ -2460,39 +2380,45 @@ const ExperimentsProvider = ({
   }));
 };
 
-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
-  }), []);
+const NinetailedProvider = props => {
+  const ninetailed = React.useMemo(() => {
+    if ('ninetailed' in props) {
+      return props.ninetailed;
+    }
+    const {
+      clientId,
+      environment,
+      preview,
+      url,
+      locale,
+      requestTimeout,
+      plugins = [],
+      onLog,
+      onError
+    } = props;
+    return new experience_js.Ninetailed({
+      clientId,
+      environment,
+      preview
+    }, {
+      url,
+      plugins,
+      locale,
+      requestTimeout,
+      onLog,
+      onError
+    });
+  }, []);
+  const {
+    experiments = [],
+    maximumActiveExperiments,
+    children
+  } = props;
   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,7 +1,6 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-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 React, { createContext, useContext, useEffect, useState, useRef, useMemo, createElement as createElement$1, useCallback } from 'react';
+import { selectDistribution, makeExperienceSelectMiddleware, selectHasExperienceVariants, selectActiveExperiments, selectExperience, selectExperienceVariantClientSide, Ninetailed, selectVariant } from '@ninetailed/experience.js';
 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';
@@ -2046,7 +2045,7 @@ const useExperience = ({
     }));
   }
   const audience = experience.audience;
-  const variant = selectExperienceVariant({
+  const variant = selectExperienceVariantClientSide({
     baseline,
     experience,
     profile
@@ -2080,36 +2079,6 @@ 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,
@@ -2163,10 +2132,6 @@ 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,
@@ -2181,10 +2146,6 @@ 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({
@@ -2194,33 +2155,10 @@ 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 jsxs(Fragment, {
-      children: [!isComponentForwardRef && jsx(ComponentMarker, {
-        ref: componentRef
-      }), /*#__PURE__*/createElement$1(Component, Object.assign({}, passthroughProps, baseline, {
-        key: baseline.id
-      }, isComponentForwardRef ? {
-        ref: componentRef
-      } : {}))]
-    });
+    return /*#__PURE__*/createElement$1(Component, Object.assign({}, passthroughProps, baseline, {
+      key: baseline.id
+    }));
   }
   if (status === 'loading') {
     return /*#__PURE__*/createElement$1(LoadingComponent, Object.assign({}, baseline, {
@@ -2231,20 +2169,14 @@ const Experience = _a => {
     }));
   }
   if (!experience) {
-    return jsxs(Fragment, {
-      children: [!isComponentForwardRef && jsx(ComponentMarker, {
-        ref: componentRef
-      }), jsx(Component, Object.assign({}, passthroughProps, baseline, {
-        ninetailed: {
-          isPersonalized: false,
-          audience: {
-            id: 'baseline'
-          }
+    return jsx(Component, Object.assign({}, passthroughProps, baseline, {
+      ninetailed: {
+        isPersonalized: false,
+        audience: {
+          id: 'baseline'
         }
-      }, isComponentForwardRef ? {
-        ref: componentRef
-      } : {}))]
-    });
+      }
+    }));
   }
   if (!variant) {
     return jsx(TrackExperience, Object.assign({
@@ -2253,20 +2185,14 @@ const Experience = _a => {
       // the profile is definitely defined, otherwise there wouldn't be an experience selected
       profile: profile
     }, {
-      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'
-            }
+      children: 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;
@@ -2276,21 +2202,15 @@ const Experience = _a => {
     // the profile is definitely defined, otherwise there wouldn't be an experience selected
     profile: profile
   }, {
-    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'
-          }
+    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'
         }
-      }, isComponentForwardRef ? {
-        ref: componentRef
-      } : {}))]
-    }) : null
+      }
+    })) : null
   }));
 };
 
@@ -2452,39 +2372,45 @@ const ExperimentsProvider = ({
   }));
 };
 
-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
-  }), []);
+const NinetailedProvider = props => {
+  const ninetailed = useMemo(() => {
+    if ('ninetailed' in props) {
+      return props.ninetailed;
+    }
+    const {
+      clientId,
+      environment,
+      preview,
+      url,
+      locale,
+      requestTimeout,
+      plugins = [],
+      onLog,
+      onError
+    } = props;
+    return new Ninetailed({
+      clientId,
+      environment,
+      preview
+    }, {
+      url,
+      plugins,
+      locale,
+      requestTimeout,
+      onLog,
+      onError
+    });
+  }, []);
+  const {
+    experiments = [],
+    maximumActiveExperiments,
+    children
+  } = props;
   return jsx(NinetailedContext.Provider, Object.assign({
     value: ninetailed
   }, {
     children: jsx(ExperimentsProvider, Object.assign({
-      experiments: _experiments,
+      experiments: experiments,
       maximumActiveExperiments: maximumActiveExperiments
     }, {
       children: children

package/lib/NinetailedProvider.d.ts

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

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 } from './NinetailedProvider';
+export type { NinetailedProviderProps, NinetailedProviderInstantiationProps, } from './NinetailedProvider';
 export { useNinetailed } from './useNinetailed';
 export { useProfile } from './useProfile';
 export { usePersonalize } from './usePersonalize';

package/lib/useProfile.d.ts

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

package/package.json

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

package/lib/Experience/ComponentMarker.d.ts

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