New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@guardian/ab-react
Advanced tools
@guardian/ab-react - npm Package Compare versions
Comparing version 2.0.1 to 3.0.0
126
package.json
| { | ||
| "version": "2.0.1", | ||
| "name": "@guardian/ab-react", | ||
| "author": "The Guardian", | ||
| "license": "Apache-2.0", | ||
| "publishConfig": { | ||
| "access": "public" | ||
| }, | ||
| "files": [ | ||
| "dist/**/*" | ||
| ], | ||
| "source": "src/index.ts", | ||
| "main": "dist/index.js", | ||
| "module": "dist/index.modern.js", | ||
| "jest": { | ||
| "testEnvironment": "jest-environment-jsdom-sixteen" | ||
| }, | ||
| "scripts": { | ||
| "test": "jest", | ||
| "tsc": "tsc", | ||
| "lint": "eslint . --ext .ts", | ||
| "build": "microbundle --jsx React.createElement", | ||
| "dev": "microbundle watch --jsx React.createElement", | ||
| "validate": "yarn lint && yarn tsc && yarn test", | ||
| "prepublishOnly": "yarn validate && yarn build" | ||
| }, | ||
| "devDependencies": { | ||
| "@babel/core": "^7.9.6", | ||
| "@babel/plugin-proposal-optional-chaining": "^7.10.1", | ||
| "@babel/plugin-transform-runtime": "^7.9.6", | ||
| "@babel/preset-env": "^7.9.6", | ||
| "@babel/preset-react": "^7.9.4", | ||
| "@babel/preset-typescript": "^7.9.0", | ||
| "@testing-library/jest-dom": "^5.8.0", | ||
| "@testing-library/react": "^10.2.1", | ||
| "@types/jest": "^25.2.3", | ||
| "@types/react": "^16.9.36", | ||
| "@types/react-dom": "^16.9.8", | ||
| "@typescript-eslint/eslint-plugin": "^3.3.0", | ||
| "@typescript-eslint/parser": "^3.3.0", | ||
| "babel": "^6.23.0", | ||
| "eslint": "^7.1.0", | ||
| "eslint-config-airbnb-base": "^14.1.0", | ||
| "eslint-config-prettier": "^6.11.0", | ||
| "eslint-plugin-prettier": "^3.1.3", | ||
| "eslint-plugin-react": "^7.20.0", | ||
| "jest": "^26.0.1", | ||
| "jest-environment-jsdom-sixteen": "^1.0.3", | ||
| "microbundle": "^0.12.0-next.9", | ||
| "react": "^16.13.1", | ||
| "react-dom": "^16.13.1", | ||
| "ts-jest": "^26.1.0" | ||
| }, | ||
| "husky": { | ||
| "hooks": { | ||
| "pre-push": "pretty-quick --staged && yarn lint && yarn tsc && yarn test --watchAll=false" | ||
| } | ||
| }, | ||
| "eslintConfig": { | ||
| "root": true, | ||
| "ignorePatterns": [ | ||
| "/dist" | ||
| ], | ||
| "parser": "@typescript-eslint/parser", | ||
| "plugins": [ | ||
| "@typescript-eslint" | ||
| ], | ||
| "extends": [ | ||
| "eslint:recommended", | ||
| "plugin:prettier/recommended", | ||
| "plugin:react/recommended", | ||
| "plugin:@typescript-eslint/recommended" | ||
| ] | ||
| }, | ||
| "browserslist": { | ||
| "production": [ | ||
| ">0.2%", | ||
| "not dead", | ||
| "not op_mini all" | ||
| ], | ||
| "development": [ | ||
| "last 1 chrome version", | ||
| "last 1 firefox version", | ||
| "last 1 safari version" | ||
| ] | ||
| }, | ||
| "peerDependencies": { | ||
| "@guardian/ab-core": "2.0.0", | ||
| "react": "^16.13.1", | ||
| "react-dom": "^16.13.1" | ||
| }, | ||
| "gitHead": "3bbc0864c9c446bc50a53bd8053a0f3c682db2d2" | ||
| } | ||
| "name": "@guardian/ab-react", | ||
| "version": "3.0.0", | ||
| "private": false, | ||
| "description": "A React library for A/B & multivariate testing", | ||
| "homepage": "https://github.com/guardian/csnx/tree/main/libs/@guardian/ab-react#readme", | ||
| "bugs": { | ||
| "url": "https://github.com/guardian/csnx/issues" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/guardian/csnx.git" | ||
| }, | ||
| "license": "Apache-2.0", | ||
| "sideEffects": false, | ||
| "main": "cjs/libs/@guardian/ab-react/src/index.js", | ||
| "module": "esm/libs/@guardian/ab-react/src/index.js", | ||
| "peerDependencies": { | ||
| "@guardian/ab-core": "^3.0.0", | ||
| "react": "^17.0.2", | ||
| "react-dom": "^17.0.2", | ||
| "tslib": "^2.4.1", | ||
| "typescript": "^4.3.2" | ||
| }, | ||
| "peerDependenciesMeta": { | ||
| "typescript": { | ||
| "optional": true | ||
| } | ||
| }, | ||
| "publishConfig": { | ||
| "access": "public" | ||
| }, | ||
| "readme": "ERROR: No README data found!", | ||
| "_id": "@guardian/ab-react@3.0.0" | ||
| } |
@@ -1,5 +0,92 @@ | ||
| # AB React | ||
| # The Guardian's AB Testing Library for React | ||
| A React implementation for ab-testing | ||
| ## Getting Started | ||
| See the [main docs](https://github.com/guardian/ab-testing). | ||
| 1. Install the package and its peer dependencies with your manager of choice. | ||
| e.g. `pnpm add @guardian/ab-react @guardian/ab-core preact` | ||
| 2. [Initialise the AB Class](#initialising) in your project | ||
| 3. Consume the API [in your App](##consuming-in-app) or | ||
| [in your Components](#consuming-in-components) | ||
| > **Note** Read more on the [@guardian/ab-core](../ab-core/README.md) docs | ||
| ## How it works | ||
| 1. **Define the AB test**: Each AB test and their variants are defined in code | ||
| with configuration such as audience size & offset and impression & success | ||
| listeners etc | ||
| 2. **Initialise the library**: The AB Test library is initialised with | ||
| configuration values such as a user's MVT ID, an array of the above defined | ||
| A/B tests etc | ||
| 3. **Use the AB Test API**: The intialisation returns an API that can be used to | ||
| check if the current user is in a variant of a test along with a variety of | ||
| other API methods | ||
| ### Initialising | ||
| Initialise the config options with the ABProvider | ||
| ```tsx | ||
| import { render } from 'react-dom'; | ||
| import { ABProvider } from '@guardian/ab-react'; | ||
| render( | ||
| <ABProvider | ||
| arrayOfTestObjects={tests} | ||
| abTestSwitches={{ | ||
| ...{ abAbTestTest: true }, | ||
| ...CAPI.config.switches, | ||
| }} | ||
| pageIsSensitive={CAPI.config.isSensitive} | ||
| mvtMaxValue={1_000_000} | ||
| mvtId={mvtId} | ||
| ophanRecord={ophanRecordFunc} | ||
| > | ||
| <App CAPI={CAPI} NAV={NAV} /> | ||
| </ABProvider>, | ||
| ); | ||
| ``` | ||
| ### Consuming in App | ||
| ```tsx | ||
| import { useAB } from '@guardian/ab-react'; | ||
| // Initialise all of the impression and completion events | ||
| const ABTestAPI = useAB(); | ||
| useEffect(() => { | ||
| const allRunnableTests = ABTestAPI.allRunnableTests(tests); | ||
| ABTestAPI.registerImpressionEvents(allRunnableTests); | ||
| ABTestAPI.registerCompleteEvents(allRunnableTests); | ||
| }, [ABTestAPI]); | ||
| ``` | ||
| ### Consuming in Components | ||
| ```tsx | ||
| import { useAB } from '@guardian/ab-react'; | ||
| // Example usage of AB Tests | ||
| // Used in the Cypress tests as smoke test of the AB tests framework integration | ||
| const ABTestAPI = useAB(); | ||
| // We can check if a user is in a variant, returns a boolean | ||
| // ABTestTest being an ab test that was passed in via the ab test array | ||
| const abTestDataAttr = | ||
| (ABTestAPI.isUserInVariant('AbTestTest', 'control') && 'ab-test-control') || | ||
| (ABTestAPI.isUserInVariant('AbTestTest', 'variant') && 'ab-test-variant') || | ||
| 'ab-test-not-in-test'; | ||
| // We can get the variant straight from a check for | ||
| // whether the test is runnable | ||
| const runnableTest = ABTestAPI.runnableTest(abTestTest); | ||
| const variantFromRunnable = | ||
| (runnableTest && runnableTest.variantToRun.id) || 'not-runnable'; | ||
| <div | ||
| data-ab-user-in-variant={abTestDataAttr} | ||
| data-ab-runnable-test={variantFromRunnable} | ||
| > | ||
| AB Test | ||
| </div>; | ||
| ``` |
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
No contributors or author data
MaintenancePackage does not specify a list of contributors or an author in package.json.
Found 1 instance in 1 package
Fixed alerts
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
No bug tracker
MaintenancePackage does not have a linked bug tracker in package.json.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
No website
QualityPackage does not have a website.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1381.13%
415251
- Dev dependency count
- decreased by-100%
0
- Number of package files
- increased by386.96%
112
- Lines of code
- increased by3322.55%
3491
- Number of low quality alerts
- decreased by-100%
0
- Number of lines in readme file
- increased by1760%
93
Worsened metrics
- Dependency count
- increased by66.67%
5
- Number of low supply chain risk alerts
- increased by4500%
46
- Number of medium supply chain risk alerts
- increased byInfinity%
2
No dependency changes