chore: addressing PR comments

Author: joker23

packages/sdk/browser/example/.env.template

@@ -0,0 +1,5 @@
+# Set LD_CLIENT_SIDE_ID to your LaunchDarkly client-side ID
+LD_CLIENT_SIDE_ID=
+
+# Set LD_FLAG_KEY to the feature flag key you want to evaluate
+LD_FLAG_KEY=

packages/sdk/browser/example/README.md

@@ -13,22 +13,30 @@ We've built a simple browser application that demonstrates how this LaunchDarkly
 Below, you'll find the build procedure. For more comprehensive instructions, you can visit your [Quickstart page](https://app.launchdarkly.com/quickstart#/) or
 the [{name of SDK} reference guide](https://docs.launchdarkly.com/sdk/client-side/javascript).
 
+## Prerequisites
+
+Nodejs 20.6.0 or later
+
 ## Build instructions
 
-Modify [app.ts](./src/app.ts) with the following changes:
+1. Make a copy of the `.env.template` and name it `.env`
+    ```
+    cp .env.template .env
+    ```
 
-1. Set the value of the {`clientSideID`} variable in {file name} to your client-side ID:
-    ```typescript
-    const clientSideID = "my-client-side-id";
+2. Set the variables in `.env` to your specific LD values
     ```
-   
-2. If there is an existing boolean feature flag in your LaunchDarkly project that
-   you want to evaluate, set `flagKey` to the flag key:
-    ```typescript
-    const flagKey = "my-flag-key";
+    # Set LD_CLIENT_SIDE_ID to your LaunchDarkly client-side ID
+    LD_CLIENT_SIDE_ID=
+
+    # Set LD_FLAG_KEY to the feature flag key you want to evaluate
+    LD_FLAG_KEY=
     ```
+    > [!NOTE]
+    > Setting these values is equivilent to modifying the `clientSideID` and `flagKey`
+    > in [app.ts](./src/app.ts).
 
-3. If you haven't already, install and build the project:
+3. Install and build the project:
     ```bash
     yarn && yarn build
     ```
@@ -41,4 +49,4 @@ Modify [app.ts](./src/app.ts) with the following changes:
     > The `yarn start` script simply runs `open index.html`. If that is not working for you,
     > you can open the `index.html` file in a browser for the same results.
 
-The application will run continuously and react to the flag changes in LaunchDarkly.
+The application will run continuously and react to the flag changes in LaunchDarkly.

packages/sdk/browser/example/src/app.ts

@@ -1,10 +1,10 @@
 import { initialize } from '@launchdarkly/js-client-sdk';
 
 // Set clientSideID to your LaunchDarkly client-side ID
-const clientSideID = '';
+const clientSideID = 'LD_CLIENT_SIDE_ID';
 
 // Set flagKey to the feature flag key you want to evaluate
-const flagKey = 'sample-feature';
+const flagKey = 'LD_FLAG_KEY';
 
 // Set up the evaluation context. This context should appear on your
 // LaunchDarkly contexts dashboard soon after you run the demo.
@@ -17,30 +17,42 @@ const context = {
 const div = document.createElement('div');
 document.body.appendChild(div);
 div.appendChild(document.createTextNode('Initializing...'));
-try {
-  const ldclient = initialize(clientSideID);
-  const render = () => {
-    const flagValue = ldclient.variation(flagKey, false);
-    const label = `The ${flagKey} feature flag evaluates to ${flagValue}.`;
-    document.body.style.background = flagValue ? '#00844B' : '#373841';
-    div.replaceChild(document.createTextNode(label), div.firstChild as Node);
-  };
-
-  ldclient.on('error', () => {
-    div.replaceChild(document.createTextNode('Error caught in client SDK'), div.firstChild as Node);
-  });
-
-  ldclient.on('change', () => {
-    render();
-  });
-
-  ldclient.identify(context).catch(() => {
-    div.replaceChild(document.createTextNode('Error identifying client'), div.firstChild as Node);
-  });
-} catch (error) {
-  div.replaceChild(
-    document.createTextNode(`Error initializing LaunchDarkly client: ${error}`),
-    div.firstChild as Node,
-  );
-  document.body.style.background = '#373841';
-}
+
+const main = async () => {
+  try {
+    const ldclient = initialize(clientSideID);
+    const render = () => {
+      const flagValue = ldclient.variation(flagKey, false);
+      const label = `The ${flagKey} feature flag evaluates to ${flagValue}.`;
+      document.body.style.background = flagValue ? '#00844B' : '#373841';
+      div.replaceChild(document.createTextNode(label), div.firstChild as Node);
+    };
+
+    ldclient.on('error', () => {
+      div.replaceChild(
+        document.createTextNode('Error caught in client SDK'),
+        div.firstChild as Node,
+      );
+    });
+
+    // Listen for flag changes
+    ldclient.on('change', () => {
+      render();
+    });
+
+    const { status } = await ldclient.identify(context);
+    if (status === 'completed') {
+      render();
+    } else if (status === 'error') {
+      div.replaceChild(document.createTextNode('Error identifying client'), div.firstChild as Node);
+    }
+  } catch (error) {
+    div.replaceChild(
+      document.createTextNode(`Error initializing LaunchDarkly client: ${error}`),
+      div.firstChild as Node,
+    );
+    document.body.style.background = '#373841';
+  }
+};
+
+main();

packages/sdk/browser/example/tsdown.config.ts

@@ -1,9 +1,37 @@
 /* eslint-disable import/no-extraneous-dependencies */
+import fs from 'node:fs';
+import path from 'node:path';
+import { loadEnvFile } from 'node:process';
 import { defineConfig } from 'tsdown';
 
+if (fs.existsSync('.env')) {
+  loadEnvFile('.env');
+}
+
+const ENTRY_FILE = path.join('src', 'app.ts');
+const OUTPUT_FILE = path.join('dist', 'app.js');
+const { LD_CLIENT_SIDE_ID, LD_FLAG_KEY } = process.env;
+
+const CLIENT_SIDE_ID_PLACEHOLDER = 'LD_CLIENT_SIDE_ID';
+const FLAG_KEY_PLACEHOLDER = 'LD_FLAG_KEY';
+
 export default defineConfig({
-  entry: 'src/app.ts',
+  entry: ENTRY_FILE,
   platform: 'browser',
   outDir: 'dist',
   noExternal: ['@launchdarkly/js-client-sdk'],
+  hooks(hooks) {
+    hooks.hook('build:done', () => {
+      if (LD_CLIENT_SIDE_ID) {
+        const content = fs.readFileSync(OUTPUT_FILE).toString();
+        fs.writeFileSync(
+          OUTPUT_FILE,
+          content.replaceAll(CLIENT_SIDE_ID_PLACEHOLDER, LD_CLIENT_SIDE_ID),
+        );
+      }
+      const flagKey = LD_FLAG_KEY || 'sample-feature';
+      const content = fs.readFileSync(OUTPUT_FILE).toString();
+      fs.writeFileSync(OUTPUT_FILE, content.replaceAll(FLAG_KEY_PLACEHOLDER, flagKey));
+    });
+  },
 });