@automattic/explat-client-react-helpers - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

dist/cjs/index.js

@@ -8,4 +8,9 @@ "use strict";
 var react_1 = tslib_1.__importStar(require("react"));
+var defaultExperimentOptions = {
+    isEligible: true,
+};
 function createExPlatClientReactHelpers(exPlatClient) {
-    var useExperiment = function (experimentName) {
+    var useExperiment = function (experimentName, providedOptions) {
+        if (providedOptions === void 0) { providedOptions = {}; }
+        var options = tslib_1.__assign(tslib_1.__assign({}, defaultExperimentOptions), providedOptions);
         var previousExperimentName = react_1.useState(experimentName)[0];
@@ -18,13 +23,13 @@ var _a = react_1.useState([
             var isSubscribed = true;
-            exPlatClient.loadExperimentAssignment(experimentName).then(function (experimentAssignment) {
-                if (isSubscribed) {
-                    setState([false, experimentAssignment]);
-                }
-            });
+            if (options.isEligible) {
+                exPlatClient.loadExperimentAssignment(experimentName).then(function (experimentAssignment) {
+                    if (isSubscribed) {
+                        setState([false, experimentAssignment]);
+                    }
+                });
+            }
             return function () {
                 isSubscribed = false;
             };
-            // We don't expect experimentName to ever change and if it does we want to assignment to stay constant.
-            // eslint-disable-next-line react-hooks/exhaustive-deps
-        }, []);
+        }, [experimentName, options.isEligible]);
         if (experimentName !== previousExperimentName &&
@@ -36,7 +41,10 @@ !previousExperimentName.startsWith('explat_test')) {
         }
+        if (!options.isEligible) {
+            return [false, null];
+        }
         return state;
     };
     var Experiment = function (_a) {
-        var defaultExperience = _a.defaultExperience, treatmentExperience = _a.treatmentExperience, loadingExperience = _a.loadingExperience, experimentName = _a.name;
-        var _b = useExperiment(experimentName), isLoading = _b[0], experimentAssignment = _b[1];
+        var defaultExperience = _a.defaultExperience, treatmentExperience = _a.treatmentExperience, loadingExperience = _a.loadingExperience, experimentName = _a.name, options = _a.options;
+        var _b = useExperiment(experimentName, options), isLoading = _b[0], experimentAssignment = _b[1];
         if (isLoading) {
@@ -51,4 +59,4 @@ return react_1.default.createElement(react_1.default.Fragment, null, loadingExperience);
     var ProvideExperimentData = function (_a) {
-        var children = _a.children, experimentName = _a.name;
-        var _b = useExperiment(experimentName), isLoading = _b[0], experimentAssignment = _b[1];
+        var children = _a.children, experimentName = _a.name, options = _a.options;
+        var _b = useExperiment(experimentName, options), isLoading = _b[0], experimentAssignment = _b[1];
         return children(isLoading, experimentAssignment);
@@ -55,0 +63,0 @@ };

dist/esm/index.js

@@ -0,1 +1,2 @@
+import { __assign } from "tslib";
 /**
@@ -5,4 +6,9 @@ * External dependencies
 import React, { useState, useEffect } from 'react';
+var defaultExperimentOptions = {
+    isEligible: true,
+};
 export default function createExPlatClientReactHelpers(exPlatClient) {
-    var useExperiment = function (experimentName) {
+    var useExperiment = function (experimentName, providedOptions) {
+        if (providedOptions === void 0) { providedOptions = {}; }
+        var options = __assign(__assign({}, defaultExperimentOptions), providedOptions);
         var previousExperimentName = useState(experimentName)[0];
@@ -15,13 +21,13 @@ var _a = useState([
             var isSubscribed = true;
-            exPlatClient.loadExperimentAssignment(experimentName).then(function (experimentAssignment) {
-                if (isSubscribed) {
-                    setState([false, experimentAssignment]);
-                }
-            });
+            if (options.isEligible) {
+                exPlatClient.loadExperimentAssignment(experimentName).then(function (experimentAssignment) {
+                    if (isSubscribed) {
+                        setState([false, experimentAssignment]);
+                    }
+                });
+            }
             return function () {
                 isSubscribed = false;
             };
-            // We don't expect experimentName to ever change and if it does we want to assignment to stay constant.
-            // eslint-disable-next-line react-hooks/exhaustive-deps
-        }, []);
+        }, [experimentName, options.isEligible]);
         if (experimentName !== previousExperimentName &&
@@ -33,7 +39,10 @@ !previousExperimentName.startsWith('explat_test')) {
         }
+        if (!options.isEligible) {
+            return [false, null];
+        }
         return state;
     };
     var Experiment = function (_a) {
-        var defaultExperience = _a.defaultExperience, treatmentExperience = _a.treatmentExperience, loadingExperience = _a.loadingExperience, experimentName = _a.name;
-        var _b = useExperiment(experimentName), isLoading = _b[0], experimentAssignment = _b[1];
+        var defaultExperience = _a.defaultExperience, treatmentExperience = _a.treatmentExperience, loadingExperience = _a.loadingExperience, experimentName = _a.name, options = _a.options;
+        var _b = useExperiment(experimentName, options), isLoading = _b[0], experimentAssignment = _b[1];
         if (isLoading) {
@@ -48,4 +57,4 @@ return React.createElement(React.Fragment, null, loadingExperience);
     var ProvideExperimentData = function (_a) {
-        var children = _a.children, experimentName = _a.name;
-        var _b = useExperiment(experimentName), isLoading = _b[0], experimentAssignment = _b[1];
+        var children = _a.children, experimentName = _a.name, options = _a.options;
+        var _b = useExperiment(experimentName, options), isLoading = _b[0], experimentAssignment = _b[1];
         return children(isLoading, experimentAssignment);
@@ -52,0 +61,0 @@ };

dist/types/index.d.ts

@@ -9,2 +9,10 @@ /**
 import type { ExPlatClient, ExperimentAssignment } from '@automattic/explat-client';
+interface ExperimentOptions {
+    /**
+     * Determines whether a participant is currenlty eligible for an assignment.
+     * - Only loads the experimentAssignment if isEligible is true.
+     * - Only returns the experimentAssignment if isEligible is true.
+     */
+    isEligible?: boolean;
+}
 interface ExPlatClientReactHelpers {
@@ -18,3 +26,3 @@ /**
      */
-    useExperiment: (experimentName: string) => [boolean, ExperimentAssignment | null];
+    useExperiment: (experimentName: string, options?: ExperimentOptions) => [boolean, ExperimentAssignment | null];
     /**
@@ -28,2 +36,3 @@ * Experiment component, safest and simplest, should be first choice if usable.
         loadingExperience: React.ReactNode;
+        options?: ExperimentOptions;
     }) => JSX.Element;
@@ -37,2 +46,3 @@ /**
         name: string;
+        options?: ExperimentOptions;
     }) => JSX.Element;
@@ -39,0 +49,0 @@ }

package.json

 {
 	"name": "@automattic/explat-client-react-helpers",
-	"version": "0.0.1",
+	"version": "0.0.2",
 	"description": "Standalone ExPlat Client: React Helpers",
@@ -26,11 +26,12 @@ "author": "Automattic Inc.",
 	"dependencies": {
-		"@automattic/explat-client": "^0.0.1",
-		"react": "^16.12.0"
+		"@automattic/explat-client": "^0.0.2",
+		"react": "^16.12.0",
+		"tslib": "^2.2.0"
 	},
 	"devDependencies": {
 		"@automattic/calypso-polyfills": "^1.0.0",
-		"@testing-library/react": "^10.0.5",
-		"@testing-library/react-hooks": "^3.4.2"
-	},
-	"gitHead": "7ee82e59db43edf99ce39415596d3374dd9fd6c4"
+		"@testing-library/react": "^11.2.6",
+		"@testing-library/react-hooks": "5.1.2",
+		"react-dom": "^16.12.0"
+	}
 }

README.md

@@ -19,2 +19,4 @@ # ExPlat Client: React Helpers
 	loadingExperience={ <LoadingComponent /> }
+	// Optional: See ExperimentOptions
+	options={experimentOptions}
 />;
@@ -39,3 +41,3 @@ ```
 	// Show loading experience
-} else if ( experimentAssignment.variationName === 'treatment' ) {
+} else if ( experimentAssignment?.variationName === 'treatment' ) {
 	// Provide treatment experience
@@ -51,2 +53,18 @@ } else {
 
+### ExperimentOptions
+
+`useExperiment`, `<Experiment>` and `<ProvideExperimentData>` also takes an options object:
+
+> `options.isEligible: Boolean = true`
+
+Use this to add an in-code eligibility check to whether you want to load an experiment, if false it will return `isLoading = false && experimentAssignment = null` which (if you use the above example if-statement or the `<Experiment>` or `<ProvideExperimentData>` components) should cause the default/fallback experience to show.
+
+It is up to you to ensure that the eligibility checks are consistent, the first eligible experiment will cause an assignment. This parameter can intuitively vary as expected for a hook or component argument, meaning that you can have the `isEligible` check be dynamic.
+
+Example usage:
+
+```
+const [ isLoadingExperimentAssignment, experimentAssignment ] = useExperiment( 'experiment_name', { isEligible: flow === 'launch-site' } );
+```
+
 ## API: `<ProvideExperimentData>`
@@ -61,4 +79,6 @@
 ```
-<ProvideExperimentData 
+<ProvideExperimentData
     name="experiment_name"
+	// Optional: See ExperimentOptions
+	options={experimentOptions}
     >
@@ -65,0 +85,0 @@ {(isLoading, experimentAssignment) => /* Your code here */}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

544

increased by18%

Number of lines in readme file

86

increased by30.3%

Worsened metrics

Total package byte prevSize

134043

decreased by-91.21%

Dependency count

3

increased by50%

Dev dependency count

4

increased by33.33%

Dependency changes

• + Addedtslib@^2.2.0

• + Added@automattic/explat-client@0.0.2(transitive)

• + Addedtslib@2.7.0(transitive)

• - Removed@automattic/explat-client@0.0.1(transitive)

• Updated@automattic/explat-client@^0.0.2