Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FSSDK-9602] Bug Bash + JS SDK Follow-ons + Bag-o Updates #210

Closed
wants to merge 56 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
56 commits
Select commit Hold shift + click to select a range
558b0a9
Remove devcontainer comments
mikechu-optimizely Aug 4, 2023
6f8aa75
Testing bug bash devcontainer config
mikechu-optimizely Aug 4, 2023
d83ba72
Remove the separate dev container conf
mikechu-optimizely Aug 4, 2023
cbb4845
Add setup & exec as npm scripts
mikechu-optimizely Aug 4, 2023
674b50c
Merge branch 'master' into mike/bug-bash
mikechu-optimizely Aug 4, 2023
772fdd4
Use LF by default when in devcontainer
mikechu-optimizely Aug 4, 2023
2eac90f
Update jest config
mikechu-optimizely Aug 4, 2023
a5df270
Update JS SDK via yarn.lock
mikechu-optimizely Aug 4, 2023
7d8d053
Convert to TS for bug bash
mikechu-optimizely Aug 4, 2023
75fc610
Prompt for SDK key for the bug bash
mikechu-optimizely Aug 4, 2023
4bf5c51
Ignore the .env file
mikechu-optimizely Aug 4, 2023
cca1084
Enhance setup.sh
mikechu-optimizely Aug 4, 2023
41c0e41
Conditionally npm
mikechu-optimizely Aug 4, 2023
6d67dfe
Change back to scripty .js
mikechu-optimizely Aug 4, 2023
b014634
Add boilerplate React bug-bash/app
mikechu-optimizely Aug 4, 2023
7d84ab0
Update setup.sh to install + run React app
mikechu-optimizely Aug 4, 2023
803a6ee
Update npm script to run bug-bash
mikechu-optimizely Aug 4, 2023
b72491c
Simplify setup.sh
mikechu-optimizely Aug 4, 2023
0c41798
Simplify the react app
mikechu-optimizely Aug 4, 2023
835911b
WIP: Update App + use local @optimizely/react-sdk
mikechu-optimizely Aug 4, 2023
4dc1db5
Add local React & dotenv
mikechu-optimizely Aug 7, 2023
a14a677
Update setup script
mikechu-optimizely Aug 7, 2023
52de93b
Remove dotenv
mikechu-optimizely Aug 8, 2023
a89ad2c
WIP bring .env values in
mikechu-optimizely Aug 8, 2023
07ecfe4
Complete WIP on reading SDK from .env
mikechu-optimizely Aug 14, 2023
2eb812c
Transfer @rafinutshaw-optimizely's work in
mikechu-optimizely Aug 14, 2023
88df778
Small style fix
mikechu-optimizely Aug 14, 2023
df3e319
Minor semantic HTML changes
mikechu-optimizely Aug 14, 2023
43cf5ad
A bunch'o NITs for my comfort
mikechu-optimizely Aug 14, 2023
55d55fd
Rename bug-bash setup & add run
mikechu-optimizely Aug 15, 2023
1d29b80
Ensure shell scripts use LF line endings
mikechu-optimizely Aug 15, 2023
d4f75a6
WIP testing & refactoring tests
mikechu-optimizely Aug 15, 2023
f88d129
Better doc & UI + Refactors
mikechu-optimizely Aug 16, 2023
dc4485b
Move Decision; Finish refactor existing tests
mikechu-optimizely Aug 18, 2023
381c42a
Add more tests based on spreadsheet\
mikechu-optimizely Aug 18, 2023
c55cb44
Add sendOdpEvent tests
mikechu-optimizely Aug 18, 2023
5a0c9c8
Last bits of documentation
mikechu-optimizely Aug 18, 2023
659e936
Update to use js sdk 5.0.0-beta4
mikechu-optimizely Aug 22, 2023
8d91b30
WIP test updates
mikechu-optimizely Aug 22, 2023
1f26f39
Update path to logging
mikechu-optimizely Aug 22, 2023
4ca21b6
Update bug bash to package-lock.json
mikechu-optimizely Aug 22, 2023
9f4c00c
Add @types/uuid 🤔
mikechu-optimizely Aug 22, 2023
ec875cd
Use /lib/ instead of /dist/ from JS SDK
mikechu-optimizely Aug 22, 2023
03f4779
Reset for other bashers
mikechu-optimizely Aug 22, 2023
47460ef
Add more documentation
mikechu-optimizely Aug 23, 2023
04dc93f
Upgrade vulnerable tough-cookie to v4.1.3
mikechu-optimizely Aug 25, 2023
07b779e
Add "repository" field to package.json
mikechu-optimizely Aug 25, 2023
c997ba2
Add `useContext` documentation from...
mikechu-optimizely Aug 28, 2023
0cc6b3d
Add EOF lines
mikechu-optimizely Aug 28, 2023
aaf637c
Merge branch 'master' into mike/bug-bash
mikechu-optimizely Aug 28, 2023
0e59549
Remove React.StrictMode
mikechu-optimizely Sep 1, 2023
4ebbb43
Remove Vite icon ref
mikechu-optimizely Sep 1, 2023
814d54e
Add decision button to change userId
mikechu-optimizely Sep 1, 2023
5667758
Remove variationKey validation
mikechu-optimizely Sep 1, 2023
4cd67ed
Upgrade to JS SDK 5.0.0-beta5
mikechu-optimizely Sep 1, 2023
3a958b8
Fix references to remove /lib
mikechu-optimizely Sep 1, 2023
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
4 changes: 3 additions & 1 deletion .vscode/settings.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,6 @@
"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
1 change: 1 addition & 0 deletions bug-bash/.gitattributes
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
*.sh text eol=lf
18 changes: 18 additions & 0 deletions bug-bash/app/.eslintrc.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parser: '@typescript-eslint/parser',
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
24 changes: 24 additions & 0 deletions bug-bash/app/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
27 changes: 27 additions & 0 deletions bug-bash/app/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
# React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

- Configure the top-level `parserOptions` property like this:

```js
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: ['./tsconfig.json', './tsconfig.node.json'],
tsconfigRootDir: __dirname,
},
```

- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
12 changes: 12 additions & 0 deletions bug-bash/app/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
Loading