Merge dd059d6 into ebb0d10

Author: mbasso

.eslintrc

@@ -23,11 +23,13 @@
     "react/jsx-filename-extension": "off",
     "react/jsx-uses-react": 2,
     "react/jsx-uses-vars": 2,
-    "react/react-in-jsx-scope": 2
+    "react/react-in-jsx-scope": 2,
+    "react-hooks/rules-of-hooks": "error"
   },
   "plugins": [
     "flowtype",
-    "react"
+    "react",
+    "react-hooks"
   ],
   "extends": [
     "plugin:flowtype/recommended",
@@ -55,4 +57,4 @@
       "onlyFilesWithFlowAnnotation": true
     }
   }
-}
+}

package.json

@@ -75,7 +75,7 @@
     "@babel/register": "^7.0.0",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^9.0.0",
-    "babel-jest": "23.6.0",
+    "babel-jest": "^24.1.0",
     "babel-loader": "^8.0.0",
     "babel-preset-minify": "^0.4.3",
     "compression-webpack-plugin": "1.0.0",
@@ -88,19 +88,20 @@
     "eslint-plugin-import": "2.14.0",
     "eslint-plugin-jsx-a11y": "6.1.1",
     "eslint-plugin-react": "7.11.1",
-    "flow-bin": "0.89.0",
-    "jest": "23.6.0",
+    "eslint-plugin-react-hooks": "^1.0.1",
+    "flow-bin": "^0.92.1",
+    "jest": "^24.1.0",
     "nyc": "10.3.0",
     "prettier": "1.15.3",
     "prettier-eslint": "8.8.2",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0",
-    "react-test-renderer": "16.7.0",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0",
+    "react-test-renderer": "^16.8.0",
     "rimraf": "2.6.3",
     "webpack": "3.5.5"
   },
   "peerDependencies": {
-    "react": "^16.7.0"
+    "react": "^16.8.0"
   },
   "npmName": "react-wasm",
   "npmFileMap": [
@@ -119,4 +120,4 @@
   "dependencies": {
     "@babel/runtime": "7.2.0"
   }
-}
+}

src/Wasm.js

@@ -1,97 +1,22 @@
 // @flow
 
-import React from 'react';
-import compileWasm from './compileWasm';
-import type { WasmProps, WasmState, WasmParams } from './types';
-
-export default class Wasm extends React.Component<WasmProps, WasmState> {
-	static defaultProps = {
-		url: null,
-		bufferSource: null,
-		importObject: {}
-	};
-
-	state = {
-		loading: true,
-		error: null,
-		data: null,
-		// eslint-disable-next-line
-		prevProps: {
-			url: null,
-			bufferSource: null
-		}
-	};
-
-	static getDerivedStateFromProps(props: WasmProps, state: WasmState) {
-		const { url, bufferSource } = props;
-
-		if (
-			url && url !== state.prevProps.url ||
-			!url && bufferSource !== state.prevProps.bufferSource
-		) {
-			return {
-				loading: true,
-				error: null,
-				data: null,
-				prevProps: {
-					url,
-					bufferSource
-				}
-			};
-		}
-
-		return null;
-	}
-
-	componentDidMount() {
-		const { url, bufferSource, importObject } = this.props;
-
-		this.loadModule({ url, bufferSource, importObject });
-	}
-
-	componentDidUpdate(prevProps: WasmProps) {
-		const { url, bufferSource, importObject } = this.props;
-
-		if (
-			url && url !== prevProps.url ||
-			!url && bufferSource !== prevProps.bufferSource
-		) {
-			this.loadModule({ url, bufferSource, importObject });
-		}
-	}
-
-	loadModule = ({
-		url,
-		bufferSource,
-		importObject
-	}: WasmParams) =>
-		compileWasm({
-			url,
-			bufferSource,
-			importObject
-		})
-			.then(({ module, instance }) => {
-				this.setState({
-					loading: false,
-					error: null,
-					data: {
-						module,
-						instance
-					}
-				});
-			})
-			.catch(error => {
-				this.setState({
-					loading: false,
-					error,
-					data: null
-				});
-			});
-
-	render() {
-		const { children } = this.props;
-		const { loading, error, data } = this.state;
-
-		return children({ loading, error, data });
-	}
-}
+import useWasm from './useWasm';
+import type { WasmProps } from './types';
+
+const Wasm = ({ url, bufferSource, importObject, children }: WasmProps) => {
+  const state = useWasm({
+    url,
+    bufferSource,
+    importObject
+  });
+
+  return children(state);
+};
+
+Wasm.defaultProps = {
+  url: null,
+  bufferSource: null,
+  importObject: {}
+};
+
+export default Wasm;

src/index.js

@@ -1,8 +1,10 @@
 // @flow
 
 import Wasm from './Wasm';
+import useWasmDefinition from './useWasm';
 import withWasmDefinition from './withWasm';
 
-export default Wasm;
-
+export const useWasm = useWasmDefinition;
 export const withWasm = withWasmDefinition;
+
+export default Wasm;

src/useWasm.js

@@ -0,0 +1,75 @@
+// @flow
+
+import { useState, useEffect } from 'react';
+import compileWasm from './compileWasm';
+import type { WasmParams } from './types';
+
+const useWasm = ({
+  url,
+  bufferSource,
+  importObject
+}: WasmParams) => {
+  const [state, setState] = useState({
+    loading: true,
+    error: null,
+    data: null
+  });
+
+  const [prevProps, setPrevProps] = useState({
+    url: null,
+    bufferSource: null
+  });
+
+  let newState = state;
+
+  if (
+    (url && url !== prevProps.url) ||
+    (!url && bufferSource !== prevProps.bufferSource)
+  ) {
+    newState = {
+      loading: true,
+      error: null,
+      data: null
+    };
+
+    setState(newState);
+    setPrevProps({
+      url,
+      bufferSource
+    });
+  }
+
+  useEffect(() => {
+    compileWasm({
+      url,
+      bufferSource,
+      importObject
+    })
+      .then(({ module, instance }) => {
+        setState({
+          loading: false,
+          error: null,
+          data: {
+            module,
+            instance
+          }
+        });
+      })
+      .catch(ex => {
+        setState({
+          loading: false,
+          error: ex,
+          data: null
+        });
+      });
+  }, [
+    url,
+    !url && bufferSource,
+    importObject,
+    setState
+  ]);
+
+  return newState;
+}
+
+export default useWasm;

src/withWasm.js

@@ -1,24 +1,25 @@
 import React from 'react';
-import Wasm from '.';
+import useWasm from './useWasm';
 
-const withWasm = (config = {}, mapToChild) => ComponentDefinition => ({
+const withWasm = (config = {}, mapToChild = x => x) => ComponentDefinition => ({
   url,
   bufferSource,
   importObject,
   ...otherProps
-}) => (
-  <Wasm
-    url={url}
-    bufferSource={bufferSource}
-    importObject={importObject}
-    {...config}
-  >
-    {wasmData => {
-      const wasmProps = mapToChild ? mapToChild(wasmData) : wasmData;
+}) => {
+  const state = useWasm({
+    url,
+    bufferSource,
+    importObject,
+    ...config
+  });
 
-      return <ComponentDefinition {...otherProps} {...wasmProps} />;
-    }}
-  </Wasm>
-);
+  return (
+    <ComponentDefinition
+      {...otherProps}
+      {...mapToChild(state)}
+    />
+  );
+};
 
 export default withWasm;