woocommerce/packages/js/explat
Sam Seay 35cdc6dc20
Use syncpack to lock pnpm version till we can fix issues (#50828)
2024-08-22 12:34:42 +12:00
..
changelog Use syncpack to lock pnpm version till we can fix issues (#50828) 2024-08-22 12:34:42 +12:00
src Monorepo: caching deps per target package in GH actions (#49020) 2024-07-10 14:39:49 +02:00
.eslintrc.js Add .eslintrc config to each packages 2022-03-29 16:08:07 +08:00
.npmrc Moved WCA Packages 2022-03-18 14:25:26 -07:00
CHANGELOG.md Prepare Packages for Release (#48402) 2024-06-11 22:03:35 +00:00
PREVIOUS_CHANGELOG.md Update JS packages changelogs (#33412) 2022-06-16 10:06:31 +12:00
README.md Add support for WooCommerce Analytics module in @woocommerce/explat (#45131) 2024-03-14 21:43:52 +00:00
babel.config.js Update dependencies and jest config to pass admin tests for pnpm 7 (#34428) 2022-08-31 12:06:51 +08:00
composer.json bump php version in packages/js/*/composer.json (#42020) 2024-01-04 10:18:34 -04:00
composer.lock Update changelogger to 3.3.0 to support PR number capturing with merge (#36266) 2023-01-05 14:42:51 +05:30
jest.config.json Fix Jest Preset (#42707) 2023-12-12 09:58:13 -08:00
package.json Use syncpack to lock pnpm version till we can fix issues (#50828) 2024-08-22 12:34:42 +12:00
tsconfig-cjs.json Enforce Strict `@types` Dependencies (#37351) 2023-03-23 18:02:20 -07:00
tsconfig.json Update tsconfigs to explicitly include files to avoid TS build errors (#47156) 2024-05-07 13:18:56 +12:00

README.md

ExPlat

This packages includes a component and utility functions that can be used to run A/B Tests in WooCommerce dashboard, report pages, and frontend pages.

Installation

Install the module

pnpm install @woocommerce/explat --save

This package assumes that your code will run in an ES2015+ environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using core-js or @babel/polyfill will add support for these methods. Learn more about it in Babel docs.

Usage with Experiment Component

import { Experiment } from '@woocommerce/explat';

const DefaultExperience = <div>Hello World</div>;

const TreatmentExperience = <div>Hello WooCommerce!</div>;

const LoadingExperience = <div></div>;

<Experiment
	name="woocommerce_example_experiment"
	defaultExperience={ DefaultExperience }
	treatmentExperience={ TreatmentExperience }
	loadingExperience={ LoadingExperience }
/>;

// Get the experiment assignment with authentication as a WPCOM user.
import { ExperimentWithAuth } from '@woocommerce/explat';

<ExperimentWithAuth
	name="woocommerce_example_experiment"
	defaultExperience={ DefaultExperience }
	treatmentExperience={ TreatmentExperience }
	loadingExperience={ LoadingExperience }
/>;

Usage with useExperiment

import { useExperiment } from '@woocommerce/explat';

const DefaultExperience = <div>Hello World</div>;

const TreatmentExperience = <div>Hello WooCommerce!</div>;

const [ isLoadingExperiment, experimentAssignment ] = useExperiment('experiment-name');

if ( ! isLoadingExperiment && experimentAssignment?.variationName === 'treatment' ) {
	return <TreatmentExperience />
}

return <DefaultExperience />