package.json

@@ -32,6 +32,7 @@
     "postinstall": "electron-builder install-app-deps && node build/downloadDaemon.js"
   },
   "dependencies": {
+    "@types/three": "^0.93.1",
     "bluebird": "^3.5.1",
     "breakdance": "^3.0.1",
     "classnames": "^2.2.5",

src/renderer/component/common/markdown-preview.jsx

@@ -6,25 +6,34 @@ import remarkEmoji from 'remark-emoji';
 import ExternalLink from 'component/externalLink';
 import defaultSchema from 'hast-util-sanitize/lib/github.json';
 
+type MarkdownProps = {
+  content: ?string,
+  promptLinks?: boolean,
+};
+
+type SimpleLinkProps = {
+  href?: string,
+  title?: string,
+  children?: React.Node,
+};
+
+const SimpleLink = (props: SimpleLinkProps) => {
+  const { href, title, children } = props;
+  return (
+    <a href={href} title={title}>
+      {children}
+    </a>
+  );
+};
+
 // Use github sanitation schema
 const schema = { ...defaultSchema };
 
 // Extend sanitation schema to support lbry protocol
 schema.protocols.href[3] = 'lbry';
 
-type MarkdownProps = {
-  content: string,
-  promptLinks?: boolean,
-};
-
-const SimpleLink = ({ href, title, children }) => (
-  <a href={href} title={title}>
-    {children}
-  </a>
-);
-
 const MarkdownPreview = (props: MarkdownProps) => {
-  const { content, externalLinks, promptLinks } = props;
+  const { content, promptLinks } = props;
   const remarkOptions = {
     sanitize: schema,
     remarkReactComponents: {

src/renderer/component/fileRender/view.jsx

@@ -10,11 +10,11 @@ import HtmlViewer from 'component/viewers/htmlViewer';
 type Props = {
   mediaType: string,
   source: {
+    stream: string => void,
     fileName: string,
     fileType: string,
+    contentType: string,
     downloadPath: string,
-    stream: opts => void,
-    blob: callback => void,
   },
   currentTheme: string,
 };

src/renderer/component/viewers/codeViewer.jsx

@@ -1,6 +1,6 @@
 // @flow
 
-import React from 'react';
+import * as React from 'react';
 import CodeMirror from 'codemirror/lib/codemirror';
 import { openSnippetMenu, stopContextMenu } from 'util/contextMenu';
 
@@ -22,21 +22,20 @@ import 'codemirror/mode/javascript/javascript';
 
 type Props = {
   theme: string,
-  value: string,
+  value: ?string,
   contentType: string,
 };
 
 class CodeViewer extends React.PureComponent<Props> {
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
     this.codeMirror = null;
-    this.textarea = React.createRef();
   }
 
   componentDidMount() {
     const { theme, contentType } = this.props;
     // Init CodeMirror
-    this.codeMirror = CodeMirror.fromTextArea(this.textarea.current, {
+    this.codeMirror = CodeMirror.fromTextArea(this.textarea, {
       // Auto detect syntax with file contentType
       mode: contentType,
       // Adaptive theme
@@ -54,11 +53,14 @@ class CodeViewer extends React.PureComponent<Props> {
     this.codeMirror.on('contextmenu', openSnippetMenu);
   }
 
+  textarea: ?HTMLTextAreaElement;
+  codeMirror: any;
+
   render() {
     const { value } = this.props;
     return (
       <div className="code-viewer" onContextMenu={stopContextMenu}>
-        <textarea ref={this.textarea} disabled value={value} />
+        <textarea ref={textarea => (this.textarea = textarea)} disabled value={value} />
       </div>
     );
   }

src/renderer/component/viewers/documentViewer.jsx

@@ -8,19 +8,25 @@ import MarkdownPreview from 'component/common/markdown-preview';
 type Props = {
   theme: string,
   source: {
-    stream: opts => void,
+    stream: string => any,
     fileType: string,
     contentType: string,
   },
 };
 
-class DocumentViewer extends React.PureComponent<Props> {
+type State = {
-  constructor(props) {
+  error: boolean,
+  loading: boolean,
+  content: ?string,
+};
+
+class DocumentViewer extends React.PureComponent<Props, State> {
+  constructor(props: Props) {
     super(props);
     this.state = {
-      error: null,
+      error: false,
-      content: null,
       loading: true,
+      content: null,
     };
   }
 
@@ -38,13 +44,14 @@ class DocumentViewer extends React.PureComponent<Props> {
       this.setState({ content: data, loading: false });
     });
 
-    stream.on('error', error => {
+    stream.on('error', () => {
       this.setState({ error: true, loading: false });
     });
   }
 
-  renderDocument(content = null) {
+  renderDocument() {
     let viewer = null;
+    const { content } = this.state;
     const { source, theme } = this.props;
     const { fileType, contentType } = source;
     const markdownType = ['md', 'markdown'];
@@ -70,7 +77,7 @@ class DocumentViewer extends React.PureComponent<Props> {
       <div className="file-render__viewer document-viewer">
         {loading && !error && <LoadingScreen status={loadingMessage} spinner />}
         {error && <LoadingScreen status={errorMessage} spinner={!error} />}
-        {isReady && this.renderDocument(content)}
+        {isReady && this.renderDocument()}
       </div>
     );
   }

src/renderer/component/viewers/docxViewer.jsx

@@ -10,11 +10,17 @@ type Props = {
   source: string,
 };
 
-class DocxViewer extends React.PureComponent<Props> {
+type State = {
-  constructor(props) {
+  error: boolean,
+  loading: boolean,
+  content: ?string,
+};
+
+class DocxViewer extends React.PureComponent<Props, State> {
+  constructor(props: Props) {
     super(props);
     this.state = {
-      error: null,
+      error: false,
       content: null,
       loading: true,
     };
@@ -46,7 +52,7 @@ class DocxViewer extends React.PureComponent<Props> {
         const markdown = breakdance.render(result.value);
         this.setState({ content: markdown, loading: false });
       })
-      .catch(error => {
+      .catch(() => {
         this.setState({ error: true, loading: false });
       })
       .done();

src/renderer/component/viewers/pdfViewer.jsx

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { stopContextMenu } from 'util/contextMenu';
 
 type Props = {
@@ -7,16 +7,11 @@ type Props = {
 };
 
 class PdfViewer extends React.PureComponent<Props> {
-  constructor(props) {
-    super(props);
-    this.viewer = React.createRef();
-  }
-
   render() {
     const { source } = this.props;
     return (
       <div className="file-render__viewer" onContextMenu={stopContextMenu}>
-        <webview ref={this.viewer} src={`chrome://pdf-viewer/index.html?src=file://${source}`} />
+        <webview src={`chrome://pdf-viewer/index.html?src=file://${source}`} />
       </div>
     );
   }

src/renderer/component/viewers/threeViewer/index.jsx

@@ -12,6 +12,13 @@ import ThreeScene from './internal/scene';
 import ThreeLoader from './internal/loader';
 import ThreeRenderer from './internal/renderer';
 
+type viewerTheme = {
+  gridColor: string,
+  groundColor: string,
+  backgroundColor: string,
+  centerLineColor: string,
+};
+
 type Props = {
   theme: string,
   source: {
@@ -27,12 +34,13 @@ type State = {
 };
 
 class ThreeViewer extends React.PureComponent<Props, State> {
-  static testWebgl = new Promise((resolve, reject) => {
+  static testWebgl = (): Promise<void> =>
-    if (detectWebGL()) resolve();
+    new Promise((resolve, reject) => {
-    else reject();
+      if (detectWebGL()) resolve();
-  });
+      else reject();
+    });
 
-  static createOrbitControls(camera, canvas) {
+  static createOrbitControls(camera: any, canvas: any) {
     const controls = new THREE.OrbitControls(camera, canvas);
     // Controls configuration
     controls.enableDamping = true;
@@ -46,7 +54,7 @@ class ThreeViewer extends React.PureComponent<Props, State> {
     return controls;
   }
 
-  static fitMeshToCamera(group) {
+  static fitMeshToCamera(group: any) {
     const max = { x: 0, y: 0, z: 0 };
     const min = { x: 0, y: 0, z: 0 };
 
@@ -82,23 +90,9 @@ class ThreeViewer extends React.PureComponent<Props, State> {
     See: https://github.com/mrdoob/three.js/blob/dev/docs/scenes/js/material.js#L195
   */
 
-  static updateMaterial(material, geometry) {
-    material.vertexColors = +material.vertexColors; // Ensure number
-    material.side = +material.side; // Ensure number
-    material.needsUpdate = true;
-    // If Geometry needs update
-    if (geometry) {
-      geometry.verticesNeedUpdate = true;
-      geometry.normalsNeedUpdate = true;
-      geometry.colorsNeedUpdate = true;
-    }
-  }
-
   constructor(props: Props) {
     super(props);
     const { theme } = this.props;
-    this.viewer = React.createRef();
-    this.guiContainer = React.createRef();
     // Object defualt color
     this.materialColor = '#44b098';
     // Viewer themes
@@ -124,10 +118,21 @@ class ThreeViewer extends React.PureComponent<Props, State> {
       isReady: false,
       isLoading: false,
     };
+    // Internal objects
+    this.gui = null;
+    this.grid = null;
+    this.mesh = null;
+    this.camera = null;
+    this.frameID = null;
+    this.renderer = null;
+    this.material = null;
+    this.geometry = null;
+    this.targetCenter = null;
+    this.bufferGeometry = null;
   }
 
   componentDidMount() {
-    ThreeViewer.testWebgl
+    ThreeViewer.testWebgl()
       .then(() => {
         this.renderScene();
         // Update render on resize window
@@ -187,7 +192,39 @@ class ThreeViewer extends React.PureComponent<Props, State> {
     }
   }
 
-  transformGroup(group) {
+  // Define component types
+  theme: viewerTheme;
+  themes: { dark: viewerTheme, light: viewerTheme };
+  materialColor: string;
+  // Refs
+  viewer: ?HTMLElement;
+  guiContainer: ?HTMLElement;
+  // Too complex to add a custom type
+  gui: any;
+  grid: any;
+  mesh: any;
+  scene: any;
+  camera: any;
+  frameID: any;
+  controls: any;
+  material: any;
+  geometry: any;
+  targetCenter: any;
+  bufferGeometry: any;
+
+  updateMaterial(material: any, geometry: any) {
+    this.material.vertexColors = +material.vertexColors; // Ensure number
+    this.material.side = +material.side; // Ensure number
+    this.material.needsUpdate = true;
+    // If Geometry needs update
+    if (geometry) {
+      this.geometry.verticesNeedUpdate = true;
+      this.geometry.normalsNeedUpdate = true;
+      this.geometry.colorsNeedUpdate = true;
+    }
+  }
+
+  transformGroup(group: any) {
     ThreeViewer.fitMeshToCamera(group);
 
     if (!this.targetCenter) {
@@ -203,20 +240,19 @@ class ThreeViewer extends React.PureComponent<Props, State> {
 
       const config = {
         color: this.materialColor,
-      };
+        reset: () => {
-
+          // Reset material color
-      config.reset = () => {
+          config.color = this.materialColor;
-        // Reset material color
+          // Reset material
-        config.color = this.materialColor;
+          this.material.color.set(config.color);
-        // Reset material
+          this.material.flatShading = true;
-        this.material.color.set(config.color);
+          this.material.shininess = 30;
-        this.material.flatShading = true;
+          this.material.wireframe = false;
-        this.material.shininess = 30;
+          // Reset autoRotate
-        this.material.wireframe = false;
+          this.controls.autoRotate = false;
-        // Reset autoRotate
+          // Reset camera
-        this.controls.autoRotate = false;
+          this.restoreCamera();
-        // Reset camera
+        },
-        this.restoreCamera();
       };
 
       const materialFolder = this.gui.addFolder('Material');
@@ -240,7 +276,7 @@ class ThreeViewer extends React.PureComponent<Props, State> {
         .add(this.material, 'flatShading')
         .name('FlatShading')
         .onChange(() => {
-          ThreeViewer.updateMaterial(this.material);
+          this.updateMaterial(this.material);
         })
         .listen();
 
@@ -258,11 +294,13 @@ class ThreeViewer extends React.PureComponent<Props, State> {
 
       sceneFolder.add(config, 'reset').name('Reset');
 
-      this.guiContainer.current.appendChild(this.gui.domElement);
+      if (this.guiContainer) {
+        this.guiContainer.appendChild(this.gui.domElement);
+      }
     }
   }
 
-  createGeometry(data) {
+  createGeometry(data: any) {
     this.bufferGeometry = data;
     this.bufferGeometry.computeBoundingBox();
     this.bufferGeometry.center();
@@ -301,14 +339,14 @@ class ThreeViewer extends React.PureComponent<Props, State> {
   };
 
   handleResize = () => {
-    const { offsetWidth: width, offsetHeight: height } = this.viewer.current;
+    const { offsetWidth: width, offsetHeight: height } = this.viewer || {};
     this.camera.aspect = width / height;
     this.camera.updateProjectionMatrix();
     this.controls.update();
     this.renderer.setSize(width, height);
   };
 
-  updateControlsTarget(point) {
+  updateControlsTarget(point: { x: number, y: number, z: number }) {
     this.controls.target.fromArray([point.x, point.y, point.z]);
     this.controls.update();
   }
@@ -319,7 +357,10 @@ class ThreeViewer extends React.PureComponent<Props, State> {
     this.updateControlsTarget(this.targetCenter);
   }
 
-  renderStl(data) {
+  // Flow requested to add it here
+  renderer: any;
+
+  renderStl(data: any) {
     this.createGeometry(data);
     this.mesh = new THREE.Mesh(this.geometry, this.material);
     this.mesh.name = 'model';
@@ -327,7 +368,7 @@ class ThreeViewer extends React.PureComponent<Props, State> {
     this.transformGroup(this.mesh);
   }
 
-  renderObj(event) {
+  renderObj(event: any) {
     const mesh = event.detail.loaderRootNode;
     this.mesh = new THREE.Group();
     this.mesh.name = 'model';
@@ -352,7 +393,7 @@ class ThreeViewer extends React.PureComponent<Props, State> {
     this.transformGroup(this.mesh);
   }
 
-  renderModel(fileType, parsedData) {
+  renderModel(fileType: string, parsedData: any) {
     const renderTypes = {
       stl: data => this.renderStl(data),
       obj: data => this.renderObj(data),
@@ -377,9 +418,8 @@ class ThreeViewer extends React.PureComponent<Props, State> {
       ...this.theme,
     });
 
-    const viewer = this.viewer.current;
     const canvas = this.renderer.domElement;
-    const { offsetWidth: width, offsetHeight: height } = viewer;
+    const { offsetWidth: width, offsetHeight: height } = this.viewer || {};
 
     // Grid
     this.grid = ThreeGrid({ size: 100, gridColor, centerLineColor });
@@ -408,7 +448,9 @@ class ThreeViewer extends React.PureComponent<Props, State> {
     this.startLoader();
 
     // Append canvas
-    viewer.appendChild(canvas);
+    if (this.viewer) {
+      this.viewer.appendChild(canvas);
+    }
 
     const updateScene = () => {
       this.frameID = requestAnimationFrame(updateScene);
@@ -433,11 +475,11 @@ class ThreeViewer extends React.PureComponent<Props, State> {
       <React.Fragment>
         {error && <LoadingScreen status={error} spinner={false} />}
         {showLoading && <LoadingScreen status={loadingMessage} spinner />}
-        <div ref={this.guiContainer} className={containerClass} />
+        <div ref={element => (this.guiContainer = element)} className={containerClass} />
         <div
           style={{ opacity: showViewer ? 1 : 0 }}
           className="three-viewer file-render__viewer"
-          ref={this.viewer}
+          ref={viewer => (this.viewer = viewer)}
         />
       </React.Fragment>
     );

yarn.lock

@@ -130,6 +130,10 @@
   version "8.10.21"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-8.10.21.tgz#12b3f2359b27aa05a45d886c8ba1eb8d1a77e285"
 
+"@types/three@^0.93.1":
+  version "0.93.1"
+  resolved "https://registry.yarnpkg.com/@types/three/-/three-0.93.1.tgz#0b9ba53182afe16659e220d670471b4475687d64"
+
 "@types/webpack-env@^1.13.5":
   version "1.13.6"
   resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.13.6.tgz#128d1685a7c34d31ed17010fc87d6a12c1de6976"