From f8a25063c643422bbe69307bdd3e4eb4a14bf6ea Mon Sep 17 00:00:00 2001 From: Mark Phelps <209477+markphelps@users.noreply.github.com> Date: Mon, 23 Sep 2024 09:27:16 -0400 Subject: [PATCH] chore: update to use react sdk (#3480) * chore: update to use react sdk Signed-off-by: Mark Phelps <209477+markphelps@users.noreply.github.com> * chore: update react lib version Signed-off-by: Mark Phelps <209477+markphelps@users.noreply.github.com> --------- Signed-off-by: Mark Phelps <209477+markphelps@users.noreply.github.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- examples/nextjs/README.md | 12 ++++++------ examples/nextjs/components/Greeting.tsx | 14 ++++++-------- examples/nextjs/package-lock.json | 20 ++++++++++++++++---- examples/nextjs/package.json | 2 +- examples/nextjs/pages/_app.tsx | 16 +++++++++++++--- examples/nextjs/pages/_document.tsx | 4 ++-- examples/nextjs/pages/api/hello.ts | 2 +- examples/nextjs/postcss.config.js | 2 +- 8 files changed, 46 insertions(+), 26 deletions(-) diff --git a/examples/nextjs/README.md b/examples/nextjs/README.md index b8fba38f73..3b85e9fc96 100644 --- a/examples/nextjs/README.md +++ b/examples/nextjs/README.md @@ -4,10 +4,10 @@ This is an example of how to use Flipt with a NextJS application. **Note:** This example is not meant to be used in production, it is only meant to demonstrate how to use Flipt with NextJS. -It uses both the [Flipt Node SDK](https://github.com/flipt-io/flipt-client-sdks/tree/main/flipt-client-node) and [Flipt Browser SDK](https://github.com/flipt-io/flipt-client-sdks/tree/main/flipt-client-browser) to evalute feature flags from the Flipt API in two different ways: +It uses both the [Flipt Node SDK](https://github.com/flipt-io/flipt-client-sdks/tree/main/flipt-client-node) and [Flipt React SDK](https://github.com/flipt-io/flipt-client-sdks/tree/main/flipt-client-react) to evalute feature flags from the Flipt API in two different ways: -1. Using the [`getServerSideProps`](https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props) function to evaluate the flags on the server side before rendering the page -1. Using the Flipt Browser SDK to evaluate the flags in the browser/client side +1. Using the [`getServerSideProps`](https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props) function to evaluate the flags on the server side before rendering the page +1. Using the Flipt React SDK to evaluate the flags in the browser/client side We also included [some code](./pages/api/hello.ts) showing how you could use Flipt with [NextJS API routes](https://nextjs.org/docs/api-routes/introduction), but we are not hitting the API it in this example. @@ -21,7 +21,7 @@ Both examples are using the same Flipt flag and are evaluating the flag within t ### Client Side -For the client-side example, we are using the [Flipt Browser SDK](https://github.com/flipt-io/flipt-client-sdks/tree/main/flipt-client-browser) to evaluate the flag in the browser/client side. The `FliptEvaluationClient` object pulls flag state from the Flipt server and performs evaluation client-side in the browser to evalute the `language` flag. +For the client-side example, we are using the [Flipt React SDK](https://github.com/flipt-io/flipt-client-sdks/tree/main/flipt-client-react) to evaluate the flag in the browser/client side. The `FliptEvaluationClient` object pulls flag state from the Flipt server and performs evaluation client-side in the browser to evalute the `language` flag. ### Server Side @@ -31,8 +31,8 @@ For the server-side example, we are using the [`getServerSideProps`](https://nex To run this example application you'll need: -* [Docker](https://docs.docker.com/install/) -* [docker-compose](https://docs.docker.com/compose/install/) +- [Docker](https://docs.docker.com/install/) +- [docker-compose](https://docs.docker.com/compose/install/) ## Running the Example diff --git a/examples/nextjs/components/Greeting.tsx b/examples/nextjs/components/Greeting.tsx index 3c673e5d8c..be83eafe02 100644 --- a/examples/nextjs/components/Greeting.tsx +++ b/examples/nextjs/components/Greeting.tsx @@ -1,21 +1,19 @@ import { useState, useEffect } from "react"; import { v4 as uuidv4 } from "uuid"; -import { FliptEvaluationClient } from "@flipt-io/flipt-client-browser"; +import { useFliptContext } from "@flipt-io/flipt-client-react"; export default function Greeting() { const [data, setData] = useState(null); + const { client } = useFliptContext(); + useEffect(() => { async function fetchData() { try { - const client = await FliptEvaluationClient.init("default", { - url: process.env.NEXT_PUBLIC_FLIPT_ADDR ?? "http://localhost:8080", - }); - - const result = client.evaluateVariant("language", uuidv4(), {}); - console.log(result); + const evaluation = client?.evaluateVariant("language", uuidv4(), {}); + console.log(evaluation); - let language = result.variantKey; + let language = evaluation?.variantKey; const greeting = language == "es" diff --git a/examples/nextjs/package-lock.json b/examples/nextjs/package-lock.json index 46f1e49609..666acef46f 100644 --- a/examples/nextjs/package-lock.json +++ b/examples/nextjs/package-lock.json @@ -9,7 +9,7 @@ "version": "0.1.0", "dependencies": { "@flipt-io/flipt-client": "^0.10.0", - "@flipt-io/flipt-client-browser": "^0.2.0", + "@flipt-io/flipt-client-react": "^0.0.1", "@next/font": "13.0.7", "@types/node": "18.11.17", "@types/react": "18.0.26", @@ -100,9 +100,21 @@ "integrity": "sha512-Cphmevva1ZfWvzIKxfXnHdB2KCy87N+VObMgz9++n9cKB6/1COCzp9lAg8pny57/V2sUzr5jxwTw1qIp+cP/iA==" }, "node_modules/@flipt-io/flipt-client-browser": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/@flipt-io/flipt-client-browser/-/flipt-client-browser-0.2.0.tgz", - "integrity": "sha512-Txzh2NmoIPeK76FpnznX+sJPQmjMRDq2fydGM8N+LLxtYz3Vz0u9dwzo7ZnjVkcniKyHKVm5UJyHtQNekzw6aQ==" + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/@flipt-io/flipt-client-browser/-/flipt-client-browser-0.2.1.tgz", + "integrity": "sha512-1oKPkAzVnJxefWtBvK/94yi1TxgHMTBYuCX1hGZUYpP4ejHuuQMtq4Diyw6I4/6N25cFuwErpV4A3a9uG23kJA==" + }, + "node_modules/@flipt-io/flipt-client-react": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/@flipt-io/flipt-client-react/-/flipt-client-react-0.0.1.tgz", + "integrity": "sha512-6H29B41rJiD0+ImV6zGvd/N/NoCvCUiO6WTy1HopFWzMwFpZqxsiGjhLCt6OEreO1WIEbHMsajgaocl+O82ltQ==", + "dependencies": { + "@flipt-io/flipt-client-browser": "^0.2.1" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.14", diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json index 8a62c958ca..03b1241928 100644 --- a/examples/nextjs/package.json +++ b/examples/nextjs/package.json @@ -10,7 +10,7 @@ }, "dependencies": { "@flipt-io/flipt-client": "^0.10.0", - "@flipt-io/flipt-client-browser": "^0.2.0", + "@flipt-io/flipt-client-react": "^0.0.1", "@next/font": "13.0.7", "@types/node": "18.11.17", "@types/react": "18.0.26", diff --git a/examples/nextjs/pages/_app.tsx b/examples/nextjs/pages/_app.tsx index c055f25c20..ecbe8e3959 100644 --- a/examples/nextjs/pages/_app.tsx +++ b/examples/nextjs/pages/_app.tsx @@ -1,6 +1,16 @@ -import '../styles/globals.css' -import type { AppProps } from 'next/app' +import { FliptProvider } from "@flipt-io/flipt-client-react"; +import "../styles/globals.css"; +import type { AppProps } from "next/app"; export default function App({ Component, pageProps }: AppProps) { - return + return ( + + + + ); } diff --git a/examples/nextjs/pages/_document.tsx b/examples/nextjs/pages/_document.tsx index 54e8bf3e2a..b2fff8b426 100644 --- a/examples/nextjs/pages/_document.tsx +++ b/examples/nextjs/pages/_document.tsx @@ -1,4 +1,4 @@ -import { Html, Head, Main, NextScript } from 'next/document' +import { Html, Head, Main, NextScript } from "next/document"; export default function Document() { return ( @@ -9,5 +9,5 @@ export default function Document() { - ) + ); } diff --git a/examples/nextjs/pages/api/hello.ts b/examples/nextjs/pages/api/hello.ts index 35a5de86db..2910a5479b 100644 --- a/examples/nextjs/pages/api/hello.ts +++ b/examples/nextjs/pages/api/hello.ts @@ -13,7 +13,7 @@ type Data = { export default async function handler( _req: NextApiRequest, - res: NextApiResponse + res: NextApiResponse, ) { let language = "english"; try { diff --git a/examples/nextjs/postcss.config.js b/examples/nextjs/postcss.config.js index 33ad091d26..12a703d900 100644 --- a/examples/nextjs/postcss.config.js +++ b/examples/nextjs/postcss.config.js @@ -3,4 +3,4 @@ module.exports = { tailwindcss: {}, autoprefixer: {}, }, -} +};