From 50e12e1a036bba05b440ec4c416e98af4fb4f88a Mon Sep 17 00:00:00 2001
From: duyhungtnn <duyhung71089@gmail.com>
Date: Wed, 29 Apr 2026 14:36:03 +0700
Subject: [PATCH 1/2] chore: add init/destroy UI and improve example flow

Revamp the example app to provide explicit Initialize/Destroy controls and improve logging and lifecycle handling. HTML: add Initialize and Destroy buttons, reorganize layout, and enhance the logs pane styling. TS: add AUTO_INIT_FLAG, stronger typings for button elements, timestamped logs, updateButtons helper, and new handleInit/handleDestroy flows that initialize/destroy the BKT client, register/remove evaluation update listeners, and update UI state. Also improve flush/user-attribute messages, move initialization behind the init handler (with optional auto-init), and ensure cleanup runs on beforeunload.
---
 example/index.html |  16 +++--
 example/index.ts   | 143 ++++++++++++++++++++++++---------------------
 2 files changed, 89 insertions(+), 70 deletions(-)
diff --git a/example/index.html b/example/index.html
index 8b8edb55..ac2f8db3 100644
--- a/example/index.html
+++ b/example/index.html
@@ -8,11 +8,17 @@
 </head>
 <body>
   <div id="app">
-    <button id="track_goal" type="button" disabled>track goal event</button>
-    <button id="flush" type="button" disabled>flush events</button>
-    <button id="set_user_attributes" type="button">set user attributes</button>
-    <button id="view_user_attributes" type="button"> view user attributes</button>
-    <div id="logs" style="border: 1px solid black; margin-top: 8px;"></div>
+    <div style="margin-bottom: 8px; display: flex; gap: 8px; align-items: center;">
+      <button id="init" type="button">Initialize</button>
+      <button id="destroy" type="button" disabled>Destroy</button>
+    </div>
+    <div style="margin-bottom: 8px; display: flex; gap: 8px;">
+      <button id="track_goal" type="button" disabled>track goal event</button>
+      <button id="flush" type="button" disabled>flush events</button>
+      <button id="set_user_attributes" type="button">set user attributes</button>
+      <button id="view_user_attributes" type="button"> view user attributes</button>
+    </div>
+    <div id="logs" style="border: 1px solid #ccc; padding: 8px; font-family: monospace; min-height: 200px; max-height: 400px; overflow-y: auto;"></div>
   </div>
   <script type="module">
     import start from './index.ts'
diff --git a/example/index.ts b/example/index.ts
index 67182c95..bf3a8b95 100644
--- a/example/index.ts
+++ b/example/index.ts
@@ -10,106 +10,119 @@ const FEATURE_TAG = 'feature-tag' // replace here
 const STRING_FEATURE_ID = 'feature_id' // replace here
 const GOAL_ID = 'goal_id' // replace here
 
