Add run button

src/App.tsx

@@ -3,17 +3,15 @@ import AceEditor from 'react-ace';
 import './App.css';
 import { Connection } from './Connection';
 import { Terminal } from './Terminal';
+import { Run } from './Run';
 
 import 'ace-builds/src-noconflict/mode-python';
 import 'ace-builds/src-noconflict/theme-github';
 
-function onChange(newValue: string): void {
-    console.log('change', newValue);
-}
-
 function App(): JSX.Element {
     const connection = React.createRef<Connection>();
     const terminal = React.createRef<Terminal>();
+    const editor = React.createRef<AceEditor>();
     return (
         <div className="App">
             <header className="App-header">
@@ -21,18 +19,21 @@ function App(): JSX.Element {
                     onData={(e): void => terminal.current?.write(e)}
                     ref={connection}
                 />
+                <Run connection={connection} editor={editor} />
             </header>
             <Terminal
-                onData={(d): void => connection.current?.write(d)}
+                onData={(d): void => {
+                    connection.current?.write(d);
+                }}
                 ref={terminal}
             />
             <AceEditor
                 mode="python"
                 theme="github"
-                onChange={onChange}
                 name="editor"
                 editorProps={{ $blockScrolling: true }}
                 width="100%"
+                ref={editor}
             />
         </div>
     );

src/Connection.tsx

@@ -44,8 +44,19 @@ class Connection extends React.Component<ConnectionProperties, ConnectionState>
         this.onConnectClicked = this.onConnectClicked.bind(this);
     }
 
-    public write(data: Uint8Array): void {
-        this.rxChar?.writeValue(data);
+    public write(data: BufferSource): Promise<void> {
+        return this.rxChar?.writeValue(data) ?? Promise.reject('No rxChar');
+    }
+
+    public async downloadAndRun(data: Uint8Array): Promise<void> {
+        const sizeData = new Uint8Array(4);
+        new DataView(sizeData.buffer).setUint32(0, data.length);
+        await this.write(sizeData);
+        const chunk = 20;
+        for (let i = 0; i < data.length; i += chunk) {
+            await this.write(data.slice(i, i + chunk));
+            // TODO: wait for checksum response on every 5th write
+        }
     }
 
     private async connect(): Promise<void> {

src/Run.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import AceEditor from 'react-ace';
+import MpyCross from '@pybricks/mpy-cross';
+import { Connection } from './Connection';
+
+const mpy = MpyCross({ arguments: ['-mno-unicode'] });
+
+interface RunProperties {
+    readonly editor: React.RefObject<AceEditor>;
+    readonly connection: React.RefObject<Connection>;
+}
+
+class Run extends React.Component<RunProperties> {
+    constructor(props: RunProperties) {
+        super(props);
+        this.onClick = this.onClick.bind(this);
+    }
+    private async onClick(): Promise<void> {
+        try {
+            const session = this.props.editor.current?.editor.getSession();
+            const document = session.getDocument();
+            const data = mpy.compile(document.getValue());
+            await this.props.connection.current?.downloadAndRun(data);
+        } catch (err) {
+            alert(err);
+        }
+    }
+
+    render(): JSX.Element {
+        return (
+            <button name="connect" onClick={this.onClick}>
+                Run
+            </button>
+        );
+    }
+}
+
+export { Run };