@avsbhq/vue 1.1.1 → 1.1.2

package/README.md

@@ -42,11 +42,11 @@ import type { ComputedRef } from 'vue';
 import type { Flag } from '@avsbhq/vue';
 
 // Keep the ref: reading `.value` here instead would freeze the first value.
-const newCheckout: ComputedRef<Flag<boolean>> = useBoolFlag('new-checkout-flow', false);
+const newCheckout: ComputedRef<Flag<boolean>> = useBoolFlag('new_checkout_flow', false);
 const track = useTrack();
 
 // The visitor is about to see this decision, so record it once.
-useExposure('new-checkout-flow');
+useExposure('new_checkout_flow');
 </script>
 
 <template>
@@ -62,7 +62,7 @@ Both props matter: without `context` the visitor gets a persisted anonymous id,
 
 ## 3. SDK keys
 
-Get the SDK key for the environment you want from your project: **app.avsb.cloud**, then **Settings**, then **Environments**. The format is `sdk_<environment>_<id>`, for example `sdk_production_ttqm0eaj4vth1krcb2xn`.
+Get the SDK key for the environment you want from your project: **app.avsb.cloud**, then **Environments** in the project sidebar. The format is `sdk_<environment>_<id>`, for example `sdk_production_ttqm0eaj4vth1krcb2xn`.
 
 There is one SDK key per environment, and "SDK key" is its only name. There is no separate client key and server key to choose between.
 
@@ -232,7 +232,7 @@ them and it is built from the union of this project's real flag keys, so a typo
 is a compile error and your editor completes the list:
 
 ```bash
-npx avsb codegen --output src/generated/flags.ts
+npx @avsbhq/cli codegen --output src/generated/flags.ts
 ```
 
 The generated file declares your flags twice on purpose: an importable
@@ -243,15 +243,15 @@ teaches every composable in this package which keys exist. Its important parts:
 // AUTO-GENERATED by @avsbhq/cli codegen. Do not edit by hand.
 
 export interface FlagValues {
-  'checkout-v2': boolean
-  'hero-copy': 'control' | 'variant-a'
+  'checkout_v2': boolean
+  'hero_copy': 'control' | 'variant_a'
   'theme': { primary: string }
 }
 
 declare global {
   interface AvsbFlags {
-    'checkout-v2': boolean
-    'hero-copy': 'control' | 'variant-a'
+    'checkout_v2': boolean
+    'hero_copy': 'control' | 'variant_a'
     'theme': { primary: string }
   }
 }
