Load files again upon deploy if specific props have changed (#46)

* Load files again upon deploy if specific props have changed

* Remove setState from componentDidUpdate and replace with class variable

* Compare props using lodash.isEqual and resolve promises first where necessary

* Replace return statements with else statements in componentDidUpdate

Author: kangweichan

.changeset/af5d2211/changes.json

@@ -0,0 +1,4 @@
+{
+  "releases": [{ "name": "react-codesandboxer", "type": "patch" }],
+  "dependents": []
+}

.changeset/af5d2211/changes.md

@@ -0,0 +1 @@
+- Load files again upon deploy if specific props have been changed

package.json

@@ -63,6 +63,8 @@
     "form-data": "^2.3.2",
     "html-webpack-plugin": "^3.2.0",
     "isomorphic-unfetch": "^2.0.0",
+    "lodash.isequal": "^4.5.0",
+    "lodash.pick": "^4.4.0",
     "lz-string": "^1.4.4",
     "meow": "^5.0.0",
     "mini-css-extract-plugin": "^0.4.0",

packages/react-codesandboxer/package.json

@@ -7,6 +7,8 @@
   "license": "MIT",
   "dependencies": {
     "codesandboxer": "^0.7.1",
+    "lodash.isequal": "^4.5.0",
+    "lodash.pick": "^4.4.0",
     "react-node-resolver": "^1.0.1"
   },
   "scripts": {

packages/react-codesandboxer/src/CodeSandboxer.js

@@ -1,6 +1,8 @@
 // @flow
 import React, { Component, type Node } from 'react';
 import NodeResolver from 'react-node-resolver';
+import isEqual from 'lodash.isequal';
+import pick from 'lodash.pick';
 
 import {
   fetchFiles,
@@ -96,6 +98,8 @@ export default class CodeSandboxDeployer extends Component<Props, State> {
     style: { display: 'inline-block' },
   };
 
+  shouldReload = false
+
   loadFiles = () => {
     let { onLoadComplete, providedFiles, dependencies, name } = this.props;
 
@@ -181,13 +185,37 @@ export default class CodeSandboxDeployer extends Component<Props, State> {
     if (isDeploying) return null;
     this.setState({ isDeploying: true });
 
-    if (deployPromise) {
+    if (!this.shouldReload && deployPromise) {
       deployPromise.then(this.deploy);
     } else {
+      this.shouldReload = false;
       this.loadFiles().then(this.deploy);
     }
   };
 
+  componentDidUpdate(prevProps: Props) {
+    /* If props related to loading files have been changed, next deploy should reload files */
+    /* The props that are compared should be the same as the arguments of fetchFiles */
+    const compareKeys = ['examplePath', 'gitInfo', 'importReplacements',
+      'dependencies', 'providedFiles', 'name', 'extensions', 'template'];
+    if (!isEqual(pick(this.props, compareKeys), pick(prevProps, compareKeys))) {
+      this.shouldReload = true;
+    } else {
+      /* pkgJSON and example also need to be compared, but may be promises, which must be resolved before they can be compared */
+      Promise.all([this.props.example, prevProps.example]).then(([example, prevExample]) => {
+        if (example !== prevExample) {
+          this.shouldReload = true;
+        } else {
+          Promise.all([this.props.pkgJSON, prevProps.pkgJSON]).then(([pkgJSON, prevPkgJSON]) => {
+            if (!isEqual(pkgJSON, prevPkgJSON)) {
+              this.shouldReload = true;
+            }
+          });
+        }
+      });
+    }
+  }
+
   componentDidMount() {
     if (this.props.autoDeploy) {
       this.deployToCSB();

yarn.lock

@@ -738,11 +738,11 @@ async@^1.4.0, async@^1.5.2:
   integrity sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=
 
 async@^2.1.4, async@^2.5.0:
-  version "2.6.1"
-  resolved "https://registry.npmjs.org/async/-/async-2.6.1.tgz#b245a23ca71930044ec53fa46aa00a3e87c6a610"
-  integrity sha512-fNEiL2+AZt6AlAw/29Cr0UDe4sRAHCpEHh54WMz+Bb7QfNcFw4h3loofyJpLeQs4Yx7yuqu/2dLgM5hKOs6HlQ==
+  version "2.6.2"
+  resolved "https://registry.npmjs.org/async/-/async-2.6.2.tgz#18330ea7e6e313887f5d2f2a904bac6fe4dd5381"
+  integrity sha512-H1qVYh1MYhEEFLsP97cVKqCGo7KfCyTt6uEWqsTBr9SO84oK9Uwbyd/yCW+6rKJLHksBNUVWZDAjfS+Ccx0Bbg==
   dependencies:
-    lodash "^4.17.10"
+    lodash "^4.17.11"
 
 asynckit@^0.4.0:
   version "0.4.0"
@@ -2750,14 +2750,14 @@ debug@2, debug@2.6.9, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, de
   dependencies:
     ms "2.0.0"
 
-debug@3.1.0, debug@=3.1.0:
+debug@3.1.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
   integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
   dependencies:
     ms "2.0.0"
 
-debug@^3.1.0, debug@^3.2.5:
+debug@^3.1.0, debug@^3.2.5, debug@^3.2.6:
   version "3.2.6"
   resolved "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
   integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
@@ -3803,11 +3803,11 @@ flush-write-stream@^1.0.0, flush-write-stream@^1.0.2:
     readable-stream "^2.3.6"
 
 follow-redirects@^1.0.0:
-  version "1.6.1"
-  resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.6.1.tgz#514973c44b5757368bad8bddfe52f81f015c94cb"
-  integrity sha512-t2JCjbzxQpWvbhts3l6SH1DKzSrx8a+SsaVf4h6bG4kOXUuPYS/kg2Lr4gQSb7eemaHqJkOThF1BGyjlUkO1GQ==
+  version "1.7.0"
+  resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.7.0.tgz#489ebc198dc0e7f64167bd23b03c4c19b5784c76"
+  integrity sha512-m/pZQy4Gj287eNy94nivy5wchN3Kp+Q5WgUPNy5lJSZ3sgkVKSYV/ZChMAQVIgx1SqfZ2zBZtPA2YlXIWxxJOQ==
   dependencies:
-    debug "=3.1.0"
+    debug "^3.2.6"
 
 for-in@^1.0.1, for-in@^1.0.2:
   version "1.0.2"
@@ -5766,11 +5766,21 @@ lodash.camelcase@^4.3.0:
   resolved "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
   integrity sha1-soqmKIorn8ZRA1x3EfZathkDMaY=
 
+lodash.isequal@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
+  integrity sha1-QVxEePK8wwEgwizhDtMib30+GOA=
+
 lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
   integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
 
+lodash.pick@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.npmjs.org/lodash.pick/-/lodash.pick-4.4.0.tgz#52f05610fff9ded422611441ed1fc123a03001b3"
+  integrity sha1-UvBWEP/53tQiYRRB7R/BI6AwAbM=
+
 lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
@@ -5786,7 +5796,7 @@ lodash@^3.10.1:
   resolved "https://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
   integrity sha1-W/Rejkm6QYnhfUgnid/RW9FAt7Y=
 
-lodash@^4.13.1, lodash@^4.17.10, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.3.0:
+lodash@^4.13.1, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.3.0:
   version "4.17.11"
   resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
   integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
@@ -7414,10 +7424,11 @@ prompts@^0.1.9:
     sisteransi "^0.1.1"
 
 prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
-  version "15.7.1"
-  resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.7.1.tgz#2fa61e0a699d428b40320127733ee2931f05d9d1"
-  integrity sha512-f8Lku2z9kERjOCcnDOPm68EBJAO2K00Q5mSgPAUE/gJuBgsYLbVy6owSrtcHj90zt8PvW+z0qaIIgsIhHOa1Qw==
+  version "15.7.2"
+  resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
+  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
   dependencies:
+    loose-envify "^1.4.0"
     object-assign "^4.1.1"
     react-is "^16.8.1"
 
@@ -7781,9 +7792,9 @@ readdirp@^2.0.0, readdirp@^2.2.1:
     readable-stream "^2.0.2"
 
 realpath-native@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.npmjs.org/realpath-native/-/realpath-native-1.0.2.tgz#cd51ce089b513b45cf9b1516c82989b51ccc6560"
-  integrity sha512-+S3zTvVt9yTntFrBpm7TQmQ3tzpCrnA1a/y+3cUHAc9ZR6aIjG0WNLR+Rj79QpJktY+VeW/TQtFlQ1bzsehI8g==
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/realpath-native/-/realpath-native-1.1.0.tgz#2003294fea23fb0672f2476ebe22fcf498a2d65c"
+  integrity sha512-wlgPA6cCIIg9gKz0fgAPjnzh4yR/LnXovwuo9hvyGvx3h8nX4+/iLZplfUWasXpqD8BdnGnP5njOFjkUwPzvjA==
   dependencies:
     util.promisify "^1.0.0"