Merge pull request #120 from codesandbox/new-version-fixes-2

Improved template builder help and keep active fix

Author: christianalfoni

README.md

@@ -27,53 +27,20 @@ Create an API token by going to https://codesandbox.io/t/api, and clicking on th
 ```javascript
 import { CodeSandbox } from "@codesandbox/sdk";
 
-// Create the client with your token
-const sdk = new CodeSandbox(token);
+const sdk = new CodeSandbox(process.env.CSB_API_KEY);
+const sandbox = await sdk.sandboxes.create();
+const client = await sandbox.connect();
 
-// This creates a new sandbox by forking our default template sandbox.
-// You can also pass in other template ids, or create your own template to fork from.
-const sandbox = await sdk.sandbox.create();
+const output = await client.commands.run("echo 'Hello World'");
 
-// You can run JS code directly
-await sandbox.shells.js.run("console.log(1+1)");
-// Or Python code (if it's installed in the template)
-await sandbox.shells.python.run("print(1+1)");
-
-// Or anything else
-await sandbox.shells.run("echo 'Hello, world!'");
-
-// We have a FS API to interact with the filesystem
-await sandbox.fs.writeTextFile("./hello.txt", "world");
-
-// And you can clone sandboxes! This does not only clone the filesystem, processes that are running in the original sandbox will also be cloned!
-const sandbox2 = await sandbox.fork();
-
-// Check that the file is still there
-await sandbox2.fs.readTextFile("./hello.txt");
-
-// You can also get the opened ports, with the URL to access those
-console.log(sandbox2.ports.getOpenedPorts());
-
-// Getting metrics...
-const metrics = await sandbox2.getMetrics();
-console.log(
-  `Memory: ${metrics.memory.usedKiB} KiB / ${metrics.memory.totalKiB} KiB`
-);
-console.log(`CPU: ${(metrics.cpu.used / metrics.cpu.cores) * 100}%`);
-
-// Finally, you can hibernate a sandbox. This will snapshot the sandbox and stop it. Next time you start the sandbox, it will continue where it left off, as we created a memory snapshot.
-await sandbox.hibernate();
-await sandbox2.hibernate();
-
-// Open the sandbox again
-const resumedSandbox = await sdk.sandbox.open(sandbox.id);
+console.log(output); // Hello World
 ```
 
 ## CodeSandbox Integration
 
 This SDK uses the API token from your workspace in CodeSandbox to authenticate and create sandboxes. Because of this, the sandboxes will be created inside your workspace, and the resources will be billed to your workspace.
 
-You could, for example, create a private template in your workspace that has all the dependencies you need (even running servers), and then use that template to fork sandboxes from. This way, you can control the environment that the sandboxes run in.
+Build your own template that has all the dependencies you need (even running servers), and then use that template to create sandboxes from. This way, you can control the environment that the sandboxes run in.
 
 ## Example Use Cases
 
@@ -83,6 +50,6 @@ Code interpretation: Run code in a sandbox to interpret it. This way, you can ru
 
 Development environments: Create a sandbox for each developer, and run their code in the sandbox. This way, you can run multiple development environments in parallel without them interfering with each other.
 
-AI Agents: Create a sandbox for each AI agent, and run the agent in the sandbox. This way, you can run multiple agents in parallel without them interfering with each other. Using the forking mechanism, you can also A/B test different agents.
+AI Agents: Create a sandbox for each AI agent, and run the agent in the sandbox. This way, you can run multiple agents in parallel without them interfering with each other.
 
 CI/CD: Run tests inside a sandbox, and hibernate the sandbox when the tests are done. This way, you can quickly start the sandbox again when you need to run the tests again or evaluate the results.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codesandbox/sdk",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "The CodeSandbox SDK",
   "author": "CodeSandbox",
   "license": "MIT",

src/SandboxClient/index.ts

@@ -12,6 +12,7 @@ import { Hosts } from "./hosts";
 import { IAgentClient } from "../node/agent-client-interface";
 import { setup } from "../pitcher-protocol";
 import { Barrier } from "../utils/barrier";
+import { clear } from "console";
 
 export * from "./filesystem";
 export * from "./ports";
