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.
Files changed (59) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +39 -413
  3. data/lib/isomorfeus-react-base.rb +55 -0
  4. data/lib/isomorfeus-react-component.rb +20 -0
  5. data/lib/isomorfeus-react-lucid.rb +39 -0
  6. data/lib/isomorfeus-react-material-ui.rb +41 -0
  7. data/lib/isomorfeus-react-redux-component.rb +25 -0
  8. data/lib/isomorfeus-react.rb +4 -101
  9. data/lib/isomorfeus/config.rb +3 -8
  10. data/lib/isomorfeus/top_level_browser.rb +1 -1
  11. data/lib/lucid_app/api.rb +1 -12
  12. data/lib/lucid_app/mixin.rb +1 -0
  13. data/lib/lucid_app/native_component_constructor.rb +10 -0
  14. data/lib/lucid_component/api.rb +1 -1
  15. data/lib/lucid_component/initializer.rb +5 -5
  16. data/lib/lucid_component/mixin.rb +1 -0
  17. data/lib/lucid_component/native_component_constructor.rb +13 -3
  18. data/lib/lucid_material/app/base.rb +9 -0
  19. data/lib/lucid_material/app/mixin.rb +20 -0
  20. data/lib/lucid_material/app/native_component_constructor.rb +116 -0
  21. data/lib/lucid_material/component/api.rb +19 -0
  22. data/lib/lucid_material/component/base.rb +9 -0
  23. data/lib/lucid_material/component/mixin.rb +21 -0
  24. data/lib/lucid_material/component/native_component_constructor.rb +158 -0
  25. data/lib/react.rb +13 -5
  26. data/lib/react/children.rb +35 -0
  27. data/lib/react/component/api.rb +5 -91
  28. data/lib/react/component/callbacks.rb +103 -0
  29. data/lib/react/component/elements.rb +3 -23
  30. data/lib/react/component/features.rb +12 -29
  31. data/lib/react/component/initializer.rb +2 -2
  32. data/lib/react/component/mixin.rb +1 -0
  33. data/lib/react/component/native_component_constructor.rb +7 -0
  34. data/lib/react/component/props.rb +13 -1
  35. data/lib/react/component/resolution.rb +14 -15
  36. data/lib/react/component/styles.rb +23 -0
  37. data/lib/react/context_wrapper.rb +4 -0
  38. data/lib/react/function_component/api.rb +83 -0
  39. data/lib/react/function_component/base.rb +9 -0
  40. data/lib/react/function_component/creator.rb +19 -65
  41. data/lib/react/function_component/event_handler.rb +13 -0
  42. data/lib/react/function_component/mixin.rb +14 -0
  43. data/lib/react/function_component/resolution.rb +17 -15
  44. data/lib/react/memo_component/base.rb +9 -0
  45. data/lib/react/memo_component/creator.rb +32 -0
  46. data/lib/react/memo_component/mixin.rb +14 -0
  47. data/lib/react/native_constant_wrapper.rb +1 -11
  48. data/lib/react/pure_component/mixin.rb +2 -0
  49. data/lib/react/redux_component/api.rb +1 -93
  50. data/lib/react/redux_component/initializer.rb +5 -5
  51. data/lib/react/redux_component/mixin.rb +1 -0
  52. data/lib/react/redux_component/native_component_constructor.rb +13 -3
  53. data/lib/react/redux_component/reducers.rb +29 -35
  54. data/lib/react/ref.rb +4 -0
  55. data/lib/react/version.rb +1 -1
  56. data/lib/react_dom.rb +9 -3
  57. metadata +70 -8
  58. data/lib/lucid_router.rb +0 -18
  59. data/lib/react/function_component/runner.rb +0 -19
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: b03248a8b8a913d7076a3206ced8d1567c4b96aa3fc070a1c1c260dfb04b92f5
4
- data.tar.gz: c49a7c4498b51f674880b34922e4674ea8c2b905eff6db85cbb5de44323a33b6
3
+ metadata.gz: 572d49e689c48227eff72f1c354d6d09e342d110cfcb1e95f7a9a1a523fe345f
4
+ data.tar.gz: 4ffc0e63dde3adafc83f72a239e041186e4af492d60b02724c783b823ade4846
5
5
  SHA512:
6
- metadata.gz: 3861fe87e94eade0fb12a762da9d63e17578df2e38a0810a0c5ba2265a2a50160bbf3c33c24a7a6a369a1bf28e8564866a2ff2e8dd55dc2474e9488e50c08d7f
7
- data.tar.gz: 0a7c57991ed6296662c6e30a35aa392d22866811d6f62dcd13d4dc0e14481dd57ce5200e893ab1300f8e151dbfa839b72127393406d3ac023fb6f6e6e12bd990
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
- ### Community and Support
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.5.x implements features and the API of React 16.6 and should be used with React 16.6
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
- ## Installation
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
- ### Dependencies
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
- React, Redux and accompanying libraries must be imported and made available in the global namespace in the application javascript entry file,
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 Router and Lucid Component](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/lucid_component.md)
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, LucidRouter and LucidComponent along with some javascript components.
96
- - For improved performance small Function Components may help at critical spots.
97
-
98
- ### Props
99
- [Props](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/props.md)
100
-
101
- ### State
102
- [State](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/state.md)
103
-
104
- ### Lifecycle Callbacks
105
- All lifecycle callbacks that are available in the matching React version are available as DSL. Callback names are underscored.
106
- Callback names prefixed with UNSAFE_ in React are prefixed with unsafe_ in ruby.
107
- Example:
108
- ```ruby
109
- class MyComponent < React::Component::Base
110
- render do
111
- SPAN { 'some more text' }
112
- end
113
-
114
- component_did_mount do
115
- `console.log("MyComponent mounted!")`
116
- end
117
- end
118
- ```
119
-
120
- ### Events
121
- Event names are underscored in ruby: `onClick` becomes `on_click`. The conversion for React is done automatically.
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
- ### Execution Environment
406
- Code can run in 3 different environments:
407
- - On the Browser, for normal execution
408
- - On nodejs, for server side rendering
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`