improve transpilation indication

Author: christianalfoni

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

@@ -33,9 +33,12 @@ export default {
       _preview = blocker<any>();
     };
   },
-  async executeCodeImmediately(initialRender?: boolean) {
+  async executeCodeImmediately({
+    initialRender = false,
+    showFullScreen = false,
+  } = {}) {
     const preview = await _preview.promise;
-    preview.executeCodeImmediately(initialRender);
+    preview.executeCodeImmediately(initialRender, showFullScreen);
   },
   async executeCode() {
     const preview = await _preview.promise;

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

@@ -26,14 +26,6 @@ export function getCurrentModelPath(editor) {
   return model.uri.path.replace(/^\/sandbox/, '');
 }
 
-export function getCode(editor) {
-  const activeEditor = editor.getActiveCodeEditor();
-
-  if (!activeEditor) return '';
-
-  return activeEditor.getValue();
-}
-
 export function getCurrentModel(editor) {
   const activeEditor = editor.getActiveCodeEditor();
 

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

@@ -9,7 +9,6 @@ import {
 } from '@codesandbox/common/lib/types';
 import { Action, AsyncAction } from 'app/overmind';
 import { withLoadApp, withOwnedSandbox } from 'app/overmind/factories';
-import { sortObjectByKeys } from 'app/overmind/utils/common';
 import getItems from 'app/overmind/utils/items';
 import {
   addDevToolsTab as addDevToolsTabUtil,
@@ -45,24 +44,19 @@ export const addNpmDependency: AsyncAction<{
       version: newVersion,
       isDev: Boolean(isDev),
     });
+
+    effects.preview.executeCodeImmediately();
   }
 );
 
 export const npmDependencyRemoved: AsyncAction<{
   name: string;
-}> = withOwnedSandbox(async ({ state, effects, actions }, { name }) => {
+}> = withOwnedSandbox(async ({ effects, actions }, { name }) => {
   effects.analytics.track('Remove NPM Dependency');
 
-  const { parsed } = state.editor.parsedConfigurations.package;
-
-  delete parsed.dependencies[name];
-  parsed.dependencies = sortObjectByKeys(parsed.dependencies);
+  await actions.editor.internal.removeNpmDependencyFromPackageJson(name);
 
-  await actions.editor.internal.saveCode({
-    code: JSON.stringify(parsed, null, 2),
-    moduleShortid: state.editor.currentPackageJSON.shortid,
-    cbID: null,
-  });
+  effects.preview.executeCodeImmediately();
 });
 
 export const sandboxChanged: AsyncAction<{ id: string }> = withLoadApp<{
@@ -127,7 +121,7 @@ export const sandboxChanged: AsyncAction<{ id: string }> = withLoadApp<{
   }
 
   effects.vscode.openModule(state.editor.currentModule);
-  effects.preview.executeCodeImmediately(true);
+  effects.preview.executeCodeImmediately({ initialRender: true });
 
   state.editor.isLoading = false;
 });

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

@@ -224,21 +224,36 @@ export const updateCurrentTemplate: AsyncAction = async ({
   }
 };
 
+export const removeNpmDependencyFromPackageJson: AsyncAction<string> = async (
+  { state, actions },
+  name
+) => {
+  const packageJson = JSON.parse(state.editor.currentPackageJSONCode);
+
+  delete packageJson.dependencies[name];
+
+  await actions.editor.internal.saveCode({
+    code: JSON.stringify(packageJson, null, 2),
+    moduleShortid: state.editor.currentPackageJSON.shortid,
+    cbID: null,
+  });
+};
+
 export const addNpmDependencyToPackageJson: AsyncAction<{
   name: string;
   version?: string;
   isDev: boolean;
 }> = async ({ state, actions }, { name, isDev, version }) => {
-  const { parsed } = state.editor.parsedConfigurations.package;
+  const packageJson = JSON.parse(state.editor.currentPackageJSONCode);
 
   const type = isDev ? 'devDependencies' : 'dependencies';
 
-  parsed[type] = parsed[type] || {};
-  parsed[type][name] = version || 'latest';
-  parsed[type] = sortObjectByKeys(parsed[type]);
+  packageJson[type] = packageJson[type] || {};
+  packageJson[type][name] = version || 'latest';
+  packageJson[type] = sortObjectByKeys(packageJson[type]);
 
   await actions.editor.internal.saveCode({
-    code: JSON.stringify(parsed, null, 2),
+    code: JSON.stringify(packageJson, null, 2),
     moduleShortid: state.editor.currentPackageJSON.shortid,
     cbID: null,
   });
@@ -322,29 +337,14 @@ export const forkSandbox: AsyncAction<{
       });
     }
 
