Put back package.json saving in Live

Fixes codesandbox#820

Author: CompuIves

packages/app/src/app/components/CodeEditor/Configuration/index.js

@@ -1,9 +1,10 @@
 // @flow
 import React from 'react';
-import EntryIcons from 'app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons';
+import { TextOperation } from 'ot';
 import type { Module } from 'common/types';
 import getUI from 'common/templates/configuration/ui';
 import getType from 'app/utils/get-type';
+import EntryIcons from 'app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons';
 import Tooltip from 'common/components/Tooltip';
 
 import CodeIcon from 'react-icons/lib/md/code';
@@ -21,6 +22,7 @@ export default class Configuration extends React.PureComponent<Props>
   disposeInitializer: ?() => void;
 
   currentModule: Module;
+  receivingCode: ?boolean = false;
 
   constructor(props: Props) {
     super(props);
@@ -45,11 +47,40 @@ export default class Configuration extends React.PureComponent<Props>
     this.forceUpdate();
   };
 
+  setReceivingCode = (receiving: boolean) => {
+    this.receivingCode = receiving;
+  };
+
+  sendLiveChanges = (code: string) => {
+    const { sendTransforms, isLive, onCodeReceived } = this.props;
+    if (sendTransforms) {
+      const oldCode = this.currentModule.code || '';
+
+      // We don't know exactly what changed, just that the code changed. So
+      // we send the whole code.
+
+      const op = new TextOperation();
+
+      op.delete(oldCode.length);
+      op.insert(code);
+
+      sendTransforms(op);
+    } else if (!isLive && onCodeReceived) {
+      onCodeReceived();
+    }
+  };
+
   changeModule = (newModule: Module) => {
     this.currentModule = newModule;
   };
 
   updateFile = (code: string) => {
+    const { isLive, sendTransforms } = this.props;
+
+    if (isLive && sendTransforms && !this.receivingCode) {
+      this.sendLiveChanges(code);
+    }
+
     this.props.onChange(code);
   };
 

packages/app/src/app/store/modules/editor/actions.js

@@ -16,26 +16,33 @@ export async function getLatestVersion({ props, api }) {
 }
 
 export function addNpmDependencyToPackage({ state, props }) {
-  const { parsed } = state.get('editor.parsedConfigurations.package');
+  const { parsed, code: oldCode } = state.get(
+    'editor.parsedConfigurations.package'
+  );
+
   const type = props.isDev ? 'devDependencies' : 'dependencies';
 
   parsed[type] = parsed[type] || {};
   parsed[type][props.name] = props.version || 'latest';
   parsed[type] = sortObjectByKeys(parsed[type]);
 
   return {
+    oldCode,
     code: JSON.stringify(parsed, null, 2),
     moduleShortid: state.get(`editor.currentPackageJSON.shortid`),
   };
 }
 
 export function removeNpmDependencyFromPackage({ state, props }) {
-  const { parsed } = state.get('editor.parsedConfigurations.package');
+  const { parsed, code: oldCode } = state.get(
+    'editor.parsedConfigurations.package'
+  );
 
   delete parsed.dependencies[props.name];
   parsed.dependencies = sortObjectByKeys(parsed.dependencies);
 
   return {
+    oldCode,
     code: JSON.stringify(parsed, null, 2),
     moduleShortid: state.get(`editor.currentPackageJSON.shortid`),
   };

packages/app/src/app/store/modules/editor/sequences.js

@@ -8,6 +8,8 @@ import {
   getSelectionsForCurrentModule,
   sendChangeCurrentModule,
   setReceivingStatus,
+  getCodeOperation,
+  sendTransform,
 } from '../live/actions';
 import {
   ensureOwnedSandbox,
@@ -180,12 +182,16 @@ export const addNpmDependency = [
     false: [actions.getLatestVersion],
   },
   actions.addNpmDependencyToPackage,
+  getCodeOperation,
+  sendTransform,
   saveCode,
 ];
 
 export const removeNpmDependency = [
   ensureOwnedSandbox,
   actions.removeNpmDependencyFromPackage,
+  getCodeOperation,
+  sendTransform,
   saveCode,
 ];
 

packages/app/src/app/store/modules/live/actions.js

@@ -539,3 +539,16 @@ export function getCurrentModuleIdOfUser({ props, state }) {
 
   return {};
 }
+
+export function getCodeOperation({ props }) {
+  const { oldCode, code } = props;
+
+  const op = new TextOperation();
+
+  op.delete(oldCode.length);
+  op.insert(code);
+
+  return {
+    operation: op.toJSON(),
+  };
+}