bunch of fixes

Author: christianalfoni

packages/app/src/app/overmind/actions.ts

@@ -52,10 +52,6 @@ export const notificationRemoved: Action<{
   state.notifications.splice(notificationToRemoveIndex, 1);
 };
 
-export const forceRender: Action = ({ state }) => {
-  state.editor.forceRender++;
-};
-
 export const cliInstructionsMounted: AsyncAction = withLoadApp();
 
 export const githubPageMounted: AsyncAction = withLoadApp();

packages/app/src/app/overmind/effects/index.ts

@@ -24,3 +24,4 @@ export { default as themes } from './themes';
 export { default as executor } from './executor';
 export { default as stripe } from './stripe';
 export { default as jwt } from './jwt';
+export { default as preview } from './preview';

packages/app/src/app/overmind/effects/preview.ts

@@ -0,0 +1,54 @@
+import { Reaction } from '..';
+
+let _preview;
+let _reaction: Reaction;
+
+export default {
+  initialize(reaction: Reaction) {
+    _reaction = reaction;
+  },
+  initializePreview(preview: any) {
+    _preview = preview;
+
+    const dispose = _reaction(
+      state => [
+        state.editor.isAllModulesSynced,
+        state.editor.currentSandbox.template,
+        state.preferences.settings.livePreviewEnabled,
+      ],
+      ([isAllModulesSynced, template, livePreviewEnabled]) => {
+        if (
+          isAllModulesSynced &&
+          (template === 'static' || !livePreviewEnabled)
+        ) {
+          _preview.handleRefresh();
+        }
+      }
+    );
+
+    _preview.executeCodeImmediately();
+
+    return () => {
+      _preview = null;
+      dispose();
+    };
+  },
+  executeCodeImmediately() {
+    if (!_preview) {
+      return;
+    }
+    _preview.executeCodeImmediately();
+  },
+  executeCode() {
+    if (!_preview) {
+      return;
+    }
+    _preview.executeCode();
+  },
+  refresh() {
+    if (!_preview) {
+      return;
+    }
+    _preview.handleRefresh();
+  },
+};

packages/app/src/app/overmind/effects/vscode/extensionHostWorker/common/fs.ts

@@ -94,7 +94,7 @@ export async function initializeBrowserFS({
               currentSandboxFs = evt.data.$data;
               break;
             }
-            case 'writeFile': {
+            case 'write-file': {
               const module = evt.data.$data;
               writeFile(currentSandboxFs, module);
               break;

packages/app/src/app/overmind/effects/vscode/index.ts

@@ -265,8 +265,6 @@ export class VSCodeEffect {
       this.onFileChange,
       this.onOperationApplied
     );
-
-    this.fs.sync();
   }
 
   public async openModule(module: Module) {
@@ -476,7 +474,6 @@ export class VSCodeEffect {
       const extensionEnablementService = accessor.get(
         IExtensionEnablementService
       );
-      // const quickopenService = accessor.get(IQuickOpenService);
 
       this.commandService.resolve(commandService);
       this.extensionService.resolve(extensionService);
@@ -574,7 +571,7 @@ export class VSCodeEffect {
     });
   }
 
-  private provideDocumentFormattingEdits(model, _, token) {
+  private provideDocumentFormattingEdits = (model, _, token) =>
     prettify(
       model.uri.fsPath,
       () => model.getValue(),
@@ -587,7 +584,6 @@ export class VSCodeEffect {
         text: newCode,
       },
     ]);
-  }
 
   private changeSettings = (settings: Settings) => {
     this.settings = settings;

packages/app/src/app/overmind/effects/vscode/sandboxFsSync/index.ts

@@ -114,21 +114,6 @@ class SandboxFsSync {
     });
   }
 
-  public async sync() {
-    await this.initializingWorkers.promise;
-
-    // eslint-disable-next-line
-    console.log('## SYNCING SANDBOX AND TYPINGS WITH WORKERS');
-    this.syncSandbox();
-
-    try {
-      await this.syncDependencyTypings();
-    } catch (error) {
-      // Might not be a filesystem ready yet
-      // console.log('ERROR SYNCING', error);
-    }
-  }
-
   public create(sandbox: Sandbox): SandboxFs {
     const sandboxFs = {};
 
@@ -154,6 +139,8 @@ class SandboxFsSync {
       }
     });
 
