Start fixing new flow errors (facebookarchive#753)

Start fixing new flow errors

.circleci/config.yml

@@ -8,12 +8,22 @@ jobs:
       - checkout
       - run: yarn
       - run: yarn build
+  flow:
+    working_directory: ~/react-360
+    docker:
+      - image: circleci/node:10
+    steps:
+      - checkout
+      - run: yarn
+      - run: yarn flow
   test-unit:
     working_directory: ~/react-360
     docker:
       - image: circleci/node:10
     steps:
       - checkout
+      - run: yarn
+      - run: yarn build
       - run: yarn test
   render-tests:
     working_directory: ~/react-360/render-tests
@@ -30,8 +40,9 @@ workflows:
     jobs:
       - build
       - test-unit:
-        requires:
-          - build
+          requires:
+            - build
       - render-tests:
-        requires:
-          - build
+          requires:
+            - build
+      - flow

.flowconfig

@@ -1,16 +1,11 @@
 [ignore]
-.*/Libraries/.*
 .*/docs/.*
-.*/EndToEnd/.*
-.*/jest/.*
 .*/website/.*
 .*/__tests__/.*
+<PROJECT_ROOT>/addons/.*
 <PROJECT_ROOT>/node_modules/.*
-<PROJECT_ROOT>/packages/react-webgl/.*
-<PROJECT_ROOT>/packages/react-webgl-video-manager/.*
-<PROJECT_ROOT>/packages/webgl-lite/.*
-<PROJECT_ROOT>/packages/webgl-ui/.*
-<PROJECT_ROOT>/packages/react-360-common-ui/.*
+<PROJECT_ROOT>/Libraries/.*
+<PROJECT_ROOT>/React360/.*
 
 [include]
 
@@ -21,7 +16,3 @@ defs/
 emoji=true
 
 module.ignore_non_literal_requires=true
-module.name_mapper='^ovrui$' -> '<PROJECT_ROOT>/OVRUI/src/OVRUI.js'
-
-[version]
-0.63.1

package.json

@@ -11,11 +11,13 @@
     "@babel/plugin-transform-flow-strip-types": "7.2.3",
     "@babel/plugin-transform-modules-commonjs": "7.2.0",
     "@babel/preset-react": "7.0.0",
+    "flow-bin": "^0.109.0",
     "jest": "^24.9.0",
     "lerna": "3.16.4"
   },
   "scripts": {
     "build": "lerna run build",
+    "flow": "flow",
     "test": "jest"
   }
 }

packages/react-360/src/Container.js

