improve the rendering performance by passing by reference

ee/app/assets/javascripts/ide/stores/getters.js

-import { sortTree } from './utils';
-
 export const openFilesMap = state => state.openFiles.map(path => state.entries[path]);
 export const changedFilesMap = state => state.changedFiles.map(path => state.entries[path]);
 
@@ -21,13 +19,5 @@ export const treeList = (state) => {
 
   if (!tree) return [];
 
-  const map = arr => sortTree(arr.tree.map((key) => {
-    const entity = state.entries[key];
-    return {
-      ...entity,
-      tree: !arr.tree.length ? [] : map(entity),
-    };
-  }));
-
-  return map(tree);
+  return tree.tree;
 };

ee/app/assets/javascripts/ide/stores/mutations/file.js

@@ -2,25 +2,13 @@ import * as types from '../mutation_types';
 
 export default {
   [types.SET_FILE_ACTIVE](state, { path, active }) {
-    Object.assign(state, {
-      entries: {
-        ...state.entries,
-        [path]: {
-          ...state.entries[path],
-          active,
-        },
-      },
+    Object.assign(state.entries[path], {
+      active,
     });
   },
   [types.TOGGLE_FILE_OPEN](state, path) {
-    Object.assign(state, {
-      entries: {
-        ...state.entries,
-        [path]: {
-          ...state.entries[path],
-          opened: !state.entries[path].opened,
-        },
-      },
+    Object.assign(state.entries[path], {
+      opened: !state.entries[path].opened,
     });
 
     if (state.entries[path].opened) {
@@ -30,91 +18,49 @@ export default {
     }
   },
   [types.SET_FILE_DATA](state, { data, file }) {
-    Object.assign(state, {
-      entries: {
-        ...state.entries,
-        [file.path]: {
-          ...state.entries[file.path],
-          id: data.id,
-          blamePath: data.blame_path,
-          commitsPath: data.commits_path,
-          permalink: data.permalink,
-          rawPath: data.raw_path,
-          binary: data.binary,
-          renderError: data.render_error,
-        },
-      },
+    Object.assign(state.entries[file.path], {
+      id: data.id,
+      blamePath: data.blame_path,
+      commitsPath: data.commits_path,
+      permalink: data.permalink,
+      rawPath: data.raw_path,
+      binary: data.binary,
+      renderError: data.render_error,
     });
   },
   [types.SET_FILE_RAW_DATA](state, { file, raw }) {
-    Object.assign(state, {
-      entries: {
-        ...state.entries,
-        [file.path]: {
-          ...state.entries[file.path],
-          raw,
-        },
-      },
+    Object.assign(state.entries[file.path], {
+      raw,
     });
   },
   [types.UPDATE_FILE_CONTENT](state, { path, content }) {
     const changed = content !== state.entries[path].raw;
 
-    Object.assign(state, {
-      entries: {
-        ...state.entries,
-        [path]: {
-          ...state.entries[path],
-          content,
-          changed,
-        },
-      },
+    Object.assign(state.entries[path], {
+      content,
+      changed,
     });
   },
   [types.SET_FILE_LANGUAGE](state, { file, fileLanguage }) {
-    Object.assign(state, {
-      entries: {
-        ...state.entries,
-        [file.path]: {
-          ...state.entries[file.path],
-          fileLanguage,
-        },
-      },
+    Object.assign(state.entries[file.path], {
+      fileLanguage,
     });
   },
   [types.SET_FILE_EOL](state, { file, eol }) {
-    Object.assign(state, {
-      entries: {
-        ...state.entries,
-        [file.path]: {
-          ...state.entries[file.path],
-          eol,
-        },
-      },
+    Object.assign(state.entries[file.path], {
+      eol,
     });
   },
   [types.SET_FILE_POSITION](state, { file, editorRow, editorColumn }) {
-    Object.assign(state, {
-      entries: {
-        ...state.entries,
-        [file.path]: {
-          ...state.entries[file.path],
-          editorRow,
-          editorColumn,
-        },
-      },
+    Object.assign(state.entries[file.path], {
+      editorRow,
+      editorColumn,
     });
   },
   [types.DISCARD_FILE_CHANGES](state, file) {
-    Object.assign(state, {
-      entries: {
-        ...state.entries,
-        [file.path]: {
-          ...state.entries[file.path],
-          content: state.entries[file.path].raw,
-          changed: false,
-        },
-      },
+    Object.assign(state.entries[file.path], {
+      content: state.entries[file.path].raw,
+      changed: false,
     });
   },
   [types.CREATE_TMP_FILE](state, { file, parent }) {
@@ -127,14 +73,8 @@ export default {
     state.changedFiles.splice(state.changedFiles.indexOf(path), 1);
   },
   [types.TOGGLE_FILE_CHANGED](state, { file, changed }) {
-    Object.assign(state, {
-      entries: {
-        ...state.entries,
-        [file.path]: {
-          ...state.entries[file.path],
-          changed,
-        },
-      },
+    Object.assign(state.entries[file.path], {
+      changed,
     });
   },
 };

ee/app/assets/javascripts/ide/stores/mutations/tree.js

@@ -2,14 +2,8 @@ import * as types from '../mutation_types';
 
 export default {
   [types.TOGGLE_TREE_OPEN](state, tree) {
-    Object.assign(state, {
-      entries: {
-        ...state.entries,
-        [tree.path]: {
-          ...state.entries[tree.path],
-          opened: !state.entries[tree.path].opened,
-        },
-      },
+    Object.assign(state.entries[tree.path], {
+      opened: !state.entries[tree.path].opened,
     });
   },
   [types.CREATE_TREE](state, { treePath }) {

ee/app/assets/javascripts/ide/stores/workers/files_decorator_worker.js

-import { decorateData } from '../utils';
+import {
+  decorateData,
+  sortTree,
+} from '../utils';
 
 self.addEventListener('message', (e) => {
   const { data, projectId, branchId } = e.data;
@@ -31,9 +34,9 @@ self.addEventListener('message', (e) => {
           });
 
           if (parentFolder) {
-            parentFolder.tree.push(tree.path);
+            parentFolder.tree.push(tree);
           } else {
-            treeList.push(tree.path);
+            treeList.push(tree);
           }
 
           pathAcc.push(tree.path);
@@ -62,9 +65,9 @@ self.addEventListener('message', (e) => {
     });
 
     if (fileFolder) {
-      fileFolder.tree.push(path);
+      fileFolder.tree.push(file);
     } else {
-      treeList.push(file.path);
+      treeList.push(file);
     }
 
     return acc;
@@ -72,6 +75,6 @@ self.addEventListener('message', (e) => {
 
   self.postMessage({
     entries,
-    treeList,
+    treeList: sortTree(treeList),
   });
 });