Move CLI package, rewrite starter project to new runtime

Reviewed By: MartinSherburn

Differential Revision: D7734468

fbshipit-source-id: 0b31d76792b9def172cea8a3cd24a4dcaff7bba3

react-vr-cli/LICENSE → packages/react-360-cli/LICENSE

@@ -1,6 +1,6 @@
 BSD License
 
-For React VR software
+For React 360 software
 
 Copyright (c) 2015-present, Facebook, Inc. All rights reserved.
 
@@ -27,4 +27,4 @@ ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
 ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
-SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

react-vr-cli/README.md → packages/react-360-cli/README.md

@@ -1,34 +1,34 @@
-# React VR CLI
+# React 360 CLI
 
-React VR is distributed as two packages, `react-vr` and `react-vr-cli`. The
-first one contains all of the code necessary to build React VR applications,
+React 360 is distributed as two packages, `react-360` and `react-360-cli`. The
+first one contains all of the code necessary to build interactive 360 applications,
 and is installed as part of your project's dependencies. This directory contains
 the code for the second one: a command-line tool that should be installed
-globally (`npm install -g react-vr-cli`) and which allows you to quickly
-initialize React VR projects.
+globally (`npm install -g react-360-cli`) and which allows you to quickly
+initialize React 360 projects.
 
 ## Using the CLI
 
 Once the CLI has been globally installed, you can use it to generate new
 projects. Running the command:
 
 ```
-react-vr init MyProject
+react-360 init MyProject
 ```
 
 will create a new project directory called `MyProject`. It will create all of
-the files necessary to get started with React VR, and will automatically run
+the files necessary to get started with React 360, and will automatically run
 `npm install` to fetch your project's dependencies.
 
 Once a project has been generated, you can run `npm start` to launch the
 packager and begin running your application.
 
 ## Generators
 
-The React VR CLI creates the starter project based upon the files found in the
+The React 360 CLI creates the starter project based upon the files found in the
 `generators` directory. These are very simple JavaScript modules that produce
 files from string templates. Configuration variables can be passed from the CLI
 to these generators, which return an object containing two keys: `filename` and
 `content`. Together, these are used to create a file at the generator's relative
-location. For example, a generator located in `generators/vr` will produce a
-file in `$PROJECT_DIRECTORY/vr/`.
+location. For example, a generator located in `generators/subdir` will produce a
+file in `$PROJECT_DIRECTORY/subdir/`.

react-vr-cli/generators/__tests__/index.vr.generator.js → packages/react-360-cli/generators/__tests__/index-test.generator.js

@@ -10,9 +10,9 @@
 module.exports = config => ({
   filename: 'index-test.js',
   contents: `import 'react-native';
-import 'react-vr';
+import 'react-360';
 import React from 'react';
-import Index from '../index.vr.js';
+import Index from '../index.js';
 
 // Note: test renderer must be required after react-native.
 import renderer from 'react-test-renderer';

packages/react-360-cli/generators/client.generator.js

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * 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.
+ */
+
+module.exports = config => ({
+  filename: 'client.js',
+  contents: `// This file contains the boilerplate to execute your React app.
+// If you want to modify your application's content, start in "index.js"
+
+import {ReactInstance} from 'react-360-web';
+
+function init(bundle, parent, options = {}) {
+  const r360 = new ReactInstance(bundle, parent, {
+    // Add custom options here
+    fullScreen: true,
+    ...options,
+  });
+
+  // Render your app content to the default cylinder surface
+  r360.renderToSurface(
+    r360.createRoot('${config.name}', { /* initial props */ }),
+    r360.getDefaultSurface()
+  );
+
+  // Load the initial environment
+  r360.compositor.setBackground(r360.getAssetURL('360_world.jpg'));
+}
+
+window.React360 = {init};
+`,
+});

packages/react-360-cli/generators/index.generator.js

@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * 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.
+ */
+
+module.exports = config => ({
+  filename: 'index.js',
+  contents: `import React from 'react';
+import {
+  AppRegistry,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-360';
+
+export default class ${config.name} extends React.Component {
+  render() {
+    return (
+      <View style={styles.panel}>
+        <View style={styles.greetingBox}>
+          <Text style={styles.greeting}>
+            Welcome to React 360
+          </Text>
+        </View>
+      </View>
+    );
+  }
+};
+
+const styles = StyleSheet.create({
+  panel: {
+    // Fill the entire surface
+    width: 1000,
+    height: 600,
+    backgroundColor: 'rgba(255, 255, 255, 0.4)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  greetingBox: {
+    padding: 20,
+    backgroundColor: '#000000',
+    borderColor: '#639dda',
+    borderWidth: 2,
+  },
+  greeting: {
+    fontSize: 30,
+  },
+});
+
+AppRegistry.registerComponent('${config.name}', () => ${config.name});
+`,
+});

react-vr-cli/generators/vr/index.html.generator.js → packages/react-360-cli/generators/index.html.generator.js

@@ -16,16 +16,17 @@ module.exports = config => ({
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
   </head>
   <body>
-    <!-- When you're ready to deploy your app, update this line to point to your compiled client.bundle.js -->
+    <!-- Attachment point for your app -->
+    <div id="container"></div>
     <script src="./client.bundle?platform=vr"></script>
     <script>
-      // Initialize the React VR application
-      ReactVR.init(
-        // When you're ready to deploy your app, update this line to point to
-        // your compiled index.bundle.js
-        '../index.vr.bundle?platform=vr&dev=true',
-        // Attach it to the body tag
-        document.body
+      // Initialize the React 360 application
+      React360.init(
+        'index.bundle?platform=vr&dev=true',
+        document.getElementById('container'),
+        {
+          assetRoot: 'static_assets/',
+        }
       );
     </script>
   </body>

react-vr-cli/generators/package.json.generator.js → packages/react-360-cli/generators/package.json.generator.js

@@ -16,19 +16,18 @@ module.exports = config => ({
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "start": "node -e \\"console.log('open browser at http://localhost:8081/vr/\\\\n\\\\n');\\" && node node_modules/react-native/local-cli/cli.js start",
-    "bundle": "node node_modules/react-vr/scripts/bundle.js",
-    "open": "node -e \\"require('xopen')('http://localhost:8081/vr/')\\"",
+    "start": "node -e \\"console.log('open browser at http://localhost:8081/index.html\\\\n\\\\n');\\" && node node_modules/react-native/local-cli/cli.js start",
+    "bundle": "node node_modules/react-360/scripts/bundle.js",
+    "open": "node -e \\"require('xopen')('http://localhost:8081/index.html')\\"",
     "devtools": "react-devtools",
     "test": "jest"
   },
   "dependencies": {
-    "ovrui": "~2.0.0",
     "react": "16.0.0",
-    "react-native": "~0.48.0",
+    "react-native": "~0.49.5",
     "three": "^0.87.0",
-    "react-vr": "~2.0.0",
-    "react-vr-web": "~2.0.0"
+    "react-360": "~1.0.0",
+    "react-360-web": "~1.0.0"
   },
   "devDependencies": {
     "babel-jest": "^19.0.0",
@@ -39,7 +38,7 @@ module.exports = config => ({
     "xopen": "1.0.0"
   },
   "jest": {
-    "preset": "react-vr"
+    "preset": "react-360"
   }
 }`,
 });

react-vr-cli/generators/rn-cli.config.generator.js → packages/react-360-cli/generators/rn-cli.config.generator.js

@@ -33,7 +33,7 @@ var config = {
   },
 
   getProvidesModuleNodeModules() {
-    return ['react-native', 'react-vr'];
+    return ['react-native', 'react-360'];
   },
 };
 