-    // 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);
-      await effects.vscode.changeSandbox(forkedSandbox, fs => {
-        state.editor.modulesByPath = fs;
-      });
-
-      effects.preview.executeCodeImmediately(true);
-
-      // When not server we "piggyback" the existing Sandbox to avoid any rerenders and need
-      // for new bundler. Preview updates its url though
-    } else {
-      Object.assign(
-        state.editor.sandboxes[state.editor.currentId],
-        forkedSandbox
-      );
-      state.editor.modulesByPath = effects.vscode.sandboxFsSync.create(
-        forkedSandbox
-      );
-      effects.preview.updateAddressbarUrl();
-    }
+    Object.assign(
+      state.editor.sandboxes[state.editor.currentId],
+      forkedSandbox
+    );
+    state.editor.modulesByPath = effects.vscode.sandboxFsSync.create(
+      forkedSandbox
+    );
+    effects.preview.updateAddressbarUrl();
 
     effects.notificationToast.success('Forked sandbox!');
     effects.router.updateSandboxUrl(forkedSandbox);

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

@@ -33,7 +33,7 @@ export const roomJoined: AsyncAction<{
   });
 
   effects.vscode.openModule(state.editor.currentModule);
-  effects.preview.executeCodeImmediately(true);
+  effects.preview.executeCodeImmediately({ initialRender: true });
   state.live.isLoading = false;
 });
 
@@ -53,7 +53,7 @@ export const createLiveClicked: AsyncAction<{
   });
 
   effects.vscode.openModule(state.editor.currentModule);
