@ninetailed/experience.js-react 4.2.0-beta.1 → 4.2.0-beta.10

package/index.cjs

@@ -7,20 +7,11 @@ var React = require('react');
 var experience_js = require('@ninetailed/experience.js');
 var reactIntersectionObserver = require('react-intersection-observer');
 var experience_jsShared = require('@ninetailed/experience.js-shared');
-var isEqual = require('lodash/isEqual');
-var has$1 = require('lodash/has');
-var _debounce = require('lodash/debounce');
-var values$1 = require('lodash/values');
-var get$1 = require('lodash/get');
+var radash = require('radash');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
-var has__default = /*#__PURE__*/_interopDefaultLegacy(has$1);
-var _debounce__default = /*#__PURE__*/_interopDefaultLegacy(_debounce);
-var values__default = /*#__PURE__*/_interopDefaultLegacy(values$1);
-var get__default = /*#__PURE__*/_interopDefaultLegacy(get$1);
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -1914,7 +1905,7 @@ const useProfile = () => {
    */
   React.useEffect(() => {
     ninetailed.onProfileChange(profileState => {
-      if (isEqual__default["default"](profileState, profileStateRef.current)) {
+      if (radash.isEqual(profileState, profileStateRef.current)) {
         experience_jsShared.logger.debug('Profile State Did Not Change', profileState);
         return;
       } else {
@@ -1955,6 +1946,35 @@ const useExperiments = () => {
   };
 };
 
+const useExperienceSelectionMiddleware = ({
+  experiences,
+  baseline,
+  profile
+}) => {
+  const {
+    plugins
+  } = useNinetailed();
+  const [_, setCurrentTime] = React.useState(Date.now());
+  const {
+    addListeners,
+    removeListeners,
+    middleware
+  } = React.useMemo(() => experience_js.makeExperienceSelectMiddleware({
+    plugins,
+    experiences,
+    baseline,
+    profile,
+    onChange: () => setCurrentTime(Date.now())
+  }), [plugins, experiences, baseline, profile]);
+  React.useEffect(() => {
+    addListeners();
+    return () => {
+      removeListeners();
+    };
+  }, [addListeners, removeListeners]);
+  return middleware;
+};
+
 const useExperience = ({
   baseline,
   experiences
@@ -1968,6 +1988,31 @@ const useExperience = ({
     status,
     profile
   } = profileState;
+  const experienceSelectionMiddleware = useExperienceSelectionMiddleware({
+    experiences,
+    baseline,
+    profile
+  });
+  const overrideResult = _a => {
+    var {
+        experience: originalExperience,
+        variant: originalVariant
+      } = _a,
+      other = __rest(_a, ["experience", "variant"]);
+    const {
+      experience,
+      variant
+    } = experienceSelectionMiddleware({
+      experience: originalExperience,
+      variant: originalVariant
+    });
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    return Object.assign(Object.assign({}, other), {
+      experience,
+      variant
+    });
+  };
   const baseReturn = Object.assign(Object.assign({}, profileState), {
     hasVariants,
     baseline
@@ -1982,17 +2027,17 @@ const useExperience = ({
   if (status === 'loading') {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    return emptyReturn;
+    return overrideResult(emptyReturn);
   }
   if (status === 'error') {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    return emptyReturn;
+    return overrideResult(emptyReturn);
   }
   if (!profile) {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    return emptyReturn;
+    return overrideResult(emptyReturn);
   }
   const activeExperiments = experience_js.selectActiveExperiments(experiments, profile);
   const experience = experience_js.selectExperience({
@@ -2003,9 +2048,9 @@ const useExperience = ({
   if (!experience) {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    return Object.assign(Object.assign({}, emptyReturn), {
+    return overrideResult(Object.assign(Object.assign({}, emptyReturn), {
       profile
-    });
+    }));
   }
   const audience = experience.audience;
   const variant = experience_js.selectExperienceVariant({
@@ -2014,7 +2059,7 @@ const useExperience = ({
     profile
   });
   if (!variant) {
-    return Object.assign(Object.assign({}, baseReturn), {
+    return overrideResult(Object.assign(Object.assign({}, baseReturn), {
       status: 'success',
       loading: false,
       error: null,
@@ -2023,9 +2068,9 @@ const useExperience = ({
       audience: audience ? audience : null,
       profile,
       isPersonalized: false
-    });
+    }));
   }
-  return Object.assign(Object.assign({}, baseReturn), {
+  return overrideResult(Object.assign(Object.assign({}, baseReturn), {
     status: 'success',
     loading: false,
     error: null,
@@ -2034,7 +2079,7 @@ const useExperience = ({
     audience: audience ? audience : null,
     profile,
     isPersonalized: true
-  });
+  }));
 };
 
 const useJoinExperiment = () => {
@@ -2042,35 +2087,6 @@ const useJoinExperiment = () => {
   return context.joinExperiment;
 };
 
-const useExperienceSelectionMiddleware = ({
-  experiences,
-  baseline,
-  profile
-}) => {
-  const {
-    plugins
-  } = useNinetailed();
-  const [_, setCurrentTime] = React.useState(Date.now());
-  const {
-    addListeners,
-    removeListeners,
-    middleware
-  } = React.useMemo(() => experience_js.makeExperienceSelectMiddleware({
-    plugins,
-    experiences,
-    baseline,
-    profile,
-    onChange: () => setCurrentTime(Date.now())
-  }), [plugins, experiences, baseline, profile]);
-  React.useEffect(() => {
-    addListeners();
-    return () => {
-      removeListeners();
-    };
-  }, [addListeners, removeListeners]);
-  return middleware;
-};
-
 const DefaultExperienceLoadingComponent = _a => {
   var {
       component: Component,
@@ -2128,8 +2144,8 @@ const Experience = _a => {
   const {
     status,
     hasVariants,
-    experience: originalExperience,
-    variant: originalVariant,
+    experience,
+    variant,
     audience,
     isPersonalized,
     profile
@@ -2137,18 +2153,6 @@ const Experience = _a => {
     baseline,
     experiences
   });
-  const experienceSelectionMiddleware = useExperienceSelectionMiddleware({
-    experiences,
-    baseline,
-    profile
-  });
-  const {
-    experience,
-    variant
-  } = experienceSelectionMiddleware({
-    experience: originalExperience,
-    variant: originalVariant
-  });
   const joinExperiment = useJoinExperiment();
   React.useEffect(() => {
     if (status === 'success' && experience && profile) {
@@ -2250,7 +2254,7 @@ const ESRLoadingComponent = _a => {
   const {
     experienceVariantsMap
   } = useESR();
-  const experience = experiences.find(experience => has__default["default"](experienceVariantsMap, experience.id));
+  const experience = experiences.find(experience => Object.prototype.hasOwnProperty.call(experienceVariantsMap, experience.id));
   if (!experience) {
     return jsxRuntime.jsx(Component, Object.assign({}, passthroughProps, baseline, {
       ninetailed: {
@@ -2305,14 +2309,16 @@ const ESRLoadingComponent = _a => {
 
 const EXPERIENCE_TRAIT_PREFIX = 'nt_experiment_';
 
-const debounce = (fn, wait, options) => {
+const debounce = (fn, wait) => {
   let debouncedArgs = [];
-  const debouncedFn = _debounce__default["default"](() => {
+  const debouncedFn = radash.debounce({
+    delay: wait !== null && wait !== void 0 ? wait : 0
+  }, () => {
     fn.call(undefined, debouncedArgs);
     debouncedArgs = [];
-  }, wait, options);
+  });
   return (...args) => {
-    debouncedArgs.push(values__default["default"](args));
+    debouncedArgs.push(args);
     debouncedFn();
   };
 };
@@ -2374,39 +2380,47 @@ 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,
+      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;
   return jsxRuntime.jsx(NinetailedContext.Provider, Object.assign({
     value: ninetailed
   }, {
     children: jsxRuntime.jsx(ExperimentsProvider, Object.assign({
-      experiments: _experiments,
+      experiments: experiments,
       maximumActiveExperiments: maximumActiveExperiments
     }, {
       children: children
@@ -2516,11 +2530,11 @@ const generateSelectors = id => {
 };
 const selectValueFromProfile = (profile, id) => {
   const selectors = generateSelectors(id);
-  const matchingSelector = selectors.find(selector => get__default["default"](profile, selector));
+  const matchingSelector = selectors.find(selector => radash.get(profile, selector));
   if (!matchingSelector) {
     return null;
   }
-  return get__default["default"](profile, matchingSelector);
+  return radash.get(profile, matchingSelector);
 };
 const MergeTag = ({
   id

package/index.js

@@ -1,13 +1,9 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import React, { createContext, useContext, useEffect, useState, useRef, useMemo, createElement as createElement$1, useCallback } from 'react';
-import { selectDistribution, selectHasExperienceVariants, selectActiveExperiments, selectExperience, selectExperienceVariant, makeExperienceSelectMiddleware, Ninetailed, selectVariant } from '@ninetailed/experience.js';
+import { selectDistribution, makeExperienceSelectMiddleware, selectHasExperienceVariants, selectActiveExperiments, selectExperience, selectExperienceVariant, Ninetailed, selectVariant } from '@ninetailed/experience.js';
 import { useInView } from 'react-intersection-observer';
 import { isBrowser, logger } from '@ninetailed/experience.js-shared';
-import isEqual from 'lodash/isEqual';
-import has$1 from 'lodash/has';
-import _debounce from 'lodash/debounce';
-import values$1 from 'lodash/values';
-import get$1 from 'lodash/get';
+import { isEqual, debounce as debounce$1, get as get$1 } from 'radash';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -1942,6 +1938,35 @@ const useExperiments = () => {
   };
 };
 
+const useExperienceSelectionMiddleware = ({
+  experiences,
+  baseline,
+  profile
+}) => {
+  const {
+    plugins
+  } = useNinetailed();
+  const [_, setCurrentTime] = useState(Date.now());
+  const {
+    addListeners,
+    removeListeners,
+    middleware
+  } = useMemo(() => makeExperienceSelectMiddleware({
+    plugins,
+    experiences,
+    baseline,
+    profile,
+    onChange: () => setCurrentTime(Date.now())
+  }), [plugins, experiences, baseline, profile]);
+  useEffect(() => {
+    addListeners();
+    return () => {
+      removeListeners();
+    };
+  }, [addListeners, removeListeners]);
+  return middleware;
+};
+
 const useExperience = ({
   baseline,
   experiences
@@ -1955,6 +1980,31 @@ const useExperience = ({
     status,
     profile
   } = profileState;
+  const experienceSelectionMiddleware = useExperienceSelectionMiddleware({
+    experiences,
+    baseline,
+    profile
+  });
+  const overrideResult = _a => {
+    var {
+        experience: originalExperience,
+        variant: originalVariant
+      } = _a,
+      other = __rest(_a, ["experience", "variant"]);
+    const {
+      experience,
+      variant
+    } = experienceSelectionMiddleware({
+      experience: originalExperience,
+      variant: originalVariant
+    });
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    return Object.assign(Object.assign({}, other), {
+      experience,
+      variant
+    });
+  };
   const baseReturn = Object.assign(Object.assign({}, profileState), {
     hasVariants,
     baseline
@@ -1969,17 +2019,17 @@ const useExperience = ({
   if (status === 'loading') {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    return emptyReturn;
+    return overrideResult(emptyReturn);
   }
   if (status === 'error') {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    return emptyReturn;
+    return overrideResult(emptyReturn);
   }
   if (!profile) {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    return emptyReturn;
+    return overrideResult(emptyReturn);
   }
   const activeExperiments = selectActiveExperiments(experiments, profile);
   const experience = selectExperience({
@@ -1990,9 +2040,9 @@ const useExperience = ({
   if (!experience) {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    return Object.assign(Object.assign({}, emptyReturn), {
+    return overrideResult(Object.assign(Object.assign({}, emptyReturn), {
       profile
-    });
+    }));
   }
   const audience = experience.audience;
   const variant = selectExperienceVariant({
@@ -2001,7 +2051,7 @@ const useExperience = ({
     profile
   });
   if (!variant) {
-    return Object.assign(Object.assign({}, baseReturn), {
+    return overrideResult(Object.assign(Object.assign({}, baseReturn), {
       status: 'success',
       loading: false,
       error: null,
@@ -2010,9 +2060,9 @@ const useExperience = ({
       audience: audience ? audience : null,
       profile,
       isPersonalized: false
-    });
+    }));
   }
-  return Object.assign(Object.assign({}, baseReturn), {
+  return overrideResult(Object.assign(Object.assign({}, baseReturn), {
     status: 'success',
     loading: false,
     error: null,
@@ -2021,7 +2071,7 @@ const useExperience = ({
     audience: audience ? audience : null,
     profile,
     isPersonalized: true
-  });
+  }));
 };
 
 const useJoinExperiment = () => {
@@ -2029,35 +2079,6 @@ const useJoinExperiment = () => {
   return context.joinExperiment;
 };
 
-const useExperienceSelectionMiddleware = ({
-  experiences,
-  baseline,
-  profile
-}) => {
-  const {
-    plugins
-  } = useNinetailed();
-  const [_, setCurrentTime] = useState(Date.now());
-  const {
-    addListeners,
-    removeListeners,
-    middleware
-  } = useMemo(() => makeExperienceSelectMiddleware({
-    plugins,
-    experiences,
-    baseline,
-    profile,
-    onChange: () => setCurrentTime(Date.now())
-  }), [plugins, experiences, baseline, profile]);
-  useEffect(() => {
-    addListeners();
-    return () => {
-      removeListeners();
-    };
-  }, [addListeners, removeListeners]);
-  return middleware;
-};
-
 const DefaultExperienceLoadingComponent = _a => {
   var {
       component: Component,
@@ -2115,8 +2136,8 @@ const Experience = _a => {
   const {
     status,
     hasVariants,
-    experience: originalExperience,
-    variant: originalVariant,
+    experience,
+    variant,
     audience,
     isPersonalized,
     profile
@@ -2124,18 +2145,6 @@ const Experience = _a => {
     baseline,
     experiences
   });
-  const experienceSelectionMiddleware = useExperienceSelectionMiddleware({
-    experiences,
-    baseline,
-    profile
-  });
-  const {
-    experience,
-    variant
-  } = experienceSelectionMiddleware({
-    experience: originalExperience,
-    variant: originalVariant
-  });
   const joinExperiment = useJoinExperiment();
   useEffect(() => {
     if (status === 'success' && experience && profile) {
@@ -2237,7 +2246,7 @@ const ESRLoadingComponent = _a => {
   const {
     experienceVariantsMap
   } = useESR();
-  const experience = experiences.find(experience => has$1(experienceVariantsMap, experience.id));
+  const experience = experiences.find(experience => Object.prototype.hasOwnProperty.call(experienceVariantsMap, experience.id));
   if (!experience) {
     return jsx(Component, Object.assign({}, passthroughProps, baseline, {
       ninetailed: {
@@ -2292,14 +2301,16 @@ const ESRLoadingComponent = _a => {
 
 const EXPERIENCE_TRAIT_PREFIX = 'nt_experiment_';
 
-const debounce = (fn, wait, options) => {
+const debounce = (fn, wait) => {
   let debouncedArgs = [];
-  const debouncedFn = _debounce(() => {
+  const debouncedFn = debounce$1({
+    delay: wait !== null && wait !== void 0 ? wait : 0
+  }, () => {
     fn.call(undefined, debouncedArgs);
     debouncedArgs = [];
-  }, wait, options);
+  });
   return (...args) => {
-    debouncedArgs.push(values$1(args));
+    debouncedArgs.push(args);
     debouncedFn();
   };
 };
@@ -2361,39 +2372,47 @@ 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,
+      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;
   return jsx(NinetailedContext.Provider, Object.assign({
     value: ninetailed
   }, {
     children: jsx(ExperimentsProvider, Object.assign({
-      experiments: _experiments,
+      experiments: experiments,
       maximumActiveExperiments: maximumActiveExperiments
     }, {
       children: children

package/lib/MergeTag.d.ts

@@ -4,6 +4,6 @@ type MergeTagProps = {
     id: string;
 };
 export declare const generateSelectors: (id: string) => string[];
-export declare const selectValueFromProfile: (profile: Profile, id: string) => any;
+export declare const selectValueFromProfile: (profile: Profile, id: string) => unknown;
 export declare const MergeTag: React.FC<React.PropsWithChildren<MergeTagProps>>;
 export {};

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

@@ -41,12 +41,7 @@ export declare const useProfile: () => {
             averageSessionLength: number;
         };
     };
-    error: null; /**
-     * This effect compares the old and new profile state before updating it.
-     * We use a ref to avoid an infinite loop which can happen when an empty profile state was updated with no changes.
-     * This behaviour occurred as the validation handling on the error property was not set properly in the "CreateProfile" and "UpdateProfile" endpoint types.
-     * Furthermore, it was also observed, that it "only" occurred when the preview plugin was used in parallel.
-     */
+    error: null;
 } | {
     loading: boolean;
     from: "api" | "hydrated";

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@ninetailed/experience.js-react",
-  "version": "4.2.0-beta.1",
+  "version": "4.2.0-beta.10",
   "peerDependencies": {
     "react": ">=16.8.0"
   },
   "dependencies": {
     "@analytics/google-analytics": "0.5.3",
     "react-visibility-sensor": "5.1.1",
-    "lodash": "4.17.21",
-    "@ninetailed/experience.js": "4.2.0-beta.1",
+    "@ninetailed/experience.js": "4.2.0-beta.10",
     "react-intersection-observer": "8.34.0",
-    "@ninetailed/experience.js-shared": "4.2.0-beta.1",
+    "@ninetailed/experience.js-shared": "4.2.0-beta.10",
+    "radash": "10.9.0",
     "analytics": "0.8.1"
   },
   "module": "./index.js",