Experiment flags (#979)

Author: jhuleatt

README.md

@@ -69,6 +69,22 @@ GCLOUD_PROJECT=<project-id> FIREBASE_EMULATOR_HUB=localhost:4400 npm start
 
 Open [http://localhost:3000](http://localhost:3000) to view it in the browser. Note: The development server runs by default on port **3000**, so please make sure you are visiting that URL instead of the production Emulator UI (which defaults on port **4000**).
 
+### Developing features behind flags
+
+Experimental CLI features that are activated/deactivated with the `firebase experiments:enable` command are surfaced to the UI via an environment variable. UI components can check if an experiment is active with the `useExperiment` hook:
+
+```jsx
+function ExperimentalFeatureUI() {
+  const showNewFeature = useExperiment("pineapple-smoothie");
+
+  if (showNewFeature === true) {
+    return <h1>Hi, I am an experimental feature</h1>;
+  } else {
+    return null;
+  }
+}
+```
+
 ### Other Available Scripts
 
 In the project directory, you can run:

server.ts

@@ -56,14 +56,19 @@ app.get(
     const emulatorsRes = await fetch(hubDiscoveryUrl.toString());
     const emulators = (await emulatorsRes.json()) as any;
 
-    const json = { projectId, ...emulators };
+    const json = { projectId, experiments: [], ...emulators };
 
     // Googlers: see go/firebase-emulator-ui-usage-collection-design?pli=1#heading=h.jwz7lj6r67z8
     // for more detail
     if (process.env.FIREBASE_GA_SESSION) {
       json.analytics = JSON.parse(process.env.FIREBASE_GA_SESSION);
     }
 
+    // pick up any experiments enabled with `firebase experiment:enable`
+    if (process.env.FIREBASE_ENABLED_EXPERIMENTS) {
+      json.experiments = JSON.parse(process.env.FIREBASE_ENABLED_EXPERIMENTS);
+    }
+
     return json;
   })
 );

src/components/common/EmulatorConfigProvider.tsx

@@ -161,6 +161,11 @@ export function useEmulatorConfig<E extends Emulator>(
   return emulatorConfig as NonNullable<Config[E]>;
 }
 
+export function useExperiment(experimentName: string): Boolean {
+  const { experiments } = useConfig();
+  return experiments.includes(experimentName);
+}
+
 export function useIsEmulatorDisabled(emulator?: Emulator): boolean {
   const config = useConfigOptional();
   if (config === undefined) {
@@ -204,9 +209,10 @@ async function configFetcher(url: string): Promise<Config> {
   const result: Config = {
     projectId: json.projectId as string,
     analytics: json.analytics as AnalyticsSession,
+    experiments: json.experiments as Array<string>,
   };
   for (const [key, value] of Object.entries<any>(json)) {
-    if (key === 'projectId' || key === 'analytics') {
+    if (key === 'projectId' || key === 'analytics' || key === 'experiments') {
       continue;
     }
     let host = value.host as string;

src/store/config/types.ts

@@ -81,4 +81,5 @@ export interface Config {
   hosting?: EmulatorConfig;
   storage?: EmulatorConfig;
   pubsub?: EmulatorConfig;
+  experiments: Array<string>;
 }