Consolidate extension-state into context

firebase-vscode/package.json

@@ -99,6 +99,7 @@
     "test": "node ./dist/test/runTest.js"
   },
   "dependencies": {
+    "@preact/signals-react": "^1.3.6",
     "@vscode/codicons": "0.0.30",
     "@vscode/webview-ui-toolkit": "^1.2.1",
     "classnames": "^2.3.2",

firebase-vscode/webviews/SidebarApp.tsx

@@ -22,6 +22,7 @@ export function SidebarApp() {
   const [channels, setChannels] = useState<ChannelWithId[]>(null);
   const [user, setUser] = useState<User | ServiceAccountUser | null>(null);
   const [framework, setFramework] = useState<string | null>(null);
+
   /**
    * null - has not finished checking yet
    * empty array - finished checking, no users logged in
@@ -57,7 +58,7 @@ export function SidebarApp() {
       }
       if (firebaseJson?.hosting) {
         webLogger.debug("Detected firebase.json");
-        setHostingInitState('success');
+        setHostingInitState("success");
         broker.send("showMessage", {
           msg: "Auto-detected hosting setup in this folder",
         });
@@ -88,21 +89,24 @@ export function SidebarApp() {
       setUser(user);
     });
 
-    broker.on("notifyHostingInitDone", ({ success, projectId, folderPath, framework }) => {
-      if (success) {
-        webLogger.debug(`notifyHostingInitDone: ${projectId}, ${folderPath}`);
-        setHostingInitState('success');
-        if (framework) {
-          setFramework(framework);
+    broker.on(
+      "notifyHostingInitDone",
+      ({ success, projectId, folderPath, framework }) => {
+        if (success) {
+          webLogger.debug(`notifyHostingInitDone: ${projectId}, ${folderPath}`);
+          setHostingInitState("success");
+          if (framework) {
+            setFramework(framework);
+          }
+        } else {
+          setHostingInitState(null);
         }
-      } else {
-        setHostingInitState(null);
       }
-    });
+    );
 
     broker.on("notifyHostingDeploy", ({ success }) => {
       webLogger.debug(`notifyHostingDeploy: ${success}`);
-      setDeployState(success ? 'success' : 'failure');
+      setDeployState(success ? "success" : "failure");
     });
   }, []);
 
@@ -137,7 +141,7 @@ export function SidebarApp() {
       {!!user && (
         <ProjectSection userEmail={user.email} projectId={projectId} />
       )}
-      {hostingInitState === 'success' && !!user && !!projectId && (
+      {hostingInitState === "success" && !!user && !!projectId && (
         <DeployPanel
           deployState={deployState}
           setDeployState={setDeployState}
@@ -147,7 +151,7 @@ export function SidebarApp() {
         />
       )}
       <Spacer size="large" />
-      {hostingInitState !== 'success' && !!user && !!projectId && (
+      {hostingInitState !== "success" && !!user && !!projectId && (
         <InitFirebasePanel
           onHostingInit={() => {
             setupHosting();

firebase-vscode/webviews/components/AccountSection.tsx

@@ -143,19 +143,21 @@ function UserSelectionMenu({
         {!isMonospace && <VSCodeDivider />}
         {allUsersSorted.map((user: UserWithType | ServiceAccountUser) => (
           <>
-            {!isMonospace && (<MenuItem
-              onClick={() => {
-                broker.send("requestChangeUser", { user });
-                onClose();
-              }}
-              key={user.email}
-            >
-              {user?.type === "service_account"
-                ? isMonospace
-                  ? TEXT.MONOSPACE_LOGIN_SELECTION_ITEM
-                  : TEXT.VSCE_SERVICE_ACCOUNT_SELECTION_ITEM
-                : user.email}
-            </MenuItem>)}
+            {!isMonospace && (
+              <MenuItem
+                onClick={() => {
+                  broker.send("requestChangeUser", { user });
+                  onClose();
+                }}
+                key={user.email}
+              >
+                {user?.type === "service_account"
+                  ? isMonospace
+                    ? TEXT.MONOSPACE_LOGIN_SELECTION_ITEM
+                    : TEXT.VSCE_SERVICE_ACCOUNT_SELECTION_ITEM
+                  : user.email}
+              </MenuItem>
+            )}
             {user?.type === "service_account" && (
               <MenuItem
                 onClick={() => {
@@ -169,7 +171,9 @@ function UserSelectionMenu({
                 }}
                 key="service-account-email"
               >
-                <Label level={isMonospace ? 3 : 2}>{TEXT.SHOW_SERVICE_ACCOUNT}</Label>
+                <Label level={isMonospace ? 3 : 2}>
+                  {TEXT.SHOW_SERVICE_ACCOUNT}
+                </Label>
               </MenuItem>
             )}
           </>

firebase-vscode/webviews/globals/app.tsx

@@ -0,0 +1,11 @@
+import React, { ReactNode, StrictMode } from "react";
+import { ExtensionStateProvider } from "./extension-state";
+
+/** Generic wrapper that all webviews should be wrapped with */
+export function App({ children }: { children: ReactNode }): JSX.Element {
+  return (
+    <StrictMode>
+      <ExtensionStateProvider>{children}</ExtensionStateProvider>
+    </StrictMode>
+  );
+}

firebase-vscode/webviews/globals/extension-state.tsx

@@ -0,0 +1,65 @@
+import React, { createContext, ReactNode, useContext, useEffect } from "react";
+import { broker } from "./html-broker";
+import { signal, computed } from "@preact/signals-react";
+import { User } from "../types/auth";
+
+export enum Environment {
+  UNSPECIFIED,
+  VSC,
+  IDX,
+}
+
+function createExtensionState() {
+  const environment = signal(Environment.UNSPECIFIED);
+  const users = signal<User[]>([]);
+  const selectedUserEmail = signal("");
+  const projectId = signal("");
+
+  const selectedUser = computed(() =>
+    users.value.find((user) => user.email === selectedUserEmail.value)
+  );
+
+  return { environment, users, projectId, selectedUserEmail, selectedUser };
+}
+
+const ExtensionState =
+  createContext<ReturnType<typeof createExtensionState>>(null);
+
+/** Global extension state, this should live high in the react-tree to minimize superfluous renders */
+export function ExtensionStateProvider({
+  children,
+}: {
+  children: ReactNode;
+}): JSX.Element {
+  const state = createExtensionState();
+
+  useEffect(() => {
+    broker.on("notifyEnv", ({ env }) => {
+      state.environment.value = env.isMonospace
+        ? Environment.IDX
+        : Environment.VSC;
+    });
+
+    broker.on("notifyUsers", ({ users }) => {
+      state.users.value = users;
+    });
+
+    broker.on("notifyUserChanged", ({ user }) => {
+      state.selectedUserEmail.value = user.email;
+    });
+
+    broker.on("notifyProjectChanged", ({ projectId }) => {
+      state.projectId.value = projectId;
+    });
+
+    broker.send("getInitialData");
+  }, [state]);
+
+  return (
+    <ExtensionState.Provider value={state}>{children}</ExtensionState.Provider>
+  );
+}
+
+export function useExtensionState() {
+  return useContext(ExtensionState);
+}

firebase-vscode/webviews/sidebar.entry.tsx

@@ -1,6 +1,11 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
 import { SidebarApp } from "./SidebarApp";
+import { App } from "./globals/app";
 
 const root = createRoot(document.getElementById("root")!);
-root.render(<SidebarApp />);
+root.render(
+  <App>
+    <SidebarApp />
+  </App>
+);