Skip to content

Commit

Permalink
chore: add more snippets around stable id (#321)
Browse files Browse the repository at this point in the history
  • Loading branch information
daniel-statsig authored Sep 19, 2024
1 parent d8ec2cb commit d9e7a7b
Show file tree
Hide file tree
Showing 5 changed files with 133 additions and 4 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
/* eslint-disable no-console */
import { myStatsigClient } from './sample-precomp-instance';

// <snippet>
const context = myStatsigClient.getContext();
console.log('Statsig StableID:', context.stableID);
// </snippet>
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion */

/* eslint-disable no-console */
import Statsig, { StatsigUser } from 'statsig-node';

import { StatsigClient } from '@statsig/js-client';

import { STATSIG_CLIENT_KEY as YOUR_CLIENT_KEY } from '../../Contants';

type Request = {
body: { user: StatsigUser };
};
type Response = {
json: (input: ResponseType) => void;
};
type RequestHandler = (req: Request, res: Response) => Promise<void>;
type ResponseType = {
values: string;
user: StatsigUser;
};

const app = {
post: (url: string, handler: RequestHandler) => {
console.log('req', url, handler);
},
};

function generateStableID(): string {
return '';
}

// <snippet>
// -- Server Side --
const isStatsigServerReady = Statsig.initialize(
process.env['STATSIG_SERVER_KEY']!,
);

app.post('/init-statsig-client', async (req, res) => {
await isStatsigServerReady;

const user = req.body.user;
if (!user.customIDs || !user.customIDs['stableID']) {
user.customIDs = {
...user.customIDs,
stableID: generateStableID(),
};
}

const values = Statsig.getClientInitializeResponse(
user,
YOUR_CLIENT_KEY, // <- Client Key
{
hash: 'djb2',
},
);

res.json({ values: JSON.stringify(values), user });
});
// </snippet>

// prettier-ignore
//<snippet>

// -- Client Side --
function loadUserData(): string {
// Returns the request body containing you user with optional stableID
// </snippet>
return '';
//<snippet>
}

// </snippet>

// prettier-ignore
export async function Sample(): Promise<void> {
// <snippet>
const { values, user: serverVerifiedUser } = await fetch('/init-statsig-client', {
method: 'POST',
body: loadUserData(),
}).then((res) => res.json() as Promise<ResponseType>);

const myStatsigClient = new StatsigClient(YOUR_CLIENT_KEY, serverVerifiedUser);
myStatsigClient.dataAdapter.setData(values);
myStatsigClient.initializeSync();
// </snippet>
}
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,21 @@ import { StatsigClient, StatsigUser } from '@statsig/js-client';
// </snippet>
import { STATSIG_CLIENT_KEY as YOUR_CLIENT_KEY } from '../../Contants';

// prettier-ignore
export async function Sample(): Promise<void> {
// <snippet>
const user: StatsigUser = {
const userWithStableID: StatsigUser = {
customIDs: {
stableID: 'my-custom-stable-id', // <- Your Stable ID (Must have key "stableID")
},
};

// Pass in your user object with a stableID
const myStatsigClient = new StatsigClient(YOUR_CLIENT_KEY, user);
const myStatsigClient = new StatsigClient(YOUR_CLIENT_KEY, userWithStableID);

// or, if you already have an initialized client, you can update the user instead
await myStatsigClient.updateUserAsync(userWithStableID);
// </snippet>

myStatsigClient.initializeAsync().catch((err) => console.error(err));
myStatsigClient.initializeAsync().catch((err) => console.error(err));
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
// <snippet>
import { useStatsigClient } from '@statsig/react-bindings';

function MyComponent() {
const { client } = useStatsigClient();
const context = client.getContext();

return <div>{context.stableID}</div>;
}
// </snippet>

// eslint-disable-next-line no-console
console.log(MyComponent);
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,17 @@

/* eslint-disable @typescript-eslint/no-inferrable-types */
// <snippet>
import { StatsigProvider } from '@statsig/react-bindings';
import { useEffect } from 'react';

import { StatsigProvider, useStatsigClient } from '@statsig/react-bindings';

// </snippet>
import { STATSIG_CLIENT_KEY as YOUR_CLIENT_KEY } from '../../Contants';

// prettier-ignore
export default async function Sample(): Promise<void> {
console.log(App);
console.log(MyComponent);
}

// <snippet>
Expand All @@ -27,4 +30,18 @@ function App() {
</StatsigProvider>
);
}

// or, if you already have an initialized client, you can update the user instead
function MyComponent() {
const { client } = useStatsigClient();
useEffect(() => {
client
.updateUserAsync({
customIDs: {
stableID: 'my-custom-stable-id', // <- Your Stable ID (Must have key "stableID")
},
})
.catch((err) => console.error(err));
}, [client]);
}
// </snippet>

0 comments on commit d9e7a7b

Please sign in to comment.