Improve perf even more (codesandbox#2609)

Author: christianalfoni

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

@@ -22,8 +22,8 @@ import {
 import { client } from 'app/graphql/client';
 import { LIST_TEMPLATES } from 'app/pages/Dashboard/queries';
 
-import apiFactory, { Api, ApiConfig } from './apiFactory';
 import { transformSandbox } from '../utils/sandbox';
+import apiFactory, { Api, ApiConfig } from './apiFactory';
 
 let api: Api;
 

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

@@ -1,3 +1,5 @@
+import { Sandbox } from '@codesandbox/common/lib/types';
+
 export function transformSandbox(sandbox: Sandbox) {
   // We need to add client side properties for tracking
   return {
@@ -8,6 +10,11 @@ export function transformSandbox(sandbox: Sandbox) {
       isNotSynced: false,
       errors: [],
       corrections: [],
+      type: 'file' as 'file',
+    })),
+    directories: sandbox.directories.map(directory => ({
+      ...directory,
+      type: 'directory' as 'directory',
     })),
   };
 }

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

@@ -187,19 +187,13 @@ export const state: State = {
       const pathItem = modulePaths[path];
 
       if (pathItem.type === 'file') {
-        modulesByPath[path] = {
-          ...modulePaths[path],
-          ...currentSandbox.modules.find(
-            moduleItem => moduleItem.shortid === pathItem.shortid
-          ),
-        };
+        modulesByPath[path] = currentSandbox.modules.find(
+          moduleItem => moduleItem.shortid === pathItem.shortid
+        );
       } else {
-        modulesByPath[path] = {
-          ...modulePaths[path],
-          ...currentSandbox.directories.find(
-            moduleItem => moduleItem.shortid === pathItem.shortid
-          ),
-        };
+        modulesByPath[path] = currentSandbox.directories.find(
+          moduleItem => moduleItem.shortid === pathItem.shortid
+        );
       }
     });
 

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

@@ -1,14 +1,15 @@
-import { AsyncAction } from 'app/overmind';
 import { getModulePath } from '@codesandbox/common/lib/sandbox/modules';
 import getDefinition from '@codesandbox/common/lib/templates';
-import denormalize from 'codesandbox-import-utils/lib/utils/files/denormalize';
-import { INormalizedModules } from 'codesandbox-import-util-types';
 import { ModuleTab } from '@codesandbox/common/lib/types';
-import { createOptimisticModule } from 'app/overmind/utils/common';
+import { AsyncAction } from 'app/overmind';
 import { withOwnedSandbox } from 'app/overmind/factories';
+import { createOptimisticModule } from 'app/overmind/utils/common';
+import { INormalizedModules } from 'codesandbox-import-util-types';
+import denormalize from 'codesandbox-import-utils/lib/utils/files/denormalize';
+
 import {
-  resolveModuleWrapped,
   resolveDirectoryWrapped,
+  resolveModuleWrapped,
 } from '../../utils/resolve-module-wrapped';
 import * as internalActions from './internalActions';
 
@@ -59,6 +60,7 @@ export const directoryCreated: AsyncAction<{
       sourceId: state.editor.currentSandbox.sourceId,
       insertedAt: new Date().toString(),
       updatedAt: new Date().toString(),
+      type: 'directory' as 'directory',
     };
 
     sandbox.directories.push(optimisticDirectory);

packages/app/src/app/overmind/onInitialize.ts

@@ -9,7 +9,7 @@ export const onInitialize: OnInitialize = (
   effects.fsSync.initialize({
     onModulesByPathChange(cb: (modulesByPath: any) => void) {
       overmindInstance.reaction(
-        ({ editor }) => editor.modulesByPath,
+        ({ editor }) => editor.modulePaths,
         ({ editor }) => cb(editor.modulesByPath)
       );
     },

packages/app/src/app/overmind/utils/common.ts

@@ -20,6 +20,7 @@ export function createOptimisticModule(overrides: Partial<Module>) {
     isNotSynced: true,
     errors: [],
     corrections: [],
+    type: 'file' as 'file',
     ...overrides,
   };
 }

packages/common/src/types/index.ts

@@ -58,6 +58,7 @@ export type Module = {
   updatedAt: string;
   path?: string;
   now?: any;
+  type: 'file';
 };
 
 export type Directory = {
@@ -66,6 +67,7 @@ export type Directory = {
   directoryShortid: string | undefined;
   shortid: string;
   sourceId: string;
+  type: 'directory';
 };
 
 export type Template = {