From 493f80986ec4c3e22c56442c30758f0ba490675c Mon Sep 17 00:00:00 2001 From: Ron Cohen Date: Thu, 19 Jun 2025 12:52:17 +0200 Subject: [PATCH 1/8] feat(vue-sdk): make additional options available --- packages/vue-sdk/dev/plain/App.vue | 2 + .../vue-sdk/dev/plain/components/Events.vue | 49 +++++++++++++++++++ packages/vue-sdk/src/index.ts | 11 +++++ 3 files changed, 62 insertions(+) create mode 100644 packages/vue-sdk/dev/plain/components/Events.vue diff --git a/packages/vue-sdk/dev/plain/App.vue b/packages/vue-sdk/dev/plain/App.vue index 5210efad..6edb3119 100644 --- a/packages/vue-sdk/dev/plain/App.vue +++ b/packages/vue-sdk/dev/plain/App.vue @@ -11,6 +11,7 @@ import StartHuddleButton from "./components/StartHuddleButton.vue"; import Track from "./components/Track.vue"; const user = ref({ id: "123", name: "John Doe" }); +const toolbar = ref(true); const publishableKey = import.meta.env.VITE_PUBLISHABLE_KEY || ""; @@ -23,6 +24,7 @@ const publishableKey = import.meta.env.VITE_PUBLISHABLE_KEY || ""; :publishableKey="publishableKey" :user="user" :company="{ id: 'acme_inc', plan: 'pro' }" + :toolbar="true" > diff --git a/packages/vue-sdk/dev/plain/components/Events.vue b/packages/vue-sdk/dev/plain/components/Events.vue new file mode 100644 index 00000000..864f979a --- /dev/null +++ b/packages/vue-sdk/dev/plain/components/Events.vue @@ -0,0 +1,49 @@ + + + diff --git a/packages/vue-sdk/src/index.ts b/packages/vue-sdk/src/index.ts index b8f83be4..3ce8a2bc 100644 --- a/packages/vue-sdk/src/index.ts +++ b/packages/vue-sdk/src/index.ts @@ -18,9 +18,11 @@ import { BucketContext, CheckEvent, CompanyContext, + FeedbackOptions, InitOptions, RawFeatures, RequestFeedbackData, + ToolbarOptions, TrackEvent, UnassignedFeedback, UserContext, @@ -110,10 +112,19 @@ export const BucketProvider = defineComponent({ }, loadingComponent: { type: null as any, default: undefined }, debug: { type: Boolean, default: false }, + enableTracking: { type: Boolean }, + toolbar: { type: Object as () => ToolbarOptions }, newBucketClient: { type: Function as unknown as () => BucketProps["newBucketClient"], default: undefined, }, + timeoutMs: { type: Number }, + staleWhileRevalidate: { type: Boolean }, + expireTimeMs: { type: Number }, + staleTimeMs: { type: Number }, + credentials: { type: String }, + sseBaseUrl: { type: String }, + feedback: { type: Object as () => FeedbackOptions }, }, setup(props: BucketProps, { slots }: SetupContext) { const featuresLoading = ref(true); From 5f018d26176907e8866284a9de5f047f9c51e74d Mon Sep 17 00:00:00 2001 From: Ron Cohen Date: Thu, 19 Jun 2025 13:39:35 +0200 Subject: [PATCH 2/8] refactor: move to ` @@ -24,7 +23,7 @@ const publishableKey = import.meta.env.VITE_PUBLISHABLE_KEY || ""; :publishableKey="publishableKey" :user="user" :company="{ id: 'acme_inc', plan: 'pro' }" - :toolbar="true" + :timeoutMs="1000" > diff --git a/packages/vue-sdk/src/BucketProvider.vue b/packages/vue-sdk/src/BucketProvider.vue new file mode 100644 index 00000000..3f159db9 --- /dev/null +++ b/packages/vue-sdk/src/BucketProvider.vue @@ -0,0 +1,73 @@ + + + diff --git a/packages/vue-sdk/src/hooks.ts b/packages/vue-sdk/src/hooks.ts new file mode 100644 index 00000000..c6783bed --- /dev/null +++ b/packages/vue-sdk/src/hooks.ts @@ -0,0 +1,240 @@ +import { inject, InjectionKey, onBeforeUnmount, ref } from "vue"; + +import { RequestFeedbackData, UnassignedFeedback } from "@bucketco/browser-sdk"; + +import { + FeatureKey, + ProviderContextType, + RequestFeatureFeedbackOptions, +} from "./types"; + +export const ProviderSymbol: InjectionKey = + Symbol("BucketProvider"); + +export function useFeature(key: TKey) { + const client = useClient(); + const ctx = injectSafe(); + + const track = () => client?.value.track(key); + const requestFeedback = (opts: RequestFeatureFeedbackOptions) => + client.value.requestFeedback({ ...opts, featureKey: key }); + + function getFeature() { + const f = client.value.getFeature(key); + return { + isEnabled: f.isEnabled, + config: f.config, + track, + requestFeedback, + key, + isLoading: ctx.isLoading, + }; + } + + const feature = ref(getFeature()); + + function updateFeature() { + feature.value = getFeature(); + } + + client.value.on("featuresUpdated", updateFeature); + onBeforeUnmount(() => { + client.value.off("featuresUpdated", updateFeature); + }); + + return feature; +} + +/** + * Vue composable for tracking custom events. + * + * This composable returns a function that can be used to track custom events + * with the Bucket SDK. + * + * @example + * ```ts + * import { useTrack } from '@bucketco/vue-sdk'; + * + * const track = useTrack(); + * + * // Track a custom event + * track('button_clicked', { buttonName: 'Start Huddle' }); + * ``` + * + * @returns A function that tracks an event. The function accepts: + * - `eventName`: The name of the event to track. + * - `attributes`: (Optional) Additional attributes to associate with the event. + */ +export function useTrack() { + const client = useClient(); + return (eventName: string, attributes?: Record | null) => + client?.value.track(eventName, attributes); +} + +/** + * Vue composable for requesting user feedback. + * + * This composable returns a function that can be used to trigger the feedback + * collection flow with the Bucket SDK. You can use this to prompt users for + * feedback at any point in your application. + * + * @example + * ```ts + * import { useRequestFeedback } from '@bucketco/vue-sdk'; + * + * const requestFeedback = useRequestFeedback(); + * + * // Request feedback from the user + * requestFeedback({ + * prompt: "How was your experience?", + * metadata: { page: "dashboard" } + * }); + * ``` + * + * @returns A function that requests feedback from the user. The function accepts: + * - `options`: An object containing feedback request options. + */ +export function useRequestFeedback() { + const client = useClient(); + return (options: RequestFeedbackData) => + client?.value.requestFeedback(options); +} + +/** + * Vue composable for sending feedback. + * + * This composable returns a function that can be used to send feedback to the + * Bucket SDK. You can use this to send feedback from your application. + * + * @example + * ```ts + * import { useSendFeedback } from '@bucketco/vue-sdk'; + * + * const sendFeedback = useSendFeedback(); + * + * // Send feedback from the user + * sendFeedback({ + * feedback: "I love this feature!", + * metadata: { page: "dashboard" } + * }); + * ``` + * + * @returns A function that sends feedback to the Bucket SDK. The function accepts: + * - `options`: An object containing feedback options. + */ +export function useSendFeedback() { + const client = useClient(); + return (opts: UnassignedFeedback) => client?.value.feedback(opts); +} + +/** + * Vue composable for updating the user context. + * + * This composable returns a function that can be used to update the user context + * with the Bucket SDK. You can use this to update the user context at any point + * in your application. + * + * @example + * ```ts + * import { useUpdateUser } from '@bucketco/vue-sdk'; + * + * const updateUser = useUpdateUser(); + * + * // Update the user context + * updateUser({ id: "123", name: "John Doe" }); + * ``` + * + * @returns A function that updates the user context. The function accepts: + * - `opts`: An object containing the user context to update. + */ +export function useUpdateUser() { + const client = useClient(); + return (opts: { [key: string]: string | number | undefined }) => + client?.value.updateUser(opts); +} + +/** + * Vue composable for updating the company context. + * + * This composable returns a function that can be used to update the company + * context with the Bucket SDK. You can use this to update the company context + * at any point in your application. + * + * @example + * ```ts + * import { useUpdateCompany } from '@bucketco/vue-sdk'; + * + * const updateCompany = useUpdateCompany(); + * + * // Update the company context + * updateCompany({ id: "123", name: "Acme Inc." }); + * ``` + * + * @returns A function that updates the company context. The function accepts: + * - `opts`: An object containing the company context to update. + */ +export function useUpdateCompany() { + const client = useClient(); + return (opts: { [key: string]: string | number | undefined }) => + client?.value.updateCompany(opts); +} + +/** + * Vue composable for updating the other context. + * + * This composable returns a function that can be used to update the other + * context with the Bucket SDK. You can use this to update the other context + * at any point in your application. + * + * @example + * ```ts + * import { useUpdateOtherContext } from '@bucketco/vue-sdk'; + * + * const updateOtherContext = useUpdateOtherContext(); + * + * // Update the other context + * updateOtherContext({ id: "123", name: "Acme Inc." }); + * ``` + * + * @returns A function that updates the other context. The function accepts: + * - `opts`: An object containing the other context to update. + */ +export function useUpdateOtherContext() { + const client = useClient(); + return (opts: { [key: string]: string | number | undefined }) => + client?.value.updateOtherContext(opts); +} + +/** + * Vue composable for getting the Bucket client. + * + * This composable returns the Bucket client. You can use this to get the Bucket + * client at any point in your application. + * + * @returns The Bucket client. + */ +export function useClient() { + const ctx = injectSafe(); + return ctx.client; +} + +/** + * Vue composable for checking if the Bucket client is loading. + * + * This composable returns a boolean value that indicates whether the Bucket client is loading. + * You can use this to check if the Bucket client is loading at any point in your application. + */ +export function useIsLoading() { + const ctx = injectSafe(); + return ctx.isLoading; +} + +function injectSafe() { + const ctx = inject(ProviderSymbol); + if (!ctx?.provider) { + throw new Error( + `BucketProvider is missing. Please ensure your component is wrapped with a BucketProvider.`, + ); + } + return ctx; +} diff --git a/packages/vue-sdk/src/index.ts b/packages/vue-sdk/src/index.ts index 3ce8a2bc..3cf01945 100644 --- a/packages/vue-sdk/src/index.ts +++ b/packages/vue-sdk/src/index.ts @@ -1,34 +1,19 @@ -import canonicalJson from "canonical-json"; -import { - App, - defineComponent, - inject, - InjectionKey, - onBeforeUnmount, - provide, - Ref, - ref, - type SetupContext, - shallowRef, - watch, -} from "vue"; +import { App } from "vue"; import { - BucketClient, - BucketContext, CheckEvent, CompanyContext, - FeedbackOptions, - InitOptions, RawFeatures, - RequestFeedbackData, - ToolbarOptions, TrackEvent, - UnassignedFeedback, UserContext, } from "@bucketco/browser-sdk"; -import { version } from "../package.json"; +import BucketProvider from "./BucketProvider.vue"; +import { BucketProps } from "./types"; + +export * from "./hooks"; + +export { BucketProvider }; export type { CheckEvent, @@ -38,385 +23,6 @@ export type { UserContext, }; -export type EmptyFeatureRemoteConfig = { key: undefined; payload: undefined }; - -export type FeatureType = { - config?: { - payload: any; - }; -}; - -export type FeatureRemoteConfig = - | { - key: string; - payload: any; - } - | EmptyFeatureRemoteConfig; - -export interface Feature< - TConfig extends FeatureType["config"] = EmptyFeatureRemoteConfig, -> { - key: string; - isEnabled: Ref; - isLoading: Ref; - config: ({ key: string } & TConfig) | EmptyFeatureRemoteConfig; - track(): Promise | undefined; - requestFeedback: (opts: RequestFeedbackOptions) => void; -} - -// eslint-disable-next-line @typescript-eslint/no-empty-object-type -export interface Features {} - -export type TypedFeatures = keyof Features extends never - ? Record - : { - [TypedFeatureKey in keyof Features]: Features[TypedFeatureKey] extends FeatureType - ? Feature - : Feature; - }; - -export type FeatureKey = keyof TypedFeatures; - -const SDK_VERSION = `vue-sdk/${version}`; - -interface ProviderContextType { - client: Ref; - isLoading: Ref; - updatedCount: Ref; - provider: boolean; -} - -const ProviderSymbol: InjectionKey = - Symbol("BucketProvider"); - -export type BucketProps = BucketContext & - InitOptions & { - debug?: boolean; - newBucketClient?: ( - ...args: ConstructorParameters - ) => BucketClient; - }; - -export const BucketProvider = defineComponent({ - name: "BucketProvider", - props: { - publishableKey: { type: String, required: true }, - user: { type: Object as () => UserContext | undefined, default: undefined }, - company: { - type: Object as () => CompanyContext | undefined, - default: undefined, - }, - otherContext: { - type: Object as () => Record | undefined, - default: undefined, - }, - loadingComponent: { type: null as any, default: undefined }, - debug: { type: Boolean, default: false }, - enableTracking: { type: Boolean }, - toolbar: { type: Object as () => ToolbarOptions }, - newBucketClient: { - type: Function as unknown as () => BucketProps["newBucketClient"], - default: undefined, - }, - timeoutMs: { type: Number }, - staleWhileRevalidate: { type: Boolean }, - expireTimeMs: { type: Number }, - staleTimeMs: { type: Number }, - credentials: { type: String }, - sseBaseUrl: { type: String }, - feedback: { type: Object as () => FeedbackOptions }, - }, - setup(props: BucketProps, { slots }: SetupContext) { - const featuresLoading = ref(true); - const updatedCount = ref(0); - - function updateClient() { - const cnext = ( - props.newBucketClient ?? ((...args) => new BucketClient(...args)) - )({ - ...props, - logger: props.debug ? console : undefined, - sdkVersion: SDK_VERSION, - }); - featuresLoading.value = true; - cnext - .initialize() - .catch((e) => cnext.logger.error("failed to initialize client", e)) - .finally(() => { - featuresLoading.value = false; - }); - - return cnext; - } - - watch( - () => - canonicalJson( - // canonicalJson doesn't handle `undefined` values, so we stringify/parse to remove them - JSON.parse( - JSON.stringify({ - user: props.user, - company: props.company, - otherContext: props.otherContext, - }), - ), - ), - () => { - clientRef.value = updateClient(); - }, - ); - - const clientRef = shallowRef(updateClient()); - - const context = { - isLoading: featuresLoading, - updatedCount: updatedCount, - client: clientRef, - provider: true, - } satisfies ProviderContextType; - - provide(ProviderSymbol, context); - - return () => - featuresLoading.value && typeof slots.loading !== "undefined" - ? slots.loading() - : slots.default?.(); - }, -}); - -export type RequestFeedbackOptions = Omit< - RequestFeedbackData, - "featureKey" | "featureId" ->; - -export function useFeature(key: TKey) { - const client = useClient(); - const ctx = injectSafe(); - - const track = () => client?.value.track(key); - const requestFeedback = (opts: RequestFeedbackOptions) => - client.value.requestFeedback({ ...opts, featureKey: key }); - - function getFeature() { - const f = client.value.getFeature(key); - return { - isEnabled: f.isEnabled, - config: f.config, - track, - requestFeedback, - key, - isLoading: ctx.isLoading, - }; - } - - const feature = ref(getFeature()); - - function updateFeature() { - feature.value = getFeature(); - } - - client.value.on("featuresUpdated", updateFeature); - onBeforeUnmount(() => { - client.value.off("featuresUpdated", updateFeature); - }); - - return feature; -} - -/** - * Vue composable for tracking custom events. - * - * This composable returns a function that can be used to track custom events - * with the Bucket SDK. - * - * @example - * ```ts - * import { useTrack } from '@bucketco/vue-sdk'; - * - * const track = useTrack(); - * - * // Track a custom event - * track('button_clicked', { buttonName: 'Start Huddle' }); - * ``` - * - * @returns A function that tracks an event. The function accepts: - * - `eventName`: The name of the event to track. - * - `attributes`: (Optional) Additional attributes to associate with the event. - */ -export function useTrack() { - const client = useClient(); - return (eventName: string, attributes?: Record | null) => - client?.value.track(eventName, attributes); -} - -/** - * Vue composable for requesting user feedback. - * - * This composable returns a function that can be used to trigger the feedback - * collection flow with the Bucket SDK. You can use this to prompt users for - * feedback at any point in your application. - * - * @example - * ```ts - * import { useRequestFeedback } from '@bucketco/vue-sdk'; - * - * const requestFeedback = useRequestFeedback(); - * - * // Request feedback from the user - * requestFeedback({ - * prompt: "How was your experience?", - * metadata: { page: "dashboard" } - * }); - * ``` - * - * @returns A function that requests feedback from the user. The function accepts: - * - `options`: An object containing feedback request options. - */ -export function useRequestFeedback() { - const client = useClient(); - return (options: RequestFeedbackData) => - client?.value.requestFeedback(options); -} - -/** - * Vue composable for sending feedback. - * - * This composable returns a function that can be used to send feedback to the - * Bucket SDK. You can use this to send feedback from your application. - * - * @example - * ```ts - * import { useSendFeedback } from '@bucketco/vue-sdk'; - * - * const sendFeedback = useSendFeedback(); - * - * // Send feedback from the user - * sendFeedback({ - * feedback: "I love this feature!", - * metadata: { page: "dashboard" } - * }); - * ``` - * - * @returns A function that sends feedback to the Bucket SDK. The function accepts: - * - `options`: An object containing feedback options. - */ -export function useSendFeedback() { - const client = useClient(); - return (opts: UnassignedFeedback) => client?.value.feedback(opts); -} - -/** - * Vue composable for updating the user context. - * - * This composable returns a function that can be used to update the user context - * with the Bucket SDK. You can use this to update the user context at any point - * in your application. - * - * @example - * ```ts - * import { useUpdateUser } from '@bucketco/vue-sdk'; - * - * const updateUser = useUpdateUser(); - * - * // Update the user context - * updateUser({ id: "123", name: "John Doe" }); - * ``` - * - * @returns A function that updates the user context. The function accepts: - * - `opts`: An object containing the user context to update. - */ -export function useUpdateUser() { - const client = useClient(); - return (opts: { [key: string]: string | number | undefined }) => - client?.value.updateUser(opts); -} - -/** - * Vue composable for updating the company context. - * - * This composable returns a function that can be used to update the company - * context with the Bucket SDK. You can use this to update the company context - * at any point in your application. - * - * @example - * ```ts - * import { useUpdateCompany } from '@bucketco/vue-sdk'; - * - * const updateCompany = useUpdateCompany(); - * - * // Update the company context - * updateCompany({ id: "123", name: "Acme Inc." }); - * ``` - * - * @returns A function that updates the company context. The function accepts: - * - `opts`: An object containing the company context to update. - */ -export function useUpdateCompany() { - const client = useClient(); - return (opts: { [key: string]: string | number | undefined }) => - client?.value.updateCompany(opts); -} - -/** - * Vue composable for updating the other context. - * - * This composable returns a function that can be used to update the other - * context with the Bucket SDK. You can use this to update the other context - * at any point in your application. - * - * @example - * ```ts - * import { useUpdateOtherContext } from '@bucketco/vue-sdk'; - * - * const updateOtherContext = useUpdateOtherContext(); - * - * // Update the other context - * updateOtherContext({ id: "123", name: "Acme Inc." }); - * ``` - * - * @returns A function that updates the other context. The function accepts: - * - `opts`: An object containing the other context to update. - */ -export function useUpdateOtherContext() { - const client = useClient(); - return (opts: { [key: string]: string | number | undefined }) => - client?.value.updateOtherContext(opts); -} - -/** - * Vue composable for getting the Bucket client. - * - * This composable returns the Bucket client. You can use this to get the Bucket - * client at any point in your application. - * - * @returns The Bucket client. - */ -export function useClient() { - const ctx = injectSafe(); - return ctx.client; -} - -/** - * Vue composable for checking if the Bucket client is loading. - * - * This composable returns a boolean value that indicates whether the Bucket client is loading. - * You can use this to check if the Bucket client is loading at any point in your application. - */ -export function useIsLoading() { - const ctx = injectSafe(); - return ctx.isLoading; -} - -function injectSafe() { - const ctx = inject(ProviderSymbol); - if (!ctx?.provider) { - throw new Error( - `BucketProvider is missing. Please ensure your component is wrapped with a BucketProvider.`, - ); - } - return ctx; -} - export default { install(app: App, _options?: BucketProps) { app.component("BucketProvider", BucketProvider); diff --git a/packages/vue-sdk/src/types.d.ts b/packages/vue-sdk/src/types.d.ts deleted file mode 100644 index 59f438a8..00000000 --- a/packages/vue-sdk/src/types.d.ts +++ /dev/null @@ -1 +0,0 @@ -declare module "canonical-json"; diff --git a/packages/vue-sdk/src/types.ts b/packages/vue-sdk/src/types.ts new file mode 100644 index 00000000..7179674b --- /dev/null +++ b/packages/vue-sdk/src/types.ts @@ -0,0 +1,67 @@ +import type { Ref } from "vue"; + +import type { + BucketClient, + BucketContext, + InitOptions, + RequestFeedbackData, +} from "@bucketco/browser-sdk"; + +export type EmptyFeatureRemoteConfig = { key: undefined; payload: undefined }; + +export type FeatureType = { + config?: { + payload: any; + }; +}; + +export type FeatureRemoteConfig = + | { + key: string; + payload: any; + } + | EmptyFeatureRemoteConfig; + +export interface Feature< + TConfig extends FeatureType["config"] = EmptyFeatureRemoteConfig, +> { + key: string; + isEnabled: Ref; + isLoading: Ref; + config: ({ key: string } & TConfig) | EmptyFeatureRemoteConfig; + track(): Promise | undefined; + requestFeedback: (opts: RequestFeatureFeedbackOptions) => void; +} + +// eslint-disable-next-line @typescript-eslint/no-empty-object-type +export interface Features {} + +export type TypedFeatures = keyof Features extends never + ? Record + : { + [TypedFeatureKey in keyof Features]: Features[TypedFeatureKey] extends FeatureType + ? Feature + : Feature; + }; + +export type FeatureKey = keyof TypedFeatures; + +export interface ProviderContextType { + client: Ref; + isLoading: Ref; + updatedCount: Ref; + provider: boolean; +} + +export type BucketProps = BucketContext & + InitOptions & { + debug?: boolean; + newBucketClient?: ( + ...args: ConstructorParameters + ) => BucketClient; + }; + +export type RequestFeatureFeedbackOptions = Omit< + RequestFeedbackData, + "featureKey" | "featureId" +>; diff --git a/packages/vue-sdk/src/version.ts b/packages/vue-sdk/src/version.ts new file mode 100644 index 00000000..0cd6db99 --- /dev/null +++ b/packages/vue-sdk/src/version.ts @@ -0,0 +1,3 @@ +import { version } from "../package.json"; + +export const SDK_VERSION = `vue-sdk/${version}`; diff --git a/packages/vue-sdk/src/vue.d.ts b/packages/vue-sdk/src/vue.d.ts new file mode 100644 index 00000000..68ff5d93 --- /dev/null +++ b/packages/vue-sdk/src/vue.d.ts @@ -0,0 +1,10 @@ +declare module "*.vue" { + import type { DefineComponent } from "vue"; + + const component: DefineComponent< + Record, + Record, + unknown + >; + export default component; +} diff --git a/packages/vue-sdk/tsconfig.json b/packages/vue-sdk/tsconfig.json index 464bdb25..a3610742 100644 --- a/packages/vue-sdk/tsconfig.json +++ b/packages/vue-sdk/tsconfig.json @@ -6,6 +6,6 @@ "declarationDir": "./dist/types", "declarationMap": true }, - "include": ["src"], + "include": ["src", "src/**/*.d.ts"], "typeRoots": ["./node_modules/@types"] } From e965f43e10b9b35910b4e5fb15c1395043b41441 Mon Sep 17 00:00:00 2001 From: Ron Cohen Date: Thu, 19 Jun 2025 13:44:13 +0200 Subject: [PATCH 3/8] clarify comment --- packages/vue-sdk/dev/plain/App.vue | 1 - packages/vue-sdk/src/BucketProvider.vue | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/vue-sdk/dev/plain/App.vue b/packages/vue-sdk/dev/plain/App.vue index 85d97640..5210efad 100644 --- a/packages/vue-sdk/dev/plain/App.vue +++ b/packages/vue-sdk/dev/plain/App.vue @@ -23,7 +23,6 @@ const publishableKey = import.meta.env.VITE_PUBLISHABLE_KEY || ""; :publishableKey="publishableKey" :user="user" :company="{ id: 'acme_inc', plan: 'pro' }" - :timeoutMs="1000" > diff --git a/packages/vue-sdk/src/BucketProvider.vue b/packages/vue-sdk/src/BucketProvider.vue index 3f159db9..31200d12 100644 --- a/packages/vue-sdk/src/BucketProvider.vue +++ b/packages/vue-sdk/src/BucketProvider.vue @@ -11,7 +11,7 @@ import { SDK_VERSION } from "./version"; const featuresLoading = ref(true); const updatedCount = ref(0); -// any propr which has boolean as part of the type, will default to false +// any optional prop which has boolean as part of the type, will default to false // instead of `undefined`, so we use `withDefaults` here to pass the undefined // down into the client. const props = withDefaults(defineProps(), { From 39912ded5fe31add0afd68288b519f8d07e7311a Mon Sep 17 00:00:00 2001 From: Ron Cohen Date: Thu, 19 Jun 2025 13:51:37 +0200 Subject: [PATCH 4/8] Nuxt.js doc --- packages/vue-sdk/README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/vue-sdk/README.md b/packages/vue-sdk/README.md index 4bdb409f..396e202f 100644 --- a/packages/vue-sdk/README.md +++ b/packages/vue-sdk/README.md @@ -384,6 +384,10 @@ onMounted(() => { Returns a `Ref` to indicate if Bucket has finished loading. +## Nuxt + + only renders client-side. Make sure you wrap it in for use in Nuxt.js. + ## Content Security Policy (CSP) See [CSP](https://github.com/bucketco/bucket-javascript-sdk/blob/main/packages/browser-sdk/README.md#content-security-policy-csp) for info on using Bucket React SDK with CSP From ccf39d9b7afae6929bc78e14ef413b045e55550d Mon Sep 17 00:00:00 2001 From: Ron Cohen Date: Thu, 19 Jun 2025 13:52:21 +0200 Subject: [PATCH 5/8] it's just "Nuxt" --- packages/vue-sdk/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vue-sdk/README.md b/packages/vue-sdk/README.md index 396e202f..011c635f 100644 --- a/packages/vue-sdk/README.md +++ b/packages/vue-sdk/README.md @@ -386,7 +386,7 @@ Returns a `Ref` to indicate if Bucket has finished loading. ## Nuxt - only renders client-side. Make sure you wrap it in for use in Nuxt.js. + only renders client-side. Make sure you wrap it in for use in Nuxt. ## Content Security Policy (CSP) From 1fee843a602eb0dda4d1fde0315e6336027bad06 Mon Sep 17 00:00:00 2001 From: Ron Cohen Date: Thu, 19 Jun 2025 13:53:09 +0200 Subject: [PATCH 6/8] markdown :melt: --- packages/vue-sdk/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vue-sdk/README.md b/packages/vue-sdk/README.md index 011c635f..99ac6c37 100644 --- a/packages/vue-sdk/README.md +++ b/packages/vue-sdk/README.md @@ -386,7 +386,7 @@ Returns a `Ref` to indicate if Bucket has finished loading. ## Nuxt - only renders client-side. Make sure you wrap it in for use in Nuxt. +`` only renders client-side. Make sure you wrap it in `` for use in Nuxt. ## Content Security Policy (CSP) From 046203526b68bef26be0237baf03974fca8d19fa Mon Sep 17 00:00:00 2001 From: Ron Cohen Date: Thu, 19 Jun 2025 13:54:31 +0200 Subject: [PATCH 7/8] move comment up --- packages/vue-sdk/README.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/vue-sdk/README.md b/packages/vue-sdk/README.md index 99ac6c37..3c4f6eb8 100644 --- a/packages/vue-sdk/README.md +++ b/packages/vue-sdk/README.md @@ -32,6 +32,8 @@ import { BucketProvider } from "@bucketco/vue-sdk"; ``` +If using Nuxt, wrap `` in ``. `` only renders client-side currently. + ### 2. Use `useFeature(key)` to get feature status ```vue @@ -384,10 +386,6 @@ onMounted(() => { Returns a `Ref` to indicate if Bucket has finished loading. -## Nuxt - -`` only renders client-side. Make sure you wrap it in `` for use in Nuxt. - ## Content Security Policy (CSP) See [CSP](https://github.com/bucketco/bucket-javascript-sdk/blob/main/packages/browser-sdk/README.md#content-security-policy-csp) for info on using Bucket React SDK with CSP From 9bba56354538d7f25b6e230d2d61431d60617282 Mon Sep 17 00:00:00 2001 From: Ron Cohen Date: Thu, 19 Jun 2025 14:08:48 +0200 Subject: [PATCH 8/8] add vue-js to generated docs --- packages/vue-sdk/src/index.ts | 13 ++++++++++++- typedoc.json | 3 ++- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/packages/vue-sdk/src/index.ts b/packages/vue-sdk/src/index.ts index 3cf01945..f587c0a6 100644 --- a/packages/vue-sdk/src/index.ts +++ b/packages/vue-sdk/src/index.ts @@ -11,7 +11,18 @@ import { import BucketProvider from "./BucketProvider.vue"; import { BucketProps } from "./types"; -export * from "./hooks"; +export { + useClient, + useFeature, + useIsLoading, + useRequestFeedback, + useSendFeedback, + useTrack, + useUpdateCompany, + useUpdateOtherContext, + useUpdateUser, +} from "./hooks"; +export type { BucketProps, RequestFeatureFeedbackOptions } from "./types"; export { BucketProvider }; diff --git a/typedoc.json b/typedoc.json index c12353a8..e7515346 100644 --- a/typedoc.json +++ b/typedoc.json @@ -11,7 +11,8 @@ "entryPoints": [ "packages/browser-sdk/", "packages/node-sdk/", - "packages/react-sdk/" + "packages/react-sdk/", + "packages/vue-sdk/" ], "packageOptions": { "entryPoints": ["src/index.ts"]