add error when not importing TS / TSX files

Author: Bellian

packages/@triplex/editor-next/src/features/app-root/dnd-helper.tsx

@@ -9,26 +9,20 @@ import { useEffect, useState } from "react";
 import { preloadSubscription } from "../../hooks/ws";
 import { handleVSCERequestResponse, onVSCE, requestVSCE, type ToVSCodeEvent } from "../../util/bridge";
 import { useSceneContext } from "./context";
-import { type UseDNDReturn } from "../../../../../lib/src/use-dnd";
+import { type UseDNDReturnError, type UseDNDReturn } from "../../../../../lib/src/use-dnd";
 import { Dialog } from "@triplex/ux";
 import { on } from "@triplex/bridge/host";
 
-export function DNDHelper({ children }: { children: React.ReactNode }) {
+export function FileDNDHelper({ children }: { children: React.ReactNode }) {
     const context = useSceneContext();
 
-    const [errorData, setErrorData] = useState<{
-        exportNames: string[];
-        type: 'multiple-exports' | 'unknown';
-    }>();
+    const [errorData, setErrorData] = useState<UseDNDReturnError>();
     const [retryData, setRetryData] = useState<ToVSCodeEvent['component-insert']>();
 
     const handleComponentInsert = async (_: string, data: ToVSCodeEvent['component-insert']) => {
         const result = await requestVSCE<UseDNDReturn, "component-insert">("component-insert", data);
         if (!result.success) {
-            setErrorData({
-                exportNames: result.error.multipleExports,
-                type: result.error.type || 'unknown',
-            });
+            setErrorData(result.error);
             setRetryData(data);
         } else {
             setErrorData(undefined);
@@ -69,14 +63,34 @@ export function DNDHelper({ children }: { children: React.ReactNode }) {
         <div className="fixed inset-0 flex select-none"
             {...bindingsDND}
         >
-            {errorData && (
+            {errorData && errorData.type === 'unknown' && (
+                <Dialog onDismiss={onDismissError}>
+                    <div className="flex flex-col gap-4 p-4">
+                        <span className="text-heading select-none font-medium">
+                            An error occurred while adding the component.
+                        </span>
+                        <span className="text-sm text-gray-600 break-all">
+                            {errorData.message}
+                        </span>
+                        <div className="flex justify-end">
+                            <button className="bg-blue-600 text-white px-4 py-2 rounded" onClick={onDismissError} type="button">
+                                Dismiss
+                            </button>
+                        </div>
+                    </div>
+                </Dialog>
+            )}
+            {errorData && errorData.type === 'multiple-exports' && (
                 <Dialog onDismiss={onDismissError}>
                     <form className="flex flex-col gap-2.5 p-2.5" onSubmit={onSubmit}>
                         <span className="text-heading select-none font-medium">
                             Which component do you want to add?
                         </span>
                         <select>
-                            {errorData.exportNames.map((name) => (
+                            {errorData.multipleExports.map((name) => (
+                                <option key={name} value={name}>{name}</option>
+                            ))}
+                            {errorData.multipleExports.map((name) => (
                                 <option key={name} value={name}>{name}</option>
                             ))}
                         </select>

packages/@triplex/editor-next/src/features/app-root/index.tsx

@@ -13,13 +13,13 @@ import { Panels } from "../panels";
 import { Dialogs } from "./dialogs";
 import { EmptyState } from "./empty-state";
 import { Events } from "./events";
-import { DNDHelper } from "./dnd-helper";
+import { FileDNDHelper } from "./dnd-helper";
 
 export function AppRoot() {
   useScreenView("app", "Screen");
 
   return (
-    <DNDHelper>
+    <FileDNDHelper>
       <Events />
       <Panels />
       <Dialogs />
@@ -35,7 +35,7 @@ export function AppRoot() {
         />
       </div>
       {fg("ai_chat") && <AIChat />}
-    </DNDHelper>
+    </FileDNDHelper>
   );
 }
 

packages/@triplex/server/src/index.ts

@@ -68,6 +68,7 @@ import { resolveGitRepoVisibility } from "./util/git";
 import { getParam, getParamOptional } from "./util/params";
 import { getThumbnailPath } from "./util/thumbnail";
 import { resolveRemoteURL } from "./util/path";
+import { DNDError } from "./util/errors";
 
 export * from "./types";
 export { type PropGroupDef } from "./ast/prop-groupings";
@@ -347,7 +348,16 @@ export async function createServer({
   router.post("/scene/:path/add-component", async (context) => {
     const { path: scenePath } = context.params;
 
-    const body = await context.request.body().value;
+    const body = await context.request.body().value as Record<string, string>;
+
+    if (body.componentPath.endsWith('.ts') === false && body.componentPath.endsWith('.tsx') === false) {
+      context.response.body = {
+        error: new DNDError(`Component path ${body.componentPath} must end with .ts or .tsx`),
+        status: "unmodified",
+        success: false
+      };
+      return;
+    }
 
     const componentPath = fileURLToPath(resolveRemoteURL(body.componentPath));
 

packages/@triplex/server/src/services/component.ts

@@ -644,7 +644,7 @@ export function addComponentToEnd(
   }
 
   if (!componentFile) {
-    throw new Error(`Component file not found: ${componentPath}`);
+    throw new DNDError(`Component file not found: ${componentPath}`);
   }
 
   // determin the imported export
@@ -655,19 +655,41 @@ export function addComponentToEnd(
 
   // If no export name is provided and there are multiple exports, we need to ask the user to specify one.
   if (!defaultExport && exportNames.length > 1 && !exportName) {
-    const error = new Error(`Multiple exports found in ${componentPath}, please specify an export to use.`) as Error & { multipleExports: string[]; type: string };
+    const error = new DNDError(`Multiple exports found in ${componentPath}, please specify an export to use.`, 'multiple-exports');
     error.multipleExports = exportNames;
-    error.type = 'multiple-exports';
     throw error;
   }
   // If no exports found, throw.
   if (!defaultExport && exportNames.length === 0) {
-    throw new Error(`No exports found in ${componentPath}`);
+    throw new DNDError(`No exports found in ${componentPath}`);
   }
 
   // Determine which export to use
   const componentExportName = defaultExport ? "__default__" : exportName ?? exportNames[0];
 
+  // Determine the import name
+
+  if (!componentExportName) {
+    throw new DNDError(`No exports found in ${componentPath}`);
+  }
+
+  // Ensure the import exists
+  const componentImportName = ensureImport(sceneFile, componentPath, componentExportName);
+
+  const components = [...sceneFile.getExportedDeclarations().keys()];
+  const sceneExportName = components.includes(activeScene || "") ? activeScene : components[0];
+
+  if (!sceneExportName) {
+    throw new DNDError(`No exports found in scene file`);
+  }
+
+  const jsxElement = getExportJsxElement(sceneFile, sceneExportName);
+
+  const newComponentJsx = `<${componentImportName} />`;
+
+  insertAtEnd(sceneFile, jsxElement, newComponentJsx);
+}
+export function getUniqueImportName(componentExportName: string, componentPath: string, sceneFile: SourceFile) {
   // Determine the import name
   let componentImportName = componentExportName === "__default__" ? toPascalCase(basename(componentPath).replace(extname(componentPath), '')) : componentExportName;
   let componentImportNameAddition = 0;
@@ -696,35 +718,16 @@ export function addComponentToEnd(
     componentImportNameAddition++;
   }
   componentImportName = `${componentImportName}${componentImportNameAddition === 0 ? "" : '_' + componentImportNameAddition}`;
-
-  if (!componentExportName) {
-    throw new Error(`No exports found in ${componentPath}`);
-  }
-
-  // Ensure the import exists
-  componentImportName = ensureImport(sceneFile, componentPath, componentExportName, componentImportName);
-
-  const components = [...sceneFile.getExportedDeclarations().keys()];
-  const sceneExportName = components.includes(activeScene || "") ? activeScene : components[0];
-
-  if (!sceneExportName) {
-    throw new Error(`No exports found in scene file`);
-  }
-
-  const jsxElement = getExportJsxElement(sceneFile, sceneExportName);
-
-  const newComponentJsx = `<${componentImportName} />`;
-
-  insertAtEnd(sceneFile, jsxElement, newComponentJsx);
+  return componentImportName;
 }
 
 /** Ensures an import exists for the component */
 function ensureImport(
   sourceFile: SourceFile,
   modulePath: string,
   exportName: string,
-  importName: string,
 ): string {
+  const importName = getUniqueImportName(exportName, modulePath, sourceFile);
   const baseFolderPath = dirname(sourceFile.getFilePath());
   const relativePath = omitFileExtension(prefixLocalPath(relative(baseFolderPath, modulePath)));
 

packages/@triplex/server/src/util/errors.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2022—present Michael Dougall. All rights reserved.
+ *
+ * This repository utilizes multiple licenses across different directories. To
+ * see this files license find the nearest LICENSE file up the source tree.
+ */
+export class DNDError extends Error {
+    multipleExports?: string[];
+
+    constructor(public message: string, public type: string = 'unknown') {
+        super(message);
+        this.name = "DNDError";
+    }
+
+    toJSON() {
+        return {
+            message: this.message,
+            multipleExports: this.multipleExports,
+            type: this.type,
+        };
+    }
+}

packages/lib/src/use-dnd.ts

@@ -17,6 +17,9 @@ export type UseDNDReturn = {
 export type UseDNDReturnError = {
     multipleExports: string[],
     type: 'multiple-exports'
+} | {
+    message: string,
+    type: 'unknown'
 }