WIP: Add react-native-web to the template (expo#599)

Add react-native-web to the template

Author: raarts

react-native-scripts/package.json

@@ -14,7 +14,8 @@
   },
   "files": [
     "build",
-    "template"
+    "template",
+    "template-with-web"
   ],
   "bin": {
     "react-native-scripts": "./build/bin/react-native-scripts.js"

react-native-scripts/src/scripts/eject.js

@@ -205,7 +205,9 @@ from \`babel-preset-expo\` to \`babel-preset-react-native-stage-0/decorator-supp
         pkgJson.jest.preset = 'react-native';
         newDevDependencies.push('jest-react-native');
       } else {
-        log(`${chalk.bold('Warning')}: it looks like you've changed the Jest preset from jest-expo to ${pkgJson.jest.preset}. We recommend you make sure this Jest preset is compatible with ejected apps.`)
+        log(
+          `${chalk.bold('Warning')}: it looks like you've changed the Jest preset from jest-expo to ${pkgJson.jest.preset}. We recommend you make sure this Jest preset is compatible with ejected apps.`
+        );
       }
 
       // no longer relevant to an ejected project (maybe build is?)

react-native-scripts/src/scripts/init.js

@@ -5,6 +5,7 @@ import fse from 'fs-extra';
 import path from 'path';
 import pathExists from 'path-exists';
 import spawn from 'cross-spawn';
+import minimist from 'minimist';
 import log from '../util/log';
 import install from '../util/install';
 import { hasYarn } from '../util/pm';
@@ -16,12 +17,37 @@ const DEFAULT_DEPENDENCIES = {
   'react-native': '0.52.0',
 };
 
+const WEB_DEFAULT_DEPENDENCIES = {
+  'expo-web': '^0.0.12',
+  'react-dom': '16.0.0',
+  'react-native-web': '^0.4.0',
+  webpack: '^3.11.0',
+  'webpack-dev-server': '2.9.4',
+};
+
 // TODO figure out how this interacts with ejection
 const DEFAULT_DEV_DEPENDENCIES = {
   'jest-expo': '25.0.0',
   'react-test-renderer': '16.2.0',
 };
 
+const WEB_DEFAULT_DEV_DEPENDENCIES = {
+  'react-native-scripts': '^1.11.1',
+  'babel-loader': '^7.1.2',
+  'babel-plugin-expo-web': '^0.0.5',
+  'babel-plugin-react-native-web': '^0.4.0',
+  'babel-plugin-transform-decorators-legacy': '^1.3.4',
+  'babel-plugin-transform-imports': '^1.4.1',
+  'babel-plugin-transform-runtime': '^6.23.0',
+  'file-loader': '^1.1.7',
+  'css-loader': '^0.28.7',
+  'style-loader': '^0.19.0',
+};
+
+const arg = minimist(process.argv.slice(2), {
+  boolean: ['with-web-support'],
+});
+
 module.exports = async (appPath: string, appName: string, verbose: boolean, cwd: string = '') => {
   const ownPackageName: string = require('../../package.json').name;
   const ownPath: string = path.join(appPath, 'node_modules', ownPackageName);
@@ -74,6 +100,13 @@ https://github.com/npm/npm/issues/16991
     test: 'jest',
   };
 
+  if (arg['with-web-support']) {
+    Object.assign(appPackage.scripts, {
+      web: 'webpack-dev-server -d --config ./webpack.config.js  --inline --hot --colors --content-base public/',
+      build: 'NODE_ENV=production webpack -p --config ./webpack.config.js',
+    });
+  }
+
   appPackage.jest = {
     preset: 'jest-expo',
   };
@@ -91,11 +124,16 @@ https://github.com/npm/npm/issues/16991
   Object.assign(appPackage.dependencies, DEFAULT_DEPENDENCIES);
   Object.assign(appPackage.devDependencies, DEFAULT_DEV_DEPENDENCIES);
 
