isomorfeus-react 16.6.8 → 16.8.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +39 -413
- data/lib/isomorfeus-react-base.rb +55 -0
- data/lib/isomorfeus-react-component.rb +20 -0
- data/lib/isomorfeus-react-lucid.rb +39 -0
- data/lib/isomorfeus-react-material-ui.rb +41 -0
- data/lib/isomorfeus-react-redux-component.rb +25 -0
- data/lib/isomorfeus-react.rb +4 -101
- data/lib/isomorfeus/config.rb +3 -8
- data/lib/isomorfeus/top_level_browser.rb +1 -1
- data/lib/lucid_app/api.rb +1 -12
- data/lib/lucid_app/mixin.rb +1 -0
- data/lib/lucid_app/native_component_constructor.rb +10 -0
- data/lib/lucid_component/api.rb +1 -1
- data/lib/lucid_component/initializer.rb +5 -5
- data/lib/lucid_component/mixin.rb +1 -0
- data/lib/lucid_component/native_component_constructor.rb +13 -3
- data/lib/lucid_material/app/base.rb +9 -0
- data/lib/lucid_material/app/mixin.rb +20 -0
- data/lib/lucid_material/app/native_component_constructor.rb +116 -0
- data/lib/lucid_material/component/api.rb +19 -0
- data/lib/lucid_material/component/base.rb +9 -0
- data/lib/lucid_material/component/mixin.rb +21 -0
- data/lib/lucid_material/component/native_component_constructor.rb +158 -0
- data/lib/react.rb +13 -5
- data/lib/react/children.rb +35 -0
- data/lib/react/component/api.rb +5 -91
- data/lib/react/component/callbacks.rb +103 -0
- data/lib/react/component/elements.rb +3 -23
- data/lib/react/component/features.rb +12 -29
- data/lib/react/component/initializer.rb +2 -2
- data/lib/react/component/mixin.rb +1 -0
- data/lib/react/component/native_component_constructor.rb +7 -0
- data/lib/react/component/props.rb +13 -1
- data/lib/react/component/resolution.rb +14 -15
- data/lib/react/component/styles.rb +23 -0
- data/lib/react/context_wrapper.rb +4 -0
- data/lib/react/function_component/api.rb +83 -0
- data/lib/react/function_component/base.rb +9 -0
- data/lib/react/function_component/creator.rb +19 -65
- data/lib/react/function_component/event_handler.rb +13 -0
- data/lib/react/function_component/mixin.rb +14 -0
- data/lib/react/function_component/resolution.rb +17 -15
- data/lib/react/memo_component/base.rb +9 -0
- data/lib/react/memo_component/creator.rb +32 -0
- data/lib/react/memo_component/mixin.rb +14 -0
- data/lib/react/native_constant_wrapper.rb +1 -11
- data/lib/react/pure_component/mixin.rb +2 -0
- data/lib/react/redux_component/api.rb +1 -93
- data/lib/react/redux_component/initializer.rb +5 -5
- data/lib/react/redux_component/mixin.rb +1 -0
- data/lib/react/redux_component/native_component_constructor.rb +13 -3
- data/lib/react/redux_component/reducers.rb +29 -35
- data/lib/react/ref.rb +4 -0
- data/lib/react/version.rb +1 -1
- data/lib/react_dom.rb +9 -3
- metadata +70 -8
- data/lib/lucid_router.rb +0 -18
- data/lib/react/function_component/runner.rb +0 -19
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 572d49e689c48227eff72f1c354d6d09e342d110cfcb1e95f7a9a1a523fe345f
|
4
|
+
data.tar.gz: 4ffc0e63dde3adafc83f72a239e041186e4af492d60b02724c783b823ade4846
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 133cc190d7a975b12b1c70462aef1fe473cb819b172be6dfcfdebf7b331aba73fd9fa4c6264fe4aca942c18d2b5944c6dd321451e51f38a387fd098a4f1f7ba5
|
7
|
+
data.tar.gz: 9bc4d86826962e1b9c2bf5c9bb94c03166950a619a41312b0f74e2d59fb5bccc22c41af7f430e7246745d88584836755480cc71a3d26abf9f2f4518d75e1510c
|
data/README.md
CHANGED
@@ -2,438 +2,64 @@
|
|
2
2
|
|
3
3
|
Develop React components for Opal Ruby along with very easy to use and advanced React-Redux Components.
|
4
4
|
|
5
|
-
|
5
|
+
## Community and Support
|
6
6
|
At the [Isomorfeus Framework Project](http://isomorfeus.com)
|
7
7
|
|
8
8
|
## Versioning
|
9
9
|
isomorfeus-react version follows the React version which features and API it implements.
|
10
|
-
Isomorfeus-react 16.
|
10
|
+
Isomorfeus-react 16.8.x implements features and the API of React 16.8 and should be used with React 16.8
|
11
11
|
|
12
|
-
##
|
13
|
-
To install React with the matching version:
|
14
|
-
```
|
15
|
-
yarn add react@16.6
|
16
|
-
```
|
17
|
-
then add to the Gemfile:
|
18
|
-
```ruby
|
19
|
-
gem 'isomorfeus-react' # this will also include isomorfeus-redux
|
20
|
-
```
|
21
|
-
then `bundle install`
|
22
|
-
and to your client code add:
|
23
|
-
```ruby
|
24
|
-
require 'isomorfeus-react' # this will also require isomorfeus-redux
|
25
|
-
```
|
12
|
+
## Documentation
|
26
13
|
|
27
|
-
|
14
|
+
- [Installation](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/installation.md)
|
28
15
|
|
29
|
-
For full functionality the following are required:
|
30
|
-
Ruby Gems:
|
31
|
-
- [Opal with ES6 modules](https://github.com/opal/opal/pull/1976)
|
32
|
-
- [Opal Webpack Loader](https://github.com/isomorfeus/opal-webpack-loader)
|
33
|
-
- [Opal Autoloader](https://github.com/janbiedermann/opal-autoloader)
|
34
|
-
- [Isomorfeus-Speednode](https://github.com/isomorfeus/isomorfeus-speednode)
|
35
|
-
- [Isomorfeus-Redux](https://github.com/isomorfeus/isomorfeus-redux)
|
36
|
-
|
37
|
-
For the Gemfile:
|
38
|
-
```ruby
|
39
|
-
gem 'opal', github: 'janbiedermann/opal', branch: 'es6_modules_1_1'
|
40
|
-
gem 'opal-webpack-loader', '~> 0.8.4'
|
41
|
-
gem 'opal-autoloader', '~> 0.0.3'
|
42
|
-
gem 'isomorfeus-redux', '~> 4.0.4'
|
43
|
-
gem 'isomorfeus-speednode', '~> 0.2.3'
|
44
|
-
```
|
45
|
-
Javascript Npms:
|
46
|
-
- opal-webpack-laoder
|
47
|
-
- react
|
48
|
-
- react-router
|
49
|
-
- redux
|
50
|
-
|
51
|
-
for package.json:
|
52
|
-
```json
|
53
|
-
"opal-webpack-loader": "^0.8.4",
|
54
|
-
"react": "16.8",
|
55
|
-
"react-dom": "16.8",
|
56
|
-
"react-router": "5.0.0",
|
57
|
-
"react-router-dom": "5.0.0",
|
58
|
-
"redux": "^4.0.1"
|
59
|
-
```
|
60
|
-
## Usage
|
61
16
|
Because isomorfeus-react follows closely the React principles/implementation/API and Documentation, most things of the official React documentation
|
62
17
|
apply, but in the Ruby way, see:
|
63
18
|
- https://reactjs.org/docs/getting-started.html
|
64
19
|
|
65
|
-
|
66
|
-
with webpack this can be ensured by assigning them to the global namespace:
|
67
|
-
```javascript
|
68
|
-
import * as Redux from 'redux';
|
69
|
-
import React from 'react';
|
70
|
-
import ReactDOM from 'react-dom';
|
71
|
-
global.Redux = Redux;
|
72
|
-
global.React = React;
|
73
|
-
global.ReactDOM = ReactDOM;
|
74
|
-
|
75
|
-
// for routing support
|
76
|
-
import { BrowserRouter, Link, NavLink, Route, Switch } from 'react-router-dom';
|
77
|
-
global.BrowserRouter = BrowserRouter;
|
78
|
-
global.Link = Link;
|
79
|
-
global.NavLink = NavLink;
|
80
|
-
global.Route = Route;
|
81
|
-
global.Switch = Switch;
|
82
|
-
```
|
83
|
-
|
84
|
-
Following features are presented with its differences to the Javascript React implementation, along with enhancements and the advanced components.
|
85
|
-
|
86
|
-
### Component Types
|
20
|
+
Component Types:
|
87
21
|
- [Class Component](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/class_component.md)
|
88
22
|
- [Pure Component](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/pure_component.md)
|
89
|
-
- [Function Component](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/function_component.md)
|
23
|
+
- [Function and Memo Component](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/function_component.md)
|
90
24
|
- [Redux Component](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/redux_component.md)
|
91
|
-
- [Lucid App, Lucid
|
25
|
+
- [Lucid App, Lucid Component](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/lucid_component.md)
|
26
|
+
- [LucidMaterial App, LucidMaterial Component](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/lucid_material_component.md) - support for [MaterialUI](https://material-ui.com)
|
92
27
|
- [React Javascript Component](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/javascript_component.md)
|
93
28
|
|
94
29
|
Which component to use?
|
95
|
-
- Usually LucidApp
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
[
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
Event handlers must be declared using the `event_handler` DSL. This is to make sure, that they are not recreated during render and can be properly
|
124
|
-
compared by reference by shouldComponentUpdate(). Use the DSL like so:
|
125
|
-
```ruby
|
126
|
-
class MyComponent < React::Component::Base
|
127
|
-
event_handler :handle_click do |event|
|
128
|
-
state.toggler = !state.toggler
|
129
|
-
end
|
130
|
-
|
131
|
-
render do
|
132
|
-
SPAN(on_click: :handle_click) { 'some more text' }
|
133
|
-
SPAN(on_click: :handle_click) { 'a lot more text' } # event handlers can be reused
|
134
|
-
end
|
135
|
-
end
|
136
|
-
```
|
137
|
-
|
138
|
-
To the event handler the event is passed as argument. The event is a ruby object `React::SyntheticEvent` and supports all the methods, properties
|
139
|
-
and events as the React.Synthetic event. Methods are underscored. Example:
|
140
|
-
```ruby
|
141
|
-
class MyComponent < React::Component::Base
|
142
|
-
event_handler :handle_click do |event|
|
143
|
-
event.prevent_default
|
144
|
-
event.current_target
|
145
|
-
end
|
146
|
-
|
147
|
-
render do
|
148
|
-
SPAN(on_click: :handle_click) { 'some more text' }
|
149
|
-
end
|
150
|
-
end
|
151
|
-
```
|
152
|
-
Targets of the event, like current_target, are wrapped Elements as supplied by opal-browser.
|
153
|
-
|
154
|
-
#### Events and Function Components
|
155
|
-
The event_handler DSL can be used within the React::FunctionComponent::Creator. However, function component dont react by themselves to events,
|
156
|
-
the event handler must be applied to a element.
|
157
|
-
```ruby
|
158
|
-
class React::FunctionComponent::Creator
|
159
|
-
event_handler :show_red_alert do |event|
|
160
|
-
`alert("RED ALERT!")`
|
161
|
-
end
|
162
|
-
|
163
|
-
event_handler :show_orange_alert do |event|
|
164
|
-
`alert("ORANGE ALERT!")`
|
165
|
-
end
|
166
|
-
|
167
|
-
function_component 'AFunComponent' do
|
168
|
-
SPAN(on_click: props.on_click) { 'Click for orange alert! ' } # event handler passed in props, applied to a element
|
169
|
-
SPAN(on_click: :show_red_alert) { 'Click for red alert! ' } # event handler directly applied to a element
|
170
|
-
end
|
171
|
-
|
172
|
-
function_component 'AnotherFunComponent' do
|
173
|
-
AFunComponent(on_click: :show_orange_alert, text: 'Fun') # event handler passed as prop, but must be applied to element, see above
|
174
|
-
end
|
175
|
-
end
|
176
|
-
```
|
177
|
-
### Render blocks
|
178
|
-
render or element or component blocks work like ruby blocks, the result of the last expression in a block is returned and then rendered,
|
179
|
-
but only if it is a string or a React Element.
|
180
|
-
HTML Elements and Components at any place in the blocks are rendered too.
|
181
|
-
Examples:
|
182
|
-
```ruby
|
183
|
-
class MyComponent < React::Component::Base
|
184
|
-
render do
|
185
|
-
SPAN { "string" } # this string is rendered in a SPAN HTML Element
|
186
|
-
SPAN { "another string" } # this string is rendered in a SPAN too
|
187
|
-
end
|
188
|
-
end
|
189
|
-
```
|
190
|
-
```ruby
|
191
|
-
class MyComponent < React::Component::Base
|
192
|
-
render do
|
193
|
-
"string" # this string is NOT rendered, its not returned from the block and its not wrapped in a Element,
|
194
|
-
# to render it, wrap it in a element or fragment
|
195
|
-
"another string" # this string is returned from the block, so its rendered
|
196
|
-
end
|
197
|
-
end
|
198
|
-
```
|
199
|
-
```ruby
|
200
|
-
class MyComponent < React::Component::Base
|
201
|
-
render do
|
202
|
-
Fragment { "string" } # this string is rendered without surrounding element
|
203
|
-
100 # this is not a string, so its NOT rendered, to render it, simply convert it to a string: "#{100}" or 100.to_s
|
204
|
-
end
|
205
|
-
end
|
206
|
-
```
|
207
|
-
There is a shorthand "string param syntax". Its advantages are:
|
208
|
-
- reduced asset size, because it reduces the amount of compiled blocks, strings are passed as param instead
|
209
|
-
- improved performance, because it reduces the amount of executed blocks, strings are passed as param instead
|
210
|
-
|
211
|
-
Its disadvantages are:
|
212
|
-
- it looks a bit odd when other params are passed
|
213
|
-
|
214
|
-
The first render block example in "string param syntax":
|
215
|
-
```ruby
|
216
|
-
class MyComponent < React::Component::Base
|
217
|
-
render do
|
218
|
-
SPAN "string" # this string is rendered in a SPAN HTML Element, short and handy
|
219
|
-
SPAN "another string" # this string is rendered in a SPAN too, short and handy
|
220
|
-
|
221
|
-
# "string param syntax" with additional params:
|
222
|
-
SPAN({class: 'design'}, "yet another string") # <- not recommended
|
223
|
-
# for comparison the "string block syntax" with additonal params
|
224
|
-
SPAN(class: 'design') { 'even a string' } # <- recommended, looks better
|
225
|
-
end
|
226
|
-
end
|
227
|
-
```
|
228
|
-
### Rendering HTML or SVG Elements
|
229
|
-
Elements are rendered using a DSL which provides all Elements supported by React following these specs:
|
230
|
-
- https://www.w3.org/TR/html52/fullindex.html#index-elements
|
231
|
-
- https://www.w3.org/TR/SVG11/eltindex.html
|
30
|
+
- Usually LucidApp and LucidComponent along with some imported javascript components.
|
31
|
+
|
32
|
+
Specific to Class, Pure, Redux, Lucid and LucidMaterial Components:
|
33
|
+
- [Events](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/events.md)
|
34
|
+
- [Lifecycle Callbacks](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/lifecycle_callbacks.md)
|
35
|
+
- [Props](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/props.md)
|
36
|
+
- [State](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/state.md)
|
37
|
+
|
38
|
+
For all Components:
|
39
|
+
- [Accessibility](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/accessibility.md)
|
40
|
+
- [Render Blocks](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/render_blocks.md)
|
41
|
+
- [Rendering HTML or SVG Elements](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/rendering_elements.md)
|
42
|
+
|
43
|
+
Special React Features:
|
44
|
+
- [Context](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/context.md)
|
45
|
+
- [Fragments](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/fragments.md)
|
46
|
+
- [Portals](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/portals.md)
|
47
|
+
- [Refs](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/refs.md)
|
48
|
+
- [StrictMode](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/strict_mode.md)
|
49
|
+
|
50
|
+
Other Features:
|
51
|
+
- [Code Splitting and Lazy Loading](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/code_splitting_lazy_loading.md)
|
52
|
+
- [Hot Module Reloading](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/hot_module_relaoding.md)
|
53
|
+
- [Server Side Rendering](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/server_side_rendering.md)
|
54
|
+
- [Using React Router](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/react_router.md)
|
55
|
+
- [Isomorfeus Helpers](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/isomorfeus_helpers.md)
|
56
|
+
- [Reducing Asset Size](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/reducing_asset_size.md)
|
232
57
|
|
233
|
-
The DSL can be used like so:
|
234
|
-
```ruby
|
235
|
-
class MyComponent < React::Component::Base
|
236
|
-
render do
|
237
|
-
SPAN { 'some more text' } # upper case
|
238
|
-
span { 'so much text' } # lower case
|
239
|
-
end
|
240
|
-
end
|
241
|
-
```
|
242
|
-
Use whichever you prefer. There are some clashes with opal ruby kernel methods, like `p 'text'`, that may have to be considered.
|
243
|
-
|
244
|
-
### Accessibility
|
245
|
-
Props like `aria-label` must be written underscored `aria_label`. They are automatically converted for React. Example:
|
246
|
-
```ruby
|
247
|
-
class MyComponent < React::Component::Base
|
248
|
-
render do
|
249
|
-
SPAN(aria_label: 'label text') { 'some more text' }
|
250
|
-
end
|
251
|
-
end
|
252
|
-
```
|
253
|
-
|
254
|
-
### Fragments
|
255
|
-
Fragments can be created like so:
|
256
|
-
```ruby
|
257
|
-
class MyComponent < React::Component::Base
|
258
|
-
render do
|
259
|
-
Fragment do
|
260
|
-
SPAN { 'useful text' }
|
261
|
-
SPAN { 'extremely useful text' }
|
262
|
-
end
|
263
|
-
end
|
264
|
-
end
|
265
|
-
```
|
266
|
-
|
267
|
-
### Portals
|
268
|
-
Portals can be created like so:
|
269
|
-
```ruby
|
270
|
-
class MyComponent < React::Component::Base
|
271
|
-
render do
|
272
|
-
Portal(`document.querySelector('div')`) do
|
273
|
-
SPAN { 'useful text' }
|
274
|
-
end
|
275
|
-
end
|
276
|
-
end
|
277
|
-
```
|
278
|
-
Portals currently require a native DOM node as argument. (This may change to something conveniently provided by opal-browser.)
|
279
|
-
|
280
|
-
### StrictMode
|
281
|
-
React.StrictMode can be used like so:
|
282
|
-
```ruby
|
283
|
-
class MyComponent < React::Component::Base
|
284
|
-
render do
|
285
|
-
StrictMode do
|
286
|
-
SPAN { 'useful text' }
|
287
|
-
end
|
288
|
-
end
|
289
|
-
end
|
290
|
-
```
|
291
|
-
|
292
|
-
### Ref
|
293
|
-
Refs must be declared using the `ref` DSL. This is to make sure, that they are not recreated during render and can be properly
|
294
|
-
compared by reference by shouldComponentUpdate(). Use the DSL like so:
|
295
|
-
```ruby
|
296
|
-
class MyComponent < React::Component::Base
|
297
|
-
ref :my_ref # a simple ref
|
298
|
-
ref :my_other_ref do |ref| # a ref with block
|
299
|
-
ref.current
|
300
|
-
end
|
301
|
-
|
302
|
-
render do
|
303
|
-
SPAN(ref: :my_ref) { 'useful text' } # refs can then be passed as prop
|
304
|
-
end
|
305
|
-
end
|
306
|
-
```
|
307
|
-
If the ref declaration supplies a block, the block receives a `React::Ref` ruby instance as argument. `ref.current`may then be the ruby component or
|
308
|
-
native DOM node. ()The latter may change to something conveniently provided by opal-browser.)
|
309
|
-
|
310
|
-
### Context
|
311
|
-
A context can be created using `React.create_context(constant_name, default_value)`. Constant_name must be a string like `"MyContext"`.
|
312
|
-
The context withs its Provider and Consumer can then be used like a component:
|
313
|
-
```ruby
|
314
|
-
React.create_context("MyContext", 'div')
|
315
|
-
|
316
|
-
class MyComponent < React::Component::Base
|
317
|
-
render do
|
318
|
-
MyContext.Provider(value="span") do
|
319
|
-
MyOtherComponent()
|
320
|
-
end
|
321
|
-
end
|
322
|
-
end
|
323
|
-
```
|
324
|
-
or the consumer:
|
325
|
-
```ruby
|
326
|
-
class MyOtherComponent < React::Component::Base
|
327
|
-
render do
|
328
|
-
MyContext.Consumer do |value|
|
329
|
-
Sem.Button(as: value) { 'useful text' }
|
330
|
-
end
|
331
|
-
end
|
332
|
-
end
|
333
|
-
```
|
334
|
-
|
335
|
-
### Using React Router
|
336
|
-
First the Components of React Router must be imported and made available in the global context:
|
337
|
-
```javascript
|
338
|
-
import * as ReactRouter from 'react-router';
|
339
|
-
import * as ReactRouterDOM from 'react-router-dom';
|
340
|
-
import { BrowserRouter, Link, NavLink, Route, Switch } from 'react-router-dom';
|
341
|
-
|
342
|
-
global.ReactRouter = ReactRouter;
|
343
|
-
global.ReactRouterDOM = ReactRouterDOM;
|
344
|
-
global.BrowserRouter = BrowserRouter;
|
345
|
-
global.Link = Link;
|
346
|
-
global.NavLink = NavLink;
|
347
|
-
global.Route = Route;
|
348
|
-
global.Switch = Switch;
|
349
|
-
```
|
350
|
-
Only import whats needed, or import HashRouter instead of BrowserRouter.
|
351
|
-
Then the Router components can be used as an other component:
|
352
|
-
```ruby
|
353
|
-
class RouterComponent < React::Component::Base
|
354
|
-
render do
|
355
|
-
DIV do
|
356
|
-
BrowserRouter do
|
357
|
-
Switch do
|
358
|
-
Route(path: '/my_path/:id', exact: true, component: MyOtherComponent.JS[:react_component])
|
359
|
-
Route(path: '/', strict: true, component: MyCompnent.JS[:react_component])
|
360
|
-
end
|
361
|
-
end
|
362
|
-
end
|
363
|
-
end
|
364
|
-
end
|
365
|
-
```
|
366
|
-
The Javascript React components of the ruby class must be passed as shown above. The child components then get the Router props
|
367
|
-
(match, history, location) passed in their props. They can be accessed like this:
|
368
|
-
```ruby
|
369
|
-
class MyOtherComponent < React::Component::Base
|
370
|
-
|
371
|
-
render do
|
372
|
-
Sem.Container(text_align: 'left', text: true) do
|
373
|
-
DIV do
|
374
|
-
SPAN { 'match :id is: ' }
|
375
|
-
SPAN { props.match.id }
|
376
|
-
end
|
377
|
-
DIV do
|
378
|
-
SPAN { 'location pathname is: ' }
|
379
|
-
SPAN { props.location.pathname }
|
380
|
-
end
|
381
|
-
DIV do
|
382
|
-
SPAN { 'number of history entries: ' }
|
383
|
-
SPAN { props.history.length }
|
384
|
-
end
|
385
|
-
end
|
386
|
-
end
|
387
|
-
end
|
388
|
-
```
|
389
|
-
Otherwise the React Router documentation applies: https://reacttraining.com/react-router/
|
390
|
-
|
391
|
-
### Code Splitting with Suspense (doc is wip)
|
392
|
-
|
393
|
-
React.lazy is availalable and so is the Suspense Component, in a render block:
|
394
|
-
```ruby
|
395
|
-
render do
|
396
|
-
Suspense do
|
397
|
-
MyComponent()
|
398
|
-
end
|
399
|
-
end
|
400
|
-
```
|
401
58
|
### Development Tools
|
402
59
|
The React Developer Tools allow for analyzing, debugging and profiling components. A very helpful toolset and working very nice with isomorfeus-react:
|
403
60
|
https://github.com/facebook/react-devtools
|
404
61
|
|
405
|
-
###
|
406
|
-
|
407
|
-
-
|
408
|
-
-
|
409
|
-
- On the server, for normal execution of server side code
|
410
|
-
|
411
|
-
The following helpers are available to determine the execution environment:
|
412
|
-
- `Isomorfeus.on_browser?` - true if running on the browser, otherwise false
|
413
|
-
- `Isomorfeus.on_ssr?` - true if running on node for server side rendering, otherwise false
|
414
|
-
- `Isomorfeus.on_server?` - true if running on the server, otherwise false
|
415
|
-
|
416
|
-
### Server Side Rendering
|
417
|
-
SSR is turned on by default in production and turned of in development. SSR is done in node using isomorfeus-speednode.
|
418
|
-
Components that depend on a browser can be shielded from rendering in node by using the above execution environment helper methods.
|
419
|
-
Example:
|
420
|
-
```ruby
|
421
|
-
class MyOtherComponent < React::Component::Base
|
422
|
-
|
423
|
-
render do
|
424
|
-
if Isomorfeus.on_browser?
|
425
|
-
SomeComponentDependingOnWindow()
|
426
|
-
else
|
427
|
-
DIV()
|
428
|
-
end
|
429
|
-
end
|
430
|
-
end
|
431
|
-
```
|
432
|
-
|
433
|
-
### Hot Module Reloading
|
434
|
-
|
435
|
-
HMR is supported when using LucidApp as top level component.
|
436
|
-
A render after a code update can be triggered using:
|
437
|
-
```ruby
|
438
|
-
Isomorfeus.force_render
|
439
|
-
```
|
62
|
+
### Specs and Benchmarks
|
63
|
+
- clone repo
|
64
|
+
- `bundle install`
|
65
|
+
- `rake`
|