From 877222ef649ed741534709c834053eeefce70948 Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Tue, 28 Feb 2023 15:53:03 +0000
Subject: [PATCH] fix(nodebox): consider new files from Sandpack (#778)

---
 .codesandbox/ci.json                      |  2 +-
 sandpack-client/src/clients/node/index.ts |  5 +++-
 sandpack-react/package.json               |  3 ++-
 sandpack-react/src/Playground.stories.tsx | 28 +++++++++--------------
 sandpack-themes/package.json              |  3 ++-
 5 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
index fabf52bc2..8678701e7 100644
--- a/.codesandbox/ci.json
+++ b/.codesandbox/ci.json
@@ -1,5 +1,5 @@
 {
   "packages": ["sandpack-client", "sandpack-react"],
-  "sandboxes": ["sowx8r", "909l3f"],
+  "sandboxes": ["sowx8r"],
   "node": "16"
 }
diff --git a/sandpack-client/src/clients/node/index.ts b/sandpack-client/src/clients/node/index.ts
index df9988157..a426e17a2 100644
--- a/sandpack-client/src/clients/node/index.ts
+++ b/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);
         }
       });
diff --git a/sandpack-react/package.json b/sandpack-react/package.json
index 1b0ddfb6d..a3f206810 100644
--- a/sandpack-react/package.json
+++ b/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",
diff --git a/sandpack-react/src/Playground.stories.tsx b/sandpack-react/src/Playground.stories.tsx
index 19a211578..127f57d64 100644
--- a/sandpack-react/src/Playground.stories.tsx
+++ b/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>
     </>
   );
 };
diff --git a/sandpack-themes/package.json b/sandpack-themes/package.json
index bb724c965..9cdbd184a 100644
--- a/sandpack-themes/package.json
+++ b/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"
   },