themagoo73 / flagsmith-react Goto Github PK

Need to add support for the Flagsmith traits functionality

index.d.ts doesn't have getAllFlags method/function which results in linting errors when using typescript.

const flagsmith = useFlagsmith();

flagsmith.getAllFlags() // Error here: TS2339 Property 'getAllFlags' does not exist on type 'Flagsmith'.
(flagsmith as any).getAllFlags() // This is the temp fix for now

Ideally index.d.ts should have getAllFlags method in schema.

Need to add an implementation of getFlags to allow a forced re-evaluation and fetch of the flag set.

• Upgrade to the Flagsmith v1.4.1library
• Add support for setting traits on the identify method

The api prop is missing from type definition.

Hey, thought I'd reach out and say this project looks great - love the hook based approach and can definitely see this being used. Hell, I'd use it!

There are a couple small things that come to mind that I think could be really helpful in setting out a strong foundation for this:

• It would be amazing if the Flagsmith provider could have an optional flagsmith implementation passed to it, with very few changes this will make this automatically work for react-native. Here's what I'd maybe think for this :

import flagsmith from 'react-native-flagsmith'
<FlagsmithProvider
        flagsmith={flagsmith}
        environmentId="YOUR_FLAGSMITH_ENVIRONMENT_ID"
 />

• The FlagsmithContext could quite easily be typed by importing and reusing https://github.com/Flagsmith/flagsmith-js-client/blob/master/flagsmith/index.d.ts

Overall though great stuff excited to try it out.

When trying to use from react project created with CRA with typescript this is the error I get when trying to import FlagsmithProvider

Module '"flagsmith-react"' has no exported member 'FlagsmithProvider'.

How to reproduce.

1. npx create-react-app my-app --template typescript
2. npm i flagsmith-react
3. import { FlagsmithProvider } from 'flagsmith-react';

Am I missing something?

My tsconfig.json file

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "incremental": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src",
    "types",
  ],
  "exclude": ["node_modules", "build"]
}

Also btw this library looks awesome, I'd love to use it for the new project.

I'm running into an error with the FlagsmithProvider in short unit tests.

I get the following error originating from this library when testing even a simple component that doesn't use flasgsmith-react:

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    at FlagsmithProvider (/Users/m/colony/colony-frontend/node_modules/flagsmith-react/dist/flagsmith-react.cjs.js:1018:18)
    at /Users/m/colony/colony-frontend/src/test/TestProvider.tsx:90:17
    at Providers (/Users/m/colony/colony-frontend/src/test/TestProvider.tsx:42:3)
    at Wrapper

My <TestProvider /> component wraps any test render with a few Providers I need throughout my Application, FlagSmithProvider being one of them.

Currently my test passes and throws the above error.

If I artifically make my test "slower". by adding a wait function to the end of it with 1ms, my test passes with no errors.

My guess is that the FlagsmithProvider is running some initialization code or fetching data, that does not get cleaned up or cancelled properly if it is unmounted shortly after being mounted.

Any chance you can add some cleanup code to handle this scenario?

JS SDK supports multiple flagsmith instances, however this SDK doesn't.

Really excited about flagsmith. Just getting started with react.

I'm glad there are hooks available but right now I'm finding myself writing a wrapper hook to make it work better in my project. Am I ttly doing this wrong?

As far as I understand I only want to identify the user once, start listening, and subscribe once. Then throughout the app I might grab the value of feature flags.

But right now I've written a hook to ensure things are initialized, and is listening, and then another hook that uses that to just grab a value. Am I missing something?

I would like to just be able to do something like

const myFeature = () => {
  const {value, error} = useFlag('my_flag_name');
  
  if (error) {
    return <>ERROR: {error.toString()}</>
  }
  if (value == undefined) {
     return <>Loading</>
  }
  
  // use the value in some part of the component here.
};

Is there a reason that the initialization, subscribing, and identification, and getValue is all together in the same hook?

We really don't need to do a matrix build on this!