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
@@ -1,77 +1,31 @@
|
|
1
1
|
module React
|
2
2
|
module FunctionComponent
|
3
|
-
|
4
|
-
def self.
|
3
|
+
module Creator
|
4
|
+
def self.extended(base)
|
5
5
|
%x{
|
6
|
-
|
7
|
-
#{ruby_event = ::React::SyntheticEvent.new(`event`)};
|
8
|
-
#{React::FunctionComponent::Runner.new(`{}`).instance_exec(ruby_event, `info`, &block)};
|
9
|
-
}
|
10
|
-
}
|
11
|
-
end
|
12
|
-
|
13
|
-
def self.function_component(component_name, &block)
|
14
|
-
%x{
|
15
|
-
var fun = function(props) {
|
6
|
+
base.react_component = function(props) {
|
16
7
|
Opal.React.render_buffer.push([]);
|
17
|
-
Opal.React.active_components.push(
|
18
|
-
#{
|
8
|
+
Opal.React.active_components.push(base);
|
9
|
+
#{base.new(`props`).instance_exec(&`base.function_block`)};
|
19
10
|
Opal.React.active_components.pop();
|
20
11
|
return Opal.React.render_buffer.pop();
|
21
12
|
}
|
22
|
-
var const_names;
|
23
|
-
if (component_name.includes('.')) {
|
24
|
-
const_names = component_name.split('.');
|
25
|
-
} else {
|
26
|
-
const_names = [component_name];
|
27
|
-
}
|
28
|
-
var const_last = const_names.length - 1;
|
29
|
-
const_names.reduce(function(prev, curr) {
|
30
|
-
if (prev && prev[curr]) {
|
31
|
-
return prev[curr];
|
32
|
-
} else {
|
33
|
-
if (const_names.indexOf(curr) === const_last) {
|
34
|
-
prev[curr] = fun;
|
35
|
-
return prev[curr];
|
36
|
-
} else {
|
37
|
-
prev[curr] = {};
|
38
|
-
return prev[curr];
|
39
|
-
}
|
40
|
-
}
|
41
|
-
}, Opal.global);
|
42
13
|
}
|
43
|
-
end
|
44
14
|
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
Opal.React.
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
}
|
60
|
-
var const_last = const_names.length - 1;
|
61
|
-
const_names.reduce(function(prev, curr) {
|
62
|
-
if (prev && prev[curr]) {
|
63
|
-
return prev[curr];
|
64
|
-
} else {
|
65
|
-
if (const_names.indexOf(curr) === const_last) {
|
66
|
-
prev[curr] = fun;
|
67
|
-
return prev[curr];
|
68
|
-
} else {
|
69
|
-
prev[curr] = {};
|
70
|
-
return prev[curr];
|
71
|
-
}
|
72
|
-
}
|
73
|
-
}, Opal.global);
|
74
|
-
}
|
15
|
+
base_module = base.to_s.deconstantize
|
16
|
+
if base_module != ''
|
17
|
+
base_module.constantize.define_singleton_method(base.to_s.demodulize) do |*args, &block|
|
18
|
+
`Opal.React.internal_prepare_args_and_render(#{base}.react_component, args, block)`
|
19
|
+
end
|
20
|
+
else
|
21
|
+
Object.define_method(base.to_s) do |*args, &block|
|
22
|
+
`Opal.React.internal_prepare_args_and_render(#{base}.react_component, args, block)`
|
23
|
+
end
|
24
|
+
end
|
25
|
+
|
26
|
+
def create_function(&block)
|
27
|
+
`base.function_block = #{block}`
|
28
|
+
end
|
75
29
|
end
|
76
30
|
end
|
77
31
|
end
|
@@ -0,0 +1,13 @@
|
|
1
|
+
module React
|
2
|
+
module FunctionComponent
|
3
|
+
module EventHandler
|
4
|
+
def event_handler(name, &block)
|
5
|
+
define_method(name) do |event, info|
|
6
|
+
ruby_event = ::React::SyntheticEvent.new(event)
|
7
|
+
block.call(ruby_event, info)
|
8
|
+
end
|
9
|
+
`self[name] = self.prototype['$' + name]`
|
10
|
+
end
|
11
|
+
end
|
12
|
+
end
|
13
|
+
end
|
@@ -0,0 +1,14 @@
|
|
1
|
+
module React
|
2
|
+
module FunctionComponent
|
3
|
+
module Mixin
|
4
|
+
def self.included(base)
|
5
|
+
base.include(::React::Component::Elements)
|
6
|
+
base.include(::React::Component::Features)
|
7
|
+
base.include(::React::FunctionComponent::API)
|
8
|
+
base.include(::React::FunctionComponent::Resolution)
|
9
|
+
base.extend(::React::FunctionComponent::EventHandler)
|
10
|
+
base.extend(::React::FunctionComponent::Creator)
|
11
|
+
end
|
12
|
+
end
|
13
|
+
end
|
14
|
+
end
|
@@ -3,7 +3,7 @@ module React
|
|
3
3
|
module Resolution
|
4
4
|
def self.included(base)
|
5
5
|
base.instance_exec do
|
6
|
-
alias
|
6
|
+
alias _react_function_component_resolution_original_const_missing const_missing
|
7
7
|
|
8
8
|
def const_missing(const_name)
|
9
9
|
# language=JS
|
@@ -13,14 +13,14 @@ module React
|
|
13
13
|
#{Object.const_set(const_name, `new_const`)};
|
14
14
|
return new_const;
|
15
15
|
} else {
|
16
|
-
return #{
|
16
|
+
return #{_react_function_component_resolution_original_const_missing(const_name)};
|
17
17
|
}
|
18
18
|
}
|
19
19
|
end
|
20
20
|
end
|
21
21
|
end
|
22
22
|
|
23
|
-
alias
|
23
|
+
alias _react_function_component_resolution_original_method_missing method_missing
|
24
24
|
|
25
25
|
def method_missing(component_name, *args, &block)
|
26
26
|
# html tags are defined as methods, so they will not end up here.
|
@@ -37,8 +37,7 @@ module React
|
|
37
37
|
else {
|
38
38
|
try {
|
39
39
|
var constant = self.$class().$const_get(component_name, true);
|
40
|
-
|
41
|
-
if (component_type === "function" || component_type === "object") {
|
40
|
+
if (typeof constant.react_component !== 'undefined') {
|
42
41
|
component = constant.react_component;
|
43
42
|
}
|
44
43
|
}
|
@@ -46,20 +45,23 @@ module React
|
|
46
45
|
component = null;
|
47
46
|
}
|
48
47
|
}
|
48
|
+
if (!component) {
|
49
|
+
try {
|
50
|
+
constant = Opal.Object.$const_get(component_name);
|
51
|
+
if (typeof constant.react_component !== 'undefined') {
|
52
|
+
component = constant.react_component;
|
53
|
+
}
|
54
|
+
} catch(err) {
|
55
|
+
component = null
|
56
|
+
}
|
57
|
+
}
|
49
58
|
if (component) {
|
50
|
-
|
51
|
-
var last_arg = args[args.length - 1];
|
52
|
-
if (typeof last_arg === 'string' || last_arg instanceof String) {
|
53
|
-
if (args.length === 1) { Opal.React.internal_render(component, null, last_arg, null); }
|
54
|
-
else { Opal.React.internal_render(component, args[0], last_arg, null); }
|
55
|
-
} else { Opal.React.internal_render(component, args[0], null, block); }
|
56
|
-
} else { Opal.React.internal_render(component, null, null, block); }
|
59
|
+
Opal.React.internal_prepare_args_and_render(component, args, block);
|
57
60
|
} else {
|
58
|
-
return #{
|
61
|
+
return #{_react_function_component_resolution_original_method_missing(component_name, *args, block)};
|
59
62
|
}
|
60
63
|
}
|
61
64
|
end
|
62
|
-
|
63
65
|
end
|
64
66
|
end
|
65
|
-
end
|
67
|
+
end
|
@@ -0,0 +1,32 @@
|
|
1
|
+
module React
|
2
|
+
module MemoComponent
|
3
|
+
module Creator
|
4
|
+
def self.extended(base)
|
5
|
+
%x{
|
6
|
+
base.equality_checker = null;
|
7
|
+
base.react_component = Opal.global.React.memo(function(props) {
|
8
|
+
Opal.React.render_buffer.push([]);
|
9
|
+
Opal.React.active_components.push(base);
|
10
|
+
#{base.new(`props`).instance_exec(&`base.function_block`)};
|
11
|
+
Opal.React.active_components.pop();
|
12
|
+
return Opal.React.render_buffer.pop();
|
13
|
+
}, base.equality_checker);
|
14
|
+
}
|
15
|
+
|
16
|
+
def props_are_equal?(&block)
|
17
|
+
%x{
|
18
|
+
base.equality_checker = function (prev_props, next_props) {
|
19
|
+
var prev_ruby_props = Opal.React.Component.Props.$new(prev_props);
|
20
|
+
var next_ruby_props = Opal.React.Component.Props.$new(next_props);
|
21
|
+
return #{base.new(`{}`).instance_exec(`prev_ruby_props`, `next_ruby_props`, &block)};
|
22
|
+
}
|
23
|
+
}
|
24
|
+
end
|
25
|
+
|
26
|
+
def create_memo(&block)
|
27
|
+
`base.function_block = #{block}`
|
28
|
+
end
|
29
|
+
end
|
30
|
+
end
|
31
|
+
end
|
32
|
+
end
|
@@ -0,0 +1,14 @@
|
|
1
|
+
module React
|
2
|
+
module MemoComponent
|
3
|
+
module Mixin
|
4
|
+
def self.included(base)
|
5
|
+
base.include(::React::Component::Elements)
|
6
|
+
base.include(::React::Component::Features)
|
7
|
+
base.include(::React::FunctionComponent::API)
|
8
|
+
base.include(::React::FunctionComponent::Resolution)
|
9
|
+
base.extend(::React::FunctionComponent::EventHandler)
|
10
|
+
base.extend(::React::MemoComponent::Creator)
|
11
|
+
end
|
12
|
+
end
|
13
|
+
end
|
14
|
+
end
|
@@ -15,22 +15,12 @@ module React
|
|
15
15
|
if (component_type === "function" || component_type === "object") {
|
16
16
|
component = #@native[name];
|
17
17
|
}
|
18
|
-
|
19
18
|
if (component) {
|
20
|
-
|
21
|
-
var block_result = null;
|
22
|
-
if (args.length > 0) {
|
23
|
-
var last_arg = args[args.length - 1];
|
24
|
-
if (typeof last_arg === 'string' || last_arg instanceof String) {
|
25
|
-
if (args.length === 1) { Opal.React.internal_render(component, null, last_arg, null); }
|
26
|
-
else { Opal.React.internal_render(component, args[0], last_arg, null); }
|
27
|
-
} else { Opal.React.internal_render(component, args[0], null, block); }
|
28
|
-
} else { Opal.React.internal_render(component, null, null, block); }
|
19
|
+
Opal.React.internal_prepare_args_and_render(component, args, block);
|
29
20
|
} else {
|
30
21
|
#{raise NameError, "No such native Component #@const_name.#{name}"};
|
31
22
|
}
|
32
23
|
}
|
33
24
|
end
|
34
|
-
|
35
25
|
end
|
36
26
|
end
|
@@ -8,6 +8,8 @@ module React
|
|
8
8
|
base.extend(::React::Component::EventHandler)
|
9
9
|
base.include(::React::Component::Elements)
|
10
10
|
base.include(::React::Component::API)
|
11
|
+
base.include(::React::Component::Callbacks)
|
12
|
+
base.include(::React::Component::UnsafeAPI)
|
11
13
|
base.include(::React::Component::Initializer)
|
12
14
|
base.include(::React::Component::Features)
|
13
15
|
base.include(::React::Component::Resolution)
|
@@ -21,7 +21,7 @@ module React
|
|
21
21
|
|
22
22
|
def app_store
|
23
23
|
@default_app_store_defined = true
|
24
|
-
@default_app_store ||= ::React::ReduxComponent::AppStoreDefaults.new(state)
|
24
|
+
@default_app_store ||= ::React::ReduxComponent::AppStoreDefaults.new(state, self.to_s)
|
25
25
|
end
|
26
26
|
|
27
27
|
def class_store
|
@@ -33,98 +33,6 @@ module React
|
|
33
33
|
@default_instance_store_defined = true
|
34
34
|
@default_class_store ||= ::React::ReduxComponent::ComponentInstanceStoreDefaults.new(state, self.to_s)
|
35
35
|
end
|
36
|
-
|
37
|
-
def component_did_catch(&block)
|
38
|
-
# TODO convert error and info
|
39
|
-
%x{
|
40
|
-
var fun = function(error, info) {
|
41
|
-
Opal.React.active_redux_components.push(this.__ruby_instance);
|
42
|
-
#{`this.__ruby_instance`.instance_exec(error, info, &block)};
|
43
|
-
Opal.React.active_redux_components.pop();
|
44
|
-
}
|
45
|
-
if (self.lucid_react_component) { self.lucid_react_component.prototype.componentDidCatch = fun; }
|
46
|
-
else { self.react_component.prototype.componentDidCatch = fun; }
|
47
|
-
}
|
48
|
-
end
|
49
|
-
|
50
|
-
def component_did_mount(&block)
|
51
|
-
%x{
|
52
|
-
var fun = function() {
|
53
|
-
Opal.React.active_redux_components.push(this.__ruby_instance);
|
54
|
-
#{`this.__ruby_instance`.instance_exec(&block)};
|
55
|
-
Opal.React.active_redux_components.pop();
|
56
|
-
}
|
57
|
-
if (self.lucid_react_component) { self.lucid_react_component.prototype.componentDidMount = fun; }
|
58
|
-
else { self.react_component.prototype.componentDidMount = fun; }
|
59
|
-
}
|
60
|
-
end
|
61
|
-
|
62
|
-
def component_did_update(&block)
|
63
|
-
%x{
|
64
|
-
var fun = function() {
|
65
|
-
Opal.React.active_redux_components.push(this.__ruby_instance);
|
66
|
-
#{`this.__ruby_instance`.instance_exec(&block)};
|
67
|
-
Opal.React.active_redux_components.pop();
|
68
|
-
}
|
69
|
-
if (self.lucid_react_component) { self.lucid_react_component.prototype.componentDidUpdate = fun; }
|
70
|
-
else { self.react_component.prototype.componentDidUpdate = fun; }
|
71
|
-
}
|
72
|
-
end
|
73
|
-
|
74
|
-
def component_will_unmount(&block)
|
75
|
-
# unsubscriber support for ReduxComponent
|
76
|
-
%x{
|
77
|
-
var fun = function() {
|
78
|
-
if (typeof this.unsubscriber === "function") { this.unsubscriber(); };
|
79
|
-
Opal.React.active_redux_components.push(this.__ruby_instance);
|
80
|
-
#{`this.__ruby_instance`.instance_exec(&block)};
|
81
|
-
Opal.React.active_redux_components.pop();
|
82
|
-
}
|
83
|
-
if (self.lucid_react_component) { self.lucid_react_component.prototype.componentWillUnmount = fun; }
|
84
|
-
else { self.react_component.prototype.componentWillUnmount = fun; }
|
85
|
-
}
|
86
|
-
end
|
87
|
-
|
88
|
-
def get_derived_state_from_props(&block)
|
89
|
-
%x{
|
90
|
-
var fun = function(props, state) {
|
91
|
-
Opal.React.active_redux_components.push(this.__ruby_instance);
|
92
|
-
#{`this.__ruby_instance`.instance_exec(React::Component::Props.new(`props`), `Opal.Hash.$new(state)`, &block)};
|
93
|
-
Opal.React.active_redux_components.pop();
|
94
|
-
}
|
95
|
-
if (self.lucid_react_component) { self.lucid_react_component.prototype.getDerivedStateFromProps = fun; }
|
96
|
-
else { self.react_component.prototype.getDerivedStateFromProps = fun; }
|
97
|
-
}
|
98
|
-
end
|
99
|
-
|
100
|
-
def get_snapshot_before_update(&block)
|
101
|
-
%x{
|
102
|
-
var fun = function(prev_props, prev_state) {
|
103
|
-
Opal.React.active_redux_components.push(this.__ruby_instance);
|
104
|
-
#{`this.__ruby_instance`.instance_exec(React::Component::Props.new(`prev_props`), `Opal.Hash.$new(prev_state)`, &block)};
|
105
|
-
Opal.React.active_redux_components.pop();
|
106
|
-
}
|
107
|
-
if (self.lucid_react_component) { self.lucid_react_component.prototype.getSnapshotBeforeUpdate = fun; }
|
108
|
-
else { self.react_component.prototype.getSnapshotBeforeUpdate = fun; }
|
109
|
-
}
|
110
|
-
end
|
111
|
-
|
112
|
-
def render(&block)
|
113
|
-
%x{
|
114
|
-
var fun = function() {
|
115
|
-
Opal.React.render_buffer.push([]);
|
116
|
-
Opal.React.active_components.push(this);
|
117
|
-
Opal.React.active_redux_components.push(this);
|
118
|
-
this.used_store_paths = [];
|
119
|
-
#{`this.__ruby_instance`.instance_exec(&block)};
|
120
|
-
Opal.React.active_redux_components.pop();
|
121
|
-
Opal.React.active_components.pop();
|
122
|
-
return Opal.React.render_buffer.pop();
|
123
|
-
}
|
124
|
-
if (self.lucid_react_component) { self.lucid_react_component.prototype.render = fun; }
|
125
|
-
else { self.react_component.prototype.render = fun; }
|
126
|
-
}
|
127
|
-
end
|
128
36
|
end
|
129
37
|
end
|
130
38
|
end
|
@@ -3,11 +3,11 @@ module React
|
|
3
3
|
module Initializer
|
4
4
|
def initialize(native_component)
|
5
5
|
@native = native_component
|
6
|
-
@app_store =
|
7
|
-
@class_store =
|
8
|
-
@props =
|
9
|
-
@state =
|
10
|
-
@store =
|
6
|
+
@app_store = `Opal.React.ReduxComponent.AppStoreProxy.$new(#{self})`
|
7
|
+
@class_store = `Opal.React.ReduxComponent.ClassStoreProxy.$new(#{self})`
|
8
|
+
@props = `Opal.React.Component.Props.$new(#@native.props)`
|
9
|
+
@state = `Opal.React.Component.State.$new(#@native)`
|
10
|
+
@store = `Opal.React.ReduxComponent.InstanceStoreProxy.$new(#{self})`
|
11
11
|
end
|
12
12
|
end
|
13
13
|
end
|
@@ -8,6 +8,7 @@ module React
|
|
8
8
|
base.extend(::React::Component::EventHandler)
|
9
9
|
base.include(::React::Component::Elements)
|
10
10
|
base.include(::React::Component::API)
|
11
|
+
base.include(::React::Component::Callbacks)
|
11
12
|
base.include(::React::ReduxComponent::API)
|
12
13
|
base.include(::React::ReduxComponent::Initializer)
|
13
14
|
base.include(::React::Component::Features)
|
@@ -47,12 +47,22 @@ module React
|
|
47
47
|
this.listener = this.listener.bind(this);
|
48
48
|
this.unsubscriber = Opal.Isomorfeus.store.native.subscribe(this.listener);
|
49
49
|
}
|
50
|
-
data_access() {
|
51
|
-
return this.state.isomorfeus_store
|
52
|
-
}
|
53
50
|
static get displayName() {
|
54
51
|
return #{component_name};
|
55
52
|
}
|
53
|
+
render() {
|
54
|
+
Opal.React.render_buffer.push([]);
|
55
|
+
Opal.React.active_components.push(this);
|
56
|
+
Opal.React.active_redux_components.push(this);
|
57
|
+
this.used_store_paths = [];
|
58
|
+
#{`this.__ruby_instance`.instance_exec(&`base.render_block`)};
|
59
|
+
Opal.React.active_redux_components.pop();
|
60
|
+
Opal.React.active_components.pop();
|
61
|
+
return Opal.React.render_buffer.pop();
|
62
|
+
}
|
63
|
+
data_access() {
|
64
|
+
return this.state.isomorfeus_store
|
65
|
+
}
|
56
66
|
listener() {
|
57
67
|
var next_state = Object.assign({}, this.state, { isomorfeus_store: Opal.Isomorfeus.store.native.getState() });
|
58
68
|
if (this.scu_for_used_store_paths(this, this.state.isomorfeus_store, next_state.isomorfeus_store)) {
|