1 files changed, 54 insertions, 17 deletions
diff --git a/src/client/views/ScriptingRepl.tsx b/src/client/views/ScriptingRepl.tsx
index 9966dbced..8251d20dc 100644
--- a/src/client/views/ScriptingRepl.tsx
+++ b/src/client/views/ScriptingRepl.tsx
@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, observable } from 'mobx';
+import { action, observable, makeObservable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { DocumentManager } from '../util/DocumentManager';
@@ -10,24 +10,40 @@ import { undoable } from '../util/UndoManager';
 import { DocumentIconContainer } from './nodes/DocumentIcon';
 import { OverlayView } from './OverlayView';
 import './ScriptingRepl.scss';
+import { copyProps } from '../../Utils';
 
-@observer
-export class ScriptingObjectDisplay extends React.Component<{ scrollToBottom: () => void; value: { [key: string]: any }; name?: string }> {
+interface ReplProps {
+    scrollToBottom: () => void;
+    value: { [key: string]: any };
+    name?: string;
+}
+export class ScriptingObjectDisplay extends React.Component<ReplProps> {
     @observable collapsed = true;
 
+    _prevProps: ReplProps;
+    @observable _props: ReplProps;
+    constructor(props: ReplProps) {
+        super(props);
+        this._props = this._prevProps = props;
+        makeObservable(this);
+    }
+    componentDidUpdate(): void {
+        copyProps(this);
+    }
+
     @action
     toggle = () => {
         this.collapsed = !this.collapsed;
-        this.props.scrollToBottom();
+        this._props.scrollToBottom();
     };
 
     render() {
-        const val = this.props.value;
+        const val = this._props.value;
         const proto = Object.getPrototypeOf(val);
         const name = (proto && proto.constructor && proto.constructor.name) || String(val);
-        const title = this.props.name ? (
+        const title = this._props.name ? (
             <>
-                <b>{this.props.name} : </b>
+                <b>{this._props.name} : </b>
                 {name}
             </>
         ) : (
@@ -53,7 +69,7 @@ export class ScriptingObjectDisplay extends React.Component<{ scrollToBottom: ()
                     </div>
                     <div className="scriptingObject-fields">
                         {Object.keys(val).map(key => (
-                            <ScriptingValueDisplay {...this.props} name={key} />
+                            <ScriptingValueDisplay {...this._props} name={key} />
                         ))}
                     </div>
                 </div>
@@ -62,17 +78,32 @@ export class ScriptingObjectDisplay extends React.Component<{ scrollToBottom: ()
     }
 }
 
+interface replValueProps {
+    scrollToBottom: () => void;
+    value: any;
+    name?: string;
+}
 @observer
-export class ScriptingValueDisplay extends React.Component<{ scrollToBottom: () => void; value: any; name?: string }> {
+export class ScriptingValueDisplay extends React.Component<replValueProps> {
+    _prevProps: replValueProps;
+    @observable _props: replValueProps;
+    constructor(props: replValueProps) {
+        super(props);
+        this._props = this._prevProps = props;
+        makeObservable(this);
+    }
+    componentDidUpdate() {
+        copyProps(this);
+    }
     render() {
-        const val = this.props.name ? this.props.value[this.props.name] : this.props.value;
+        const val = this._props.name ? this._props.value[this._props.name] : this._props.value;
         if (typeof val === 'object') {
-            return <ScriptingObjectDisplay scrollToBottom={this.props.scrollToBottom} value={val} name={this.props.name} />;
+            return <ScriptingObjectDisplay scrollToBottom={this._props.scrollToBottom} value={val} name={this._props.name} />;
         } else if (typeof val === 'function') {
             const name = '[Function]';
-            const title = this.props.name ? (
+            const title = this._props.name ? (
                 <>
-                    <b>{this.props.name} : </b>
+                    <b>{this._props.name} : </b>
                     {name}
                 </>
             ) : (
@@ -81,9 +112,9 @@ export class ScriptingValueDisplay extends React.Component<{ scrollToBottom: ()
             return <div className="scriptingObject-leaf">{title}</div>;
         } else {
             const name = String(val);
-            const title = this.props.name ? (
+            const title = this._props.name ? (
                 <>
-                    <b>{this.props.name} : </b>
+                    <b>{this._props.name} : </b>
                     {name}
                 </>
             ) : (
@@ -96,6 +127,11 @@ export class ScriptingValueDisplay extends React.Component<{ scrollToBottom: ()
 
 @observer
 export class ScriptingRepl extends React.Component {
+    constructor(props: any) {
+        super(props);
+        makeObservable(this);
+    }
+
     @observable private commands: { command: string; result: any }[] = [];
     private commandsHistory: string[] = [];
 
@@ -136,7 +172,8 @@ export class ScriptingRepl extends React.Component {
                                     const m = parseInt(match[1]);
                                     usedDocuments.push(m);
                                 } else {
-                                    return ts.createPropertyAccess(ts.createIdentifier('args'), node);
+                                    return ts.factory.createPropertyAccessExpression(ts.factory.createIdentifier('args'), node);
+                                    //  ts.createPropertyAccess(ts.createIdentifier('args'), node);
                                 }
                             }
                         }
@@ -156,7 +193,7 @@ export class ScriptingRepl extends React.Component {
             case 'Enter': {
                 e.stopPropagation();
                 const docGlobals: { [name: string]: any } = {};
-                DocumentManager.Instance.DocumentViews.forEach((dv, i) => (docGlobals[`d${i}`] = dv.props.Document));
+                DocumentManager.Instance.DocumentViews.forEach((dv, i) => (docGlobals[`d${i}`] = dv.Document));
                 const globals = ScriptingGlobals.makeMutableGlobalsCopy(docGlobals);
                 const script = CompileScript(this.commandString, { typecheck: false, addReturn: true, editable: true, params: { args: 'any' }, transformer: this.getTransformer(), globals });
                 if (!script.compiled) {