Add ReScript Example

.prettierignore

@@ -8,3 +8,5 @@ gen-examples/examples/*
 node_package/lib/*
 spec/react_on_rails/dummy-for-generators/app/javascript/bundles/HelloWorld/*
 bundle/
+spec/dummy/lib/bs/**
+*.bs.js

spec/dummy/.gitignore

@@ -21,3 +21,9 @@
 /public/webpack/*
 
 /spec/examples.txt
+
+#Ignore ReScript build files
+/.merlin
+/lib/bs/
+/.bsb.lock
+*.bs.js

spec/dummy/.prettierignore

@@ -1,2 +1,4 @@
 node_modules
 public/webpack/
+*.bs.js
+lib/bs/**

spec/dummy/Procfile.dev

@@ -2,6 +2,9 @@
 
 rails: rails s -p 3000
 
+# Bundle ReScript .res files
+rescript: yarn build:rescript:dev
+
 # Run the hot reload server for client development
 webpack-dev-server: bin/webpack-dev-server
 

spec/dummy/app/views/pages/client_side_rescript_hello_world.html.erb

@@ -0,0 +1,36 @@
+<%= react_component("HelloWorldReScript", props: @app_props_server_render, prerender: false, trace: true, id: "HelloWorld-rescript-react-component-0") %>
+<hr/>
+
+<h1>React Rails Client Side Only Rendering</h1>
+<p>
+  This example demonstrates client side only rendering.<br/><br/>
+  The source HTML of this page will only show a DIV with an ID matching HelloWorld.<br/>
+  <pre>
+    <%= "<div id=\"HelloWorld-rescript-react-component-0\"></div>" %>
+  </pre><br/><br/>
+  Compare this to the HTML created for server rendering.<br/>
+</p>
+
+<hr/>
+<h2>Setup</h2>
+<ol>
+  <li>
+    Create component source: spec/dummy/client/app/components/HelloWorldReScript.bs.js
+  </li>
+  <li>
+    Expose the HelloWorld Component: spec/dummy/client/app/startup/clientRegistration.jsx
+    <br/>
+    <pre>
+      import HelloWorldReScript from '../components/HelloWorldReScript.bs';
+      import ReactOnRails from 'react-on-rails';
+      ReactOnRails.register({ HelloWorldReScript });
+    </pre>
+  </li>
+  <li>
+    Place the component on the view: spec/dummy/app/views/pages/client_side_rescript_hello_world.html.erb
+    <br/>
+    <pre>
+      <%%= react_component("HelloWorldReScript", props: @app_props_server_render, prerender: false, trace: true, id: "HelloWorld-rescript-react-component-0") %>
+    </pre>
+  </li>
+</ol>

spec/dummy/app/views/shared/_header.erb

@@ -8,6 +8,9 @@
   <li>
     <%= link_to "Hello World Component Client Rendered", client_side_hello_world_path %>
   </li>
+  <li>
+    <%= link_to "Hello World ReScript Component Client Rendered", client_side_rescript_hello_world_path %>
+  </li>
   <li>
     <%= link_to "Hello World Shared Redux Components Client Rendered",
                 client_side_hello_world_shared_store_path %>

spec/dummy/bsconfig.json

@@ -0,0 +1,20 @@
+{
+  "name": "react_on_rails",
+  "sources": [
+    {
+      "dir": "client/app/components",
+      "subdirs": true
+    }
+  ],
+  "reason": {
+    "react-jsx": 3
+  },
+  "suffix": ".bs.js",
+  "package-specs": [
+    {
+      "module": "es6",
+      "in-source": true
+    }
+  ],
+  "bs-dependencies": ["@rescript/react"]
+}

spec/dummy/client/app/components/HelloWorldReScript.res

@@ -0,0 +1,23 @@
+// The compiled JavaScript will always extract your props passed to the compiled file from Props, where Props
+// is the same hash passed to react_component method on the view. Log the Props in the compiled JS
+// and make sure the props passed to the component below match the shape of the prop passed on the view.
+
+@react.component
+let default = (~helloWorldData: {..}) => {
+  let (nameState, setNameState) = React.useState(_ => helloWorldData["name"])
+  <div>
+    <h3> {("Hello from ReScript, " ++ nameState ++ ` 🤙`)->React.string} </h3>
+    <hr />
+    <form>
+      <label htmlFor="name">
+        {"Say hello to: "->React.string}
+        <input
+          id="name"
+          type_="text"
+          value={nameState}
+          onChange={e => setNameState(ReactEvent.Form.currentTarget(e)["value"])}
+        />
+      </label>
+    </form>
+  </div>
+}

spec/dummy/client/app/packs/client-bundle.js

@@ -11,6 +11,7 @@ import HelloWorldHooksContext from '../components/HelloWorldHooksContext';
 import ContextFunctionReturnInvalidJSX from '../components/ContextFunctionReturnInvalidJSX';
 import PureComponentWrappedInFunction from '../components/PureComponentWrappedInFunction';
 
+import { HelloWorldReScript } from './rescript-components';
 import HelloWorldWithLogAndThrow from '../components/HelloWorldWithLogAndThrow';
 import HelloWorldES5 from '../components/HelloWorldES5';
 import HelloWorldRehydratable from '../components/HelloWorldRehydratable';
@@ -43,6 +44,7 @@ ReactOnRails.setOptions({
 ReactOnRails.register({
   BrokenApp,
   HelloWorld,
+  HelloWorldReScript,
   HelloWorldWithLogAndThrow,
   HelloWorldES5,
   HelloWorldRehydratable,

spec/dummy/client/app/packs/rescript-components.js

@@ -0,0 +1,7 @@
+// This file is used to import your compiled rescript files
+// As per the current configuration, all files are compiled to .bs.js
+// and they are generated on the same directory as the .res file
+
+import HelloWorldReScript from '../components/HelloWorldReScript.bs';
+
+export { HelloWorldReScript };

spec/dummy/config/initializers/react_on_rails.rb

@@ -16,6 +16,8 @@ def self.custom_context(view_context)
 end
 
 ReactOnRails.configure do |config|
+  config.build_production_command = "yarn build:rescript"
+
   config.server_bundle_js_file = "server-bundle.js"
   config.random_dom_id = false # default is true
 

spec/dummy/config/routes.rb

@@ -8,6 +8,7 @@
   root "pages#index"
 
   get "client_side_hello_world" => "pages#client_side_hello_world"
+  get "client_side_rescript_hello_world" => "pages#client_side_rescript_hello_world"
   get "client_side_hello_world_shared_store" => "pages#client_side_hello_world_shared_store"
   get "client_side_hello_world_shared_store_controller" => "pages#client_side_hello_world_shared_store_controller"
   get "client_side_hello_world_shared_store_defer" => "pages#client_side_hello_world_shared_store_defer"

spec/dummy/package.json

@@ -9,6 +9,7 @@
   "dependencies": {
     "@babel/preset-react": "^7.10.4",
     "@rails/webpacker": "^5.2.1",
+    "@rescript/react": "^0.10.3",
     "babel-plugin-module-resolver": "^4.0.0",
     "core-js": "3",
     "create-react-class": "^15.6.3",
@@ -33,6 +34,7 @@
     "react-router-dom": "^5.2.0",
     "redux": "^4.0.1",
     "redux-thunk": "^2.2.0",
+    "rescript": "^9.1.4",
     "resolve-url-loader": "^3.1.1",
     "sass-resources-loader": "^2.1.0",
     "url-loader": "^4.0.0",
@@ -51,11 +53,13 @@
     "lint": "cd ../.. && yarn run lint",
     "format": "cd ../.. && yarn start format",
     "test": "yarn run build:test && yarn run lint && rspec",
-    "build:test": "rm -rf public/webpack/test && RAILS_ENV=test NODE_ENV=test bin/webpack",
-    "build:dev": "rm -rf public/webpack/develoment && RAILS_ENV=development NODE_ENV=development bin/webpack --watch",
-    "build:dev:server": "rm -rf public/webpack/develoment && RAILS_ENV=development NODE_ENV=development bin/webpack --watch",
-    "build:dev:watch": "RAILS_ENV=development NODE_ENV=development bin/webpack --watch",
-    "build:clean": "rm -rf public/webpack || true"
+    "build:test": "rm -rf public/webpack/test && yarn build:rescript && RAILS_ENV=test NODE_ENV=test bin/webpack",
+    "build:dev": "rm -rf public/webpack/development && yarn build:rescript && RAILS_ENV=development NODE_ENV=development bin/webpack --watch",
+    "build:dev:server": "rm -rf public/webpack/development && yarn build:rescript && RAILS_ENV=development NODE_ENV=development bin/webpack --watch",
+    "build:dev:watch": "rescript build -w && RAILS_ENV=development NODE_ENV=development bin/webpack --watch",
+    "build:clean": "yarn build:rescript && rm -rf public/webpack || true",
+    "build:rescript": "rescript clean && rescript build -with-deps",
+    "build:rescript:dev": "rescript build -w"
   },
   "version": "0.0.0"
 }

spec/dummy/spec/system/integration_spec.rb

@@ -115,6 +115,14 @@ def finished_all_ajax_requests?
   it { is_expected.to have_text "This is a Pure Component!" }
 end
 
+describe "Pages/Hello World ReScript Component", :js do
+  subject { page }
+
+  before { visit "/client_side_rescript_hello_world" }
+
+  it { change_text_expect_dom_selector("#HelloWorld-rescript-react-component-0") }
+end
+
 describe "Pages/server_side_log_throw", :js, :ignore_js_errors do
   subject { page }
 

spec/dummy/yarn.lock

@@ -1035,12 +1035,12 @@
     "@babel/plugin-transform-react-jsx-source" "^7.10.4"
     "@babel/plugin-transform-react-pure-annotations" "^7.10.4"
 
-"@babel/runtime-corejs3@^7.9.6":
-  version "7.10.2"
-  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.10.2.tgz#3511797ddf9a3d6f3ce46b99cc835184817eaa4e"
-  integrity sha512-+a2M/u7r15o3dV1NEizr9bRi+KUVnrs/qYxF0Z06DAPx/4VCWaz1WA7EcbE+uqGgt39lp5akWGmHsTseIkHkHg==
+"@babel/runtime-corejs3@^7.12.5":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.15.4.tgz#403139af262b9a6e8f9ba04a6fdcebf8de692bf1"
+  integrity sha512-lWcAqKeB624/twtTc3w6w/2o9RqJPaNBhPGK6DKLSiwuVWC7WFkypWyNg+CpZoyJH0jVzv1uMtXZ/5/lQOLtCg==
   dependencies:
-    core-js-pure "^3.0.0"
+    core-js-pure "^3.16.0"
     regenerator-runtime "^0.13.4"
 
 "@babel/runtime@^7.1.2":
@@ -1205,6 +1205,11 @@
     webpack-cli "^3.3.12"
     webpack-sources "^1.4.3"
 
+"@rescript/react@^0.10.3":
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/@rescript/react/-/react-0.10.3.tgz#a2a8bed6b017940ec26c2154764b350f50348889"
+  integrity sha512-Lf9rzrR3bQPKJjOK3PBRa/B3xrJ7CqQ1HYr9VHPVxJidarIJJFZBhj0Dg1uZURX+Wg/xiP0PHFxXmdj2bK8Vxw==
+
 "@types/color-name@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
@@ -2541,10 +2546,10 @@ core-js-compat@^3.6.2:
     browserslist "^4.8.5"
     semver "7.0.0"
 
-core-js-pure@^3.0.0:
-  version "3.6.5"
-  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.6.5.tgz#c79e75f5e38dbc85a662d91eea52b8256d53b813"
-  integrity sha512-lacdXOimsiD0QyNf9BC/mxivNJ/ybBGJXQFKzRekp1WTHoVUWsUHEn+2T8GJAzzIhyOuXA+gOxCVN3l+5PLPUA==
+core-js-pure@^3.16.0:
+  version "3.18.3"
+  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.18.3.tgz#7eed77dcce1445ab68fd68715856633e2fb3b90c"
+  integrity sha512-qfskyO/KjtbYn09bn1IPkuhHl5PlJ6IzJ9s9sraJ1EqcuGyLGKzhSM1cY0zgyL9hx42eulQLZ6WaeK5ycJCkqw==
 
 core-js@3, core-js@^3.6.5:
   version "3.6.5"
@@ -6915,9 +6920,9 @@ react-is@^16.7.0:
   integrity sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==
 
 "react-on-rails@file:.yalc/react-on-rails":
-  version "12.0.5-beta.0-ea6ccda1"
+  version "12.4.0"
   dependencies:
-    "@babel/runtime-corejs3" "^7.9.6"
+    "@babel/runtime-corejs3" "^7.12.5"
     concurrently "^5.1.0"
 
 react-proptypes@^1.0.0:
@@ -7221,6 +7226,11 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
+rescript@^9.1.4:
+  version "9.1.4"
+  resolved "https://registry.yarnpkg.com/rescript/-/rescript-9.1.4.tgz#1eb126f98d6c16942c0bf0df67c050198e580515"
+  integrity sha512-aXANK4IqecJzdnDpJUsU6pxMViCR5ogAxzuqS0mOr8TloMnzAjJFu63fjD6LCkWrKAhlMkFFzQvVQYaAaVkFXw==
+
 reselect@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.0.0.tgz#f2529830e5d3d0e021408b246a206ef4ea4437f7"