react-client-sdk icon indicating copy to clipboard operation
react-client-sdk copied to clipboard

File Data Source Feature Request

Open taschetto opened this issue 3 years ago • 4 comments

Is your feature request related to a problem? Please describe. In a team with many developers, it can be a hassle to share client-side ids and multiple environments on LaunchDarkly. We want developers to load and manage flags from a file - as we do on server-side SDKs.

Describe the solution you'd like In a local development environment, we want to turn the client offline so we can use a bootstrapped flag set. Ideally, this would behave just like reading flags from a file on server-side SDKs.

Describe alternatives you've considered

  • create a msw plugin so we can mock LD requests at the request level during development (which is the ideal solution since the application code would be the same as the production build)
  • provide a custom client implementation mocking the functions

taschetto avatar Aug 31 '22 18:08 taschetto

Hello @taschetto, Thank you for the feature request. I will discuss with the React engineer about this feature and let you know our thoughts about this.

Filed Internally as 222973.

louis-launchdarkly avatar Sep 10 '22 00:09 louis-launchdarkly

@louis-launchdarkly any news on this?

boxgames1 avatar Feb 24 '23 15:02 boxgames1

Hacky way to do this if someone needs it..

import LDContext from "launchdarkly-react-client-sdk/lib/context";
import flags from "ld_offline_flags.json";

const withLDProvider = (Component: React.ComponentType) => (
      props: React.ComponentProps<typeof Component>,
    ) => (
      <LDContext.Provider
        value={{
          flags,
          flagKeyMap: {},
          ldClient: {
            allFlags: () => flags,
            identify: () => new Promise(() => {}),
            on: () => new Promise(() => {}),
            waitUntilGoalsReady: () => new Promise(() => {}),
            track: () => new Promise(() => {}),
            variation: () => new Promise(() => {}),
            waitUntilReady: () => new Promise(() => {}),
            waitForInitialization: () => new Promise(() => {}),
            flush: () => new Promise(() => {}),
            getUser: () => ({}),
            variationDetail: () => ({
              value: false,
              variation: 0,
              reason: {
                kind: `ERROR`,
                errorKind: `FLAG_NOT_FOUND`,
              },
            }),
            setStreaming: () => new Promise(() => {}),
            off: () => new Promise(() => {}),
            alias: () => new Promise(() => {}),
            close: () => new Promise(() => {}),
          },
        }}
      >
        <Component {...props} />
      </LDContext.Provider>
    );

avinayak avatar Mar 31 '23 18:03 avinayak

I went with https://github.com/tdeekens/flopflip.

taschetto avatar May 25 '23 20:05 taschetto