@ninetailed/experience.js-react 7.5.0 → 7.6.0-beta.1

package/index.cjs

@@ -34,7 +34,8 @@ const NinetailedProvider = props => {
       buildClientContext,
       onInitProfileId,
       componentViewTrackingThreshold,
-      storageImpl
+      storageImpl,
+      useClientSideEvaluation
     } = props;
     return new experience_js.Ninetailed({
       clientId,
@@ -50,7 +51,8 @@ const NinetailedProvider = props => {
       buildClientContext,
       onInitProfileId,
       componentViewTrackingThreshold,
-      storageImpl
+      storageImpl,
+      useClientSideEvaluation
     });
   }, []);
   const {
@@ -251,80 +253,18 @@ const MergeTag = ({
   });
 };
 
-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
 }) => {
-  const profileState = useProfile();
+  const ninetailed = useNinetailed();
   const hasVariants = experiences.map(experience => experience_js.selectHasExperienceVariants(experience, baseline)).reduce((acc, curr) => acc || curr, false);
-  const {
-    status,
-    profile
-  } = profileState;
-  const experienceSelectionMiddleware = useExperienceSelectionMiddleware({
-    experiences,
-    baseline,
-    profile
-  });
-  const overrideResult = _a => {
-    var {
-        experience: originalExperience,
-        variant: originalVariant,
-        variantIndex: originalVariantIndex
-      } = _a,
-      other = __rest(_a, ["experience", "variant", "variantIndex"]);
-    const {
-      experience,
-      variant,
-      variantIndex
-    } = experienceSelectionMiddleware({
-      experience: originalExperience,
-      variant: originalVariant,
-      variantIndex: originalVariantIndex
-    });
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    return Object.assign(Object.assign({}, other), {
-      audience: (experience === null || experience === void 0 ? void 0 : experience.audience) ? experience.audience : null,
-      experience,
-      variant,
-      variantIndex
-    });
-  };
-  const baseReturn = Object.assign(Object.assign({}, profileState), {
+  const [experience, setExperience] = React.useState({
     hasVariants,
-    baseline
-  });
-  const emptyReturn = Object.assign(Object.assign({}, baseReturn), {
+    baseline,
+    error: null,
+    loading: true,
+    status: 'loading',
     experience: null,
     variant: baseline,
     variantIndex: 0,
@@ -332,51 +272,15 @@ const useExperience = ({
     isPersonalized: false,
     profile: null
   });
-  if (status === 'loading') {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    return overrideResult(emptyReturn);
-  }
-  if (status === 'error') {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    return overrideResult(emptyReturn);
-  }
-  if (!profile) {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    return overrideResult(emptyReturn);
-  }
-  const experience = experience_js.selectExperience({
-    experiences,
-    profile
-  });
-  if (!experience) {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    return overrideResult(Object.assign(Object.assign({}, emptyReturn), {
-      profile
-    }));
-  }
-  const {
-    variant,
-    index
-  } = experience_js.selectExperienceVariant({
-    baseline,
-    experience,
-    profile
-  });
-  return overrideResult(Object.assign(Object.assign({}, baseReturn), {
-    status: 'success',
-    loading: false,
-    error: null,
-    experience,
-    variant,
-    variantIndex: index,
-    audience: experience.audience ? experience.audience : null,
-    profile,
-    isPersonalized: true
-  }));
+  React.useEffect(() => {
+    return ninetailed.onSelectVariant({
+      baseline,
+      experiences
+    }, state => {
+      setExperience(state);
+    });
+  }, [JSON.stringify(baseline), JSON.stringify(experiences)]);
+  return experience;
 };
 
 const ComponentMarker = /*#__PURE__*/React.forwardRef((_, ref) => {

package/index.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { createContext, useMemo, useContext, useState, useRef, useEffect, createElement, forwardRef } from 'react';
-import { Ninetailed, selectVariant, makeExperienceSelectMiddleware, selectHasExperienceVariants, selectExperience, selectExperienceVariant } from '@ninetailed/experience.js';
+import { Ninetailed, selectVariant, selectHasExperienceVariants } from '@ninetailed/experience.js';
 import { logger, isBrowser } from '@ninetailed/experience.js-shared';
 import { isEqual, get } from 'radash';
 import { useInView } from 'react-intersection-observer';
@@ -26,7 +26,8 @@ const NinetailedProvider = props => {
       buildClientContext,
       onInitProfileId,
       componentViewTrackingThreshold,
-      storageImpl
+      storageImpl,
+      useClientSideEvaluation
     } = props;
     return new Ninetailed({
       clientId,
@@ -42,7 +43,8 @@ const NinetailedProvider = props => {
       buildClientContext,
       onInitProfileId,
       componentViewTrackingThreshold,
-      storageImpl
+      storageImpl,
+      useClientSideEvaluation
     });
   }, []);
   const {
@@ -243,80 +245,18 @@ const MergeTag = ({
   });
 };
 
-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
 }) => {
-  const profileState = useProfile();
+  const ninetailed = useNinetailed();
   const hasVariants = experiences.map(experience => selectHasExperienceVariants(experience, baseline)).reduce((acc, curr) => acc || curr, false);
-  const {
-    status,
-    profile
-  } = profileState;
-  const experienceSelectionMiddleware = useExperienceSelectionMiddleware({
-    experiences,
-    baseline,
-    profile
-  });
-  const overrideResult = _a => {
-    var {
-        experience: originalExperience,
-        variant: originalVariant,
-        variantIndex: originalVariantIndex
-      } = _a,
-      other = __rest(_a, ["experience", "variant", "variantIndex"]);
-    const {
-      experience,
-      variant,
-      variantIndex
-    } = experienceSelectionMiddleware({
-      experience: originalExperience,
-      variant: originalVariant,
-      variantIndex: originalVariantIndex
-    });
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    return Object.assign(Object.assign({}, other), {
-      audience: (experience === null || experience === void 0 ? void 0 : experience.audience) ? experience.audience : null,
-      experience,
-      variant,
-      variantIndex
-    });
-  };
-  const baseReturn = Object.assign(Object.assign({}, profileState), {
+  const [experience, setExperience] = useState({
     hasVariants,
-    baseline
-  });
-  const emptyReturn = Object.assign(Object.assign({}, baseReturn), {
+    baseline,
+    error: null,
+    loading: true,
+    status: 'loading',
     experience: null,
     variant: baseline,
     variantIndex: 0,
@@ -324,51 +264,15 @@ const useExperience = ({
     isPersonalized: false,
     profile: null
   });
-  if (status === 'loading') {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    return overrideResult(emptyReturn);
-  }
-  if (status === 'error') {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    return overrideResult(emptyReturn);
-  }
-  if (!profile) {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    return overrideResult(emptyReturn);
-  }
-  const experience = selectExperience({
-    experiences,
-    profile
-  });
-  if (!experience) {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    return overrideResult(Object.assign(Object.assign({}, emptyReturn), {
-      profile
-    }));
-  }
-  const {
-    variant,
-    index
-  } = selectExperienceVariant({
-    baseline,
-    experience,
-    profile
-  });
-  return overrideResult(Object.assign(Object.assign({}, baseReturn), {
-    status: 'success',
-    loading: false,
-    error: null,
-    experience,
-    variant,
-    variantIndex: index,
-    audience: experience.audience ? experience.audience : null,
-    profile,
-    isPersonalized: true
-  }));
+  useEffect(() => {
+    return ninetailed.onSelectVariant({
+      baseline,
+      experiences
+    }, state => {
+      setExperience(state);
+    });
+  }, [JSON.stringify(baseline), JSON.stringify(experiences)]);
+  return experience;
 };
 
 const ComponentMarker = /*#__PURE__*/forwardRef((_, ref) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ninetailed/experience.js-react",
-  "version": "7.5.0",
+  "version": "7.6.0-beta.1",
   "peerDependencies": {
     "react": ">=16.8.0"
   },
@@ -10,8 +10,8 @@
   "type": "module",
   "types": "./src/index.d.ts",
   "dependencies": {
-    "@ninetailed/experience.js": "7.5.0",
-    "@ninetailed/experience.js-shared": "7.5.0",
+    "@ninetailed/experience.js": "7.6.0-beta.1",
+    "@ninetailed/experience.js-shared": "7.6.0-beta.1",
     "radash": "10.9.0",
     "react-intersection-observer": "8.34.0",
     "react-is": "18.2.0"

package/src/lib/Experience/useExperience.d.ts

@@ -1,24 +1,24 @@
-import { Baseline, ExperienceConfiguration, Profile, Reference, VariantRef } from '@ninetailed/experience.js';
-type Load<Variant extends Reference> = {
+import { ExperienceConfiguration, Profile, Reference, VariantRef } from '@ninetailed/experience.js';
+type Load<TBaseline extends Reference> = {
     status: 'loading';
     loading: boolean;
     hasVariants: boolean;
-    baseline: Baseline;
+    baseline: TBaseline;
     experience: null;
-    variant: Variant;
+    variant: TBaseline;
     variantIndex: 0;
     audience: null;
     isPersonalized: boolean;
     profile: null;
     error: null;
 };
-type Success<Variant extends Reference> = {
+type Success<TBaseline extends Reference, TVariant extends Reference> = {
     status: 'success';
     loading: boolean;
     hasVariants: boolean;
-    baseline: Baseline;
-    experience: ExperienceConfiguration<Variant> | null;
-    variant: Variant;
+    baseline: TBaseline;
+    experience: ExperienceConfiguration<TVariant> | null;
+    variant: TBaseline | TVariant;
     variantIndex: number;
     audience: {
         id: string;
@@ -27,23 +27,23 @@ type Success<Variant extends Reference> = {
     profile: Profile;
     error: null;
 };
-type Fail<Variant extends Reference> = {
+type Fail<TBaseline extends Reference> = {
     status: 'error';
     loading: boolean;
     hasVariants: boolean;
-    baseline: Baseline;
+    baseline: TBaseline;
     experience: null;
-    variant: Variant;
+    variant: TBaseline;
     variantIndex: 0;
     audience: null;
     isPersonalized: boolean;
     profile: null;
     error: Error;
 };
-type UseExperienceArgs<Variant extends Reference> = {
-    baseline: Baseline;
-    experiences: ExperienceConfiguration<Variant>[];
+type UseExperienceArgs<TBaseline extends Reference, TVariant extends Reference> = {
+    baseline: TBaseline;
+    experiences: ExperienceConfiguration<TVariant>[];
 };
-type UseExperienceResponse<Variant extends Reference> = Load<Variant | VariantRef> | Success<Variant | VariantRef> | Fail<Variant | VariantRef>;
-export declare const useExperience: <Variant extends Reference>({ baseline, experiences, }: UseExperienceArgs<Variant>) => UseExperienceResponse<Variant>;
+type UseExperienceReturn<TBaseline extends Reference, TVariant extends Reference> = Load<TBaseline> | Success<TBaseline, TVariant | VariantRef> | Fail<TBaseline>;
+export declare const useExperience: <TBaseline extends Reference, TVariant extends Reference>({ baseline, experiences, }: UseExperienceArgs<TBaseline, TVariant>) => UseExperienceReturn<TBaseline, TVariant>;
 export {};

package/src/lib/NinetailedContext.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { NinetailedInstance } from '@ninetailed/experience.js';
-export declare const NinetailedContext: import("react").Context<NinetailedInstance | undefined>;
+export declare const NinetailedContext: import("react").Context<NinetailedInstance<import("@ninetailed/experience.js").Reference, import("@ninetailed/experience.js").Reference> | undefined>;

package/src/lib/NinetailedProvider.d.ts

@@ -16,6 +16,7 @@ export type NinetailedProviderInstantiationProps = {
     buildClientContext?: () => NinetailedRequestContext;
     onInitProfileId?: OnInitProfileId;
     storageImpl?: Storage;
+    useClientSideEvaluation?: boolean;
 };
 export type NinetailedProviderProps = NinetailedProviderInstantiationProps | {
     ninetailed: Ninetailed;

package/src/lib/useNinetailed.d.ts

@@ -1 +1,3 @@
-export declare const useNinetailed: () => import("dist/packages/sdks/javascript/src").NinetailedInstance;
+import { Reference } from '@ninetailed/experience.js-shared';
+import { NinetailedInstance } from '@ninetailed/experience.js';
+export declare const useNinetailed: <TBaseline extends Reference = Reference, TVariant extends Reference = Reference>() => NinetailedInstance<TBaseline, TVariant>;

package/src/lib/Experience/useExperienceSelectionMiddleware.d.ts

@@ -1,12 +0,0 @@
-import { ExperienceConfiguration, Profile, Reference } from '@ninetailed/experience.js-shared';
-type UseExperienceSelectionMiddlewareArg<Variant extends Reference> = {
-    experiences: ExperienceConfiguration<Variant>[];
-    baseline: Reference;
-    profile: Profile | null;
-};
-export declare const useExperienceSelectionMiddleware: <Variant extends Reference>({ experiences, baseline, profile, }: UseExperienceSelectionMiddlewareArg<Variant>) => ({ experience, variant, variantIndex, }: import("@ninetailed/experience.js").ExperienceSelectionMiddlewareReturnArg<Variant | import("@ninetailed/experience.js-shared").VariantRef>) => {
-    experience: ExperienceConfiguration<Variant | import("@ninetailed/experience.js-shared").VariantRef> | null;
-    variant: Variant | import("@ninetailed/experience.js-shared").VariantRef;
-    variantIndex: number;
-};
-export {};