Merge pull request #3866 from chenglou/hooks-template-revamp

Update react-hooks template

Author: bobzhang

jscomp/bsb/bsb_templates.ml

@@ -4,3 +4,4 @@
 npm-debug.log
 /lib/bs/
 /node_modules/
+/bundleOutput/

jscomp/bsb/templates/react-hooks/.gitignore

@@ -1,36 +1,55 @@
-# ${bsb:name}
+# ReasonReact Template & Examples
 
-## Run Project
+This is:
+- A template for your new ReasonReact project.
+- A collection of thin examples illustrating ReasonReact usage.
+- Extra helper documentation for ReasonReact (full ReasonReact docs [here](https://reasonml.github.io/reason-react/)).
+
+`src` contains 4 sub-folders, each an independent, self-contained ReasonReact example. Feel free to delete any of them and shape this into your project! This template's more malleable than you might be used to =).
+
+The point of this template and examples is to let you understand and personally tweak the entirely of it. We **don't** give you an opaque, elaborate mega build setup just to put some boxes on the screen. It strikes to stay transparent, learnable, and simple. You're encouraged to read every file; it's a great feeling, having the full picture of what you're using and being able to touch any part.
+
+## Run
 
 ```sh
 npm install
+npm run server
+# in a new tab
 npm start
-# in another tab
-npm run webpack
 ```
 
-After you see the webpack compilation succeed (the `npm run webpack` step), open up `build/index.html` (**no server needed!**). Then modify whichever `.re` file in `src` and refresh the page to see the changes.
+Open a new web page to `http://localhost:8000/`. Change any `.re` file in `src` to see the page auto-reload. **You don't need any bundler when you're developing**!
 
-**For more elaborate ReasonReact examples**, please see https://github.com/reasonml-community/reason-react-example
+**How come we don't need any bundler during development**? We highly encourage you to open up `index.html` to check for yourself!
 
-## Run Project with Server
+# Features Used
 
-To run with the webpack development server run `npm run server` and view in the browser at http://localhost:8000. Running in this environment provides hot reloading and support for routing; just edit and save the file and the browser will automatically refresh.
+|                           | Blinking Greeting | Reducer from ReactJS Docs | Fetch Dog Pictures | Reason Using JS Using Reason |
+|---------------------------|------------------|----------------------------|--------------------|------------------------------|
+| No props                  |                  | ✓                          |                    |                             |
+| Has props                 |                  |                            |                    | ✓                           |
+| Children props            | ✓                |                            |                    |                             |
+| No state                  |                  |                            |                    | ✓                           |
+| Has state                 | ✓                |                            |  ✓                 |                             |
+| Has state with useReducer |                  | ✓                          |                    |                             |
+| ReasonReact using ReactJS |                  |                            |                    | ✓                           |
+| ReactJS using ReasonReact |                  |                            |                    | ✓                           |
+| useEffect                 | ✓                |                            |  ✓                |                             |
+| Dom attribute             | ✓                | ✓                          |                   | ✓                           |
+| Styling                   | ✓                | ✓                          |  ✓                | ✓                           |
+| React.array               |                  |                            |  ✓                 |                             |
 
-Note that any hot reload on a route will fall back to the root (`/`), so `ReasonReact.Router.dangerouslyGetInitialUrl` will likely be needed alongside the `ReasonReact.Router.watchUrl` logic to handle routing correctly on hot reload refreshes or simply opening the app at a URL that is not the root.
+# Bundle for Production
 
-To use a port other than 8000 set the `PORT` environment variable (`PORT=8080 npm run server`).
+We've included a convenience `UNUSED_webpack.config.js`, in case you want to ship your project to production. You can rename and/or remove that in favor of other bundlers, e.g. Rollup.
 
-## Build for Production
+We've also provided a barebone `indexProduction.html`, to serve your bundle.
 
 ```sh
-npm run clean
-npm run build
-npm run webpack:production
+npm install webpack webpack-cli
+# rename file
+mv UNUSED_webpack.config.js webpack.config.js
+# call webpack to bundle for production
+./node_modules/.bin/webpack
+open indexProduction.html
 ```
-
-This will replace the development artifact `build/Index.js` for an optimized version as well as copy `src/index.html` into `build/`. You can then deploy the contents of the `build` directory (`index.html` and `Index.js`).
-
-If you make use of routing (via `ReasonReact.Router` or similar logic) ensure that server-side routing handles your routes or that 404's are directed back to `index.html` (which is how the dev server is set up).
-
-**To enable dead code elimination**, change `bsconfig.json`'s `package-specs` `module` from `"commonjs"` to `"es6"`. Then re-run the above 2 commands. This will allow Webpack to remove unused code.

jscomp/bsb/templates/react-hooks/README.md

@@ -0,0 +1,14 @@
+const path = require('path');
+
+module.exports = {
+  entry: './src/Index.bs.js',
+  // If you ever want to use webpack during development, change 'production'
+  // to 'development' as per webpack documentation. Again, you don't have to
+  // use webpack or any other bundler during development! Recheck README if
+  // you didn't know this
+  mode: 'production',
+  output: {
+    path: path.join(__dirname, "bundleOutput"),
+    filename: 'index.js',
+  },
+};

jscomp/bsb/templates/react-hooks/UNUSED_webpack.config.js

@@ -1,13 +1,13 @@
-
 {
-  "name": "react-hooks-template",
+  "name": "reason-react-examples",
   "reason": {
-    "react-jsx": 3
+    "react-jsx": 3,
   },
   "sources": {
     "dir" : "src",
     "subdirs" : true
   },
+  "bsc-flags": ["-bs-super-errors", "-bs-no-version-header"],
   "package-specs": [{
     "module": "commonjs",
     "in-source": true

jscomp/bsb/templates/react-hooks/bsconfig.json

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>ReasonReact Examples</title>
+</head>
+<body>
+  <script>
+    // stub a variable ReactJS checks. ReactJS assumes you're using a bundler, NodeJS or similar system that provides it the `process.env.NODE_ENV` variable.
+    window.process = {
+      env: {
+        NODE_ENV: 'development'
+      }
+    };
+  </script>
+
+  <!-- This is https://github.com/marijnh/moduleserve, the secret sauce that allows us not need to bundle things during development, and have instantaneous iteration feedback, without any hot-reloading or extra build pipeline needed. -->
+  <script src="/moduleserve/load.js" data-module="./src/Index.bs.js"></script>
+  <!-- Our little watcher. Super clean. Check it out! -->
+  <script src="./watcher.js"></script>
+</body>
+</html>

jscomp/bsb/templates/react-hooks/index.html

@@ -5,12 +5,6 @@
   <title>ReasonReact Examples</title>
 </head>
 <body>
-  Component 1:
-  <div id="index1"></div>
-
-  Component 2:
-  <div id="index2"></div>
-
-  <script src="/Index.js"></script>
+  <script src="./bundleOutput/index.js"></script>
 </body>
 </html>

jscomp/bsb/templates/react-hooks/src/index.html renamed to jscomp/bsb/templates/react-hooks/indexProduction.html

@@ -3,28 +3,25 @@
   "version": "${bsb:proj-version}",
   "scripts": {
     "build": "bsb -make-world",
-    "start": "bsb -make-world -w",
+    "start": "bsb -make-world -w -ws _ ",
     "clean": "bsb -clean-world",
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "webpack": "webpack -w",
-    "webpack:production": "NODE_ENV=production webpack",
-    "server": "webpack-dev-server"
+    "server": "moduleserve ./ --port 8000",
+    "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [
-    "BuckleScript"
+    "BuckleScript",
+    "ReasonReact",
+    "reason-react"
   ],
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "react": "^16.8.1",
-    "react-dom": "^16.8.1",
-    "reason-react": ">=0.7.0"
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "reason-react": ">=0.4.0"
   },
   "devDependencies": {
     "bs-platform": "^${bsb:bs-version}",
-    "html-webpack-plugin": "^3.2.0",
-    "webpack": "^4.0.1",
-    "webpack-cli": "^3.1.1",
-    "webpack-dev-server": "^3.1.8"
+    "moduleserve": "^0.8.4"
   }
 }

jscomp/bsb/templates/react-hooks/package.json

@@ -0,0 +1,25 @@
+[@react.component]
+let make = (~children) => {
+  let (show, setShow) = React.useState(() => true);
+
+  // Notice that instead of `useEffect`, we have `useEffect0`. See
+  // reasonml.github.io/reason-react/docs/en/components#hooks for more info
+  React.useEffect0(() => {
+    let id =
+      Js.Global.setInterval(
+        () => setShow(previousShow => !previousShow),
+        1000,
+      );
+
+    Some(() => Js.Global.clearInterval(id));
+  });
+
+  let style =
+    if (show) {
+      ReactDOMRe.Style.make(~opacity="1", ~transition="opacity 1s", ());
+    } else {
+      ReactDOMRe.Style.make(~opacity="0", ~transition="opacity 1s", ());
+    };
+
+  <div style> children </div>;
+};