packages/react-360-cli/generators/watchmanconfig.generator.js

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * 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.
+ */
+
+module.exports = config => ({
+  filename: '.watchmanconfig',
+  contents: `{}
+`,
+});

react-vr-cli/index.js → packages/react-360-cli/index.js

@@ -26,11 +26,11 @@ const CURRENT_VERSION = require('./package.json').version;
 
 function printUsageAndExit() {
   console.log(
-    `React VR Command Line Interface
+    `React 360 Command Line Interface
 Version ${CURRENT_VERSION}
 
 Usage:
-  react-vr init ${chalk.gray('[project name]')}\tCreate a new React VR application with the specified name
+  react-360 init ${chalk.gray('[project name]')}\tCreate a new React 360 application with the specified name
 `
   );
   process.exit(0);
@@ -52,9 +52,9 @@ getLatestVersion().then(version => {
     );
     console.log('You can upgrade your CLI with:');
     if (getPackager() === 'yarn') {
-      console.log(chalk.green('  yarn global upgrade react-vr-cli'));
+      console.log(chalk.green('  yarn global upgrade react-360-cli'));
     } else {
-      console.log(chalk.green('  npm update -g react-vr-cli'));
+      console.log(chalk.green('  npm update -g react-360-cli'));
     }
   }
   if (args.length === 0 || args[0] === '--help') {
@@ -80,7 +80,7 @@ getLatestVersion().then(version => {
 
     const dest = path.join(process.cwd(), rawName);
 
-    console.log('Creating new React VR project...');
+    console.log('Creating new React 360 project...');
     try {
       const stat = fs.statSync(dest);
       if (stat) {
@@ -148,8 +148,8 @@ getLatestVersion().then(version => {
         console.log(
           '  Run ' + chalk.green('`npm start`') + ' to initialize the development server'
         );
-        console.log('  From there, browse to ' + chalk.green('http://localhost:8081/vr/'));
-        console.log('  Open ' + chalk.green('`index.vr.js`') + ' to begin editing your app.');
+        console.log('  From there, browse to ' + chalk.green('http://localhost:8081/index.html'));
+        console.log('  Open ' + chalk.green('`index.js`') + ' to begin editing your app.');
       })
       .catch(err => {
         console.error(err);

react-vr-cli/package.json → packages/react-360-cli/package.json

@@ -1,16 +1,16 @@
 {
-  "name": "react-vr-cli",
-  "version": "0.3.6",
-  "description": "The React VR CLI for project setup",
+  "name": "react-360-cli",
+  "version": "0.1.0",
+  "description": "The React 360 CLI for project setup",
   "license": "BSD-3-Clause",
   "engines": {
-    "node": ">=4"
+    "node": ">=6"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/facebook/react-vr.git"
+    "url": "https://github.com/facebook/react-360.git"
   },
-  "bugs": "https://github.com/facebook/react-vr/issues",
+  "bugs": "https://github.com/facebook/react-360/issues",
   "files": [
     "static_assets/",
     "src/",
@@ -22,7 +22,7 @@
     "README.md"
   ],
   "bin": {
-    "react-vr": "index.js"
+    "react-360": "index.js"
   },
   "dependencies": {
     "chalk": "^1.1.3"

react-vr-cli/src/getLatestVersion.js → packages/react-360-cli/src/getLatestVersion.js

@@ -33,7 +33,7 @@ function getLatestVersion() {
       }
       const chunks = [];
       https
-        .get(registry + 'react-vr-cli/latest', res => {
+        .get(registry + 'react-360-cli/latest', res => {
           const statusCode = res.statusCode;
           if (statusCode !== 200) {
             resolve(null);