From 5a4d380682c6d09688a7b91ef862f1de978316dc Mon Sep 17 00:00:00 2001 From: Alexandru Ciobanu Date: Mon, 1 Sep 2025 17:03:26 +0100 Subject: [PATCH 01/27] chore: renaming ... --- .vscode/settings.json | 3 +- packages/browser-sdk/FEEDBACK.md | 156 +++++------ packages/browser-sdk/README.md | 185 +++++++------ packages/browser-sdk/eslint.config.js | 2 +- .../browser-sdk/example/feedback/Feedback.jsx | 8 +- .../example/feedback/feedback.html | 12 +- .../browser-sdk/example/typescript/app.ts | 20 +- .../browser-sdk/example/typescript/index.html | 2 +- packages/browser-sdk/index.html | 22 +- packages/browser-sdk/package.json | 14 +- packages/browser-sdk/src/client.ts | 176 +++++++------ packages/browser-sdk/src/config.ts | 11 +- packages/browser-sdk/src/context.ts | 2 +- packages/browser-sdk/src/feedback/feedback.ts | 36 +-- .../browser-sdk/src/feedback/promptStorage.ts | 10 +- .../browser-sdk/src/feedback/ui/Button.css | 14 +- .../src/feedback/ui/FeedbackDialog.css | 30 +-- .../src/feedback/ui/FeedbackForm.css | 26 +- .../src/feedback/ui/FeedbackForm.tsx | 6 +- packages/browser-sdk/src/feedback/ui/Plug.tsx | 4 +- .../src/feedback/ui/RadialProgress.css | 2 +- .../src/feedback/ui/StarRating.css | 8 +- .../src/feedback/ui/StarRating.tsx | 24 +- packages/browser-sdk/src/feedback/ui/index.ts | 4 +- .../featureCache.ts => flag/flagCache.ts} | 65 +++-- .../{feature/features.ts => flag/flags.ts} | 245 +++++++++--------- packages/browser-sdk/src/hooksManager.ts | 22 +- packages/browser-sdk/src/index.ts | 20 +- .../src/toolbar/{Features.css => Flags.css} | 16 +- .../src/toolbar/{Features.tsx => Flags.tsx} | 91 +++---- packages/browser-sdk/src/toolbar/Toolbar.css | 4 +- packages/browser-sdk/src/toolbar/Toolbar.tsx | 64 ++--- packages/browser-sdk/src/toolbar/index.ts | 4 +- packages/browser-sdk/src/ui/constants.ts | 4 +- packages/browser-sdk/src/ui/icons/Flag.tsx | 19 ++ packages/browser-sdk/src/ui/icons/Logo.tsx | 14 +- packages/browser-sdk/src/ui/utils.ts | 2 +- packages/browser-sdk/test/client.test.ts | 73 +++--- .../test/e2e/acceptance.browser.spec.ts | 10 +- packages/browser-sdk/test/e2e/empty.html | 2 +- .../test/e2e/feedback-widget.browser.spec.ts | 30 +-- .../test/e2e/give-feedback-button.html | 2 +- ...featureCache.test.ts => flagCache.test.ts} | 20 +- .../test/{features.test.ts => flags.test.ts} | 194 +++++++------- .../browser-sdk/test/hooksManager.test.ts | 32 +-- packages/browser-sdk/test/httpClient.test.ts | 6 +- packages/browser-sdk/test/init.test.ts | 36 +-- packages/browser-sdk/test/mocks/handlers.ts | 59 +++-- .../browser-sdk/test/promptStorage.test.ts | 42 +-- packages/browser-sdk/test/sse.test.ts | 2 +- packages/browser-sdk/test/usage.test.ts | 180 ++++++------- packages/browser-sdk/tsconfig.json | 2 +- packages/browser-sdk/vite.config.mjs | 6 +- packages/cli/README.md | 8 +- packages/cli/schema.json | 4 +- packages/cli/services/rules.ts | 6 +- packages/cli/utils/constants.ts | 2 +- packages/node-sdk/README.md | 56 ++-- packages/node-sdk/examples/express/app.ts | 4 +- packages/node-sdk/examples/express/bucket.ts | 6 +- packages/node-sdk/src/client.ts | 40 +-- packages/node-sdk/src/config.ts | 2 +- packages/node-sdk/src/edgeClient.ts | 6 +- packages/node-sdk/src/index.ts | 2 +- packages/node-sdk/src/types.ts | 2 +- packages/node-sdk/test/client.test.ts | 118 ++++----- .../example/app/featureManagement.ts | 2 +- .../src/index.test.ts | 10 +- .../openfeature-browser-provider/src/index.ts | 6 +- .../example/bucket.ts | 2 +- .../src/index.test.ts | 8 +- .../openfeature-node-provider/src/index.ts | 6 +- packages/react-sdk/README.md | 18 +- .../nextjs-flag-demo/components/Providers.tsx | 2 +- packages/react-sdk/src/index.tsx | 22 +- packages/react-sdk/test/usage.test.tsx | 22 +- packages/vue-sdk/README.md | 6 +- .../vue-sdk/dev/plain/components/Events.vue | 4 +- packages/vue-sdk/src/BucketProvider.vue | 6 +- packages/vue-sdk/src/hooks.ts | 4 +- packages/vue-sdk/src/types.ts | 8 +- 81 files changed, 1181 insertions(+), 1244 deletions(-) rename packages/browser-sdk/src/{feature/featureCache.ts => flag/flagCache.ts} (65%) rename packages/browser-sdk/src/{feature/features.ts => flag/flags.ts} (58%) rename packages/browser-sdk/src/toolbar/{Features.css => Flags.css} (92%) rename packages/browser-sdk/src/toolbar/{Features.tsx => Flags.tsx} (59%) create mode 100644 packages/browser-sdk/src/ui/icons/Flag.tsx rename packages/browser-sdk/test/{featureCache.test.ts => flagCache.test.ts} (80%) rename packages/browser-sdk/test/{features.test.ts => flags.test.ts} (55%) diff --git a/.vscode/settings.json b/.vscode/settings.json index 28999edc..e8db783d 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -43,6 +43,7 @@ "booleanish", "bucketco", "openfeature", - "PKCE" + "PKCE", + "Reflag" ] } diff --git a/packages/browser-sdk/FEEDBACK.md b/packages/browser-sdk/FEEDBACK.md index 6dcdc80f..3113cae2 100644 --- a/packages/browser-sdk/FEEDBACK.md +++ b/packages/browser-sdk/FEEDBACK.md @@ -1,21 +1,21 @@ -# Bucket Feedback UI +# Reflag Feedback UI -The Bucket Browser SDK includes a UI you can use to collect feedback from user +The Reflag Browser SDK includes a UI you can use to collect feedback from user about particular features. -![image](https://github.com/bucketco/bucket-javascript-sdk/assets/34348/c387bac1-f2e2-4efd-9dda-5030d76f9532) +![image](https://github.com/reflagcom/javascript/assets/34348/c387bac1-f2e2-4efd-9dda-5030d76f9532) ## Global feedback configuration -The Bucket Browser SDK feedback UI is configured with reasonable defaults, +The Reflag Browser SDK feedback UI is configured with reasonable defaults, positioning itself as a [dialog](#dialog) in the lower right-hand corner of the viewport, displayed in English, and with a [light-mode theme](#custom-styling). -These settings can be overwritten when initializing the Bucket Browser SDK: +These settings can be overwritten when initializing the Reflag Browser SDK: ```typescript -const bucket = new BucketClient({ - publishableKey: "bucket-publishable-key", +const reflag = new ReflagClient({ + publishableKey: "reflag-publishable-key", user: { id: "42" }, feedback: { ui: { @@ -47,23 +47,23 @@ See also: Automated feedback surveys are enabled by default. -When automated feedback surveys are enabled, the Bucket Browser SDK -will open and maintain a connection to the Bucket service. When a user +When automated feedback surveys are enabled, the Reflag Browser SDK +will open and maintain a connection to the Reflag service. When a user triggers an event tracked by a feature and is eligible to be prompted -for feedback, the Bucket service will send a request to the SDK instance. -By default, this request will open up the Bucket feedback UI in the user's +for feedback, the Reflag service will send a request to the SDK instance. +By default, this request will open up the Reflag feedback UI in the user's browser, but you can intercept the request and override this behavior. The live connection for automated feedback is established when the -`BucketClient` is initialized. +`ReflagClient` is initialized. ### Disabling automated feedback surveys -You can disable automated collection in the `BucketClient` constructor: +You can disable automated collection in the `ReflagClient` constructor: ```typescript -const bucket = new BucketClient({ - publishableKey: "bucket-publishable-key", +const reflag = new ReflagClient({ + publishableKey: "reflag-publishable-key", user: { id: "42" }, feedback: { enableAutoFeedback: false, @@ -78,8 +78,8 @@ event arrives, you can can [override the global defaults](#global-feedback-confi or intercept and override settings at runtime like this: ```javascript -const bucket = new BucketClient({ - publishableKey: "bucket-publishable-key", +const reflag = new ReflagClient({ + publishableKey: "reflag-publishable-key", user: { id: "42" }, feedback: { autoFeedbackHandler: (promptMessage, handlers) => { @@ -114,23 +114,23 @@ See also: ## Manual feedback collection -To open up the feedback collection UI, call `bucketClient.requestFeedback(options)` +To open up the feedback collection UI, call `reflagClient.requestFeedback(options)` with the appropriate options. This approach is particularly beneficial if you wish to retain manual control over feedback collection from your users while leveraging -the convenience of the Bucket feedback UI to reduce the amount of code you need +the convenience of the Reflag feedback UI to reduce the amount of code you need to maintain. Examples of this could be if you want the click of a `give us feedback`-button or the end of a specific user flow, to trigger a pop-up displaying the feedback user interface. -### bucketClient.requestFeedback() options +### reflagClient.requestFeedback() options Minimal usage with defaults: ```javascript -bucketClient.requestFeedback({ - featureKey: "bucket-feature-key", +reflagClient.requestFeedback({ + flagKey: "reflag-feature-key", title: "How satisfied are you with file uploads?", }); ``` @@ -138,8 +138,8 @@ bucketClient.requestFeedback({ All options: ```javascript -bucketClient.requestFeedback({ - featureKey: "bucket-feature-key", // [Required] +reflagClient.requestFeedback({ + flagKey: "reflag-feature-key", // [Required] userId: "your-user-id", // [Optional] if user persistence is // enabled (default in browsers), companyId: "users-company-or-account-id", // [Optional] @@ -178,7 +178,7 @@ page. It can be dismissed with the keyboard shortcut `` or the dedicated close button in the top right corner. It is always centered on the page, capturing focus, and making it the primary interface the user needs to interact with. -![image](https://github.com/bucketco/bucket-tracking-sdk/assets/331790/6c6efbd3-cf7d-4d5b-b126-7ac978b2e512) +![image](https://github.com/reflagcom/javascript/assets/331790/6c6efbd3-cf7d-4d5b-b126-7ac978b2e512) Using a modal is the strongest possible push for feedback. You are interrupting the user's normal flow, which can cause annoyance. A good use-case for the modal is @@ -198,7 +198,7 @@ user's interaction with the rest of the page. It can be dismissed with the dedic close button, but will automatically disappear after a short time period if the user does not interact with it. -![image](https://github.com/bucketco/bucket-tracking-sdk/assets/331790/30413513-fd5f-4a2c-852a-9b074fa4666c) +![image](https://github.com/reflagcom/javascript/assets/331790/30413513-fd5f-4a2c-852a-9b074fa4666c) Using a dialog is a soft push for feedback. It lets the user continue their work with a minimal amount of intrusion. The user can opt-in to respond but is not @@ -226,7 +226,7 @@ position: { A popover that is anchored relative to a DOM-element (typically a button). It can be dismissed by clicking outside the popover or by pressing the dedicated close button. -![image](https://github.com/bucketco/bucket-tracking-sdk/assets/331790/4c5c5597-9ed3-4d4d-90c0-950926d0d967) +![image](https://github.com/reflagcom/javascript/assets/331790/4c5c5597-9ed3-4d4d-90c0-950926d0d967) You can use the popover mode to implement your own button to collect feedback manually. @@ -244,8 +244,8 @@ Popover feedback button example: + + Reflag feedback collection + diff --git a/packages/vue-sdk/src/BucketProvider.vue b/packages/vue-sdk/src/BucketProvider.vue index 31200d12..5a7e719f 100644 --- a/packages/vue-sdk/src/BucketProvider.vue +++ b/packages/vue-sdk/src/BucketProvider.vue @@ -2,7 +2,7 @@ import canonicalJson from "canonical-json"; import { provide, ref, shallowRef, watch } from "vue"; -import { BucketClient } from "@bucketco/browser-sdk"; +import { ReflagClient } from "@bucketco/browser-sdk"; import { ProviderSymbol } from "./hooks"; import { BucketProps, ProviderContextType } from "./types"; @@ -21,7 +21,7 @@ const props = withDefaults(defineProps(), { function updateClient() { const cnext = ( - props.newBucketClient ?? ((...args) => new BucketClient(...args)) + props.newBucketClient ?? ((...args) => new ReflagClient(...args)) )({ ...props, logger: props.debug ? console : undefined, @@ -55,7 +55,7 @@ watch( }, ); -const clientRef = shallowRef(updateClient()); +const clientRef = shallowRef(updateClient()); const context = { isLoading: featuresLoading, diff --git a/packages/vue-sdk/src/hooks.ts b/packages/vue-sdk/src/hooks.ts index b797b46b..f317c070 100644 --- a/packages/vue-sdk/src/hooks.ts +++ b/packages/vue-sdk/src/hooks.ts @@ -27,9 +27,9 @@ export function useFeature(key: string): Feature { feature.value = client.value.getFeature(key); } - client.value.on("featuresUpdated", updateFeature); + client.value.on("flagsUpdated", updateFeature); onBeforeUnmount(() => { - client.value.off("featuresUpdated", updateFeature); + client.value.off("flagsUpdated", updateFeature); }); return { diff --git a/packages/vue-sdk/src/types.ts b/packages/vue-sdk/src/types.ts index 7d6adf2f..5a2142eb 100644 --- a/packages/vue-sdk/src/types.ts +++ b/packages/vue-sdk/src/types.ts @@ -1,7 +1,7 @@ import type { Ref } from "vue"; import type { - BucketClient, + ReflagClient, BucketContext, InitOptions, RequestFeedbackData, @@ -47,7 +47,7 @@ export type TypedFeatures = keyof Features extends never export type FeatureKey = keyof TypedFeatures; export interface ProviderContextType { - client: Ref; + client: Ref; isLoading: Ref; updatedCount: Ref; provider: boolean; @@ -57,8 +57,8 @@ export type BucketProps = BucketContext & InitOptions & { debug?: boolean; newBucketClient?: ( - ...args: ConstructorParameters - ) => BucketClient; + ...args: ConstructorParameters + ) => ReflagClient; }; export type RequestFeatureFeedbackOptions = Omit< From bfc0d9a16b8e8c139e77964d6b14a0bb1d8e0187 Mon Sep 17 00:00:00 2001 From: Alexandru Ciobanu Date: Mon, 1 Sep 2025 17:18:59 +0100 Subject: [PATCH 02/27] chore: renaming --- packages/browser-sdk/FEEDBACK.md | 16 ++-- packages/browser-sdk/README.md | 78 +++++++++---------- .../browser-sdk/example/feedback/Feedback.jsx | 2 +- .../example/feedback/feedback.html | 2 +- .../browser-sdk/example/typescript/app.ts | 6 +- .../browser-sdk/example/typescript/index.html | 2 +- packages/browser-sdk/index.html | 8 +- packages/browser-sdk/src/client.ts | 4 +- packages/browser-sdk/src/feedback/feedback.ts | 2 +- .../ui/config/defaultTranslations.tsx | 2 +- packages/browser-sdk/src/toolbar/index.css | 2 +- packages/browser-sdk/src/ui/icons/Feature.tsx | 19 ----- .../test/e2e/feedback-widget.browser.spec.ts | 10 +-- .../browser-sdk/test/hooksManager.test.ts | 8 +- packages/browser-sdk/test/usage.test.ts | 2 +- packages/cli/README.md | 18 ++--- packages/cli/eslint.config.js | 2 +- packages/cli/package.json | 10 +-- packages/cli/services/rules.ts | 34 ++++---- packages/cli/tsconfig.json | 2 +- packages/cli/utils/constants.ts | 2 +- packages/cli/utils/gen.ts | 4 +- packages/eslint-config/base.js | 4 +- packages/eslint-config/package.json | 2 +- packages/flag-evaluation/eslint.config.js | 2 +- packages/flag-evaluation/package.json | 8 +- packages/flag-evaluation/tsconfig.json | 2 +- packages/node-sdk/README.md | 46 +++++------ packages/node-sdk/eslint.config.js | 2 +- .../examples/cloudflare-worker/README.md | 2 +- .../examples/cloudflare-worker/src/index.ts | 2 +- packages/node-sdk/package.json | 10 +-- packages/node-sdk/src/client.ts | 8 +- packages/node-sdk/src/edgeClient.ts | 2 +- packages/node-sdk/src/types.ts | 2 +- packages/node-sdk/test/client.test.ts | 2 +- packages/node-sdk/tsconfig.json | 2 +- .../openfeature-browser-provider/README.md | 18 ++--- .../eslint.config.js | 2 +- .../example/app/featureManagement.ts | 2 +- .../example/package.json | 2 +- .../openfeature-browser-provider/package.json | 10 +-- .../src/index.test.ts | 14 ++-- .../openfeature-browser-provider/src/index.ts | 2 +- .../tsconfig.json | 2 +- packages/openfeature-node-provider/README.md | 18 ++--- .../eslint.config.js | 2 +- .../example/README.md | 2 +- .../openfeature-node-provider/package.json | 10 +-- .../src/index.test.ts | 12 +-- .../openfeature-node-provider/src/index.ts | 2 +- .../openfeature-node-provider/tsconfig.json | 2 +- packages/react-sdk/README.md | 38 ++++----- .../dev/nextjs-flag-demo/components/Flags.tsx | 2 +- .../nextjs-flag-demo/components/Providers.tsx | 2 +- .../dev/nextjs-flag-demo/package.json | 2 +- packages/react-sdk/eslint.config.js | 2 +- packages/react-sdk/package.json | 10 +-- packages/react-sdk/src/index.tsx | 2 +- packages/react-sdk/test/usage.test.tsx | 2 +- packages/react-sdk/tsconfig.json | 2 +- packages/react-sdk/vite.config.mjs | 2 +- packages/tsconfig/package.json | 2 +- packages/vue-sdk/README.md | 28 +++---- packages/vue-sdk/eslint.config.js | 2 +- packages/vue-sdk/package.json | 10 +-- packages/vue-sdk/src/BucketProvider.vue | 2 +- packages/vue-sdk/src/hooks.ts | 14 ++-- packages/vue-sdk/src/index.ts | 2 +- packages/vue-sdk/src/types.ts | 2 +- packages/vue-sdk/tsconfig.json | 2 +- packages/vue-sdk/vite.config.mjs | 2 +- 72 files changed, 271 insertions(+), 290 deletions(-) delete mode 100644 packages/browser-sdk/src/ui/icons/Feature.tsx diff --git a/packages/browser-sdk/FEEDBACK.md b/packages/browser-sdk/FEEDBACK.md index 3113cae2..22070332 100644 --- a/packages/browser-sdk/FEEDBACK.md +++ b/packages/browser-sdk/FEEDBACK.md @@ -1,7 +1,7 @@ # Reflag Feedback UI The Reflag Browser SDK includes a UI you can use to collect feedback from user -about particular features. +about particular flags. ![image](https://github.com/reflagcom/javascript/assets/34348/c387bac1-f2e2-4efd-9dda-5030d76f9532) @@ -49,7 +49,7 @@ Automated feedback surveys are enabled by default. When automated feedback surveys are enabled, the Reflag Browser SDK will open and maintain a connection to the Reflag service. When a user -triggers an event tracked by a feature and is eligible to be prompted +triggers an event tracked by a flag and is eligible to be prompted for feedback, the Reflag service will send a request to the SDK instance. By default, this request will open up the Reflag feedback UI in the user's browser, but you can intercept the request and override this behavior. @@ -130,7 +130,7 @@ Minimal usage with defaults: ```javascript reflagClient.requestFeedback({ - flagKey: "reflag-feature-key", + flagKey: "reflag-flag-key", title: "How satisfied are you with file uploads?", }); ``` @@ -139,7 +139,7 @@ All options: ```javascript reflagClient.requestFeedback({ - flagKey: "reflag-feature-key", // [Required] + flagKey: "reflag-flag-key", // [Required] userId: "your-user-id", // [Optional] if user persistence is // enabled (default in browsers), companyId: "users-company-or-account-id", // [Optional] @@ -202,7 +202,7 @@ does not interact with it. Using a dialog is a soft push for feedback. It lets the user continue their work with a minimal amount of intrusion. The user can opt-in to respond but is not -required to. A good use case for this behavior is when a user uses a feature where +required to. A good use case for this behavior is when a user uses a flag where the expected outcome is predictable, possibly because they have used it multiple times before. For example: Uploading a file, switching to a different view of a visualization, visiting a specific page, or manipulating some data. @@ -245,7 +245,7 @@ Popover feedback button example: const button = document.getElementById("feedbackButton"); button.addEventListener("click", (e) => { reflagClient.requestFeedback({ - flagKey: "reflag-feature-key", + flagKey: "reflag-flag-key", userId: "your-user-id", title: "How do you like the popover?", position: { @@ -412,7 +412,7 @@ Once you have collected the feedback data, pass it along to `reflagClient.feedba ```javascript reflagClient.feedback({ - flagKey: "reflag-feature-key", + flagKey: "reflag-flag-key", userId: "your-user-id", score: 5, comment: "Best thing I've ever tried!", @@ -434,7 +434,7 @@ new ReflagClient({ autoFeedbackHandler: async (promptMessage, handlers) => { // This opens your custom UI customFeedbackCollection({ - // The question configured in the Reflag UI for the feature + // The question configured in the Reflag UI for the flag question: promptMessage.question, // When the user successfully submits feedback data. // Use this instead of `reflagClient.feedback()`, otherwise diff --git a/packages/browser-sdk/README.md b/packages/browser-sdk/README.md index b07860df..295fc92a 100644 --- a/packages/browser-sdk/README.md +++ b/packages/browser-sdk/README.md @@ -2,7 +2,7 @@ Basic client for [Reflag.com](https://reflag.com). If you're using React, you'll be better off with the Reflag React SDK. -Reflag supports feature toggling, tracking feature usage, [collecting feedback](#qualitative-feedback-on-beta-features) on features, and [remotely configuring features](#remote-config). +Reflag supports flag toggling, tracking flag usage, [collecting feedback](#qualitative-feedback-on-beta-flags) on flags, and [remotely configuring flags](#remote-config). ## Install @@ -37,11 +37,11 @@ const { } = reflagClient.getFlag("huddle"); if (isEnabled) { - // Show feature. When retrieving `isEnabled` the client automatically - // sends a "check" event for the "huddle" feature which is shown in the + // Show flag. When retrieving `isEnabled` the client automatically + // sends a "check" event for the "huddle" flag which is shown in the // Reflag UI. - // On usage, call `track` to let Reflag know that a user interacted with the feature + // On usage, call `track` to let Reflag know that a user interacted with the flag track(); // The `payload` is a user-supplied JSON in Reflag that is dynamically picked @@ -49,11 +49,11 @@ if (isEnabled) { const question = payload?.question ?? "Tell us what you think of Huddles"; // Use `requestFeedback` to create "Send feedback" buttons easily for specific - // features. This is not related to `track` and you can call them individually. + // flags. This is not related to `track` and you can call them individually. requestFeedback({ title: question }); } -// `track` just calls `reflagClient.track()` to send an event using the same feature key +// `track` just calls `reflagClient.track()` to send an event using the same flag key // You can also use `track` on the client directly to send any custom event. reflagClient.track("huddle"); @@ -104,21 +104,21 @@ type Configuration = { enableTracking?: true; // set to `false` to stop sending track events and user/company updates to Reflag servers. Useful when you're impersonating a user fallbackFlags?: | string[] - | Record; // Enable these features if unable to contact reflag.com. Can be a list of feature keys or a record with configuration values - timeoutMs?: number; // Timeout for fetching features (default: 5000ms) - staleWhileRevalidate?: boolean; // Revalidate in the background when cached features turn stale to avoid latency in the UI (default: false) - staleTimeMs?: number; // at initialization time features are loaded from the cache unless they have gone stale. Defaults to 0 which means the cache is disabled. Increase this in the case of a non-SPA - expireTimeMs?: number; // In case we're unable to fetch features from Reflag, cached/stale features will be used instead until they expire after `expireTimeMs`. Default is 30 days + | Record; // Enable these flags if unable to contact reflag.com. Can be a list of flag keys or a record with configuration values + timeoutMs?: number; // Timeout for fetching flags (default: 5000ms) + staleWhileRevalidate?: boolean; // Revalidate in the background when cached flags turn stale to avoid latency in the UI (default: false) + staleTimeMs?: number; // at initialization time flags are loaded from the cache unless they have gone stale. Defaults to 0 which means the cache is disabled. Increase this in the case of a non-SPA + expireTimeMs?: number; // In case we're unable to fetch flags from Reflag, cached/stale flags will be used instead until they expire after `expireTimeMs`. Default is 30 days offline?: boolean; // Use the SDK in offline mode. Offline mode is useful during testing and local development }; ``` -## Feature toggles +## Flag toggles -Reflag determines which features are active for a given user/company. The user/company is given in the ReflagClient constructor. +Reflag determines which flags are active for a given user/company. The user/company is given in the ReflagClient constructor. If you supply `user` or `company` objects, they must include at least the `id` property otherwise they will be ignored in their entirety. -In addition to the `id`, you must also supply anything additional that you want to be able to evaluate feature targeting rules against. +In addition to the `id`, you must also supply anything additional that you want to be able to evaluate flag targeting rules against. Attributes cannot be nested (multiple levels) and must be either strings, integers or booleans. Some attributes are special and used in Reflag UI: @@ -144,7 +144,7 @@ const reflagClient = new ReflagClient({ }); ``` -To retrieve features along with their targeting information, use `getFlag(key: string)`: +To retrieve flags along with their targeting information, use `getFlag(key: string)`: ```ts const huddle = reflagClient.getFlag("huddle"); @@ -156,10 +156,10 @@ const huddle = reflagClient.getFlag("huddle"); // } ``` -You can use `getFlags()` to retrieve all enabled features currently. +You can use `getFlags()` to retrieve all enabled flags currently. ```ts -const features = reflagClient.getFlags(); +const flags = reflagClient.getFlags(); // { // huddle: { // isEnabled: true, @@ -177,14 +177,14 @@ generate a `check` event, contrary to the `isEnabled` property on the object ret ## Remote config -Remote config is a dynamic and flexible approach to configuring feature behavior outside of your app – without needing to re-deploy it. +Remote config is a dynamic and flexible approach to configuring flag behavior outside of your app – without needing to re-deploy it. -Similar to `isEnabled`, each feature has a `config` property. This configuration is managed from within Reflag. -It is managed similar to the way access to features is managed, but instead of the binary `isEnabled` you can have +Similar to `isEnabled`, each flag has a `config` property. This configuration is managed from within Reflag. +It is managed similar to the way access to flags is managed, but instead of the binary `isEnabled` you can have multiple configuration values which are given to different user/companies. ```ts -const features = reflagClient.getFlags(); +const flags = reflagClient.getFlags(); // { // huddle: { // isEnabled: true, @@ -197,31 +197,31 @@ const features = reflagClient.getFlags(); // } ``` -`key` is mandatory for a config, but if a feature has no config or no config value was matched against the context, the `key` will be `undefined`. Make sure to check against this case when trying to use the configuration in your application. `payload` is an optional JSON value for arbitrary configuration needs. +`key` is mandatory for a config, but if a flag has no config or no config value was matched against the context, the `key` will be `undefined`. Make sure to check against this case when trying to use the configuration in your application. `payload` is an optional JSON value for arbitrary configuration needs. Just as `isEnabled`, accessing `config` on the object returned by `getFlags` does not automatically generate a `check` event, contrary to the `config` property on the object returned by `getFlag`. ## Updating user/company/other context -Attributes given for the user/company/other context in the ReflagClient constructor can be updated for use in feature targeting evaluation with the `updateUser()`, `updateCompany()` and `updateOtherContext()` methods. -They return a promise which resolves once the features have been re-evaluated follow the update of the attributes. +Attributes given for the user/company/other context in the ReflagClient constructor can be updated for use in flag targeting evaluation with the `updateUser()`, `updateCompany()` and `updateOtherContext()` methods. +They return a promise which resolves once the flags have been re-evaluated follow the update of the attributes. -The following shows how to let users self-opt-in for a new feature. The feature must have the rule `voiceHuddleOptIn IS true` set in the Reflag UI. +The following shows how to let users self-opt-in for a new flag. The flag must have the rule `voiceHuddleOptIn IS true` set in the Reflag UI. ```ts -// toggle opt-in for the voiceHuddle feature: +// toggle opt-in for the voiceHuddle flag: const { isEnabled } = reflagClient.getFlag("voiceHuddle"); -// this toggles the feature on/off. The promise returns once feature targeting has been +// this toggles the flag on/off. The promise returns once flag targeting has been // re-evaluated. await reflagClient.updateUser({ voiceHuddleOptIn: (!isEnabled).toString() }); ``` -> [!NOTE] > `user`/`company` attributes are also stored remotely on the Reflag servers and will automatically be used to evaluate feature targeting if the page is refreshed. +> [!NOTE] > `user`/`company` attributes are also stored remotely on the Reflag servers and will automatically be used to evaluate flag targeting if the page is refreshed. ## Toolbar -The Reflag Toolbar is great for toggling features on/off for yourself to ensure that everything works both when a feature is on and when it's off. +The Reflag Toolbar is great for toggling flags on/off for yourself to ensure that everything works both when a flag is on and when it's off. Toolbar screenshot @@ -255,13 +255,13 @@ const client = new ReflagClient({ See [the reference](https://docs.reflag.com/supported-languages/browser-sdk/globals#toolbaroptions) for details. -## Qualitative feedback on beta features +## Qualitative feedback on beta flags Reflag can collect qualitative feedback from your users in the form of a [Customer Satisfaction Score](https://en.wikipedia.org/wiki/Customer_satisfaction) and a comment. ### Automated feedback collection -The Reflag Browser SDK comes with automated feedback collection mode enabled by default, which lets the Reflag service ask your users for feedback for relevant features just after they've used them. +The Reflag Browser SDK comes with automated feedback collection mode enabled by default, which lets the Reflag service ask your users for feedback for relevant flags just after they've used them. > [!NOTE] > To get started with automatic feedback collection, make sure you've set `user` in the `ReflagClient` constructor. @@ -283,7 +283,7 @@ Feedback can be submitted to Reflag using the SDK: ```ts reflagClient.feedback({ - flagKey: "my-feature-key", // String (required), copy from Feature feedback tab + flagKey: "my-flag-key", // String (required), copy from Flag feedback tab score: 5, // Number: 1-5 (optional) comment: "Absolutely stellar work!", // String (optional) }); @@ -295,10 +295,10 @@ If you are not using the Reflag Browser SDK, you can still submit feedback using See details in [Feedback HTTP API](https://docs.reflag.com/api/http-api#post-feedback) -## Tracking feature usage +## Tracking flag usage -The `track` function lets you send events to Reflag to denote feature usage. -By default Reflag expects event names to align with the feature keys, but +The `track` function lets you send events to Reflag to denote flag usage. +By default Reflag expects event names to align with the flag keys, but you can customize it as you wish. ```ts @@ -309,8 +309,8 @@ reflagClient.track("huddle", { voiceHuddle: true }); Event listeners allow for capturing various events occurring in the `ReflagClient`. This is useful to build integrations with other system or for various debugging purposes. There are 5 kinds of events: -- `check`: Your code used `isEnabled` or `config` for a feature -- `flagsUpdated`: Features were updated. Either because they were loaded as part of initialization or because the user/company updated +- `check`: Your code used `isEnabled` or `config` for a flag +- `flagsUpdated`: Flags were updated. Either because they were loaded as part of initialization or because the user/company updated - `user`: User information updated (similar to the `identify` call used in tracking terminology) - `company`: Company information updated (sometimes to the `group` call used in tracking terminology) - `track`: Track event occurred. @@ -318,7 +318,7 @@ Event listeners allow for capturing various events occurring in the `ReflagClien Use the `on()` method to add an event listener to respond to certain events. See the API reference for details on each hook. ```ts -import { ReflagClient, CheckEvent, RawFeatures } from "@reflag/browser-sdk"; +import { ReflagClient, CheckEvent, RawFlags } from "@reflag/browser-sdk"; const client = new ReflagClient({ // options @@ -365,7 +365,7 @@ If you are running with strict Content Security Policies active on your website, | Directive | Values | Reason | | ----------- | -------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | | connect-src | [https://front.reflag.com](https://front.reflag.com) | Basic functionality` | -| connect-src | [https://livemessaging.reflag.com](https://livemessaging.reflag.com) | Server sent events for use in automated feedback surveys, which allows for automatically collecting feedback when a user used a feature. | +| connect-src | [https://livemessaging.reflag.com](https://livemessaging.reflag.com) | Server sent events for use in automated feedback surveys, which allows for automatically collecting feedback when a user used a flag. | | style-src | 'unsafe-inline' | The feedback UI is styled with inline styles. Not having this directive results unstyled HTML elements. | If you are including the Reflag tracking SDK with a `
-

