From fea0349caba16da3f28cdfb84da27ecffc7f9b27 Mon Sep 17 00:00:00 2001
From: Yan Chen <48968912+chenyan-dfinity@users.noreply.github.com>
Date: Tue, 10 Sep 2024 19:12:10 -0700
Subject: [PATCH] put node files under /utils

---
 src/App.tsx               |  6 ++++--
 src/components/Editor.tsx |  3 ---
 src/webcontainer.ts       | 27 +++++++++++++++------------
 3 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 7fb9669a..6bdf620a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -256,8 +256,10 @@ export function App() {
       logger.log(`moc version ${MOC_VERSION}`);
       logger.log(`base library version ${baseInfo.version}`);
       await container.initFiles();
-      await container.run_cmd("npm", ["install"]);
-      await container.run_cmd("npm", ["run", "build"]);
+      await container.run_cmd("npm", ["install"], {
+        cwd: "utils",
+        output: false,
+      });
       //await container.run_cmd("node", ["uploadAsset.js", "dist"]);
       // fetch code after loading base library
       if (hasUrlParams) {
diff --git a/src/components/Editor.tsx b/src/components/Editor.tsx
index 585e3609..b63f89fe 100644
--- a/src/components/Editor.tsx
+++ b/src/components/Editor.tsx
@@ -177,12 +177,9 @@ export function Editor({
       try {
         const { files, env } = generateNonMotokoFilesToWebContainer(state);
         console.log(files);
-        await container.container!.fs.mkdir("user", { recursive: true });
         await container.container!.mount(files, { mountPoint: "user" });
         await container.run_cmd("npm", ["install"], { cwd: "user" });
         await container.run_cmd("npm", ["run", "build"], { cwd: "user", env });
-        const read = await container.container!.fs.readdir("/");
-        console.log(read);
       } catch (e) {
         logger.log(e.message);
       }
diff --git a/src/webcontainer.ts b/src/webcontainer.ts
index 74ec0ce2..54c89058 100644
--- a/src/webcontainer.ts
+++ b/src/webcontainer.ts
@@ -23,7 +23,7 @@ export class Container {
       import: "default",
       eager: true,
     });
-    const files: FileSystemTree = Object.entries(nodeFiles).reduce(
+    const utilsFiles: FileSystemTree = Object.entries(nodeFiles).reduce(
       (acc, [key, value]) => {
         const fileName = key.replace("./node/", "");
         acc[fileName] = {
@@ -35,26 +35,29 @@ export class Container {
       },
       {},
     );
-    files["etc"] = {
-      directory: {
-        hosts: {
-          file: {
-            contents: "127.0.0.1 mylocalhost.com",
+    const files: FileSystemTree = {
+      utils: {
+        directory: utilsFiles,
+      },
+      user: {
+        directory: {},
+      },
+      etc: {
+        directory: {
+          hosts: {
+            file: {
+              contents: "127.0.0.1 mylocalhost.com",
+            },
           },
         },
       },
     };
-    files["index.html"] = {
-      file: {
-        contents: "<p>Hello World</p>",
-      },
-    };
     await this.container!.mount(files);
   }
 
   async run_cmd(cmd: string, args: string[], options?: SpawnOptions) {
     await this.init();
-    this.terminal.writeln(`$ ${cmd} ${args.join(" ")}`);
+    this.terminal.writeln(`/${options?.cwd ?? ""}$ ${cmd} ${args.join(" ")}`);
     const installProcess = await this.container!.spawn(cmd, args, options);
     installProcess.output.pipeTo(
       new WritableStream({