@@ -261,14 +261,14 @@ declare global {
 import { useBoolFlag, useJsonFlag } from '@avsbhq/vue';
 import type { FlagValues } from './generated/flags';
 
-const checkout = useBoolFlag('checkout-v2', false);
+const checkout = useBoolFlag('checkout_v2', false);
 
 // A JSON flag types its payload from the generated table:
 const theme = useJsonFlag<FlagValues['theme']>('theme', { primary: '#111' });
 
 // Once the generated file exists, this line stops compiling:
-// 'chekcout-v2' is not a flag key.
-const typo = useBoolFlag('chekcout-v2', false);
+// 'chekcout_v2' is not a flag key.
+const typo = useBoolFlag('chekcout_v2', false);
 ```
 
 One real consequence for reactive keys: a `Ref<string>` no longer satisfies
@@ -289,7 +289,7 @@ exported from `@avsbhq/core`).
 `useFlag` returns a `ComputedRef<Flag<T>>`. Vue refs are unwrapped with `.value`, and the flag's own field is also called `value`, so in `<script setup>` you write:
 
 ```ts
-const checkout = useFlag('new-checkout-flow', false);
+const checkout = useFlag('new_checkout_flow', false);
 
 checkout.value.value; // boolean  (ref unwrap, then Flag.value)
 checkout.value.isEnabled(); // boolean
@@ -312,11 +312,11 @@ Two ways to make it read better:
 import { computed } from 'vue';
 
 // 1. Ask for the value instead of the Flag
-const showNewCheckout = useFlagValue('new-checkout-flow', false);
+const showNewCheckout = useFlagValue('new_checkout_flow', false);
 showNewCheckout.value; // boolean, one .value everywhere
 
 // 2. Destructure with toRefs-style naming at the top of setup
-const checkoutFlag = useFlag('new-checkout-flow', false);
+const checkoutFlag = useFlag('new_checkout_flow', false);
 const isNewCheckout = computed(() => checkoutFlag.value.isEnabled());
 ```
 
@@ -376,13 +376,13 @@ A rule can bucket on `user.key` while matching an audience condition on `organiz
 import { useFlag, useBoolFlag, useJsonFlag } from '@avsbhq/vue';
 import type { Flag } from '@avsbhq/vue';
 
-const darkMode = useBoolFlag('dark-mode', false);
+const darkMode = useBoolFlag('dark_mode', false);
 
 interface ApiConfig {
   timeout: number;
   retries: number;
 }
-const config = useJsonFlag<ApiConfig>('api-config', { timeout: 5000, retries: 3 });
+const config = useJsonFlag<ApiConfig>('api_config', { timeout: 5000, retries: 3 });
 const timeout: number = config.value.value.timeout;
 ```
 
@@ -395,7 +395,7 @@ A default value is always required, and it is what you get before the SDK is rea
 ```ts
 import { ref } from 'vue';
 
-const selected = ref('feature-a');
+const selected = ref('feature_a');
 const flag = useFlag(selected, false); // re-subscribes when `selected` changes
 ```
 
@@ -417,7 +417,7 @@ Reads during render never record an exposure. That is deliberate: an exposure me
 import { useExposure } from '@avsbhq/vue';
 
 // In the component that actually shows the variation:
-useExposure('new-checkout-flow');
+useExposure('new_checkout_flow');
 ```
 
 `useExposure` fires on mount, once, or as soon as the SDK becomes ready if it is not yet. It is also the piece that makes server-rendered variants visible in results: if a value arrived as a prop from the server, call `useExposure` where it is rendered.
@@ -427,7 +427,7 @@ Only decisions that belong in an experiment (A/B rules, holdouts, bandits) produ
 For side effects that are not rendering:
 
 ```ts
-useFlagSubscription('new-checkout-flow', (flag) => {
+useFlagSubscription('new_checkout_flow', (flag) => {
   analytics.track('checkout_variant_assigned', { variationKey: flag.variationKey });
 });
 ```
@@ -565,7 +565,7 @@ import { AvsbTestProvider } from '@avsbhq/vue/testing';
 import CheckoutButton from './CheckoutButton.vue';
 
 const wrapper = mount(AvsbTestProvider, {
-  props: { flags: { 'checkout-v2': true } },
+  props: { flags: { 'checkout_v2': true } },
   slots: { default: CheckoutButton },
 });
 ```
@@ -580,15 +580,15 @@ Drive the client directly when that is simpler:
 import { createTestClient, createTestDatafile } from '@avsbhq/vue/testing';
 
 const client = createTestClient({
-  flags: { 'checkout-v2': true },
+  flags: { 'checkout_v2': true },
   context: { kind: 'user', key: 'u_1' },
 });
 
-expect(client.getBoolFlag('checkout-v2', false).isEnabled()).toBe(true);
+expect(client.getBoolFlag('checkout_v2', false).isEnabled()).toBe(true);
 
 // Publish a new datafile and watch subscribers wake up.
 client.applyDatafileBootstrap(
-  createTestDatafile({ 'checkout-v2': false }, { publishedAt: '2024-06-01T00:00:00.000Z' }),
+  createTestDatafile({ 'checkout_v2': false }, { publishedAt: '2024-06-01T00:00:00.000Z' }),
 );
 ```
 

package/dist/{chunk-FUADAPSW.js → chunk-DHNLEJ7I.js}

@@ -57,6 +57,12 @@ function createProviderState(client) {
 
 // src/internal/resolveClient.ts
 import { AvsbClient } from "@avsbhq/browser";
+
+// src/version.ts
+var SDK_VERSION = "1.1.2";
+var SDK_TYPE = "@avsbhq/vue";
+
+// src/internal/resolveClient.ts
 var MISUSE_MESSAGE = `[avsb] <AvsbProvider> needs either an sdk-key (Mode A) or a client (Mode B). Mode A: <AvsbProvider sdk-key="sdk_production_..." :context="{ kind: 'user', key: userId }">. Mode B: <AvsbProvider :client="myClient">. The key for each environment is on app.avsb.cloud under Environments in the project sidebar.`;
 function resolveClient(props) {
   const injected = props.client;
@@ -69,6 +75,9 @@ function resolveClient(props) {
   }
   const clientOptions = {
     ...options ?? {},
+    // Report @avsbhq/vue on the heartbeat, unless a package wrapping this one
+    // (@avsbhq/nuxt) already named itself (N1-14).
+    wrapper: options?.wrapper ?? { sdkType: SDK_TYPE, sdkVersion: SDK_VERSION },
     sdkKey,
     ...context !== void 0 ? { context } : {},
     ...bootstrap !== void 0 ? { bootstrap } : {}

package/dist/index.cjs

@@ -113,6 +113,12 @@ function createProviderState(client) {
 
 // src/internal/resolveClient.ts
 var import_browser = require("@avsbhq/browser");
+
+// src/version.ts
+var SDK_VERSION = "1.1.2";
+var SDK_TYPE = "@avsbhq/vue";
+
+// src/internal/resolveClient.ts
 var MISUSE_MESSAGE = `[avsb] <AvsbProvider> needs either an sdk-key (Mode A) or a client (Mode B). Mode A: <AvsbProvider sdk-key="sdk_production_..." :context="{ kind: 'user', key: userId }">. Mode B: <AvsbProvider :client="myClient">. The key for each environment is on app.avsb.cloud under Environments in the project sidebar.`;
 function resolveClient(props) {
   const injected = props.client;
@@ -125,6 +131,9 @@ function resolveClient(props) {
   }
   const clientOptions = {
     ...options ?? {},
+    // Report @avsbhq/vue on the heartbeat, unless a package wrapping this one
+    // (@avsbhq/nuxt) already named itself (N1-14).
+    wrapper: options?.wrapper ?? { sdkType: SDK_TYPE, sdkVersion: SDK_VERSION },
     sdkKey,
     ...context !== void 0 ? { context } : {},
     ...bootstrap !== void 0 ? { bootstrap } : {}

package/dist/index.js

@@ -2,7 +2,7 @@ import {
   AvsbProvider,
   createProviderState,
   resolveClient
-} from "./chunk-FUADAPSW.js";
+} from "./chunk-DHNLEJ7I.js";
 import {
   AvsbInjectionKey,
   useAvsbContext

package/dist/pinia.d.cts

@@ -18,6 +18,6 @@ interface AvsbStoreState {
     reset: () => void;
     track: (eventKey: string, payload?: TrackPayload) => void;
 }
-declare const useAvsbStore: pinia.StoreDefinition<"avsb", Pick<AvsbStoreState, never>, Pick<AvsbStoreState, "flags" | "client" | "error" | "status" | "degraded">, Pick<AvsbStoreState, "reset" | "track" | "identify" | "alias">>;
+declare const useAvsbStore: pinia.StoreDefinition<"avsb", Pick<AvsbStoreState, never>, Pick<AvsbStoreState, "error" | "client" | "status" | "degraded" | "flags">, Pick<AvsbStoreState, "identify" | "alias" | "reset" | "track">>;
 
 export { type AvsbStoreState, useAvsbStore };

package/dist/pinia.d.ts

@@ -18,6 +18,6 @@ interface AvsbStoreState {
     reset: () => void;
     track: (eventKey: string, payload?: TrackPayload) => void;
 }
-declare const useAvsbStore: pinia.StoreDefinition<"avsb", Pick<AvsbStoreState, never>, Pick<AvsbStoreState, "flags" | "client" | "error" | "status" | "degraded">, Pick<AvsbStoreState, "reset" | "track" | "identify" | "alias">>;
+declare const useAvsbStore: pinia.StoreDefinition<"avsb", Pick<AvsbStoreState, never>, Pick<AvsbStoreState, "error" | "client" | "status" | "degraded" | "flags">, Pick<AvsbStoreState, "identify" | "alias" | "reset" | "track">>;
 
 export { type AvsbStoreState, useAvsbStore };

package/dist/testing.cjs

@@ -170,6 +170,12 @@ function createProviderState(client) {
 
 // src/internal/resolveClient.ts
 var import_browser2 = require("@avsbhq/browser");
+
+// src/version.ts
+var SDK_VERSION = "1.1.2";
+var SDK_TYPE = "@avsbhq/vue";
+
+// src/internal/resolveClient.ts
 var MISUSE_MESSAGE = `[avsb] <AvsbProvider> needs either an sdk-key (Mode A) or a client (Mode B). Mode A: <AvsbProvider sdk-key="sdk_production_..." :context="{ kind: 'user', key: userId }">. Mode B: <AvsbProvider :client="myClient">. The key for each environment is on app.avsb.cloud under Environments in the project sidebar.`;
 function resolveClient(props) {
   const injected = props.client;
@@ -182,6 +188,9 @@ function resolveClient(props) {
   }
   const clientOptions = {
     ...options ?? {},
+    // Report @avsbhq/vue on the heartbeat, unless a package wrapping this one
+    // (@avsbhq/nuxt) already named itself (N1-14).
+    wrapper: options?.wrapper ?? { sdkType: SDK_TYPE, sdkVersion: SDK_VERSION },
     sdkKey,
     ...context !== void 0 ? { context } : {},
     ...bootstrap !== void 0 ? { bootstrap } : {}

package/dist/testing.d.cts

@@ -42,9 +42,9 @@ declare const AvsbTestProvider: vue.DefineComponent<vue.ExtractPropTypes<{
         default: undefined;
     };
 }>> & Readonly<{}>, {
+    client: VueAvsbClient;
     flags: TestFlags;
     context: EvalContext;
-    client: VueAvsbClient;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 export { AvsbTestProvider };

package/dist/testing.d.ts

@@ -42,9 +42,9 @@ declare const AvsbTestProvider: vue.DefineComponent<vue.ExtractPropTypes<{
         default: undefined;
     };
 }>> & Readonly<{}>, {
+    client: VueAvsbClient;
     flags: TestFlags;
     context: EvalContext;
-    client: VueAvsbClient;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 export { AvsbTestProvider };

package/dist/testing.js

@@ -1,6 +1,6 @@
 import {
   AvsbProvider
-} from "./chunk-FUADAPSW.js";
+} from "./chunk-DHNLEJ7I.js";
 import "./chunk-4XBADQFO.js";
 
 // src/testing.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avsbhq/vue",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Vue SDK for A vs B feature flags and experiments: composables, a provider component, an optional Pinia store, and test helpers.",
   "keywords": [
     "avsb",
@@ -67,6 +67,7 @@
     "url": "https://github.com/avsbhq/a-vs-b/issues"
   },
   "scripts": {
+    "prebuild": "node ../avsb-core/scripts/writeSdkVersion.mjs",
     "build": "tsup",
     "dev": "tsup --watch",
     "test": "vitest run",
@@ -82,11 +83,11 @@
     }
   },
   "dependencies": {
-    "@avsbhq/browser": "^1.3.1",
-    "@avsbhq/core": "^1.4.0"
+    "@avsbhq/browser": "^1.5.0",
+    "@avsbhq/core": "^1.6.0"
   },
   "devDependencies": {
-    "@avsbhq/test": "^1.0.1",
+    "@avsbhq/test": "^1.2.0",
     "@vitejs/plugin-vue": "^5.0.0",
     "@vue/test-utils": "^2.4.0",
     "happy-dom": "^14.0.0",