Adapt for Reason

Author: Sascha Timme

config/paths.js

@@ -78,7 +78,7 @@ module.exports = {
  appBuild: resolveApp('build'),
  appPublic: resolveApp('public'),
  appHtml: resolveApp('public/index.html'),
- appIndexJs: resolveApp('src/index.js'),
+ appIndexJs: resolveApp('lib/js/src/index.js'),
  appPackageJson: resolveApp('package.json'),
  appSrc: resolveApp('src'),
  yarnLockFile: resolveApp('yarn.lock'),
@@ -100,7 +100,7 @@ module.exports = {
  appBuild: resolveApp('build'),
  appPublic: resolveApp('public'),
  appHtml: resolveApp('public/index.html'),
- appIndexJs: resolveApp('src/index.js'),
+ appIndexJs: resolveApp('lib/js/src/index.js'),
  appPackageJson: resolveApp('package.json'),
  appSrc: resolveApp('src'),
  yarnLockFile: resolveApp('yarn.lock'),

config/webpack.config.dev.js

@@ -133,7 +133,9 @@ module.exports = {
  /\.(js|jsx)(\?.*)?$/,
  /\.css$/,
  /\.json$/,
- /\.svg$/
+ /\.svg$/,
+ /\.(re|ml)$/,
+ /\.(rei|mli)$/
  ],
  loader: 'url',
  query: {
@@ -179,6 +181,10 @@ module.exports = {
  query: {
  name: 'static/media/[name].[hash:8].[ext]'
  }
+ },
+ {
+ test: /\.(re|ml)$/,
+ loader: "bs"
  }
  // ** STOP ** Are you adding a new loader?
  // Remember to add the new extension(s) to the "url" loader exclusion list.

package.json

@@ -1,5 +1,5 @@
 {
- "name": "react-scripts",
+ "name": "reason-react-scripts",
  "version": "0.9.4",
  "description": "Configuration and scripts for Create React App.",
  "repository": "facebookincubator/create-react-app",
@@ -33,6 +33,7 @@
  "case-sensitive-paths-webpack-plugin": "1.1.4",
  "chalk": "1.1.3",
  "connect-history-api-fallback": "1.3.0",
+ "concurrently": "^3.4.0",
  "cross-spawn": "4.0.2",
  "css-loader": "0.26.1",
  "detect-port": "1.1.0",

scripts/init.js

@@ -26,10 +26,11 @@ module.exports = function(appPath, appName, verbose, originalDirectory, template
 
  // Setup the script rules
  appPackage.scripts = {
- 'start': 'react-scripts start',
- 'build': 'react-scripts build',
- 'test': 'react-scripts test --env=jsdom',
- 'eject': 'react-scripts eject'
+ "bsb:build": "bsb -clean-world -make-world",
+ "bsb:watch": "bsb -clean-world -make-world -w",
+ "start": "bsb -clean-world -make-world && concurrently \"react-scripts start\" \"bsb -w\"",
+ "build": "bsb -clean-world -make-world && react-scripts build",
+ "test": "bsb -clean-world -make-world && concurrently \"react-scripts test --env=jsdom\" \"bsb -w\"",
  };
 
  fs.writeFileSync(
@@ -46,6 +47,14 @@ module.exports = function(appPath, appName, verbose, originalDirectory, template
  var templatePath = template ? path.resolve(originalDirectory, template) : path.join(ownPath, 'template');
  if (fs.existsSync(templatePath)) {
  fs.copySync(templatePath, appPath);
+ // update bsconfig name
+ var bsconfig = require(path.join(appPath, 'bsconfig.json'));
+ bsconfig.name = appName;
+
+ fs.writeFileSync(
+ path.join(appPath, 'bsconfig.json'),
+ JSON.stringify(bsconfig, null, 2)
+ );
  } else {
  console.error('Could not locate supplied template: ' + chalk.green(templatePath));
  return;
@@ -97,7 +106,6 @@ module.exports = function(appPath, appName, verbose, originalDirectory, template
  // or template is presetend (via --internal-testing-template)
  if (!isReactInstalled(appPackage) || template) {
  console.log('Installing react and react-dom using ' + command + '...');
- console.log();
 
  var proc = spawn.sync(command, args, {stdio: 'inherit'});
  if (proc.status !== 0) {
@@ -106,6 +114,31 @@ module.exports = function(appPath, appName, verbose, originalDirectory, template
  }
  }
 
+ // Install Reason stuff
+ var command;
+ var args;
+
+ // dependencies
+ if (useYarn) {
+ command = 'yarnpkg';
+ args = ['add'];
+ } else {
+ command = 'npm';
+ args = [
+ 'install',
+ '--save',
+ verbose && '--verbose'
+ ].filter(function(e) { return e; });
+ }
+ args.push('concurrently', 'bs-platform', 'reason-react', 'reason-js', "https://github.com/BuckleTypes/bs-jest.git");
+ console.log('Installing reason-react and reason-js and bs-jest using ' + command + '...');
+
+ var proc = spawn.sync(command, args, {stdio: 'inherit'});
+ if (proc.status !== 0) {
+ console.error('`' + command + ' ' + args.join(' ') + '` failed');
+ return;
+ }
+
  // Display the most elegant way to cd.
  // This needs to handle an undefined originalDirectory for
  // backward compatibility with old global-cli's.

template/__tests__/App.re

@@ -0,0 +1,8 @@
+open Jest;
+open Expect;
+
+test "renders without crashing" (fun () => {
+ let div = ReasonJs.Dom.Document.createElement "div" ReasonJs.Dom.document;
+ let render () => (ReactDOMRe.render <App /> div);
+ expect render |> not_ |> toThrow;
+});

template/bsconfig.json

@@ -0,0 +1,10 @@
+{
+ "name" : "reason-react-example",
+ "reason" : { "react-jsx" : true},
+ "bs-dependencies": ["reason-react", "reason-js", "bs-jest"],
+ "sources": [
+ {
+ "dir": "src"
+ }
+ ]
+}

template/src/App.js

@@ -0,0 +1,27 @@
+let logo : string = [%bs.raw {|require("../../../src/logo.svg")|}];
+let css : string = [%bs.raw {|require("../../../src/App.css")|}];
+
+
+module App = { 
+ include ReactRe.Component;
+ type props = unit;
+ let name = "App";
+
+ let render { props } => {
+ <div className="App">
+ <div className="App-header">
+ <img src={logo} className="App-logo" alt="logo" />
+ <h2>(ReactRe.stringToElement "Welcome to Reason-React")</h2>
+ </div>
+ <p className="App-intro">
+ (ReactRe.stringToElement "To get started, edit ")
+ <code>(ReactRe.stringToElement "src/App.re")</code>
+ (ReactRe.stringToElement " and save to reload.")
+ </p>
+ </div>
+ }
+};
+
+include ReactRe.CreateComponent App;
+
+let createElement = wrapProps ();