First part in modification

bsconfig.json

@@ -1,11 +1,11 @@
 {
-  "name": "reason-react-examples",
+  "name": "probExample",
   "reason": {
     "react-jsx": 3
   },
   "sources": {
-    "dir" : "src",
+    "dir": "src",
-    "subdirs" : true
+    "subdirs": true
   },
   "bsc-flags": ["-bs-super-errors", "-bs-no-version-header"],
   "package-specs": [{
@@ -15,7 +15,13 @@
   "suffix": ".bs.js",
   "namespace": true,
   "bs-dependencies": [
-    "reason-react"
+    "bs-ant-design-alt",
+    "reason-react",
+    "bs-reform",
+    "reschema"
   ],
-  "refmt": 3
+  "refmt": 3,
-}
+  "ppx-flags": [
+    "lenses-ppx/ppx"
+  ],
+}

my-react-app/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 */

my-react-app/src/FetchedDogPictures/FetchedDogPictures.bs.js

@@ -11,7 +11,7 @@ function FetchedDogPictures(Props) {
   var setState = match[1];
   var state = match[0];
   React.useEffect((function () {
-          fetch("https://dog.ceo/api/breeds/image/random/2").then((function (response) {
+          fetch("https://dog.ceo/api/breeds/image/random/3").then((function (response) {
                       return response.json();
                     })).then((function (jsonResponse) {
                     Curry._1(setState, (function (_previousState) {

my-react-app/src/Index.bs.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var React = require("react");
+var ReactDom = require("react-dom");
+var ExampleStyles$ReasonReactExamples = require("./ExampleStyles.bs.js");
+var BlinkingGreeting$ReasonReactExamples = require("./BlinkingGreeting/BlinkingGreeting.bs.js");
+var FetchedDogPictures$ReasonReactExamples = require("./FetchedDogPictures/FetchedDogPictures.bs.js");
+var ReducerFromReactJSDocs$ReasonReactExamples = require("./ReducerFromReactJSDocs/ReducerFromReactJSDocs.bs.js");
+var ReasonUsingJSUsingReason$ReasonReactExamples = require("./ReasonUsingJSUsingReason/ReasonUsingJSUsingReason.bs.js");
+
+var style = document.createElement("style");
+
+document.head.appendChild(style);
+
+style.innerHTML = ExampleStyles$ReasonReactExamples.style;
+
+function makeContainer(text) {
+  var container = document.createElement("div");
+  container.className = "container";
+  var title = document.createElement("div");
+  title.className = "containerTitle";
+  title.innerText = text;
+  var content = document.createElement("div");
+  content.className = "containerContent";
+  container.appendChild(title);
+  container.appendChild(content);
+  document.body.appendChild(container);
+  return content;
+}
+
+ReactDom.render(React.createElement(BlinkingGreeting$ReasonReactExamples.make, {
+          children: "Hello!"
+        }), makeContainer("Blinking Greeting"));
+
+ReactDom.render(React.createElement(ReducerFromReactJSDocs$ReasonReactExamples.make, { }), makeContainer("Reducer From ReactJS Docs"));
+
+ReactDom.render(React.createElement(FetchedDogPictures$ReasonReactExamples.make, { }), makeContainer("Fetched Dog Pictures"));
+
+ReactDom.render(React.createElement(ReasonUsingJSUsingReason$ReasonReactExamples.make, { }), makeContainer("Reason Using JS Using Reason"));
+
+exports.style = style;
+exports.makeContainer = makeContainer;
+/* style Not a pure module */

package.json

@@ -5,6 +5,7 @@
     "build": "bsb -make-world",
     "start": "bsb -make-world -w -ws _ ",
     "clean": "bsb -clean-world",
+    "parcel": "parcel ./src/index.html --public-url / --no-autoinstall -- watch",
     "server": "moduleserve ./ --port 8000",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -16,12 +17,18 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
+    "antd": "^3.26.8",
+    "bs-ant-design-alt": "^2.0.0-alpha.32",
+    "bs-reform": "9.7.1",
+    "lenses-ppx": "4.0.0",
+    "parcel-bundler": "^1.12.4",
     "react": "^16.8.1",
     "react-dom": "^16.8.1",
-    "reason-react": ">=0.7.0"
+    "reason-react": ">=0.7.0",
+    "reschema": "^1.3.0"
   },
   "devDependencies": {
-    "bs-platform": "^7.1.0",
+    "bs-platform": "^5.0.6",
     "moduleserve": "^0.9.0"
   }
 }

src/BlinkingGreeting/BlinkingGreeting.re

@@ -1,25 +0,0 @@
-[@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/EAFunds/EAFunds_Data.bs.js

@@ -0,0 +1,48 @@
+'use strict';
+
+
+function makeFundWithInfo(name, group, existingDonations, existingPayouts) {
+  return /* record */[
+          /* group */group,
+          /* name */name,
+          /* existingDonations */existingDonations,
+          /* existingPayouts */existingPayouts
+        ];
+}
+
+var funds = /* array */[
+  /* record */[
+    /* group : Fund */[/* ANIMAL_WELFARE */0],
+    /* name */"Animal Welfare Fund",
+    /* existingDonations */4000.0,
+    /* existingPayouts */10.0
+  ],
+  /* record */[
+    /* group : Fund */[/* GLOBAL_HEALTH */1],
+    /* name */"Global Health Fund",
+    /* existingDonations */4000.0,
+    /* existingPayouts */10.0
+  ],
+  /* record */[
+    /* group : Fund */[/* LONG_TERM_FUTURE */2],
+    /* name */"Long Term Future Fund",
+    /* existingDonations */4000.0,
+    /* existingPayouts */10.0
+  ],
+  /* record */[
+    /* group : Fund */[/* ANIMAL_WELFARE */0],
+    /* name */"Meta Fund",
+    /* existingDonations */4000.0,
+    /* existingPayouts */10.0
+  ],
+  /* record */[
+    /* group : Fund */[/* ANIMAL_WELFARE */0],
+    /* name */"All",
+    /* existingDonations */undefined,
+    /* existingPayouts */undefined
+  ]
+];
+
+exports.makeFundWithInfo = makeFundWithInfo;
+exports.funds = funds;
+/* No side effect */

src/EAFunds/EAFunds_Data.re

@@ -0,0 +1,55 @@
+type fund =
+  | ANIMAL_WELFARE
+  | GLOBAL_HEALTH
+  | LONG_TERM_FUTURE
+  | META;
+
+type group =
+  | Fund(fund)
+  | All;
+
+type parameter =
+  | DONATIONS
+  | PAYOUTS;
+
+type fundWithInfo = {
+  group,
+  name: string,
+  existingDonations: option(float),
+  existingPayouts: option(float),
+};
+
+let makeFundWithInfo = (name, group, existingDonations, existingPayouts) => {
+  group,
+  name,
+  existingDonations,
+  existingPayouts,
+};
+
+let funds = [|
+  makeFundWithInfo(
+    "Animal Welfare Fund",
+    Fund(ANIMAL_WELFARE),
+    Some(4000.0),
+    Some(10.0),
+  ),
+  makeFundWithInfo(
+    "Global Health Fund",
+    Fund(GLOBAL_HEALTH),
+    Some(4000.0),
+    Some(10.0),
+  ),
+  makeFundWithInfo(
+    "Long Term Future Fund",
+    Fund(LONG_TERM_FUTURE),
+    Some(4000.0),
+    Some(10.0),
+  ),
+  makeFundWithInfo(
+    "Meta Fund",
+    Fund(ANIMAL_WELFARE),
+    Some(4000.0),
+    Some(10.0),
+  ),
+  makeFundWithInfo("All", Fund(ANIMAL_WELFARE), None, None),
+|];

src/EAFunds/EAFunds_Form.bs.js

@@ -0,0 +1,107 @@
+'use strict';
+
+var Curry = require("bs-platform/lib/js/curry.js");
+var React = require("react");
+var Antd_Form = require("bs-ant-design-alt/src/Antd_Form.js");
+var Antd_Input = require("bs-ant-design-alt/src/Antd_Input.js");
+var Antd_Radio = require("bs-ant-design-alt/src/Antd_Radio.js");
+var ReForm$BsReform = require("bs-reform/src/ReForm.bs.js");
+var Helpers$BsReform = require("bs-reform/src/Helpers.bs.js");
+
+function get(state, field) {
+  switch (field) {
+    case /* Group */0 :
+        return state[/* group */0];
+    case /* Year */1 :
+        return state[/* year */1];
+    case /* Parameter */2 :
+        return state[/* parameter */2];
+    
+  }
+}
+
+function set(state, field, value) {
+  switch (field) {
+    case /* Group */0 :
+        return /* record */[
+                /* group */value,
+                /* year */state[/* year */1],
+                /* parameter */state[/* parameter */2]
+              ];
+    case /* Year */1 :
+        return /* record */[
+                /* group */state[/* group */0],
+                /* year */value,
+                /* parameter */state[/* parameter */2]
+              ];
+    case /* Parameter */2 :
+        return /* record */[
+                /* group */state[/* group */0],
+                /* year */state[/* year */1],
+                /* parameter */value
+              ];
+    
+  }
+}
+
+var FormConfig = {
+  get: get,
+  set: set
+};
+
+var Form = ReForm$BsReform.Make({
+      set: set,
+      get: get
+    });
+
+function handleChange(handleChange$1, $$event) {
+  return Curry._1(handleChange$1, $$event.target.value);
+}
+
+function EAFunds_Form$FieldString(Props) {
+  Props.field;
+  Props.label;
+  return React.createElement(Form.Field.make, {
+              field: /* Group */0,
+              render: (function (param) {
+                  var value = param[/* value */4];
+                  var handleChange = param[/* handleChange */0];
+                  return React.createElement(Antd_Form.Item.make, {
+                              label: "Question Type",
+                              help: "Number example: 'How many inches of rain will there be tomorrow?' Binary example: 'Will it rain tomorrow?'",
+                              required: true,
+                              children: React.createElement(Antd_Radio.Group.make, {
+                                    defaultValue: value,
+                                    value: value,
+                                    onChange: (function (param) {
+                                        return Helpers$BsReform.handleChange(handleChange, param);
+                                      }),
+                                    children: null
+                                  }, React.createElement(Antd_Radio.make, {
+                                        value: "FLOAT",
+                                        children: "Number"
+                                      }), React.createElement(Antd_Radio.make, {
+                                        value: "PERCENTAGE",
+                                        children: "Binary"
+                                      }))
+                            });
+                })
+            });
+}
+
+var FieldString = {
+  make: EAFunds_Form$FieldString
+};
+
+function EAFunds_Form(Props) {
+  return React.createElement(Antd_Input.make, { });
+}
+
+var make = EAFunds_Form;
+
+exports.FormConfig = FormConfig;
+exports.Form = Form;
+exports.handleChange = handleChange;
+exports.FieldString = FieldString;
+exports.make = make;
+/* Form Not a pure module */

src/EAFunds/EAFunds_Form.re

@@ -0,0 +1,54 @@
+open BsReform;
+open EAFunds_Data;
+
+module FormConfig = [%lenses
+  type state = {
+    group: string,
+    year: float,
+    parameter: string,
+  }
+];
+
+module Form = ReForm.Make(FormConfig);
+
+let handleChange = (handleChange, event) =>
+  handleChange(ReactEvent.Form.target(event)##value);
+
+module FieldString = {
+  [@react.component]
+  let make = (~field, ~label) => {
+    <Form.Field
+      field=FormConfig.Group
+      render={({handleChange, value}) =>
+        <Antd.Form.Item
+          label={"Question Type" |> ReasonReact.string}
+          required=true
+          help={
+            "Number example: 'How many inches of rain will there be tomorrow?' Binary example: 'Will it rain tomorrow?'"
+            |> ReasonReact.string
+          }>
+          <Antd.Radio.Group
+            value
+            defaultValue=value
+            onChange={Helpers.handleChange(handleChange)}>
+            <Antd.Radio value="FLOAT">
+              {"Number" |> ReasonReact.string}
+            </Antd.Radio>
+            <Antd.Radio value="PERCENTAGE">
+              {"Binary" |> ReasonReact.string}
+            </Antd.Radio>
+          </Antd.Radio.Group>
+        </Antd.Form.Item>
+      }
+    />;
+  };
+};
+
+[@react.component]
+let make = () => {
+  <Antd.Input
+    // </Antd.Radio.Group>;
+    // <Antd.Radio.Group value=group onChange={handleChange(r => setText(r))}>
+    // let (group, setText) = React.useState(() => "");
+  />;
+};

src/EAFunds/EAFunds_Model.bs.js

@@ -1,23 +1,23 @@
 'use strict';
 
-var Math$ReasonReactExamples = require("./Math.bs.js");
+var Math$ProbExample = require("../Math.bs.js");
 
 function yearDiff(year) {
   return year - 2020.0;
 }
 
 function yearlyMeanGrowthRateIfNotClosed(group) {
-  return {
+  return /* record */[
-          meanDiff: 1.1,
+          /* meanDiff */1.1,
-          stdDiff: 1.1
+          /* stdDiff */1.1
-        };
+        ];
 }
 
 function calculateDifference(currentValue, yearInQuestion, y) {
   var yearDiff = yearInQuestion - 2020.0;
-  var meanDiff = Math.pow(y.meanDiff, yearDiff);
+  var meanDiff = Math.pow(y[/* meanDiff */0], yearDiff);
-  var stdDevDiff = Math.pow(y.meanDiff, yearDiff);
+  var stdDevDiff = Math.pow(y[/* meanDiff */0], yearDiff);
-  return Math$ReasonReactExamples.normal(currentValue * meanDiff, 0.2 * stdDevDiff);
+  return Math$ProbExample.normal(currentValue * meanDiff, 0.2 * stdDevDiff);
 }
 
 function currentValue(group, parameter) {
@@ -63,13 +63,16 @@ var PayoutsIfAround = {
   currentValue: currentValue
 };
 
-function calculate(group, year, parameter) {
+function run(group, year, parameter) {
-  return calculateDifference(currentValue(group, parameter), year, {
+  return calculateDifference(currentValue(group, parameter), year, /* record */[
-              meanDiff: 1.1,
+              /* meanDiff */1.1,
-              stdDiff: 1.1
+              /* stdDiff */1.1
-            });
+            ]);
 }
 
+var Model = { };
+
 exports.PayoutsIfAround = PayoutsIfAround;
-exports.calculate = calculate;
+exports.run = run;
+exports.Model = Model;
 /* No side effect */

src/EAFunds/EAFunds_Model.re

@@ -1,16 +1,4 @@
-type fund =
+open EAFunds_Data;
-  | ANIMAL_WELFARE
-  | GLOBAL_HEALTH
-  | LONG_TERM_FUTURE
-  | META;
-
-type group =
-  | Fund(fund)
-  | All;
-
-type parameter =
-  | DONATIONS
-  | PAYOUTS;
 
 type yearlyNumericDiff = {
   meanDiff: float,
@@ -54,7 +42,7 @@ module PayoutsIfAround = {
   };
 };
 
-let calculate = (group: group, year: float, parameter: parameter) => {
+let run = (group: group, year: float, parameter: parameter) => {
   PayoutsIfAround.(
     calculateDifference(
       currentValue(group, parameter),
@@ -62,4 +50,12 @@ let calculate = (group: group, year: float, parameter: parameter) => {
       yearlyMeanGrowthRateIfNotClosed(group),
     )
   );
+};
+
+module Model = {
+  type params = {
+    groups: array(fundWithInfo),
+    year: float,
+    parameters: array(parameter),
+  };
 };

src/FetchedDogPictures/FetchedDogPictures.re

@@ -1,70 +0,0 @@
-[@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/2")
-      |> 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/Funds.bs.js

@@ -1,9 +1,9 @@
 'use strict';
 
 var React = require("react");
-var EAFunds$ReasonReactExamples = require("./EAFunds.bs.js");
+var EAFunds_Model$ProbExample = require("./EAFunds/EAFunds_Model.bs.js");
 
-var response = EAFunds$ReasonReactExamples.calculate(/* Fund */[/* GLOBAL_HEALTH */1], 2029, /* DONATIONS */0);
+var response = EAFunds_Model$ProbExample.run(/* Fund */[/* GLOBAL_HEALTH */1], 2029, /* DONATIONS */0);
 
 function Funds(Props) {
   return React.createElement("div", undefined, response);

src/Funds.re

@@ -1,4 +1,4 @@
-let response = EAFunds.calculate(Fund(GLOBAL_HEALTH), 2029., DONATIONS);
+let response = EAFunds_Model.run(Fund(GLOBAL_HEALTH), 2029., DONATIONS);
 
 [@react.component]
 let make = () => {

src/Index.bs.js

@@ -2,14 +2,14 @@
 
 var React = require("react");
 var ReactDom = require("react-dom");
-var Funds$ReasonReactExamples = require("./Funds.bs.js");
+var EAFunds_Form$ProbExample = require("./EAFunds/EAFunds_Form.bs.js");
-var ExampleStyles$ReasonReactExamples = require("./ExampleStyles.bs.js");
+var ExampleStyles$ProbExample = require("./ExampleStyles.bs.js");
 
 var style = document.createElement("style");
 
 document.head.appendChild(style);
 
-style.innerHTML = ExampleStyles$ReasonReactExamples.style;
+style.innerHTML = ExampleStyles$ProbExample.style;
 
 function makeContainer(text) {
   var container = document.createElement("div");
@@ -25,7 +25,7 @@ function makeContainer(text) {
   return content;
 }
 
-ReactDom.render(React.createElement(Funds$ReasonReactExamples.make, { }), makeContainer("Reason Using JS Using Reason"));
+ReactDom.render(React.createElement(EAFunds_Form$ProbExample.make, { }), makeContainer("Funds Calculation"));
 
 exports.style = style;
 exports.makeContainer = makeContainer;

src/Index.re

@@ -27,4 +27,4 @@ let makeContainer = text => {
   content;
 };
 
-ReactDOMRe.render(<Funds />, makeContainer("Reason Using JS Using Reason"));
+ReactDOMRe.render(<EAFunds_Form />, makeContainer("Funds Calculation"));

src/ReasonUsingJSUsingReason/ReactJSCard.js

@@ -1,31 +0,0 @@
-// 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.re

@@ -1,10 +0,0 @@
-// 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.re

@@ -1,10 +0,0 @@
-// 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.re

@@ -1,44 +0,0 @@
-// 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", ());
-
-// 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={ReactDOMRe.Style.make(~display="flex", ~alignItems="center", ~justifyContent="space-between", ())}>
-    <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>;
-};

src/Test1.bs.js

@@ -3,59 +3,59 @@
 var Block = require("bs-platform/lib/js/block.js");
 
 function foo(joint) {
-  return [
+  return /* array */[
-          {
+          /* record */[
-            statements: [
+            /* statements : array */[
-              {
+              /* record */[
-                statement: /* Senate */Block.__(0, [/* DEMOCRAT_VICTORY */0]),
+                /* statement : Senate */Block.__(0, [/* DEMOCRAT_VICTORY */0]),
-                outcome: /* Bool */Block.__(0, [true])
+                /* outcome : Bool */Block.__(0, [true])
-              },
+              ],
-              {
+              /* record */[
-                statement: /* House */Block.__(1, [/* DEMOCRAT_VICTORY */0]),
+                /* statement : House */Block.__(1, [/* DEMOCRAT_VICTORY */0]),
-                outcome: /* Bool */Block.__(0, [true])
+                /* outcome : Bool */Block.__(0, [true])
-              }
+              ]
             ],
-            probability: 0.2
+            /* probability */0.2
-          },
+          ],
-          {
+          /* record */[
-            statements: [
+            /* statements : array */[
-              {
+              /* record */[
-                statement: /* Senate */Block.__(0, [/* DEMOCRAT_VICTORY */0]),
+                /* statement : Senate */Block.__(0, [/* DEMOCRAT_VICTORY */0]),
-                outcome: /* Bool */Block.__(0, [true])
+                /* outcome : Bool */Block.__(0, [true])
-              },
+              ],
-              {
+              /* record */[
-                statement: /* House */Block.__(1, [/* DEMOCRAT_VICTORY */0]),
+                /* statement : House */Block.__(1, [/* DEMOCRAT_VICTORY */0]),
-                outcome: /* Bool */Block.__(0, [false])
+                /* outcome : Bool */Block.__(0, [false])
-              }
+              ]
             ],
-            probability: 0.2
+            /* probability */0.2
-          },
+          ],
-          {
+          /* record */[
-            statements: [
+            /* statements : array */[
-              {
+              /* record */[
-                statement: /* Senate */Block.__(0, [/* DEMOCRAT_VICTORY */0]),
+                /* statement : Senate */Block.__(0, [/* DEMOCRAT_VICTORY */0]),
-                outcome: /* Bool */Block.__(0, [false])
+                /* outcome : Bool */Block.__(0, [false])
-              },
+              ],
-              {
+              /* record */[
-                statement: /* House */Block.__(1, [/* DEMOCRAT_VICTORY */0]),
+                /* statement : House */Block.__(1, [/* DEMOCRAT_VICTORY */0]),
-                outcome: /* Bool */Block.__(0, [true])
+                /* outcome : Bool */Block.__(0, [true])
-              }
+              ]
             ],
-            probability: 0.5
+            /* probability */0.5
-          },
+          ],
-          {
+          /* record */[
-            statements: [
+            /* statements : array */[
-              {
+              /* record */[
-                statement: /* Senate */Block.__(0, [/* DEMOCRAT_VICTORY */0]),
+                /* statement : Senate */Block.__(0, [/* DEMOCRAT_VICTORY */0]),
-                outcome: /* Bool */Block.__(0, [false])
+                /* outcome : Bool */Block.__(0, [false])
-              },
+              ],
-              {
+              /* record */[
-                statement: /* House */Block.__(1, [/* DEMOCRAT_VICTORY */0]),
+                /* statement : House */Block.__(1, [/* DEMOCRAT_VICTORY */0]),
-                outcome: /* Bool */Block.__(0, [false])
+                /* outcome : Bool */Block.__(0, [false])
-              }
+              ]
             ],
-            probability: 0.1
+            /* probability */0.1
-          }
+          ]
         ];
 }
 

src/Test2.bs.js

@@ -24,12 +24,12 @@ function sharesOutstanding(price, marketCap) {
 }
 
 function run(company, year, param, otherSettings) {
-  var match = company.currentPrice;
+  var match = company[/* currentPrice */1];
-  var match$1 = company.marketCap;
+  var match$1 = company[/* marketCap */2];
   switch (param) {
     case /* SHARE_PRICE */0 :
         if (match !== undefined && year > 2019 && year < 2030) {
-          var diffYears = year - otherSettings.currentYear | 0;
+          var diffYears = year - otherSettings[/* currentYear */0] | 0;
           return normal(match, diffYears * 0.1);
         } else {
           return ;
@@ -44,7 +44,7 @@ function run(company, year, param, otherSettings) {
         }
     case /* MARKET_CAP */2 :
         if (match$1 !== undefined && year > 2019 && year < 2030) {
-          var diffYears$1 = year - otherSettings.currentYear | 0;
+          var diffYears$1 = year - otherSettings[/* currentYear */0] | 0;
           return normal(match$1, diffYears$1 * 0.1);
         } else {
           return ;