isomorfeus-react 16.10.0 → 16.10.1

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 (84) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +64 -0
  3. data/lib/browser/delegate_native.rb +70 -0
  4. data/lib/browser/element.rb +176 -0
  5. data/lib/browser/element/canvas.rb +17 -0
  6. data/lib/browser/element/media.rb +78 -0
  7. data/lib/browser/event.rb +92 -0
  8. data/lib/browser/event_target.rb +39 -0
  9. data/lib/browser/file_list.rb +125 -0
  10. data/lib/browser/iterable.rb +15 -0
  11. data/lib/isomorfeus-react-material-ui.rb +10 -0
  12. data/lib/isomorfeus-react.rb +145 -0
  13. data/lib/isomorfeus/config.rb +130 -0
  14. data/lib/isomorfeus/props/validate_hash_proxy.rb +178 -0
  15. data/lib/isomorfeus/props/validator.rb +131 -0
  16. data/lib/isomorfeus/react_view_helper.rb +130 -0
  17. data/lib/isomorfeus/top_level.rb +86 -0
  18. data/lib/isomorfeus/top_level_ssr.rb +28 -0
  19. data/lib/lucid_app/api.rb +30 -0
  20. data/lib/lucid_app/base.rb +7 -0
  21. data/lib/lucid_app/context.rb +7 -0
  22. data/lib/lucid_app/mixin.rb +20 -0
  23. data/lib/lucid_app/native_component_constructor.rb +105 -0
  24. data/lib/lucid_component/app_store_defaults.rb +36 -0
  25. data/lib/lucid_component/app_store_proxy.rb +38 -0
  26. data/lib/lucid_component/base.rb +7 -0
  27. data/lib/lucid_component/class_store_proxy.rb +41 -0
  28. data/lib/lucid_component/component_class_store_defaults.rb +38 -0
  29. data/lib/lucid_component/component_instance_store_defaults.rb +35 -0
  30. data/lib/lucid_component/event_handler.rb +17 -0
  31. data/lib/lucid_component/initializer.rb +12 -0
  32. data/lib/lucid_component/instance_store_proxy.rb +45 -0
  33. data/lib/lucid_component/mixin.rb +18 -0
  34. data/lib/lucid_component/native_component_constructor.rb +116 -0
  35. data/lib/lucid_component/reducers.rb +48 -0
  36. data/lib/lucid_component/store_api.rb +38 -0
  37. data/lib/lucid_component/styles_support.rb +37 -0
  38. data/lib/lucid_material/app/base.rb +9 -0
  39. data/lib/lucid_material/app/mixin.rb +22 -0
  40. data/lib/lucid_material/app/native_component_constructor.rb +107 -0
  41. data/lib/lucid_material/component/base.rb +9 -0
  42. data/lib/lucid_material/component/mixin.rb +20 -0
  43. data/lib/lucid_material/component/native_component_constructor.rb +118 -0
  44. data/lib/lucid_prop_declaration/mixin.rb +91 -0
  45. data/lib/react.rb +195 -0
  46. data/lib/react/active_support_support.rb +13 -0
  47. data/lib/react/children.rb +35 -0
  48. data/lib/react/component/api.rb +80 -0
  49. data/lib/react/component/base.rb +9 -0
  50. data/lib/react/component/callbacks.rb +106 -0
  51. data/lib/react/component/elements.rb +60 -0
  52. data/lib/react/component/event_handler.rb +19 -0
  53. data/lib/react/component/features.rb +47 -0
  54. data/lib/react/component/history.rb +36 -0
  55. data/lib/react/component/initializer.rb +11 -0
  56. data/lib/react/component/location.rb +15 -0
  57. data/lib/react/component/match.rb +31 -0
  58. data/lib/react/component/mixin.rb +19 -0
  59. data/lib/react/component/native_component_constructor.rb +93 -0
  60. data/lib/react/component/props.rb +59 -0
  61. data/lib/react/component/resolution.rb +70 -0
  62. data/lib/react/component/should_component_update.rb +14 -0
  63. data/lib/react/component/state.rb +52 -0
  64. data/lib/react/component/styles.rb +27 -0
  65. data/lib/react/component/unsafe_api.rb +33 -0
  66. data/lib/react/context_wrapper.rb +46 -0
  67. data/lib/react/function_component/api.rb +63 -0
  68. data/lib/react/function_component/base.rb +9 -0
  69. data/lib/react/function_component/creator.rb +32 -0
  70. data/lib/react/function_component/event_handler.rb +13 -0
  71. data/lib/react/function_component/mixin.rb +14 -0
  72. data/lib/react/function_component/resolution.rb +62 -0
  73. data/lib/react/memo_component/base.rb +9 -0
  74. data/lib/react/memo_component/creator.rb +32 -0
  75. data/lib/react/memo_component/mixin.rb +14 -0
  76. data/lib/react/native_constant_wrapper.rb +26 -0
  77. data/lib/react/pure_component/base.rb +9 -0
  78. data/lib/react/pure_component/mixin.rb +18 -0
  79. data/lib/react/ref.rb +13 -0
  80. data/lib/react/synthetic_event.rb +53 -0
  81. data/lib/react/version.rb +3 -0
  82. data/lib/react_dom.rb +47 -0
  83. data/lib/react_dom_server.rb +19 -0
  84. metadata +84 -2
