fix(editorstate): watch changes on files instead of each method (#333)

codesandbox · Jan 26, 2022 · 75ebadb · 75ebadb
1 parent ea4dfeb
commit 75ebadb
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 30 deletions.
diff --git a/.codesandbox/workspace.json b/.codesandbox/workspace.json
@@ -2,11 +2,6 @@
   "default": {
     "name": "Default",
     "type": "SIDEKICK",
-    "items": [
-      { "type": "PREVIEW", "port": "3000" },
-      { "type": "PREVIEW", "port": "3001" },
-      { "type": "PREVIEW", "port": "3002" },
-      { "type": "PREVIEW", "port": "6006" }
-    ]
+    "items": [{ "type": "PREVIEW", "port": "6006" }]
   }
 }
diff --git a/sandpack-react/package.json b/sandpack-react/package.json
@@ -26,11 +26,7 @@
     "typecheck": "tsc",
     "chromatic": "chromatic --project-token CHROMATIC_PROJECT_TOKEN"
   },
-  "files": [
-    "dist",
-    "package.json",
-    "README.md"
-  ],
+  "files": ["dist", "package.json", "README.md"],
   "dependencies": {
     "@code-hike/classer": "^0.0.0-aa6efee",
     "@codemirror/closebrackets": "^0.19.0",
@@ -51,7 +47,8 @@
     "codesandbox-import-util-types": "^2.2.3",
     "codesandbox-import-utils": "^2.2.3",
     "react-devtools-inline": "4.4.0",
-    "react-is": "^17.0.2"
+    "react-is": "^17.0.2",
+    "lodash.isequal": "^4.5.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.3",
@@ -62,6 +59,7 @@
     "@storybook/react": "^6.1.9",
     "@types/fs-extra": "^5.0.4",
     "@types/glob": "^5.0.35",
+    "@types/lodash.isequal": "^4.5.2",
     "@types/node": "^9.4.6",
     "@types/react": "^17.0.2",
     "autoprefixer": "^10.2.4",

diff --git a/sandpack-react/src/contexts/sandpackContext.tsx b/sandpack-react/src/contexts/sandpackContext.tsx
@@ -12,6 +12,7 @@ import {
   extractErrorDetails,
 } from "@codesandbox/sandpack-client";
 import * as React from "react";
+import isEqual from "lodash.isequal";
 
 import type {
   SandpackContext,
@@ -311,24 +312,31 @@ class SandpackProvider extends React.PureComponent<
    * @hidden
    */
   componentDidUpdate(prevProps: SandpackProviderProps): void {
+    /**
+     * Watch the changes on the initMode prop
+     */
     if (prevProps.initMode !== this.props.initMode && this.props.initMode) {
       this.setState(
         { initMode: this.props.initMode },
         this.initializeSandpackIframe
       );
     }
 
+    /**
+     * Custom setup derived from props
+     */
+    const { activePath, openPaths, files, environment } =
+      getSandpackStateFromProps(this.props);
+
+    /**
+     * What the changes on the customSetup props
+     */
     if (
       prevProps.template !== this.props.template ||
       prevProps.activePath !== this.props.activePath ||
-      JSON.stringify(prevProps.openPaths) !==
-        JSON.stringify(this.props.openPaths) ||
-      JSON.stringify(prevProps.customSetup) !==
-        JSON.stringify(this.props.customSetup)
+      !isEqual(prevProps.openPaths, this.props.openPaths) ||
+      !isEqual(prevProps.customSetup, this.props.customSetup)
     ) {
-      const { activePath, openPaths, files, environment } =
-        getSandpackStateFromProps(this.props);
-
       /* eslint-disable react/no-did-update-set-state */
       this.setState({ activePath, openPaths, files, environment });
 
@@ -343,6 +351,12 @@ class SandpackProvider extends React.PureComponent<
         })
       );
     }
+
+    /**
+     * Watch the changes on editorState
+     */
+    const editorState = isEqual(files, this.state.files) ? "pristine" : "dirty";
+    this.setState({ editorState });
   }
 
   /**
@@ -475,8 +489,8 @@ class SandpackProvider extends React.PureComponent<
   /**
    * @hidden
    */
-  setActiveFile = (path: string): void => {
-    this.setState({ activePath: path, editorState: "dirty" });
+  setActiveFile = (activePath: string): void => {
+    this.setState({ activePath });
   };
 
   /**
@@ -491,7 +505,6 @@ class SandpackProvider extends React.PureComponent<
       return {
         activePath: path,
         openPaths: newPaths,
-        editorState: "dirty",
       };
     });
   };
@@ -516,7 +529,6 @@ class SandpackProvider extends React.PureComponent<
               : openPaths[indexOfRemovedPath - 1]
             : activePath,
         openPaths: newPaths,
-        editorState: "dirty",
       };
     });
   };
@@ -541,7 +553,6 @@ class SandpackProvider extends React.PureComponent<
       return {
         openPaths: newPaths,
         files: newFiles,
-        editorState: "dirty",
       };
     });
     this.updateClients();

diff --git a/sandpack-react/src/types.ts b/sandpack-react/src/types.ts
@@ -31,6 +31,12 @@ export interface SandpackState {
   openPaths: string[];
   activePath: string;
   startRoute?: string;
+
+  /**
+   * Returns the current state of the editor, meaning that any
+   * changes from the original `files` must return a `dirty` value;
+   * otherwise, it'll return `pristine`
+   */
   editorState: EditorState;
   error: SandpackError | null;
   files: SandpackBundlerFiles;
@@ -52,14 +58,18 @@ export interface SandpackState {
   resetAllFiles: () => void;
   registerReactDevTools: (value: ReactDevToolsMode) => void;
 
-  // Element refs
-  // Different components inside the SandpackProvider might register certain elements of interest for sandpack
-  // eg: lazy anchor - if no component registers this, then the sandpack runs on mount, without lazy mode
+  /**
+   * Element refs
+   * Different components inside the SandpackProvider might register certain elements of interest for sandpack
+   * eg: lazy anchor - if no component registers this, then the sandpack runs on mount, without lazy mode
+   */
   lazyAnchorRef: React.RefObject<HTMLDivElement>;
 
-  // eg: error screen - if no component registers this, the bundler needs to show the custom error screen
-  // When the value is boolean, we only care if the components have the responsibility to render the elements,
-  // we don't need the actual element reference
+  /**
+   * eg: error screen - if no component registers this, the bundler needs to show the custom error screen
+   * When the value is boolean, we only care if the components have the responsibility to render the elements,
+   * we don't need the actual element reference
+   */
   errorScreenRegisteredRef: React.MutableRefObject<boolean>;
   openInCSBRegisteredRef: React.MutableRefObject<boolean>;
   loadingScreenRegisteredRef: React.MutableRefObject<boolean>;
@@ -102,6 +112,7 @@ export interface SandpackSetup {
    * ```
    */
   dependencies?: Record<string, string>;
+
   /**
    * The entry file is the starting point of the bundle process.
    *