isomorfeus-react 16.10.4 → 16.10.5
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +1 -2
- data/lib/isomorfeus-react.rb +0 -4
- data/lib/lucid_app/native_component_constructor.rb +5 -2
- data/lib/lucid_component/event_handler.rb +5 -1
- data/lib/lucid_component/native_component_constructor.rb +8 -5
- data/lib/lucid_material/app/native_component_constructor.rb +5 -2
- data/lib/lucid_material/component/native_component_constructor.rb +8 -5
- data/lib/react.rb +18 -28
- data/lib/react/component/api.rb +30 -1
- data/lib/react/component/event_handler.rb +5 -1
- data/lib/react/component/features.rb +4 -5
- data/lib/react/component/native_component_constructor.rb +9 -6
- data/lib/react/component/props.rb +11 -9
- data/lib/react/component/state.rb +2 -2
- data/lib/react/context_wrapper.rb +7 -9
- data/lib/react/function_component/api.rb +29 -0
- data/lib/react/function_component/creator.rb +4 -1
- data/lib/react/function_component/event_handler.rb +5 -1
- data/lib/react/memo_component/creator.rb +4 -1
- data/lib/react/version.rb +1 -1
- data/lib/react_dom.rb +11 -17
- metadata +2 -4
- data/lib/react/pure_component/base.rb +0 -9
- data/lib/react/pure_component/mixin.rb +0 -18
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: b2286c84dc8c51cc28fd6940b07a021109025122954b2784c2cb19e51da0b648
|
4
|
+
data.tar.gz: 778d14cf5a6369e19ef96fad94126df299a15585c95ce346af959579bc3c8c90
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 8471a64f958f5f4eea8d77fcf0cc9f9b746de2ce8c6b2c088ca17dfb760498d286fad0dc8408cd7a7b8c492102b9e1a46ec9bf3361317eb474a61ad0ac9466ec
|
7
|
+
data.tar.gz: fc964591e3c95ae164ba3a910bbc966612f3fc02ac29774e16079b6df22a17b8b9c4a332cc4bd9906ee40f696f2cbdf4668fd392f95c5ee913a69a0cf7c0421e
|
data/README.md
CHANGED
@@ -19,7 +19,6 @@ apply, but in the Ruby way, see:
|
|
19
19
|
|
20
20
|
Component Types:
|
21
21
|
- [Class Component](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/class_component.md)
|
22
|
-
- [Pure Component](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/pure_component.md)
|
23
22
|
- [Function and Memo Component](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/function_component.md)
|
24
23
|
- [Lucid App, Lucid Component](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/lucid_component.md)
|
25
24
|
- [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)
|
@@ -61,4 +60,4 @@ https://github.com/facebook/react-devtools
|
|
61
60
|
### Specs and Benchmarks
|
62
61
|
- clone repo
|
63
62
|
- `bundle install`
|
64
|
-
- `rake`
|
63
|
+
- `rake`
|
data/lib/isomorfeus-react.rb
CHANGED
@@ -77,10 +77,6 @@ if RUBY_ENGINE == 'opal'
|
|
77
77
|
require 'react/component/mixin'
|
78
78
|
require 'react/component/base'
|
79
79
|
|
80
|
-
# React::PureComponent
|
81
|
-
require 'react/pure_component/mixin'
|
82
|
-
require 'react/pure_component/base'
|
83
|
-
|
84
80
|
# init component reducers
|
85
81
|
require 'lucid_component/reducers'
|
86
82
|
LucidComponent::Reducers.add_component_reducers_to_store
|
@@ -55,11 +55,14 @@ module LucidApp
|
|
55
55
|
}
|
56
56
|
render() {
|
57
57
|
Opal.React.render_buffer.push([]);
|
58
|
+
// console.log("lucid app pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());
|
58
59
|
Opal.React.active_components.push(this);
|
59
60
|
Opal.React.active_redux_components.push(this.__ruby_instance);
|
60
|
-
#{`this.__ruby_instance`.instance_exec(&`base.render_block`)};
|
61
|
+
let block_result = #{`this.__ruby_instance`.instance_exec(&`base.render_block`)};
|
62
|
+
if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result); }
|
61
63
|
Opal.React.active_redux_components.pop();
|
62
64
|
Opal.React.active_components.pop();
|
65
|
+
// console.log("lucid app popping", Opal.React.render_buffer, Opal.React.render_buffer.toString());
|
63
66
|
let children = Opal.React.render_buffer.pop();
|
64
67
|
return Opal.global.React.createElement(Opal.global.LucidApplicationContext.Provider, { value: this.state.isomorfeus_store_state }, children);
|
65
68
|
}
|
@@ -68,7 +71,7 @@ module LucidApp
|
|
68
71
|
this.setState({ isomorfeus_store_state: next_state });
|
69
72
|
}
|
70
73
|
componentWillUnmount() {
|
71
|
-
if (typeof this.unsubscriber === "function") { this.unsubscriber(); }
|
74
|
+
if (typeof this.unsubscriber === "function") { this.unsubscriber(); }
|
72
75
|
}
|
73
76
|
validateProp(props, propName, componentName) {
|
74
77
|
try { base.$validate_prop(propName, props[propName]) }
|
@@ -8,7 +8,11 @@ module LucidComponent
|
|
8
8
|
event_handlers << name
|
9
9
|
%x{
|
10
10
|
self.lucid_react_component.prototype[name] = function(event, info) {
|
11
|
-
|
11
|
+
if (typeof event === "object") {
|
12
|
+
#{ruby_event = ::React::SyntheticEvent.new(`event`)};
|
13
|
+
} else {
|
14
|
+
#{ruby_event = `event`};
|
15
|
+
}
|
12
16
|
#{`this.__ruby_instance`.instance_exec(ruby_event, `info`, &block)};
|
13
17
|
}
|
14
18
|
}
|
@@ -43,11 +43,14 @@ module LucidComponent
|
|
43
43
|
}
|
44
44
|
render() {
|
45
45
|
Opal.React.render_buffer.push([]);
|
46
|
+
// console.log("lucid component pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());
|
46
47
|
Opal.React.active_components.push(this);
|
47
48
|
Opal.React.active_redux_components.push(this);
|
48
|
-
#{`this.__ruby_instance`.instance_exec(&`base.render_block`)};
|
49
|
+
let block_result = #{`this.__ruby_instance`.instance_exec(&`base.render_block`)};
|
50
|
+
if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result); }
|
49
51
|
Opal.React.active_redux_components.pop();
|
50
52
|
Opal.React.active_components.pop();
|
53
|
+
// console.log("lucid component popping", Opal.React.render_buffer, Opal.React.render_buffer.toString());
|
51
54
|
return Opal.React.render_buffer.pop();
|
52
55
|
}
|
53
56
|
data_access() {
|
@@ -70,8 +73,8 @@ module LucidComponent
|
|
70
73
|
typeof next_props[property]['$!='] !== "undefined" &&
|
71
74
|
typeof this.props[property] !== "undefined" && this.props[property] !== null &&
|
72
75
|
typeof this.props[property]['$!='] !== "undefined") {
|
73
|
-
if (#{ !! (`next_props[property]` != `this.props[property]`) }) { return true; }
|
74
|
-
} else if (next_props[property] !== this.props[property]) { return true; }
|
76
|
+
if (#{ !! (`next_props[property]` != `this.props[property]`) }) { return true; }
|
77
|
+
} else if (next_props[property] !== this.props[property]) { return true; }
|
75
78
|
}
|
76
79
|
}
|
77
80
|
for (var property in next_state) {
|
@@ -79,8 +82,8 @@ module LucidComponent
|
|
79
82
|
if (!this.state.hasOwnProperty(property)) { return true; };
|
80
83
|
if (next_state[property] !== null && typeof next_state[property]['$!='] !== "undefined" &&
|
81
84
|
this.state[property] !== null && typeof this.state[property]['$!='] !== "undefined") {
|
82
|
-
if (#{ !! (`next_state[property]` != `this.state[property]`) }) { return true }
|
83
|
-
} else if (next_state[property] !== this.state[property]) { return true }
|
85
|
+
if (#{ !! (`next_state[property]` != `this.state[property]`) }) { return true }
|
86
|
+
} else if (next_state[property] !== this.state[property]) { return true }
|
84
87
|
}
|
85
88
|
}
|
86
89
|
return false;
|
@@ -56,11 +56,14 @@ module LucidMaterial
|
|
56
56
|
}
|
57
57
|
render() {
|
58
58
|
Opal.React.render_buffer.push([]);
|
59
|
+
// console.log("material app pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());
|
59
60
|
Opal.React.active_components.push(this);
|
60
61
|
Opal.React.active_redux_components.push(this.__ruby_instance);
|
61
|
-
#{`this.__ruby_instance`.instance_exec(&`base.render_block`)};
|
62
|
+
let block_result = #{`this.__ruby_instance`.instance_exec(&`base.render_block`)};
|
63
|
+
if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result); }
|
62
64
|
Opal.React.active_redux_components.pop();
|
63
65
|
Opal.React.active_components.pop();
|
66
|
+
// console.log("material app popping", Opal.React.render_buffer, Opal.React.render_buffer.toString());
|
64
67
|
var children = Opal.React.render_buffer.pop();
|
65
68
|
return Opal.global.React.createElement(Opal.global.LucidApplicationContext.Provider, { value: this.state.isomorfeus_store_state }, children);
|
66
69
|
}
|
@@ -69,7 +72,7 @@ module LucidMaterial
|
|
69
72
|
this.setState({ isomorfeus_store_state: next_state });
|
70
73
|
}
|
71
74
|
componentWillUnmount() {
|
72
|
-
if (typeof this.unsubscriber === "function") { this.unsubscriber(); }
|
75
|
+
if (typeof this.unsubscriber === "function") { this.unsubscriber(); }
|
73
76
|
}
|
74
77
|
validateProp(props, propName, componentName) {
|
75
78
|
try { base.$validate_prop(propName, props[propName]) }
|
@@ -44,11 +44,14 @@ module LucidMaterial
|
|
44
44
|
}
|
45
45
|
render() {
|
46
46
|
Opal.React.render_buffer.push([]);
|
47
|
+
// console.log("material component pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());
|
47
48
|
Opal.React.active_components.push(this);
|
48
49
|
Opal.React.active_redux_components.push(this);
|
49
|
-
#{`this.__ruby_instance`.instance_exec(&`base.render_block`)};
|
50
|
+
let block_result = #{`this.__ruby_instance`.instance_exec(&`base.render_block`)};
|
51
|
+
if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result); }
|
50
52
|
Opal.React.active_redux_components.pop();
|
51
53
|
Opal.React.active_components.pop();
|
54
|
+
// console.log("material component popping", Opal.React.render_buffer, Opal.React.render_buffer.toString());
|
52
55
|
return Opal.React.render_buffer.pop();
|
53
56
|
}
|
54
57
|
data_access() {
|
@@ -71,8 +74,8 @@ module LucidMaterial
|
|
71
74
|
typeof next_props[property]['$!='] !== "undefined" &&
|
72
75
|
typeof this.props[property] !== "undefined" && this.props[property] !== null &&
|
73
76
|
typeof this.props[property]['$!='] !== "undefined") {
|
74
|
-
if (#{ !! (`next_props[property]` != `this.props[property]`) }) { return true; }
|
75
|
-
} else if (next_props[property] !== this.props[property]) { return true; }
|
77
|
+
if (#{ !! (`next_props[property]` != `this.props[property]`) }) { return true; }
|
78
|
+
} else if (next_props[property] !== this.props[property]) { return true; }
|
76
79
|
}
|
77
80
|
}
|
78
81
|
for (var property in next_state) {
|
@@ -80,8 +83,8 @@ module LucidMaterial
|
|
80
83
|
if (!this.state.hasOwnProperty(property)) { return true; };
|
81
84
|
if (next_state[property] !== null && typeof next_state[property]['$!='] !== "undefined" &&
|
82
85
|
this.state[property] !== null && typeof this.state[property]['$!='] !== "undefined") {
|
83
|
-
if (#{ !! (`next_state[property]` != `this.state[property]`) }) { return true }
|
84
|
-
} else if (next_state[property] !== this.state[property]) { return true }
|
86
|
+
if (#{ !! (`next_state[property]` != `this.state[property]`) }) { return true }
|
87
|
+
} else if (next_state[property] !== this.state[property]) { return true }
|
85
88
|
}
|
86
89
|
}
|
87
90
|
return false;
|
data/lib/react.rb
CHANGED
@@ -17,7 +17,7 @@ module React
|
|
17
17
|
self.lower_camelize = function(snake_cased_word) {
|
18
18
|
var parts = snake_cased_word.split('_');
|
19
19
|
var res = parts[0];
|
20
|
-
|
20
|
+
if (parts.length === 1) { return res; }
|
21
21
|
for (var i = 1; i < parts.length; i++) {
|
22
22
|
res += parts[i][0].toUpperCase() + parts[i].slice(1);
|
23
23
|
}
|
@@ -50,6 +50,7 @@ module React
|
|
50
50
|
if (typeof val.$$is_hash !== "undefined") { val = val.$to_n() }
|
51
51
|
result["style"] = val;
|
52
52
|
} else {
|
53
|
+
let key = keys[i];
|
53
54
|
result[Opal.React.lower_camelize(keys[i])] = ruby_style_props['$[]'](keys[i]);
|
54
55
|
}
|
55
56
|
}
|
@@ -59,11 +60,11 @@ module React
|
|
59
60
|
self.internal_prepare_args_and_render = function(component, args, block) {
|
60
61
|
if (args.length > 0) {
|
61
62
|
var last_arg = args[args.length - 1];
|
62
|
-
if (
|
63
|
+
if (last_arg && last_arg.constructor === String) {
|
63
64
|
if (args.length === 1) { return Opal.React.internal_render(component, null, last_arg, null); }
|
64
|
-
else {
|
65
|
-
} else {
|
66
|
-
} else {
|
65
|
+
else { Opal.React.internal_render(component, args[0], last_arg, null); }
|
66
|
+
} else { Opal.React.internal_render(component, args[0], null, block); }
|
67
|
+
} else { Opal.React.internal_render(component, null, null, block); }
|
67
68
|
};
|
68
69
|
|
69
70
|
self.internal_render = function(component, props, string_child, block) {
|
@@ -75,23 +76,19 @@ module React
|
|
75
76
|
children = string_child;
|
76
77
|
} else if (block && block !== nil) {
|
77
78
|
Opal.React.render_buffer.push([]);
|
79
|
+
// console.log("internal_render pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());
|
78
80
|
let block_result = block.$call();
|
79
|
-
|
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 &&
|
82
|
-
(typeof block_result === "string" || typeof block_result.$$typeof === "symbol" ||
|
83
|
-
(typeof block_result.constructor !== "undefined" && block_result.constructor === Array && (block_result.length - 1) >= 0 && block_result[block_result.length - 1] &&
|
84
|
-
block_result[block_result.length - 1] !== last_buffer_element && typeof block_result[block_result.length - 1].$$typeof === "symbol"))) {
|
81
|
+
if (block_result && (block_result.constructor === String || block_result.constructor === Number)) {
|
85
82
|
Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result);
|
86
83
|
}
|
84
|
+
// console.log("internal_render popping", Opal.React.render_buffer, Opal.React.render_buffer.toString());
|
87
85
|
children = Opal.React.render_buffer.pop();
|
88
|
-
if (children.length
|
89
|
-
else if (children.length
|
86
|
+
if (children.length === 1) { children = children[0]; }
|
87
|
+
else if (children.length === 0) { children = null; }
|
90
88
|
}
|
91
89
|
if (props && props !== nil) { native_props = Opal.React.to_native_react_props(props); }
|
92
90
|
react_element = Opal.global.React.createElement(component, native_props, children);
|
93
91
|
Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(react_element);
|
94
|
-
return react_element;
|
95
92
|
};
|
96
93
|
|
97
94
|
self.active_components = [];
|
@@ -134,27 +131,20 @@ module React
|
|
134
131
|
%x{
|
135
132
|
let component = null;
|
136
133
|
let native_props = null;
|
137
|
-
if (typeof type.react_component !== 'undefined') {
|
138
|
-
|
139
|
-
} else {
|
140
|
-
component = type;
|
141
|
-
}
|
142
|
-
|
143
|
-
Opal.React.render_buffer.push([]);
|
134
|
+
if (typeof type.react_component !== 'undefined') { component = type.react_component; }
|
135
|
+
else { component = type; }
|
144
136
|
if (block !== nil) {
|
137
|
+
Opal.React.render_buffer.push([]);
|
138
|
+
// console.log("create_element pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());
|
145
139
|
let block_result = block.$call()
|
146
|
-
|
147
|
-
let last_buffer_element = Opal.React.render_buffer[Opal.React.render_buffer.length - 1][last_buffer_length - 1];
|
148
|
-
if (block_result && block_result !== last_buffer_element && block_result !== nil &&
|
149
|
-
(typeof block_result === "string" || typeof block_result.$$typeof === "symbol" ||
|
150
|
-
(typeof block_result.constructor !== "undefined" && block_result.constructor === Array && (block_result.length - 1) >= 0 && block_result[block_result.length - 1] &&
|
151
|
-
block_result[block_result.length - 1] !== last_buffer_element && typeof block_result[block_result.length - 1].$$typeof === "symbol"))) {
|
140
|
+
if (block_result && (block_result.constructor === String || block_result.constructor === Number)) {
|
152
141
|
Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result);
|
153
142
|
}
|
143
|
+
// console.log("create_element popping", Opal.React.render_buffer, Opal.React.render_buffer.toString());
|
154
144
|
children = Opal.React.render_buffer.pop()
|
155
145
|
if (children.length == 1) { children = children[0]; }
|
156
146
|
else if (children.length == 0) { children = null; }
|
157
|
-
}
|
147
|
+
} else if (children === nil) { children = null; }
|
158
148
|
if (props && props !== nil) { native_props = Opal.React.to_native_react_props(props); }
|
159
149
|
return Opal.global.React.createElement(component, native_props, children);
|
160
150
|
}
|
data/lib/react/component/api.rb
CHANGED
@@ -63,6 +63,35 @@ module React
|
|
63
63
|
end
|
64
64
|
end
|
65
65
|
|
66
|
+
def get_react_element(arg, &block)
|
67
|
+
if block_given?
|
68
|
+
# execute block, fetch last element from buffer
|
69
|
+
%x{
|
70
|
+
let last_buffer_length = Opal.React.render_buffer[Opal.React.render_buffer.length - 1].length;
|
71
|
+
let last_buffer_element = Opal.React.render_buffer[Opal.React.render_buffer.length - 1][last_buffer_length - 1];
|
72
|
+
block.$call();
|
73
|
+
// console.log("get_react_element popping", Opal.React.render_buffer, Opal.React.render_buffer.toString())
|
74
|
+
let new_element = Opal.React.render_buffer[Opal.React.render_buffer.length - 1].pop();
|
75
|
+
if (last_buffer_element === new_element) { #{raise "Block did not create any React element!"} }
|
76
|
+
return new_element;
|
77
|
+
}
|
78
|
+
else
|
79
|
+
# element was rendered before being passed as arg
|
80
|
+
# fetch last element from buffer
|
81
|
+
# `console.log("get_react_element popping", Opal.React.render_buffer, Opal.React.render_buffer.toString())`
|
82
|
+
`Opal.React.render_buffer[Opal.React.render_buffer.length - 1].pop()`
|
83
|
+
end
|
84
|
+
end
|
85
|
+
alias gre get_react_element
|
86
|
+
|
87
|
+
def render_react_element(el)
|
88
|
+
# push el to buffer
|
89
|
+
`Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(el)`
|
90
|
+
# `console.log("render_react_element pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString())`
|
91
|
+
nil
|
92
|
+
end
|
93
|
+
alias rre render_react_element
|
94
|
+
|
66
95
|
def ref(name)
|
67
96
|
`#@native[name]`
|
68
97
|
end
|
@@ -77,4 +106,4 @@ module React
|
|
77
106
|
end
|
78
107
|
end
|
79
108
|
end
|
80
|
-
end
|
109
|
+
end
|
@@ -9,7 +9,11 @@ module React
|
|
9
9
|
event_handlers << name
|
10
10
|
%x{
|
11
11
|
self.react_component.prototype[name] = function(event, info) {
|
12
|
-
|
12
|
+
if (typeof event === "object") {
|
13
|
+
#{ruby_event = ::React::SyntheticEvent.new(`event`)};
|
14
|
+
} else {
|
15
|
+
#{ruby_event = `event`};
|
16
|
+
}
|
13
17
|
#{`this.__ruby_instance`.instance_exec(ruby_event, `info`, &block)};
|
14
18
|
}
|
15
19
|
}
|
@@ -15,20 +15,19 @@ module React
|
|
15
15
|
end
|
16
16
|
%x{
|
17
17
|
Opal.React.render_buffer.push([]);
|
18
|
+
// console.log("portal pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());
|
18
19
|
if (block !== nil) {
|
19
20
|
let block_result = block.$call()
|
20
21
|
let last_buffer_length = Opal.React.render_buffer[Opal.React.render_buffer.length - 1].length;
|
21
22
|
let last_buffer_element = Opal.React.render_buffer[Opal.React.render_buffer.length - 1][last_buffer_length - 1];
|
22
|
-
if (block_result && block_result
|
23
|
-
(typeof block_result === "string" || typeof block_result.$$typeof === "symbol" ||
|
24
|
-
(typeof block_result.constructor !== "undefined" && block_result.constructor === Array && (block_result.length - 1) >= 0 && block_result[block_result.length - 1] &&
|
25
|
-
block_result[block_result.length - 1] !== last_buffer_element && typeof block_result[block_result.length - 1].$$typeof === "symbol"))) {
|
23
|
+
if (block_result && (block_result.constructor === String || block_result.constructor === Number)) {
|
26
24
|
Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result);
|
27
25
|
}
|
28
26
|
}
|
27
|
+
// console.log("portal popping", Opal.React.render_buffer, Opal.React.render_buffer.toString());
|
29
28
|
var react_element = Opal.global.React.createPortal(Opal.React.render_buffer.pop(), element);
|
30
29
|
Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(react_element);
|
31
|
-
|
30
|
+
// console.log("portal pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());
|
32
31
|
}
|
33
32
|
end
|
34
33
|
|
@@ -39,8 +39,11 @@ module React
|
|
39
39
|
}
|
40
40
|
render() {
|
41
41
|
Opal.React.render_buffer.push([]);
|
42
|
+
// console.log("react component pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());
|
42
43
|
Opal.React.active_components.push(this);
|
43
|
-
#{`this.__ruby_instance`.instance_exec(&`base.render_block`)};
|
44
|
+
let block_result = #{`this.__ruby_instance`.instance_exec(&`base.render_block`)};
|
45
|
+
if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result); }
|
46
|
+
// console.log("react component popping", Opal.React.render_buffer, Opal.React.render_buffer.toString());
|
44
47
|
Opal.React.active_components.pop();
|
45
48
|
return Opal.React.render_buffer.pop();
|
46
49
|
}
|
@@ -58,14 +61,14 @@ module React
|
|
58
61
|
|
59
62
|
for (var property in next_props) {
|
60
63
|
if (next_props.hasOwnProperty(property)) {
|
61
|
-
if (!this.props.hasOwnProperty(property)) { return true; }
|
64
|
+
if (!this.props.hasOwnProperty(property)) { return true; }
|
62
65
|
if (property == "children") { if (next_props.children !== this.props.children) { return true; }}
|
63
66
|
else if (typeof next_props[property] !== "undefined" && next_props[property] !== null &&
|
64
67
|
typeof next_props[property]['$!='] !== "undefined" &&
|
65
68
|
typeof this.props[property] !== "undefined" && this.props[property] !== null &&
|
66
69
|
typeof this.props[property]['$!='] !== "undefined") {
|
67
|
-
if (#{ !! (`next_props[property]` != `this.props[property]`) }) { return true; }
|
68
|
-
} else if (next_props[property] !== this.props[property]) { return true; }
|
70
|
+
if (#{ !! (`next_props[property]` != `this.props[property]`) }) { return true; }
|
71
|
+
} else if (next_props[property] !== this.props[property]) { return true; }
|
69
72
|
}
|
70
73
|
}
|
71
74
|
for (var property in next_state) {
|
@@ -73,8 +76,8 @@ module React
|
|
73
76
|
if (!this.state.hasOwnProperty(property)) { return true; };
|
74
77
|
if (next_state[property] !== null && typeof next_state[property]['$!='] !== "undefined" &&
|
75
78
|
this.state[property] !== null && typeof this.state[property]['$!='] !== "undefined") {
|
76
|
-
if (#{ !! (`next_state[property]` != `this.state[property]`) }) { return true }
|
77
|
-
} else if (next_state[property] !== this.state[property]) { return true }
|
79
|
+
if (#{ !! (`next_state[property]` != `this.state[property]`) }) { return true }
|
80
|
+
} else if (next_state[property] !== this.state[property]) { return true }
|
78
81
|
}
|
79
82
|
}
|
80
83
|
return false;
|
@@ -5,9 +5,11 @@ module React
|
|
5
5
|
|
6
6
|
def method_missing(prop, *args, &block)
|
7
7
|
%x{
|
8
|
-
|
9
|
-
|
10
|
-
|
8
|
+
if (typeof #@native.props[prop] === 'undefined') {
|
9
|
+
prop = Opal.React.lower_camelize(prop);
|
10
|
+
if (typeof #@native.props[prop] === 'undefined') { return #{nil}; }
|
11
|
+
}
|
12
|
+
return #@native.props[prop];
|
11
13
|
}
|
12
14
|
end
|
13
15
|
|
@@ -25,8 +27,8 @@ module React
|
|
25
27
|
|
26
28
|
# for router convenience
|
27
29
|
def history
|
28
|
-
return nil
|
29
|
-
if
|
30
|
+
return nil if `typeof #@native.props.history === 'undefined'`
|
31
|
+
if `typeof #@native.props.history.pathname !== 'undefined'`
|
30
32
|
React::Component::History.new(@native.JS[:props].JS[:history])
|
31
33
|
else
|
32
34
|
@native.JS[:props].JS[:history]
|
@@ -34,8 +36,8 @@ module React
|
|
34
36
|
end
|
35
37
|
|
36
38
|
def location
|
37
|
-
return nil
|
38
|
-
if
|
39
|
+
return nil if `typeof #@native.props.location === 'undefined'`
|
40
|
+
if `typeof #@native.props.location.pathname !== 'undefined'`
|
39
41
|
React::Component::Location.new(@native.JS[:props].JS[:location])
|
40
42
|
else
|
41
43
|
@native.JS[:props].JS[:location]
|
@@ -43,8 +45,8 @@ module React
|
|
43
45
|
end
|
44
46
|
|
45
47
|
def match
|
46
|
-
return nil
|
47
|
-
if
|
48
|
+
return nil if `typeof #@native.props.match === 'undefined'`
|
49
|
+
if `typeof #@native.props.match.path !== 'undefined'`
|
48
50
|
React::Component::Match.new(@native.JS[:props].JS[:match])
|
49
51
|
else
|
50
52
|
@native.JS[:props].JS[:match]
|
@@ -13,7 +13,7 @@ module React
|
|
13
13
|
@native.JS.setState(new_state, `null`)
|
14
14
|
end
|
15
15
|
else
|
16
|
-
return nil if `typeof #@native.state[key]
|
16
|
+
return nil if `typeof #@native.state[key] === "undefined"`
|
17
17
|
@native.JS[:state].JS[key]
|
18
18
|
end
|
19
19
|
end
|
@@ -49,4 +49,4 @@ module React
|
|
49
49
|
end
|
50
50
|
end
|
51
51
|
end
|
52
|
-
end
|
52
|
+
end
|
@@ -7,36 +7,34 @@ module React
|
|
7
7
|
end
|
8
8
|
|
9
9
|
def Consumer(*args, &block)
|
10
|
+
# why not use internal_prepare_args and render?
|
10
11
|
%x{
|
11
|
-
let children = null;
|
12
12
|
let props = null;
|
13
13
|
|
14
14
|
if (args.length > 0) { props = Opal.React.to_native_react_props(args[0]); }
|
15
15
|
|
16
16
|
let react_element = Opal.global.React.createElement(this.native.Consumer, props, function(value) {
|
17
|
+
let children = null;
|
17
18
|
if (block !== nil) {
|
18
19
|
Opal.React.render_buffer.push([]);
|
20
|
+
// console.log("consumer pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());
|
19
21
|
let block_result = block.$call();
|
20
|
-
|
21
|
-
let last_buffer_element = Opal.React.render_buffer[Opal.React.render_buffer.length - 1][last_buffer_length - 1];
|
22
|
-
if (block_result && block_result !== last_buffer_element && block_result !== nil &&
|
23
|
-
(typeof block_result === "string" || typeof block_result.$$typeof === "symbol" ||
|
24
|
-
(typeof block_result.constructor !== "undefined" && block_result.constructor === Array && (block_result.length - 1) >= 0 && block_result[block_result.length - 1] &&
|
25
|
-
block_result[block_result.length - 1] !== last_buffer_element && typeof block_result[block_result.length - 1].$$typeof === "symbol"))) {
|
22
|
+
if (block_result && (block_result.constructor === String || block_result.constructor === Number)) {
|
26
23
|
Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result);
|
27
24
|
}
|
25
|
+
// console.log("consumer popping", Opal.React.render_buffer, Opal.React.render_buffer.toString());
|
28
26
|
children = Opal.React.render_buffer.pop();
|
29
27
|
if (children.length == 1) { children = children[0]; }
|
30
28
|
else if (children.length == 0) { children = null; }
|
31
29
|
}
|
32
|
-
return
|
30
|
+
return children;
|
33
31
|
});
|
34
32
|
Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(react_element);
|
35
|
-
return null;
|
36
33
|
}
|
37
34
|
end
|
38
35
|
|
39
36
|
def Provider(*args, &block)
|
37
|
+
# why not use internal_prepare_args and render?
|
40
38
|
%x{
|
41
39
|
var props = null;
|
42
40
|
if (args.length > 0) { props = Opal.React.to_native_react_props(args[0]); }
|
@@ -58,6 +58,35 @@ module React
|
|
58
58
|
`[initial, setter] = Opal.global.React.useState(initial_value);`
|
59
59
|
[initial, proc { |arg| `setter(arg)` }]
|
60
60
|
end
|
61
|
+
|
62
|
+
def get_react_element(arg, &block)
|
63
|
+
if block_given?
|
64
|
+
# execute block, fetch last element from buffer
|
65
|
+
%x{
|
66
|
+
let last_buffer_length = Opal.React.render_buffer[Opal.React.render_buffer.length - 1].length;
|
67
|
+
let last_buffer_element = Opal.React.render_buffer[Opal.React.render_buffer.length - 1][last_buffer_length - 1];
|
68
|
+
block.$call();
|
69
|
+
// console.log("get_react_element popping", Opal.React.render_buffer, Opal.React.render_buffer.toString())
|
70
|
+
let new_element = Opal.React.render_buffer[Opal.React.render_buffer.length - 1].pop();
|
71
|
+
if (last_buffer_element === new_element) { #{raise "Block did not create any React element!"} }
|
72
|
+
return new_element;
|
73
|
+
}
|
74
|
+
else
|
75
|
+
# element was rendered before being passed as arg
|
76
|
+
# fetch last element from buffer
|
77
|
+
# `console.log("get_react_element popping", Opal.React.render_buffer, Opal.React.render_buffer.toString())`
|
78
|
+
`Opal.React.render_buffer[Opal.React.render_buffer.length - 1].pop()`
|
79
|
+
end
|
80
|
+
end
|
81
|
+
alias gre get_react_element
|
82
|
+
|
83
|
+
def render_react_element(el)
|
84
|
+
# push el to buffer
|
85
|
+
`Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(el)`
|
86
|
+
# `console.log("render_react_element pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString())`
|
87
|
+
nil
|
88
|
+
end
|
89
|
+
alias rre render_react_element
|
61
90
|
end
|
62
91
|
end
|
63
92
|
end
|
@@ -5,9 +5,12 @@ module React
|
|
5
5
|
%x{
|
6
6
|
base.react_component = function(props) {
|
7
7
|
Opal.React.render_buffer.push([]);
|
8
|
+
// console.log("function pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());
|
8
9
|
Opal.React.active_components.push(base);
|
9
|
-
#{base.new(`props`).instance_exec(&`base.function_block`)};
|
10
|
+
let block_result = #{base.new(`props`).instance_exec(&`base.function_block`)};
|
11
|
+
if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result); }
|
10
12
|
Opal.React.active_components.pop();
|
13
|
+
// console.log("function popping", Opal.React.render_buffer, Opal.React.render_buffer.toString());
|
11
14
|
return Opal.React.render_buffer.pop();
|
12
15
|
}
|
13
16
|
}
|
@@ -3,7 +3,11 @@ module React
|
|
3
3
|
module EventHandler
|
4
4
|
def event_handler(name, &block)
|
5
5
|
define_method(name) do |event, info|
|
6
|
-
ruby_event =
|
6
|
+
ruby_event = if `typeof event === "object"`
|
7
|
+
::React::SyntheticEvent.new(event)
|
8
|
+
else
|
9
|
+
event
|
10
|
+
end
|
7
11
|
block.call(ruby_event, info)
|
8
12
|
end
|
9
13
|
`self[name] = self.prototype['$' + name]`
|
@@ -6,9 +6,12 @@ module React
|
|
6
6
|
base.equality_checker = null;
|
7
7
|
base.react_component = Opal.global.React.memo(function(props) {
|
8
8
|
Opal.React.render_buffer.push([]);
|
9
|
+
// console.log("memo pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());
|
9
10
|
Opal.React.active_components.push(base);
|
10
|
-
#{base.new(`props`).instance_exec(&`base.function_block`)};
|
11
|
+
let block_result = #{base.new(`props`).instance_exec(&`base.function_block`)};
|
12
|
+
if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result); }
|
11
13
|
Opal.React.active_components.pop();
|
14
|
+
// console.log("memo popping", Opal.React.render_buffer, Opal.React.render_buffer.toString());
|
12
15
|
return Opal.React.render_buffer.pop();
|
13
16
|
}, base.equality_checker);
|
14
17
|
}
|
data/lib/react/version.rb
CHANGED
data/lib/react_dom.rb
CHANGED
@@ -11,26 +11,20 @@ module ReactDOM
|
|
11
11
|
|
12
12
|
def hydrate(native_react_element, container, &block)
|
13
13
|
# container is a native DOM element
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
end
|
20
|
-
`Opal.React.render_buffer.pop()`
|
21
|
-
result
|
14
|
+
if block_given?
|
15
|
+
`Opal.global.ReactDOM.hydrate(native_react_element, container, function() { block.$call() })`
|
16
|
+
else
|
17
|
+
`Opal.global.ReactDOM.hydrate(native_react_element, container)`
|
18
|
+
end
|
22
19
|
end
|
23
20
|
|
24
21
|
def render(native_react_element, container, &block)
|
25
22
|
# container is a native DOM element
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
end
|
32
|
-
`Opal.React.render_buffer.pop()`
|
33
|
-
result
|
23
|
+
if block_given?
|
24
|
+
`Opal.global.ReactDOM.render(native_react_element, container, function() { block.$call() })`
|
25
|
+
else
|
26
|
+
`Opal.global.ReactDOM.render(native_react_element, container)`
|
27
|
+
end
|
34
28
|
end
|
35
29
|
|
36
30
|
def unmount_component_at_node(element_or_query)
|
@@ -44,4 +38,4 @@ module ReactDOM
|
|
44
38
|
`Opal.global.ReactDOM.unmountComponentAtNode(element)`
|
45
39
|
end
|
46
40
|
end
|
47
|
-
end
|
41
|
+
end
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: isomorfeus-react
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 16.10.
|
4
|
+
version: 16.10.5
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Jan Biedermann
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2019-10-
|
11
|
+
date: 2019-10-07 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: oj
|
@@ -232,8 +232,6 @@ files:
|
|
232
232
|
- lib/react/memo_component/creator.rb
|
233
233
|
- lib/react/memo_component/mixin.rb
|
234
234
|
- lib/react/native_constant_wrapper.rb
|
235
|
-
- lib/react/pure_component/base.rb
|
236
|
-
- lib/react/pure_component/mixin.rb
|
237
235
|
- lib/react/ref.rb
|
238
236
|
- lib/react/synthetic_event.rb
|
239
237
|
- lib/react/version.rb
|
@@ -1,18 +0,0 @@
|
|
1
|
-
module React
|
2
|
-
module PureComponent
|
3
|
-
module Mixin
|
4
|
-
def self.included(base)
|
5
|
-
base.include(::Native::Wrapper)
|
6
|
-
base.extend(::React::Component::NativeComponentConstructor)
|
7
|
-
base.extend(::LucidPropDeclaration::Mixin)
|
8
|
-
base.extend(::React::Component::EventHandler)
|
9
|
-
base.include(::React::Component::Elements)
|
10
|
-
base.include(::React::Component::API)
|
11
|
-
base.include(::React::Component::Callbacks)
|
12
|
-
base.include(::React::Component::Initializer)
|
13
|
-
base.include(::React::Component::Features)
|
14
|
-
base.include(::React::Component::Resolution)
|
15
|
-
end
|
16
|
-
end
|
17
|
-
end
|
18
|
-
end
|