Skip to content

Commit

Permalink
boilerplate for reason hello world component
Browse files Browse the repository at this point in the history
    - bsconfig
    - bsb make and clean commands in build
    - ReasonHelloWorld.re component
    - added component to client registration file
  RAILS
    - add route
    - add hyperlink on main page
    - view file
  • Loading branch information
Leora Juster committed May 9, 2019
1 parent 5a978a8 commit bedc479
Show file tree
Hide file tree
Showing 11 changed files with 177 additions and 8 deletions.
36 changes: 36 additions & 0 deletions spec/dummy/app/views/pages/client_side_reason_hello_world.html.erb
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<%= react_component("HelloWorldReason", props: @app_props_server_render, prerender: false, trace: true, id: "HelloWorld-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-reason-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/HelloWorldReason.bs.js
</li>
<li>
Expose the HelloWorld Component: spec/dummy/client/app/startup/clientRegistration.jsx
<br/>
<pre>
import HelloWorldReason from '../components/HelloWorldReason';
import ReactOnRails from 'react-on-rails';
ReactOnRails.register({ HelloWorldReason });
</pre>
</li>
<li>
Place the component on the view: spec/dummy/app/views/pages/client_side_reason_hello_world.html.erb
<br/>
<pre>
<%%= react_component("HelloWorldReason", props: @app_props_server_render, prerender: false, trace: true, id: "HelloWorld-reason-react-component-0") %>
</pre>
</li>
</ol>
3 changes: 3 additions & 0 deletions spec/dummy/app/views/shared/_header.erb
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@
<li>
<%= link_to "Hello World Component Client Rendered", client_side_hello_world_path %>
</li>
<li>
<%= link_to "Hello World Reason Component Client Rendered", client_side_reason_hello_world_path %>
</li>
<li>
<%= link_to "Hello World Shared Redux Components Client Rendered",
client_side_hello_world_shared_store_path %>
Expand Down
24 changes: 24 additions & 0 deletions spec/dummy/client/.merlin
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
####{BSB GENERATED: NO EDIT
FLG -ppx '/Users/leorajuster/Desktop/repos/react_on_rails/spec/dummy/client/node_modules/bs-platform/lib/reactjs_jsx_ppx_2.exe'
FLG -ppx /Users/leorajuster/Desktop/repos/react_on_rails/spec/dummy/client/node_modules/bs-platform/lib/bsppx.exe
S /Users/leorajuster/Desktop/repos/react_on_rails/spec/dummy/client/node_modules/bs-platform/lib/ocaml
B /Users/leorajuster/Desktop/repos/react_on_rails/spec/dummy/client/node_modules/bs-platform/lib/ocaml
FLG -nostdlib -color always
FLG -w -30-40+6+7+27+32..39+44+45+101-45
S /Users/leorajuster/Desktop/repos/react_on_rails/spec/dummy/client/node_modules/reason-react/lib/ocaml
B /Users/leorajuster/Desktop/repos/react_on_rails/spec/dummy/client/node_modules/reason-react/lib/ocaml
S /Users/leorajuster/Desktop/repos/react_on_rails/spec/dummy/client/node_modules/re-classnames/lib/ocaml
B /Users/leorajuster/Desktop/repos/react_on_rails/spec/dummy/client/node_modules/re-classnames/lib/ocaml
S /Users/leorajuster/Desktop/repos/react_on_rails/spec/dummy/client/node_modules/re-debouncer/lib/ocaml
B /Users/leorajuster/Desktop/repos/react_on_rails/spec/dummy/client/node_modules/re-debouncer/lib/ocaml
S /Users/leorajuster/Desktop/repos/react_on_rails/spec/dummy/client/node_modules/@glennsl/bs-json/lib/ocaml
B /Users/leorajuster/Desktop/repos/react_on_rails/spec/dummy/client/node_modules/@glennsl/bs-json/lib/ocaml
S /Users/leorajuster/Desktop/repos/react_on_rails/spec/dummy/client/node_modules/bs-log/lib/ocaml
B /Users/leorajuster/Desktop/repos/react_on_rails/spec/dummy/client/node_modules/bs-log/lib/ocaml
S /Users/leorajuster/Desktop/repos/react_on_rails/spec/dummy/client/node_modules/bs-fetch/lib/ocaml
B /Users/leorajuster/Desktop/repos/react_on_rails/spec/dummy/client/node_modules/bs-fetch/lib/ocaml
S /Users/leorajuster/Desktop/repos/react_on_rails/spec/dummy/client/node_modules/bs-date-fns/lib/ocaml
B /Users/leorajuster/Desktop/repos/react_on_rails/spec/dummy/client/node_modules/bs-date-fns/lib/ocaml
S app/components
B lib/bs/app/components
####BSB GENERATED: NO EDIT}
17 changes: 17 additions & 0 deletions spec/dummy/client/app/components/HelloWorldReason.bs.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

29 changes: 29 additions & 0 deletions spec/dummy/client/app/components/HelloWorldReason.re
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
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>,
};
2 changes: 2 additions & 0 deletions spec/dummy/client/app/startup/clientRegistration.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import 'es5-shim';
import ReactOnRails from 'react-on-rails';