+const AUTO_INIT_FLAG = true
+
 export default async function start(root: HTMLElement) {
   const logsEl = root.querySelector('#logs')
-  const buttonEl = root.querySelector('#track_goal')
-  const flushEl = root.querySelector('#flush')
-  const setUserAttributesEl = root.querySelector('#set_user_attributes')
-  const viewUserAttributesEl = root.querySelector('#view_user_attributes')
+  const buttonEl = root.querySelector('#track_goal') as HTMLButtonElement
+  const flushEl = root.querySelector('#flush') as HTMLButtonElement
+  const setUserAttributesEl = root.querySelector('#set_user_attributes') as HTMLButtonElement
+  const viewUserAttributesEl = root.querySelector('#view_user_attributes') as HTMLButtonElement
+  const initEl = root.querySelector('#init') as HTMLButtonElement
+  const destroyEl = root.querySelector('#destroy') as HTMLButtonElement
 
   let listenerId: string | null | undefined = null
 
   function log(message: string) {
     if (logsEl) {
-      logsEl.innerHTML += message + '<br/>'
+      logsEl.innerHTML += `[${new Date().toLocaleTimeString()}] ${message}<br/>`
+      logsEl.scrollTop = logsEl.scrollHeight
     }
     console.log(message)
   }
 
+  function updateButtons(initialized: boolean) {
+    if (buttonEl) buttonEl.disabled = !initialized
+    if (flushEl) flushEl.disabled = !initialized
+    if (initEl) initEl.disabled = initialized
+    if (destroyEl) destroyEl.disabled = !initialized
+  }
+
+  const handleInit = async () => {
+    const config = defineBKTConfig({
+      apiEndpoint: import.meta.env.VITE_BKT_API_ENDPOINT,
+      apiKey: import.meta.env.VITE_BKT_API_KEY,
+      featureTag: FEATURE_TAG,
+      appVersion: '1.2.3',
+      fetch: window.fetch,
+    })
+
+    const user = defineBKTUser({
+      id: 'user_id_1',
+    })
+
+    log('Initializing BKTClient...')
+    try {
+      await initializeBKTClient(config, user)
+      log('Initialization completed')
+      updateButtons(true)
+
+      const client = getBKTClient()
+      const value = client?.stringVariation(STRING_FEATURE_ID, 'default_value')
+      log(`Value for ${STRING_FEATURE_ID}: ${value}`)
+
+      listenerId = client?.addEvaluationUpdateListener(() => {
+        log('Evaluation updated')
+        const newValue = client?.stringVariation(STRING_FEATURE_ID, 'default_value')
+        log(`Value for ${STRING_FEATURE_ID}: ${newValue}`)
+      })
+    } catch (error) {
+      log(`Initialization failed: ${error}`)
+    }
+  }
+
+  const handleDestroy = () => {
+    log('Destroying BKTClient...')
+    if (listenerId) {
+      getBKTClient()?.removeEvaluationUpdateListener(listenerId)
+      listenerId = null
+    }
+    destroyBKTClient()
+    log('BKTClient destroyed')
+    updateButtons(false)
+  }
+
+  initEl?.addEventListener('click', handleInit)
+  destroyEl?.addEventListener('click', handleDestroy)
+
   buttonEl?.addEventListener('click', () => {
-    getBKTClient()?.track(GOAL_ID, 1 /* goal value */)
-    log('goal tracked')
+    getBKTClient()?.track(GOAL_ID, 1)
+    log('Goal tracked')
   })
 
   flushEl?.addEventListener('click', () => {
     const client = getBKTClient()
     if (client) {
-      // you can always force-send saved events
-      const flushPromise = client.flush()
-      log('flushing...')
-      flushPromise
-        .then(() => log('flushed'))
-        .catch((error) => log(`flush failed: ${error}`))
+      log('Flushing events...')
+      client.flush()
+        .then(() => log('Flushed'))
+        .catch((error) => log(`Flush failed: ${error}`))
     }
   })
 
   setUserAttributesEl?.addEventListener('click', () => {
     const client = getBKTClient()
     if (client) {
-      // you can set custom attributes for the user
       client.updateUserAttributes({ kYear: 'value_2025' })
-      log('user attributes set')
+      log('User attributes updated')
     }
   })
 
   viewUserAttributesEl?.addEventListener('click', () => {
     const client = getBKTClient()
     if (client) {
-      // you can view current user attributes
       const user = client.currentUser()
-      log(`current user attributes: ${JSON.stringify(user.attributes)}`)
+      log(`Current user attributes: ${JSON.stringify(user.attributes)}`)
     }
   })
 
-  const config = defineBKTConfig({
-    apiEndpoint: import.meta.env.VITE_BKT_API_ENDPOINT,
-    apiKey: import.meta.env.VITE_BKT_API_KEY,
-    featureTag: FEATURE_TAG,
-    appVersion: '1.2.3',
-    fetch: window.fetch,
-  })
-
-  const user = defineBKTUser({
-    id: 'user_id_1',
-    // you can also set custom attributes
-    // customAttributes: { key: 'value'}
-  })
-
-  log('initialize BKTClient')
-
-  const initialFetchPromise = initializeBKTClient(config, user)
-
-  initialFetchPromise
-    .then(() => {
-      log('initialization completed')
-      buttonEl?.removeAttribute('disabled')
-      flushEl?.removeAttribute('disabled')
-
-      const value = getBKTClient()?.stringVariation(
-        STRING_FEATURE_ID,
-        'default_value',
-      )
-      log(`value for feature_id: ${value}`)
-    })
-    .catch((error) => {
-      log(`initialization failed: ${error}`)
-    })
-
   window.addEventListener('beforeunload', () => {
-    log('destroy BKTClient')
-    if (listenerId) {
-      getBKTClient()?.removeEvaluationUpdateListener(listenerId)
-    }
-    destroyBKTClient()
+    handleDestroy()
   })
 
-  log('fetching evaluations...')
-
-  const client = getBKTClient()
-
-  listenerId = client?.addEvaluationUpdateListener(() => {
-    log('evaluation updated')
-    const value = client?.stringVariation(STRING_FEATURE_ID, 'default_value')
-    log(`value for feature_id: ${value}`)
-  })
+  if (AUTO_INIT_FLAG) {
+    handleInit()
+  } else {
+    log('Auto-init disabled. Click "Initialize" to start.')
+  }
 }

From eff183ff7b7b8a7cedc5ae97d31bb15bdeac33e3 Mon Sep 17 00:00:00 2001
From: duyhungtnn <duyhung71089@gmail.com>
Date: Wed, 29 Apr 2026 14:55:01 +0700
Subject: [PATCH 2/2] refactor: example logic

---
 example/index.html |  2 +-
 example/index.ts   | 45 ++++++++++++++++++++++++++++++++-------------
 2 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/example/index.html b/example/index.html