@@ -126,6 +127,30 @@ export class SandboxClient {
     this.hosts = new Hosts(this.agentClient.sandboxId, hostToken);
     this.interpreters = new Interpreters(this.disposable, this.commands);
     this.disposable.onWillDispose(() => this.agentClient.dispose());
+
+    this.disposable.onWillDispose(() => {
+      if (this.keepAliveInterval) {
+        clearInterval(this.keepAliveInterval);
+        this.keepAliveInterval = null;
+      }
+    });
+
+    this.agentClient.onStateChange((state) => {
+      if (!this.shouldKeepAlive) {
+        return;
+      }
+
+      // We can not call `keepActiveWhileConnected` here, because it would
+      // reset the interval, which would turn off the "shouldKeepAlive" flag
+      if (state === "DISCONNECTED" || state === "HIBERNATED") {
+        if (this.keepAliveInterval) {
+          clearInterval(this.keepAliveInterval);
+        }
+        this.keepAliveInterval = null;
+      } else if (state === "CONNECTED") {
+        this.keepActiveWhileConnected(true);
+      }
+    });
   }
 
   /**
@@ -219,6 +244,11 @@ export class SandboxClient {
    * reconnect to the sandbox.
    */
   public disconnect() {
+    if (this.keepAliveInterval) {
+      clearInterval(this.keepAliveInterval);
+      this.keepAliveInterval = null;
+    }
+
     return this.agentClient.disconnect();
   }
 
@@ -230,22 +260,19 @@ export class SandboxClient {
   }
 
   private keepAliveInterval: NodeJS.Timeout | null = null;
+  private shouldKeepAlive = false;
   /**
    * If enabled, we will keep the sandbox from hibernating as long as the SDK is connected to it.
    */
   public keepActiveWhileConnected(enabled: boolean) {
+    // Used to manage the interval when disconnects happen
+    this.shouldKeepAlive = enabled;
+
     if (enabled) {
       if (!this.keepAliveInterval) {
         this.keepAliveInterval = setInterval(() => {
           this.agentClient.system.update();
         }, 1000 * 30);
-
-        this.disposable.onWillDispose(() => {
-          if (this.keepAliveInterval) {
-            clearInterval(this.keepAliveInterval);
-            this.keepAliveInterval = null;
-          }
-        });
       }
     } else {
       if (this.keepAliveInterval) {

src/bin/commands/build.ts

@@ -377,12 +377,21 @@ export const buildCommand: yargs.CommandModule<
               );
             })
           );
-          spinner.succeed(`\n${spinnerMessages.join("\n")}`);
+          spinner.start(`\n${spinnerMessages.join("\n")}`);
         } else {
-          spinner.succeed(`\n${spinnerMessages.join("\n")}`);
+          spinner.start(`\n${spinnerMessages.join("\n")}`);
         }
       }
 
+      spinner.start(
+        `\n${spinnerMessages.join(
+          "\n"
+        )}\n\nCreating template reference and example...`
+      );
+
+      let referenceString;
+      let id;
+
       if (alias) {
         await vmAssignTagAlias({
           client: apiClient,
@@ -395,13 +404,26 @@ export const buildCommand: yargs.CommandModule<
           },
         });
 
-        console.log(
-          `Alias ${alias.namespace}@${alias.alias} updated to: ${templateData.tag}`
-        );
-        process.exit(0);
+        id = `${alias.namespace}@${alias.alias}`;
+        referenceString = `Alias ${id} now referencing: ${templateData.tag}`;
+      } else {
+        id = templateData.tag;
+        referenceString = `Template created with tag: ${templateData.tag}`;
       }
 
-      console.log("Template created: " + templateData.tag);
+      const sandbox = await sdk.sandboxes.create({
+        id,
+      });
+
+      spinner.succeed(
+        `\n${spinnerMessages.join("\n")}\n\n${referenceString}
+
+sdk.sandboxes.create({
+  id: "${id}"
+})
+  
+Verify Sandbox at: https://codesandbox.io/s/${sandbox.id}\n\n`
+      );
 
       process.exit(0);
     } catch (error) {