How satisfied are you with our ExampleFeature?

+

How satisfied are you with our ExampleFlag?

Satisfaction diff --git a/packages/browser-sdk/example/typescript/app.ts b/packages/browser-sdk/example/typescript/app.ts index f41a3a31..e0bb6d9a 100644 --- a/packages/browser-sdk/example/typescript/app.ts +++ b/packages/browser-sdk/example/typescript/app.ts @@ -1,4 +1,4 @@ -import { ReflagClient, CheckEvent, RawFeatures } from "../../src"; +import { ReflagClient, CheckEvent, RawFlags } from "../../src"; const urlParams = new URLSearchParams(window.location.search); const publishableKey = urlParams.get("publishableKey"); @@ -34,8 +34,8 @@ reflag.initialize().then(() => { if (loadingElem) loadingElem.style.display = "none"; }); -reflag.on("flagsUpdated", (features: RawFeatures) => { - const { isEnabled } = features[flagKey]; +reflag.on("flagsUpdated", (flags: RawFlags) => { + const { isEnabled } = flags[flagKey]; const startHuddleElem = document.getElementById("start-huddle"); if (isEnabled) { diff --git a/packages/browser-sdk/example/typescript/index.html b/packages/browser-sdk/example/typescript/index.html index bc34c123..4082620e 100644 --- a/packages/browser-sdk/example/typescript/index.html +++ b/packages/browser-sdk/example/typescript/index.html @@ -3,7 +3,7 @@ - Reflag feature management + Reflag flag management Loading... diff --git a/packages/browser-sdk/index.html b/packages/browser-sdk/index.html index 5d40034b..2a61be03 100644 --- a/packages/browser-sdk/index.html +++ b/packages/browser-sdk/index.html @@ -58,12 +58,12 @@ console.log(`Check event for ${check.key}`), ); - reflag.on("flagsUpdated", (features) => { - console.log("Features updated"); - const feature = reflag.getFlag(flagKey); + reflag.on("flagsUpdated", (flags) => { + console.log("Flags updated"); + const flag = reflag.getFlag(flagKey); const startHuddleElem = document.getElementById("start-huddle"); - if (feature.isEnabled) { + if (flag.isEnabled) { // show the start-huddle button if (startHuddleElem) startHuddleElem.style.display = "block"; } else { diff --git a/packages/browser-sdk/src/client.ts b/packages/browser-sdk/src/client.ts index e00e5a63..f4b031d8 100644 --- a/packages/browser-sdk/src/client.ts +++ b/packages/browser-sdk/src/client.ts @@ -348,7 +348,7 @@ export interface Flag { * Function to request feedback for this flag. */ requestFeedback: ( - options: Omit, + options: Omit, ) => void; /** @@ -816,7 +816,7 @@ export class ReflagClient { }, track: () => this.track(flagKey), requestFeedback: ( - options: Omit, + options: Omit, ) => { this.requestFeedback({ flagKey, diff --git a/packages/browser-sdk/src/feedback/feedback.ts b/packages/browser-sdk/src/feedback/feedback.ts index c5bca7fc..b141954b 100644 --- a/packages/browser-sdk/src/feedback/feedback.ts +++ b/packages/browser-sdk/src/feedback/feedback.ts @@ -108,7 +108,7 @@ export type UnassignedFeedback = { score?: number; /** - * User supplied comment about your feature. + * User supplied comment about your flag. */ comment?: string; diff --git a/packages/browser-sdk/src/feedback/ui/config/defaultTranslations.tsx b/packages/browser-sdk/src/feedback/ui/config/defaultTranslations.tsx index c7edc9a2..94ed27ec 100644 --- a/packages/browser-sdk/src/feedback/ui/config/defaultTranslations.tsx +++ b/packages/browser-sdk/src/feedback/ui/config/defaultTranslations.tsx @@ -3,7 +3,7 @@ import { FeedbackTranslations } from "../types"; * {@includeCode ./defaultTranslations.tsx} */ export const DEFAULT_TRANSLATIONS: FeedbackTranslations = { - DefaultQuestionLabel: "How satisfied are you with this feature?", + DefaultQuestionLabel: "How satisfied are you with this flag?", QuestionPlaceholder: "Write a comment", ScoreStatusDescription: "Pick a score and leave a comment", ScoreStatusLoading: "Saving score, please wait...", diff --git a/packages/browser-sdk/src/toolbar/index.css b/packages/browser-sdk/src/toolbar/index.css index 7028c976..48ea3310 100644 --- a/packages/browser-sdk/src/toolbar/index.css +++ b/packages/browser-sdk/src/toolbar/index.css @@ -1,3 +1,3 @@ @import url(./Toolbar.css); -@import url(./Features.css); +@import url(./Flags.css); @import url(./Switch.css); diff --git a/packages/browser-sdk/src/ui/icons/Feature.tsx b/packages/browser-sdk/src/ui/icons/Feature.tsx deleted file mode 100644 index 14ae8a41..00000000 --- a/packages/browser-sdk/src/ui/icons/Feature.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { FunctionComponent, h } from "preact"; - -export const Feature: FunctionComponent> = ( - props, -) => ( - - - -); diff --git a/packages/browser-sdk/test/e2e/feedback-widget.browser.spec.ts b/packages/browser-sdk/test/e2e/feedback-widget.browser.spec.ts index 5f8c8009..5f6bcfd7 100644 --- a/packages/browser-sdk/test/e2e/feedback-widget.browser.spec.ts +++ b/packages/browser-sdk/test/e2e/feedback-widget.browser.spec.ts @@ -50,7 +50,7 @@ async function getOpenedWidgetContainer( const reflag = new ReflagClient({publishableKey: "${KEY}", user: {id: "foo"}, company: {id: "bar"}, ...${JSON.stringify(initOptions ?? {})}}); await reflag.initialize(); await reflag.requestFeedback({ - flagKey: "feature1", + flagKey: "flag1", title: "baz", }); })() @@ -90,7 +90,7 @@ async function getGiveFeedbackPageContainer( document.querySelector("#give-feedback-button")?.addEventListener("click", () => { console.log("cliked!"); reflag.requestFeedback({ - flagKey: "feature1", + flagKey: "flag1", title: "baz", }); }); @@ -250,7 +250,7 @@ test("Sends a request when choosing a score immediately", async ({ page }) => { .poll(() => sentJSON) .toEqual({ companyId: "bar", - key: "feature1", + key: "flag1", score: expectedScore, question: "baz", userId: "foo", @@ -309,7 +309,7 @@ test("Updates the score on every change", async ({ page }) => { .toEqual({ feedbackId: "123", companyId: "bar", - key: "feature1", + key: "flag1", question: "baz", score: 3, userId: "foo", @@ -369,7 +369,7 @@ test("Sends a request with both the score and comment when submitting", async ({ score: expectedScore, companyId: "bar", question: "baz", - key: "feature1", + key: "flag1", feedbackId: "123", userId: "foo", source: "widget", diff --git a/packages/browser-sdk/test/hooksManager.test.ts b/packages/browser-sdk/test/hooksManager.test.ts index aad8baaa..80044eca 100644 --- a/packages/browser-sdk/test/hooksManager.test.ts +++ b/packages/browser-sdk/test/hooksManager.test.ts @@ -43,12 +43,12 @@ describe("HookManager", () => { const callback = vi.fn(); hookManager.addHook("flagsUpdated", callback); - const features: RawFlags = { - /* mock RawFeatures data */ + const flags: RawFlags = { + /* mock RawFlags data */ }; - hookManager.trigger("flagsUpdated", features); + hookManager.trigger("flagsUpdated", flags); - expect(callback).toHaveBeenCalledWith(features); + expect(callback).toHaveBeenCalledWith(flags); }); it("should add and trigger `track` hooks", () => { diff --git a/packages/browser-sdk/test/usage.test.ts b/packages/browser-sdk/test/usage.test.ts index 53d3b8aa..1cc9d109 100644 --- a/packages/browser-sdk/test/usage.test.ts +++ b/packages/browser-sdk/test/usage.test.ts @@ -85,7 +85,7 @@ describe("usage", () => { }); }); - test("accepts `flagKey` instead of `flagId` for manual feedback", async () => { + test("accepts `flagKey` instead of `featureId` for manual feedback", async () => { const reflagInstance = new ReflagClient({ publishableKey: KEY, user: { id: "foo" }, diff --git a/packages/cli/README.md b/packages/cli/README.md index ec961f59..d2e8e933 100644 --- a/packages/cli/README.md +++ b/packages/cli/README.md @@ -2,7 +2,7 @@ Command-line interface for interacting with Bucket services. The CLI allows you to manage apps, features, authentication, and generate TypeScript types for your Bucket features. With this tool, -you can streamline your feature flagging workflow directly from your terminal. +you can streamline your flagging workflow directly from your terminal. ## Usage @@ -10,10 +10,10 @@ Get started by installing the CLI locally in your project: ```bash # npm -npm install --save-dev @bucketco/cli +npm install --save-dev @reflag/cli # yarn -yarn add --dev @bucketco/cli +yarn add --dev @reflag/cli ``` Then running the `new` command from your project's root directory, @@ -53,7 +53,7 @@ Here's a comprehensive list of configuration options available in the `bucket.co ```json { - "$schema": "https://unpkg.com/@bucketco/cli@latest/schema.json", + "$schema": "https://unpkg.com/@reflag/cli@latest/schema.json", "baseUrl": "https://app.reflag.com", "apiUrl": "https://app.reflag.com/api", "appId": "ap123456789", @@ -68,7 +68,7 @@ Here's a comprehensive list of configuration options available in the `bucket.co | Option | Description | Default | | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | -| `$schema` | Autocompletion for the config. `latest` can be replaced with a specific version. | "https://unpkg.com/@bucketco/cli@latest/schema.json" | +| `$schema` | Autocompletion for the config. `latest` can be replaced with a specific version. | "https://unpkg.com/@reflag/cli@latest/schema.json" | | `baseUrl` | Base URL for Bucket services. | "https://app.reflag.com" | | `apiUrl` | API URL for Bucket services (overrides baseUrl for API calls). | "https://app.reflag.com/api" | | `appId` | Your Bucket application ID. | Required | @@ -250,7 +250,7 @@ Bucket provides powerful AI-assisted development capabilities through rules and ### Bucket Rules (Recommended) -The `rules` command helps you set up AI-specific rules for your project. These rules enable AI tools to better understand how to work with Bucket and feature flags and how they should be used in your codebase. +The `rules` command helps you set up AI-specific rules for your project. These rules enable AI tools to better understand how to work with Bucket and flags and how they should be used in your codebase. ```bash npx bucket rules [--format ] [--yes] @@ -263,17 +263,17 @@ Options: - `copilot`: Adds rules to `.github/copilot-instructions.md` for GitHub Copilot integration. - `--yes`: Skip confirmation prompts and overwrite existing files without asking. -This command will add rules to your project that provide AI tools with context about how to setup and use Bucket feature flags. For the copilot format, the rules will be added to a dedicated section in the file, allowing you to maintain other copilot instructions alongside Bucket's rules. +This command will add rules to your project that provide AI tools with context about how to setup and use Bucket flags. For the copilot format, the rules will be added to a dedicated section in the file, allowing you to maintain other copilot instructions alongside Bucket's rules. ## Model Context Protocol -The Model Context Protocol (MCP) is an open protocol that provides a standardized way to connect AI models to different data sources and tools. In the context of Bucket, MCP enables your code editor to understand your feature flags, their states, and their relationships within your codebase. This creates a seamless bridge between your feature management workflow and AI-powered development tools. The MCP server is hosted by Bucket, so it's very easy to get started. +The Model Context Protocol (MCP) is an open protocol that provides a standardized way to connect AI models to different data sources and tools. In the context of Bucket, MCP enables your code editor to understand your flags, their states, and their relationships within your codebase. This creates a seamless bridge between your feature management workflow and AI-powered development tools. The MCP server is hosted by Bucket, so it's very easy to get started. _\*\*Note: The Bucket `mcp` CLI command was previously used for a \_local_ server. However, in recent versions of the Bucket CLI, the `mcp` command has been repurposed to help you connect to the new remote MCP server.\*\*\_ ### Setting up MCP -The `mcp` command helps you configure your editor or AI client to connect with Bucket's remote MCP server. This allows your AI tools to understand your feature flags and provide more contextual assistance. +The `mcp` command helps you configure your editor or AI client to connect with Bucket's remote MCP server. This allows your AI tools to understand your flags and provide more contextual assistance. ```bash npx bucket mcp [--app-id ] [--editor ] [--scope ] diff --git a/packages/cli/eslint.config.js b/packages/cli/eslint.config.js index fbe7855a..5848c4e0 100644 --- a/packages/cli/eslint.config.js +++ b/packages/cli/eslint.config.js @@ -1,3 +1,3 @@ -import base from "@bucketco/eslint-config/base.js"; +import base from "@reflag/eslint-config/base.js"; export default [...base, { ignores: ["dist/", "gen/"] }]; diff --git a/packages/cli/package.json b/packages/cli/package.json index 0f26c550..55e7f6ea 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -1,5 +1,5 @@ { - "name": "@bucketco/cli", + "name": "@reflag/cli", "version": "2.0.1", "packageManager": "yarn@4.1.1", "description": "CLI for Bucket service", @@ -7,10 +7,10 @@ "type": "module", "license": "MIT", "author": "Bucket.", - "homepage": "https://docs.bucket.co/", + "homepage": "https://docs.reflag.com/", "repository": { "type": "git", - "url": "https://github.com/bucketco/bucket-javascript-sdk.git" + "url": "https://github.com/reflagcom/javascript.git" }, "publishConfig": { "access": "public" @@ -57,8 +57,8 @@ "zod": "^3.24.2" }, "devDependencies": { - "@bucketco/eslint-config": "workspace:^", - "@bucketco/tsconfig": "workspace:^", + "@reflag/eslint-config": "workspace:^", + "@reflag/tsconfig": "workspace:^", "@types/express": "^5.0.0", "@types/node": "^22.5.1", "@types/semver": "^7.7.0", diff --git a/packages/cli/services/rules.ts b/packages/cli/services/rules.ts index 37e9ba6a..53880054 100644 --- a/packages/cli/services/rules.ts +++ b/packages/cli/services/rules.ts @@ -1,7 +1,7 @@ export function getCursorRules() { return ` --- -description: Guidelines for implementing feature flagging using Bucket feature management service +description: Guidelines for implementing flagging using Bucket feature management service globs: "**/*.ts, **/*.tsx, **/*.js, **/*.jsx" --- @@ -16,7 +16,7 @@ export function getCopilotInstructions() { const rules = /* markdown */ ` # Bucket Feature Management Service for LLMs -Bucket is a comprehensive feature management service offering feature flags, user feedback collection, adoption tracking, and remote configuration for your applications across various JavaScript frameworks, particularly React, Next.js, Node.js, vanilla browser, CLI, and OpenFeature environments. Follow these best practices for feature flagging. +Bucket is a comprehensive feature management service offering flags, user feedback collection, adoption tracking, and remote configuration for your applications across various JavaScript frameworks, particularly React, Next.js, Node.js, vanilla browser, CLI, and OpenFeature environments. Follow these best practices for flagging. ## Follow Official Documentation @@ -27,15 +27,15 @@ Bucket is a comprehensive feature management service offering feature flags, use - Configure \`BucketProvider\` or \`ReflagClient\` properly at application entry points. - Leverage Bucket CLI for generating type-safe feature definitions. -- Write clean, type-safe code when applying Bucket feature flags. +- Write clean, type-safe code when applying Bucket flags. - Follow established patterns in the project. ## Feature Flag Implementation - Create reusable hooks and utilities for consistent feature management. -- Write clear comments for usage and checks of a feature flag. +- Write clear comments for usage and checks of a flag. - Properly handle feature loading states to prevent UI flashing. -- Implement proper error fallbacks when feature flag services are unavailable. +- Implement proper error fallbacks when flag services are unavailable. ## Feature Targeting @@ -100,7 +100,7 @@ Connect Bucket with your existing tools: ### Installation \`\`\`bash -npm i @bucketco/react-sdk +npm i @reflag/react-sdk \`\`\` ### Key Features @@ -116,7 +116,7 @@ npm i @bucketco/react-sdk 1. Add the \`BucketProvider\` to wrap your application: \`\`\`jsx -import { BucketProvider } from "@bucketco/react-sdk"; +import { BucketProvider } from "@reflag/react-sdk"; export const CONFIG_FILE_NAME = "bucket.config.json"; export const AUTH_FILE = join(os.homedir(), ".bucket-auth"); -export const SCHEMA_URL = `https://unpkg.com/@bucketco/cli@latest/schema.json`; +export const SCHEMA_URL = `https://unpkg.com/@reflag/cli@latest/schema.json`; export const DEFAULT_BASE_URL = "https://app.reflag.com"; export const DEFAULT_API_URL = `${DEFAULT_BASE_URL}/api`; diff --git a/packages/cli/utils/gen.ts b/packages/cli/utils/gen.ts index 16ce97e0..edf05b68 100644 --- a/packages/cli/utils/gen.ts +++ b/packages/cli/utils/gen.ts @@ -110,9 +110,9 @@ export function genTypes(features: Feature[], format: GenFormat = "react") { // DO NOT EDIT THIS FILE. IT IS GENERATED BY THE BUCKET CLI AND WILL BE OVERWRITTEN. // eslint-disable // prettier-ignore -import "@bucketco/${format}-sdk"; +import "@reflag/${format}-sdk"; -declare module "@bucketco/${format}-sdk" { +declare module "@reflag/${format}-sdk" { export interface Features { ${features .map(({ key }) => { diff --git a/packages/eslint-config/base.js b/packages/eslint-config/base.js index af741e34..8bceee4f 100644 --- a/packages/eslint-config/base.js +++ b/packages/eslint-config/base.js @@ -86,10 +86,10 @@ module.exports = [ [ `^(${builtinModules.join("|")})(/|$)`, "^react", - "^(?!@bucket)@?\\w", + "^(?!@reflag)@?\\w", ], // Shared bucket packages. - ["^@bucketco/(.*)$"], + ["^@reflag/(.*)$"], // Path aliased root, parent imports, and just `..`. ["^@/", "^\\.\\.(?!/?$)", "^\\.\\./?$"], // Relative imports, same-folder imports, and just `.`. diff --git a/packages/eslint-config/package.json b/packages/eslint-config/package.json index 9444ff8c..975c3828 100644 --- a/packages/eslint-config/package.json +++ b/packages/eslint-config/package.json @@ -1,5 +1,5 @@ { - "name": "@bucketco/eslint-config", + "name": "@reflag/eslint-config", "version": "0.0.2", "license": "MIT", "private": true, diff --git a/packages/flag-evaluation/eslint.config.js b/packages/flag-evaluation/eslint.config.js index fd5497c5..52f98bf1 100644 --- a/packages/flag-evaluation/eslint.config.js +++ b/packages/flag-evaluation/eslint.config.js @@ -1,3 +1,3 @@ -const base = require("@bucketco/eslint-config"); +const base = require("@reflag/eslint-config"); module.exports = [...base, { ignores: ["dist/"] }]; diff --git a/packages/flag-evaluation/package.json b/packages/flag-evaluation/package.json index 66711476..eff77d7d 100644 --- a/packages/flag-evaluation/package.json +++ b/packages/flag-evaluation/package.json @@ -1,10 +1,10 @@ { - "name": "@bucketco/flag-evaluation", + "name": "@reflag/flag-evaluation", "version": "0.2.1", "license": "MIT", "repository": { "type": "git", - "url": "https://github.com/bucketco/bucket-javascript-sdk.git" + "url": "https://github.com/reflagcom/javascript.git" }, "publishConfig": { "access": "public" @@ -25,8 +25,8 @@ "main": "./dist/index.js", "types": "./dist/index.d.ts", "devDependencies": { - "@bucketco/eslint-config": "workspace:^", - "@bucketco/tsconfig": "workspace:^", + "@reflag/eslint-config": "workspace:^", + "@reflag/tsconfig": "workspace:^", "@types/node": "^22.12.0", "eslint": "^9.21.0", "prettier": "^3.5.2", diff --git a/packages/flag-evaluation/tsconfig.json b/packages/flag-evaluation/tsconfig.json index 2ebb10f8..af4e22c3 100644 --- a/packages/flag-evaluation/tsconfig.json +++ b/packages/flag-evaluation/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "@bucketco/tsconfig/library", + "extends": "@reflag/tsconfig/library", "compilerOptions": { "lib": [], "outDir": "./dist/" diff --git a/packages/node-sdk/README.md b/packages/node-sdk/README.md index 60bd6d31..2c70b8a6 100644 --- a/packages/node-sdk/README.md +++ b/packages/node-sdk/README.md @@ -12,7 +12,7 @@ Install using your favorite package manager: {% tab title="npm" %} ```sh -npm i @bucketco/node-sdk +npm i @reflag/node-sdk ``` {% endtab %} @@ -20,7 +20,7 @@ npm i @bucketco/node-sdk {% tab title="yarn" %} ```sh -yarn add @bucketco/node-sdk +yarn add @reflag/node-sdk ``` {% endtab %} @@ -28,7 +28,7 @@ yarn add @bucketco/node-sdk {% tab title="bun" %} ```sh -bun add @bucketco/node-sdk +bun add @reflag/node-sdk ``` {% endtab %} @@ -36,7 +36,7 @@ bun add @bucketco/node-sdk {% tab title="pnpm" %} ```sh -pnpm add @bucketco/node-sdk +pnpm add @reflag/node-sdk ``` {% endtab %} @@ -44,15 +44,15 @@ pnpm add @bucketco/node-sdk {% tab title="deno" %} ```sh -deno add npm:@bucketco/node-sdk +deno add npm:@reflag/node-sdk ``` {% endtab %} {% endtabs %} -Other supported languages/frameworks are in the [Supported languages](https://docs.bucket.co/quickstart/supported-languages) documentation pages. +Other supported languages/frameworks are in the [Supported languages](https://docs.reflag.com/quickstart/supported-languages) documentation pages. -You can also [use the HTTP API directly](https://docs.bucket.co/api/http-api) +You can also [use the HTTP API directly](https://docs.reflag.com/api/http-api) ## Basic usage @@ -70,7 +70,7 @@ Bucket will load settings through the various environment variables automaticall 3. Create a `bucket.ts` file containing the following: ```typescript -import { ReflagClient } from "@bucketco/node-sdk"; +import { ReflagClient } from "@reflag/node-sdk"; // Create a new instance of the client with the secret key. Additional options // are available, such as supplying a logger and other custom properties. @@ -214,7 +214,7 @@ To use the Bucket NodeSDK with Cloudflare workers, set the `node_compat` flag [i Instead of using `ReflagClient`, use `EdgeClient` and make sure you call `ctx.waitUntil(bucket.flush());` before returning from your worker function. ```typescript -import { EdgeClient } from "@bucketco/node-sdk"; +import { EdgeClient } from "@reflag/node-sdk"; // set the BUCKET_SECRET_KEY environment variable or pass the secret key in the constructor const bucket = new EdgeClient(); @@ -352,7 +352,7 @@ current working directory. | `logLevel` | string | The log level for the SDK (e.g., `"DEBUG"`, `"INFO"`, `"WARN"`, `"ERROR"`). Default: `INFO` | BUCKET_LOG_LEVEL | | `offline` | boolean | Operate in offline mode. Default: `false`, except in tests it will default to `true` based off of the `TEST` env. var. | BUCKET_OFFLINE | | `apiBaseUrl` | string | The base API URL for the Bucket servers. | BUCKET_API_BASE_URL | -| `featureOverrides` | Record | An object specifying feature overrides for testing or local development. See [examples/express/app.test.ts](https://github.com/bucketco/bucket-javascript-sdk/tree/main/packages/node-sdk/examples/express/app.test.ts) for how to use `featureOverrides` in tests. | BUCKET_FEATURES_ENABLED, BUCKET_FEATURES_DISABLED | +| `featureOverrides` | Record | An object specifying feature overrides for testing or local development. See [examples/express/app.test.ts](https://github.com/reflagcom/javascript/tree/main/packages/node-sdk/examples/express/app.test.ts) for how to use `featureOverrides` in tests. | BUCKET_FEATURES_ENABLED, BUCKET_FEATURES_DISABLED | | `configFile` | string | Load this config file from disk. Default: `bucketConfig.json` | BUCKET_CONFIG_FILE | > [!NOTE] > `BUCKET_FEATURES_ENABLED` and `BUCKET_FEATURES_DISABLED` are comma separated lists of features which will be enabled or disabled respectively. @@ -390,12 +390,12 @@ order of importance: 2. Environment variable, 3. The config file. -## Type safe feature flags +## Type safe flags -To get type checked feature flags, install the Bucket CLI: +To get type checked flags, install the Bucket CLI: ``` -npm i --save-dev @bucketco/cli +npm i --save-dev @reflag/cli ``` then generate the types: @@ -410,7 +410,7 @@ Any feature look ups will now be checked against the features that exist in Buck Here's an example of a failed type check: ```typescript -import { ReflagClient } from "@bucketco/node-sdk"; +import { ReflagClient } from "@reflag/node-sdk"; export const bucketClient = new ReflagClient(); @@ -444,12 +444,12 @@ bucketClient.initialize().then(() => { ## Testing -When writing tests that cover code with feature flags, you can toggle features on/off programmatically to test the different behavior. +When writing tests that cover code with flags, you can toggle features on/off programmatically to test the different behavior. `bucket.ts`: ```typescript -import { ReflagClient } from "@bucketco/node-sdk"; +import { ReflagClient } from "@reflag/node-sdk"; export const bucket = new ReflagClient(); ``` @@ -481,7 +481,7 @@ See more on feature overrides in the section below. ## Feature Overrides -Feature overrides allow you to override feature flags and their configurations locally. This is particularly useful for development and testing. You can specify overrides in three ways: +Feature overrides allow you to override flags and their configurations locally. This is particularly useful for development and testing. You can specify overrides in three ways: 1. Through environment variables: @@ -526,7 +526,7 @@ client.clearFeatureOverrides(); To get dynamic overrides, use a function which takes a context and returns a boolean or an object with the shape of `{isEnabled, config}`: ```typescript -import { ReflagClient, Context } from "@bucketco/node-sdk"; +import { ReflagClient, Context } from "@reflag/node-sdk"; const featureOverrides = (context: Context) => ({ "delete-todos": { @@ -601,7 +601,7 @@ A popular way to integrate the Bucket Node.js SDK is through an express middlewa ```typescript import bucket from "./bucket"; import express from "express"; -import { BoundBucketClient } from "@bucketco/node-sdk"; +import { BoundBucketClient } from "@reflag/node-sdk"; // Augment the Express types to include a `boundBucketClient` property on the // `res.locals` object. @@ -655,15 +655,15 @@ app.get("/todos", async (_req, res) => { } ``` -See [examples/express/app.ts](https://github.com/bucketco/bucket-javascript-sdk/tree/main/packages/node-sdk/example/express/app.ts) for a full example. +See [examples/express/app.ts](https://github.com/reflagcom/javascript/tree/main/packages/node-sdk/example/express/app.ts) for a full example. ## Remote flag evaluation with stored context -If you don't want to provide context each time when evaluating feature flags but +If you don't want to provide context each time when evaluating flags but rather you would like to utilize the attributes you sent to Bucket previously (by calling `updateCompany` and `updateUser`) you can do so by calling `getFeaturesRemote` (or `getFeatureRemote` for a specific feature) with providing just `userId` and `companyId`. -These methods will call Bucket's servers and feature flags will be evaluated remotely +These methods will call Bucket's servers and flags will be evaluated remotely using the stored attributes. ```typescript @@ -683,7 +683,7 @@ client.updateCompany("acme_inc", { }); ... -// This will evaluate feature flags with respecting the attributes sent previously +// This will evaluate flags with respecting the attributes sent previously const features = await client.getFeaturesRemote("acme_inc", "john_doe"); ``` diff --git a/packages/node-sdk/eslint.config.js b/packages/node-sdk/eslint.config.js index c712ae99..f36899ee 100644 --- a/packages/node-sdk/eslint.config.js +++ b/packages/node-sdk/eslint.config.js @@ -1,3 +1,3 @@ -const base = require("@bucketco/eslint-config"); +const base = require("@reflag/eslint-config"); module.exports = [...base, { ignores: ["dist/", "examples/"] }]; diff --git a/packages/node-sdk/examples/cloudflare-worker/README.md b/packages/node-sdk/examples/cloudflare-worker/README.md index 34fb5092..4a46e690 100644 --- a/packages/node-sdk/examples/cloudflare-worker/README.md +++ b/packages/node-sdk/examples/cloudflare-worker/README.md @@ -1,7 +1,7 @@ # cloudflare-worker This is a simple example of how to use the Bucket SDK in a Cloudflare Worker. -It demonstrates how to initialize the client and evaluate feature flags. +It demonstrates how to initialize the client and evaluate flags. It also shows how to flush the client and wait for any in-flight requests to complete. - Set the BUCKET_SECRET_KEY environment variable in wrangler.jsonc to get started. diff --git a/packages/node-sdk/examples/cloudflare-worker/src/index.ts b/packages/node-sdk/examples/cloudflare-worker/src/index.ts index caab133e..be364b4e 100644 --- a/packages/node-sdk/examples/cloudflare-worker/src/index.ts +++ b/packages/node-sdk/examples/cloudflare-worker/src/index.ts @@ -1,6 +1,6 @@ /** * This is a simple example of how to use the Bucket SDK in a Cloudflare Worker. - * It demonstrates how to initialize the client and evaluate feature flags. + * It demonstrates how to initialize the client and evaluate flags. * It also shows how to flush the client and wait for any in-flight requests to complete. * * Set the BUCKET_SECRET_KEY environment variable in wrangler.jsonc to get started. diff --git a/packages/node-sdk/package.json b/packages/node-sdk/package.json index 2a520100..43bf1515 100644 --- a/packages/node-sdk/package.json +++ b/packages/node-sdk/package.json @@ -1,10 +1,10 @@ { - "name": "@bucketco/node-sdk", + "name": "@reflag/node-sdk", "version": "1.10.0", "license": "MIT", "repository": { "type": "git", - "url": "https://github.com/bucketco/bucket-javascript-sdk.git" + "url": "https://github.com/reflagcom/javascript.git" }, "scripts": { "dev": "vite", @@ -29,8 +29,8 @@ "types": "./dist/types/src/index.d.ts", "devDependencies": { "@babel/core": "~7.24.7", - "@bucketco/eslint-config": "~0.0.2", - "@bucketco/tsconfig": "~0.0.2", + "@reflag/eslint-config": "~0.0.2", + "@reflag/tsconfig": "~0.0.2", "@types/node": "^22.12.0", "@vitest/coverage-v8": "~1.6.0", "c8": "~10.1.0", @@ -44,6 +44,6 @@ "vitest": "~1.6.0" }, "dependencies": { - "@bucketco/flag-evaluation": "0.2.1" + "@reflag/flag-evaluation": "0.2.1" } } diff --git a/packages/node-sdk/src/client.ts b/packages/node-sdk/src/client.ts index 4f6b67ea..401a5fe0 100644 --- a/packages/node-sdk/src/client.ts +++ b/packages/node-sdk/src/client.ts @@ -4,7 +4,7 @@ import { EvaluationResult, flattenJSON, newEvaluator, -} from "@bucketco/flag-evaluation"; +} from "@reflag/flag-evaluation"; import BatchBuffer from "./batch-buffer"; import { @@ -103,14 +103,14 @@ type BulkEvent = * * @remarks * This is the main class for interacting with Bucket. - * It is used to evaluate feature flags, update user and company contexts, and track events. + * It is used to evaluate flags, update user and company contexts, and track events. * * @example * ```ts * // set the BUCKET_SECRET_KEY environment variable or pass the secret key to the constructor * const client = new ReflagClient(); * - * // evaluate a feature flag + * // evaluate a flag * const isFeatureEnabled = client.getFeature("feature-flag-key", { * user: { id: "user-id" }, * company: { id: "company-id" }, @@ -922,7 +922,7 @@ export class ReflagClient { /** * Updates the context in Bucket (if needed). - * This method should be used before requesting feature flags or binding a client. + * This method should be used before requesting flags or binding a client. * * @param options - The options for the context. * @param options.enableTracking - Whether to enable tracking for the context. diff --git a/packages/node-sdk/src/edgeClient.ts b/packages/node-sdk/src/edgeClient.ts index c80186a8..ebf6867f 100644 --- a/packages/node-sdk/src/edgeClient.ts +++ b/packages/node-sdk/src/edgeClient.ts @@ -15,7 +15,7 @@ export type EdgeClientOptions = Omit< * // set the BUCKET_SECRET_KEY environment variable or pass the secret key in the constructor * const client = new EdgeClient(); * - * // evaluate a feature flag + * // evaluate a flag * const context = { * user: { id: "user-id" }, * company: { id: "company-id" }, diff --git a/packages/node-sdk/src/types.ts b/packages/node-sdk/src/types.ts index e39359a2..6eeb18a9 100644 --- a/packages/node-sdk/src/types.ts +++ b/packages/node-sdk/src/types.ts @@ -1,6 +1,6 @@ /* eslint-disable @typescript-eslint/no-empty-object-type */ -import { newEvaluator, RuleFilter } from "@bucketco/flag-evaluation"; +import { newEvaluator, RuleFilter } from "@reflag/flag-evaluation"; /** * Describes the meta context associated with tracking. diff --git a/packages/node-sdk/test/client.test.ts b/packages/node-sdk/test/client.test.ts index 3d2e2e2f..7fad7fa2 100644 --- a/packages/node-sdk/test/client.test.ts +++ b/packages/node-sdk/test/client.test.ts @@ -10,7 +10,7 @@ import { vi, } from "vitest"; -import { flattenJSON } from "@bucketco/flag-evaluation"; +import { flattenJSON } from "@reflag/flag-evaluation"; import { BoundBucketClient, ReflagClient } from "../src"; import { diff --git a/packages/node-sdk/tsconfig.json b/packages/node-sdk/tsconfig.json index ee9ac47c..03acbd8b 100644 --- a/packages/node-sdk/tsconfig.json +++ b/packages/node-sdk/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "@bucketco/tsconfig/library", + "extends": "@reflag/tsconfig/library", "compilerOptions": { "lib": [], "outDir": "./dist/", diff --git a/packages/openfeature-browser-provider/README.md b/packages/openfeature-browser-provider/README.md index f1cced0f..798ea241 100644 --- a/packages/openfeature-browser-provider/README.md +++ b/packages/openfeature-browser-provider/README.md @@ -2,10 +2,10 @@ The official OpenFeature Browser provider for [Bucket](https://bucket.co) feature management service. -It uses the Bucket Browser SDK internally and thus allow you to collect [automated feedback surveys](https://github.com/bucketco/bucket-javascript-sdk/tree/main/packages/browser-sdk#qualitative-feedback) +It uses the Bucket Browser SDK internally and thus allow you to collect [automated feedback surveys](https://github.com/reflagcom/javascript/tree/main/packages/browser-sdk#qualitative-feedback) when people use your features as well as tracking which customers use which features. -If you're using React, you'll be better off with the [Bucket React SDK](https://github.com/bucketco/bucket-javascript-sdk/blob/main/packages/react-sdk/README.md) or the [OpenFeature React SDK](https://openfeature.dev/docs/reference/technologies/client/web/react/). +If you're using React, you'll be better off with the [Bucket React SDK](https://github.com/reflagcom/javascript/blob/main/packages/react-sdk/README.md) or the [OpenFeature React SDK](https://openfeature.dev/docs/reference/technologies/client/web/react/). See the `example` folder for how to use the OpenFeature React SDK with Next.js. @@ -16,13 +16,13 @@ The OpenFeature SDK is required as peer dependency. The minimum required version of `@openfeature/web-sdk` currently is `1.0`. ```shell -npm install @openfeature/web-sdk @bucketco/openfeature-browser-provider +npm install @openfeature/web-sdk @reflag/openfeature-browser-provider ``` ## Sample initialization ```ts -import { BucketBrowserProvider } from "@bucketco/openfeature-browser-provider"; +import { BucketBrowserProvider } from "@reflag/openfeature-browser-provider"; import { OpenFeature } from "@openfeature/web-sdk"; // initialize provider @@ -44,11 +44,11 @@ const feedbackConfig = client.getObjectValue("ask-feedback", { ``` Initializing the Bucket Browser Provider will -also initialize [automatic feedback surveys](https://github.com/bucketco/bucket-javascript-sdk/tree/main/packages/browser-sdk#qualitative-feedback). +also initialize [automatic feedback surveys](https://github.com/reflagcom/javascript/tree/main/packages/browser-sdk#qualitative-feedback). ## Feature resolution methods -The Bucket OpenFeature Provider implements the OpenFeature evaluation interface for different value types. Each method handles the resolution of feature flags according to the OpenFeature specification. +The Bucket OpenFeature Provider implements the OpenFeature evaluation interface for different value types. Each method handles the resolution of flags according to the OpenFeature specification. ### Common behavior @@ -67,7 +67,7 @@ All resolution methods share these behaviors: client.getBooleanValue("my-flag", false); ``` -Returns the feature's enabled state. This is the most common use case for feature flags. +Returns the feature's enabled state. This is the most common use case for flags. #### String Resolution @@ -106,7 +106,7 @@ pass a translation function along to the `BucketBrowserProvider` constructor like so: ```ts -import { BucketBrowserProvider } from "@bucketco/openfeature-browser-provider"; +import { BucketBrowserProvider } from "@reflag/openfeature-browser-provider"; import { EvaluationContext, OpenFeature } from "@openfeature/web-sdk"; // initialize provider @@ -150,7 +150,7 @@ The Bucket OpenFeature Provider supports the OpenFeature tracking API natively. ```ts -import { BucketBrowserProvider } from "@bucketco/openfeature-browser-provider"; +import { BucketBrowserProvider } from "@reflag/openfeature-browser-provider"; import { OpenFeature } from "@openfeature/web-sdk"; // initialize provider diff --git a/packages/openfeature-browser-provider/eslint.config.js b/packages/openfeature-browser-provider/eslint.config.js index df3b301a..e8954fc8 100644 --- a/packages/openfeature-browser-provider/eslint.config.js +++ b/packages/openfeature-browser-provider/eslint.config.js @@ -1,3 +1,3 @@ -const base = require("@bucketco/eslint-config"); +const base = require("@reflag/eslint-config"); module.exports = [...base, { ignores: ["dist/", "example/"] }]; diff --git a/packages/openfeature-browser-provider/example/app/featureManagement.ts b/packages/openfeature-browser-provider/example/app/featureManagement.ts index 61e0be56..5392f0b7 100644 --- a/packages/openfeature-browser-provider/example/app/featureManagement.ts +++ b/packages/openfeature-browser-provider/example/app/featureManagement.ts @@ -1,6 +1,6 @@ "use client"; -import { BucketBrowserSDKProvider } from "@bucketco/openfeature-browser-provider"; +import { BucketBrowserSDKProvider } from "@reflag/openfeature-browser-provider"; import { OpenFeature } from "@openfeature/react-sdk"; const publishableKey = process.env.NEXT_PUBLIC_BUCKET_PUBLISHABLE_KEY; diff --git a/packages/openfeature-browser-provider/example/package.json b/packages/openfeature-browser-provider/example/package.json index d52ec8fa..943404bd 100644 --- a/packages/openfeature-browser-provider/example/package.json +++ b/packages/openfeature-browser-provider/example/package.json @@ -9,7 +9,7 @@ "lint": "next lint" }, "dependencies": { - "@bucketco/react-sdk": "workspace:^", + "@reflag/react-sdk": "workspace:^", "@openfeature/core": "1.3.0", "@openfeature/react-sdk": "^0.4.5", "@openfeature/web-sdk": "^1.2.3", diff --git a/packages/openfeature-browser-provider/package.json b/packages/openfeature-browser-provider/package.json index b82f5333..899dc026 100644 --- a/packages/openfeature-browser-provider/package.json +++ b/packages/openfeature-browser-provider/package.json @@ -1,11 +1,11 @@ { - "name": "@bucketco/openfeature-browser-provider", + "name": "@reflag/openfeature-browser-provider", "version": "0.6.3", "packageManager": "yarn@4.1.1", "license": "MIT", "repository": { "type": "git", - "url": "https://github.com/bucketco/bucket-javascript-sdk.git" + "url": "https://github.com/reflagcom/javascript.git" }, "publishConfig": { "access": "public" @@ -35,11 +35,11 @@ } }, "dependencies": { - "@bucketco/browser-sdk": "3.3.4" + "@reflag/browser-sdk": "3.3.4" }, "devDependencies": { - "@bucketco/eslint-config": "0.0.2", - "@bucketco/tsconfig": "0.0.2", + "@reflag/eslint-config": "0.0.2", + "@reflag/tsconfig": "0.0.2", "@openfeature/core": "1.5.0", "@openfeature/web-sdk": "^1.3.0", "@types/node": "^22.12.0", diff --git a/packages/openfeature-browser-provider/src/index.test.ts b/packages/openfeature-browser-provider/src/index.test.ts index 538c2665..08707fb8 100644 --- a/packages/openfeature-browser-provider/src/index.test.ts +++ b/packages/openfeature-browser-provider/src/index.test.ts @@ -1,12 +1,12 @@ import { Client, OpenFeature } from "@openfeature/web-sdk"; import { beforeEach, describe, expect, it, Mock, vi } from "vitest"; -import { ReflagClient } from "@bucketco/browser-sdk"; +import { ReflagClient } from "@reflag/browser-sdk"; import { BucketBrowserSDKProvider, defaultContextTranslator } from "."; -vi.mock("@bucketco/browser-sdk", () => { - const actualModule = vi.importActual("@bucketco/browser-sdk"); +vi.mock("@reflag/browser-sdk", () => { + const actualModule = vi.importActual("@reflag/browser-sdk"); return { __esModule: true, @@ -85,10 +85,10 @@ describe("BucketBrowserSDKProvider", () => { const ofContext = { userId: "123", email: "ron@bucket.co", - avatar: "https://bucket.co/avatar.png", + avatar: "https://reflag.com/avatar.png", groupId: "456", groupName: "bucket", - groupAvatar: "https://bucket.co/group-avatar.png", + groupAvatar: "https://reflag.com/group-avatar.png", groupPlan: "pro", }; @@ -128,7 +128,7 @@ describe("BucketBrowserSDKProvider", () => { userId: 123, name: "John Doe", email: "ron@bucket.co", - avatar: "https://bucket.co/avatar.png", + avatar: "https://reflag.com/avatar.png", companyId: "456", companyName: "Acme, Inc.", companyAvatar: "https://acme.com/company-avatar.png", @@ -139,7 +139,7 @@ describe("BucketBrowserSDKProvider", () => { id: "123", name: "John Doe", email: "ron@bucket.co", - avatar: "https://bucket.co/avatar.png", + avatar: "https://reflag.com/avatar.png", }, company: { id: "456", diff --git a/packages/openfeature-browser-provider/src/index.ts b/packages/openfeature-browser-provider/src/index.ts index 13ff7fbd..42835e94 100644 --- a/packages/openfeature-browser-provider/src/index.ts +++ b/packages/openfeature-browser-provider/src/index.ts @@ -11,7 +11,7 @@ import { TrackingEventDetails, } from "@openfeature/web-sdk"; -import { ReflagClient, Feature, InitOptions } from "@bucketco/browser-sdk"; +import { ReflagClient, Feature, InitOptions } from "@reflag/browser-sdk"; export type ContextTranslationFn = ( context?: EvaluationContext, diff --git a/packages/openfeature-browser-provider/tsconfig.json b/packages/openfeature-browser-provider/tsconfig.json index 40b0d295..88d1b8b6 100644 --- a/packages/openfeature-browser-provider/tsconfig.json +++ b/packages/openfeature-browser-provider/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "@bucketco/tsconfig/library", + "extends": "@reflag/tsconfig/library", "compilerOptions": { "outDir": "./dist/", "jsx": "react", diff --git a/packages/openfeature-node-provider/README.md b/packages/openfeature-node-provider/README.md index 75699165..12b0d616 100644 --- a/packages/openfeature-node-provider/README.md +++ b/packages/openfeature-node-provider/README.md @@ -5,28 +5,28 @@ The official OpenFeature Node.js provider for [Bucket](https://bucket.co) featur ## Installation ```shell -npm install @bucketco/openfeature-node-provider +npm install @reflag/openfeature-node-provider ``` ### Required peer dependencies The OpenFeature SDK is required as peer dependency. The minimum required version of `@openfeature/server-sdk` currently is `1.13.5`. -The minimum required version of `@bucketco/node-sdk` currently is `2.0.0`. +The minimum required version of `@reflag/node-sdk` currently is `2.0.0`. ```shell -npm install @openfeature/server-sdk @bucketco/node-sdk +npm install @openfeature/server-sdk @reflag/node-sdk ``` ## Usage -The provider uses the [Bucket Node.js SDK](https://docs.bucket.co/quickstart/supported-languages-frameworks/node.js-sdk). -The available options can be found in the [Bucket Node.js SDK](https://github.com/bucketco/bucket-javascript-sdk/tree/main/packages/node-sdk#initialization-options). +The provider uses the [Bucket Node.js SDK](https://docs.reflag.com/quickstart/supported-languages-frameworks/node.js-sdk). +The available options can be found in the [Bucket Node.js SDK](https://github.com/reflagcom/javascript/tree/main/packages/node-sdk#initialization-options). ### Example using the default configuration ```typescript -import { BucketNodeProvider } from "@bucketco/openfeature-node-provider"; +import { BucketNodeProvider } from "@reflag/openfeature-node-provider"; import { OpenFeature } from "@openfeature/server-sdk"; const provider = new BucketNodeProvider({ secretKey }); @@ -55,7 +55,7 @@ const enterpriseFeatureEnabled = await client.getBooleanValue( ## Feature resolution methods -The Bucket OpenFeature Provider implements the OpenFeature evaluation interface for different value types. Each method handles the resolution of feature flags according to the OpenFeature specification. +The Bucket OpenFeature Provider implements the OpenFeature evaluation interface for different value types. Each method handles the resolution of flags according to the OpenFeature specification. ### Common behavior @@ -74,7 +74,7 @@ All resolution methods share these behaviors: client.getBooleanValue("my-flag", false); ``` -Returns the feature's enabled state. This is the most common use case for feature flags. +Returns the feature's enabled state. This is the most common use case for flags. #### String Resolution @@ -177,7 +177,7 @@ It's straight forward to start sending tracking events through OpenFeature. Simply call the "track" method on the OpenFeature client: ```typescript -import { BucketNodeProvider } from "@bucketco/openfeature-node-provider"; +import { BucketNodeProvider } from "@reflag/openfeature-node-provider"; import { OpenFeature } from "@openfeature/server-sdk"; const provider = new BucketNodeProvider({ secretKey }); diff --git a/packages/openfeature-node-provider/eslint.config.js b/packages/openfeature-node-provider/eslint.config.js index df3b301a..e8954fc8 100644 --- a/packages/openfeature-node-provider/eslint.config.js +++ b/packages/openfeature-node-provider/eslint.config.js @@ -1,3 +1,3 @@ -const base = require("@bucketco/eslint-config"); +const base = require("@reflag/eslint-config"); module.exports = [...base, { ignores: ["dist/", "example/"] }]; diff --git a/packages/openfeature-node-provider/example/README.md b/packages/openfeature-node-provider/example/README.md index 9d705956..03986922 100644 --- a/packages/openfeature-node-provider/example/README.md +++ b/packages/openfeature-node-provider/example/README.md @@ -16,7 +16,7 @@ secret key which is found under _"Settings"_ -> _"Environments"_. ## Context -See [defaultTranslator](https://github.com/bucketco/bucket-javascript-sdk/blob/7d108db2d1bde6e40d9eda92b66d06a1fbb7fa3f/packages/openfeature-node-provider/src/index.ts#L23-L45) for how OpenFeature context is translated into Bucket context +See [defaultTranslator](https://github.com/reflagcom/javascript/blob/7d108db2d1bde6e40d9eda92b66d06a1fbb7fa3f/packages/openfeature-node-provider/src/index.ts#L23-L45) for how OpenFeature context is translated into Bucket context by default ## Running diff --git a/packages/openfeature-node-provider/package.json b/packages/openfeature-node-provider/package.json index b56ae5fc..b1447182 100644 --- a/packages/openfeature-node-provider/package.json +++ b/packages/openfeature-node-provider/package.json @@ -1,10 +1,10 @@ { - "name": "@bucketco/openfeature-node-provider", + "name": "@reflag/openfeature-node-provider", "version": "0.5.0", "license": "MIT", "repository": { "type": "git", - "url": "https://github.com/bucketco/bucket-javascript-sdk.git" + "url": "https://github.com/reflagcom/javascript.git" }, "scripts": { "dev": "vite", @@ -35,8 +35,8 @@ }, "devDependencies": { "@babel/core": "~7.24.7", - "@bucketco/eslint-config": "~0.0.2", - "@bucketco/tsconfig": "~0.0.2", + "@reflag/eslint-config": "~0.0.2", + "@reflag/tsconfig": "~0.0.2", "@openfeature/core": "^1.5.0", "@openfeature/server-sdk": ">=1.16.1", "@types/node": "^22.12.0", @@ -50,7 +50,7 @@ "vitest": "~1.6.0" }, "dependencies": { - "@bucketco/node-sdk": "1.10.0" + "@reflag/node-sdk": "1.10.0" }, "peerDependencies": { "@openfeature/server-sdk": ">=1.16.1" diff --git a/packages/openfeature-node-provider/src/index.test.ts b/packages/openfeature-node-provider/src/index.test.ts index b6117d4d..d70a8186 100644 --- a/packages/openfeature-node-provider/src/index.test.ts +++ b/packages/openfeature-node-provider/src/index.test.ts @@ -1,12 +1,12 @@ import { ProviderStatus } from "@openfeature/server-sdk"; import { beforeEach, describe, expect, it, Mock, vi } from "vitest"; -import { ReflagClient } from "@bucketco/node-sdk"; +import { ReflagClient } from "@reflag/node-sdk"; import { BucketNodeProvider, defaultContextTranslator } from "./index"; -vi.mock("@bucketco/node-sdk", () => { - const actualModule = vi.importActual("@bucketco/node-sdk"); +vi.mock("@reflag/node-sdk", () => { + const actualModule = vi.importActual("@reflag/node-sdk"); return { __esModule: true, @@ -70,7 +70,7 @@ describe("BucketNodeProvider", () => { bucketClientMock.getFeatureDefinitions = vi.fn().mockReturnValue([ { key: flagKey, - description: "Test feature flag", + description: "Test flag", flag: {}, config: {}, }, @@ -95,7 +95,7 @@ describe("BucketNodeProvider", () => { userId: 123, name: "John Doe", email: "ron@bucket.co", - avatar: "https://bucket.co/avatar.png", + avatar: "https://reflag.com/avatar.png", companyId: "456", companyName: "Acme, Inc.", companyAvatar: "https://acme.com/company-avatar.png", @@ -106,7 +106,7 @@ describe("BucketNodeProvider", () => { id: "123", name: "John Doe", email: "ron@bucket.co", - avatar: "https://bucket.co/avatar.png", + avatar: "https://reflag.com/avatar.png", }, company: { id: "456", diff --git a/packages/openfeature-node-provider/src/index.ts b/packages/openfeature-node-provider/src/index.ts index d13c0c71..ea906d25 100644 --- a/packages/openfeature-node-provider/src/index.ts +++ b/packages/openfeature-node-provider/src/index.ts @@ -15,7 +15,7 @@ import { ReflagClient, ClientOptions, Context as BucketContext, -} from "@bucketco/node-sdk"; +} from "@reflag/node-sdk"; type ProviderOptions = ClientOptions & { contextTranslator?: (context: EvaluationContext) => BucketContext; diff --git a/packages/openfeature-node-provider/tsconfig.json b/packages/openfeature-node-provider/tsconfig.json index 9e8c29e8..1e96ecad 100644 --- a/packages/openfeature-node-provider/tsconfig.json +++ b/packages/openfeature-node-provider/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "@bucketco/tsconfig/library", + "extends": "@reflag/tsconfig/library", "compilerOptions": { "outDir": "./dist/", "declarationDir": "./dist/types", diff --git a/packages/react-sdk/README.md b/packages/react-sdk/README.md index 790ffb8d..7fc845f1 100644 --- a/packages/react-sdk/README.md +++ b/packages/react-sdk/README.md @@ -4,14 +4,14 @@ React client side library for [Reflag.com](https://reflag.com) Bucket supports feature toggling, tracking feature usage, [requesting feedback](#userequestfeedback) on features, and [remotely configuring features](#remote-config). -The Bucket React SDK comes with a [built-in toolbar](https://docs.bucket.co/supported-languages/browser-sdk#toolbar) which appears on `localhost` by default. +The Bucket React SDK comes with a [built-in toolbar](https://docs.reflag.com/supported-languages/browser-sdk#toolbar) which appears on `localhost` by default. ## Install Install via npm: ```shell -npm i @bucketco/react-sdk +npm i @reflag/react-sdk ``` ## Get started @@ -23,7 +23,7 @@ Add the `BucketProvider` context provider to your application: **Example:** ```tsx -import { BucketProvider } from "@bucketco/react-sdk"; +import { BucketProvider } from "@reflag/react-sdk"; ` initializes the Bucket SDK, fetches features and starts l - `appBaseUrl`: Optional base URL for the Bucket application. Use this to override the default app URL, - `sseBaseUrl`: Optional base URL for Server-Sent Events. Use this to override the default SSE endpoint, - `debug`: Set to `true` to enable debug logging to the console, -- `toolbar`: Optional [configuration](https://docs.bucket.co/supported-languages/browser-sdk/globals#toolbaroptions) for the Bucket toolbar, +- `toolbar`: Optional [configuration](https://docs.reflag.com/supported-languages/browser-sdk/globals#toolbaroptions) for the Bucket toolbar, - `feedback`: Optional configuration for feedback collection ## Hooks ### `useFeature()` -Returns the state of a given feature for the current context. The hook provides type-safe access to feature flags and their configurations. +Returns the state of a given feature for the current context. The hook provides type-safe access to flags and their configurations. ```tsx -import { useFeature } from "@bucketco/react-sdk"; +import { useFeature } from "@reflag/react-sdk"; function StartHuddleButton() { const { @@ -280,11 +280,11 @@ function StartHuddleButton() { ### `useTrack()` -`useTrack()` lets you send custom events to Bucket. Use this whenever a user _uses_ a feature. Create [features](https://docs.bucket.co/introduction/concepts/feature) in Bucket based off of these events to analyze feature usage. +`useTrack()` lets you send custom events to Bucket. Use this whenever a user _uses_ a feature. Create [features](https://docs.reflag.com/introduction/concepts/feature) in Bucket based off of these events to analyze feature usage. Returns a function to send custom events to Bucket. Use this whenever a user _uses_ a feature. These events can be used to analyze feature usage and create new features in Bucket. ```tsx -import { useTrack } from "@bucketco/react-sdk"; +import { useTrack } from "@reflag/react-sdk"; function StartHuddle() {
@@ -300,13 +300,13 @@ function StartHuddle() { Returns a function that lets you open up a dialog to ask for feedback on a specific feature. This is useful for collecting targeted feedback about specific features. `useRequestFeedback()` returns a function that lets you open up a dialog to ask for feedback on a specific feature. -See [Automated Feedback Surveys](https://docs.bucket.co/product-handbook/live-satisfaction) for how to do this automatically, without code. +See [Automated Feedback Surveys](https://docs.reflag.com/product-handbook/live-satisfaction) for how to do this automatically, without code. When using the `useRequestFeedback` you must pass the feature key to `requestFeedback`. The example below shows how to use `position` to ensure the popover appears next to the "Give feedback!" button. ```tsx -import { useRequestFeedback } from "@bucketco/react-sdk"; +import { useRequestFeedback } from "@reflag/react-sdk"; function FeedbackButton() { const requestFeedback = useRequestFeedback(); @@ -334,14 +334,14 @@ function FeedbackButton() { } ``` -See the [Feedback Documentation](https://github.com/bucketco/bucket-javascript-sdk/blob/main/packages/browser-sdk/FEEDBACK.md#manual-feedback-collection) for more information on `requestFeedback` options. +See the [Feedback Documentation](https://github.com/reflagcom/javascript/blob/main/packages/browser-sdk/FEEDBACK.md#manual-feedback-collection) for more information on `requestFeedback` options. ### `useSendFeedback()` Returns a function that lets you send feedback to Bucket. This is useful if you've manually collected feedback through your own UI and want to send it to Bucket. ```tsx -import { useSendFeedback } from "@bucketco/react-sdk"; +import { useSendFeedback } from "@reflag/react-sdk"; function CustomFeedbackForm() { const sendFeedback = useSendFeedback(); @@ -367,7 +367,7 @@ import { useUpdateUser, useUpdateCompany, useUpdateOtherContext, -} from "@bucketco/react-sdk"; +} from "@reflag/react-sdk"; function FeatureOptIn() { const updateUser = useUpdateUser(); @@ -413,7 +413,7 @@ Returns the `ReflagClient` used by the `BucketProvider`. The client offers more is not directly accessible thorough the other hooks. ```tsx -import { useClient } from "@bucketco/react-sdk"; +import { useClient } from "@reflag/react-sdk"; function LoggingWrapper({ children }: { children: ReactNode }) { const client = useClient(); @@ -430,7 +430,7 @@ function LoggingWrapper({ children }: { children: ReactNode }) { ## 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 +See [CSP](https://github.com/reflagcom/javascript/blob/main/packages/browser-sdk/README.md#content-security-policy-csp) for info on using Bucket React SDK with CSP ## License diff --git a/packages/react-sdk/dev/nextjs-flag-demo/components/Flags.tsx b/packages/react-sdk/dev/nextjs-flag-demo/components/Flags.tsx index c4099c37..a49ec195 100644 --- a/packages/react-sdk/dev/nextjs-flag-demo/components/Flags.tsx +++ b/packages/react-sdk/dev/nextjs-flag-demo/components/Flags.tsx @@ -1,7 +1,7 @@ "use client"; import React from "react"; -import { useFeature } from "@bucketco/react-sdk"; +import { useFeature } from "@reflag/react-sdk"; export const Features = () => { const { isEnabled } = useFeature("huddle"); diff --git a/packages/react-sdk/dev/nextjs-flag-demo/components/Providers.tsx b/packages/react-sdk/dev/nextjs-flag-demo/components/Providers.tsx index d3d97b46..98a416d2 100644 --- a/packages/react-sdk/dev/nextjs-flag-demo/components/Providers.tsx +++ b/packages/react-sdk/dev/nextjs-flag-demo/components/Providers.tsx @@ -1,7 +1,7 @@ "use client"; import React, { ReactNode } from "react"; -import { BucketProvider } from "@bucketco/react-sdk"; +import { BucketProvider } from "@reflag/react-sdk"; type Props = { publishableKey: string; diff --git a/packages/react-sdk/dev/nextjs-flag-demo/package.json b/packages/react-sdk/dev/nextjs-flag-demo/package.json index e41b1a46..42e1b1b6 100644 --- a/packages/react-sdk/dev/nextjs-flag-demo/package.json +++ b/packages/react-sdk/dev/nextjs-flag-demo/package.json @@ -9,7 +9,7 @@ "lint": "next lint" }, "dependencies": { - "@bucketco/react-sdk": "workspace:^", + "@reflag/react-sdk": "workspace:^", "next": "14.2.21", "react": "^18", "react-dom": "^18" diff --git a/packages/react-sdk/eslint.config.js b/packages/react-sdk/eslint.config.js index 41b6932a..c461416f 100644 --- a/packages/react-sdk/eslint.config.js +++ b/packages/react-sdk/eslint.config.js @@ -1,4 +1,4 @@ -const base = require("@bucketco/eslint-config"); +const base = require("@reflag/eslint-config"); const reactPlugin = require("eslint-plugin-react"); const hooksPlugin = require("eslint-plugin-react-hooks"); diff --git a/packages/react-sdk/package.json b/packages/react-sdk/package.json index ba4be384..59bc207a 100644 --- a/packages/react-sdk/package.json +++ b/packages/react-sdk/package.json @@ -1,10 +1,10 @@ { - "name": "@bucketco/react-sdk", + "name": "@reflag/react-sdk", "version": "3.3.3", "license": "MIT", "repository": { "type": "git", - "url": "https://github.com/bucketco/bucket-javascript-sdk.git" + "url": "https://github.com/reflagcom/javascript.git" }, "publishConfig": { "access": "public" @@ -34,7 +34,7 @@ } }, "dependencies": { - "@bucketco/browser-sdk": "3.3.4", + "@reflag/browser-sdk": "3.3.4", "canonical-json": "^0.0.4", "rollup": "^4.2.0" }, @@ -43,8 +43,8 @@ "react-dom": "*" }, "devDependencies": { - "@bucketco/eslint-config": "workspace:^", - "@bucketco/tsconfig": "workspace:^", + "@reflag/eslint-config": "workspace:^", + "@reflag/tsconfig": "workspace:^", "@testing-library/react": "^15.0.7", "@types/jsdom": "^21.1.6", "@types/node": "^22.12.0", diff --git a/packages/react-sdk/src/index.tsx b/packages/react-sdk/src/index.tsx index 44ef3c82..6a68c27b 100644 --- a/packages/react-sdk/src/index.tsx +++ b/packages/react-sdk/src/index.tsx @@ -21,7 +21,7 @@ import { TrackEvent, UnassignedFeedback, UserContext, -} from "@bucketco/browser-sdk"; +} from "@reflag/browser-sdk"; import { version } from "../package.json"; diff --git a/packages/react-sdk/test/usage.test.tsx b/packages/react-sdk/test/usage.test.tsx index 4bfb8cff..c02dc667 100644 --- a/packages/react-sdk/test/usage.test.tsx +++ b/packages/react-sdk/test/usage.test.tsx @@ -13,7 +13,7 @@ import { vi, } from "vitest"; -import { ReflagClient } from "@bucketco/browser-sdk"; +import { ReflagClient } from "@reflag/browser-sdk"; import { version } from "../package.json"; import { diff --git a/packages/react-sdk/tsconfig.json b/packages/react-sdk/tsconfig.json index 4edc154c..c284eaf7 100644 --- a/packages/react-sdk/tsconfig.json +++ b/packages/react-sdk/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "@bucketco/tsconfig/library", + "extends": "@reflag/tsconfig/library", "compilerOptions": { "lib": [], "outDir": "./dist/", diff --git a/packages/react-sdk/vite.config.mjs b/packages/react-sdk/vite.config.mjs index 9f73e246..74d6dbec 100644 --- a/packages/react-sdk/vite.config.mjs +++ b/packages/react-sdk/vite.config.mjs @@ -8,7 +8,7 @@ export default defineConfig({ environment: "jsdom", }, optimizeDeps: { - include: ["@bucketco/browser-sdk"], + include: ["@reflag/browser-sdk"], }, plugins: [ dts({ insertTypesEntry: true, exclude: ["dev"] }), diff --git a/packages/tsconfig/package.json b/packages/tsconfig/package.json index 47ee6228..03f6f82d 100644 --- a/packages/tsconfig/package.json +++ b/packages/tsconfig/package.json @@ -1,5 +1,5 @@ { - "name": "@bucketco/tsconfig", + "name": "@reflag/tsconfig", "version": "0.0.2", "license": "MIT", "private": true diff --git a/packages/vue-sdk/README.md b/packages/vue-sdk/README.md index 5e5c1ac4..00c4669b 100644 --- a/packages/vue-sdk/README.md +++ b/packages/vue-sdk/README.md @@ -11,7 +11,7 @@ The Bucket Vue SDK comes with the same built-in toolbar as the browser SDK which Install via npm: ```shell -npm i @bucketco/vue-sdk +npm i @reflag/vue-sdk ``` ## Get started @@ -20,7 +20,7 @@ npm i @bucketco/vue-sdk ```vue ` in ``. `` onl ```vue @@ -128,7 +128,7 @@ The `` initializes the Bucket SDK, fetches features and starts l - `appBaseUrl`: Optional base URL for the Bucket application. Use this to override the default app URL, - `sseBaseUrl`: Optional base URL for Server-Sent Events. Use this to override the default SSE endpoint, - `debug`: Set to `true` to enable debug logging to the console, -- `toolbar`: Optional [configuration](https://docs.bucket.co/supported-languages/browser-sdk/globals#toolbaroptions) for the Bucket toolbar, +- `toolbar`: Optional [configuration](https://docs.reflag.com/supported-languages/browser-sdk/globals#toolbaroptions) for the Bucket toolbar, - `feedback`: Optional configuration for feedback collection ### Loading states @@ -154,7 +154,7 @@ If you want more control over loading screens, `useIsLoading()` returns a Ref -import { useFeature } from "@bucketco/vue-sdk"; +import { useFeature } from "@reflag/vue-sdk"; const { isEnabled, track, requestFeedback, config } = useFeature("huddle"); @@ -212,7 +212,7 @@ Using `track` returned from `useFeature()` calles this track function with the f ```vue @@ -230,14 +230,14 @@ const track = useTrack(); Returns a function that lets you open up a dialog to ask for feedback on a specific feature. This is useful for collecting targeted feedback about specific features. -See [Automated Feedback Surveys](https://docs.bucket.co/product-handbook/live-satisfaction) for how to do this automatically, without code. +See [Automated Feedback Surveys](https://docs.reflag.com/product-handbook/live-satisfaction) for how to do this automatically, without code. When using the `useRequestFeedback` you must pass the feature key to `requestFeedback`. The example below shows how to use `position` to ensure the popover appears next to the "Give feedback!" button. ```vue @@ -266,7 +266,7 @@ const requestFeedback = useRequestFeedback(); ``` -See the [Feedback Documentation](https://github.com/bucketco/bucket-javascript-sdk/blob/main/packages/browser-sdk/FEEDBACK.md#manual-feedback-collection) for more information on `requestFeedback` options. +See the [Feedback Documentation](https://github.com/reflagcom/javascript/blob/main/packages/browser-sdk/FEEDBACK.md#manual-feedback-collection) for more information on `requestFeedback` options. ### `useSendFeedback()` @@ -274,7 +274,7 @@ Returns a function that lets you send feedback to Bucket. This is useful if you' ```vue - - + ``` -If using Nuxt, wrap `` in ``. `` only renders client-side currently. +If using Nuxt, wrap `` in ``. `` only renders client-side currently. ### 2. Use `useFeature(key)` to get feature status @@ -55,7 +55,7 @@ See [useFeature()](#usefeature) for a full example ## Setting `user` and `company` Reflag determines which features are active for a given `user`, `company`, or `otherContext`. -You pass these to the `BucketProvider` as props. +You pass these to the `ReflagProvider` as props. If you supply `user` or `company` objects, they must include at least the `id` property otherwise they will be ignored in their entirety. In addition to the `id`, you must also supply anything additional that you want to be able to evaluate feature targeting rules against. @@ -69,13 +69,13 @@ A number of special attributes exist: - `avatar` -- the URL for `user`/`company` avatar image. ```vue - - + ``` To retrieve features along with their targeting information, use `useFeature(key: string)` hook (described in a section below). @@ -108,9 +108,9 @@ const { Note that, similar to `isEnabled`, accessing `config` on the object returned by `useFeature()` automatically generates a `check` event. -## `` component +## `` component -The `` initializes the Reflag SDK, fetches features and starts listening for automated feedback survey events. The component can be configured using a number of props: +The `` initializes the Reflag SDK, fetches features and starts listening for automated feedback survey events. The component can be configured using a number of props: - `publishableKey` is used to connect the provider to an _environment_ on Reflag. Find your `publishableKey` under [environment settings](https://app.reflag.com/env-current/settings/app-environments) in Reflag, - `company`, `user` and `otherContext` make up the _context_ that is used to determine if a feature is enabled or not. `company` and `user` contexts are automatically transmitted to Reflag servers so the Reflag app can show you which companies have access to which features etc. @@ -133,18 +133,18 @@ The `` initializes the Reflag SDK, fetches features and starts l ### Loading states -BucketProvider lets you define a template to be shown while BucketProvider is inititalizing: +ReflagProvider lets you define a template to be shown while ReflagProvider is inititalizing: ```vue ``` @@ -280,7 +280,7 @@ const sendFeedback = useSendFeedback(); const handleSubmit = async (data: FormData) => { await sendFeedback({ - featureKey: "bucket-feature-key", + featureKey: "reflag-feature-key", score: parseInt(data.get("score") as string), comment: data.get("comment") as string, }); @@ -341,11 +341,11 @@ const handleContextUpdate = async () => { ``` -Note: To change the `user.id` or `company.id`, you need to update the props passed to `BucketProvider` instead of using these composables. +Note: To change the `user.id` or `company.id`, you need to update the props passed to `ReflagProvider` instead of using these composables. ### `useClient()` -Returns the `ReflagClient` used by the `BucketProvider`. The client offers more functionality that +Returns the `ReflagClient` used by the `ReflagProvider`. The client offers more functionality that is not directly accessible through the other composables. ```vue diff --git a/packages/vue-sdk/dev/plain/App.vue b/packages/vue-sdk/dev/plain/App.vue index e535c509..009d60d4 100644 --- a/packages/vue-sdk/dev/plain/App.vue +++ b/packages/vue-sdk/dev/plain/App.vue @@ -1,7 +1,7 @@ ``` -See [useFeature()](#usefeature) for a full example +See [useFlag()](#usefeature) for a full example ## Setting `user` and `company` @@ -78,16 +78,16 @@ A number of special attributes exist: ``` -To retrieve features along with their targeting information, use `useFeature(key: string)` hook (described in a section below). +To retrieve features along with their targeting information, use `useFlag(key: string)` hook (described in a section below). -Note that accessing `isEnabled` on the object returned by `useFeature()` automatically +Note that accessing `isEnabled` on the object returned by `useFlag()` automatically generates a `check` event. ## Remote config Remote config is a dynamic and flexible approach to configuring feature behavior outside of your app – without needing to re-deploy it. -Similar to `isEnabled`, each feature accessed using the `useFeature()` hook, has a `config` property. This configuration is managed from within Reflag. It is managed similar to the way access to features is managed, but instead of the +Similar to `isEnabled`, each feature accessed using the `useFlag()` hook, has a `config` property. This configuration is managed from within Reflag. It is managed similar to the way access to features is managed, but instead of the binary `isEnabled` you can have multiple configuration values which are given to different user/companies. ### Get started with Remote config @@ -96,7 +96,7 @@ binary `isEnabled` you can have multiple configuration values which are given to const { isEnabled, config: { key, payload }, -} = useFeature("huddles"); +} = useFlag("huddles"); // isEnabled: true, // key: "gpt-3.5", @@ -105,7 +105,7 @@ const { `key` is mandatory for a config, but if a feature has no config or no config value was matched against the context, the `key` will be `undefined`. Make sure to check against this case when trying to use the configuration in your application. `payload` is an optional JSON value for arbitrary configuration needs. -Note that, similar to `isEnabled`, accessing `config` on the object returned by `useFeature()` automatically +Note that, similar to `isEnabled`, accessing `config` on the object returned by `useFlag()` automatically generates a `check` event. ## `` component @@ -152,11 +152,11 @@ If you want more control over loading screens, `useIsLoading()` returns a Ref -import { useFeature } from "@reflag/vue-sdk"; +import { useFlag } from "@reflag/vue-sdk"; -const { isEnabled, track, requestFeedback, config } = useFeature("huddle"); +const { isEnabled, track, requestFeedback, config } = useFlag("huddle");