Merge pull request #134 from Flagsmith/chores/add_typescript_generics

Chores/add typescript generics

Author: kyle-ssg

examples/nextjs/package-lock.json

@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "flagsmith-es": "3.6.0",
+    "flagsmith-es": "3.7.0",
     "lodash-es": "^4.17.21",
     "next": "12.1.0",
     "next-transpile-modules": "^9.0.0",

examples/nextjs/package.json

@@ -3,7 +3,9 @@ import type { AppProps } from 'next/app';
 import { FlagsmithProvider } from 'flagsmith-es/react';
 import flagsmith from 'flagsmith-es/isomorphic';
 import { IState } from 'flagsmith-es/types';
+
 const environmentID = "QjgYur4LQTwe5HpvbvhpzK"
+
 function MyApp({ Component, pageProps, flagsmithState }: AppProps & {flagsmithState: IState}) {
     return (
         <FlagsmithProvider flagsmith={flagsmith}

examples/nextjs/pages/_app.tsx

@@ -1,13 +1,11 @@
-import type { NextPage } from 'next'
-import Head from 'next/head'
-import Image from 'next/image'
-import styles from '../styles/Home.module.css'
-import { useEffect } from 'react';
+import type { NextPage } from 'next';
 import { useFlags, useFlagsmith } from 'flagsmith-es/react';
+import { FlagOptions } from '../types/flag-options';
+import { TraitOptions } from '../types/trait-options';
 
 const Home: NextPage = () => {
-  const flags = useFlags(["font_size"],["example_trait"]) // only causes re-render if specified flag values / traits change
-  const flagsmith = useFlagsmith()
+  const flags = useFlags<FlagOptions, TraitOptions>(["font_size"],["example_trait"]) // only causes re-render if specified flag values / traits change
+  const flagsmith = useFlagsmith<FlagOptions, TraitOptions>()
   const identify = ()=>{
     flagsmith.identify("flagsmith_sample_user")
   }

examples/nextjs/pages/index.tsx

@@ -0,0 +1 @@
+export type FlagOptions = "font_size" | "hero"

examples/nextjs/types/flag-options.ts

@@ -0,0 +1 @@
+export type TraitOptions = "example_trait"

examples/nextjs/types/trait-options.ts

@@ -1,4 +1,4 @@
 import { IFlagsmith } from './types';
-declare const flagsmith: IFlagsmith;
+declare const flagsmith: IFlagsmith<string, string>;
 export default flagsmith;
 export declare const createFlagsmithInstance: () => IFlagsmith;

flagsmith-es/index.d.ts

@@ -1,4 +1,4 @@
 import { IFlagsmith } from './types';
-declare const flagsmith: IFlagsmith;
+declare const flagsmith: IFlagsmith<string, string>;
 export default flagsmith;
 export declare const createFlagsmithInstance: () => IFlagsmith;

flagsmith-es/next-middleware.d.ts

@@ -1,6 +1,6 @@
 {
   "name": "flagsmith-es",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "description": "Feature flagging to support continuous development. This is an esm equivalent of the standard flagsmith npm module.",
   "main": "./index.js",
   "type": "module",

flagsmith-es/package.json

@@ -1,16 +1,16 @@
 import React, { FC } from 'react';
 import { IFlagsmith, IFlagsmithTrait, IFlagsmithFeature, IState } from '../types';
-export declare const FlagsmithContext: React.Context<IFlagsmith>;
+export declare const FlagsmithContext: React.Context<IFlagsmith<string, string>>;
 export declare type FlagsmithContextType = {
     flagsmith: IFlagsmith;
     options?: Parameters<IFlagsmith['init']>[0];
     serverState?: IState;
     children: React.ReactElement[] | React.ReactElement;
 };
 export declare const FlagsmithProvider: FC<FlagsmithContextType>;
-export declare function useFlags<F extends string, T extends string>(_flags: readonly F[], _traits?: readonly T[]): {
+export declare function useFlags<F extends string = string, T extends string = string>(_flags: readonly F[], _traits?: readonly T[]): {
     [K in F]: IFlagsmithFeature;
 } & {
     [K in T]: IFlagsmithTrait;
 };
-export declare const useFlagsmith: () => IFlagsmith;
+export declare function useFlagsmith<F extends string = string, T extends string = string>(): IFlagsmith<F, T>;