Added generated angular sdk support (#8291)

Author: maneesht

Diff for: CHANGELOG.md

@@ -1,3 +1,4 @@
+- Added support for generated Angular SDKs for Data Connect
 - App Hosting emulator can now load secret env vars. (#8305)
 - Fixed webframeworks deployments when using multiple hosting sites in `firebase.json`. (#8314)
 - Added a new command to setup a cleanup policy for functions artifacts. (#8268)

Diff for: src/dataconnect/fileUtils.spec.ts

@@ -1,7 +1,7 @@
 import * as mockfs from "mock-fs";
 
 import { expect } from "chai";
-import { getPlatformFromFolder, SUPPORTED_FRAMEWORKS } from "./fileUtils";
+import { frameworksMap, getPlatformFromFolder, SUPPORTED_FRAMEWORKS } from "./fileUtils";
 import { generateSdkYaml } from "../init/features/dataconnect/sdk";
 import { ConnectorYaml, Platform } from "./types";
 import FileSystem from "mock-fs/lib/filesystem";
@@ -137,10 +137,12 @@ describe("getPlatformFromFolder", () => {
 
 describe("generateSdkYaml", () => {
   // Test Data
-  const sampleConnectorYaml: ConnectorYaml = {
-    connectorId: "default",
-    generate: {},
-  };
+  function getSampleConnectorYaml(): ConnectorYaml {
+    return {
+      connectorId: "default",
+      generate: {},
+    };
+  }
   const connectorYamlFolder = "/my/app/folder/connector";
 
   const appFolderBase = "/my/app/folder";
@@ -196,7 +198,7 @@ describe("generateSdkYaml", () => {
         mockfs({ [appFolderDetectable]: { ["package.json"]: "{}" } });
         const modifiedYaml = await generateSdkYaml(
           Platform.WEB,
-          sampleConnectorYaml,
+          getSampleConnectorYaml(),
           connectorYamlFolder,
           c.appDir,
         );
@@ -209,28 +211,38 @@ describe("generateSdkYaml", () => {
       const cases = [
         {
           desc: `can detect a ${f}`,
-          depName: f,
+          deps: frameworksMap[f],
           detect: true,
         },
         {
           desc: `can detect not ${f}`,
-          depName: `not-${f}`,
+          deps: `not-${f}`,
         },
       ];
+      async function testDependency(dep: string, shouldDetect: boolean | undefined) {
+        mockfs({
+          [appFolderDetectable]: {
+            ["package.json"]: `{"dependencies": {"${dep}": "1"}}`,
+          },
+        });
+        const modifiedYaml = await generateSdkYaml(
+          Platform.WEB,
+          getSampleConnectorYaml(),
+          connectorYamlFolder,
+          appFolderDetectable,
+        );
+        console.log(`{"dependencies": {"${dep}": "1"}}`);
+        expect(modifiedYaml.generate?.javascriptSdk?.[f]).to.equal(shouldDetect);
+      }
       for (const c of cases) {
         it(c.desc, async () => {
-          mockfs({
-            [appFolderDetectable]: {
-              ["package.json"]: `{"dependencies": {"${c.depName}": "1"}}`,
-            },
-          });
-          const modifiedYaml = await generateSdkYaml(
-            Platform.WEB,
-            sampleConnectorYaml,
-            connectorYamlFolder,
-            appFolderDetectable,
-          );
-          expect(modifiedYaml.generate?.javascriptSdk?.[f]).to.equal(c.detect);
+          if (Array.isArray(c.deps)) {
+            for (const dep of c.deps) {
+              await testDependency(dep, c.detect);
+            }
+          } else {
+            await testDependency(c.deps as string, c.detect);
+          }
         });
       }
     });
@@ -271,7 +283,7 @@ describe("generateSdkYaml", () => {
       it(c.desc, async () => {
         const modifiedYaml = await generateSdkYaml(
           Platform.IOS,
-          sampleConnectorYaml,
+          getSampleConnectorYaml(),
           connectorYamlFolder,
           c.appDir,
         );
@@ -348,7 +360,7 @@ describe("generateSdkYaml", () => {
         });
         const modifiedYaml = await generateSdkYaml(
           Platform.ANDROID,
-          sampleConnectorYaml,
+          getSampleConnectorYaml(),
           connectorYamlFolder,
           c.appDir,
         );
@@ -392,7 +404,7 @@ describe("generateSdkYaml", () => {
       it(c.desc, async () => {
         const modifiedYaml = await generateSdkYaml(
           Platform.FLUTTER,
-          sampleConnectorYaml,
+          getSampleConnectorYaml(),
           connectorYamlFolder,
           c.appDir,
         );
@@ -416,11 +428,11 @@ describe("generateSdkYaml", () => {
     const unknownPlatform = "unknown" as Platform; // Type assertion for test
     const modifiedYaml = await generateSdkYaml(
       unknownPlatform,
-      sampleConnectorYaml,
+      getSampleConnectorYaml(),
       connectorYamlFolder,
       appFolderBase,
     );
-    expect(modifiedYaml).to.deep.equal(sampleConnectorYaml); // No changes
+    expect(modifiedYaml).to.deep.equal(getSampleConnectorYaml()); // No changes
   });
 
   afterEach(() => {

Diff for: src/dataconnect/fileUtils.ts

@@ -177,16 +177,18 @@ export async function resolvePackageJson(
   }
 }
 
-export const SUPPORTED_FRAMEWORKS: (keyof SupportedFrameworks)[] = ["react"];
+export const SUPPORTED_FRAMEWORKS: (keyof SupportedFrameworks)[] = ["react", "angular"];
+export const frameworksMap: { [key in keyof SupportedFrameworks]: string[] } = {
+  react: ["react", "next"],
+  angular: ["@angular/core"],
+};
 export function getFrameworksFromPackageJson(
   packageJson: PackageJSON,
 ): (keyof SupportedFrameworks)[] {
   const devDependencies = Object.keys(packageJson.devDependencies ?? {});
   const dependencies = Object.keys(packageJson.dependencies ?? {});
-  const matched = new Set(
-    [...devDependencies, ...dependencies].filter((dep) =>
-      SUPPORTED_FRAMEWORKS.includes(dep as keyof SupportedFrameworks),
-    ),
+  const allDeps = Array.from(new Set([...devDependencies, ...dependencies]));
+  return SUPPORTED_FRAMEWORKS.filter((framework) =>
+    frameworksMap[framework]!.find((dep) => allDeps.includes(dep)),
   );
-  return Array.from(matched) as (keyof SupportedFrameworks)[];
 }

Diff for: src/dataconnect/types.ts

@@ -148,6 +148,7 @@ export interface Generate {
 
 export interface SupportedFrameworks {
   react?: boolean;
+  angular?: boolean;
 }
 
 export interface JavascriptSDK extends SupportedFrameworks {

Diff for: src/init/features/dataconnect/index.ts

@@ -93,7 +93,7 @@ export async function doSetup(setup: Setup, config: Config): Promise<void> {
     await sdk.doSetup(setup, config);
   } else {
     logBullet(
-      `If you'd like to add the generated SDK to your app your, run ${clc.bold("firebase init dataconnect:sdk")}`,
+      `If you'd like to add the generated SDK to your app later, run ${clc.bold("firebase init dataconnect:sdk")}`,
     );
   }
   if (setup.projectId && !isBillingEnabled) {

Diff for: src/init/features/dataconnect/sdk.ts

@@ -118,6 +118,7 @@ async function askQuestions(setup: Setup, config: Config): Promise<SDKInfo> {
     const unusedFrameworks = SUPPORTED_FRAMEWORKS.filter(
       (framework) => !newConnectorYaml!.generate?.javascriptSdk![framework],
     );
+    const hasFrameworkEnabled = unusedFrameworks.length < SUPPORTED_FRAMEWORKS.length;
     if (unusedFrameworks.length > 0) {
       const additionalFrameworks: { fdcFrameworks: (keyof SupportedFrameworks)[] } = await prompt(
         setup,
@@ -126,7 +127,7 @@ async function askQuestions(setup: Setup, config: Config): Promise<SDKInfo> {
             type: "checkbox",
             name: "fdcFrameworks",
             message:
-              "Which framework would you like to generate SDKs for? " +
+              `Which ${hasFrameworkEnabled && "additional "}frameworks would you like to generate SDKs for? ` +
               "Press Space to select features, then Enter to confirm your choices.",
             choices: unusedFrameworks.map((frameworkStr) => ({
               value: frameworkStr,
@@ -182,6 +183,7 @@ export async function generateSdkYaml(
     if (packageJson) {
       const frameworksUsed = getFrameworksFromPackageJson(packageJson);
       for (const framework of frameworksUsed) {
+        logBullet(`Detected ${framework} app. Enabling ${framework} generated SDKs.`);
         javascriptSdk[framework] = true;
       }
     }
@@ -237,4 +239,24 @@ export async function actuate(sdkInfo: SDKInfo) {
       ),
     );
   }
+  if (sdkInfo.connectorInfo.connectorYaml.generate?.javascriptSdk) {
+    for (const framework of SUPPORTED_FRAMEWORKS) {
+      if (sdkInfo.connectorInfo.connectorYaml!.generate!.javascriptSdk![framework]) {
+        logInfoForFramework(framework);
+      }
+    }
+  }
+}
+
+function logInfoForFramework(framework: keyof SupportedFrameworks) {
+  if (framework === "react") {
+    logBullet(
+      "Visit https://firebase.google.com/docs/data-connect/web-sdk#react for more information on how to set up React Generated SDKs for Firebase Data Connect",
+    );
+  } else if (framework === "angular") {
+    // TODO(mtewani): Replace this with `ng add @angular/fire` when ready.
+    logBullet(
+      "Run `npm i --save @angular/fire @tanstack-query-firebase/angular @tanstack/angular-query-experimental` to install angular sdk dependencies.\nVisit https://github.com/invertase/tanstack-query-firebase/tree/main/packages/angular for more information on how to set up Angular Generated SDKs for Firebase Data Connect",
+    );
+  }
 }