Fix imports for commonly-named components

packages/studio-plugin/src/sourcefiles/PageFile.ts

@@ -1,6 +1,6 @@
 import { ArrowFunction, FunctionDeclaration, Project } from "ts-morph";
 import { Result } from "true-myth";
-import { PageState } from "../types";
+import { FileMetadata, PageState } from "../types";
 import TemplateConfigWriter from "../writers/TemplateConfigWriter";
 import ReactComponentFileWriter from "../writers/ReactComponentFileWriter";
 import upath from "upath";
@@ -110,8 +110,12 @@ export default class PageFile {
    * source file will be mutated to update the template configuration.
    *
    * @param updatedPageState - the updated state for the page file
+   * @param UUIDToFileMetadata - mapping of metadataUUID to FileMetadata
    */
-  updatePageFile(updatedPageState: PageState): void {
+  updatePageFile(
+    updatedPageState: PageState,
+    UUIDToFileMetadata: Record<string, FileMetadata>
+  ): void {
     const onFileUpdate = (
       pageComponent: FunctionDeclaration | ArrowFunction
     ) => {
@@ -134,6 +138,7 @@ export default class PageFile {
       componentTree: updatedPageState.componentTree,
       cssImports: updatedPageState.cssImports,
       onFileUpdate,
+      UUIDToFileMetadata,
     });
   }
 }

packages/studio-plugin/src/writers/FileSystemWriter.ts

@@ -22,7 +22,8 @@ export class FileSystemWriter {
    */
   writeToPageFile(pageName: string, pageState: PageState): void {
     const pageFile = this.orchestrator.getOrCreatePageFile(pageName);
-    pageFile.updatePageFile(pageState);
+    const UUIDToFileMetadata = this.orchestrator.getUUIDToFileMetadata();
+    pageFile.updatePageFile(pageState, UUIDToFileMetadata);
   }
 
   writeToSiteSettings(siteSettingsValues: SiteSettingsValues): void {

packages/studio-plugin/src/writers/ReactComponentFileWriter.ts

@@ -14,15 +14,19 @@ import StudioSourceFileParser from "../parsers/StudioSourceFileParser";
 import {
   ComponentState,
   ComponentStateKind,
+  ErrorComponentState,
+  FileMetadata,
   PropVal,
   PropValueKind,
   PropValues,
   PropValueType,
+  StandardComponentState,
 } from "../types";
 import StudioSourceFileWriter from "./StudioSourceFileWriter";
 import ComponentTreeHelpers from "../utils/ComponentTreeHelpers";
 import camelCase from "camelcase";
 import { CustomTags } from "../parsers/helpers/TypeNodeParsingHelper";
+import getImportSpecifier from "../utils/getImportSpecifier";
 
 /**
  * ReactComponentFileWriter is a class for housing data
@@ -161,6 +165,39 @@ export default class ReactComponentFileWriter {
     }
   }
 
+  /**
+   * Gets the import data for each component in the component tree that is
+   * defined in the user's repo (e.g. in `src/components`). Note, for now, we
+   * only allow default imports for components.
+   */
+  private getComponentImports(
+    componentTree: ComponentState[],
+    UUIDToFileMetadata: Record<string, FileMetadata>
+  ): { name: string; moduleSpecifier: string }[] {
+    return componentTree
+      .filter(
+        (c): c is StandardComponentState | ErrorComponentState =>
+          c.kind === ComponentStateKind.Standard ||
+          c.kind === ComponentStateKind.Error
+      )
+      .filter((c) => {
+        if (UUIDToFileMetadata[c.metadataUUID]) {
+          return true;
+        }
+        console.error(
+          `Error adding import in ${this.componentName}: unable to find metadata for ${c.componentName}.`
+        );
+        return false;
+      })
+      .map((c) => {
+        const moduleSpecifier = getImportSpecifier(
+          this.studioSourceFileParser.getFilepath(),
+          UUIDToFileMetadata[c.metadataUUID].filepath
+        );
+        return { name: c.componentName, moduleSpecifier };
+      });
+  }
+
   /**
    * Update a React component file, which include:
    * - file imports
@@ -170,16 +207,16 @@ export default class ReactComponentFileWriter {
    */
   updateFile({
     componentTree,
+    UUIDToFileMetadata,
     cssImports,
     onFileUpdate,
-    defaultImports,
   }: {
     componentTree: ComponentState[];
+    UUIDToFileMetadata: Record<string, FileMetadata>;
     cssImports?: string[];
     onFileUpdate?: (
       functionComponent: FunctionDeclaration | ArrowFunction
     ) => void;
-    defaultImports?: { name: string; moduleSpecifier: string }[];
   }): void {
     let defaultExport: VariableDeclaration | FunctionDeclaration;
     try {
@@ -207,7 +244,7 @@ export default class ReactComponentFileWriter {
     this.studioSourceFileWriter.updateFileImports(
       {},
       cssImports,
-      defaultImports
+      this.getComponentImports(componentTree, UUIDToFileMetadata)
     );
     this.studioSourceFileWriter.writeToFile();
   }

packages/studio-plugin/tests/FileSystemManager.test.ts

@@ -12,6 +12,10 @@ import {
   PageState,
 } from "../src/types";
 import { createTestProject } from "./__utils__/createTestSourceFile";
+import * as uuidUtils from "uuid";
+
+jest.mock("uuid");
+jest.spyOn(uuidUtils, "v4").mockReturnValue("mock-metadata-uuid");
 
 const bannerComponentState: ComponentState = {
   kind: ComponentStateKind.Standard,
@@ -34,6 +38,7 @@ const projectRoot = upath.resolve(
 const tsMorphProject: Project = createTestProject();
 const paths = getUserPaths(projectRoot);
 paths.pages = upath.join(projectRoot, "pages");
+paths.components = upath.join(projectRoot, "components");
 
 const orchestrator = new ParsingOrchestrator(tsMorphProject, {
   paths,

packages/studio-plugin/tests/__fixtures__/FileSystemManager/components/Banner.tsx

@@ -0,0 +1,3 @@
+export default function Banner() {
+  return <></>;
+}

packages/studio-plugin/tests/__fixtures__/FileSystemManager/pages/UpdatedPage.tsx

@@ -1,3 +1,5 @@
+import Banner from "../components/Banner";
+
 export default function NewPage() {
   return <Banner />;
 }

packages/studio-plugin/tests/__fixtures__/PageFile/updatePageFile/PageWithContainerAndText.tsx

@@ -0,0 +1,11 @@
+import Container from "../../ComponentFile/Container";
+import Text from "../../ComponentFile/Text";
+
+export default function IndexPage() {
+  return (
+    <>
+      <Container />
+      <Text />
+    </>
+  );
+}

packages/studio-plugin/tests/__fixtures__/componentStates.ts

@@ -105,7 +105,7 @@ export const streamConfigMultipleFieldsComponentTree: ComponentState[] = [
     componentName: "ComplexBanner",
     parentUUID: "mock-uuid-0",
     uuid: "mock-uuid-1",
-    metadataUUID: "banner-metadata",
+    metadataUUID: "mock-metadata-uuid",
     props: {
       title: {
         kind: PropValueKind.Expression,
@@ -151,7 +151,7 @@ export const streamConfigMultipleFieldsComponentTree: ComponentState[] = [
     componentName: "ComplexBanner",
     parentUUID: "mock-uuid-0",
     uuid: "mock-uuid-3",
-    metadataUUID: "banner-metadata",
+    metadataUUID: "mock-metadata-uuid",
     props: {
       title: {
         kind: PropValueKind.Expression,
@@ -165,7 +165,7 @@ export const streamConfigMultipleFieldsComponentTree: ComponentState[] = [
     componentName: "ComplexBanner",
     parentUUID: "mock-uuid-0",
     uuid: "mock-uuid-4",
-    metadataUUID: "banner-metadata",
+    metadataUUID: "mock-metadata-uuid",
     props: {
       title: {
         kind: PropValueKind.Literal,