fixed smooth forking and containers

Author: christianalfoni

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

@@ -1,14 +1,16 @@
+import { blocker } from 'app/utils/blocker';
+
 import { Reaction } from '..';
 
-let _preview;
+let _preview = blocker<any>();
 let _reaction: Reaction;
 
 export default {
   initialize(reaction: Reaction) {
     _reaction = reaction;
   },
   initializePreview(preview: any) {
-    _preview = preview;
+    _preview.resolve(preview);
 
     const dispose = _reaction(
       state => [
@@ -21,32 +23,30 @@ export default {
           isAllModulesSynced &&
           (template === 'static' || !livePreviewEnabled)
         ) {
-          _preview.handleRefresh();
+          preview.handleRefresh();
         }
       }
     );
 
     return () => {
-      _preview = null;
       dispose();
+      _preview = blocker<any>();
     };
   },
-  executeCodeImmediately(initialRender?: boolean) {
-    if (!_preview) {
-      return;
-    }
-    _preview.executeCodeImmediately(initialRender);
+  async executeCodeImmediately(initialRender?: boolean) {
+    const preview = await _preview.promise;
+    preview.executeCodeImmediately(initialRender);
+  },
+  async executeCode() {
+    const preview = await _preview.promise;
+    preview.executeCode();
   },
-  executeCode() {
-    if (!_preview) {
-      return;
-    }
-    _preview.executeCode();
+  async refresh() {
+    const preview = await _preview.promise;
+    preview.handleRefresh();
   },
-  refresh() {
-    if (!_preview) {
-      return;
-    }
-    _preview.handleRefresh();
+  async refreshUrl() {
+    const preview = await _preview.promise;
+    preview.refreshUrl();
   },
 };

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

@@ -148,6 +148,10 @@ class SandboxFsSync {
     writeFile(fs, json(module));
 
     this.send('write-file', module);
+
+    if (module.title === 'package.json') {
+      this.syncDependencyTypings();
+    }
   }
 
   public rename(fs: SandboxFs, fromPath: string, toPath: string) {

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 }, { moduleShortid, cbID }) => {
+}> = async ({ state, effects, actions }, { code, moduleShortid, cbID }) => {
   effects.analytics.track('Save Code');
 
   const sandbox = state.editor.currentSandbox;
@@ -83,6 +83,8 @@ export const saveCode: AsyncAction<{
     return;
   }
 
+  module.code = code;
+
   try {
     const updatedModule = await effects.api.saveModuleCode(sandbox.id, module);
 
@@ -296,10 +298,27 @@ export const forkSandbox: AsyncAction<{
       });
     }
 
-    await actions.internal.setCurrentSandbox(forkedSandbox);
-    state.editor.modulesByPath = effects.vscode.fs.create(forkedSandbox);
-    await effects.vscode.changeSandbox(forkedSandbox);
-    effects.vscode.openModule(state.editor.currentModule);
+    // When we have a server we want to set a brand new sandbox,
+    // as the preview also needs to be managed correctly
+    if (getTemplateDefinition(forkedSandbox.template).isServer) {
+      await effects.vscode.closeAllTabs();
+      actions.internal.setCurrentSandbox(forkedSandbox);
+      state.editor.modulesByPath = effects.vscode.fs.create(forkedSandbox);
+      await effects.vscode.changeSandbox(forkedSandbox);
+      effects.vscode.openModule(state.editor.currentModule);
+      effects.preview.executeCodeImmediately(true);
+
+      // When not server we "piggyback" the existing Sandbox to avoid any rerenders and need
+      // for new bundler. We do not reference the sandbox by `currentId` anywhere,
+      // so this should be safe. The url of the preview is updated
+    } else {
+      Object.assign(
+        state.editor.sandboxes[state.editor.currentId],
+        forkedSandbox
+      );
+      effects.preview.refreshUrl();
+    }
+
     effects.notificationToast.success('Forked sandbox!');
     effects.router.updateSandboxUrl(forkedSandbox);
   } catch (error) {

packages/app/src/app/pages/Sandbox/Editor/Content/Preview/index.tsx

@@ -1,8 +1,8 @@
 import BasePreview from '@codesandbox/common/lib/components/Preview';
 import RunOnClick from '@codesandbox/common/lib/components/RunOnClick';
+import { useOvermind } from 'app/overmind';
 // @flow
 import React, { FC, useState } from 'react';
-import { useOvermind } from 'app/overmind';
 
 type Props = {
   hidden?: boolean;
@@ -43,7 +43,7 @@ const PreviewComponent: FC<Props> = props => {
 
   return running ? (
     <BasePreview
-      onInitialized={effects.preview.initializePreview}
+      onMount={effects.preview.initializePreview}
       sandbox={state.editor.currentSandbox}
       privacy={state.editor.currentSandbox.privacy}
       previewSecret={state.editor.currentSandbox.previewSecret}

packages/common/src/components/Preview/index.tsx

@@ -8,6 +8,7 @@ import {
 import debounce from 'lodash/debounce';
 import React from 'react';
 import { Spring } from 'react-spring/renderprops.cjs';
+
 import { getModulePath } from '../../sandbox/modules';
 import getTemplate from '../../templates';
 import { generateFileFromSandbox } from '../../templates/configuration/package-json';
@@ -44,6 +45,7 @@ export type Props = {
   alignDirection?: 'right' | 'bottom';
   delay?: number;
   className?: string;
+  onMount?: (preview: BasePreview) => () => void;
   overlayMessage?: string;
   /**
    * Whether to show a screenshot in the preview as a "placeholder" while loading
@@ -76,6 +78,7 @@ interface IModulesByPath {
 class BasePreview extends React.Component<Props, State> {
   serverPreview: boolean;
   element: HTMLIFrameElement;
+  onUnmount: () => void;
 
   constructor(props: Props) {
     super(props);
@@ -133,6 +136,12 @@ class BasePreview extends React.Component<Props, State> {
     }
   }
 
+  componentDidMount() {
+    if (this.props.onMount) {
+      this.onUnmount = this.props.onMount(this);
+    }
+  }
+
   /**
    * We have a different domain for the preview (currently :id.csb.app), some corporate
    * firewalls block calls to these domains. Which is why we ping the domain here, if it
@@ -219,12 +228,18 @@ class BasePreview extends React.Component<Props, State> {
     if (this.disposeInitializer) {
       this.disposeInitializer();
     }
+    if (this.onUnmount) {
+      this.onUnmount();
+    }
   }
 
   componentDidUpdate(prevProps: Props) {
     if (prevProps.privacy !== this.props.privacy) {
       this.handlePrivacyChange();
     }
+    if (prevProps.sandbox.id !== this.props.sandbox.id) {
+      this.handleSandboxChange();
+    }
   }
 
   openNewWindow = () => {
@@ -246,8 +261,8 @@ class BasePreview extends React.Component<Props, State> {
     this.sendPreviewSecret();
   };
 
-  handleSandboxChange = (sandbox: Sandbox) => {
-    this.serverPreview = getTemplate(sandbox.template).isServer;
+  handleSandboxChange = () => {
+    this.serverPreview = getTemplate(this.props.sandbox.template).isServer;
 
     resetState();
 
@@ -271,6 +286,16 @@ class BasePreview extends React.Component<Props, State> {
     );
   };
 
+  refreshUrl() {
+    const url = this.currentUrl();
+
+    this.setState({
+      urlInAddressBar: url,
+      url,
+      showScreenshot: false,
+    });
+  }
+
   handleDependenciesChange = () => {
     this.handleRefresh();
   };