fix(sdk): emit typescript files in the embedding cli when in a typescript project (#50278)

* emit typescript when in a typescript project

* also check dependencies for typescript dep

enterprise/frontend/src/embedding-sdk/cli/steps/generate-component-files.ts

@@ -6,6 +6,7 @@ import { GENERATED_COMPONENTS_DEFAULT_PATH } from "../constants/config";
 import { getGeneratedComponentFilesMessage } from "../constants/messages";
 import { ANALYTICS_CSS_SNIPPET } from "../snippets/analytics-css-snippet";
 import type { CliStepMethod } from "../types/cli";
+import { checkIsInTypeScriptProject } from "../utils/check-typescript-project";
 import { getComponentSnippets } from "../utils/get-component-snippets";
 import { printError, printSuccess } from "../utils/print";
 
@@ -49,9 +50,13 @@ export const generateReactComponentFiles: CliStepMethod = async state => {
     userSwitcherEnabled: !!token,
   });
 
+  const isInTypeScriptProject = await checkIsInTypeScriptProject();
+  const fileExtension = isInTypeScriptProject ? "ts" : "js";
+  const componentExtension = isInTypeScriptProject ? "tsx" : "jsx";
+
   // Generate sample components files in the specified directory.
   for (const { name, content } of sampleComponents) {
-    await fs.writeFile(`${path}/${name}.jsx`, content);
+    await fs.writeFile(`${path}/${name}.${componentExtension}`, content);
   }
 
   // Generate analytics.css sample styles.
@@ -63,7 +68,7 @@ export const generateReactComponentFiles: CliStepMethod = async state => {
     .join("\n")
     .trim();
 
-  await fs.writeFile(`${path}/index.js`, exportIndexContent);
+  await fs.writeFile(`${path}/index.${fileExtension}`, exportIndexContent);
 
   printSuccess(getGeneratedComponentFilesMessage(path));
 

enterprise/frontend/src/embedding-sdk/cli/utils/check-typescript-project.ts

+import fs from "fs";
+
+import path from "path";
+
+import { getProjectDependenciesFromPackageJson } from "../utils/get-package-version";
+
+/**
+ * Checks if the current project is a TypeScript project.
+ *
+ * It determines this by checking if the `tsconfig.json` file exists, or
+ * if the `package.json` file contains a `typescript` dependency.
+ */
+export async function checkIsInTypeScriptProject() {
+  const dependencies =
+    await getProjectDependenciesFromPackageJson("dependencies");
+
+  const devDependencies =
+    await getProjectDependenciesFromPackageJson("devDependencies");
+
+  const tsconfigPath = path.join(process.cwd(), "tsconfig.json");
+
+  // Most people should have a `typescript` as a dev dependency, but we'll check
+  // for it as a dependency too, just in case.
+  const hasTypeScriptDependency =
+    !!devDependencies?.typescript || !!dependencies?.typescript;
+
+  const hasTsConfig = fs.existsSync(tsconfigPath);
+
+  return hasTypeScriptDependency || hasTsConfig;
+}

enterprise/frontend/src/embedding-sdk/cli/utils/get-package-version.ts

@@ -32,17 +32,18 @@ export const readJson = async (path: string) => {
   return JSON.parse(packageJson);
 };
 
-export const getProjectDependenciesFromPackageJson =
-  async (): Promise<DependencyMap | null> => {
-    try {
-      const packageJsonPath = path.join(process.cwd(), "package.json");
-      const packageInfo = await readJson(packageJsonPath);
-
-      return packageInfo?.dependencies || null;
-    } catch (error) {
-      return null;
-    }
-  };
+export const getProjectDependenciesFromPackageJson = async (
+  field: "dependencies" | "devDependencies" = "dependencies",
+): Promise<DependencyMap | null> => {
+  try {
+    const packageJsonPath = path.join(process.cwd(), "package.json");
+    const packageInfo = await readJson(packageJsonPath);
+
+    return packageInfo?.[field] || null;
+  } catch (error) {
+    return null;
+  }
+};
 
 export const getPackageVersionFromModule = async (packageName: string) => {
   try {