Skip to content

Commit 5d70fef

Browse files
author
zhaopeng
committed
feat: release 1.0.1
1 parent c6b905e commit 5d70fef

22 files changed

+958
-2
lines changed

‎.gitignore‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
dist/
2+
build/
3+
coverage
4+
node_modules/
5+
yarn.lock
6+
package-lock.json
7+
.DS_Store
8+
lib
9+
.idea
10+
.vscode/
11+
.husky/

‎README.md‎

Lines changed: 96 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,96 @@
1-
# client-sdk-js
2-
FeatureProbe Client Side SDK for JavaScript
1+
# FeatureProbe Client Side SDK for JavaScript
2+
3+
Feature Probe is an open source feature management service. This SDK is used to control features in JavaScript programs. This
4+
SDK is designed primarily for use in multi-user systems such as web servers and applications.
5+
6+
## Getting started
7+
8+
In this guide we explain how to use feature toggles in a JavaScript application using FeatureProbe.
9+
10+
### Step 1. Install the JavaScript SDK
11+
12+
First, install the FeatureProbe SDK as a dependency in your application.
13+
14+
```js
15+
npm install featureprobe-client-sdk-js --save
16+
```
17+
18+
Or via CDN:
19+
20+
```js
21+
<script type="text/javascript" src="https://unpkg.com/featureprobe-client-sdk-js@latest/dist/featureprobe-client-sdk-js.min.js"></script>
22+
```
23+
24+
25+
### Step 2. Create a FeatureProbe instance
26+
27+
After you install and import the SDK, create a single, shared instance of the FeatureProbe sdk.
28+
29+
```js
30+
const user = new featureProbe.FPUser("#USER-KEY#");
31+
user.with("#ATTR-KEY#", "#ATTR-VALUE#");
32+
33+
const fp = new featureProbe.FeatureProbe({
34+
remoteUrl: "#OPEN-API-URL#",
35+
togglesUrl: "#YOUR-TOGGLES-URL#",
36+
eventsUrl: "#YOUR-EVENTS-URL#",
37+
clientSdkKey: '#YOUR-CLIENT-SDK-KEY#',
38+
user,
39+
refreshInterval: 1000,
40+
});
41+
fp.start();
42+
```
43+
44+
45+
### Step 3. Use the instance to get your setting value
46+
47+
You can use sdk to check which value this user will receive for a given feature flag.
48+
49+
```js
50+
fp.on('ready', function() {
51+
const result = fp.boolValue('ui_demo_toggle', false);
52+
if (result) {
53+
do_some_thing();
54+
} else {
55+
do_other_thing();
56+
}
57+
const reason = fp.boolDetail('ui_demo_toggle', false);
58+
console.log(reason);
59+
})
60+
```
61+
62+
## Available options
63+
64+
This SDK takes the following options:
65+
66+
| option | required | default | description |
67+
|-------------------|----------------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------|
68+
| remoteUrl | it all depends | n/a | The common URL to get toggles and send events. E.g.: `https://featureprobe.com/api` It is required when togglesUrl and eventsUrl are not set |
69+
| togglesUrl | no | n/a | The specific URL to get toggles, once set, remoteUrl become invalid |
70+
| eventsUrl | no | n/a | The specific URL to send events, once set, remoteUrl become invalid |
71+
| clientSdkKey | yes | n/a | The Client SDK Key URL to be used |
72+
| user | yes | n/a | Pass a valid user context for SDK initialization |
73+
| refreshInterval | no | 1000 | The SDK check for updated in millisecond |
74+
75+
## Testing
76+
77+
We have unified integration tests for all our SDKs. Integration test cases are added as submodules for each SDK repo. So
78+
be sure to pull submodules first to get the latest integration tests before running tests.
79+
80+
```js
81+
npm run test
82+
```
83+
84+
## Contributing
85+
We are working on continue evolving FeatureProbe core, making it flexible and easier to use.
86+
Development of FeatureProbe happens in the open on GitHub, and we are grateful to the
87+
community for contributing bugfixes and improvements.
88+
89+
Please read [CONTRIBUTING](https://github.com/FeatureProbe/featureprobe/blob/master/CONTRIBUTING.md)
90+
for details on our code of conduct, and the process for taking part in improving FeatureProbe.
91+
92+
93+
## License
94+
95+
This project is licensed under the Apache 2.0 License - see the [LICENSE](LICENSE) file for details.
96+

‎commitlint.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = {extends: ['@commitlint/config-conventional']}

‎config/tsconfig.cjs.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"extends": "../tsconfig",
3+
"compilerOptions": {
4+
"module": "commonjs",
5+
"outDir": "../dist/cjs"
6+
}
7+
}

‎config/tsconfig.esm.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"extends": "../tsconfig",
3+
"compilerOptions": {
4+
"module": "ESNext",
5+
"outDir": "../dist/esm"
6+
}
7+
}

‎config/tsconfig.types.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"extends": "../tsconfig",
3+
"compilerOptions": {
4+
"declaration": true,
5+
"emitDeclarationOnly": true,
6+
"outDir": "../dist/types"
7+
}
8+
}

‎config/tsconfig.umd.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"extends": "../tsconfig",
3+
"compilerOptions": {
4+
"module": "commonjs",
5+
"declaration": false
6+
}
7+
}

