feat: codesandbox sdk support

.codesandbox/tasks.json

@@ -63,6 +63,10 @@
         "pr-link": "direct"
       }
     },
+    "dev:nextjs": {
+      "name": "Dev: Nextjs example",
+      "command": "yarn dev:nextjs"
+    },
     "dev:website-landing": {
       "name": "Dev: Website landing",
       "command": "yarn dev:landing"

.prettierignore

@@ -1,23 +1,9 @@
-!/standalone-packages/vscode/src/vs/codesandbox/
-!/standalone-packages/vscode/src/vs/codesandbox/*
-!/standalone-packages/vscode/src/vs/codesandbox/**/*.ts
-!/standalone-packages/vscode/src/vs/codesandbox/**/*.*
-
 dist/
 lib/
-packages/executors/.rts2_cache_cjs
-packages/executors/.rts2_cache_es
-packages/executors/.rts2_cache_umd
-packages/homepage/.cache
-packages/homepage/public
-static/
-/standalone-packages/*
-www/
+
 
 # Our server side code changes html, we don't want to unintentionally break this by formatting
 *.html
 
 .drone.yml
 
-!/standalone-packages/react-sandpack
-!/standalone-packages/sandpack

examples/nextjs-app-dir/app/api/sandbox/[id]/route.ts

@@ -0,0 +1,22 @@
+import { CodeSandbox } from "@codesandbox/sdk";
+
+type Params = { params: { id: string } };
+
+const apiKey = process.env.CSB_API_TOKEN as string;
+const sdk = new CodeSandbox(apiKey, {});
+
+export const GET = async (_req: Request, { params }: Params) => {
+  const templateId = params.id;
+  const data = await sdk.sandbox.start(templateId);
+
+  return new Response(JSON.stringify(data), { status: 200 });
+};
+
+export const POST = async (_req: Request, { params }: Params) => {
+  const templateId = params.id;
+
+  const sandbox = await sdk.sandbox.create({ template: templateId });
+  const data = await sdk.sandbox.start(sandbox.id);
+
+  return new Response(JSON.stringify(data), { status: 200 });
+};

examples/nextjs-app-dir/components/sandpack-examples.tsx

@@ -1,16 +1,52 @@
-import { Sandpack } from "@codesandbox/sandpack-react";
-import { githubLight, sandpackDark } from "@codesandbox/sandpack-themes";
+"use client";
+import {
+  Sandpack,
+  SandpackCodeEditor,
+  SandpackFileExplorer,
+  SandpackLayout,
+  SandpackPreview,
+  SandpackProvider,
+} from "@codesandbox/sandpack-react";
+import { useState } from "react";
+
+const TEMPLATES = ["vite-react-ts", "nextjs", "rust", "python", "node"];
+
 /**
  * The only reason this is a separate import, is so
  * we don't need to make the full page 'use client', but only this copmponent.
  */
 export const SandpackExamples = () => {
+  const [state, setState] = useState(
+    window.localStorage["template"] || TEMPLATES[0]
+  );
+
   return (
     <>
-      <Sandpack />
-      <Sandpack theme="dark" />
-      <Sandpack theme={githubLight} template="nextjs" />
-      <Sandpack options={{ readOnly: true }} theme={sandpackDark} />
+      <select
+        value={state}
+        onChange={(event) => {
+          window.localStorage["template"] = event.target.value;
+          setState(event.target.value);
+        }}
+      >
+        {TEMPLATES.map((item) => (
+          <option value={item}>{item}</option>
+        ))}
+      </select>
+
+      <SandpackProvider
+        key={state}
+        template={state}
+        options={{
+          vmEnvironmentApiUrl: (id) => `/api/sandbox/${id}`,
+        }}
+      >
+        <SandpackLayout style={{ "--sp-layout-height": "500px" }}>
+          <SandpackFileExplorer />
+          <SandpackCodeEditor closableTabs />
+          <SandpackPreview />
+        </SandpackLayout>
+      </SandpackProvider>
     </>
   );
 };

examples/nextjs-app-dir/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

lerna.json

@@ -1,5 +1,10 @@
 {
-  "packages": ["sandpack-client", "sandpack-react"],
+  "packages": [
+    "sandpack-client",
+    "sandpack-react",
+    "playgorund",
+    "sandpack-environments"
+  ],
   "npmClient": "yarn",
   "command": {
     "version": {

package.json

@@ -3,14 +3,19 @@
   "version": "1.0.0",
   "private": true,
   "workspaces": [
+    "playground",
     "sandpack-client",
     "sandpack-react",
     "sandpack-themes",
+    "sandpack-environments",
+    "examples/nextjs-app-dir",
     "website/*"
   ],
   "nohoist": [
     "website/docs/**",
-    "**/html-minifier-terser"
+    "**/html-minifier-terser",
+    "**/static-browser-server",
+    "**/static-browser-server/**"
   ],
   "description": "",
   "scripts": {
@@ -26,7 +31,8 @@
     "dev:docs": "yarn workspace sandpack-docs dev",
     "dev:react": "turbo run dev --filter=@codesandbox/sandpack-react --filter=@codesandbox/sandpack-client",
     "dev:landing": "yarn workspace sandpack-landing dev -p 3001",
-    "dev:theme": "yarn workspace sandpack-theme dev -p 3002"
+    "dev:theme": "yarn workspace sandpack-theme dev -p 3002",
+    "dev:nextjs": "yarn workspace nextjs-app-dir dev"
   },
   "repository": {
     "type": "git",
@@ -38,11 +44,11 @@
     "@babel/preset-env": "^7.16.5",
     "@babel/preset-react": "^7.16.5",
     "@babel/preset-typescript": "^7.16.5",
-    "@rollup/plugin-commonjs": "^24.0.0",
-    "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-replace": "^5.0.2",
-    "@rollup/plugin-terser": "^0.4.0",
-    "@rollup/plugin-typescript": "^10.0.1",
+    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-replace": "^6.0.2",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.1.2",
     "@types/jest": "^27.4.0",
     "@typescript-eslint/eslint-plugin": "^6.9.0",
     "@typescript-eslint/parser": "^6.9.0",
@@ -61,7 +67,7 @@
     "lint-staged": "^10.5.4",
     "prettier": "^2.2.1",
     "react-test-renderer": "^18.1.0",
-    "rollup": "^3.9.1",
+    "rollup": "^4.39.0",
     "rollup-plugin-string": "^3.0.0",
     "turbo": "^1.5.5"
   },

playground/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

playground/README.md

@@ -0,0 +1,54 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default tseslint.config({
+  extends: [
+    // Remove ...tseslint.configs.recommended and replace with this
+    ...tseslint.configs.recommendedTypeChecked,
+    // Alternatively, use this for stricter rules
+    ...tseslint.configs.strictTypeChecked,
+    // Optionally, add this for stylistic rules
+    ...tseslint.configs.stylisticTypeChecked,
+  ],
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default tseslint.config({
+  plugins: {
+    // Add the react-x and react-dom plugins
+    'react-x': reactX,
+    'react-dom': reactDom,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended typescript rules
+    ...reactX.configs['recommended-typescript'].rules,
+    ...reactDom.configs.recommended.rules,
+  },
+})
+```

playground/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

playground/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@codesandbox/playground",
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "dev:server": "vite-node server/index.ts",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@codesandbox/sandpack-react": "workspace:*",
+    "express": "^5.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router": "^7.5.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "globals": "^15.15.0",
+    "typescript": "~5.7.2",
+    "vite": "^6.2.0",
+    "vite-node": "^3.1.1"
+  }
+}