Merge commit

CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.6.7](https://github.com/codesandbox/sandpack/compare/v2.6.6...v2.6.7) (2023-05-26)
+
+
+### Bug Fixes
+
+* **client:** avoid concurrent compile step and init ([#946](https://github.com/codesandbox/sandpack/issues/946)) ([98a20e9](https://github.com/codesandbox/sandpack/commit/98a20e92ebb3aecb7ef23f18a5d3cb76f716b0a4))
+* **node:** remove --force option from all Sandpack Vite templates ([#947](https://github.com/codesandbox/sandpack/issues/947)) ([4d1b576](https://github.com/codesandbox/sandpack/commit/4d1b576adaa607e460b17a44f6d2b4c2349a2648))
+
+
+
+
+
 ## [2.6.6](https://github.com/codesandbox/sandpack/compare/v2.6.5...v2.6.6) (2023-05-22)
 
 

lerna.json

@@ -21,5 +21,5 @@
       "message": "chore: [skip ci] bump packages"
     }
   },
-  "version": "2.6.6"
+  "version": "2.6.7"
 }

sandpack-client/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.6.7](https://github.com/codesandbox/sandpack/compare/v2.6.6...v2.6.7) (2023-05-26)
+
+
+### Bug Fixes
+
+* **client:** avoid concurrent compile step and init ([#946](https://github.com/codesandbox/sandpack/issues/946)) ([98a20e9](https://github.com/codesandbox/sandpack/commit/98a20e92ebb3aecb7ef23f18a5d3cb76f716b0a4))
+* **node:** remove --force option from all Sandpack Vite templates ([#947](https://github.com/codesandbox/sandpack/issues/947)) ([4d1b576](https://github.com/codesandbox/sandpack/commit/4d1b576adaa607e460b17a44f6d2b4c2349a2648))
+
+
+
+
+
 ## [2.6.6](https://github.com/codesandbox/sandpack/compare/v2.6.5...v2.6.6) (2023-05-22)
 
 

sandpack-client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codesandbox/sandpack-client",
-  "version": "2.6.6",
+  "version": "2.6.7",
   "description": "",
   "keywords": [],
   "repository": {

sandpack-client/src/clients/base.ts

@@ -1,5 +1,6 @@
 import { dequal as deepEqual } from "dequal";
 
+import type { ClientStatus } from "..";
 import type {
   ClientOptions,
   SandboxSetup,
@@ -20,6 +21,7 @@ export class SandpackClient {
    */
   iframe!: HTMLIFrameElement;
   iframeSelector: string | HTMLIFrameElement;
+  status: ClientStatus = "idle";
 
   constructor(
     iframeSelector: string | HTMLIFrameElement,

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

@@ -69,6 +69,9 @@ export class SandpackNode extends SandpackClient {
       iframe: this.emulatorIframe,
       runtimeUrl: this.options.bundlerURL,
     });
+
+    // Trigger initial compile
+    this.updateSandbox(sandboxInfo);
   }
 
   // Initialize nodebox, should only ever be called once
@@ -88,6 +91,7 @@ export class SandpackNode extends SandpackClient {
   private async compile(files: FilesMap): Promise<void> {
     try {
       // 1. Init
+      this.status = "initializing";
       this.dispatch({ type: "start", firstLoad: true });
       if (!this._initPromise) {
         this._initPromise = this._init(files);
@@ -154,6 +158,8 @@ export class SandpackNode extends SandpackClient {
           },
         });
 
+        this.status = "installing-dependencies";
+
         return;
       }
 
@@ -228,6 +234,7 @@ export class SandpackNode extends SandpackClient {
    * consumer that the bundler is ready without any error
    */
   private dispatchDoneMessage(): void {
+    this.status = "done";
     this.dispatch({ type: "done", compilatonError: false });
 
     if (this.iframePreviewUrl) {
@@ -356,27 +363,33 @@ export class SandpackNode extends SandpackClient {
   /**
    * PUBLIC Methods
    */
-
   public async restartShellProcess(): Promise<void> {
     if (this.emulatorShellProcess && this.emulatorCommand) {
       // 1. Set the loading state and clean the URL
       this.dispatch({ type: "start", firstLoad: true });
+      this.status = "initializing";
 
       // 2. Exit shell
       await this.emulatorShellProcess.kill();
       this.iframe?.removeAttribute("attr");
 
+      this.emulator.fs.rm("/node_modules/.vite", {
+        recursive: true,
+        force: true,
+      });
+
       // 3 Run command again
       await this.compile(Object.fromEntries(this._modulesCache));
     }
   }
 
-  public updateSandbox(setup: SandboxSetup): any {
+  public updateSandbox(setup: SandboxSetup): void {
     const modules = fromBundlerFilesToFS(setup.files);
 
     /**
      * Update file changes
      */
+
     if (this.emulatorShellProcess?.state === "running") {
       Object.entries(modules).forEach(([key, value]) => {
         if (
@@ -400,7 +413,11 @@ export class SandpackNode extends SandpackClient {
       type: "compile",
     });
 
-    // Add modules to cache, this will ensure uniqueness changes
+    /**
+     * Add modules to cache, this will ensure uniqueness changes
+     *
+     * Keep it after the compile action, in order to update the cache at the right moment
+     */
     Object.entries(modules).forEach(([key, value]) => {
       this._modulesCache.set(key, writeBuffer(value));
     });

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

@@ -6,7 +6,6 @@ import { createError } from "../..";
 import type {
   BundlerState,
   ClientOptions,
-  ClientStatus,
   ListenerFunction,
   Modules,
   SandboxSetup,
@@ -40,7 +39,6 @@ export class SandpackRuntime extends SandpackClient {
   bundlerURL: string;
   bundlerState?: BundlerState;
   errors: SandpackError[];
-  status: ClientStatus;
 
   selector!: string;
   element: Element;
@@ -144,6 +142,10 @@ export class SandpackRuntime extends SandpackClient {
             }
             break;
           }
+          case "done": {
+            this.status = "done";
+            break;
+          }
           case "state": {
             this.bundlerState = mes.state;
             break;

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

@@ -31,6 +31,8 @@ export class SandpackStatic extends SandpackClient {
   ) {
     super(selector, sandboxSetup, options);
 
+    this.status = "initializing";
+
     this.emitter = new EventEmitter();
     this.previewController = new PreviewController({
       baseUrl:
@@ -160,6 +162,7 @@ export class SandpackStatic extends SandpackClient {
     const previewUrl = await this.previewController.initPreview();
     this.iframe.setAttribute("src", previewUrl);
 
+    this.status = "done";
     this.dispatch({ type: "done", compilatonError: false });
     this.dispatch({
       type: "urlchange",

sandpack-client/src/types.ts

@@ -165,14 +165,6 @@ export interface BundlerState {
   transpiledModules: Record<string, TranspiledModule>;
 }
 
-export type ClientStatus =
-  | "initializing"
-  | "installing-dependencies"
-  | "transpiling"
-  | "evaluating"
-  | "running-tests"
-  | "idle";
-
 export type SandpackMessage = SandpackRuntimeMessage | SandpackNodeMessage;
 
 export type ListenerFunction = (msg: SandpackMessage) => void;
@@ -203,6 +195,15 @@ export interface SandpackErrorMessage {
   };
 }
 
+export type ClientStatus =
+  | "initializing"
+  | "installing-dependencies"
+  | "transpiling"
+  | "evaluating"
+  | "running-tests"
+  | "idle"
+  | "done";
+
 export type SandpackMessageConsoleMethods =
   | "log"
   | "debug"

sandpack-react/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.6.7](https://github.com/codesandbox/sandpack/compare/v2.6.6...v2.6.7) (2023-05-26)
+
+
+### Bug Fixes
+
+* **client:** avoid concurrent compile step and init ([#946](https://github.com/codesandbox/sandpack/issues/946)) ([98a20e9](https://github.com/codesandbox/sandpack/commit/98a20e92ebb3aecb7ef23f18a5d3cb76f716b0a4))
+* **node:** remove --force option from all Sandpack Vite templates ([#947](https://github.com/codesandbox/sandpack/issues/947)) ([4d1b576](https://github.com/codesandbox/sandpack/commit/4d1b576adaa607e460b17a44f6d2b4c2349a2648))
+
+
+
+
+
 ## [2.6.6](https://github.com/codesandbox/sandpack/compare/v2.6.5...v2.6.6) (2023-05-22)
 
 **Note:** Version bump only for package @codesandbox/sandpack-react

sandpack-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codesandbox/sandpack-react",
-  "version": "2.6.6",
+  "version": "2.6.7",
   "description": "",
   "keywords": [],
   "repository": {
@@ -59,7 +59,7 @@
     "@codemirror/language": "^6.3.2",
     "@codemirror/state": "^6.2.0",
     "@codemirror/view": "^6.7.1",
-    "@codesandbox/sandpack-client": "^2.6.6",
+    "@codesandbox/sandpack-client": "^2.6.7",
     "@lezer/highlight": "^1.1.3",
     "@react-hook/intersection-observer": "^3.1.1",
     "@stitches/core": "^1.2.6",

sandpack-react/src/components/Preview/index.tsx

@@ -120,16 +120,12 @@ export const SandpackPreview = React.forwardRef<
     const [iframeComputedHeight, setComputedAutoHeight] = React.useState<
       number | null
     >(null);
-    const { status, errorScreenRegisteredRef, loadingScreenRegisteredRef } =
-      sandpack;
+    const { status } = sandpack;
     const { refresh } = useSandpackNavigation(clientId);
     const { restart } = useSandpackShell(clientId);
 
     const classNames = useClassNames();
 
-    errorScreenRegisteredRef.current = true;
-    loadingScreenRegisteredRef.current = true;
-
     React.useEffect(() => {
       const unsubscribe = listen((message: SandpackMessage) => {
         if (message.type === "resize") {

sandpack-react/src/contexts/utils/useClient.ts

@@ -55,8 +55,6 @@ export interface UseClientOperations {
   ) => UnsubscribeFunction;
   dispatchMessage: (message: SandpackMessage, clientId?: string) => void;
   lazyAnchorRef: React.RefObject<HTMLDivElement>;
-  loadingScreenRegisteredRef: React.MutableRefObject<boolean>;
-  errorScreenRegisteredRef: React.MutableRefObject<boolean>;
   unsubscribeClientListenersRef: React.MutableRefObject<
     Record<string, Record<string, UnsubscribeFunction>>
   >;
@@ -109,8 +107,6 @@ export const useClient: UseClient = (
     Record<string, Record<string, ListenerFunction>>
   >({ global: {} });
   const debounceHook = useRef<number | undefined>();
-  const loadingScreenRegisteredRef = useRef<boolean>(true);
-  const errorScreenRegisteredRef = useRef<boolean>(true);
   const prevEnvironment = useRef(filesState.environment);
 
   /**
@@ -165,8 +161,8 @@ export const useClient: UseClient = (
           skipEval: options.skipEval ?? false,
           logLevel: options.logLevel,
           showOpenInCodeSandbox: false,
-          showErrorScreen: errorScreenRegisteredRef.current,
-          showLoadingScreen: loadingScreenRegisteredRef.current,
+          showErrorScreen: true,
+          showLoadingScreen: false,
           reactDevTools: state.reactDevTools,
           customNpmRegistries: customSetup?.npmRegistries,
           teamId: teamId,
@@ -489,10 +485,15 @@ export const useClient: UseClient = (
 
       if (recompileMode === "immediate") {
         Object.values(clients.current).forEach((client) => {
-          client.updateSandbox({
-            files: filesState.files,
-            template: filesState.environment,
-          });
+          /**
+           * Avoid concurrency
+           */
+          if (client.status === "done") {
+            client.updateSandbox({
+              files: filesState.files,
+              template: filesState.environment,
+            });
+          }
         });
       }
 
@@ -502,10 +503,15 @@ export const useClient: UseClient = (
         window.clearTimeout(debounceHook.current);
         debounceHook.current = window.setTimeout(() => {
           Object.values(clients.current).forEach((client) => {
-            client.updateSandbox({
-              files: filesState.files,
-              template: filesState.environment,
-            });
+            /**
+             * Avoid concurrency
+             */
+            if (client.status === "done") {
+              client.updateSandbox({
+                files: filesState.files,
+                template: filesState.environment,
+              });
+            }
           });
         }, recompileDelay);
       }
@@ -567,8 +573,6 @@ export const useClient: UseClient = (
       registerReactDevTools,
       addListener,
       dispatchMessage,
-      loadingScreenRegisteredRef,
-      errorScreenRegisteredRef,
       lazyAnchorRef,
       unsubscribeClientListenersRef: unsubscribeClientListeners,
       queuedListenersRef: queuedListeners,

sandpack-react/src/hooks/useErrorMessage.ts

@@ -1,5 +1,3 @@
-import * as React from "react";
-
 import { useSandpack } from "./useSandpack";
 
 /**
@@ -9,10 +7,5 @@ export const useErrorMessage = (): string | null => {
   const { sandpack } = useSandpack();
   const { error } = sandpack;
 
-  React.useEffect(() => {
-    sandpack.errorScreenRegisteredRef.current = true;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   return error?.message ?? null;
 };

sandpack-react/src/hooks/useLoadingOverlayState.ts

@@ -25,8 +25,6 @@ export const useLoadingOverlayState = (
    * Sandpack listener
    */
   React.useEffect(() => {
-    sandpack.loadingScreenRegisteredRef.current = true;
-
     const unsubscribe = listen((message) => {
       if (message.type === "start" && message.firstLoad === true) {
         setState("LOADING");

sandpack-react/src/templates/node/vite-react-ts.ts

@@ -88,7 +88,7 @@ root.render(
       code: JSON.stringify(
         {
           scripts: {
-            dev: "vite --force",
+            dev: "vite",
             build: "tsc && vite build",
             preview: "vite preview",
           },