diff options
Diffstat (limited to 'src/debug')
| -rw-r--r-- | src/debug/Repl.tsx | 37 | ||||
| -rw-r--r-- | src/debug/Viewer.tsx | 72 |
2 files changed, 53 insertions, 56 deletions
diff --git a/src/debug/Repl.tsx b/src/debug/Repl.tsx index 1b12e208c..b8081648f 100644 --- a/src/debug/Repl.tsx +++ b/src/debug/Repl.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import * as ReactDOM from 'react-dom'; +import * as ReactDOM from 'react-dom/client'; import { observer } from 'mobx-react'; import { observable, computed } from 'mobx'; import { CompileScript } from '../client/util/Scripting'; @@ -11,39 +11,40 @@ import { resolvedPorts } from '../client/util/CurrentUserUtils'; @observer class Repl extends React.Component { - @observable text: string = ""; + @observable text: string = ''; - @observable executedCommands: { command: string, result: any }[] = []; + @observable executedCommands: { command: string; result: any }[] = []; onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => { this.text = e.target.value; - } + }; onKeyDown = (e: React.KeyboardEvent) => { - if (!e.ctrlKey && e.key === "Enter") { + if (!e.ctrlKey && e.key === 'Enter') { e.preventDefault(); const script = CompileScript(this.text, { - addReturn: true, typecheck: false, - params: { makeInterface: "any" } + addReturn: true, + typecheck: false, + params: { makeInterface: 'any' }, }); if (!script.compiled) { - this.executedCommands.push({ command: this.text, result: "Compile Error" }); + this.executedCommands.push({ command: this.text, result: 'Compile Error' }); } else { const result = script.run({ makeInterface }, e => this.executedCommands.push({ command: this.text, result: e.message || e })); result.success && this.executedCommands.push({ command: this.text, result: result.result }); } - this.text = ""; + this.text = ''; } - } + }; @computed get commands() { return this.executedCommands.map(command => { return ( - <div style={{ marginTop: "5px" }}> + <div style={{ marginTop: '5px' }}> <p>{command.command}</p> {/* <pre>{JSON.stringify(command.result, null, 2)}</pre> */} - <pre>{command.result instanceof RefField || command.result instanceof ObjectField ? "object" : String(command.result)}</pre> + <pre>{command.result instanceof RefField || command.result instanceof ObjectField ? 'object' : String(command.result)}</pre> </div> ); }); @@ -52,16 +53,14 @@ class Repl extends React.Component { render() { return ( <div> - <div style={{ verticalAlign: "bottom" }}> - {this.commands} - </div> - <textarea style={{ width: "100%", position: "absolute", bottom: "0px" }} value={this.text} onChange={this.onChange} onKeyDown={this.onKeyDown} /> + <div style={{ verticalAlign: 'bottom' }}>{this.commands}</div> + <textarea style={{ width: '100%', position: 'absolute', bottom: '0px' }} value={this.text} onChange={this.onChange} onKeyDown={this.onKeyDown} /> </div> ); } } (async function () { - DocServer.init(window.location.protocol, window.location.hostname, resolvedPorts.socket, "repl"); - ReactDOM.render(<Repl />, document.getElementById("root")); -})();
\ No newline at end of file + DocServer.init(window.location.protocol, window.location.hostname, resolvedPorts.socket, 'repl'); + ReactDOM.createRoot(document.getElementById('root')!).render(<Repl />); +})(); diff --git a/src/debug/Viewer.tsx b/src/debug/Viewer.tsx index ee7dd1fc1..02038c426 100644 --- a/src/debug/Viewer.tsx +++ b/src/debug/Viewer.tsx @@ -1,5 +1,4 @@ import { action, configure, observable, ObservableMap, Lambda } from 'mobx'; -import "normalize.css"; import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { observer } from 'mobx-react'; @@ -21,7 +20,6 @@ URLField; ScriptField; CursorField; - function applyToDoc(doc: { [index: string]: FieldResult }, key: string, scriptString: string): boolean; function applyToDoc(doc: { [index: number]: FieldResult }, key: number, scriptString: string): boolean; function applyToDoc(doc: any, key: string | number, scriptString: string): boolean { @@ -37,11 +35,11 @@ function applyToDoc(doc: any, key: string | number, scriptString: string): boole } configure({ - enforceActions: "observed" + enforceActions: 'observed', }); @observer -class ListViewer extends React.Component<{ field: List<Field> }>{ +class ListViewer extends React.Component<{ field: List<Field> }> { @observable expanded = false; @@ -49,14 +47,16 @@ class ListViewer extends React.Component<{ field: List<Field> }>{ onClick = (e: React.MouseEvent) => { this.expanded = !this.expanded; e.stopPropagation(); - } + }; render() { let content; if (this.expanded) { content = ( <div> - {this.props.field.map((field, index) => <DebugViewer field={field} key={index} setValue={value => applyToDoc(this.props.field, index, value)} />)} + {this.props.field.map((field, index) => ( + <DebugViewer field={field} key={index} setValue={value => applyToDoc(this.props.field, index, value)} /> + ))} </div> ); } else { @@ -66,7 +66,7 @@ class ListViewer extends React.Component<{ field: List<Field> }>{ <div> <button onClick={this.onClick}>Toggle</button> {content} - </div > + </div> ); } } @@ -80,7 +80,7 @@ class DocumentViewer extends React.Component<{ field: Doc }> { onClick = (e: React.MouseEvent) => { this.expanded = !this.expanded; e.stopPropagation(); - } + }; render() { let content; @@ -96,10 +96,7 @@ class DocumentViewer extends React.Component<{ field: Doc }> { }); content = ( <div> - Document ({this.props.field[Id]}) - <div style={{ paddingLeft: "25px" }}> - {fields} - </div> + Document ({this.props.field[Id]})<div style={{ paddingLeft: '25px' }}>{fields}</div> </div> ); } else { @@ -109,24 +106,23 @@ class DocumentViewer extends React.Component<{ field: Doc }> { <div> <button onClick={this.onClick}>Toggle</button> {content} - </div > + </div> ); } } @observer -class DebugViewer extends React.Component<{ field: FieldResult, setValue(value: string): boolean }> { - +class DebugViewer extends React.Component<{ field: FieldResult; setValue(value: string): boolean }> { render() { let content; const field = this.props.field; if (field instanceof List) { - content = (<ListViewer field={field} />); + content = <ListViewer field={field} />; } else if (field instanceof Doc) { - content = (<DocumentViewer field={field} />); - } else if (typeof field === "string") { + content = <DocumentViewer field={field} />; + } else if (typeof field === 'string') { content = <p>"{field}"</p>; - } else if (typeof field === "number" || typeof field === "boolean") { + } else if (typeof field === 'number' || typeof field === 'boolean') { content = <p>{field}</p>; } else if (field instanceof RichTextField) { content = <p>RTF: {field.Data}</p>; @@ -153,28 +149,30 @@ class Viewer extends React.Component { @action inputOnChange = (e: React.ChangeEvent<HTMLInputElement>) => { this.idToAdd = e.target.value; - } + }; @action onKeyPress = (e: React.KeyboardEvent<HTMLDivElement>) => { - if (e.key === "Enter") { - DocServer.GetRefField(this.idToAdd).then(action((field: any) => { - if (field !== undefined) { - this.fields.push(field); - } - })); - this.idToAdd = ""; + if (e.key === 'Enter') { + DocServer.GetRefField(this.idToAdd).then( + action((field: any) => { + if (field !== undefined) { + this.fields.push(field); + } + }) + ); + this.idToAdd = ''; } - } + }; render() { return ( <> - <input value={this.idToAdd} - onChange={this.inputOnChange} - onKeyDown={this.onKeyPress} /> + <input value={this.idToAdd} onChange={this.inputOnChange} onKeyDown={this.onKeyPress} /> <div> - {this.fields.map((field, index) => <DebugViewer field={field} key={index} setValue={() => false}></DebugViewer>)} + {this.fields.map((field, index) => ( + <DebugViewer field={field} key={index} setValue={() => false}></DebugViewer> + ))} </div> </> ); @@ -182,11 +180,11 @@ class Viewer extends React.Component { } (async function () { - await DocServer.init(window.location.protocol, window.location.hostname, resolvedPorts.socket, "viewer"); - ReactDOM.render(( - <div style={{ position: "absolute", width: "100%", height: "100%" }}> + await DocServer.init(window.location.protocol, window.location.hostname, resolvedPorts.socket, 'viewer'); + ReactDOM.render( + <div style={{ position: 'absolute', width: '100%', height: '100%' }}> <Viewer /> - </div>), + </div>, document.getElementById('root') ); -})();
\ No newline at end of file +})(); |