Modernize the project. latest Lerna version, etc..

Author: Gaëtan Renaudeau

.travis.yml

@@ -5,6 +5,7 @@ before_install:
   - curl -o- -L https://yarnpkg.com/install.sh | bash
   - export PATH="$HOME/.yarn/bin:$PATH"
 before_script:
+  - yarn run build
   - export DISPLAY=:99.0; sh -e /etc/init.d/xvfb start
 script: yarn test
 os: linux

CONTRIBUTING.md

@@ -4,8 +4,8 @@ Contributions are always welcome, no matter how large or small.
 
 ## Requirement
 
-- **Node 6**+
-- [yarn](https://yarnpkg.com)
+* **Node 6**+
+* [yarn](https://yarnpkg.com)
 
 ## Setup / Building
 
@@ -36,12 +36,6 @@ if you need to regenerate the snapshots:
 yarn run test-rewrite-snapshots
 ```
 
-typecheck:
-
-```sh
-yarn run flow
-```
-
 Finally, Please check that ALL examples of the cookbook are working correctly.
 
 ## Cookbook

packages/cookbook-expo/.babelrc renamed to examples/cookbook-expo/.babelrc

@@ -3,17 +3,20 @@
   "privacy": "public",
   "description": "GL React Native Cookbook",
   "slug": "gl-react",
-  "sdkVersion": "19.0.0",
+  "sdkVersion": "25.0.0",
   "version": "1.0.1",
   "orientation": "portrait",
   "primaryColor": "#cccccc",
-  "icon": "https://cloud.githubusercontent.com/assets/211411/9813786/eacfcc24-5888-11e5-8f9b-5a907a2cbb21.png",
+  "icon":
+    "https://cloud.githubusercontent.com/assets/211411/9813786/eacfcc24-5888-11e5-8f9b-5a907a2cbb21.png",
   "notification": {
-    "icon": "https://s3.amazonaws.com/exp-us-standard/placeholder-push-icon-blue-circle.png",
+    "icon":
+      "https://s3.amazonaws.com/exp-us-standard/placeholder-push-icon-blue-circle.png",
     "color": "#000000"
   },
   "loading": {
-    "icon": "https://cloud.githubusercontent.com/assets/211411/9813786/eacfcc24-5888-11e5-8f9b-5a907a2cbb21.png",
+    "icon":
+      "https://cloud.githubusercontent.com/assets/211411/9813786/eacfcc24-5888-11e5-8f9b-5a907a2cbb21.png",
     "hideExponentText": false
   },
   "packagerOpts": {

packages/cookbook-expo/.gitignore renamed to examples/cookbook-expo/.gitignore

@@ -0,0 +1,14 @@
+import Expo from "expo";
+import { Surface } from "gl-react-expo";
+export const name = "gl-react-expo";
+export const EXGLView = Expo.GLView;
+export { Surface };
+export const endFrame = gl => gl.endFrameEXP();
+export const loadThreeJSTexture = (gl, src, texture) => {
+  let image = new Image();
+  image.onload = function() {
+    texture.image = image;
+    texture.needsUpdate = true;
+  };
+  image.src = src;
+};

packages/cookbook-expo/exp.json renamed to examples/cookbook-expo/exp.json

@@ -0,0 +1,4 @@
+import "expo";
+import Expo from "expo";
+import App from "./shared";
+Expo.registerRootComponent(App);

examples/cookbook-expo/gl-react-implementation.js

@@ -0,0 +1,28 @@
+{
+  "name": "cookbook-expo",
+  "version": "3.13.0",
+  "description": "GL React Native cookbook",
+  "author": "Gaëtan Renaudeau",
+  "private": true,
+  "scripts": {
+    "prepare":
+      "cp -R ../cookbook-rn-shared shared && cp gl-react-implementation.js shared && ./shared/examples/gen.sh > ./shared/examples/index.js"
+  },
+  "main": "main.js",
+  "dependencies": {
+    "expo": "^25.0.0",
+    "gl-react-expo": "^3.13.0",
+    "gl-react": "^3.13.0",
+    "gl-transitions": "^0.44.0",
+    "ndarray": "~1.0.18",
+    "prop-types": "^15.6.0",
+    "raf": "~3.3.0",
+    "react-gl-transition": "^1.9.0",
+    "react-motion": "^0.5.0",
+    "react-native": "github:expo/react-native#sdk-25.0.0",
+    "react-navigation": "^1.1.2",
+    "react": "^16.0.0",
+    "seedrandom": "github:gre/seedrandom#released",
+    "three": "0.85.0"
+  }
+}

examples/cookbook-expo/main.js

@@ -7,8 +7,7 @@ import {
   Platform,
   Linking
 } from "react-native";
-import getGLReactImplementation from "./gl-react-implementation";
-const { Surface, name } = getGLReactImplementation();
+import { Surface, name } from "./gl-react-implementation";
 import { Node, Shaders, GLSL, Uniform, LinearCopy } from "gl-react";
 import timeLoop from "./HOC/timeLoop";
 
@@ -143,9 +142,9 @@ class Ex1 extends Component {
   props: { time: number };
   render() {
     const { time } = this.props;
-    const persistence = 0.75 - 0.20 * Math.cos(0.0005 * time);
+    const persistence = 0.75 - 0.2 * Math.cos(0.0005 * time);
     const red = 0.6 + 0.4 * Math.cos(0.004 * time);
-    const scale = 0.70 + 0.40 * Math.cos(0.001 * time);
+    const scale = 0.7 + 0.4 * Math.cos(0.001 * time);
     const angle = 2 * Math.PI * (0.5 + 0.5 * Math.cos(0.001 * time));
     return (
       <View style={styles.ex1}>
@@ -196,7 +195,7 @@ export default class Home extends React.Component {
     }
   };
   props: {
-    navigator: *
+    navigation: *
   };
   render() {
     return (
@@ -209,15 +208,11 @@ export default class Home extends React.Component {
             <Ex1Loop />
           </View>
           <View>
-            <Text style={styles.linkTitle}>
-              Cookbook, web version:
-            </Text>
+            <Text style={styles.linkTitle}>Cookbook, web version:</Text>
             <Link url="https://gl-react-cookbook.surge.sh" />
           </View>
           <View>
-            <Text style={styles.linkTitle}>
-              Github:
-            </Text>
+            <Text style={styles.linkTitle}>Github:</Text>
             <Link url="https://github.com/gre/gl-react" />
           </View>
         </View>

examples/cookbook-expo/package.json

@@ -0,0 +1,31 @@
+import React, { Component } from "react";
+import { EXGLView } from "../gl-react-implementation";
+
+type DemoFunction<Props> = (
+  gl: WebGLRenderingContext,
+  initialProps: Props
+) => {
+  onPropsChange: (props: Props) => void,
+  dispose: () => void
+};
+
+export default <Props>(demoFunction: DemoFunction<Props>) =>
+  class Demo extends Component {
+    props: { style: any };
+    demoHooks: *;
+    onContextCreate = (gl: WebGLRenderingContext) => {
+      this.demoHooks = demoFunction(gl, this.props);
+    };
+    componentWillReceiveProps(nextProps: *) {
+      const { demoHooks } = this;
+      if (demoHooks) demoHooks.onPropsChange(nextProps);
+    }
+    componentWillUnmount() {
+      const { demoHooks } = this;
+      if (demoHooks) demoHooks.dispose();
+    }
+    render() {
+      const { style } = this.props;
+      return <EXGLView style={style} onContextCreate={this.onContextCreate} />;
+    }
+  };

packages/cookbook-rn-shared/src/About.js renamed to examples/cookbook-expo/shared/About.js

@@ -1,44 +1,42 @@
 import React, { Component } from "react";
 import { StyleSheet, Text, ScrollView, View, Button } from "react-native";
-import getGLReactImplementation from "./gl-react-implementation";
-const { name } = getGLReactImplementation();
+import { name } from "./gl-react-implementation";
 import Item from "./Item";
 import * as examples from "./examples";
 import * as tests from "./tests";
-import Router from "./Router";
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: "#f9f9f9",
-    flexDirection: "column",
+    flexDirection: "column"
   },
   list: {
     flex: 1,
     backgroundColor: "#fff",
-    marginBottom: 50,
+    marginBottom: 50
   },
   subHeader: {
     padding: 10,
-    paddingVertical: 40,
+    paddingVertical: 40
   },
   title: {
     flex: 1,
     flexDirection: "row",
     alignItems: "center",
-    justifyContent: "center",
+    justifyContent: "center"
   },
   titleText: {
     fontWeight: "bold",
     color: "#fff",
-    fontSize: 18,
+    fontSize: 18
   },
   sectionTitle: {
     fontWeight: "bold",
     color: "#000",
     fontSize: 18,
-    padding: 10,
-  },
+    padding: 10
+  }
 });
 
 export default class Home extends Component {
@@ -48,37 +46,33 @@ export default class Home extends Component {
         <View style={styles.title}>
           <Text style={styles.titleText}>{name}</Text>
         </View>
-      ),
-    },
+      )
+    }
   };
   props: {
-    navigator: *,
+    navigation: *
   };
   render() {
-    const { navigator } = this.props;
+    const { navigation } = this.props;
     return (
       <ScrollView style={styles.container}>
         <View style={styles.subHeader}>
           <Button
-            onPress={() => navigator.push(Router.getRoute("about"))}
+            onPress={() => navigation.navigate("about")}
             color="#e24"
             title="What is gl-react ?"
           />
         </View>
         <View style={styles.list}>
-          <Text style={styles.sectionTitle}>
-            Examples
-          </Text>
+          <Text style={styles.sectionTitle}>Examples</Text>
           {Object.keys(examples).map(ex => (
-            <Item key={ex} id={ex} navigator={navigator} {...examples[ex]} />
+            <Item key={ex} id={ex} navigation={navigation} {...examples[ex]} />
           ))}
         </View>
         <View style={styles.list}>
-          <Text style={styles.sectionTitle}>
-            Tests
-          </Text>
+          <Text style={styles.sectionTitle}>Tests</Text>
           {Object.keys(tests).map(ex => (
-            <Item key={ex} id={ex} navigator={navigator} {...tests[ex]} />
+            <Item key={ex} id={ex} navigation={navigation} {...tests[ex]} />
           ))}
         </View>
       </ScrollView>

examples/cookbook-expo/shared/HOC/makeDemo.js

@@ -1,7 +1,6 @@
 //@flow
 import React from "react";
 import { Image, StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import Router from "./Router";
 
 const styles = StyleSheet.create({
   container: {
@@ -10,36 +9,36 @@ const styles = StyleSheet.create({
     borderTopColor: "rgba(0, 0, 0, .1)",
     paddingVertical: 8,
     paddingHorizontal: 8,
-    flexDirection: "row",
+    flexDirection: "row"
   },
   thumbnail: {
     width: 50,
     height: 50,
-    marginRight: 8,
+    marginRight: 8
   },
   title: {
     fontSize: 16,
     fontWeight: "bold",
     color: "#222",
-    margin: 2,
+    margin: 2
   },
   description: {
     fontSize: 12,
     color: "#888",
-    margin: 2,
-  },
+    margin: 2
+  }
 });
 
 export default class Item extends React.PureComponent {
   props: {
-    navigator: *,
+    navigation: *,
     id: string,
     title: string,
     description: ?string,
-    thumbnail: ?string,
+    thumbnail: ?string
   };
 
-  onPress = () => this.props.navigator.push(Router.getRoute(this.props.id));
+  onPress = () => this.props.navigation.navigate(this.props.id);
 
   render() {
     const {
@@ -48,13 +47,13 @@ export default class Item extends React.PureComponent {
       description,
       disabled,
       thumbnail,
-      navigator,
+      navigation
     } = this.props;
     return (
       <TouchableOpacity style={styles.container} onPress={this.onPress}>
-        {thumbnail
-          ? <Image style={styles.thumbnail} source={thumbnail} />
-          : null}
+        {thumbnail ? (
+          <Image style={styles.thumbnail} source={thumbnail} />
+        ) : null}
         <View>
           <Text style={styles.title}>{title}</Text>
           <Text style={styles.description}>{description}</Text>