Add ?forcerefresh=1 option for embeds

Author: Ives van Hoorne

src/app/components/sandbox/Preview/index.js

@@ -183,7 +183,7 @@ export default class Preview extends React.PureComponent<Props, State> {
       this.setState({
         frameInitialized: true,
       });
-      this.executeCodeImmediately();
+      this.executeCodeImmediately(true);
     } else {
       const { type } = e.data;
 
@@ -229,7 +229,7 @@ export default class Preview extends React.PureComponent<Props, State> {
     return isInProjectView ? findMainModule(modules, template) : module;
   };
 
-  executeCodeImmediately = () => {
+  executeCodeImmediately = (initialRender: boolean = false) => {
     const {
       modules,
       directories,
@@ -248,22 +248,26 @@ export default class Preview extends React.PureComponent<Props, State> {
 
     // Do it here so we can see the dependency fetching screen if needed
     this.clearErrors();
-    const renderedModule = this.getRenderedModule();
-    this.sendMessage({
-      type: 'compile',
-      module: renderedModule,
-      changedModule: module,
-      dependencies,
-      modules,
-      directories,
-      sandboxId,
-      externalResources,
-      template,
-      hasActions: !!runActionFromPreview,
-      isModuleView: !isInProjectView,
-      // TODO remove this in 2 weeks
-      experimentalPackager: preferences.newPackagerExperiment,
-    });
+    if (preferences.forceRefresh && !initialRender) {
+      this.handleRefresh();
+    } else {
+      const renderedModule = this.getRenderedModule();
+      this.sendMessage({
+        type: 'compile',
+        module: renderedModule,
+        changedModule: module,
+        dependencies,
+        modules,
+        directories,
+        sandboxId,
+        externalResources,
+        template,
+        hasActions: !!runActionFromPreview,
+        isModuleView: !isInProjectView,
+        // TODO remove this in 2 weeks
+        experimentalPackager: preferences.newPackagerExperiment,
+      });
+    }
   };
 
   clearErrors = () => {

src/app/components/sandbox/Preview/utils/should-update.js

@@ -12,11 +12,11 @@ const MODULE_FIELDS = [
 
 const DIRECTORY_FIELDS = ['title', 'directoryShortid', 'shortid'];
 
-function checkFields(m1, m2, fields: Array<String>) {
+function checkFields(m1, m2, fields: Array<string>) {
   return fields.some(field => m1[field] !== m2[field]);
 }
 
-function compareArrays(m1, m2, fields: Array<String>) {
+function compareArrays(m1, m2, fields: Array<string>) {
   return m1.some(first => {
     const second = m2.find(m => m.id === first.id);
 

src/common/url.js

@@ -50,6 +50,7 @@ export const getSandboxOptions = (url: string) => {
   result.autoResize = url.includes('autoresize=1');
   result.useCodeMirror = url.includes('codemirror=1');
   result.enableEslint = url.includes('eslint=1');
+  result.forceRefresh = url.includes('forcerefresh=1');
 
   return result;
 };

src/embed/App.js

@@ -60,6 +60,7 @@ type State = {
   enableEslint: boolean,
   useCodeMirror: boolean,
   editorSize: number,
+  forceRefresh: boolean,
   highlightedLines: Array<string>,
 };
 
@@ -80,6 +81,7 @@ export default class App extends React.PureComponent<{}, State> {
       useCodeMirror,
       editorSize,
       highlightedLines,
+      forceRefresh,
     } = getSandboxOptions(document.location.href);
 
     this.state = {
@@ -97,6 +99,7 @@ export default class App extends React.PureComponent<{}, State> {
       enableEslint,
       useCodeMirror,
       editorSize,
+      forceRefresh,
       highlightedLines: highlightedLines || [],
     };
   }
@@ -219,6 +222,7 @@ export default class App extends React.PureComponent<{}, State> {
             enableEslint={this.state.enableEslint}
             editorSize={this.state.editorSize}
             highlightedLines={this.state.highlightedLines}
+            forceRefresh={this.state.forceRefresh}
           />
         </Container>
       </ThemeProvider>

src/embed/components/Content.js

@@ -43,6 +43,7 @@ type Props = {
   enableEslint: boolean,
   isInProjectView: boolean,
   editorSize: number,
+  forceRefresh: boolean,
   highlightedLines: Array<string>,
 };
 
@@ -59,6 +60,14 @@ export default class Content extends React.PureComponent<Props, State> {
     errors: [],
   };
 
+  // constructor(props) {
+  //   super(props);
+
+  //   if (props.forceRefresh) {
+  //     this.setCode = debounce(this.set)
+  //   }
+  // }
+
   componentDidMount() {
     setTimeout(() => this.handleResize());
   }
@@ -162,6 +171,8 @@ export default class Content extends React.PureComponent<Props, State> {
 
   getPreferences = () => ({
     ...this.preferences,
+    forceRefresh: this.props.forceRefresh,
+    instantPreviewEnabled: !this.props.forceRefresh,
     fontSize: this.props.fontSize,
     autoDownloadTypes: true,
     lintEnabled: this.props.enableEslint,
@@ -251,7 +262,7 @@ export default class Content extends React.PureComponent<Props, State> {
               modules={alteredModules}
               directories={sandbox.directories}
               externalResources={sandbox.externalResources}
-              module={mainModule}
+              module={alteredMainModule}
               addError={this.addError}
               clearErrors={this.clearErrors}
               preferences={this.getPreferences()}