Skip to content

Commit

Permalink
[FSSDK-9494] Quality of life updates picked from #210 (#212)
Browse files Browse the repository at this point in the history
* Quality of life updates picked from #210

* Add extra EOF lf

* Correct dep versions

* Lint fixes

* Upgrade tough-cookie for CVE fix

* Remove direct dep [email protected]

---------

Co-authored-by: Mike Chu <[email protected]>
  • Loading branch information
mikechu-optimizely and Mike Chu authored Sep 21, 2023
1 parent 4d01f0d commit 434b4e5
Show file tree
Hide file tree
Showing 9 changed files with 168 additions and 134 deletions.
49 changes: 19 additions & 30 deletions .devcontainer/devcontainer.json
Original file line number Diff line number Diff line change
@@ -1,35 +1,24 @@
// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
{
"name": "React SDK",

// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
"image": "mcr.microsoft.com/devcontainers/javascript-node:1-18-bullseye",
"name": "React SDK",

// Features to add to the dev container. More info: https://containers.dev/features.
// "features": {},
"image": "mcr.microsoft.com/devcontainers/javascript-node:1-18-bullseye",

// Use 'forwardPorts' to make a list of ports inside the container available locally.
// "forwardPorts": [],
"postCreateCommand": "npm install -g npm && yarn install",

// Use 'postCreateCommand' to run commands after the container is created.
"postCreateCommand": "npm install -g npm && yarn install",

// Configure tool-specific properties.
"customizations": {
"vscode": {
"extensions": [
"dbaeumer.vscode-eslint",
"eamodio.gitlens",
"esbenp.prettier-vscode",
"Gruntfuggly.todo-tree",
"github.vscode-github-actions",
"Orta.vscode-jest",
"ms-vscode.test-adapter-converter"
]
}
}

// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
// "remoteUser": "root"
"customizations": {
"vscode": {
"extensions": [
"dbaeumer.vscode-eslint",
"eamodio.gitlens",
"esbenp.prettier-vscode",
"Gruntfuggly.todo-tree",
"github.vscode-github-actions",
"Orta.vscode-jest",
"ms-vscode.test-adapter-converter"
],
"settings": {
"files.eol": "\n"
}
}
}
}
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,4 @@ lib
dist/
build/
.rpt2_cache
.env
12 changes: 6 additions & 6 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"jest.autoRun": {
"onStartup": [
"all-tests"
]
},
}
"jest.autoRun": {
"onStartup": ["all-tests"]
},
"jest.jestCommandLine": "./node_modules/.bin/jest",
"jest.autoRevealOutput": "on-exec-error"
}
38 changes: 38 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -286,6 +286,44 @@ const WrappedMyComponent = withOptimizely(MyComp);

**_Note:_** The `optimizely` client object provided via `withOptimizely` is automatically associated with the `user` prop passed to the ancestor `OptimizelyProvider` - the `id` and `attributes` from that `user` object will be automatically forwarded to all appropriate SDK method calls. So, there is no need to pass the `userId` or `attributes` arguments when calling methods of the `optimizely` client object, unless you wish to use _different_ `userId` or `attributes` than those given to `OptimizelyProvider`.

## `useContext`

Any component under the `<OptimizelyProvider>` can access the Optimizely `ReactSDKClient` via the `OptimizelyContext` with `useContext`.

_arguments_
- `OptimizelyContext : React.Context<OptimizelyContextInterface>` The Optimizely context initialized in a parent component (or App).

_returns_
- Wrapped object:
- `optimizely : ReactSDKClient` The client object which was passed to the `OptimizelyProvider`
- `isServerSide : boolean` Value that was passed to the `OptimizelyProvider`
- `timeout : number | undefined` The timeout which was passed to the `OptimizelyProvider`

### Example

```jsx
import React, { useContext } from 'react';
import { OptimizelyContext } from '@optimizely/react-sdk';

function MyComponent() {
const { optimizely, isServerSide, timeout } = useContext(OptimizelyContext);
const decision = optimizely.decide('my-feature');
const onClick = () => {
optimizely.track('signup-clicked');
// rest of your click handling code
};
return (
<>
{ decision.enabled && <p>My feature is enabled</p> }
{ !decision.enabled && <p>My feature is disabled</p> }
{ decision.variationKey === 'control-variation' && <p>Current Variation</p> }
{ decision.variationKey === 'experimental-variation' && <p>Better Variation</p> }
<button onClick={onClick}>Sign Up!</button>
</>
);
}
```

### Tracking