index ac2f8db3..21ea0ce9 100644
--- a/example/index.html
+++ b/example/index.html
@@ -16,7 +16,7 @@
       <button id="track_goal" type="button" disabled>track goal event</button>
       <button id="flush" type="button" disabled>flush events</button>
       <button id="set_user_attributes" type="button">set user attributes</button>
-      <button id="view_user_attributes" type="button"> view user attributes</button>
+      <button id="view_user_attributes" type="button">view user attributes</button>
     </div>
     <div id="logs" style="border: 1px solid #ccc; padding: 8px; font-family: monospace; min-height: 200px; max-height: 400px; overflow-y: auto;"></div>
   </div>
diff --git a/example/index.ts b/example/index.ts
index bf3a8b95..40b0b0fd 100644
--- a/example/index.ts
+++ b/example/index.ts
@@ -14,18 +14,21 @@ const AUTO_INIT_FLAG = true
 
 export default async function start(root: HTMLElement) {
   const logsEl = root.querySelector('#logs')
-  const buttonEl = root.querySelector('#track_goal') as HTMLButtonElement
-  const flushEl = root.querySelector('#flush') as HTMLButtonElement
-  const setUserAttributesEl = root.querySelector('#set_user_attributes') as HTMLButtonElement
-  const viewUserAttributesEl = root.querySelector('#view_user_attributes') as HTMLButtonElement
-  const initEl = root.querySelector('#init') as HTMLButtonElement
-  const destroyEl = root.querySelector('#destroy') as HTMLButtonElement
+  const buttonEl = root.querySelector<HTMLButtonElement>('#track_goal')
+  const flushEl = root.querySelector<HTMLButtonElement>('#flush')
+  const setUserAttributesEl = root.querySelector<HTMLButtonElement>('#set_user_attributes')
+  const viewUserAttributesEl = root.querySelector<HTMLButtonElement>('#view_user_attributes')
+  const initEl = root.querySelector<HTMLButtonElement>('#init')
+  const destroyEl = root.querySelector<HTMLButtonElement>('#destroy')
 
   let listenerId: string | null | undefined = null
+  let initializing = false
 
   function log(message: string) {
     if (logsEl) {
-      logsEl.innerHTML += `[${new Date().toLocaleTimeString()}] ${message}<br/>`
+      const logLine = document.createElement('div')
+      logLine.textContent = `[${new Date().toLocaleTimeString()}] ${message}`
+      logsEl.appendChild(logLine)
       logsEl.scrollTop = logsEl.scrollHeight
     }
     console.log(message)
@@ -39,6 +42,9 @@ export default async function start(root: HTMLElement) {
   }
 
   const handleInit = async () => {
+    if (initializing) return
+    initializing = true
+    if (initEl) initEl.disabled = true
     const config = defineBKTConfig({
       apiEndpoint: import.meta.env.VITE_BKT_API_ENDPOINT,
       apiKey: import.meta.env.VITE_BKT_API_KEY,
@@ -54,6 +60,7 @@ export default async function start(root: HTMLElement) {
     log('Initializing BKTClient...')
     try {
       await initializeBKTClient(config, user)
+      initializing = false
       log('Initialization completed')
       updateButtons(true)
 
@@ -67,7 +74,11 @@ export default async function start(root: HTMLElement) {
         log(`Value for ${STRING_FEATURE_ID}: ${newValue}`)
       })
     } catch (error) {
+      initializing = false
       log(`Initialization failed: ${error}`)
+      listenerId = null
+      destroyBKTClient()
+      updateButtons(false)
     }
   }
 
@@ -85,9 +96,13 @@ export default async function start(root: HTMLElement) {
   initEl?.addEventListener('click', handleInit)
   destroyEl?.addEventListener('click', handleDestroy)
 
-  buttonEl?.addEventListener('click', () => {
-    getBKTClient()?.track(GOAL_ID, 1)
-    log('Goal tracked')
+  buttonEl?.addEventListener('click', async () => {
+    try {
+      await getBKTClient()?.track(GOAL_ID, 1)
+      log('Goal tracked')
+    } catch (error) {
+      log(`Track failed: ${error}`)
+    }
   })
 
   flushEl?.addEventListener('click', () => {
@@ -100,11 +115,15 @@ export default async function start(root: HTMLElement) {
     }
   })
 
-  setUserAttributesEl?.addEventListener('click', () => {
+  setUserAttributesEl?.addEventListener('click', async () => {
     const client = getBKTClient()
     if (client) {
-      client.updateUserAttributes({ kYear: 'value_2025' })
-      log('User attributes updated')
+      try {
+        await client.updateUserAttributes({ kYear: 'value_2025' })
+        log('User attributes updated')
+      } catch (error) {
+        log(`Update user attributes failed: ${error}`)
+      }
     }
   })
 
