Add reason version of HelloWorld

Author: alex35mil

.atom/ide-reason.json

@@ -0,0 +1,6 @@
+{
+ "path": {
+ "bsb": "./node_modules/.bin/bsb",
+ "bsc": "./node_modules/.bin/bsc"
+ }
+}

.gitignore

@@ -22,3 +22,8 @@
 /node_modules
 yarn-debug.log*
 .yarn-integrity
+
+lib/bs/
+.merlin
+.bsb.lock
+*.bs.js

README.md

@@ -1,24 +1,7 @@
-# README
+# reason-react-on-rails-example
 
-This README would normally document whatever steps are necessary to get the
-application up and running.
-
-Things you may want to cover:
-
-* Ruby version
-
-* System dependencies
-
-* Configuration
-
-* Database creation
-
-* Database initialization
-
-* How to run the test suite
-
-* Services (job queues, cache servers, search engines, etc.)
-
-* Deployment instructions
-
-* ...
+```shell
+docker-compose build
+docker-compose run web yarn run build
+docker-compose up
+```

app/javascript/Utils.re

@@ -0,0 +1,4 @@
+let eventTargetValue = event => {
+ let target = event |> ReactEventRe.Form.target;
+ ReactDOMRe.domElementToObj(target)##value;
+};

app/javascript/bundles/HelloWorld/HelloWorld.re

@@ -0,0 +1,35 @@
+type state = {name: string};
+
+type action =
+ | UpdateName(string);
+
+let component = ReasonReact.reducerComponent(__MODULE__);
+
+let make = (~name: string, _) => {
+ ...component,
+ initialState: () => {name: name},
+ reducer: (action, _state) =>
+ switch (action) {
+ | UpdateName(name) => ReasonReact.Update({name: name})
+ },
+ render: ({state, send}) =>
+ <div>
+ <h3>
+ ("Hello, " ++ state.name ++ "!" |> ReasonReact.stringToElement)
+ </h3>
+ <hr />
+ <form>
+ <label htmlFor="name">
+ ("Say hello to:" |> ReasonReact.stringToElement)
+ </label>
+ <input
+ id="name"
+ _type="text"
+ value=state.name
+ onChange=(
+ event => UpdateName(event |> Utils.eventTargetValue) |> send
+ )
+ />
+ </form>
+ </div>,
+};

app/javascript/bundles/HelloWorld/components/HelloWorld.jsx

@@ -0,0 +1,22 @@
+type props = {. "name": string};
+
+type context = {
+ .
+ "host": string,
+ "href": string,
+ "httpAcceptLanguage": string,
+ "i18nDefaultLocale": string,
+ "i18nLocale": string,
+ "inMailer": Js.boolean,
+ "location": string,
+ "pathname": string,
+ "port": int,
+ "scheme": string,
+ "search": Js.nullable(string),
+ "serverSide": Js.boolean,
+};
+
+let component = (props: props, _context: context) =>
+ <HelloWorld name=props##name />;
+
+ReactOnRails.register("HelloWorld", component);

app/javascript/packs/HelloWorldBundle.re

@@ -1,8 +1 @@
-import ReactOnRails from 'react-on-rails';
-
-import HelloWorld from '../bundles/HelloWorld/components/HelloWorld';
-
-// This is how react_on_rails can see the HelloWorld in the browser.
-ReactOnRails.register({
- HelloWorld,
-});
+import './HelloWorldBundle.bs.js';

app/javascript/packs/hello-world-bundle.js

@@ -0,0 +1,23 @@
+{
+ "name": "app",
+ "sources": [
+ {
+ "dir": "app/javascript",
+ "subdirs": true
+ }
+ ],
+ "bs-dependencies": [
+ "reason-react",
+ "bs-react-on-rails"
+ ],
+ "reason": {
+ "react-jsx": 2
+ },
+ "refmt": 3,
+ "bsc-flags": ["-bs-super-errors"],
+ "suffix": ".bs.js",
+ "package-specs": {
+ "module": "commonjs",
+ "in-source": true
+ }
+}

bsconfig.json

@@ -1,15 +1,21 @@
 {
  "name": "app",
  "private": true,
+ "scripts": {
+ "build": "bsb -clean-world -make-world"
+ },
  "dependencies": {
  "@rails/webpacker": "^3.4.1",
  "babel-preset-react": "^6.24.1",
+ "bs-react-on-rails": "^0.0.1",
  "prop-types": "^15.6.1",
  "react": "^16.2.0",
  "react-dom": "^16.2.0",
- "react-on-rails": "^10.1.3"
+ "react-on-rails": "^10.1.3",
+ "reason-react": "^0.3.4"
  },
  "devDependencies": {
+ "bs-platform": "^2.2.3",
  "webpack-dev-server": "2.11.2"
  }
 }