@sbc-connect/nuxt-base 0.7.3 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @sbc-connect/nuxt-base
 
+## 0.9.0
+
+### Minor Changes
+
+- [#160](https://github.com/bcgov/connect-nuxt/pull/160) [`80b8318`](https://github.com/bcgov/connect-nuxt/commit/80b8318ab802a14f77e9fe88f96e66aaf23e18ad) Thanks [@deetz99](https://github.com/deetz99)! - Update Nuxt, pinia colada, keycloak, nuxt ui, i18n, vueuse, dompurify, es-toolkit, zod.
+
+## 0.8.0
+
+### Minor Changes
+
+- [#158](https://github.com/bcgov/connect-nuxt/pull/158) [`fe5065e`](https://github.com/bcgov/connect-nuxt/commit/fe5065e12d776349e7093e52ecee51ce22a2c271) Thanks [@vysakh-menon-aot](https://github.com/vysakh-menon-aot)! - Switch LD dependency to js-client-sdk
+
 ## 0.7.3
 
 ### Patch Changes

package/app/components/HelloWorld/Index.vue

@@ -8,7 +8,7 @@ const { myLayer } = useAppConfig()
     <h1>Hello World!</h1>
     <pre>{{ myLayer }}</pre>
     <p class="text-gray-900">
-      Hello World text base should be gray-900 test
+      Hello World text base should be gray-900 test 3
     </p>
   </div>
 </template>

package/app/composables/useConnectLaunchDarkly.ts

@@ -1,69 +1,72 @@
-import { initialize } from 'launchdarkly-js-client-sdk'
-import type { LDClient, LDFlagSet, LDOptions, LDContext } from 'launchdarkly-js-client-sdk'
-
-// state
-// Defined outside of composable, so they are created only once and shared
-const ldClient = shallowRef<LDClient | null>(null)
-const ldFlagSet = shallowRef<LDFlagSet>({})
-const ldInitialized = ref(false)
-const isInitializing = ref(false)
+import { createClient } from '@launchdarkly/js-client-sdk'
+import type { LDClient, LDFlagSet, LDOptions, LDContext } from '@launchdarkly/js-client-sdk'
 
 /**
- * Initializes the LaunchDarkly client with an anonymous context.
-*/
-function init(): void {
-  const rtc = useRuntimeConfig().public
-
-  // Prevent re-initialization
-  if (ldInitialized.value || isInitializing.value) {
-    return
-  }
-  // Prevent initialization if missing client ID
-  if (!rtc.ldClientId) {
-    console.error('LaunchDarkly: ldClientId is not configured.')
-    return
-  }
+ * Composable for the LaunchDarkly service.
+ */
+export const useConnectLaunchDarkly = () => {
+  const ldClient = useState<LDClient | null>('ld-client', () => null)
+  const ldFlagSet = useState<LDFlagSet>('ld-flag-set', () => ({}))
+  const ldInitialized = useState<boolean>('ld-initialized', () => false)
+  const isInitializing = useState<boolean>('ld-is-initializing', () => false)
 
-  isInitializing.value = true
+  /**
+   * Initializes the LaunchDarkly client with an anonymous context.
+   */
+  function init(): void {
+    const rtc = useRuntimeConfig().public
 
-  const ldContext: LDContext = {
-    kind: 'user',
-    key: 'anonymous',
-    anonymous: true,
-    appSource: rtc.appName
-  }
+    // Prevent re-initialization
+    if (ldInitialized.value || isInitializing.value) {
+      return
+    }
+    // Prevent initialization if missing client ID
+    if (!rtc.ldClientId) {
+      console.error('LaunchDarkly: ldClientId is not configured.')
+      return
+    }
 
-  const options: LDOptions = {
-    streaming: false,
-    useReport: false,
-    diagnosticOptOut: true
-  }
+    isInitializing.value = true
 
-  try {
-    ldClient.value = initialize(rtc.ldClientId, ldContext, options)
+    const ldContext: LDContext = {
+      kind: 'user',
+      key: 'anonymous',
+      anonymous: true,
+      appSource: rtc.appName
+    }
 
-    ldClient.value.on('initialized', () => {
-      ldFlagSet.value = ldClient.value?.allFlags() || {}
-      ldInitialized.value = true
-      isInitializing.value = false
-      console.info('LaunchDarkly: Anonymous initialization complete.')
-    })
+    const options: LDOptions = {
+      streaming: false,
+      useReport: false,
+      diagnosticOptOut: true
+    }
 
-    ldClient.value.on('error', (error) => {
-      console.error('LaunchDarkly: Initialization error.', error)
+    try {
+      const client = createClient(rtc.ldClientId, ldContext, options)
+
+      client.start().then((result) => {
+        if (result.status === 'complete') {
+          ldFlagSet.value = client.allFlags()
+          ldInitialized.value = true
+          isInitializing.value = false
+          console.info('LaunchDarkly: Anonymous initialization complete.')
+        } else {
+          console.error('LaunchDarkly: Initialization did not complete.', result)
+          isInitializing.value = false
+        }
+      }).catch((error) => {
+        console.error('LaunchDarkly: Initialization error.', error)
+        isInitializing.value = false
+      })
+
+      ldClient.value = client
+    } catch (error) {
+      console.error('LaunchDarkly: Failed to initialize.', error)
       isInitializing.value = false
-    })
-  } catch (error) {
-    console.error('LaunchDarkly: Failed to initialize.', error)
-    isInitializing.value = false
+    }
   }
-}
 
-/**
- * Composable for the LaunchDarkly service.
-*/
-export const useConnectLaunchDarkly = () => {
-  // initialize only once
+  // Initialize only once on the client
   if (!ldInitialized.value && !isInitializing.value && import.meta.client) {
     init()
   }
@@ -95,12 +98,12 @@ export const useConnectLaunchDarkly = () => {
       if (!ldClient.value) {
         return Promise.resolve(defaultValue)
       }
-      return ldClient.value.waitUntilReady()
-        .then(() => ldClient.value ? ldClient.value.variation(name, defaultValue) : defaultValue)
-        .catch((error) => {
-          console.error(`LaunchDarkly: Error waiting for client while getting flag "${name}".`, error)
-          return defaultValue
-        })
+      return ldClient.value.waitForInitialization().then(() =>
+        ldClient.value ? ldClient.value.variation(name, defaultValue) : defaultValue
+      ).catch((error) => {
+        console.error(`LaunchDarkly: Error waiting for client while getting flag "${name}".`, error)
+        return defaultValue
+      })
     }
 
     // reactive mode
@@ -131,12 +134,12 @@ export const useConnectLaunchDarkly = () => {
       if (!ldClient.value) {
         return Promise.resolve(defaultValue)
       }
-      return ldClient.value.waitUntilReady()
-        .then(() => ldFlagSet.value[name] ?? defaultValue)
-        .catch((error) => {
-          console.error(`LaunchDarkly: Error waiting for client while getting stored flag "${name}".`, error)
-          return defaultValue
-        })
+      return ldClient.value.waitForInitialization().then(() =>
+        ldFlagSet.value[name] ?? defaultValue
+      ).catch((error) => {
+        console.error(`LaunchDarkly: Error waiting for client while getting stored flag "${name}".`, error)
+        return defaultValue
+      })
     }
 
     // reactive mode

package/nuxt.config.ts

@@ -143,5 +143,19 @@ export default defineNuxtConfig({
       statusApiUrl: '',
       statusApiVersion: ''
     }
+  },
+
+  vite: {
+    optimizeDeps: {
+      include: [
+        '@launchdarkly/js-client-sdk',
+        '@vue/devtools-core',
+        '@vue/devtools-kit',
+        'dompurify',
+        'es-toolkit',
+        'maska/vue',
+        'zod'
+      ]
+    }
   }
 })

package/package.json

@@ -1,33 +1,33 @@
 {
   "name": "@sbc-connect/nuxt-base",
   "type": "module",
-  "version": "0.7.3",
+  "version": "0.9.0",
   "repository": "github:bcgov/connect-nuxt",
   "license": "BSD-3-Clause",
   "main": "./nuxt.config.ts",
   "dependencies": {
     "@iconify-json/mdi": "1.2.3",
-    "@nuxt/ui": "4.6.0",
-    "@nuxtjs/i18n": "10.2.4",
-    "@vueuse/core": "14.2.1",
-    "@vueuse/nuxt": "14.2.1",
-    "dompurify": "3.3.3",
-    "es-toolkit": "1.45.1",
-    "launchdarkly-vue-client-sdk": "2.5.0",
+    "@launchdarkly/js-client-sdk": "4.6.5",
+    "@nuxt/ui": "4.7.1",
+    "@nuxtjs/i18n": "10.3.0",
+    "@vueuse/core": "14.3.0",
+    "@vueuse/nuxt": "14.3.0",
+    "dompurify": "3.4.5",
+    "es-toolkit": "1.46.1",
     "luxon": "3.7.2",
     "maska": "3.2.0",
-    "zod": "4.3.6"
+    "zod": "4.4.3"
   },
   "devDependencies": {
-    "@axe-core/playwright": "4.11.1",
+    "@axe-core/playwright": "4.11.3",
     "@types/luxon": "3.7.1",
-    "dotenv": "17.3.1",
-    "nuxt": "4.2.2",
+    "dotenv": "^17.4.2",
+    "nuxt": "4.4.6",
     "typescript": "5.9.3",
     "vue-tsc": "3.2.5",
     "@sbc-connect/eslint-config": "0.0.8",
-    "@sbc-connect/vitest-config": "0.1.1",
-    "@sbc-connect/playwright-config": "0.1.1"
+    "@sbc-connect/playwright-config": "0.2.0",
+    "@sbc-connect/vitest-config": "0.2.0"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",