@@ -0,0 +1,91 @@
1
+ module LucidPropDeclaration
2
+ module Mixin
3
+ if RUBY_ENGINE == 'opal'
4
+ def self.extended(base)
5
+
6
+ def prop(prop_name, validate_hash = { required: true })
7
+ validate_hash = validate_hash.to_h if validate_hash.class == Isomorfeus::Props::ValidateHashProxy
8
+ if validate_hash.key?(:default)
9
+ %x{
10
+ if (base.lucid_react_component) {
11
+ let react_prop_name = Opal.React.lower_camelize(prop_name);
12
+ #{value = validate_hash[:default]}
13
+ if (!base.lucid_react_component.defaultProps) { base.lucid_react_component.defaultProps = {}; }
14
+ base.lucid_react_component.defaultProps[react_prop_name] = value;
15
+ if (!base.lucid_react_component.propTypes) { base.lucid_react_component.propTypes = {}; }
16
+ base.lucid_react_component.propTypes[react_prop_name] = base.lucid_react_component.prototype.validateProp;
17
+ } else if (base.react_component) {
18
+ let react_prop_name = Opal.React.lower_camelize(prop_name);
19
+ #{value = validate_hash[:default]}
20
+ if (!base.react_component.defaultProps) { base.react_component.defaultProps = {}; }
21
+ base.react_component.defaultProps[react_prop_name] = value;
22
+ if (!base.react_component.propTypes) { base.react_component.propTypes = {}; }
23
+ base.react_component.propTypes[react_prop_name] = base.react_component.prototype.validateProp;
24
+ }
25
+ }
26
+ end
27
+ declared_props[prop_name.to_sym] = validate_hash
28
+ end
29
+ end
30
+
31
+ def validate_function
32
+ %x{
33
+ if (typeof self.validate_function === 'undefined') {
34
+ self.validate_function = function(props_object) {
35
+ try { self.$validate_props(Opal.Hash.$new(props_object)) }
36
+ catch (e) { return e.message; }
37
+ }
38
+ }
39
+ return self.validate_function;
40
+ }
41
+ end
42
+
43
+ def validate_prop_function(prop)
44
+ function_name = "validate_#{prop}_function"
45
+ %x{
46
+ if (typeof self[function_name] === 'undefined') {
47
+ self[function_name] = function(value) {
48
+ try { self.$validate_prop(prop, value); }
49
+ catch (e) { return e.message; }
50
+ }
51
+ }
52
+ return self[function_name];
53
+ }
54
+ end
55
+ else
56
+ def prop(prop_name, validate_hash = { required: true })
57
+ validate_hash = validate_hash.to_h if validate_hash.class == Isomorfeus::Props::ValidateHashProxy
58
+ declared_props[prop_name.to_sym] = validate_hash
59
+ end
60
+ end
61
+
62
+ def declared_props
63
+ @declared_props ||= {}
64
+ end
65
+
66
+ def validate
67
+ Isomorfeus::Props::ValidateHashProxy.new
68
+ end
69
+
70
+ def validate_prop(prop, value)
71
+ return false unless declared_props.key?(prop)
72
+ validator = Isomorfeus::Props::Validator.new(self, prop, value, declared_props[prop])
73
+ validator.validate!
74
+ true
75
+ end
76
+
77
+ def validate_props(props)
78
+ declared_props.each_key do |prop|
79
+ if declared_props[prop].key?(:required) && declared_props[prop][:required] && !props.key?(prop)
80
+ raise "Required prop #{prop} not given!"
81
+ end
82
+ end
83
+ result = true
84
+ props.each do |p, v|
85
+ r = validate_prop(p, v)
86
+ result = false unless r
87
+ end
88
+ result
89
+ end
90
+ end
91
+ end
@@ -0,0 +1,195 @@
1
+ module React
2
+ # to_native_react_props: the native_component params is used for event handlers, it keeps the event handlers
3
+ # it does not need to be compone nt, can be a object with the event handlers
4
+ # language=JS
5
+ %x{
6
+ self.render_buffer = [];
7
+
8
+ self.set_validate_prop = function(component, prop_name) {
9
+ if (typeof component.react_component.propTypes == "undefined") {
10
+ component.react_component.propTypes = {};
11
+ component.react_component.propValidations = {};
12
+ component.react_component.propValidations[prop_name] = {};
13
+ }
14
+ component.react_component.propTypes[prop_name] = component.react_component.prototype.validateProp;
15
+ };
16
+
17
+ self.lower_camelize = function(snake_cased_word) {
18
+ var parts = snake_cased_word.split('_');
19
+ var res = parts[0];
20
+
21
+ for (var i = 1; i < parts.length; i++) {
22
+ res += parts[i][0].toUpperCase() + parts[i].slice(1);
23
+ }
24
+ return res;
25
+ };
26
+
27
+ self.native_element_or_component_to_ruby = function (element) {
28
+ if (typeof element.__ruby_instance !== 'undefined') { return element.__ruby_instance }
29
+ if (element instanceof Element || element instanceof Node) { return #{Browser::Element.new(`element`)} }
30
+ return element;
31
+ };
32
+
33
+ self.to_native_react_props = function(ruby_style_props) {
34
+ var result = {};
35
+ var keys = ruby_style_props.$keys();
36
+ var keys_length = keys.length;
37
+ for (var i = 0; i < keys_length; i++) {
38
+ if (keys[i].startsWith("on_")) {
39
+ var handler = ruby_style_props['$[]'](keys[i]);
40
+ if (typeof handler === "function") {
41
+ result[Opal.React.lower_camelize(keys[i])] = handler;
42
+ } else {
43
+ var active_component = Opal.React.active_component();
44
+ result[Opal.React.lower_camelize(keys[i])] = active_component[handler];
45
+ }
46
+ } else if (keys[i].startsWith("aria_")) {
47
+ result[keys[i].replace("_", "-")] = ruby_style_props['$[]'](keys[i]);
48
+ } else if (keys[i] === "style") {
49
+ var val = ruby_style_props['$[]'](keys[i]);
50
+ if (typeof val.$$is_hash !== "undefined") { val = val.$to_n() }
51
+ result["style"] = val;
52
+ } else {
53
+ result[Opal.React.lower_camelize(keys[i])] = ruby_style_props['$[]'](keys[i]);
54
+ }
55
+ }
56
+ return result;
57
+ };
58
+
59
+ self.internal_prepare_args_and_render = function(component, args, block) {
60
+ if (args.length > 0) {
61
+ var last_arg = args[args.length - 1];
62
+ if (typeof last_arg === 'string' || last_arg instanceof String) {
63
+ if (args.length === 1) { return Opal.React.internal_render(component, null, last_arg, null); }
64
+ else { return Opal.React.internal_render(component, args[0], last_arg, null); }
65
+ } else { return Opal.React.internal_render(component, args[0], null, block); }
66
+ } else { return Opal.React.internal_render(component, null, null, block); }
67
+ };
68
+
69
+ self.internal_render = function(component, props, string_child, block) {
70
+ let children;
71
+ let react_element;
72
+ let native_props = null;
73
+
74
+ if (string_child) {
75
+ children = string_child;
76
+ } else if (block && block !== nil) {
77
+ Opal.React.render_buffer.push([]);
78
+ let block_result = block.$call();
79
+ let last_buffer_length = Opal.React.render_buffer[Opal.React.render_buffer.length - 1].length;
80
+ let last_buffer_element = Opal.React.render_buffer[Opal.React.render_buffer.length - 1][last_buffer_length - 1];
81
+ if (block_result && block_result !== last_buffer_element && (block_result !== nil && (typeof block_result === "string" || typeof block_result.$$typeof === "symbol" ||
82
+ (typeof block_result.constructor !== "undefined" && block_result.constructor === Array && block_result[0] && typeof block_result[0].$$typeof === "symbol")
83
+ ))) {
84
+ Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result);
85
+ }
86
+ children = Opal.React.render_buffer.pop();
87
+ if (children.length == 1) { children = children[0]; }
88
+ else if (children.length == 0) { children = null; }
89
+ }
90
+ if (props && props !== nil) { native_props = Opal.React.to_native_react_props(props); }
91
+ react_element = Opal.global.React.createElement(component, native_props, children);
92
+ Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(react_element);
93
+ return react_element;
94
+ };
95
+
96
+ self.active_components = [];
97
+
98
+ self.active_component = function() {
99
+ var length = Opal.React.active_components.length;
100
+ if (length === 0) { return null; };
101
+ return Opal.React.active_components[length-1];
102
+ };
103
+
104
+ self.active_redux_components = [];
105
+
106
+ self.active_redux_component = function() {
107
+ var length = Opal.React.active_redux_components.length;
108
+ if (length === 0) { return null; };
109
+ return Opal.React.active_redux_components[length-1];
110
+ };
111
+ }
112
+
113
+ def self.clone_element(ruby_react_element, props = nil, children = nil, &block)
114
+ block_result = `null`
115
+ if block_given?
116
+ block_result = block.call
117
+ block_result = `null` unless block_result
118
+ end
119
+ native_props = props ? `Opal.React.to_native_react_props(props)` : `null`
120
+ `Opal.global.React.cloneElement(ruby_react_element.$to_n(), native_props, block_result)`
121
+ end
122
+
123
+ def self.create_context(const_name, default_value)
124
+ %x{
125
+ Opal.global[const_name] = Opal.global.React.createContext(default_value);
126
+ var new_const = #{React::ContextWrapper.new(`Opal.global[const_name]`)};
127
+ #{Object.const_set(const_name, `new_const`)};
128
+ return new_const;
129
+ }
130
+ end
131
+
132
+ def self.create_element(type, props = nil, children = nil, &block)
133
+ %x{
134
+ let component = null;
135
+ let native_props = null;
136
+ if (typeof type.react_component !== 'undefined') {
137
+ component = type.react_component;
138
+ } else {
139
+ component = type;
140
+ }
141
+
142
+ Opal.React.render_buffer.push([]);
143
+ if (block !== nil) {
144
+ let block_result = block.$call()
145
+ let last_buffer_length = Opal.React.render_buffer[Opal.React.render_buffer.length - 1].length;
146
+ let last_buffer_element = Opal.React.render_buffer[Opal.React.render_buffer.length - 1][last_buffer_length - 1];
147
+ if (block_result && block_result !== last_buffer_element && (block_result !== nil && (typeof block_result === "string" || typeof block_result.$$typeof === "symbol" ||
148
+ (typeof block_result.constructor !== "undefined" && block_result.constructor === Array && block_result[0] && typeof block_result[0].$$typeof === "symbol")
149
+ ))) {
150
+ Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result);
151
+ }
152
+ children = Opal.React.render_buffer.pop()
153
+ if (children.length == 1) { children = children[0]; }
154
+ else if (children.length == 0) { children = null; }
155
+ }
156
+ if (props && props !== nil) { native_props = Opal.React.to_native_react_props(props); }
157
+ return Opal.global.React.createElement(component, native_props, children);
158
+ }
159
+ end
160
+
161
+ def self.create_factory(type)
162
+ native_function = `Opal.global.React.createFactory(type)`
163
+ proc { `native_function.call()` }
164
+ end
165
+
166
+ def self.create_ref
167
+ React::Ref.new(`Opal.global.React.createRef()`)
168
+ end
169
+
170
+ def self.forwardRef(&block)
171
+ # TODO whats the return here? A React:Element?, doc says a React node, whats that?
172
+ `Opal.global.React.forwardRef( function(props, ref) { return block.$call().$to_n(); })`
173
+ end
174
+
175
+ def self.is_valid_element(react_element)
176
+ `Opal.global.React.isValidElement(react_element)`
177
+ end
178
+
179
+ def self.lazy(import_statement_function)
180
+ `Opal.global.React.lazy(import_statement_function)`
181
+ end
182
+
183
+ def self.memo(function_component, &block)
184
+ if block_given?
185
+ %x{
186
+ var fun = function(prev_props, next_props) {
187
+ return #{block.call(::React::Component::Props.new(`{props: prev_props}`), ::React::Component::Props.new(`{props: next_props}`))};
188
+ }
189
+ return Opal.global.React.memo(function_component, fun);
190
+ }
191
+ else
192
+ `Opal.global.React.memo(function_component)`
193
+ end
194
+ end
195
+ end
@@ -0,0 +1,13 @@
1
+ class String
2
+ def demodulize
3
+ if i = self.rindex("::")
4
+ self[(i + 2)..-1]
5
+ else
6
+ self
7
+ end
8
+ end
9
+
10
+ def deconstantize
11
+ self[0, self.rindex("::") || 0] # implementation based on the one in facets' Module#spacename
12
+ end
13
+ end
@@ -0,0 +1,35 @@
1
+ module React
2
+ module Children
3
+ class << self
4
+ def count(children)
5
+ `Opal.global.React.Children.count(children)`
6
+ end
7
+
8
+ def for_each(children, &block)
9
+ %x{
10
+ var fun = function(child) {
11
+ #{block.call(child)};
12
+ }
13
+ Opal.global.React.Children.forEach(children, fun);
14
+ }
15
+ end
16
+
17
+ def map(children, &block)
18
+ %x{
19
+ var fun = function(child) {
20
+ return #{block.call(child)};
21
+ }
22
+ return Opal.global.React.Children.map(children, fun);
23
+ }
24
+ end
25
+
26
+ def only(children)
27
+ `Opal.global.React.Children.only(children)`
28
+ end
29
+
30
+ def to_array(children)
31
+ `Opal.global.React.Children.toArray(children)`
32
+ end
33
+ end
34
+ end
35
+ end
@@ -0,0 +1,80 @@
1
+ module React
2
+ module Component
3
+ module API
4
+ def self.included(base)
5
+ base.instance_exec do
6
+ base_module = base.to_s.deconstantize
7
+ if base_module != ''
8
+ base_module.constantize.define_singleton_method(base.to_s.demodulize) do |*args, &block|
9
+ `Opal.React.internal_prepare_args_and_render(#{base}.react_component, args, block)`
10
+ end
11
+ else
12
+ Object.define_method(base.to_s) do |*args, &block|
13
+ `Opal.React.internal_prepare_args_and_render(#{base}.react_component, args, block)`
14
+ end
15
+ end
16
+
17
+ attr_accessor :props
18
+ attr_accessor :state
19
+
20
+ def ref(ref_name, &block)
21
+ defined_refs.JS[ref_name] = block_given? ? block : `null`
22
+ end
23
+
24
+ def defined_refs
25
+ @defined_ref ||= `{}`
26
+ end
27
+
28
+ def default_state_defined
29
+ @default_state_defined
30
+ end
31
+
32
+ def state
33
+ return @default_state if @default_state
34
+ @default_state_defined = true
35
+ %x{
36
+ var native_state = {state: {}};
37
+ native_state.setState = function(new_state, callback) {
38
+ for (var key in new_state) {
39
+ this.state[key] = new_state[key];
40
+ }
41
+ if (callback) { callback.call(); }
42
+ }
43
+ }
44
+ @default_state = React::Component::State.new(`native_state`)
45
+ end
46
+
47
+ def render(&block)
48
+ `base.render_block = block`
49
+ end
50
+ end
51
+ end
52
+
53
+ def display_name
54
+ @native.JS[:displayName]
55
+ end
56
+
57
+ def force_update(&block)
58
+ if block_given?
59
+ # this maybe needs instance_exec too
60
+ @native.JS.forceUpdate(`function() { block.$call(); }`)
61
+ else
62
+ @native.JS.forceUpdate
63
+ end
64
+ end
65
+
66
+ def ref(name)
67
+ `#@native[name]`
68
+ end
69
+
70
+ def ruby_ref(name)
71
+ return `#@native[name]` if `(typeof #@native[name] === 'function')`
72
+ React::Ref::new(`#@native[name]`)
73
+ end
74
+
75
+ def set_state(updater, &callback)
76
+ @state.set_state(updater, &callback)
77
+ end
78
+ end
79
+ end
80
+ end
@@ -0,0 +1,9 @@
1
+ module React
2
+ module Component
3
+ class Base
4
+ def self.inherited(base)
5
+ base.include(::React::Component::Mixin)
6
+ end
7
+ end
8
+ end
9
+ end
@@ -0,0 +1,106 @@
1
+ module React
2
+ module Component
3
+ module Callbacks
4
+ def self.included(base)
5
+ base.instance_exec do
6
+ def component_did_catch(&block)
7
+ # TODO convert error and info
8
+ %x{
9
+ var fun = function(error, info) {
10
+ Opal.React.active_redux_components.push(this.__ruby_instance);
11
+ #{`this.__ruby_instance`.instance_exec(`error`, `info`, &block)};
12
+ Opal.React.active_redux_components.pop();
13
+ }
14
+ if (self.lucid_react_component) { self.lucid_react_component.prototype.componentDidCatch = fun; }
15
+ else { self.react_component.prototype.componentDidCatch = fun; }
16
+ }
17
+ end
18
+
19
+ def component_did_mount(&block)
20
+ %x{
21
+ var fun = function() {
22
+ Opal.React.active_redux_components.push(this.__ruby_instance);
23
+ #{`this.__ruby_instance`.instance_exec(&block)};
24
+ Opal.React.active_redux_components.pop();
25
+ }
26
+ if (self.lucid_react_component) { self.lucid_react_component.prototype.componentDidMount = fun; }
27
+ else { self.react_component.prototype.componentDidMount = fun; }
28
+ }
29
+ end
30
+
31
+ def component_did_update(&block)
32
+ %x{
33
+ var fun = function(prev_props, prev_state, snapshot) {
34
+ Opal.React.active_redux_components.push(this.__ruby_instance);
35
+ #{`this.__ruby_instance`.instance_exec(`Opal.React.Component.Props.$new({props: prev_props})`,
36
+ `Opal.React.Component.State.$new({state: prev_state})`,
37
+ `snapshot`, &block)};
38
+ Opal.React.active_redux_components.pop();
39
+ }
40
+ if (self.lucid_react_component) { self.lucid_react_component.prototype.componentDidUpdate = fun; }
41
+ else { self.react_component.prototype.componentDidUpdate = fun; }
42
+ }
43
+ end
44
+
45
+ def component_will_unmount(&block)
46
+ %x{
47
+ var fun = function() {
48
+ if (typeof this.unsubscriber === "function") { this.unsubscriber(); };
49
+ Opal.React.active_redux_components.push(this.__ruby_instance);
50
+ #{`this.__ruby_instance`.instance_exec(&block)};
51
+ Opal.React.active_redux_components.pop();
52
+ }
53
+ if (self.lucid_react_component) { self.lucid_react_component.prototype.componentWillUnmount = fun; }
54
+ else { self.react_component.prototype.componentWillUnmount = fun; }
55
+ }
56
+ end
57
+
58
+ def get_derived_state_from_error(&block)
59
+ # TODO convert error
60
+ %x{
61
+ var fun = function(error) {
62
+ var result = #{`this.__ruby_instance`.instance_exec(`error`, &block)};
63
+ if (typeof result.$to_n === 'function') { result = result.$to_n() }
64
+ if (result === Opal.nil) { return null; }
65
+ return result;
66
+ }
67
+ if (self.lucid_react_component) { self.lucid_react_component.prototype.getDerivedStateFromError = fun; }
68
+ else { self.react_component.prototype.getDerivedStateFromError = fun; }
69
+ }
70
+ end
71
+
72
+ def get_derived_state_from_props(&block)
73
+ %x{
74
+ var fun = function(props, state) {
75
+ Opal.React.active_redux_components.push(this.__ruby_instance);
76
+ var result = #{`this.__ruby_instance`.instance_exec(`Opal.React.Component.Props.$new({props: props})`,
77
+ `Opal.React.Component.State.$new({state: state})`, &block)};
78
+ Opal.React.active_redux_components.pop();
79
+ if (typeof result.$to_n === 'function') { result = result.$to_n() }
80
+ if (result === Opal.nil) { return null; }
81
+ return result;
82
+ }
83
+ if (self.lucid_react_component) { self.lucid_react_component.prototype.getDerivedStateFromProps = fun; }
84
+ else { self.react_component.prototype.getDerivedStateFromProps = fun; }
85
+ }
86
+ end
87
+
88
+ def get_snapshot_before_update(&block)
89
+ %x{
90
+ var fun = function(prev_props, prev_state) {
91
+
92
+ var result = #{`this.__ruby_instance`.instance_exec(`Opal.React.Component.Props.$new({props: prev_props})`,
93
+ `Opal.React.Component.State.$new({state: prev_state})`, &block)};
94
+ Opal.React.active_redux_components.pop();
95
+ if (result === Opal.nil) { return null; }
96
+ return result;
97
+ }
98
+ if (self.lucid_react_component) { self.lucid_react_component.prototype.getSnapshotBeforeUpdate = fun; }
99
+ else { self.react_component.prototype.getSnapshotBeforeUpdate = fun; }
100
+ }
101
+ end
102
+ end
103
+ end
104
+ end
105
+ end
106
+ end