feat: add suspense, change demos

Signed-off-by: Todd Baert <[email protected]>

Author: toddbaert

.gitignore

@@ -127,4 +127,12 @@ dist
 .yarn/unplugged
 .yarn/build-state.yml
 .yarn/install-state.gz
-.pnp.*
+.pnp.*
+
+# yalc
+.yalc/
+yalc.lock
+yalc.sig
+
+# build
+build/

package-lock.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@openfeature/react-sdk": "^0.0.4-experimental",
+    "@openfeature/react-sdk": "file:.yalc/@openfeature/react-sdk",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -13,6 +13,7 @@
     "@types/react-dom": "^18.2.14",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.20.0",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"

package.json

@@ -0,0 +1,2 @@
+export const SUSPENSE_DEMO_NAME = 'suspense';
+export const FLAG_CHANGE_DEMO_NAME = 'flag-change';

src/App.test.tsx

@@ -1,34 +1,32 @@
-.App {
+.Demo {
   text-align: center;
 }
 
-.App-logo {
+.Demo-logo {
   height: 40vmin;
   pointer-events: none;
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
+  .Demo-logo {
+    animation: Demo-logo-spin infinite 20s linear;
   }
 }
 
-.App-header {
-  background-color: #282c34;
+.Demo-header {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
-  color: white;
 }
 
-.App-link {
+.Demo-link {
   color: #61dafb;
 }
 
-@keyframes App-logo-spin {
+@keyframes Demo-logo-spin {
   from {
     transform: rotate(0deg);
   }

src/App.tsx

@@ -0,0 +1,83 @@
+import {
+  InMemoryProvider,
+  OpenFeature,
+  OpenFeatureProvider,
+  useFeatureFlag
+} from '@openfeature/react-sdk';
+import { useEffect } from 'react';
+import { FLAG_CHANGE_DEMO_NAME } from '../constants';
+import logo from '../logo.svg';
+import './Demo.css';
+
+const PROVIDER_NAME = FLAG_CHANGE_DEMO_NAME;
+
+/**
+ * A component associated with a provider whose flags change every 2 seconds.
+ * It demonstrates the React SDKs ability to dynamically react to flag changes from the provider.
+ */
+function FlagChangeDemo() {
+
+  const newMessageName = 'new-message';
+  const flagConfig = {
+    [newMessageName]: {
+      disabled: false,
+      variants: {
+        on: true,
+        off: false,
+      },
+      defaultVariant: 'on',
+    },
+  };
+  const provider = new InMemoryProvider();
+
+  // Set our provider, give it a name matching the scope of our OpenFeatureProvider below
+  OpenFeature.setProvider(PROVIDER_NAME, provider);
+
+  // Start an interval to change the flag vales every 2s.
+  const interval = window.setInterval(() => {
+    flagConfig[newMessageName].defaultVariant = flagConfig[newMessageName].defaultVariant === 'on' ? 'off' : 'on';
+    provider.putConfiguration(flagConfig);
+  }, 2000);
+
+  useEffect(() => {
+    return () => {
+      window.clearInterval(interval);
+    }
+  });
+
+  return (
+    // This page is scoped to the "flag-change" provider.
+    <OpenFeatureProvider name={PROVIDER_NAME}>
+      <Content />
+    </OpenFeatureProvider>
+  );
+}
+
+function Content() {
+  return (
+    <div className='Demo'>
+      <header className='Demo-header'>
+        <img src={logo} className='Demo-logo' alt='logo' />
+          {/* The Message component evaluates a feature flag.
+          The component markup will be update dynamically when the provider emits a flag-change event. */}
+          <Message />
+      </header>
+    </div>
+  );
+}
+
+function Message() {
+  const { value: showNewMessage } = useFeatureFlag('new-message', true);
+
+  return (
+    <>
+      {showNewMessage ? (
+        <p>Welcome to this OpenFeature-enabled React app!</p>
+      ) : (
+        <p>Welcome to this boring React app.</p>
+      )}
+    </>
+  );
+}
+
+export default FlagChangeDemo;