isomorfeus-react 16.6.8 → 16.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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`
|