refactor to include filename since that determines the loader

matthoffner · Dec 10, 2023 · 360e1dc · 360e1dc
1 parent 8d893d8
commit 360e1dc
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 19 deletions.
diff --git a/esbuild.test.ts b/esbuild.test.ts
@@ -1,28 +1,31 @@
-import { createJavaScriptCompiler } from "./esbuild";
+import { createEsbuilder } from "./esbuild";
 import { describe, it, expect } from 'vitest';
 
 describe('JavaScript and TypeScript Compiler Tests', () => {
 
   it('should compile JavaScript code correctly', async () => {
-    const [javaScriptCompiler] = createJavaScriptCompiler();
+    const [javaScriptCompiler] = createEsbuilder();
     const result = await javaScriptCompiler({
-      rawCode: `1 + 1`
+      rawCode: `1 + 1`,
+      entryPoint: 'index.js'
     });
     expect(result).toBe("Compilation failed: The \"wasmURL\" option only works in the browser");
   });
 
   it('should compile TypeScript code correctly', async () => {
-    const [javaScriptCompiler] = createJavaScriptCompiler();
+    const [javaScriptCompiler] = createEsbuilder();
     const result = await javaScriptCompiler({
-      rawCode: `let num: number = 1; num + 1;`
+      rawCode: `let num: number = 1; num + 1;`,
+      entryPoint: 'index.ts'
     });
     expect(result).toBe("Compilation failed: The \"wasmURL\" option only works in the browser");
   });
 
   it('should compile JSX code correctly', async () => {
-    const [javaScriptCompiler] = createJavaScriptCompiler();
+    const [javaScriptCompiler] = createEsbuilder();
     const result = await javaScriptCompiler({
       rawCode: `const element = <div>Hello World</div>; element.type;`,
+      entryPoint: 'index.jsx'
     });
     expect(result).toBe("Compilation failed: The \"wasmURL\" option only works in the browser");
   });

diff --git a/esbuild.ts b/esbuild.ts
@@ -121,31 +121,35 @@ export const unpkgPathPlugin = (): esbuild.Plugin => {
 // Define the version of esbuild-wasm to use
 const ESBUILD_WASM_VERSION = "0.14.54";
 
-function createJavaScriptCompiler() {
+function createEsbuilder() {
   const paramsSchema = z.object({
-    rawCode: z.string()
+    rawCode: z.string(),
+    entryPoint: z.string()
   });
-  const name = "javaScriptCompiler";
-  const description = "Compiles JavaScript, TypeScript, or JSX code within a chat interface using esbuild-wasm. Accepts raw code as input, and provides compiled output, facilitating real-time code execution and analysis in a chatbot environment.";
+  const name = "esbuilder";
+  const description = "Compiles JavaScript, TypeScript, JSX, or TSX code within a chat interface using esbuild-wasm. Accepts raw code as input and sets the filename dynamically based on code type (i.e., 'index.js' for JavaScript, 'index.ts' for TypeScript, 'index.jsx' for JSX and 'index.tsx' for TSX). The compiler presents a compiled output, facilitating real-time code execution and analysis in a chatbot environment.";
 
   const execute = async (params: z.infer<typeof paramsSchema>) => {
-    const { rawCode } = params;
-
+    const { rawCode, entryPoint } = params;
     try {
       // Initialize esbuild-wasm if it hasn't been initialized
       await esbuild.initialize({
         worker: true,
         wasmURL: `https://unpkg.com/esbuild-wasm@${ESBUILD_WASM_VERSION}/esbuild.wasm`
       });
+    } catch (err) {
+      console.log(err);
+    }
 
+    try {
       // Compile the code using esbuild-wasm
       const result = await esbuild.build({
-        entryPoints: ["index.js"],
+        entryPoints: [entryPoint],
         bundle: true,
         write: false,
         minify: true,
         outdir: "/",
-        plugins: [unpkgPathPlugin(), unpkgFetchPlugin(rawCode, "index.js")],
+        plugins: [unpkgPathPlugin(), unpkgFetchPlugin(rawCode, entryPoint)],
         metafile: true,
         allowOverwrite: true
       });
@@ -162,4 +166,4 @@ function createJavaScriptCompiler() {
   return new Tool<typeof paramsSchema, z.ZodType<any, any>>(paramsSchema, name, description, execute).tool;
 }
 
-export { createJavaScriptCompiler };
+export { createEsbuilder };
diff --git a/example/app/api/chat/route.ts b/example/app/api/chat/route.ts
@@ -20,6 +20,10 @@ const functions: ChatCompletionFunctions[] = [
           rawCode: {
             type: 'string',
             description: 'The raw code to be compiled. This can include JavaScript, TypeScript, or JSX code.'
+          },
+          entryPoint: {
+            type: 'string',
+            description: 'The file to be compiled, for javascript the default is index.js. For jsx use index.jsx. For tsx use index.tsx. For ts use index.ts.'
           }
         },
         required: ['rawCode']

diff --git a/example/app/page.tsx b/example/app/page.tsx
@@ -11,9 +11,9 @@ import remarkGfm from "remark-gfm";
 import Textarea from "react-textarea-autosize";
 import { Collapse } from "./collapse";
 import { LoadingCircle, SendIcon } from "./icons";
-import { createJavaScriptCompiler } from "../../dist/esm/esbuild";
+import { createEsbuilder } from "../../dist/esm/esbuild";
 
-const [compiler] = createJavaScriptCompiler();
+const [esbuild] = createEsbuilder();
 
 const examples = [
   "Compile and run a TypeScript file that creates an interactive to-do list with add, remove, and toggle completion functionalities."
@@ -34,9 +34,9 @@ export default function Chat() {
     }
 
     let result;
+    let entryPoint = parsedFunctionCallArguments.entryPoint || "index.js";
 
-    const compiledResult = compiler({ rawCode: parsedFunctionCallArguments.rawCode });
-    console.log(compiledResult);
+    const compiledResult = esbuild({ rawCode: parsedFunctionCallArguments.rawCode, entryPoint  });
     result = JSON.stringify(compiledResult);
 
     console.log(result);