@obelism/improve-sdk-react 0.1.1 → 0.3.0

package/README.md

@@ -1 +1,94 @@
 # Obelism Improve React SDK
+
+The React SDK sits around the [Javascript Client SDK](https://improve.obelism.studio/docs/sdk/javascript#client) and gives React specific handlers.
+
+## Install
+
+```bash
+npm i @obelism/improve-sdk-react
+```
+
+## Setup
+
+In your config folder create the following file: `improveClient.ts`
+
+```ts
+import { generateImproveProvider } from '@obelism/improve-sdk-react'
+
+export default generateImproveProvider(...)
+```
+
+## API
+
+### generateImproveProvider
+
+```ts
+generateImproveProvider(improveArgs: {
+	organizationId: string
+	environment: 'develop' | 'staging' | 'production'
+	config?: Configuration
+	fetchTimeout?: number
+}) => ({
+    ImproveProvider,
+    usePostAnalytic,
+    useTestValue,
+    useFlagValue
+})
+```
+
+Setup function that generates the React component and hooks.
+
+### ImproveProvider
+
+```ts
+<ImproveProvider>
+    {children}
+</ImproveProvider>
+```
+
+On mount this automatically fetches the ImproveSDK and the config if not provided initially. Exposes a context that is used to populate data to the hooks down the component tree.
+
+### useFlagValue
+
+```ts
+const value: string = useFlagValue(flagSlug: string)
+```
+
+Wrapper around [getFlagValue](https://improve.obelism.studio/docs/sdk/javascript#getflagvalue) that's passed down when the context is setup.
+
+### useTestValue
+
+```ts
+const value: string = useTestValue(testSlug: string)
+```
+
+Wrapper around [getTestValue](https://improve.obelism.studio/docs/sdk/javascript#gettestvalue) that's passed down when the context is setup.
+
+### usePostAnalytic
+
+```ts
+const postAnalytic = usePostAnalytic()
+
+<button onClick={() => postAnalytic(testSlug: string, eventSlug: string, message: string)} />
+```
+
+Wrapper around [postAnalytic](https://improve.obelism.studio/docs/sdk/javascript#postanalytic) that's passed down when the context is setup.
+
+## NextJS App router
+
+For NextJS we need to make sure the generated provider is marked as a client component. For this we need to declare the `ImproveProvider` within the file we declare `"use client"`.
+
+This is needed because the ImproveProvider uses an `useEffect` to fetch load the JS SDK async and fetch the config async if needed. After it's setup it uses context to pass the data down.
+
+```ts
+'use client'
+
+import { generateImproveProvider } from 'utils/generateImproveProvider'
+
+const improveReact = generateImproveProvider(...)
+
+export const ImproveProvider = improveReact.ImproveProvider
+export const useTestValue = improveReact.useTestValue
+export const useFlagValue = improveReact.useFlagValue
+export const usePostAnalytic = improveReact.usePostAnalytic
+```

package/dist/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react");const r={getFlagValue:()=>null,getTestValue:()=>null,postAnalytic:()=>null},u=t.createContext(r);exports.generateImproveProvider=n=>({ImproveProvider:({children:l})=>{let[a,s]=t.useState(!1),c=t.useRef(!1),o=t.useRef(null);t.useEffect(()=>{if(o.current||c.current)return;c.current=!0;let e=!1,t=!1;try{import("@obelism/improve-sdk/client").then(async({ImproveClientSDK:r})=>{!t&&(o.current=new r(n),n.config||await o.current.fetchConfig(),t||(e=!0,s(!0)))})}catch(e){console.error(e)}return()=>{e||(c.current=!1,t=!0)}},[]);let i=t.useMemo(()=>a&&o.current?{getTestValue:o.current.getTestValue,postAnalytic:o.current.postAnalytic,getFlagValue:o.current.getFlagValue}:r,[a]);return e.jsx(u.Provider,{value:i,children:l})},usePostAnalytic:e=>{let{postAnalytic:r}=t.useContext(u);return t.useCallback((t,u)=>r(e,t,u),[r,e])},useTestValue:e=>{let{getTestValue:r}=t.useContext(u);return r(e)},useFlagValue:e=>{let{getFlagValue:r}=t.useContext(u);return r(e)}});
+Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react");const r={getFlagValue:()=>null,getTestValue:()=>null,postAnalytic:()=>null},u=/*#__PURE__*/t.createContext(r);exports.generateImproveProvider=n=>({ImproveProvider:({children:l})=>{let[a,s]=t.useState(!1),c=t.useRef(!1),o=t.useRef(null);t.useEffect(()=>{if(o.current||c.current)return;c.current=!0;let e=!1,t=!1;try{import("@obelism/improve-sdk/client").then(async({ImproveClientSDK:r})=>{!t&&(o.current=new r(n),n.config||await o.current.fetchConfig(),t||(e=!0,s(!0)))})}catch(e){console.error(e)}return()=>{e||(c.current=!1,t=!0)}},[]);let i=t.useMemo(()=>a&&o.current?{getTestValue:o.current.getTestValue,postAnalytic:o.current.postAnalytic,getFlagValue:o.current.getFlagValue}:r,[a]);return /*#__PURE__*/e.jsx(u.Provider,{value:i,children:l})},usePostAnalytic:e=>{let{postAnalytic:r}=t.useContext(u);return t.useCallback((t,u)=>r(e,t,u),[r,e])},useTestValue:e=>{let{getTestValue:r}=t.useContext(u);return r(e)},useFlagValue:e=>{let{getFlagValue:r}=t.useContext(u);return r(e)}});

package/dist/index.mjs

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{useState as r,useRef as t,useEffect as l,useMemo as n,useContext as u,useCallback as a,createContext as c}from"react";let o={getFlagValue:()=>null,getTestValue:()=>null,postAnalytic:()=>null},i=c(o),s=c=>({ImproveProvider:({children:u})=>{let[a,s]=r(!1),g=t(!1),m=t(null);l(()=>{if(m.current||g.current)return;g.current=!0;let e=!1,r=!1;try{import("@obelism/improve-sdk/client").then(async({ImproveClientSDK:t})=>{!r&&(m.current=new t(c),c.config||await m.current.fetchConfig(),r||(e=!0,s(!0)))})}catch(e){console.error(e)}return()=>{e||(g.current=!1,r=!0)}},[]);let p=n(()=>a&&m.current?{getTestValue:m.current.getTestValue,postAnalytic:m.current.postAnalytic,getFlagValue:m.current.getFlagValue}:o,[a]);return e(i.Provider,{value:p,children:u})},usePostAnalytic:e=>{let{postAnalytic:r}=u(i);return a((t,l)=>r(e,t,l),[r,e])},useTestValue:e=>{let{getTestValue:r}=u(i);return r(e)},useFlagValue:e=>{let{getFlagValue:r}=u(i);return r(e)}});export{s as generateImproveProvider};
+import{jsx as e}from"react/jsx-runtime";import{useState as r,useRef as t,useEffect as l,useMemo as n,useContext as u,useCallback as a,createContext as c}from"react";let o={getFlagValue:()=>null,getTestValue:()=>null,postAnalytic:()=>null},i=/*#__PURE__*/c(o),s=c=>({ImproveProvider:({children:u})=>{let[a,s]=r(!1),g=t(!1),m=t(null);l(()=>{if(m.current||g.current)return;g.current=!0;let e=!1,r=!1;try{import("@obelism/improve-sdk/client").then(async({ImproveClientSDK:t})=>{!r&&(m.current=new t(c),c.config||await m.current.fetchConfig(),r||(e=!0,s(!0)))})}catch(e){console.error(e)}return()=>{e||(g.current=!1,r=!0)}},[]);let p=n(()=>a&&m.current?{getTestValue:m.current.getTestValue,postAnalytic:m.current.postAnalytic,getFlagValue:m.current.getFlagValue}:o,[a]);return /*#__PURE__*/e(i.Provider,{value:p,children:u})},usePostAnalytic:e=>{let{postAnalytic:r}=u(i);return a((t,l)=>r(e,t,l),[r,e])},useTestValue:e=>{let{getTestValue:r}=u(i);return r(e)},useFlagValue:e=>{let{getFlagValue:r}=u(i);return r(e)}});export{s as generateImproveProvider};

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@obelism/improve-sdk-react",
 	"description": "Obelism Improve React SDK",
-	"version": "0.1.1",
+	"version": "0.3.0",
 	"keywords": [
 		"ab-tests",
 		"feature-flags",
@@ -61,6 +61,6 @@
 		"react": "^18.2.0"
 	},
 	"dependencies": {
-		"@obelism/improve-sdk": "^0.1.1"
+		"@obelism/improve-sdk": "^0.3.0"
 	}
 }