[FSSDK-9494] Quality of life updates picked from #210 (#212)

* 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]>

Author: mikechu-optimizely

.devcontainer/devcontainer.json

@@ -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"
+      }
+    }
+  }
 }

.gitignore

@@ -7,3 +7,4 @@ lib
 dist/
 build/
 .rpt2_cache
+.env

.vscode/settings.json

@@ -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"
+}

README.md

@@ -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.

package.json

@@ -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",
@@ -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"

scripts/build.js

@@ -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,
@@ -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',
+});

scripts/config.js

@@ -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,
@@ -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;
@@ -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;