Skip to content

Commit 4b21616

Browse files
joker23joker23
committed
chore: adding shopify oxygen example
1 parent c2b1860 commit 4b21616

File tree

7 files changed

+198
-1
lines changed

7 files changed

+198
-1
lines changed

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,8 @@
4343
"contract-tests",
4444
"packages/sdk/combined-browser",
4545
"packages/sdk/shopify-oxygen",
46-
"packages/sdk/shopify-oxygen/contract-tests"
46+
"packages/sdk/shopify-oxygen/contract-tests",
47+
"packages/sdk/shopify-oxygen/example"
4748
],
4849
"private": true,
4950
"scripts": {

‎packages/sdk/shopify-oxygen/example/README.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# LaunchDarkly sample Shopify Oxygen application
2+
3+
We've built a simple console application that demonstrates how this LaunchDarkly SDK works.
4+
5+
Below, you'll find the build procedure. For more comprehensive instructions, you can visit your [Quickstart page](https://app.launchdarkly.com/quickstart#/).
6+
<!-- NOTE: no official docs in LD website yet
7+
or the [{name of SDK} reference guide](https://docs.launchdarkly.com/sdk/{path to the page for that SDK}).
8+
-->
9+
10+
This demo requires `Node >= 22.0.0` and `yarn@^3.4.1`
11+
12+
## Build instructions
13+
14+
1. Edit [`src/index.ts`](src/index.ts) and set the value of `sdkKey` to your LaunchDarkly SDK key.
15+
```
16+
const sdkKey = "1234567890abcdef";
17+
```
18+
19+
2. If there is an existing boolean feature flag in your LaunchDarkly project that
20+
you want to evaluate, set `flagKey` to the flag key:
21+
```
22+
const flagKey = "my-flag-key";
23+
```
24+
> Otherwise, `sample-feature` will be used by default.
25+
26+
3. On the command line, run `yarn start`, You should receive the message:
27+
```
28+
The {flagKey} feature flag evaluates to {flagValue}.
29+
```
30+
The application will run continuously and react to the flag changes in LaunchDarkly.

‎packages/sdk/shopify-oxygen/example/app.js‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import {createMiniOxygen} from '@shopify/mini-oxygen';
2+
3+
/**
4+
* This is script is a simple runner for our example app. This script will run
5+
* the compiled example on a local worker implementation to emulate a Oxygen worker runtime.
6+
*
7+
* For the actual example implementation, see the src/index.ts file.
8+
*/
9+
10+
const printValueAndBanner = (flagKey, flagValue) => {
11+
console.log(`*** The '${flagKey}' feature flag evaluates to ${flagValue}.`);
12+
13+
if (flagValue) {
14+
console.log(
15+
` ██
16+
██
17+
████████
18+
███████
19+
██ LAUNCHDARKLY █
20+
███████
21+
████████
22+
██
23+
██
24+
`,
25+
);
26+
}
27+
}
28+
29+
const main = async () => {
30+
// NOTE: you will see logging coming from mini-oxygen's default request hook.
31+
// https://github.com/Shopify/hydrogen/blob/5a38948133766e358c5f357f52562f6fdcfe7969/packages/mini-oxygen/src/worker/index.ts#L225
32+
const miniOxygen = createMiniOxygen({
33+
debug: false,
34+
workers: [
35+
{
36+
name: 'main',
37+
modules: true,
38+
scriptPath: 'dist/index.js'
39+
},
40+
],
41+
});
42+
43+
miniOxygen.ready.then(() => {
44+
console.log('Oxygen worker is started...');
45+
console.log('Dispatching fetch every 5 seconds. Press "q" or Ctrl+C to quit...');
46+
47+
// Dispatch fetch every 5 seconds
48+
const interval = setInterval(() => {
49+
// NOTE: This is a bogus URL and will not be used in the actual fetch handler.
50+
// please see the src/index.ts file for the actual fetch handler.
51+
miniOxygen.dispatchFetch('https://localhost:8000')
52+
.then(d => d.json())
53+
.then(({flagValue, flagKey}) => {
54+
console.clear();
55+
printValueAndBanner(flagKey, flagValue);
56+
console.log('Press "q" or Ctrl+C to quit...')
57+
}).catch((err) => {
58+
console.log('Error dispatching fetch:', err.message);
59+
console.log('Press "q" or Ctrl+C to quit...')
60+
});
61+
}, 1000);
62+
63+
// Handle keypresses for cleanup
64+
process.stdin.setRawMode(true);
65+
process.stdin.resume();
66+
process.stdin.setEncoding('utf8');
67+
68+
process.stdin.on('data', async (key) => {
69+
// Handle Ctrl+C
70+
if (key === '\u0003') {
71+
clearInterval(interval);
72+
await miniOxygen.dispose();
73+
process.exit();
74+
}
75+
76+
// Handle 'q' key
77+
if (key === 'q' || key === 'Q') {
78+
clearInterval(interval);
79+
await miniOxygen.dispose();
80+
process.exit();
81+
}
82+
});
83+
});
84+
}
85+
86+
main().catch(console.error);

‎packages/sdk/shopify-oxygen/example/package.json‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"name": "shopify-oxygen-sdk-example",
3+
"packageManager": "[email protected]",
4+
"scripts": {
5+
"build": "tsup",
6+
"clean": "rm -rf dist",
7+
"start": "yarn clean && yarn build && yarn node app.js"
8+
},
9+
"type": "module",
10+
"dependencies": {
11+
"@launchdarkly/shopify-oxygen-sdk": "latest",
12+
"@shopify/mini-oxygen": "^4.0.0"
13+
},
14+
"devDependencies": {
15+
"tsup": "^8.5.1"
16+
}
17+
}

‎packages/sdk/shopify-oxygen/example/src/index.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { init } from '@launchdarkly/shopify-oxygen-sdk';
2+
3+
// Set sdkKey to your LaunchDarkly SDK key.
4+
const sdkKey = 'sdk-c7636844-0606-40ca-a412-d23dd8ec762c';
5+
6+
// Set featureFlagKey to the feature flag key you want to evaluate.
7+
const flagKey = 'sample-feature';
8+
9+
const context = {
10+
kind: 'user',
11+
key: 'example-user-key',
12+
name: 'Sandy'
13+
};
14+
15+
const sdkOptions = {
16+
// See the README.md file for more information on the options.
17+
}
18+
19+
export default {
20+
async fetch() {
21+
const ldClient = await init(sdkKey, sdkOptions);
22+
await ldClient.waitForInitialization({ timeout: 10 });
23+
const flagValue = await ldClient.variation(flagKey, context, false);
24+
25+
return new Response(JSON.stringify({ flagKey, flagValue }), { status: 200 });
26+
}
27+
}

‎packages/sdk/shopify-oxygen/example/tsconfig.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"compilerOptions": {
3+
"allowSyntheticDefaultImports": true,
4+
"declaration": true,
5+
"declarationMap": true,
6+
"lib": ["es6"],
7+
"module": "es2022",
8+
"moduleResolution": "node",
9+
"noImplicitOverride": true,
10+
"outDir": "dist",
11+
"resolveJsonModule": true,
12+
"rootDir": ".",
13+
"skipLibCheck": true,
14+
"sourceMap": true,
15+
"strict": true,
16+
"stripInternal": true,
17+
"target": "ES2022",
18+
},
19+
"exclude": ["tsup.config.ts"]
20+
}

‎packages/sdk/shopify-oxygen/example/tsup.config.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// It is a dev dependency and the linter doesn't understand.
2+
// @ts-ignore - tsup is a dev dependency installed at runtime
3+
// eslint-disable-next-line import/no-extraneous-dependencies
4+
import { defineConfig } from 'tsup';
5+
6+
export default defineConfig({
7+
entry: {
8+
index: 'src/index.ts',
9+
},
10+
minify: true,
11+
format: ['esm'],
12+
splitting: false,
13+
clean: true,
14+
noExternal: ['@launchdarkly/shopify-oxygen-sdk'],
15+
dts: true,
16+
});

0 commit comments

Comments
 (0)