‎config/webpack.config.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
const path = require('path')
2+
3+
module.exports = {
4+
mode: 'production',
5+
entry: './src/index.ts',
6+
output: {
7+
path: path.resolve(__dirname, '../dist/umd'),
8+
filename: 'index.js',
9+
library: 'exampleTypescriptPackage',
10+
libraryTarget: 'umd',
11+
globalObject: 'this',
12+
},
13+
module: {
14+
rules: [
15+
{
16+
test: /\.ts(x*)?$/,
17+
exclude: /node_modules/,
18+
use: {
19+
loader: 'ts-loader',
20+
options: {
21+
configFile: 'config/tsconfig.umd.json',
22+
},
23+
},
24+
},
25+
],
26+
},
27+
resolve: {
28+
extensions: ['.ts', '.js'],
29+
},
30+
}

‎example/index.html‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
6+
<meta
7+
name="viewport"
8+
content="width=device-width, initial-scale=1, shrink-to-fit=no"
9+
/>
10+
11+
<title>FeatureProbe JS SDK demo</title>
12+
<style>
13+
.result {
14+
color: #556ee6;
15+
}
16+
</style>
17+
<script src="../dist/featureprobe-client-sdk-js.min.js"></script>
18+
</head>
19+
20+
<body>
21+
<div class="container">
22+
<h2 class="mt-2">FeatureProbe JS SDK demo</h2>
23+
<p>
24+
This is a simple front-end-only application using FeatureProbe JS SDK.
25+
</p>
26+
27+
<h3>boolean type</h3>
28+
<ul>
29+
<li>
30+
FeatureProbe evaluation boolean type toggle result is : <span class="result" id="boolean-result"></span>
31+
</li>
32+
<li>
33+
FeatureProbe evaluation boolean type toggle detail is : <span class="result" id="boolean-detail"></span>
34+
</li>
35+
</ul>
36+
37+
<h3>string type</h3>
38+
<ul>
39+
<li>
40+
FeatureProbe evaluation string type toggle result is : <span class="result" id="string-result"></span>
41+
</li>
42+
<li>
43+
FeatureProbe evaluation string type toggle detail is : <span class="result" id="string-detail"></span>
44+
</li>
45+
</ul>
46+
47+
<h3>number type</h3>
48+
<ul>
49+
<li>
50+
FeatureProbe evaluation number type toggle result is : <span class="result" id="number-result"></span>
51+
</li>
52+
<li>
53+
FeatureProbe evaluation number type toggle detail is : <span class="result" id="number-detail"></span>
54+
</li>
55+
</ul>
56+
57+
<h3>json type</h3>
58+
<ul>
59+
<li>
60+
FeatureProbe evaluation json type toggle result is : <span class="result" id="json-result"></span>
61+
</li>
62+
<li>
63+
FeatureProbe evaluation json type toggle detail is : <span class="result" id="json-detail"></span>
64+
</li>
65+
</ul>
66+
67+
</div>
68+
<script>
69+
const user = new featureProbe.FPUser(Date.now().toString());
70+
user.with("userId", "1234567890");
71+
72+
const fpClient = new featureProbe.FeatureProbe({
73+
remoteUrl: "http://127.0.0.1:4007",
74+
togglesUrl: "http://127.0.0.1:4007/api/client-sdk/toggles",
75+
eventsUrl: "http://127.0.0.1:4007/api/server/events",
76+
clientSdkKey: "client-25614c7e03e9cb49c0e96357b797b1e47e7f2dff",
77+
user,
78+
refreshInterval: 5000,
79+
});
80+
81+
fpClient.start();
82+
fpClient.on("ready", function() {
83+
const boolValue = fpClient.boolValue("bool_toggle_key", false);
84+
document.getElementById("boolean-result").innerText = boolValue;
85+
const boolDetail = fpClient.boolDetail("bool_toggle_key", false);
86+
document.getElementById("boolean-detail").innerText = JSON.stringify(boolDetail);
87+
88+
const stringValue = fpClient.stringValue("string_toggle_key", "default");
89+
document.getElementById("string-result").innerText = stringValue;
90+
const stringDetail = fpClient.stringDetail("string_toggle_key", "default");
91+
document.getElementById("string-detail").innerText = JSON.stringify(stringDetail);
92+
93+
const numberValue = fpClient.numberValue("number_toggle_key", 0);
94+
document.getElementById("number-result").innerText = numberValue;
95+
const numberDetail = fpClient.numberDetail("number_toggle_key", 0);
96+
document.getElementById("number-detail").innerText = JSON.stringify(numberDetail);
97+
98+
const jsonValue = fpClient.jsonValue("json_toggle_key", {});
99+
document.getElementById("json-result").innerText = JSON.stringify(jsonValue);
100+
const jsonDetail = fpClient.jsonDetail("json_toggle_key", {});
101+
document.getElementById("json-detail").innerText = JSON.stringify(jsonDetail);
102+
});
103+
</script>
104+
</body>
105+
</html>

‎jest.config.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
module.exports = {
2+
roots: ["<rootDir>/test"],
3+
testMatch: [
4+
"**/__tests__/**/*.+(ts|tsx|js)",
5+
"**/?(*.)+(spec|test).+(ts|tsx|js)",
6+
],
7+
transform: {
8+
"^.+\\.(ts|tsx)$": "ts-jest",
9+
},
10+
globals: {
11+
"ts-jest": {
12+
tsconfig: "tsconfig.json",
13+
},
14+
},
15+
setupFiles: ["./setupJest.js"],
16+
testEnvironment: "jsdom",
17+
};

0 commit comments

Comments
 (0)