+    this.sync();
+
     return sandboxFs;
   }
 
@@ -208,6 +195,8 @@ class SandboxFsSync {
   }
 
   private syncSandbox() {
+    // eslint-disable-next-line
+    console.log('## SYNCING SANDBOX AND TYPINGS WITH WORKERS');
     global.postMessage(
       {
         $broadcast: true,
@@ -218,6 +207,19 @@ class SandboxFsSync {
     );
   }
 
+  private async sync() {
+    await this.initializingWorkers.promise;
+
+    this.syncSandbox();
+
+    try {
+      await this.syncDependencyTypings();
+    } catch (error) {
+      // Might not be a filesystem ready yet
+      // console.log('ERROR SYNCING', error);
+    }
+  }
+
   private send(type: string, data: any) {
     global.postMessage(
       {

packages/app/src/app/overmind/namespaces/editor/actions.ts

@@ -17,6 +17,7 @@ import {
 import { clearCorrectionsFromAction } from 'app/utils/corrections';
 import { json } from 'overmind';
 
+import getTemplate from '@codesandbox/common/lib/templates';
 import * as internalActions from './internalActions';
 
 export const internal = internalActions;
@@ -43,6 +44,8 @@ export const addNpmDependency: AsyncAction<{
       version: newVersion,
       isDev: Boolean(isDev),
     });
+
+    actions.editor.internal.updatePreviewCode();
   }
 );
 
@@ -61,6 +64,8 @@ export const npmDependencyRemoved: AsyncAction<{
     moduleShortid: state.editor.currentPackageJSON.shortid,
     cbID: null,
   });
+
+  actions.editor.internal.updatePreviewCode();
 });
 
 export const sandboxChanged: AsyncAction<{ id: string }> = withLoadApp<{
@@ -233,6 +238,12 @@ export const codeChanged: Action<{
     module,
     code,
   });
