diff --git a/frontend/common/code-help/create-user/create-user-next.js b/frontend/common/code-help/create-user/create-user-next.js index fcd4b1c5c6e8..cfd0890775f8 100644 --- a/frontend/common/code-help/create-user/create-user-next.js +++ b/frontend/common/code-help/create-user/create-user-next.js @@ -23,7 +23,7 @@ export default function HomePage() { export default function App({ Component, pageProps, flagsmithState } { return ( - <FlagsmithProvider + - </FlagsmithProvider> + flagsmith={flagsmith}> + + ); } diff --git a/frontend/common/code-help/create-user/create-user-react.js b/frontend/common/code-help/create-user/create-user-react.js index 4de611b66d58..e44396b5e1a0 100644 --- a/frontend/common/code-help/create-user/create-user-react.js +++ b/frontend/common/code-help/create-user/create-user-react.js @@ -10,7 +10,7 @@ import { FlagsmithProvider } from '${NPM_CLIENT}/react'; export default function App() { return ( - <FlagsmithProvider + {...Your app} - </FlagsmithProvider> + ); } diff --git a/frontend/common/code-help/init/init-next-app-router.js b/frontend/common/code-help/init/init-next-app-router.js index 3cc974fa91f0..c912e46d5665 100644 --- a/frontend/common/code-help/init/init-next-app-router.js +++ b/frontend/common/code-help/init/init-next-app-router.js @@ -9,9 +9,9 @@ import { FeatureFlagProvider } from "./components/FeatureFlagProvider"; export default async function RootLayout({ children, -}: Readonly<{ +}: Readonly<{ children: React.ReactNode; -}>) { +}>) { await flagsmith.init({ environmentID: "${envId}",${ Constants.isCustomFlagsmithUrl() @@ -21,16 +21,16 @@ export default async function RootLayout({ const serverState = flagsmith.getState(); return ( - <html lang="en"> - <head> - <meta name="viewport" content="initial-scale=1, width=device-width" /> - </head> - <body> - <FeatureFlagProvider serverState={serverState}> + + + + + + {children} - </FeatureFlagProvider> - </body> - </html> + + + ); } @@ -48,13 +48,13 @@ export const FeatureFlagProvider = ({ }: { serverState: IState; children: ReactNode; -}) => { +}) => { const flagsmithInstance = useRef(createFlagsmithInstance()); return ( - <FlagsmithProvider flagsmith={flagsmithInstance.current} serverState={serverState}> - <>{children}</> - </FlagsmithProvider> + + <>{children} + ); }; @@ -69,6 +69,6 @@ export default function HomePage() { const ${FEATURE_NAME_ALT} = flags.${FEATURE_NAME_ALT}.value return ( - <>{...}</> + <>{...} ); }` diff --git a/frontend/common/code-help/init/init-next-pages-router.js b/frontend/common/code-help/init/init-next-pages-router.js index 1e60dc327167..87dcf864b5eb 100644 --- a/frontend/common/code-help/init/init-next-pages-router.js +++ b/frontend/common/code-help/init/init-next-pages-router.js @@ -8,7 +8,7 @@ import { FlagsmithProvider } from '@flagsmith/flagsmith/react'; export default function App({ Component, pageProps, flagsmithState } { return ( - <FlagsmithProvider + - </FlagsmithProvider> + flagsmith={flagsmith}> + + ); } @@ -43,6 +43,6 @@ export default function HomePage() { const ${FEATURE_NAME} = flags.${FEATURE_NAME}.enabled const ${FEATURE_NAME_ALT} = flags.${FEATURE_NAME_ALT}.value return ( - <>{...}</> + <>{...} ); }` diff --git a/frontend/common/code-help/init/init-react.js b/frontend/common/code-help/init/init-react.js index 6b1a3412cf0e..8b143701b529 100644 --- a/frontend/common/code-help/init/init-react.js +++ b/frontend/common/code-help/init/init-react.js @@ -3,13 +3,24 @@ import Constants from 'common/constants' export default ( envId, { FEATURE_NAME, FEATURE_NAME_ALT, LIB_NAME, NPM_CLIENT }, -) => `// App root -import ${LIB_NAME} from "${NPM_CLIENT}"; -import { FlagsmithProvider } from '@flagsmith/flagsmith/react'; +) => `import ${LIB_NAME} from "${NPM_CLIENT}"; +import { FlagsmithProvider, useFlags } from '${NPM_CLIENT}/react'; + +export function HomePage() { + const flags = useFlags(['${FEATURE_NAME}','${FEATURE_NAME_ALT}']); // only causes re-render if specified flag values / traits change + const ${FEATURE_NAME} = flags.${FEATURE_NAME}.enabled + const ${FEATURE_NAME_ALT} = flags.${FEATURE_NAME_ALT}.value + return ( + <> + {\`${FEATURE_NAME}: \${${FEATURE_NAME}}\`} + {\`${FEATURE_NAME_ALT}: \${${FEATURE_NAME_ALT}}\`} + + ); +} export default function App() { return ( - <FlagsmithProvider + - ); -} - -// Home Page -import ${LIB_NAME} from '${NPM_CLIENT}'; -import { useFlags, useFlagsmith } from '${NPM_CLIENT}/react'; - -export default function HomePage() { - const flags = useFlags(['${FEATURE_NAME}','${FEATURE_NAME_ALT}']); // only causes re-render if specified flag values / traits change - const ${FEATURE_NAME} = flags.${FEATURE_NAME}.enabled - const ${FEATURE_NAME_ALT} = flags.${FEATURE_NAME_ALT}.value - return ( - <>{...}</> + flagsmith={${LIB_NAME}}> + + ); }` diff --git a/frontend/common/code-help/install/install-curl.js b/frontend/common/code-help/install/install-curl.js index 2fcfd5c7dd22..2fd55704043d 100644 --- a/frontend/common/code-help/install/install-curl.js +++ b/frontend/common/code-help/install/install-curl.js @@ -1,5 +1,5 @@ -export default () => `You can access the API directly with tools like curl or httpie, +export default () => `You can access the API directly with tools like curl or httpie, or with clients for languages that we do not currently have SDKs for. -You can view the API via Swagger at https://api.flagsmith.com/api/v1/docs/. +You can view the API via Swagger at https://api.flagsmith.com/api/v1/docs/. ` diff --git a/frontend/common/code-help/install/install-dotnet.js b/frontend/common/code-help/install/install-dotnet.js index 4f4fd96e1470..75ba2759359f 100644 --- a/frontend/common/code-help/install/install-dotnet.js +++ b/frontend/common/code-help/install/install-dotnet.js @@ -1,5 +1,3 @@ -import Utils from 'common/utils/utils' - export default () => `// Package Manager PM> Install-Package Flagsmith -Version 4.0.0 @@ -7,7 +5,7 @@ PM> Install-Package Flagsmith -Version 4.0.0 dotnet add package Flagsmith --version 4.0.0 // PackageReference -${Utils.escapeHtml('')} + // Paket CLI paket add Flagsmith --version 4.0.0 diff --git a/frontend/common/code-help/install/install-flutter.js b/frontend/common/code-help/install/install-flutter.js index b3d1008d64c7..98948dd73e11 100644 --- a/frontend/common/code-help/install/install-flutter.js +++ b/frontend/common/code-help/install/install-flutter.js @@ -1,4 +1,4 @@ -export default () => `The client library is available from the https://pub.dev/packages/flagsmith: +export default () => `The client library is available from the https://pub.dev/packages/flagsmith: dependencies: flagsmith: diff --git a/frontend/common/code-help/install/install-java.js b/frontend/common/code-help/install/install-java.js index ca178a99420e..06dbf428eca4 100644 --- a/frontend/common/code-help/install/install-java.js +++ b/frontend/common/code-help/install/install-java.js @@ -1,11 +1,9 @@ -import Utils from 'common/utils/utils' - export default () => `// Maven -${Utils.escapeHtml('')} - ${Utils.escapeHtml('com.flagsmith')} - ${Utils.escapeHtml('flagsmith-java-client')} - ${Utils.escapeHtml('7.4.1')} -${Utils.escapeHtml('')} + + com.flagsmith + flagsmith-java-client + 7.4.1 + // Gradle implementation 'com.flagsmith:flagsmith-java-client:7.4.1' diff --git a/frontend/common/code-help/install/install-rust.js b/frontend/common/code-help/install/install-rust.js index 3b7ebc35a112..48724cb5ae04 100644 --- a/frontend/common/code-help/install/install-rust.js +++ b/frontend/common/code-help/install/install-rust.js @@ -1,2 +1,2 @@ export default () => - 'The package can be found at https://crates.io/crates/flagsmith;' + 'The package can be found at https://crates.io/crates/flagsmith;' diff --git a/frontend/common/code-help/traits/traits-next.js b/frontend/common/code-help/traits/traits-next.js index 1a096ed39dda..d396cb7e2983 100644 --- a/frontend/common/code-help/traits/traits-next.js +++ b/frontend/common/code-help/traits/traits-next.js @@ -23,7 +23,7 @@ export default function HomePage() { }; return ( - <>{...}</> + <>{...} ); } @@ -31,7 +31,7 @@ export default function HomePage() { export default function App({ Component, pageProps, flagsmithState } { return ( - <FlagsmithProvider + - </FlagsmithProvider> + flagsmith={flagsmith}> + + ); } diff --git a/frontend/common/code-help/traits/traits-react.js b/frontend/common/code-help/traits/traits-react.js index c9bf65a6bff2..05df85d95c20 100644 --- a/frontend/common/code-help/traits/traits-react.js +++ b/frontend/common/code-help/traits/traits-react.js @@ -10,7 +10,7 @@ import { FlagsmithProvider } from '${NPM_CLIENT}/react'; export default function App() { return ( - <FlagsmithProvider + {...Your app} - </FlagsmithProvider> + ); } @@ -46,6 +46,6 @@ export default function HomePage() { }; return ( - <>{...}</> + <>{...} ); }` diff --git a/frontend/common/utils/utils.tsx b/frontend/common/utils/utils.tsx index 1d718f5c7d3e..9adb9b7acdc4 100644 --- a/frontend/common/utils/utils.tsx +++ b/frontend/common/utils/utils.tsx @@ -180,12 +180,6 @@ const Utils = Object.assign({}, BaseUtils, { } return null }, - escapeHtml(html: string) { - const text = document.createTextNode(html) - const p = document.createElement('p') - p.appendChild(text) - return p.innerHTML - }, featureStateToValue(featureState: FeatureStateValue) { if (!featureState) { return null diff --git a/frontend/web/components/CodeHelp.tsx b/frontend/web/components/CodeHelp.tsx index ad2dbb87e052..47959a888382 100644 --- a/frontend/web/components/CodeHelp.tsx +++ b/frontend/web/components/CodeHelp.tsx @@ -144,7 +144,6 @@ const SnippetItem: FC = ({ /> 
 = ({ code, language = 'bash' }) => (
   

-    
+    
       {code}
     
     

diff --git a/frontend/web/components/pages/onboarding/OnboardingConnectPanel/sdkSnippets.ts b/frontend/web/components/pages/onboarding/OnboardingConnectPanel/sdkSnippets.ts
index f141a31241ce..9611a45e4f8f 100644
--- a/frontend/web/components/pages/onboarding/OnboardingConnectPanel/sdkSnippets.ts
+++ b/frontend/web/components/pages/onboarding/OnboardingConnectPanel/sdkSnippets.ts
@@ -1,11 +1,8 @@
 // Snippets for every SDK we support, sourced from the maintained
 // `Constants.codeHelp` (the same install/init the rest of the app uses, so
-// they don't drift). Two adaptations for this page:
-//   1. codeHelp snippets are authored for innerHTML rendering, so they carry
-//      HTML entities (< etc.). We render via  (escaping on), so
-//      we unescape first.
-//   2. They use a placeholder flag name; we swap it for the user's real flag,
-//      so the snippet references the flag this onboarding actually created.
+// they don't drift). One adaptation for this page: codeHelp uses a placeholder
+// flag name; we swap it for the user's real flag, so the snippet references
+// the flag this onboarding actually created.
 // The SDK list itself (labels, logos, codeHelp keys) lives in ./sdkLangs.
 import Constants from 'common/constants'
 import { SdkLang } from './sdkLangs'
@@ -14,14 +11,6 @@ import { SdkLang } from './sdkLangs'
 // exported); if that placeholder ever changes, update this too.
 const PLACEHOLDER_FLAG = 'my_cool_feature'
 
-const unescapeHtml = (s: string): string =>
-  s
-    .replace(/</g, '<')
-    .replace(/>/g, '>')
-    .replace(/'/g, "'")
-    .replace(/"/g, '"')
-    .replace(/&/g, '&')
-
 export type SdkSnippet = {
   install: string
   // Present for npm-based SDKs (codeHelp ships both managers in one block);
@@ -55,12 +44,12 @@ export const getSdkSnippet = (
     string,
     string
   >
-  const wire = unescapeHtml(inits[lang.initKey ?? lang.codeHelpKey] ?? '')
+  const wire = (inits[lang.initKey ?? lang.codeHelpKey] ?? '')
     .split(PLACEHOLDER_FLAG)
     .join(featureName)
   return {
     language: lang.language,
-    ...parseInstall(unescapeHtml(installs[lang.codeHelpKey] ?? '')),
+    ...parseInstall(installs[lang.codeHelpKey] ?? ''),
     wire: wire.trim(),
   }
 }