Add rescript example (#442) (#552)

* Add rescript example (#442)

* Add rescript build configurations

* Create rescript page components

* Add rescript deps

* Solve render comments issue

* Refactor css transaction components

React Hooks shouldn't be used in loops or if statement.

* Ignore the rescript output js files from lint

The rescript output js files from lint because it doesn't follow the lint rules.

* Apply review requested changes

* Remove unused tag

* Add ROR binding

* Apply review requested changes

* remove action js file

* Remove .mjs files

* Compile rescript files before running js tests

* Build recript files before test

* minor change

* remove react-on-rails binding

* migrate to tailwind

* remove bs.mjs files

* remove unused scss files

* fix rescript spec tests

* build rescript before test

* refactor rescript src

* fix add commit fail bug

* refactor the types

* format rescript files

* remove the types files

* update error rescript page state design

* refactor switch statements

* move store comment state to the form component

* format rescript

* rename the saving state

* empty commit

Author: yassa-tamer

.eslintignore

@@ -4,3 +4,4 @@ public/
 client/app/libs/i18n/translations.js
 client/app/libs/i18n/default.js
 postcss.config.js
+client/app/bundles/comments/rescript/

.github/workflows/rspec_test.yml

@@ -73,6 +73,9 @@ jobs:
       - name: Build i18n libraries
         run: bundle exec rake react_on_rails:locale
 
+      - name: Build Rescript components
+        run: yarn res:build
+
       - name: Build shakapacker chunks
         run: NODE_ENV=development bundle exec bin/shakapacker
 

.gitignore

@@ -47,3 +47,8 @@ client/app/libs/i18n/default.js
 /yarn-error.log
 yarn-debug.log*
 .yarn-integrity
+
+lib/bs
+/lib/ocaml
+
+client/app/bundles/comments/rescript/**/*.bs.js

Procfile.dev

@@ -1,5 +1,6 @@
 # Procfile for development using HMR
 # You can run these commands in separate shells
+rescript: yarn res:dev
 redis: redis-server
 rails: bundle exec rails s -p 3000
 wp-client: HMR=true RAILS_ENV=development NODE_ENV=development bin/shakapacker-dev-server

app/controllers/pages_controller.rb

@@ -36,6 +36,8 @@ def no_router
 
   def simple; end
 
+  def rescript; end
+
   private
 
   def set_comments

app/views/pages/rescript.html.erb

@@ -0,0 +1 @@
+<%= react_component "RescriptShow", prerender: true %>

bsconfig.json

@@ -0,0 +1,28 @@
+{
+  "name": "react-webpack-rails-tutorial",
+  "sources": [
+    {
+      "dir": "client/app/bundles/comments/rescript",
+      "subdirs": true
+    }
+  ],
+  "package-specs": [
+    {
+      "module": "es6",
+      "in-source": true
+    }
+  ],
+  "bsc-flags": ["-open JsonCombinators", "-open Belt"],
+  "suffix": ".bs.js",
+  "bs-dependencies": [
+    "@rescript/react",
+    "@rescript/core",
+    "@glennsl/rescript-fetch",
+    "@glennsl/rescript-json-combinators",
+    "rescript-react-on-rails"
+  ],
+  "jsx": {
+    "version": 4,
+    "mode": "automatic"
+  }
+}

client/app/bundles/comments/components/NavigationBar/NavigationBar.jsx

@@ -97,6 +97,14 @@ function NavigationBar(props) {
                 Classic Rails
               </a>
             </li>
+            <li className={classNames({ 'bg-yellow-100': pathname === paths.RESCRIPT_PATH })}>
+              <a
+                className="px-2 py-4 w-full inline-block text-gray-500 hover:text-gray-700"
+                href={paths.RESCRIPT_PATH}
+              >
+                Rescript
+              </a>
+            </li>
             <li>
               <a
                 className="px-2 py-4 w-full inline-block text-gray-500 hover:text-gray-700"

client/app/bundles/comments/constants/paths.js

@@ -1,6 +1,7 @@
 export const ROUTER_PATH = '/';
 export const REACT_ROUTER_PATH = '/react-router';
 export const NO_ROUTER_PATH = '/no-router';
+export const RESCRIPT_PATH = '/rescript';
 export const SIMPLE_REACT_PATH = '/simple';
 export const STIMULUS_PATH = '/stimulus';
 export const RAILS_PATH = '/comments';

client/app/bundles/comments/rescript/Actions/Actions.res

@@ -0,0 +1,59 @@
+// TODO : use only one way to make http requests either Axios or Fetch
+module Create = {
+  type t = {
+    author: string,
+    text: string,
+  }
+
+  let storeComment = async (comment: t) => {
+    let _ = await Axios.post(
+      "comments.json",
+      {
+        "author": comment.author,
+        "text": comment.text,
+      },
+      {
+        "responseType": "json",
+        "headers": {
+          // see https://github.com/shakacode/react_on_rails/blob/249c69812474e0f532df432581bf5e618df0e1ec/node_package/src/Authenticity.ts#L13C1-L18C1
+          "X-CSRF-Token": ReactOnRails.authenticityToken(),
+          "X-Requested-With": "XMLHttpRequest",
+        },
+      },
+    )
+  }
+}
+
+module Fetch = {
+  type t = {
+    author: string,
+    text: string,
+    id: int,
+  }
+
+  type comments = array<t>
+
+  type commentsRes = {comments: comments}
+
+  let fetchComments = async (): result<comments, string> => {
+    open Json.Decode
+
+    let response = await Fetch.get("comments.json")
+    let jsonRes = await response->Fetch.Response.json
+
+    let jsonComment = Json.Decode.object(field => {
+      author: field.required(. "author", string),
+      text: field.required(. "text", string),
+      id: field.required(. "id", int),
+    })
+
+    let jsonComments = Json.Decode.object(field => {
+      comments: field.required(. "comments", array(jsonComment)),
+    })
+
+    switch jsonRes->Json.decode(jsonComments) {
+    | Ok(decodedRes) => Ok(decodedRes.comments)
+    | Error(e) => Error(e)
+    }
+  }
+}