Reason template

CONTRIBUTING.md

@@ -0,0 +1,38 @@
+# Updating cra-reason-template
+
+```sh
+# Clone cra-reason-template locally
+$ git clone git@github.com:reasonml-community/cra-reason-template.git
+
+# cd into the new repo
+$ cd cra-reason-template
+
+# Add the upstream create-react-app repo
+$ git remote add upstream git@github.com:facebook/create-react-app.git
+
+# Fetch the remote tag names, we'll need them to determine what version to merge
+$ git fetch upstream
+
+# List all the tags we have, we'll find one suitable for merging into cra-reason-template
+$ git tag --list
+
+# Look for the latest react-scripts tag (ex. react-scripts@1.1.4) and create a branch from it
+$ git checkout tags/react-scripts@1.1.4 -b upstream-master
+
+# Create a new branch from upstream only consisting of the react-scripts package
+$ git subtree split --prefix=packages/react-scripts -b upstream-react-scripts
+
+# Checkout our new react-scripts branch
+$ git checkout upstream-react-scripts
+
+# Make sure everything is correct and it's really only the react-scripts package
+$ ls
+
+# Checkout master again so we can start the merge!
+$ git checkout master
+
+# Do the merge!!!
+$ git merge upstream-react-scripts
+```
+
+> Adapted from [Forking a sub directory of a repository on GitHub and making it part of my own repo](https://stackoverflow.com/questions/24577084)

LICENSE

@@ -1,6 +1,7 @@
 MIT License
 
 Copyright (c) 2013-present, Facebook, Inc.
+Copyright (c) 2019-present, Antonio N. Monteiro
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,7 +1,91 @@
-# react-scripts
+# CRA Reason Template
 
-This package includes scripts and configuration used by [Create React App](https://github.com/facebook/create-react-app).<br>
-Please refer to its documentation:
+<pre align="center">
+  $ yarn create react-app my-app --scripts-version cra-reason-template
+</pre>
+
+This package includes scripts and configuration to provide an easy way to get
+started building [ReasonReact](https://reasonml.github.io/reason-react/)
+applications with [Create React
+App](https://github.com/facebook/create-react-app).
+
+For getting to know `Create React App`, please visit its official
+documentation:
+
+- [Getting
+  Started](https://facebook.github.io/create-react-app/docs/getting-started) –
+  How to create a new app.
+- [User Guide](https://facebook.github.io/create-react-app/) – How to develop
+  apps bootstrapped with Create React App.
+
+## Getting Started
+
+### Creating a new application
+
+#### Using NPM
+
+```shell;
+$ npm install -g create-react-app
+$ create-react-app my-app --scripts-version cra-reason-template
+```
+
+#### Using Yarn
+
+```shell;
+$ yarn create react-app my-app --scripts-version cra-reason-template
+```
+
+#### Using [NPX](https://www.npmjs.com/package/npx)
+
+```shell;
+$ npx create-react-app my-app --scripts-version cra-reason-template
+```
+
+### Running the development server
+
+#### Using NPM
+
+```shell
+$ npm run bs:watch
+$ npm run start # on a different shell session
+```
+
+#### Using Yarn
+
+```shell
+$ yarn bs:watch
+$ yarn start # on a different shell session
+```
+
+### Creating a production build
+
+#### Using NPM
+
+```shell
+$ npm run bs:make
+$ npm run build
+```
+
+#### Using Yarn
+
+```shell
+$ npm run bs:make
+$ yarn build
+```
+
+## Origins
+
+This work is based on the work done in
+[reason-scripts](https://github.com/rrdelaney/reason-scripts). The main
+difference between both projects is that `reason-scripts` tries to integrate
+the [BuckleScript](https://bucklescript.github.io) toolchain too much
+(subjective) with Webpack, when they don't really play very well together.
+
+`cra-reason-template` tries to eschew added complexity by deliberately exposing
+the BuckleScript compilation as a pre-requisite to launching the `Create React
+App` process.
+
+## Copyright & License
+
+Distributed under the MIT license (see [LICENSE](./LICENSE)).
 
-- [Getting Started](https://facebook.github.io/create-react-app/docs/getting-started) – How to create a new app.
-- [User Guide](https://facebook.github.io/create-react-app/) – How to develop apps bootstrapped with Create React App.

config/paths.js

@@ -80,7 +80,7 @@ module.exports = {
   appBuild: resolveApp('build'),
   appPublic: resolveApp('public'),
   appHtml: resolveApp('public/index.html'),
-  appIndexJs: resolveModule(resolveApp, 'src/index'),
+  appIndexJs: resolveModule(resolveApp, 'src/index.bs'),
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
   appTsConfig: resolveApp('tsconfig.json'),
@@ -103,7 +103,7 @@ module.exports = {
   appBuild: resolveApp('build'),
   appPublic: resolveApp('public'),
   appHtml: resolveApp('public/index.html'),
-  appIndexJs: resolveModule(resolveApp, 'src/index'),
+  appIndexJs: resolveModule(resolveApp, 'src/index.bs'),
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
   appTsConfig: resolveApp('tsconfig.json'),
@@ -138,7 +138,7 @@ if (
     appBuild: resolveOwn('../../build'),
     appPublic: resolveOwn('template/public'),
     appHtml: resolveOwn('template/public/index.html'),
-    appIndexJs: resolveModule(resolveOwn, 'template/src/index'),
+    appIndexJs: resolveModule(resolveOwn, 'template/src/index.bs'),
     appPackageJson: resolveOwn('package.json'),
     appSrc: resolveOwn('template/src'),
     appTsConfig: resolveOwn('template/tsconfig.json'),

package.json

@@ -1,10 +1,10 @@
 {
-  "name": "react-scripts",
+  "name": "cra-reason-template",
   "version": "2.1.8",
   "description": "Configuration and scripts for Create React App.",
   "repository": {
-    "type" : "git",
-    "url" : "https://github.com/facebook/create-react-app.git",
+    "type": "git",
+    "url": "https://github.com/facebook/create-react-app.git",
     "directory": "packages/react-scripts"
   },
   "license": "MIT",

scripts/init.js

@@ -99,6 +99,9 @@ module.exports = function(
     build: 'react-scripts build',
     test: 'react-scripts test',
     eject: 'react-scripts eject',
+    'bs:make': 'bsb -make-world',
+    'bs:watch': 'bsb -make-world -w',
+    'bs:clean': 'bsb -clean-world',
   };
 
   // Setup the eslint config
@@ -195,6 +198,37 @@ module.exports = function(
     }
   }
 
+  // Install devDependencies needed by Reason
+  const reasonDevDeps = [
+    'bs-platform',
+    'reason-react',
+    '@glennsl/bs-jest',
+  ];
+
+  args = [];
+  if (useYarn) {
+    command = 'yarnpkg';
+    args = ['add'];
+  } else {
+    command = 'npm';
+    args = ['install', '--save', verbose && '--verbose'].filter(e => e);
+  }
+  args.push(...reasonDevDeps);
+
+  const installMessage = 'Installing ' +
+    reasonDevDeps.slice(0, -1).map(dep => chalk.blue(dep)).join(', ') +
+    ', and ' +
+    chalk.blue(reasonDevDeps[reasonDevDeps.length - 1]) +
+    ' using ' + command + '...'
+
+  console.log(installMessage);
+  console.log();
+  const reasonDepsProc = spawn.sync(command, args, { stdio: 'inherit' });
+  if (reasonDepsProc.status !== 0) {
+    console.error(`\`${command} ${args.join(' ')}\` failed`);
+    return;
+  }
+
   if (useTypeScript) {
     verifyTypeScriptSetup();
   }

scripts/utils/createJestConfig.js

@@ -35,6 +35,7 @@ module.exports = (resolve, rootDir, isEjecting) => {
     testMatch: [
       '<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}',
       '<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}',
+      '<rootDir>/src/**/*_{spec,test}.bs.js',
     ],
     testEnvironment: 'jest-environment-jsdom-fourteen',
     transform: {
@@ -47,7 +48,7 @@ module.exports = (resolve, rootDir, isEjecting) => {
       ),
     },
     transformIgnorePatterns: [
-      '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$',
+      '[/\\\\]node_modules[/\\\\](?!@glennsl/bs-jest|bs-platform).+\\.(js|jsx|ts|tsx)$',
       '^.+\\.module\\.(css|sass|scss)$',
     ],
     modulePaths: modules.additionalModulePaths || [],

template/bsconfig.json

@@ -0,0 +1,22 @@
+{
+  "name": "reason-scripts",
+  "sources": [
+    "src"
+  ],
+  "bs-dependencies": [
+    "reason-react",
+    "@glennsl/bs-jest"
+  ],
+  "bsc-flags": [
+    "-bs-super-errors"
+  ],
+  "refmt": 3,
+  "reason": {
+    "react-jsx": 3
+  },
+  "package-specs": {
+    "module": "es6",
+    "in-source": true
+  },
+  "suffix": ".bs.js"
+}

template/src/App.re

@@ -0,0 +1,31 @@
+%bs.raw
+{|import './App.css'|};
+
+/* The snippet below is what we'd like to have, but it doesn't seem to play
+ * well with BuckleScript code generation, because we'd need the default
+ * export.
+ *
+ * [@bs.module] external logo: string = "./logo.svg";
+ */
+let logo = [%bs.raw {|require('./logo.svg')|}];
+
+[@react.component]
+let make = () => {
+  <div className="App">
+    <header className="App-header">
+      <img src=logo className="App-logo" alt="logo" />
+      <p>
+        {React.string("Edit ")}
+        <code> {React.string("src/App.re")} </code>
+        {React.string(" and save to reload.")}
+      </p>
+      <a
+        className="App-link"
+        href="https://reasonml.github.io/reason-react"
+        target="_blank"
+        rel="noopener noreferrer">
+        {React.string("Learn Reason React")}
+      </a>
+    </header>
+  </div>;
+};

template/src/app_test.re

@@ -0,0 +1,5 @@
+open Jest;
+
+test("addition", (_) =>
+  Expect.(expect(3 + 4) |> toBe(7))
+);

template/src/index.re

@@ -0,0 +1,15 @@
+%bs.raw
+{|import './index.css'|};
+
+[@bs.module "./serviceWorker"]
+external register_service_worker: unit => unit = "register";
+[@bs.module "./serviceWorker"]
+external unregister_service_worker: unit => unit = "unregister";
+
+ReactDOMRe.renderToElementWithId(<App />, "root");
+
+// If you want your app to work offline and load faster, you can change
+// unregister_service_worker() to register_service_worker() below. Note this
+// comes with some pitfalls. Learn more about service workers:
+// https://bit.ly/CRA-PWA
+unregister_service_worker();