Web: React to 16.x and other dependencies

Clients/Xamarin.Interactive.Client.Web/ClientApp/components/Menu.tsx

@@ -32,8 +32,8 @@ interface StyleButtonState {
 
 class StyleButton extends React.Component<StyleButtonProps, StyleButtonState> {
     onToggle: (e: any) => void;
-    constructor() {
-        super()
+    constructor(props: StyleButtonProps) {
+        super(props)
         this.onToggle = (e) => {
             e.preventDefault()
             this.props.onToggle(this.props.style)

Clients/Xamarin.Interactive.Client.Web/ClientApp/components/MonacoCellEditor.tsx

@@ -56,6 +56,8 @@ export class MonacoCellEditor extends React.Component<MonacoCellEditorProps, Mon
 
     componentDidMount() {
         const monacoContainer = ReactDOM.findDOMNode(this)
+        if (!(monacoContainer instanceof Element))
+            throw 'monacoContainer is not an Element'
         this.editor = this.buildEditor(monacoContainer)
         this.props.blockProps.setModelId(this.editor.getModel().id)
         this.props.blockProps.subscribeToEditor((message: EditorMessage) => {
@@ -90,6 +92,7 @@ export class MonacoCellEditor extends React.Component<MonacoCellEditorProps, Mon
 
     buildEditor(elem: Element) {
         const targetElem = document.createElement("div")
+
         const editor = monaco.editor.create(targetElem, {
             value: this.props.block.text,
             language: "csharp",
@@ -371,8 +374,11 @@ export class MonacoCellEditor extends React.Component<MonacoCellEditorProps, Mon
         this.editor!.setSelection(selection)
     }
 
-    getClientWidth() {
-        return ReactDOM.findDOMNode(this).clientWidth
+    getClientWidth(): number {
+        const node = ReactDOM.findDOMNode(this)
+        if (node instanceof Element)
+            return node.clientWidth
+        return 0
     }
 
     getEditorLines() {

Clients/Xamarin.Interactive.Client.Web/ClientApp/components/WorkbookEditor.tsx

@@ -51,11 +51,12 @@ type DraftBlockType = "header-one" | "header-two" | "header-three" | "header-fou
 | "unordered-list-item" | "ordered-list-item" | "unstyled";
 
 export class WorkbookEditor extends React.Component<WorkbooksEditorProps, WorkbooksEditorState> implements MonacoCellMapper {
+    private readonly editorContainer: React.RefObject<HTMLDivElement> = React.createRef<HTMLDivElement>()
+
     subscriptors: ((m: EditorMessage) => void)[];
     monacoProviderTickets: monaco.IDisposable[] = [];
     cellIdMappings: WorkbookCellIdMapping[] = [];
     focusedCodeEditors: Set<string> = Set()
-    editorContainer: HTMLDivElement | null = null
 
     constructor(props: WorkbooksEditorProps) {
         super(props);
@@ -110,7 +111,7 @@ export class WorkbookEditor extends React.Component<WorkbooksEditorProps, Workbo
         (this.refs.editor as any).focus();
 
         // Only do this if the editor container was clicked.
-        if (e && this.editorContainer && e.target === this.editorContainer) {
+        if (e && this.editorContainer.current && e.target === this.editorContainer.current) {
             // Select the last block
             let editorState = this.state.editorState;
             const currentContent = editorState.getCurrentContent();
@@ -508,7 +509,10 @@ export class WorkbookEditor extends React.Component<WorkbooksEditorProps, Workbo
 
     render() {
         return (
-            <div className='WorkbookEditor-container' ref={div => this.editorContainer = div} onClick={(e) => this.focus(e)}>
+            <div
+                ref={this.editorContainer}
+                className='WorkbookEditor-container'
+                onClick={(e) => this.focus(e)}>
                 <Editor
                     ref="editor"
                     placeholder="Author content in markdown and use ``` to insert a new code cell"

Clients/Xamarin.Interactive.Client.Web/ClientApp/components/WorkbookShell.tsx

@@ -33,16 +33,17 @@ interface WorkbookShellState {
 }
 
 export class WorkbookShell extends React.Component<any, WorkbookShellState> {
+    private readonly commandBar: React.RefObject<WorkbookCommandBar> = React.createRef<WorkbookCommandBar>()
+    private readonly workbookEditor: React.RefObject<WorkbookEditor> = React.createRef<WorkbookEditor>()
+    private readonly fileButton: React.RefObject<HTMLInputElement> = React.createRef<HTMLInputElement>()
+    private readonly packageSearchDialog: React.RefObject<PackageSearch> = React.createRef<PackageSearch>()
+
     private shellContext: WorkbookShellContext
-    private commandBar: WorkbookCommandBar | null = null
-    private workbookEditor: WorkbookEditor | null = null
-    private fileButton: HTMLInputElement | null = null
-    private packageSearchDialog: PackageSearch | null = null
     private workbook: Workbook | null = null
     private workspaceAvailable: boolean = false
 
-    constructor() {
-        super()
+    constructor(props: any) {
+        super(props)
 
         this.onDocumentKeyDown = this.onDocumentKeyDown.bind(this)
         this.onSessionEvent = this.onSessionEvent.bind(this)
@@ -67,8 +68,8 @@ export class WorkbookShell extends React.Component<any, WorkbookShellState> {
     private onSessionEvent(session: WorkbookSession, sessionEvent: SessionEvent) {
         if (sessionEvent.kind === SessionEventKind.Ready) {
             this.workspaceAvailable = true
-            if (this.workbookEditor)
-                this.workbookEditor.setUpInitialState()
+            if (this.workbookEditor.current)
+                this.workbookEditor.current.setUpInitialState()
         } else {
             this.workspaceAvailable = false
         }
@@ -90,10 +91,6 @@ export class WorkbookShell extends React.Component<any, WorkbookShellState> {
         document.addEventListener('keydown', this.onDocumentKeyDown)
 
         this.shellContext.session.disconnect()
-
-        this.commandBar = null
-        this.workbookEditor = null
-        this.fileButton = null
     }
 
     private onDocumentKeyDown(e: KeyboardEvent): void {
@@ -132,13 +129,12 @@ export class WorkbookShell extends React.Component<any, WorkbookShellState> {
     }
 
     triggerFilePicker() {
-        if (this.fileButton == null)
-            return;
-        this.fileButton.click();
+        if (this.fileButton.current)
+            this.fileButton.current.click();
     }
 
     async triggerGistPicker() {
-        if (!this.workbookEditor)
+        if (!this.workbookEditor.current)
             return;
 
         // TODO: Real UI.
@@ -147,7 +143,7 @@ export class WorkbookShell extends React.Component<any, WorkbookShellState> {
             return;
 
         this.workbook = await loadWorkbookFromGist(this.shellContext.session, gistUrl);
-        await this.workbookEditor.loadNewContent(this.workbook.markdownContent)
+        await this.workbookEditor.current.loadNewContent(this.workbook.markdownContent)
         await this.restoreNuGetPackages()
     }
 
@@ -180,7 +176,7 @@ export class WorkbookShell extends React.Component<any, WorkbookShellState> {
     }
 
     async loadWorkbook(file: File, reader: FileReader) {
-        if (!this.workbookEditor)
+        if (!this.workbookEditor.current)
             return
 
         if (file.type === "application/zip" || this.sniffHeader(reader.result)) {
@@ -190,7 +186,7 @@ export class WorkbookShell extends React.Component<any, WorkbookShellState> {
             this.workbook = await loadWorkbookFromString(this.shellContext.session, file.name, workbookString)
         }
 
-        await this.workbookEditor.loadNewContent(this.workbook.markdownContent)
+        await this.workbookEditor.current.loadNewContent(this.workbook.markdownContent)
         await this.restoreNuGetPackages()
     }
 
@@ -209,9 +205,9 @@ export class WorkbookShell extends React.Component<any, WorkbookShellState> {
         });
 
         const restoredPackages = await this.shellContext.session.restorePackages(this.workbook.manifest.packages.toArray())
-        if (this.packageSearchDialog) {
-            this.packageSearchDialog.setState({
-                installedPackagesIds: this.packageSearchDialog.state.installedPackagesIds.concat(
+        if (this.packageSearchDialog.current) {
+            this.packageSearchDialog.current.setState({
+                installedPackagesIds: this.packageSearchDialog.current.state.installedPackagesIds.concat(
                     restoredPackages.map(p => p.packageId))
             })
         }
@@ -222,8 +218,8 @@ export class WorkbookShell extends React.Component<any, WorkbookShellState> {
     }
 
     saveWorkbook() {
-        if (this.workbookEditor != null && this.workbook != null) {
-            const contentToSave = this.workbookEditor.getContentToSave()
+        if (this.workbookEditor.current != null && this.workbook != null) {
+            const contentToSave = this.workbookEditor.current.getContentToSave()
             const saveableManifest = this.workbook.getManifestToSave()
             const workbook = matter.stringify(contentToSave, saveableManifest, {
                 delims: ["---", "---\n"]
@@ -234,16 +230,16 @@ export class WorkbookShell extends React.Component<any, WorkbookShellState> {
     }
 
     dumpDraftState() {
-        if (this.workbookEditor != null) {
-            this.workbookEditor.logContent();
+        if (this.workbookEditor.current != null) {
+            this.workbookEditor.current.logContent();
         }
     }
 
     render() {
         return (
             <div className='WorkbookShell-container'>
                 <WorkbookCommandBar
-                    ref={component => this.commandBar = component}
+                    ref={this.commandBar}
                     evaluateWorkbook={this.evaluateWorkbook}
                     addPackages={this.showPackageDialog}
                     loadWorkbook={this.triggerFilePicker}
@@ -252,19 +248,19 @@ export class WorkbookShell extends React.Component<any, WorkbookShellState> {
                     shellContext={this.shellContext}
                     loadGist={this.triggerGistPicker}/>
                 <PackageSearch
-                    ref={component => this.packageSearchDialog = component}
+                    ref={this.packageSearchDialog}
                     session={this.shellContext.session}
                     notifyDismiss={() => this.hidePackageDialog()}
                     getIsHidden={() => this.state.isPackageDialogHidden}/>
                 <WorkbookEditor
                     shellContext={this.shellContext}
-                    ref={(editor) => this.workbookEditor = editor }
+                    ref={this.workbookEditor}
                     content=''/>
                 <StatusMessageBar shellContext={this.shellContext}/>
                 <div style={{ display: "none" }}>
                     <input
                         type="file"
-                        ref={(input) => { this.fileButton = input; }}
+                        ref={this.fileButton}
                         onChange={(e: React.ChangeEvent<HTMLInputElement>) => this.workbookFileChosen(e)} />
                 </div>
             </div>

Clients/Xamarin.Interactive.Client.Web/package.json

@@ -3,17 +3,17 @@
   "private": true,
   "version": "0.0.0",
   "devDependencies": {
-    "@types/draft-js": "^0.10.20",
+    "@types/draft-js": "^0.10.22",
     "@types/file-saver": "^1.3.0",
     "@types/history": "4.6.0",
     "@types/jszip": "^3.1.3",
     "@types/markdown-it": "0.0.4",
     "@types/prop-types": "^15.5.2",
-    "@types/react": "^15.5.1",
-    "@types/react-dom": "15.5.1",
+    "@types/react": "^16.3.13",
+    "@types/react-dom": "16.0.5",
     "@types/react-hot-loader": "3.0.3",
-    "@types/react-router": "4.0.12",
-    "@types/react-router-dom": "4.0.5",
+    "@types/react-router": "4.0.24",
+    "@types/react-router-dom": "4.2.6",
     "@types/to-markdown": "^3.0.0",
     "@types/uuid": "^3.4.3",
     "@types/webpack-env": "1.13.0",
@@ -28,10 +28,10 @@
     "isomorphic-fetch": "2.2.1",
     "json-loader": "0.5.4",
     "node-sass": "^4.7.2",
-    "react": "15.6.1",
-    "react-dom": "15.6.1",
+    "react": "16.3.2",
+    "react-dom": "16.3.2",
     "react-hot-loader": "3.0.0-beta.7",
-    "react-router-dom": "4.1.1",
+    "react-router-dom": "4.2.2",
     "sass-loader": "^6.0.6",
     "style-loader": "0.18.2",
     "typescript": "^2.8.0",
@@ -43,16 +43,16 @@
     "@aspnet/signalr": "=1.0.0-preview2-30131",
     "draft-js": "^0.10.5",
     "draft-js-export-html": "^1.2.0",
-    "draft-js-markdown-plugin": "^1.1.1",
-    "draft-js-plugins-editor": "^2.0.4",
+    "draft-js-markdown-plugin": "^1.4.4",
+    "draft-js-plugins-editor": "^2.0.8",
     "file-saver": "^1.3.3",
     "gray-matter": "^3.1.1",
     "immutable": "^3.8.2",
     "jszip": "^3.1.5",
     "markdown-it": "^8.4.1",
     "monaco-editor": "^0.10.1",
-    "office-ui-fabric-react": "^5.58.0",
+    "office-ui-fabric-react": "^5.95.0",
     "turndown": "^4.0.1",
     "uuid": "^3.2.1"
   }
-}
+}