import HelloWorld from '../components/HelloWorld';
import HelloWorldReason from '../components/HelloWorldReason.re';
import HelloWorldWithLogAndThrow from '../components/HelloWorldWithLogAndThrow';
import HelloWorldES5 from '../components/HelloWorldES5';
import HelloWorldRehydratable from '../components/HelloWorldRehydratable';
Expand Down Expand Up @@ -39,6 +40,7 @@ ReactOnRails.setOptions({
ReactOnRails.register({
BrokenApp,
HelloWorld,
HelloWorldReason,
HelloWorldWithLogAndThrow,
HelloWorldES5,
HelloWorldRehydratable,
Expand Down
23 changes: 23 additions & 0 deletions spec/dummy/client/bsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
{
"name": "app",
"sources": [
{
"dir": "app/components",
"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
}
}
8 changes: 8 additions & 0 deletions spec/dummy/client/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,13 @@
"@babel/preset-env": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@babel/runtime": "^7.0.0",
"@glennsl/bs-json": "^3.0.0",
"autoprefixer": "^7.1.2",
"babel-loader": "^8.0.2",
"bs-date-fns": "0.1.6",
"bs-fetch": "0.3.1",
"bs-log": "0.1.1",
"bs-platform": "4.0.5",
"create-react-class": "^15.6.3",
"css-loader": "^0.28.4",
"es5-shim": "^4.5.9",
Expand All @@ -35,6 +40,8 @@
"nps": "^5.9.3",
"postcss-loader": "^1.3.3",
"prop-types": "^15.6.2",
"re-classnames": "^4.0.0",
"re-debouncer": "^2.0.0",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-helmet": "^5.1.3",
Expand All @@ -43,6 +50,7 @@
"react-proptypes": "^1.0.0",
"react-redux": "^5.0.5",
"react-router": "^3.2.1",
"reason-react": "^0.7.0",
"redux": "^4.0.1",
"redux-thunk": "^2.2.0",
"resolve-url-loader": "^2.1.0",
Expand Down
28 changes: 25 additions & 3 deletions spec/dummy/client/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -623,6 +623,10 @@
lodash "^4.17.10"
to-fast-properties "^2.0.0"

"@glennsl/bs-json@^3.0.0":
version "3.0.0"
resolved "https://registry.yarnpkg.com/@glennsl/bs-json/-/bs-json-3.0.0.tgz#b4e1cf6612270a8dd7287a8a71ebe17e8f0fb683"

abab@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.0.tgz#aba0ab4c5eee2d4c79d3487d85450fb2376ebb0f"
Expand Down Expand Up @@ -1193,9 +1197,27 @@ browserslist@^4.1.0:
version "4.3.0"
resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.3.0.tgz#779a235bd1ace0f3841a9b294df4cd47ac046c9d"
dependencies:
caniuse-lite "^1.0.30000893"
electron-to-chromium "^1.3.80"
node-releases "^1.0.0-alpha.14"
caniuse-lite "^1.0.30000963"
electron-to-chromium "^1.3.127"
node-releases "^1.1.17"

bs-date-fns@0.1.6:
version "0.1.6"
resolved "https://registry.yarnpkg.com/bs-date-fns/-/bs-date-fns-0.1.6.tgz#29983fb072611539e7585d85450759ad366d61f8"
dependencies:
date-fns "^1.29.0"

bs-fetch@0.3.1:
version "0.3.1"
resolved "https://registry.yarnpkg.com/bs-fetch/-/bs-fetch-0.3.1.tgz#9c7d074b27e6bb2b9f2ec985964f32bcac49f79e"

bs-log@0.1.1:
version "0.1.1"
resolved "https://registry.yarnpkg.com/bs-log/-/bs-log-0.1.1.tgz#03181ea3589c130b24ab4fc294b6948f823ff6a4"

bs-platform@4.0.5:
version "4.0.5"
resolved "https://registry.yarnpkg.com/bs-platform/-/bs-platform-4.0.5.tgz#d4fd9bbdd11765af5b75110a5655065ece05eed6"

buffer-from@^1.0.0:
version "1.1.1"
Expand Down
1 change: 1 addition & 0 deletions spec/dummy/config/routes.rb
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
root "pages#index"

get "client_side_hello_world" => "pages#client_side_hello_world"
get "client_side_reason_hello_world" => "pages#client_side_reason_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"
Expand Down
14 changes: 9 additions & 5 deletions spec/dummy/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@
"postinstall": "cd ./client && yarn install",
"test": "yarn run build:test && yarn run lint && rspec",
"lint": "cd client && yarn run lint",
"build:clean": "rm -rf public/webpack || true",
"build:clean": "rm -rf public/webpack || true && bsb -clean-world",
"build:test": "(cd client && yarn run build:test)",
"build:production:client": "(cd client && yarn run build:production:client)",
"build:production:server": "(cd client && yarn run build:production:server)",
"build:client": "(cd client && yarn run build:client)",
"build:client": "(cd client && yarn run build:client && bsb -make-world)",
"build:server": "(cd client && yarn run build:server)",
"build:dev:client": "(cd client && yarn run build:dev:client)",
"build:dev:client": "(cd client && yarn run build:dev:client && bsb -make-world -w)",
"build:dev:server": "(cd client && yarn run build:dev:server)",
"hot-assets": "(cd client && yarn run hot-assets)"
},
Expand All @@ -31,6 +31,10 @@
"bugs": {
"url": "https://github.com/shakacode/react_on_rails/issues"
},
"devDependencies": {},
"dependencies": {}
"devDependencies": {
"bs-platform": "^5.0.4"
},
"dependencies": {
"reason-react": "0.7.0"
}
}

0 comments on commit bedc479

Please sign in to comment.