reproduce freeze more consistently

.prettierrc.yml

@@ -0,0 +1,4 @@
+singleQuote: true
+trailingComma: all
+tabWidth: 2
+semi: true

build/index.html

@@ -10,7 +10,6 @@
   <div id="page-wrapper">
     <div id="root"></div>
   </div>
-  <script type="text/javascript" src="Index.js"></script>
-</body>
+<script type="text/javascript" src="./Index.js"></script></body>
 
 </html>

package.json

@@ -17,13 +17,16 @@
   "author": "Aaron Ross <[email protected]>",
   "license": "MIT",
   "dependencies": {
+    "bulma": "^0.7.2",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "reason-react": ">=0.4.0"
   },
   "devDependencies": {
     "bs-platform": "^4.0.7",
+    "css-loader": "^1.0.1",
     "html-webpack-plugin": "^3.2.0",
+    "style-loader": "^0.23.1",
     "webpack": "^4.0.1",
     "webpack-cli": "^3.1.1",
     "webpack-dev-server": "^3.1.8"

src/Index.re

@@ -1 +1,3 @@
+[%bs.raw {|require("bulma/css/bulma.css")|}];
+
 ReactDOMRe.renderToElementWithId(<App />, "root");

src/components/App/App.re

@@ -1,11 +1,6 @@
 let component = ReasonReact.statelessComponent("App");
 
-let make = (_children) => {
+let make = _children => {
   ...component,
-  render: (_self) => (
-    <div>
-      <Greeting name="Aaron" />
-      <Stateful greeting="foo" />
-    </div>
-  ),
+  render: _self => <div> <Greeting name="Aaron" /> <Stateful /> </div>,
 };

src/components/Button/Button.re

@@ -0,0 +1,7 @@
+let component = ReasonReact.statelessComponent("Button");
+
+let make = (~text, ~onClick, _children) => {
+  ...component,
+  render: _self =>
+    <button onClick className="button"> (ReasonReact.string(text)) </button>,
+};

src/components/Stateful/Stateful.re

@@ -1,41 +1,25 @@
-type state = {
-  count: int,
-  show: bool,
-};
+type state = {count: int};
 
 type action =
   | Increment
-  | Decrement
-  | Toggle;
+  | Decrement;
 
 let component = ReasonReact.reducerComponent("Stateful");
 
-let make = (~greeting, _children) => {
+let make = _children => {
   ...component,
-  initialState: () => {count: 0, show: true},
+  initialState: () => {count: 0},
   reducer: (action, state) =>
     switch (action) {
-    | Increment => ReasonReact.Update({...state, count: state.count + 1})
-    | Decrement => ReasonReact.Update({...state, count: state.count - 1})
-    | Toggle => ReasonReact.Update({...state, show: !state.show})
+    | Increment => ReasonReact.Update({count: state.count + 1})
+    | Decrement => ReasonReact.Update({count: state.count - 1})
     },
-  render: self => {
-    let message = "You've clicked this " ++ string_of_int(self.state.count) ++ " times(s)";
+  render: self =>
     <div>
-      <button onClick=(_event => self.send(Increment))>
-        (ReasonReact.string("-"))
-      </button>
-      <button onClick=(_event => self.send(Decrement))>
-        (ReasonReact.string("+"))
-      </button>
-      <button onClick=(_event => self.send(Toggle))>
-        (ReasonReact.string("Toggle greeting"))
-      </button>
-      (
-        self.state.show
-        ? ReasonReact.string(greeting)
-        : ReasonReact.null
-      )
-    </div>;
-  },
+      <Button text="-" onClick=(_event => self.send(Decrement)) />
+      <div className="foo">
+        (ReasonReact.string(string_of_int(self.state.count) ++ "foo"))
+      </div>
+      <Button text="+" onClick=(_event => self.send(Increment)) />
+    </div>,
 };

src/index.html

@@ -10,7 +10,6 @@
   <div id="page-wrapper">
     <div id="root"></div>
   </div>
-  <script type="text/javascript" src="Index.js"></script>
 </body>
 
 </html>

webpack.config.js

@@ -1,6 +1,6 @@
 const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const outputDir = path.join(__dirname, 'build/');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const outputDir = path.resolve(__dirname, 'build/');
 
 const isProd = process.env.NODE_ENV === 'production';
 
@@ -9,19 +9,32 @@ module.exports = {
   mode: isProd ? 'production' : 'development',
   output: {
     path: outputDir,
-    publicPath: outputDir,
+    publicPath: './',
     filename: 'Index.js',
   },
-  plugins: [
-    new HtmlWebpackPlugin({
-      template: 'src/index.html',
-      inject: false
-    })
-  ],
+  // plugins: [
+  //   new HtmlWebpackPlugin({
+  //     template: 'src/index.html',
+  //     inject: 'body',
+  //   }),
+  // ],
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader'],
+      },
+    ],
+  },
+  watch: true,
+  watchOptions: {
+    ignored: /node_modules/,
+  },
   devServer: {
+    hot: true,
     compress: true,
     contentBase: outputDir,
     port: process.env.PORT || 8000,
-    historyApiFallback: true
-  }
+    historyApiFallback: true,
+  },
 };