+  if (arg['with-web-support']) {
+    Object.assign(appPackage.dependencies, WEB_DEFAULT_DEPENDENCIES);
+    Object.assign(appPackage.devDependencies, WEB_DEFAULT_DEV_DEPENDENCIES);
+  }
+
   // Write the new appPackage after copying so that we can include any existing
   await fse.writeFile(appPackagePath, JSON.stringify(appPackage, null, 2));
 
   // Copy the files for the user
-  await fse.copy(path.join(ownPath, 'template'), appPath);
+  await fse.copy(path.join(ownPath, arg['with-web-support'] ? 'template-with-web' : 'template'), appPath);
 
   // Rename gitignore after the fact to prevent npm from renaming it to .npmignore
   try {
@@ -128,7 +166,6 @@ https://github.com/npm/npm/issues/16991
 
   log(
     `
-
 Success! Created ${appName} at ${appPath}
 Inside that directory, you can run several commands:
 

react-native-scripts/src/util/packager.js

@@ -1,11 +1,6 @@
 // @flow
 
-import {
-  PackagerLogsStream,
-  Project,
-  ProjectSettings,
-  ProjectUtils,
-} from 'xdl';
+import { PackagerLogsStream, Project, ProjectSettings, ProjectUtils } from 'xdl';
 
 import _ from 'lodash';
 import spawn from 'cross-spawn';
@@ -46,9 +41,7 @@ async function cleanUpPackager(projectDir) {
   if (result === 'stopFailed') {
     // find RN packager pid, attempt to kill manually
     try {
-      const { packagerPid } = await ProjectSettings.readPackagerInfoAsync(
-        projectDir
-      );
+      const { packagerPid } = await ProjectSettings.readPackagerInfoAsync(projectDir);
       process.kill(packagerPid);
     } catch (e) {
       process.exit(1);
@@ -63,11 +56,7 @@ function shouldIgnoreMsg(msg) {
     msg.indexOf('Warning: PropTypes has been moved to a separate package') >= 0;
 }
 
-function run(
-  onReady: () => ?any,
-  options: Object = {},
-  isInteractive?: boolean = false
-) {
+function run(onReady: () => ?any, options: Object = {}, isInteractive?: boolean = false) {
   let packagerReady = false;
   let needsClear = false;
   let logBuffer = '';
@@ -78,9 +67,7 @@ function run(
     const watchmanExists = spawn.sync('which', ['watchman']).status === 0;
 
     if (process.platform === 'darwin' && !watchmanExists) {
-      const watcherDetails = spawn
-        .sync('sysctl', ['kern.maxfiles'])
-        .stdout.toString();
+      const watcherDetails = spawn.sync('sysctl', ['kern.maxfiles']).stdout.toString();
       if (parseInt(watcherDetails.split(':')[1].trim()) < 5242880) {
         log.withTimestamp(
           `${chalk.red(`Unable to start server`)}
@@ -169,15 +156,12 @@ ${chalk.cyan(`  sudo sysctl -w kern.maxfiles=5242880
   let packagerLogsStream = new PackagerLogsStream({
     projectRoot: projectDir,
     onStartBuildBundle: () => {
-      progressBar = new ProgressBar(
-        'Building JavaScript bundle [:bar] :percent',
-        {
-          total: 100,
-          clear: true,
-          complete: '=',
-          incomplete: ' ',
-        }
-      );
+      progressBar = new ProgressBar('Building JavaScript bundle [:bar] :percent', {
+        total: 100,
+        clear: true,
+        complete: '=',
+        incomplete: ' ',
+      });
 
       log.setBundleProgressBar(progressBar);
     },
@@ -199,9 +183,7 @@ ${chalk.cyan(`  sudo sysctl -w kern.maxfiles=5242880
           log.withTimestamp(chalk.red(`Failed building JavaScript bundle`));
         } else {
           let duration = endTime - startTime;
-          log.withTimestamp(
-            chalk.green(`Finished building JavaScript bundle in ${duration}ms`)
-          );
+          log.withTimestamp(chalk.green(`Finished building JavaScript bundle in ${duration}ms`));
         }
       }
     },
@@ -296,11 +278,7 @@ const logStackTrace = (chunk, logFn, nestedLogFn, colorFn) => {
   }
 
   if (unloggedFrames > 0) {
-    nestedLogFn(
-      colorFn(
-        `- ... ${unloggedFrames} more stack frames from framework internals`
-      )
-    );
+    nestedLogFn(colorFn(`- ... ${unloggedFrames} more stack frames from framework internals`));
   }
 };
 
