Initial commit

.gitignore

@@ -0,0 +1,3 @@
+/lib
+.merlin
+.idea

README.md

@@ -0,0 +1,61 @@
+# ReasonReact Template & Examples
+
+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
+```
+
+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**!
+
+**How come we don't need any bundler during development**? We highly encourage you to open up `index.html` to check for yourself!
+
+# Features Used
+
+|                           | 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               |                   |                           |  ✓                 |                              |
+
+# Bundle for Production
+
+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.
+
+We've also provided a barebone `indexProduction.html`, to serve your bundle.
+
+```sh
+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
+```
+
+# Handle Routing Yourself
+
+To serve the files, this template uses a minimal dependency called `moduleserve`. A URL such as `localhost:8000/scores/john` resolves to the file `scores/john.html`. If you'd like to override this and handle URL resolution yourself, change the `server` command in `package.json` from `moduleserve ./ --port 8000` to `moduleserve ./ --port 8000 --spa` (for "single page application"). This will make `moduleserve` serve the default `index.html` for any URL. Since `index.html` loads `Index.bs.js`, you can grab hold of the URL in the corresponding `Index.re` and do whatever you want.
+
+By the way, ReasonReact comes with a small [router](https://reasonml.github.io/reason-react/docs/en/router) you might be interested in.

bsconfig.json

@@ -0,0 +1,22 @@
+{
+  "name": "reason-react-examples",
+  "reason": {
+    "react-jsx": 3
+  },
+  "sources": {
+    "dir" : "src",
+    "subdirs" : true
+  },
+  "bsc-flags": ["-bs-super-errors", "-bs-no-version-header"],
+  "package-specs": [{
+    "module": "commonjs",
+    "in-source": true
+  }],
+  "suffix": ".bs.js",
+  "namespace": true,
+  "bs-dependencies": [
+    "reason-react",
+    "bs-moment"
+  ],
+  "refmt": 3
+}

index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>ReasonReact Examples</title>
+</head>
+<body>
+  <div id="root" />
+  <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>

indexProduction.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>ReasonReact Examples</title>
+</head>
+<body>
+  <div id="root" />
+  <script src="./bundleOutput/index.js"></script>
+</body>
+</html>

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "reason-crossword-front",
+  "version": "0.1.0",
+  "scripts": {
+    "build": "bsb -make-world",
+    "start": "bsb -make-world -w -ws _ ",
+    "clean": "bsb -clean-world",
+    "server": "moduleserve ./ --port 8000",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "BuckleScript",
+    "ReasonReact",
+    "reason-react"
+  ],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "bs-moment": "^0.4.5",
+    "moment": "^2.25.3",
+    "react": "^16.8.1",
+    "react-datepicker": "^2.15.0",
+    "react-dom": "^16.8.1",
+    "reason-react": ">=0.7.1",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.11"
+  },
+  "devDependencies": {
+    "bs-platform": "^7.3.2",
+    "moduleserve": "^0.9.0"
+  }
+}

src/BlinkingGreeting/BlinkingGreeting.bs.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var Curry = require("bs-platform/lib/js/curry.js");
+var React = require("react");
+
+function BlinkingGreeting(Props) {
+  var children = Props.children;
+  var match = React.useState((function () {
+          return true;
+        }));
+  var setShow = match[1];
+  React.useEffect((function () {
+          var id = setInterval((function (param) {
+                  return Curry._1(setShow, (function (previousShow) {
+                                return !previousShow;
+                              }));
+                }), 1000);
+          return (function (param) {
+                    clearInterval(id);
+                    
+                  });
+        }), ([]));
+  var style = match[0] ? ({
+        opacity: "1",
+        transition: "opacity 1s"
+      }) : ({
+        opacity: "0",
+        transition: "opacity 1s"
+      });
+  return React.createElement("div", {
+              style: style
+            }, children);
+}
+
+var make = BlinkingGreeting;
+
+exports.make = make;
+/* react Not a pure module */

src/BlinkingGreeting/BlinkingGreeting.re

@@ -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>;
+};

src/DatePicker/DatePicker.bs.js

@@ -0,0 +1,17 @@
+'use strict';
+
+var React = require("react");
+var Moment = require("moment");
+
+function DatePicker(Props) {
+  var date = Moment().format("YYYY-MM-DD");
+  return React.createElement("input", {
+              type: "date",
+              value: date
+            });
+}
+
+var make = DatePicker;
+
+exports.make = make;
+/* react Not a pure module */

src/DatePicker/DatePicker.re

@@ -0,0 +1,5 @@
+[@react.component]
+let make = () => {
+  let date = MomentRe.momentNow() |> MomentRe.Moment.format("YYYY-MM-DD");
+  <input type_="date" value=date />;
+};

src/ExampleStyles.bs.js

@@ -0,0 +1,10 @@
+'use strict';
+
+
+var reasonReactBlue = "#48a9dc";
+
+var style = "\n  body {\n    background-color: rgb(224, 226, 229);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n  }\n  button {\n    background-color: white;\n    color: " + (String(reasonReactBlue) + (";\n    box-shadow: 0 0 0 1px " + (String(reasonReactBlue) + (";\n    border: none;\n    padding: 8px;\n    font-size: 16px;\n  }\n  button:active {\n    background-color: " + (String(reasonReactBlue) + ";\n    color: white;\n  }\n  .container {\n    margin: 12px 0px;\n    box-shadow: 0px 4px 16px rgb(200, 200, 200);\n    width: 720px;\n    border-radius: 12px;\n    font-family: sans-serif;\n  }\n  .containerTitle {\n    background-color: rgb(242, 243, 245);\n    border-radius: 12px 12px 0px 0px;\n    padding: 12px;\n    font-weight: bold;\n  }\n  .containerContent {\n    background-color: white;\n    padding: 16px;\n    border-radius: 0px 0px 12px 12px;\n  }\n")))));
+
+exports.reasonReactBlue = reasonReactBlue;
+exports.style = style;
+/* style Not a pure module */

src/ExampleStyles.re

@@ -0,0 +1,44 @@
+let reasonReactBlue = "#48a9dc";
+
+// The {j|...|j} feature is just string interpolation, from
+// bucklescript.github.io/docs/en/interop-cheatsheet#string-unicode-interpolation
+// This allows us to conveniently write CSS, together with variables, by
+// constructing a string
+let style = {j|
+  body {
+    background-color: rgb(224, 226, 229);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  button {
+    background-color: white;
+    color: $reasonReactBlue;
+    box-shadow: 0 0 0 1px $reasonReactBlue;
+    border: none;
+    padding: 8px;
+    font-size: 16px;
+  }
+  button:active {
+    background-color: $reasonReactBlue;
+    color: white;
+  }
+  .container {
+    margin: 12px 0px;
+    box-shadow: 0px 4px 16px rgb(200, 200, 200);
+    width: 720px;
+    border-radius: 12px;
+    font-family: sans-serif;
+  }
+  .containerTitle {
+    background-color: rgb(242, 243, 245);
+    border-radius: 12px 12px 0px 0px;
+    padding: 12px;
+    font-weight: bold;
+  }
+  .containerContent {
+    background-color: white;
+    padding: 16px;
+    border-radius: 0px 0px 12px 12px;
+  }
+|j};

src/FetchedDogPictures/FetchedDogPictures.bs.js

@@ -0,0 +1,64 @@
+'use strict';
+
+var Curry = require("bs-platform/lib/js/curry.js");
+var React = require("react");
+var Belt_Array = require("bs-platform/lib/js/belt_Array.js");
+
+function FetchedDogPictures(Props) {
+  var match = React.useState((function () {
+          return /* LoadingDogs */0;
+        }));
+  var setState = match[1];
+  var state = match[0];
+  React.useEffect((function () {
+          fetch("https://dog.ceo/api/breeds/image/random/3").then((function (response) {
+                      return response.json();
+                    })).then((function (jsonResponse) {
+                    Curry._1(setState, (function (_previousState) {
+                            return /* LoadedDogs */[jsonResponse.message];
+                          }));
+                    return Promise.resolve(undefined);
+                  })).catch((function (_err) {
+                  Curry._1(setState, (function (_previousState) {
+                          return /* ErrorFetchingDogs */1;
+                        }));
+                  return Promise.resolve(undefined);
+                }));
+          
+        }), ([]));
+  var tmp;
+  if (typeof state === "number") {
+    tmp = state !== 0 ? "An error occurred!" : "Loading...";
+  } else {
+    var dogs = state[0];
+    tmp = Belt_Array.mapWithIndex(dogs, (function (i, dog) {
+            var imageStyle = {
+              backgroundImage: "url(" + (String(dog) + ")"),
+              backgroundPosition: "center",
+              height: "120px",
+              marginRight: i === (dogs.length - 1 | 0) ? "0px" : "8px",
+              width: "100%",
+              backgroundSize: "cover",
+              borderRadius: "8px",
+              boxShadow: "0px 4px 16px rgb(200, 200, 200)"
+            };
+            return React.createElement("div", {
+                        key: dog,
+                        style: imageStyle
+                      });
+          }));
+  }
+  return React.createElement("div", {
+              style: {
+                display: "flex",
+                height: "120px",
+                alignItems: "center",
+                justifyContent: "center"
+              }
+            }, tmp);
+}
+
+var make = FetchedDogPictures;
+
+exports.make = make;
+/* react Not a pure module */

src/FetchedDogPictures/FetchedDogPictures.re

@@ -0,0 +1,70 @@
+[@bs.val] external fetch: string => Js.Promise.t('a) = "fetch";
+
+type state =
+  | LoadingDogs
+  | ErrorFetchingDogs
+  | LoadedDogs(array(string));
+
+[@react.component]
+let make = () => {
+  let (state, setState) = React.useState(() => LoadingDogs);
+
+  // Notice that instead of `useEffect`, we have `useEffect0`. See
+  // reasonml.github.io/reason-react/docs/en/components#hooks for more info
+  React.useEffect0(() => {
+    Js.Promise.(
+      fetch("https://dog.ceo/api/breeds/image/random/3")
+      |> then_(response => response##json())
+      |> then_(jsonResponse => {
+           setState(_previousState => LoadedDogs(jsonResponse##message));
+           Js.Promise.resolve();
+         })
+      |> catch(_err => {
+           setState(_previousState => ErrorFetchingDogs);
+           Js.Promise.resolve();
+         })
+      |> ignore
+    );
+
+    // Returning None, instead of Some(() => ...), means we don't have any
+    // cleanup to do before unmounting. That's not 100% true. We should
+    // technically cancel the promise. Unofortunately, there's currently no
+    // way to cancel a promise. Promises in general should be way less used
+    // for React components; but since folks do use them, we provide such an
+    // example here. In reality, this fetch should just be a plain callback,
+    // with a cancellation API
+    None;
+  });
+
+  <div
+    style={ReactDOMRe.Style.make(
+      ~height="120px",
+      ~display="flex",
+      ~alignItems="center",
+      ~justifyContent="center",
+      (),
+    )}>
+    {switch (state) {
+     | ErrorFetchingDogs => React.string("An error occurred!")
+     | LoadingDogs => React.string("Loading...")
+     | LoadedDogs(dogs) =>
+       dogs
+       ->Belt.Array.mapWithIndex((i, dog) => {
+           let imageStyle =
+             ReactDOMRe.Style.make(
+               ~height="120px",
+               ~width="100%",
+               ~marginRight=i === Js.Array.length(dogs) - 1 ? "0px" : "8px",
+               ~borderRadius="8px",
+               ~boxShadow="0px 4px 16px rgb(200, 200, 200)",
+               ~backgroundSize="cover",
+               ~backgroundImage={j|url($dog)|j},
+               ~backgroundPosition="center",
+               (),
+             );
+           <div key=dog style=imageStyle />;
+         })
+       ->React.array
+     }}
+  </div>;
+};

src/Index.bs.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var React = require("react");
+var ReactDOMRe = require("reason-react/src/ReactDOMRe.js");
+var DatePicker$ReasonReactExamples = require("./DatePicker/DatePicker.bs.js");
+
+ReactDOMRe.renderToElementWithId(React.createElement(DatePicker$ReasonReactExamples.make, { }), "root");
+
+/*  Not a pure module */

src/Index.re

@@ -0,0 +1 @@
+ReactDOMRe.renderToElementWithId(<DatePicker />, "root");

src/ReasonUsingJSUsingReason/ReactJSCard.js

@@ -0,0 +1,31 @@
+// In this Interop example folder, we have:
+// - A ReasonReact component, ReasonReactCard.re
+// - Used by a ReactJS component, ReactJSCard.js (this file)
+// - ReactJSCard.js can be used by ReasonReact, through bindings in ReasonUsingJSUsingReason.re
+// - ReasonUsingJSUsingReason.re is used by Index.re
+
+var ReactDOM = require('react-dom');
+var React = require('react');
+
+var ReasonReactCard = require('./ReasonReactCard.bs').make;
+
+var ReactJSComponent = function() {
+  let backgroundColor = "rgba(0, 0, 0, 0.05)";
+  let padding = "12px";
+
+  // We're not using JSX here, to avoid folks needing to install the related
+  // React toolchains just for this example.
+  // <div style={...}>
+  //   <div style={...}>This is a ReactJS card</div>
+  //   <ReasonReactCard style={...} />
+  // </div>
+  return React.createElement(
+    "div",
+    {style: {backgroundColor, padding, borderRadius: "8px"}},
+    React.createElement("div", {style: {marginBottom: "8px"}}, "This is a ReactJS card"),
+    React.createElement(ReasonReactCard, {style: {backgroundColor, padding, borderRadius: "4px"}}),
+  )
+};
+ReactJSComponent.displayName = "MyBanner";
+
+module.exports = ReactJSComponent;

src/ReasonUsingJSUsingReason/ReasonReactCard.bs.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var React = require("react");
+
+function ReasonReactCard(Props) {
+  var style = Props.style;
+  return React.createElement("div", {
+              style: style
+            }, "This is a ReasonReact card");
+}
+
+var make = ReasonReactCard;
+
+exports.make = make;
+/* react Not a pure module */

src/ReasonUsingJSUsingReason/ReasonReactCard.re

@@ -0,0 +1,10 @@
+// In this Interop example folder, we have:
+// - A ReasonReact component, ReasonReactCard.re (this file)
+// - Used by a ReactJS component, ReactJSCard.js
+// - ReactJSCard.js can be used by ReasonReact, through bindings in ReasonUsingJSUsingReason.re
+// - ReasonUsingJSUsingReason.re is used by Index.re
+
+[@react.component]
+let make = (~style) => {
+  <div style> {React.string("This is a ReasonReact card")} </div>;
+};

src/ReasonUsingJSUsingReason/ReasonUsingJSUsingReason.bs.js

@@ -0,0 +1,8 @@
+'use strict';
+
+var ReactJSCard = require("./ReactJSCard");
+
+var make = ReactJSCard;
+
+exports.make = make;
+/* make Not a pure module */

src/ReasonUsingJSUsingReason/ReasonUsingJSUsingReason.re

@@ -0,0 +1,10 @@
+// In this Interop example folder, we have:
+// - A ReasonReact component, ReasonReactCard.re
+// - Used by a ReactJS component, ReactJSCard.js
+// - ReactJSCard.js can be used by ReasonReact, through bindings in ReasonUsingJSUsingReason.re (this file)
+// - ReasonUsingJSUsingReason.re is used by Index.re
+
+// All you need to do to use a ReactJS component in ReasonReact, is to write the lines below!
+// reasonml.github.io/reason-react/docs/en/components#import-from-js
+[@react.component] [@bs.module]
+external make: unit => React.element = "./ReactJSCard";

src/ReducerFromReactJSDocs/ReducerFromReactJSDocs.bs.js

@@ -0,0 +1,64 @@
+'use strict';
+
+var Curry = require("bs-platform/lib/js/curry.js");
+var React = require("react");
+
+var leftButtonStyle = {
+  width: "48px",
+  borderRadius: "4px 0px 0px 4px"
+};
+
+var rightButtonStyle = {
+  width: "48px",
+  borderRadius: "0px 4px 4px 0px"
+};
+
+var containerStyle = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between"
+};
+
+var initialState = {
+  count: 0
+};
+
+function reducer(state, action) {
+  if (action) {
+    return {
+            count: state.count - 1 | 0
+          };
+  } else {
+    return {
+            count: state.count + 1 | 0
+          };
+  }
+}
+
+function ReducerFromReactJSDocs(Props) {
+  var match = React.useReducer(reducer, initialState);
+  var dispatch = match[1];
+  return React.createElement("div", {
+              style: containerStyle
+            }, React.createElement("div", undefined, "Count: ", String(match[0].count)), React.createElement("div", undefined, React.createElement("button", {
+                      style: leftButtonStyle,
+                      onClick: (function (_event) {
+                          return Curry._1(dispatch, /* Decrement */1);
+                        })
+                    }, "-"), React.createElement("button", {
+                      style: rightButtonStyle,
+                      onClick: (function (_event) {
+                          return Curry._1(dispatch, /* Increment */0);
+                        })
+                    }, "+")));
+}
+
+var make = ReducerFromReactJSDocs;
+
+exports.leftButtonStyle = leftButtonStyle;
+exports.rightButtonStyle = rightButtonStyle;
+exports.containerStyle = containerStyle;
+exports.initialState = initialState;
+exports.reducer = reducer;
+exports.make = make;
+/* react Not a pure module */

src/ReducerFromReactJSDocs/ReducerFromReactJSDocs.re

@@ -0,0 +1,44 @@
+// This is the ReactJS documentation's useReducer example, directly ported over
+// https://reactjs.org/docs/hooks-reference.html#usereducer
+
+// A little extra we've put, because the ReactJS example has no styling
+let leftButtonStyle = ReactDOMRe.Style.make(~borderRadius="4px 0px 0px 4px", ~width="48px", ());
+let rightButtonStyle = ReactDOMRe.Style.make(~borderRadius="0px 4px 4px 0px", ~width="48px", ());
+let containerStyle = ReactDOMRe.Style.make(~display="flex", ~alignItems="center", ~justifyContent="space-between", ());
+
+// Record and variant need explicit declarations.
+type state = {count: int};
+
+type action =
+  | Increment
+  | Decrement;
+
+let initialState = {count: 0};
+
+let reducer = (state, action) => {
+  switch (action) {
+  | Increment => {count: state.count + 1}
+  | Decrement => {count: state.count - 1}
+  };
+};
+
+[@react.component]
+let make = () => {
+  let (state, dispatch) = React.useReducer(reducer, initialState);
+
+  // We can use a fragment here, but we don't, because we want to style the counter
+  <div style=containerStyle>
+    <div>
+      {React.string("Count: ")}
+      {React.string(string_of_int(state.count))}
+    </div>
+    <div>
+      <button style=leftButtonStyle onClick={_event => dispatch(Decrement)}>
+        {React.string("-")}
+      </button>
+      <button style=rightButtonStyle onClick={_event => dispatch(Increment)}>
+        {React.string("+")}
+      </button>
+    </div>
+  </div>;
+};

watcher.js

@@ -0,0 +1,39 @@
+// This is our simple, robust watcher. It hooks into the BuckleScript build
+// system to listen for build events.
+// See package.json's `start` script and `./node_modules/.bin/bsb --help`
+
+// Btw, if you change this file and reload the page, your browser cache
+// _might_ not pick up the new version. If you're in Chrome, do Force Reload.
+
+var websocketReloader;
+var LAST_SUCCESS_BUILD_STAMP = localStorage.getItem('LAST_SUCCESS_BUILD_STAMP') || 0;
+// package.json's `start` script's `bsb -ws _` means it'll pipe build events
+// through a websocket connection to a default port of 9999. This is
+// configurable, e.g. `-ws 5000`
+var webSocketPort = 9999;
+
+function setUpWebSocket() {
+  if (websocketReloader == null || websocketReloader.readyState !== 1) {
+    try {
+      websocketReloader = new WebSocket(`ws://${window.location.hostname}:${webSocketPort}`);
+      websocketReloader.onmessage = (message) => {
+        var newData = JSON.parse(message.data).LAST_SUCCESS_BUILD_STAMP;
+        if (newData > LAST_SUCCESS_BUILD_STAMP) {
+          LAST_SUCCESS_BUILD_STAMP = newData;
+          localStorage.setItem('LAST_SUCCESS_BUILD_STAMP', LAST_SUCCESS_BUILD_STAMP);
+          // Refresh the page! This will naturally re-run everything,
+          // including our moduleserve which will re-resolve all the modules.
+          // No stable build!
+          location.reload(true);
+        }
+
+      }
+    } catch (exn) {
+      console.error("The watcher tried to connect to web socket, but failed. Here's the message:");
+      console.error(exn);
+    }
+  }
+};
+
+setUpWebSocket();
+setInterval(setUpWebSocket, 2000);

webpack.config.js

@@ -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',
+  },
+};