Use the `withOptimizely` HoC for tracking.
Expand Down
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
"version": "2.9.2",
"description": "React SDK for Optimizely Feature Experimentation, Optimizely Full Stack (legacy), and Optimizely Rollouts",
"homepage": "https://github.com/optimizely/react-sdk",
"repository": "https://github.com/optimizely/react-sdk",
"license": "Apache-2.0",
"module": "dist/react-sdk.es.js",
"types": "dist/index.d.ts",
Expand Down Expand Up @@ -33,7 +34,7 @@
"access": "public"
},
"dependencies": {
"@optimizely/optimizely-sdk": "^5.0.0-beta2",
"@optimizely/optimizely-sdk": "5.0.0-beta2",
"hoist-non-react-statics": "^3.3.0",
"prop-types": "^15.6.2",
"utility-types": "^2.1.0 || ^3.0.0"
Expand Down
41 changes: 21 additions & 20 deletions scripts/build.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
/**
* Copyright 2019, Optimizely
* Copyright 2019, 2023 Optimizely
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
* https://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
Expand All @@ -14,34 +14,35 @@
* limitations under the License.
*/

const fs = require("fs");
const path = require("path");
const execSync = require("child_process").execSync;
const path = require('path');
const execSync = require('child_process').execSync;

process.chdir(path.resolve(__dirname, ".."));
process.chdir(path.resolve(__dirname, '..'));

function exec(command, extraEnv) {
return execSync(command, {
stdio: "inherit",
env: Object.assign({}, process.env, extraEnv)
stdio: 'inherit',
env: Object.assign({}, process.env, extraEnv),
});
}

const packageName = 'react-sdk';
const umdName = 'optimizelyReactSdk'

console.log("\nBuilding ES modules...");
const umdName = 'optimizelyReactSdk';

console.log('\nBuilding ES modules...');
exec(`./node_modules/.bin/rollup -c scripts/config.js -f es -o dist/${packageName}.es.js`);

console.log("\nBuilding CommonJS modules...");

console.log('\nBuilding CommonJS modules...');
exec(`./node_modules/.bin/rollup -c scripts/config.js -f cjs -o dist/${packageName}.js`);

console.log("\nBuilding UMD modules...");

exec(`./node_modules/.bin/rollup -c scripts/config.js -f umd -o dist/${packageName}.umd.js --name ${umdName}`, {EXTERNALS: 'forBrowsers', BUILD_ENV: 'production' });

console.log("\nBuilding SystemJS modules...");

exec(`./node_modules/.bin/rollup -c scripts/config.js -f system -o dist/${packageName}.system.js`, {EXTERNALS: 'forBrowsers', BUILD_ENV: 'production' });
console.log('\nBuilding UMD modules...');
exec(`./node_modules/.bin/rollup -c scripts/config.js -f umd -o dist/${packageName}.umd.js --name ${umdName}`, {
EXTERNALS: 'forBrowsers',
BUILD_ENV: 'production',
});

console.log('\nBuilding SystemJS modules...');
exec(`./node_modules/.bin/rollup -c scripts/config.js -f system -o dist/${packageName}.system.js`, {
EXTERNALS: 'forBrowsers',
BUILD_ENV: 'production',
});
47 changes: 23 additions & 24 deletions scripts/config.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
/**
* Copyright 2019, Optimizely
* Copyright 2019, 2023 Optimizely
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
* https://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
Expand All @@ -14,23 +14,22 @@
* limitations under the License.
*/

const typescript = require('rollup-plugin-typescript2')
const commonjs = require('@rollup/plugin-commonjs')
const replace = require('@rollup/plugin-replace')
const { nodeResolve } = require('@rollup/plugin-node-resolve')
const { uglify } = require('rollup-plugin-uglify')
const typescript = require('rollup-plugin-typescript2');
const commonjs = require('@rollup/plugin-commonjs');
const replace = require('@rollup/plugin-replace');
const { nodeResolve } = require('@rollup/plugin-node-resolve');
const { uglify } = require('rollup-plugin-uglify');

const packageDeps = require('../package.json').dependencies || {}
const packagePeers = require('../package.json').peerDependencies || {}
const packageDeps = require('../package.json').dependencies || {};
const packagePeers = require('../package.json').peerDependencies || {};

function getExternals(externals) {
let externalLibs;
if(externals === 'forBrowsers') {
externalLibs = ['react']
if (externals === 'forBrowsers') {
externalLibs = ['react'];
} else {
externalLibs = (externals === 'peers')
? Object.keys(packagePeers)
: Object.keys(packageDeps).concat(Object.keys(packagePeers))
externalLibs =
externals === 'peers' ? Object.keys(packagePeers) : Object.keys(packageDeps).concat(Object.keys(packagePeers));
}
externalLibs.push('crypto');
return externalLibs;
Expand All @@ -40,40 +39,40 @@ function getPlugins(env, externals) {
const plugins = [
nodeResolve({
browser: externals === 'forBrowsers',
preferBuiltins: externals !== 'forBrowsers'
preferBuiltins: externals !== 'forBrowsers',
}),
commonjs({
include: /node_modules/,
}),
]
];

if (env) {
plugins.push(
replace({
'process.env.NODE_ENV': JSON.stringify(env),
}),
)
})
);
}

plugins.push(typescript())
plugins.push(typescript());

if (env === 'production') {
plugins.push(uglify())
plugins.push(uglify());
}

return plugins
return plugins;
}

const config = {
input: 'src/index.ts',
output: {
globals: {
react: 'React',
crypto: 'crypto'
crypto: 'crypto',
},
},
external: getExternals(process.env.EXTERNALS),
plugins: getPlugins(process.env.BUILD_ENV, process.env.EXTERNALS),
}
};

module.exports = config
module.exports = config;
Loading

0 comments on commit 434b4e5

Please sign in to comment.