@@ -94,6 +94,10 @@ export default class Container {
     this._canvas = document.createElement('canvas');
     this._canvas.style.backgroundColor = '#000000';
     const gl = this._canvas.getContext('webgl', {xrCompatible: true, alpha: false});
+    if (gl == null) {
+      throw new Error('Unable to construct WebGL context');
+    }
+    // $FlowFixMe: Flow thinks gl might be a canvas 2d context?
     this._gl = gl;
     this._sharedTextureManager = new GLUI.TextureManager(gl);
     this.group = new WebGL.RenderGroup(gl);

packages/react-webgl/src/CanvasRoot.js

@@ -20,10 +20,15 @@ export type CanvasRootOptions = {
 };
 
 export default class CanvasRoot extends GLRoot {
+  _canvas: HTMLCanvasElement;
+
   constructor(options: CanvasRootOptions = {}) {
     const canvas = options.canvas || document.createElement('canvas');
     canvas.style.backgroundColor = 'transparent';
     const gl = canvas.getContext('webgl', {alpha: true, premultipliedAlpha: false});
+    if (gl == null) {
+      throw new Error('Unable to construct WebGL context');
+    }
     super(gl, options.text);
     this._canvas = canvas;
 
@@ -71,8 +76,11 @@ export default class CanvasRoot extends GLRoot {
     let offsetLeft = 0;
     let offsetTarget = e.target;
     while (offsetTarget != null) {
+      // $FlowFixMe
       offsetTop += offsetTarget.offsetTop;
+      // $FlowFixMe
       offsetLeft += offsetTarget.offsetLeft;
+      // $FlowFixMe
       offsetTarget = offsetTarget.offsetTarget;
     }
     this.getSurface().setCursor(
@@ -100,17 +108,17 @@ export default class CanvasRoot extends GLRoot {
     });
   };
 
-  _onTouchStart = e => {
+  _onTouchStart = (e: TouchEvent) => {
     this._setCursorFromTouch(e, true);
     this._onPressIn();
     e.preventDefault();
   };
 
-  _onTouchMove = e => {
+  _onTouchMove = (e: TouchEvent) => {
     this._setCursorFromTouch(e, false);
   };
 
-  _onMouseMove = e => {
+  _onMouseMove = (e: MouseEvent) => {
     this.getSurface().setCursor(e.offsetX, e.offsetY);
   };
 

packages/react-webgl/src/Elements.js

@@ -9,10 +9,12 @@
  * @flow
  */
 
+import type GLRoot from './GLRoot';
+
 import {Image, Text, View} from 'webgl-ui';
 
 export const quad = {
-  create: root => root.getSurface().createView(),
+  create: (root: GLRoot) => root.getSurface().createView(),
   dispatchers: (() => {
     const d = {};
     View.registerBindings(d);
@@ -21,7 +23,7 @@ export const quad = {
 };
 
 export const text = {
-  create: root => root.getSurface().createText(),
+  create: (root: GLRoot) => root.getSurface().createText(),
   dispatchers: (() => {
     const d = {};
     Text.registerBindings(d);
@@ -30,7 +32,7 @@ export const text = {
 };
 
 export const image = {
-  create: root => root.getSurface().createImage(),
+  create: (root: GLRoot) => root.getSurface().createImage(),
   dispatchers: (() => {
     const d = {};
     Image.registerBindings(d);

packages/react-webgl/src/GLRoot.js

@@ -9,10 +9,15 @@
  * @flow
  */
 
-import {Surface, TextureManager, type TextImplementation} from 'webgl-ui';
+import {Surface, TextureManager, type ShadowViewWebGL, type TextImplementation} from 'webgl-ui';
 import {FontImplementation} from 'webgl-ui-system-font';
 
 export default class GLRoot {
+  _gl: WebGLRenderingContext;
+  _surface: Surface;
+  _textImplementation: TextImplementation;
+  _textureManager: TextureManager;
+
   constructor(gl: WebGLRenderingContext, text?: TextImplementation) {
     this._gl = gl;
     this._surface = new Surface(gl);
@@ -22,7 +27,7 @@ export default class GLRoot {
     this._surface.useTextureManager(this._textureManager);
   }
 
-  setRoot(child) {
+  setRoot(child: ShadowViewWebGL<*>) {
     this._surface.setRootNode(child);
   }
 

packages/react-webgl/src/HostConfig.js

@@ -5,8 +5,6 @@
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree. An additional grant
  * of patent rights can be found in the PATENTS file in the same directory.
- *
- * @flow
  */
 
 import * as Elements from './Elements';

packages/react-webgl/src/Pressable.react.js

@@ -34,10 +34,12 @@ type State = {|
   pressed: boolean,
 |};
 
+type Event = {buttonClass?: string, action?: 'up' | 'down'};
+
 export default class Pressable extends React.PureComponent<Props, State> {
   state = {hovered: false, pressed: false};
 
-  _onInput = event => {
+  _onInput = (event: Event) => {
     if (event.buttonClass !== 'confirm') {
       return;
     }

packages/react-webgl/src/ReactWGL.js

@@ -9,6 +9,7 @@
  * @flow
  */
 
+// $FlowFixMe
 import Reconciler from 'react-reconciler';
 import * as HostConfig from './HostConfig';
 import GLRoot from './GLRoot';
@@ -21,7 +22,7 @@ import Video from './Video.react';
 
 const Renderer = Reconciler(HostConfig);
 
-export function render(element, container, callback) {
+export function render(element: Element, container: any, callback: any) {
   if (!container.__rootContainer) {
     container.__rootContainer = Renderer.createContainer(container, false);
   }

packages/react-webgl/src/RenderTargetRoot.js

@@ -24,6 +24,8 @@ export type RenderTargetRootOptions = {
  * which can then be used in a larger WebGL scene.
  */
 export default class RenderTargetRoot extends GLRoot {
+  _fb: WebGL.FrameBuffer;
+
   constructor(gl: WebGLRenderingContext, options: RenderTargetRootOptions = {}) {
     super(gl, options.text);
     const width = options.width || 0;

packages/react-webgl/src/applyProps.js

@@ -19,7 +19,7 @@ const EVENTS = {
   onInput: 'input',
 };
 
-export default function applyProps(view, oldProps, newProps, dispatchers) {
+export default function applyProps(view: any, oldProps: Object, newProps: Object, dispatchers: {[string]: (any, any) => void}) {
   for (const p in newProps) {
     if (p === 'children') {
       continue;

packages/webgl-ui-system-font/src/FontMeasure.js

@@ -59,7 +59,11 @@ export default class FontMeasure {
     this._lineMetrics.appendChild(this._lineOne);
     this._lineMetrics.appendChild(document.createElement('br'));
     this._lineMetrics.appendChild(this._lineTwo);
-    document.body.appendChild(this._lineMetrics);
+    const body = document.body;
+    if (body == null) {
+      throw new Error('Cannot measure font metrics without a valid document body');
+    }
+    body.appendChild(this._lineMetrics);
   }
 
   measureGlyph(glyph: string) {