-  effects.preview.executeCodeImmediately(true);
+  effects.preview.executeCodeImmediately({ initialRender: true });
 };
 
 export const liveMessageReceived: Operator<LiveMessage> = pipe(
@@ -92,15 +92,9 @@ export const applyTransformation: Action<{
   operation: any;
   moduleShortid: string;
 }> = ({ state, effects }, { operation, moduleShortid }) => {
-  state.live.receivingCode = false;
-
   effects.vscode.applyOperation(moduleShortid, operation);
 };
 
-export const onCodeReceived: Action = ({ state }) => {
-  state.live.receivingCode = false;
-};
-
 export const onSelectionChanged: Action<any> = (
   { state, effects },
   selection

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

@@ -75,9 +75,8 @@ export const initialize: AsyncAction<string, Sandbox> = async (
     effects.analytics.track('Live Session Joined', {});
     effects.live.listen(actions.live.liveMessageReceived);
 
-    state.live.receivingCode = true;
     actions.live.internal.initializeModuleState(moduleState);
-    state.live.receivingCode = false;
+
     state.live.isLive = true;
     state.live.error = null;
     effects.live.sendModuleState();

packages/app/src/app/overmind/namespaces/live/liveMessageOperators.ts

@@ -33,11 +33,7 @@ export const onJoin: Operator<LiveMessage<{
 export const onModuleState: Operator<LiveMessage<{
   module_state: any;
 }>> = mutate(({ state, actions }, { data }) => {
-  // We get this when we notice that there is an out of sync
-  // Really no reason to set this state as everything runs sync
-  state.live.receivingCode = true;
   actions.live.internal.initializeModuleState(data.module_state);
-  state.live.receivingCode = false;
 });
 
 export const onUserEntered: Operator<LiveMessage<{

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

@@ -1,11 +1,10 @@
-import { RoomInfo, LiveUser } from '@codesandbox/common/lib/types';
+import { LiveUser, RoomInfo } from '@codesandbox/common/lib/types';
 import { Derive } from 'app/overmind';
 
 type State = {
   isLive: boolean;
   isTeam: boolean;
   isLoading: boolean;
-  receivingCode: boolean;
   error: string;
   reconnecting: boolean;
   notificationsHidden: boolean;
@@ -28,7 +27,6 @@ export const state: State = {
   isLive: false,
   isTeam: false,
   isLoading: false,
-  receivingCode: false,
   reconnecting: false,
   notificationsHidden: false,
   followingUserId: null,

packages/app/src/sandbox/boilerplates/index.js

@@ -1,14 +1,11 @@
-// @flow
-import type { Module } from '../eval/entities/module';
-
 import { getCurrentManager } from '../compile';
 
 let cachedBoilerplates = [];
 
-export async function evalBoilerplates(boilerplates: Array<any>) {
+export async function evalBoilerplates(boilerplates) {
   cachedBoilerplates = await Promise.all(
     boilerplates.map(async boilerplate => {
-      const fakeModule: Module = {
+      const fakeModule = {
         path: `/boilerplate-${boilerplate.condition}${boilerplate.extension}`,
         code: boilerplate.code,
       };
@@ -23,11 +20,11 @@ export async function evalBoilerplates(boilerplates: Array<any>) {
   );
 }
 
-export function getBoilerplates(): Array<any> {
+export function getBoilerplates() {
   return cachedBoilerplates;
 }
 
-export function findBoilerplate(module: Module): any {
+export function findBoilerplate(module) {
   const boilerplates = getBoilerplates();
   const boilerplate = boilerplates.find(b => {
     const regex = new RegExp(b.condition);
@@ -36,9 +33,7 @@ export function findBoilerplate(module: Module): any {
 
   if (boilerplate == null) {
     throw new Error(
-      `No boilerplate found for ${
-        module.path
-      }, you can create one in the future`
+      `No boilerplate found for ${module.path}, you can create one in the future`
     );
   }
 

packages/app/src/sandbox/compile.ts

@@ -1,38 +1,32 @@
-import { dispatch, reattach, clearErrorTransformers } from 'codesandbox-api';
-import { flatten } from 'lodash';
-import { absolute } from '@codesandbox/common/lib/utils/path';
-import _debug from '@codesandbox/common/lib/utils/debug';
 import parseConfigurations from '@codesandbox/common/lib/templates/configuration/parse';
-import initializeErrorTransformers from 'sandbox-hooks/errors/transformers';
-import { inject, unmount } from 'sandbox-hooks/react-error-overlay/overlay';
-import { isBabel7 } from '@codesandbox/common/lib/utils/is-babel-7';
-import { ParsedConfigurationFiles } from '@codesandbox/common/lib/templates/template';
 import getDefinition, {
   TemplateType,
 } from '@codesandbox/common/lib/templates/index';
-
-import getPreset from './eval';
-import Manager, { Manifest } from './eval/manager';
-
-import { resetScreen } from './status-screen';
-
-import createCodeSandboxOverlay from './codesandbox-overlay';
-import handleExternalResources from './external-resources';
-
-import defaultBoilerplates from './boilerplates/default-boilerplates';
+import { ParsedConfigurationFiles } from '@codesandbox/common/lib/templates/template';
+import _debug from '@codesandbox/common/lib/utils/debug';
+import { isBabel7 } from '@codesandbox/common/lib/utils/is-babel-7';
+import { absolute } from '@codesandbox/common/lib/utils/path';
+import { clearErrorTransformers, dispatch, reattach } from 'codesandbox-api';
+import { flatten } from 'lodash';
+import initializeErrorTransformers from 'sandbox-hooks/errors/transformers';
+import { inject, unmount } from 'sandbox-hooks/react-error-overlay/overlay';
 
 import {
-  getBoilerplates,
   evalBoilerplates,
   findBoilerplate,
-} from './boilerplates'; // eslint-disable-line
-
-import { loadDependencies } from './npm';
-import { consumeCache, saveCache, deleteAPICache } from './eval/cache';
-
-import { showRunOnClick } from './status-screen/run-on-click';
+  getBoilerplates,
+} from './boilerplates';
+import defaultBoilerplates from './boilerplates/default-boilerplates';
+import createCodeSandboxOverlay from './codesandbox-overlay';
+import getPreset from './eval';
+import { consumeCache, deleteAPICache, saveCache } from './eval/cache';
 import { Module } from './eval/entities/module';
+import Manager, { Manifest } from './eval/manager';
 import TranspiledModule from './eval/transpiled-module';
+import handleExternalResources from './external-resources';
+import { loadDependencies } from './npm';
+import { resetScreen } from './status-screen';
+import { showRunOnClick } from './status-screen/run-on-click';
 
 let initializedResizeListener = false;
 let manager: Manager | null = null;
@@ -408,6 +402,7 @@ interface CompileOptions {
   skipEval?: boolean;
   hasFileResolver?: boolean;
   disableDependencyPreprocessing?: boolean;
+  showFullScreen?: boolean;
 }
 
 async function compile({
@@ -422,6 +417,7 @@ async function compile({
   skipEval = false,
   hasFileResolver = false,
   disableDependencyPreprocessing = false,
+  showFullScreen = false,
 }: CompileOptions) {
   dispatch({
     type: 'start',
@@ -456,9 +452,7 @@ async function compile({
 
     if (errors.length) {
       const e = new Error(
-        `We weren't able to parse: '${errors[0].path}': ${
-          errors[0].error.message
-        }`
+        `We weren't able to parse: '${errors[0].path}': ${errors[0].error.message}`
       );
 
       // @ts-ignore
@@ -488,6 +482,7 @@ async function compile({
       {
         disableExternalConnection: disableDependencyPreprocessing,
         resolutions: parsedPackageJSON.resolutions,
+        showFullScreen,
       }
     );
 
@@ -519,9 +514,7 @@ async function compile({
 
     if (!foundMain) {
       throw new Error(
-        `Could not find entry file: ${
-          possibleEntries[0]
-        }. You can specify one in package.json by defining a \`main\` property.`
+        `Could not find entry file: ${possibleEntries[0]}. You can specify one in package.json by defining a \`main\` property.`
       );
     }