@@ -309,7 +287,7 @@ const logWithLevel = chunk => {
     return;
   }
 
-  let colorFn = (str) => str;
+  let colorFn = str => str;
   if (chunk.level === bunyan.WARN) {
     colorFn = chalk.yellow;
   } else if (chunk.level === bunyan.ERROR) {

react-native-scripts/template-with-web/.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": ["babel-preset-expo"],
+  "env": {
+    "development": {
+      "plugins": ["transform-react-jsx-source"]
+    }
+  }
+}

react-native-scripts/template-with-web/.flowconfig

@@ -0,0 +1,75 @@
+[ignore]
+; We fork some components by platform
+.*/*[.]android.js
+
+; Ignore templates for 'react-native init'
+<PROJECT_ROOT>/node_modules/react-native/local-cli/templates/.*
+
+; Ignore RN jest
+<PROJECT_ROOT>/node_modules/react-native/jest/.*
+
+; Ignore RNTester
+<PROJECT_ROOT>/node_modules/react-native/RNTester/.*
+
+; Ignore the website subdir
+<PROJECT_ROOT>/node_modules/react-native/website/.*
+
+; Ignore the Dangerfile
+<PROJECT_ROOT>/node_modules/react-native/danger/dangerfile.js
+
+; Ignore Fbemitter
+<PROJECT_ROOT>/node_modules/fbemitter/.*
+
+; Ignore "BUCK" generated dirs
+<PROJECT_ROOT>/node_modules/react-native/\.buckd/
+
+; Ignore unexpected extra "@providesModule"
+.*/node_modules/.*/node_modules/fbjs/.*
+
+; Ignore polyfills
+<PROJECT_ROOT>/node_modules/react-native/Libraries/polyfills/.*
+
+; Ignore various node_modules
+<PROJECT_ROOT>/node_modules/react-native-gesture-handler/.*
+<PROJECT_ROOT>/node_modules/expo/.*
+<PROJECT_ROOT>/node_modules/react-navigation/.*
+<PROJECT_ROOT>/node_modules/xdl/.*
+<PROJECT_ROOT>/node_modules/reqwest/.*
+<PROJECT_ROOT>/node_modules/metro-bundler/.*
+
+[include]
+
+[libs]
+node_modules/react-native/Libraries/react-native/react-native-interface.js
+node_modules/react-native/flow/
+node_modules/expo/flow/
+
+[options]
+emoji=true
+
+module.system=haste
+
+module.file_ext=.js
+module.file_ext=.jsx
+module.file_ext=.json
+module.file_ext=.ios.js
+
+munge_underscores=true
+
+module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
+
+suppress_type=$FlowIssue
+suppress_type=$FlowFixMe
+suppress_type=$FlowFixMeProps
+suppress_type=$FlowFixMeState
+suppress_type=$FixMe
+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(5[0-6]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(5[0-6]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
+suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
+
+unsafe.enable_getters_and_setters=true
+
+[version]
+^0.56.0

react-native-scripts/template-with-web/.watchmanconfig

@@ -0,0 +1 @@
+{}

react-native-scripts/template-with-web/App.js

@@ -0,0 +1,3 @@
+import App from './src/App';
+
+export default App;

react-native-scripts/template-with-web/App.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import App from './App';
+
+import renderer from 'react-test-renderer';
+
+it('renders without crashing', () => {
+  const rendered = renderer.create(<App />).toJSON();
+  expect(rendered).toBeTruthy();
+});