fix(nodebox): consider new files from Sandpack (#778)

.codesandbox/ci.json

@@ -1,5 +1,5 @@
 {
   "packages": ["sandpack-client", "sandpack-react"],
-  "sandboxes": ["sowx8r", "909l3f"],
+  "sandboxes": ["sowx8r"],
   "node": "16"
 }

sandpack-client/src/clients/node/index.ts

@@ -366,7 +366,10 @@ export class SandpackNode extends SandpackClient {
      */
     if (this.emulatorShellProcess?.state === "running") {
       Object.entries(modules).forEach(([key, value]) => {
-        if (Buffer.compare(value, this._modulesCache.get(key)) !== 0) {
+        if (
+          !this._modulesCache.get(key) ||
+          Buffer.compare(value, this._modulesCache.get(key)) !== 0
+        ) {
           this.emulator.fs.writeFile(key, value);
         }
       });

sandpack-react/package.json

@@ -20,7 +20,8 @@
     "prebuild": "yarn run clean",
     "test": "TEST_ENV=true jest . --transformIgnorePatterns \"node_modules/(?!@codemirror)/\" --modulePathIgnorePatterns \"e2e\"",
     "lint": "eslint '**/*.ts?(x)' --fix",
-    "build": "rollup -c",
+    "build": "rollup -c && yarn build:types",
+    "build:types": "tsc -p tsconfig.json",
     "build:publish": "yarn build",
     "start": "tsc -p tsconfig.esm.json --watch",
     "dev": "start-storybook -p 6006 --quiet",

sandpack-react/src/Playground.stories.tsx

@@ -1,31 +1,25 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import * as themes from "@codesandbox/sandpack-themes";
 import React from "react";
-
-import { Sandpack } from "./presets";
+import { SandpackProvider } from ".";
+import {
+  SandpackCodeEditor,
+  SandpackFileExplorer,
+  SandpackPreview,
+} from "./components";
 
 export default {
   title: "Intro/Playground",
 };
 
 export const Basic: React.FC = () => {
-  const [text, setText] = React.useState("world");
   return (
     <>
-      <input
-        defaultValue={text}
-        onChange={({ target }) => setText(target.value)}
-      />
-      <Sandpack
-        files={{
-          "App.js": `export default function App() {
-  return <h1>Hello ${text}</h1>
-}
-`,
-        }}
-        template="react"
-        theme={themes.sandpackDark}
-      />
+      <SandpackProvider template="nextjs" theme={themes.sandpackDark}>
+        <SandpackFileExplorer />
+        <SandpackCodeEditor />
+        <SandpackPreview />
+      </SandpackProvider>
     </>
   );
 };

sandpack-themes/package.json

@@ -16,7 +16,8 @@
   "scripts": {
     "clean": "rm -rf dist",
     "prebuild": "yarn run clean",
-    "build": "rollup -c",
+    "build": "rollup -c && yarn build:types",
+    "build:types": "tsc -p tsconfig.json",
     "build:publish": "yarn build",
     "typecheck": "tsc"
   },