+
+  const { isServer } = getTemplate(state.editor.currentSandbox.template);
+
+  if (!isServer && state.preferences.settings.livePreviewEnabled) {
+    actions.editor.internal.updatePreviewCode();
+  }
 };
 
 export const saveClicked: AsyncAction = withOwnedSandbox(
@@ -256,6 +267,8 @@ export const saveClicked: AsyncAction = withOwnedSandbox(
       ) {
         actions.git.internal.fetchGitChanges();
       }
+
+      effects.preview.executeCodeImmediately();
     } catch (error) {
       // Put back any unsaved modules taking into account that you
       // might have changed some modules waiting for saving
@@ -367,6 +380,10 @@ export const moduleSelected: Action<{
       }
 
       effects.live.sendUserCurrentModule(module.shortid);
+
+      if (!state.editor.isInProjectView) {
+        actions.editor.internal.updatePreviewCode();
+      }
     }
   } catch (error) {
     // Do nothing, it is most likely VSCode selecting a file
@@ -453,8 +470,9 @@ export const toggleStatusBar: Action = ({ state }) => {
   state.editor.statusBar = !state.editor.statusBar;
 };
 
-export const projectViewToggled: Action = ({ state }) => {
+export const projectViewToggled: Action = ({ state, actions }) => {
   state.editor.isInProjectView = !state.editor.isInProjectView;
+  actions.editor.internal.updatePreviewCode();
 };
 
 export const frozenUpdated: AsyncAction<{ frozen: boolean }> = async (
@@ -710,7 +728,6 @@ export const previewActionReceived: Action<{
       actions.editor.addNpmDependency({
         name,
       });
-      actions.forceRender();
       break;
     }
   }
@@ -719,37 +736,35 @@ export const previewActionReceived: Action<{
 export const renameModule: AsyncAction<{
   title: string;
   moduleShortid: string;
-}> = withOwnedSandbox(
-  async ({ state, effects, actions }, { title, moduleShortid }) => {
-    const sandbox = state.editor.currentSandbox;
-    const module = sandbox.modules.find(
-      moduleItem => moduleItem.shortid === moduleShortid
-    );
+}> = withOwnedSandbox(async ({ state, effects }, { title, moduleShortid }) => {
+  const sandbox = state.editor.currentSandbox;
+  const module = sandbox.modules.find(
+    moduleItem => moduleItem.shortid === moduleShortid
+  );
 
-    if (!module) {
-      return;
-    }
+  if (!module) {
+    return;
+  }
 
-    const oldTitle = module.title;
+  const oldTitle = module.title;
 
-    module.title = title;
+  module.title = title;
 
-    try {
-      await effects.api.saveModuleTitle(
-        state.editor.currentId,
-        moduleShortid,
-        title
-      );
+  try {
+    await effects.api.saveModuleTitle(
+      state.editor.currentId,
+      moduleShortid,
+      title
+    );
 
-      if (state.live.isCurrentEditor) {
-        effects.live.sendModuleUpdate(module);
-      }
-    } catch (error) {
-      module.title = oldTitle;
-      effects.notificationToast.error('Could not rename file');
+    if (state.live.isCurrentEditor) {
+      effects.live.sendModuleUpdate(module);
     }
+  } catch (error) {
+    module.title = oldTitle;
+    effects.notificationToast.error('Could not rename file');
   }
-);
+});
 
 export const onDevToolsTabAdded: Action<{
   tab: any;

packages/app/src/app/overmind/namespaces/editor/internalActions.ts

@@ -73,7 +73,7 @@ export const saveCode: AsyncAction<{
   code: string;
   moduleShortid: string;
   cbID?: string | null;
-}> = async ({ state, effects, actions }, { code, moduleShortid, cbID }) => {
+}> = async ({ state, effects, actions }, { moduleShortid, cbID }) => {
   effects.analytics.track('Save Code');
 
   const sandbox = state.editor.currentSandbox;
@@ -83,11 +83,6 @@ export const saveCode: AsyncAction<{
     return;
   }
 
-  await actions.editor.codeChanged({
-    code,
-    moduleShortid,
-  });
-
   try {
     const updatedModule = await effects.api.saveModuleCode(sandbox.id, module);
 
@@ -245,9 +240,7 @@ export const setModuleCode: Action<{
     state.editor.changedModuleShortids.push(module.shortid);
   }
 
-  if (state.preferences.settings.experimentVSCode) {
-    effects.vscode.runCommand('workbench.action.keepEditor');
-  }
+  effects.vscode.runCommand('workbench.action.keepEditor');
 
   const tabs = state.editor.tabs as ModuleTab[];
   const tab = tabs.find(tabItem => tabItem.moduleShortid === module.shortid);
@@ -315,7 +308,7 @@ export const forkSandbox: AsyncAction<{
   state.editor.isForkingSandbox = false;
 };
 
-export const setCurrentModule: Action<Module> = (
+export const setCurrentModule: AsyncAction<Module> = async (
   { state, effects },
   module
 ) => {
@@ -340,7 +333,9 @@ export const setCurrentModule: Action<Module> = (
   }
 
   state.editor.currentModuleShortid = module.shortid;
-  effects.vscode.openModule(module);
+  await effects.vscode.openModule(module);
+  effects.vscode.setErrors(state.editor.errors);
+  effects.vscode.setCorrections(state.editor.corrections);
 };
 
 export const updateSandboxPackageJson: AsyncAction = async ({
@@ -392,3 +387,11 @@ export const updateDevtools: AsyncAction<{
     state.editor.workspaceConfigCode = code;
   }
 };
+
+export const updatePreviewCode: Action = ({ state, effects }) => {
+  if (state.preferences.settings.instantPreviewEnabled) {
+    effects.preview.executeCodeImmediately();
+  } else {
+    effects.preview.executeCode();
+  }
+};

packages/app/src/app/overmind/namespaces/editor/state.ts

@@ -42,7 +42,6 @@ type State = {
   errors: ModuleError[];
   corrections: ModuleCorrection[];
   isInProjectView: boolean;
-  forceRender: number;
   initialPath: string;
   highlightedLines: number[];
   isUpdatingPrivacy: boolean;
@@ -84,7 +83,6 @@ export const state: State = {
   sessionFrozen: true,
   corrections: [],
   isInProjectView: false,
-  forceRender: 0,
   initialPath: '/',
   highlightedLines: [],
   isUpdatingPrivacy: false,