isomorfeus-react 16.10.16 → 16.10.17
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/lib/isomorfeus-react.rb +2 -0
- data/lib/lucid_app/mixin.rb +1 -0
- data/lib/lucid_app/native_component_constructor.rb +0 -85
- data/lib/lucid_app/native_lucid_component_constructor.rb +98 -0
- data/lib/lucid_component/mixin.rb +1 -0
- data/lib/lucid_component/native_component_constructor.rb +0 -98
- data/lib/lucid_component/native_lucid_component_constructor.rb +111 -0
- data/lib/lucid_material/app/mixin.rb +1 -0
- data/lib/lucid_material/app/native_component_constructor.rb +0 -85
- data/lib/lucid_material/component/mixin.rb +1 -0
- data/lib/lucid_material/component/native_component_constructor.rb +0 -98
- data/lib/react/version.rb +1 -1
- metadata +3 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 9739e5b156485d7351c464469bd28d8e1a606de6787adcd725aff0bc39eced49
|
|
4
|
+
data.tar.gz: 87b8f40b0756a8af771a9b4fcab3dead21f91eea7b7544c2bc1f10f49e0f46ad
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 0bfab554b462216f24cfc39192e5e0506f4c62c3811c6192d6516df293a253b82bd9440fda296af5b72df87bbc2babcaaa552c174bf213f204bfc608153e3955
|
|
7
|
+
data.tar.gz: 27d15a7f35e1814a384d7eb21e902871dee678d41261bbf46c56a75568cf9e84dec9ecf16920f341265d56a8000a42cd783cf803e108b7ccfa009271c7cc1b0c
|
data/lib/isomorfeus-react.rb
CHANGED
|
@@ -95,6 +95,7 @@ if RUBY_ENGINE == 'opal'
|
|
|
95
95
|
require 'lucid_component/class_store_proxy'
|
|
96
96
|
require 'lucid_component/instance_store_proxy'
|
|
97
97
|
require 'lucid_component/initializer'
|
|
98
|
+
require 'lucid_component/native_lucid_component_constructor'
|
|
98
99
|
require 'lucid_component/native_component_constructor'
|
|
99
100
|
require 'lucid_component/preloading_support'
|
|
100
101
|
require 'lucid_component/mixin'
|
|
@@ -102,6 +103,7 @@ if RUBY_ENGINE == 'opal'
|
|
|
102
103
|
|
|
103
104
|
# LucidApp
|
|
104
105
|
require 'lucid_app/api'
|
|
106
|
+
require 'lucid_app/native_lucid_component_constructor'
|
|
105
107
|
require 'lucid_app/native_component_constructor'
|
|
106
108
|
require 'lucid_app/mixin'
|
|
107
109
|
require 'lucid_app/base'
|
data/lib/lucid_app/mixin.rb
CHANGED
|
@@ -2,6 +2,7 @@ module LucidApp
|
|
|
2
2
|
module Mixin
|
|
3
3
|
def self.included(base)
|
|
4
4
|
base.include(::Native::Wrapper)
|
|
5
|
+
base.extend(::LucidApp::NativeLucidComponentConstructor)
|
|
5
6
|
base.extend(::LucidApp::NativeComponentConstructor)
|
|
6
7
|
base.extend(::LucidPropDeclaration::Mixin)
|
|
7
8
|
base.extend(::React::Component::EventHandler)
|
|
@@ -7,92 +7,7 @@ module LucidApp
|
|
|
7
7
|
component_name = base.to_s
|
|
8
8
|
# language=JS
|
|
9
9
|
%x{
|
|
10
|
-
base.lucid_react_component = class extends Opal.global.React.Component {
|
|
11
|
-
constructor(props) {
|
|
12
|
-
super(props);
|
|
13
|
-
if (base.$default_state_defined()) {
|
|
14
|
-
this.state = base.$state().$to_n();
|
|
15
|
-
} else {
|
|
16
|
-
this.state = {};
|
|
17
|
-
};
|
|
18
|
-
this.state.isomorfeus_store_state = Opal.Isomorfeus.store.native.getState();
|
|
19
|
-
var current_store_state = this.state.isomorfeus_store_state;
|
|
20
|
-
if (typeof current_store_state.component_class_state[#{component_name}] !== "undefined") {
|
|
21
|
-
this.state.component_class_state = {};
|
|
22
|
-
this.state.component_class_state[#{component_name}] = current_store_state.component_class_state[#{component_name}];
|
|
23
|
-
} else {
|
|
24
|
-
this.state.component_class_state = {};
|
|
25
|
-
this.state.component_class_state[#{component_name}] = {};
|
|
26
|
-
};
|
|
27
|
-
this.__ruby_instance = base.$new(this);
|
|
28
|
-
this.__object_id = this.__ruby_instance.$object_id().$to_s();
|
|
29
|
-
if (Opal.Isomorfeus.$top_component() == nil) { Opal.Isomorfeus['$top_component='](this); }
|
|
30
|
-
if (!this.state.component_state) {
|
|
31
|
-
this.state.component_state = {};
|
|
32
|
-
this.state.component_state[this.__object_id] = {};
|
|
33
|
-
};
|
|
34
|
-
var event_handlers = #{base.event_handlers};
|
|
35
|
-
for (var i = 0; i < event_handlers.length; i++) {
|
|
36
|
-
this[event_handlers[i]] = this[event_handlers[i]].bind(this);
|
|
37
|
-
}
|
|
38
|
-
var defined_refs = #{base.defined_refs};
|
|
39
|
-
for (var ref in defined_refs) {
|
|
40
|
-
if (defined_refs[ref] != null) {
|
|
41
|
-
this[ref] = function(element) {
|
|
42
|
-
element = Opal.React.native_element_or_component_to_ruby(element);
|
|
43
|
-
#{`this.__ruby_instance`.instance_exec(`element`, &`defined_refs[ref]`)}
|
|
44
|
-
}
|
|
45
|
-
this[ref] = this[ref].bind(this);
|
|
46
|
-
} else {
|
|
47
|
-
this[ref] = Opal.global.React.createRef();
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
this.listener = this.listener.bind(this);
|
|
51
|
-
this.unsubscriber = Opal.Isomorfeus.store.native.subscribe(this.listener);
|
|
52
|
-
}
|
|
53
|
-
static get displayName() {
|
|
54
|
-
return #{component_name};
|
|
55
|
-
}
|
|
56
|
-
static set displayName(new_name) {
|
|
57
|
-
// dont do anything here except returning the set value
|
|
58
|
-
return new_name;
|
|
59
|
-
}
|
|
60
|
-
render() {
|
|
61
|
-
this.context = this.state.isomorfeus_store_state;
|
|
62
|
-
Opal.React.render_buffer.push([]);
|
|
63
|
-
// console.log("lucid app pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());
|
|
64
|
-
Opal.React.active_components.push(this);
|
|
65
|
-
Opal.React.active_redux_components.push(this.__ruby_instance);
|
|
66
|
-
let block_result;
|
|
67
|
-
if (base.preload_block && base.while_loading_block && !this.state.preloaded) { block_result = #{`this.__ruby_instance`.instance_exec(&`base.while_loading_block`)}; }
|
|
68
|
-
else { block_result = #{`this.__ruby_instance`.instance_exec(&`base.render_block`)}; }
|
|
69
|
-
if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result); }
|
|
70
|
-
Opal.React.active_redux_components.pop();
|
|
71
|
-
Opal.React.active_components.pop();
|
|
72
|
-
// console.log("lucid app popping", Opal.React.render_buffer, Opal.React.render_buffer.toString());
|
|
73
|
-
return Opal.global.React.createElement(Opal.global.LucidApplicationContext.Provider, { value: this.state.isomorfeus_store_state }, Opal.React.render_buffer.pop());
|
|
74
|
-
}
|
|
75
|
-
data_access() {
|
|
76
|
-
return this.context;
|
|
77
|
-
}
|
|
78
|
-
listener() {
|
|
79
|
-
let next_state = Opal.Isomorfeus.store.native.getState();
|
|
80
|
-
this.setState({ isomorfeus_store_state: next_state });
|
|
81
|
-
}
|
|
82
|
-
componentWillUnmount() {
|
|
83
|
-
if (typeof this.unsubscriber === "function") { this.unsubscriber(); }
|
|
84
|
-
}
|
|
85
|
-
validateProp(props, propName, componentName) {
|
|
86
|
-
try { base.$validate_prop(propName, props[propName]) }
|
|
87
|
-
catch (e) { return new Error(componentName + ": Error: prop validation failed: " + e.message); }
|
|
88
|
-
return null;
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
base.preload_block = null;
|
|
92
|
-
base.while_loading_block = null;
|
|
93
|
-
base.jss_styles = null;
|
|
94
10
|
base.jss_theme = {};
|
|
95
|
-
base.use_styles = null;
|
|
96
11
|
base.themed_react_component = function(props) {
|
|
97
12
|
let classes = null;
|
|
98
13
|
let theme = Opal.global.ReactJSS.useTheme();
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
module LucidApp
|
|
2
|
+
module NativeLucidComponentConstructor
|
|
3
|
+
# for should_component_update we apply ruby semantics for comparing props
|
|
4
|
+
# to do so, we convert the props to ruby hashes and then compare
|
|
5
|
+
# this makes sure, that for example rubys Nil object gets handled properly
|
|
6
|
+
def self.extended(base)
|
|
7
|
+
component_name = base.to_s
|
|
8
|
+
# language=JS
|
|
9
|
+
%x{
|
|
10
|
+
base.lucid_react_component = class extends Opal.global.React.Component {
|
|
11
|
+
constructor(props) {
|
|
12
|
+
super(props);
|
|
13
|
+
if (base.$default_state_defined()) {
|
|
14
|
+
this.state = base.$state().$to_n();
|
|
15
|
+
} else {
|
|
16
|
+
this.state = {};
|
|
17
|
+
};
|
|
18
|
+
this.state.isomorfeus_store_state = Opal.Isomorfeus.store.native.getState();
|
|
19
|
+
var current_store_state = this.state.isomorfeus_store_state;
|
|
20
|
+
if (typeof current_store_state.component_class_state[#{component_name}] !== "undefined") {
|
|
21
|
+
this.state.component_class_state = {};
|
|
22
|
+
this.state.component_class_state[#{component_name}] = current_store_state.component_class_state[#{component_name}];
|
|
23
|
+
} else {
|
|
24
|
+
this.state.component_class_state = {};
|
|
25
|
+
this.state.component_class_state[#{component_name}] = {};
|
|
26
|
+
};
|
|
27
|
+
this.__ruby_instance = base.$new(this);
|
|
28
|
+
this.__object_id = this.__ruby_instance.$object_id().$to_s();
|
|
29
|
+
if (Opal.Isomorfeus.$top_component() == nil) { Opal.Isomorfeus['$top_component='](this); }
|
|
30
|
+
if (!this.state.component_state) {
|
|
31
|
+
this.state.component_state = {};
|
|
32
|
+
this.state.component_state[this.__object_id] = {};
|
|
33
|
+
};
|
|
34
|
+
var event_handlers = #{base.event_handlers};
|
|
35
|
+
for (var i = 0; i < event_handlers.length; i++) {
|
|
36
|
+
this[event_handlers[i]] = this[event_handlers[i]].bind(this);
|
|
37
|
+
}
|
|
38
|
+
var defined_refs = #{base.defined_refs};
|
|
39
|
+
for (var ref in defined_refs) {
|
|
40
|
+
if (defined_refs[ref] != null) {
|
|
41
|
+
this[ref] = function(element) {
|
|
42
|
+
element = Opal.React.native_element_or_component_to_ruby(element);
|
|
43
|
+
#{`this.__ruby_instance`.instance_exec(`element`, &`defined_refs[ref]`)}
|
|
44
|
+
}
|
|
45
|
+
this[ref] = this[ref].bind(this);
|
|
46
|
+
} else {
|
|
47
|
+
this[ref] = Opal.global.React.createRef();
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
this.listener = this.listener.bind(this);
|
|
51
|
+
this.unsubscriber = Opal.Isomorfeus.store.native.subscribe(this.listener);
|
|
52
|
+
}
|
|
53
|
+
static get displayName() {
|
|
54
|
+
return #{component_name};
|
|
55
|
+
}
|
|
56
|
+
static set displayName(new_name) {
|
|
57
|
+
// dont do anything here except returning the set value
|
|
58
|
+
return new_name;
|
|
59
|
+
}
|
|
60
|
+
render() {
|
|
61
|
+
this.context = this.state.isomorfeus_store_state;
|
|
62
|
+
Opal.React.render_buffer.push([]);
|
|
63
|
+
// console.log("lucid app pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());
|
|
64
|
+
Opal.React.active_components.push(this);
|
|
65
|
+
Opal.React.active_redux_components.push(this.__ruby_instance);
|
|
66
|
+
let block_result;
|
|
67
|
+
if (base.preload_block && base.while_loading_block && !this.state.preloaded) { block_result = #{`this.__ruby_instance`.instance_exec(&`base.while_loading_block`)}; }
|
|
68
|
+
else { block_result = #{`this.__ruby_instance`.instance_exec(&`base.render_block`)}; }
|
|
69
|
+
if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result); }
|
|
70
|
+
Opal.React.active_redux_components.pop();
|
|
71
|
+
Opal.React.active_components.pop();
|
|
72
|
+
// console.log("lucid app popping", Opal.React.render_buffer, Opal.React.render_buffer.toString());
|
|
73
|
+
return Opal.global.React.createElement(Opal.global.LucidApplicationContext.Provider, { value: this.state.isomorfeus_store_state }, Opal.React.render_buffer.pop());
|
|
74
|
+
}
|
|
75
|
+
data_access() {
|
|
76
|
+
return this.context;
|
|
77
|
+
}
|
|
78
|
+
listener() {
|
|
79
|
+
let next_state = Opal.Isomorfeus.store.native.getState();
|
|
80
|
+
this.setState({ isomorfeus_store_state: next_state });
|
|
81
|
+
}
|
|
82
|
+
componentWillUnmount() {
|
|
83
|
+
if (typeof this.unsubscriber === "function") { this.unsubscriber(); }
|
|
84
|
+
}
|
|
85
|
+
validateProp(props, propName, componentName) {
|
|
86
|
+
try { base.$validate_prop(propName, props[propName]) }
|
|
87
|
+
catch (e) { return new Error(componentName + ": Error: prop validation failed: " + e.message); }
|
|
88
|
+
return null;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
base.preload_block = null;
|
|
92
|
+
base.while_loading_block = null;
|
|
93
|
+
base.jss_styles = null;
|
|
94
|
+
base.use_styles = null;
|
|
95
|
+
}
|
|
96
|
+
end
|
|
97
|
+
end
|
|
98
|
+
end
|
|
@@ -2,6 +2,7 @@ module LucidComponent
|
|
|
2
2
|
module Mixin
|
|
3
3
|
def self.included(base)
|
|
4
4
|
base.include(::Native::Wrapper)
|
|
5
|
+
base.extend(::LucidComponent::NativeLucidComponentConstructor)
|
|
5
6
|
base.extend(::LucidComponent::NativeComponentConstructor)
|
|
6
7
|
base.extend(::LucidPropDeclaration::Mixin)
|
|
7
8
|
base.extend(::React::Component::EventHandler)
|
|
@@ -7,104 +7,6 @@ module LucidComponent
|
|
|
7
7
|
component_name = base.to_s
|
|
8
8
|
# language=JS
|
|
9
9
|
%x{
|
|
10
|
-
base.lucid_react_component = class extends Opal.global.React.Component {
|
|
11
|
-
constructor(props) {
|
|
12
|
-
super(props);
|
|
13
|
-
if (base.$default_state_defined()) {
|
|
14
|
-
this.state = base.$state().$to_n();
|
|
15
|
-
} else {
|
|
16
|
-
this.state = {};
|
|
17
|
-
};
|
|
18
|
-
this.__ruby_instance = base.$new(this);
|
|
19
|
-
this.__object_id = this.__ruby_instance.$object_id().$to_s();
|
|
20
|
-
if (!this.state.component_state) {
|
|
21
|
-
this.state.component_state = {};
|
|
22
|
-
this.state.component_state[this.__object_id] = {};
|
|
23
|
-
};
|
|
24
|
-
var event_handlers = #{base.event_handlers};
|
|
25
|
-
for (var i = 0; i < event_handlers.length; i++) {
|
|
26
|
-
this[event_handlers[i]] = this[event_handlers[i]].bind(this);
|
|
27
|
-
}
|
|
28
|
-
var defined_refs = #{base.defined_refs};
|
|
29
|
-
for (var ref in defined_refs) {
|
|
30
|
-
if (defined_refs[ref] != null) {
|
|
31
|
-
this[ref] = function(element) {
|
|
32
|
-
element = Opal.React.native_element_or_component_to_ruby(element);
|
|
33
|
-
#{`this.__ruby_instance`.instance_exec(`element`, &`defined_refs[ref]`)}
|
|
34
|
-
}
|
|
35
|
-
this[ref] = this[ref].bind(this);
|
|
36
|
-
} else {
|
|
37
|
-
this[ref] = Opal.global.React.createRef();
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
static get displayName() {
|
|
42
|
-
return #{component_name};
|
|
43
|
-
}
|
|
44
|
-
static set displayName(new_name) {
|
|
45
|
-
// dont do anything here except returning the set value
|
|
46
|
-
return new_name;
|
|
47
|
-
}
|
|
48
|
-
render() {
|
|
49
|
-
Opal.React.render_buffer.push([]);
|
|
50
|
-
// console.log("lucid component pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());
|
|
51
|
-
Opal.React.active_components.push(this);
|
|
52
|
-
Opal.React.active_redux_components.push(this);
|
|
53
|
-
let block_result;
|
|
54
|
-
if (base.preload_block && base.while_loading_block && !this.state.preloaded) { block_result = #{`this.__ruby_instance`.instance_exec(&`base.while_loading_block`)}; }
|
|
55
|
-
else { block_result = #{`this.__ruby_instance`.instance_exec(&`base.render_block`)}; }
|
|
56
|
-
if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result); }
|
|
57
|
-
Opal.React.active_redux_components.pop();
|
|
58
|
-
Opal.React.active_components.pop();
|
|
59
|
-
// console.log("lucid component popping", Opal.React.render_buffer, Opal.React.render_buffer.toString());
|
|
60
|
-
if (base.except_ssr) {
|
|
61
|
-
if (typeof block_result === "object" && block_result.danger) { return Opal.global.React.createElement('div', {'data-ssrhelper': this.__ruby_instance.$class().$to_s(), dangerouslySetInnerHTML: { __html: block_result.html}});}
|
|
62
|
-
else { return Opal.global.React.createElement('div', {'data-ssrhelper': this.__ruby_instance.$class().$to_s()}, Opal.React.render_buffer.pop()); }
|
|
63
|
-
}
|
|
64
|
-
return Opal.React.render_buffer.pop();
|
|
65
|
-
}
|
|
66
|
-
data_access() {
|
|
67
|
-
return this.props.store;
|
|
68
|
-
}
|
|
69
|
-
shouldComponentUpdate(next_props, next_state) {
|
|
70
|
-
let counter = 0;
|
|
71
|
-
for (var property in next_props) {
|
|
72
|
-
counter++;
|
|
73
|
-
if (next_props.hasOwnProperty(property)) {
|
|
74
|
-
if (!this.props.hasOwnProperty(property)) { return true; };
|
|
75
|
-
if (property === "children") { if (next_props.children !== this.props.children) { return true; }}
|
|
76
|
-
else if (typeof next_props[property] !== "undefined" && next_props[property] !== null && typeof next_props[property]['$!='] === "function" &&
|
|
77
|
-
typeof this.props[property] !== "undefined" && this.props[property] !== null ) {
|
|
78
|
-
if (#{ !! (`next_props[property]` != `this.props[property]`) }) { return true; }
|
|
79
|
-
} else if (next_props[property] !== this.props[property]) { return true; }
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
if (counter !== Object.keys(this.props).length) { return true; }
|
|
83
|
-
counter = 0;
|
|
84
|
-
for (var property in next_state) {
|
|
85
|
-
counter++;
|
|
86
|
-
if (next_state.hasOwnProperty(property)) {
|
|
87
|
-
if (!this.state.hasOwnProperty(property)) { return true; };
|
|
88
|
-
if (typeof next_state[property] !== "undefined" && next_state[property] !== null && typeof next_state[property]['$!='] === "function" &&
|
|
89
|
-
typeof this.state[property] !== "undefined" && this.state[property] !== null) {
|
|
90
|
-
if (#{ !! (`next_state[property]` != `this.state[property]`) }) { return true }
|
|
91
|
-
} else if (next_state[property] !== this.state[property]) { return true }
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
if (counter !== Object.keys(this.state).length) { return true; }
|
|
95
|
-
return false;
|
|
96
|
-
}
|
|
97
|
-
validateProp(props, propName, componentName) {
|
|
98
|
-
try { base.$validate_prop(propName, props[propName]) }
|
|
99
|
-
catch (e) { return new Error(componentName + " Error: prop validation failed: " + e.message); }
|
|
100
|
-
return null;
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
base.preload_block = null;
|
|
104
|
-
base.while_loading_block = null;
|
|
105
|
-
base.jss_styles = null;
|
|
106
|
-
base.use_styles = null;
|
|
107
|
-
base.store_updates = true;
|
|
108
10
|
base.react_component = function(props) {
|
|
109
11
|
let classes = null;
|
|
110
12
|
let store;
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
module LucidComponent
|
|
2
|
+
module NativeLucidComponentConstructor
|
|
3
|
+
# for should_component_update we apply ruby semantics for comparing props
|
|
4
|
+
# to do so, we convert the props to ruby hashes and then compare
|
|
5
|
+
# this makes sure, that for example rubys Nil object gets handled properly
|
|
6
|
+
def self.extended(base)
|
|
7
|
+
component_name = base.to_s
|
|
8
|
+
# language=JS
|
|
9
|
+
%x{
|
|
10
|
+
base.lucid_react_component = class extends Opal.global.React.Component {
|
|
11
|
+
constructor(props) {
|
|
12
|
+
super(props);
|
|
13
|
+
if (base.$default_state_defined()) {
|
|
14
|
+
this.state = base.$state().$to_n();
|
|
15
|
+
} else {
|
|
16
|
+
this.state = {};
|
|
17
|
+
};
|
|
18
|
+
this.__ruby_instance = base.$new(this);
|
|
19
|
+
this.__object_id = this.__ruby_instance.$object_id().$to_s();
|
|
20
|
+
if (!this.state.component_state) {
|
|
21
|
+
this.state.component_state = {};
|
|
22
|
+
this.state.component_state[this.__object_id] = {};
|
|
23
|
+
};
|
|
24
|
+
var event_handlers = #{base.event_handlers};
|
|
25
|
+
for (var i = 0; i < event_handlers.length; i++) {
|
|
26
|
+
this[event_handlers[i]] = this[event_handlers[i]].bind(this);
|
|
27
|
+
}
|
|
28
|
+
var defined_refs = #{base.defined_refs};
|
|
29
|
+
for (var ref in defined_refs) {
|
|
30
|
+
if (defined_refs[ref] != null) {
|
|
31
|
+
this[ref] = function(element) {
|
|
32
|
+
element = Opal.React.native_element_or_component_to_ruby(element);
|
|
33
|
+
#{`this.__ruby_instance`.instance_exec(`element`, &`defined_refs[ref]`)}
|
|
34
|
+
}
|
|
35
|
+
this[ref] = this[ref].bind(this);
|
|
36
|
+
} else {
|
|
37
|
+
this[ref] = Opal.global.React.createRef();
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
static get displayName() {
|
|
42
|
+
return #{component_name};
|
|
43
|
+
}
|
|
44
|
+
static set displayName(new_name) {
|
|
45
|
+
// dont do anything here except returning the set value
|
|
46
|
+
return new_name;
|
|
47
|
+
}
|
|
48
|
+
render() {
|
|
49
|
+
Opal.React.render_buffer.push([]);
|
|
50
|
+
// console.log("lucid component pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());
|
|
51
|
+
Opal.React.active_components.push(this);
|
|
52
|
+
Opal.React.active_redux_components.push(this);
|
|
53
|
+
let block_result;
|
|
54
|
+
if (base.preload_block && base.while_loading_block && !this.state.preloaded) { block_result = #{`this.__ruby_instance`.instance_exec(&`base.while_loading_block`)}; }
|
|
55
|
+
else { block_result = #{`this.__ruby_instance`.instance_exec(&`base.render_block`)}; }
|
|
56
|
+
if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result); }
|
|
57
|
+
Opal.React.active_redux_components.pop();
|
|
58
|
+
Opal.React.active_components.pop();
|
|
59
|
+
// console.log("lucid component popping", Opal.React.render_buffer, Opal.React.render_buffer.toString());
|
|
60
|
+
if (base.except_ssr) {
|
|
61
|
+
if (typeof block_result === "object" && block_result.danger) { return Opal.global.React.createElement('div', {'data-ssrhelper': this.__ruby_instance.$class().$to_s(), dangerouslySetInnerHTML: { __html: block_result.html}});}
|
|
62
|
+
else { return Opal.global.React.createElement('div', {'data-ssrhelper': this.__ruby_instance.$class().$to_s()}, Opal.React.render_buffer.pop()); }
|
|
63
|
+
}
|
|
64
|
+
return Opal.React.render_buffer.pop();
|
|
65
|
+
}
|
|
66
|
+
data_access() {
|
|
67
|
+
return this.props.store;
|
|
68
|
+
}
|
|
69
|
+
shouldComponentUpdate(next_props, next_state) {
|
|
70
|
+
let counter = 0;
|
|
71
|
+
for (var property in next_props) {
|
|
72
|
+
counter++;
|
|
73
|
+
if (next_props.hasOwnProperty(property)) {
|
|
74
|
+
if (!this.props.hasOwnProperty(property)) { return true; };
|
|
75
|
+
if (property === "children") { if (next_props.children !== this.props.children) { return true; }}
|
|
76
|
+
else if (typeof next_props[property] !== "undefined" && next_props[property] !== null && typeof next_props[property]['$!='] === "function" &&
|
|
77
|
+
typeof this.props[property] !== "undefined" && this.props[property] !== null ) {
|
|
78
|
+
if (#{ !! (`next_props[property]` != `this.props[property]`) }) { return true; }
|
|
79
|
+
} else if (next_props[property] !== this.props[property]) { return true; }
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
if (counter !== Object.keys(this.props).length) { return true; }
|
|
83
|
+
counter = 0;
|
|
84
|
+
for (var property in next_state) {
|
|
85
|
+
counter++;
|
|
86
|
+
if (next_state.hasOwnProperty(property)) {
|
|
87
|
+
if (!this.state.hasOwnProperty(property)) { return true; };
|
|
88
|
+
if (typeof next_state[property] !== "undefined" && next_state[property] !== null && typeof next_state[property]['$!='] === "function" &&
|
|
89
|
+
typeof this.state[property] !== "undefined" && this.state[property] !== null) {
|
|
90
|
+
if (#{ !! (`next_state[property]` != `this.state[property]`) }) { return true }
|
|
91
|
+
} else if (next_state[property] !== this.state[property]) { return true }
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
if (counter !== Object.keys(this.state).length) { return true; }
|
|
95
|
+
return false;
|
|
96
|
+
}
|
|
97
|
+
validateProp(props, propName, componentName) {
|
|
98
|
+
try { base.$validate_prop(propName, props[propName]) }
|
|
99
|
+
catch (e) { return new Error(componentName + " Error: prop validation failed: " + e.message); }
|
|
100
|
+
return null;
|
|
101
|
+
}
|
|
102
|
+
};
|
|
103
|
+
base.preload_block = null;
|
|
104
|
+
base.while_loading_block = null;
|
|
105
|
+
base.jss_styles = null;
|
|
106
|
+
base.use_styles = null;
|
|
107
|
+
base.store_updates = true;
|
|
108
|
+
}
|
|
109
|
+
end
|
|
110
|
+
end
|
|
111
|
+
end
|
|
@@ -3,6 +3,7 @@ module LucidMaterial
|
|
|
3
3
|
module Mixin
|
|
4
4
|
def self.included(base)
|
|
5
5
|
base.include(::Native::Wrapper)
|
|
6
|
+
base.extend(::LucidApp::NativeLucidComponentConstructor)
|
|
6
7
|
base.extend(::LucidMaterial::App::NativeComponentConstructor)
|
|
7
8
|
base.extend(::LucidPropDeclaration::Mixin)
|
|
8
9
|
base.extend(::React::Component::EventHandler)
|
|
@@ -8,92 +8,7 @@ module LucidMaterial
|
|
|
8
8
|
component_name = base.to_s
|
|
9
9
|
# language=JS
|
|
10
10
|
%x{
|
|
11
|
-
base.lucid_react_component = class extends Opal.global.React.Component {
|
|
12
|
-
constructor(props) {
|
|
13
|
-
super(props);
|
|
14
|
-
if (base.$default_state_defined()) {
|
|
15
|
-
this.state = base.$state().$to_n();
|
|
16
|
-
} else {
|
|
17
|
-
this.state = {};
|
|
18
|
-
};
|
|
19
|
-
this.state.isomorfeus_store_state = Opal.Isomorfeus.store.native.getState();
|
|
20
|
-
var current_store_state = this.state.isomorfeus_store_state;
|
|
21
|
-
if (typeof current_store_state.component_class_state[#{component_name}] !== "undefined") {
|
|
22
|
-
this.state.component_class_state = {};
|
|
23
|
-
this.state.component_class_state[#{component_name}] = current_store_state.component_class_state[#{component_name}];
|
|
24
|
-
} else {
|
|
25
|
-
this.state.component_class_state = {};
|
|
26
|
-
this.state.component_class_state[#{component_name}] = {};
|
|
27
|
-
};
|
|
28
|
-
this.__ruby_instance = base.$new(this);
|
|
29
|
-
this.__object_id = this.__ruby_instance.$object_id().$to_s();
|
|
30
|
-
if (Opal.Isomorfeus.$top_component() == nil) { Opal.Isomorfeus['$top_component='](this); }
|
|
31
|
-
if (!this.state.component_state) {
|
|
32
|
-
this.state.component_state = {};
|
|
33
|
-
this.state.component_state[this.__object_id] = {};
|
|
34
|
-
};
|
|
35
|
-
var event_handlers = #{base.event_handlers};
|
|
36
|
-
for (var i = 0; i < event_handlers.length; i++) {
|
|
37
|
-
this[event_handlers[i]] = this[event_handlers[i]].bind(this);
|
|
38
|
-
}
|
|
39
|
-
var defined_refs = #{base.defined_refs};
|
|
40
|
-
for (var ref in defined_refs) {
|
|
41
|
-
if (defined_refs[ref] != null) {
|
|
42
|
-
this[ref] = function(element) {
|
|
43
|
-
element = Opal.React.native_element_or_component_to_ruby(element);
|
|
44
|
-
#{`this.__ruby_instance`.instance_exec(`element`, &`defined_refs[ref]`)}
|
|
45
|
-
}
|
|
46
|
-
this[ref] = this[ref].bind(this);
|
|
47
|
-
} else {
|
|
48
|
-
this[ref] = Opal.global.React.createRef();
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
this.listener = this.listener.bind(this);
|
|
52
|
-
this.unsubscriber = Opal.Isomorfeus.store.native.subscribe(this.listener);
|
|
53
|
-
}
|
|
54
|
-
static get displayName() {
|
|
55
|
-
return #{component_name};
|
|
56
|
-
}
|
|
57
|
-
static set displayName(new_name) {
|
|
58
|
-
// dont do anything here except returning the set value
|
|
59
|
-
return new_name;
|
|
60
|
-
}
|
|
61
|
-
render() {
|
|
62
|
-
this.context = this.state.isomorfeus_store_state;
|
|
63
|
-
Opal.React.render_buffer.push([]);
|
|
64
|
-
// console.log("material app pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());
|
|
65
|
-
Opal.React.active_components.push(this);
|
|
66
|
-
Opal.React.active_redux_components.push(this.__ruby_instance);
|
|
67
|
-
let block_result;
|
|
68
|
-
if (base.preload_block && base.while_loading_block && !this.state.preloaded) { block_result = #{`this.__ruby_instance`.instance_exec(&`base.while_loading_block`)}; }
|
|
69
|
-
else { block_result = #{`this.__ruby_instance`.instance_exec(&`base.render_block`)}; }
|
|
70
|
-
if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result); }
|
|
71
|
-
Opal.React.active_redux_components.pop();
|
|
72
|
-
Opal.React.active_components.pop();
|
|
73
|
-
// console.log("material app popping", Opal.React.render_buffer, Opal.React.render_buffer.toString());
|
|
74
|
-
return Opal.global.React.createElement(Opal.global.LucidApplicationContext.Provider, { value: this.state.isomorfeus_store_state }, Opal.React.render_buffer.pop());
|
|
75
|
-
}
|
|
76
|
-
data_access() {
|
|
77
|
-
return this.context;
|
|
78
|
-
}
|
|
79
|
-
listener() {
|
|
80
|
-
var next_state = Opal.Isomorfeus.store.native.getState();
|
|
81
|
-
this.setState({ isomorfeus_store_state: next_state });
|
|
82
|
-
}
|
|
83
|
-
componentWillUnmount() {
|
|
84
|
-
if (typeof this.unsubscriber === "function") { this.unsubscriber(); }
|
|
85
|
-
}
|
|
86
|
-
validateProp(props, propName, componentName) {
|
|
87
|
-
try { base.$validate_prop(propName, props[propName]) }
|
|
88
|
-
catch (e) { return new Error(componentName + " Error: prop validation failed: " + e.message); }
|
|
89
|
-
return null;
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
base.preload_block = null;
|
|
93
|
-
base.while_loading_block = null;
|
|
94
|
-
base.jss_styles = null;
|
|
95
11
|
base.jss_theme = Opal.global.Mui.createMuiTheme();
|
|
96
|
-
base.use_styles = null;
|
|
97
12
|
base.themed_react_component = function(props) {
|
|
98
13
|
let classes = null;
|
|
99
14
|
let theme = Opal.global.MuiStyles.useTheme();
|
|
@@ -3,6 +3,7 @@ module LucidMaterial
|
|
|
3
3
|
module Mixin
|
|
4
4
|
def self.included(base)
|
|
5
5
|
base.include(::Native::Wrapper)
|
|
6
|
+
base.extend(::LucidComponent::NativeLucidComponentConstructor)
|
|
6
7
|
base.extend(::LucidMaterial::Component::NativeComponentConstructor)
|
|
7
8
|
base.extend(::LucidPropDeclaration::Mixin)
|
|
8
9
|
base.extend(::React::Component::EventHandler)
|
|
@@ -8,104 +8,6 @@ module LucidMaterial
|
|
|
8
8
|
component_name = base.to_s
|
|
9
9
|
# language=JS
|
|
10
10
|
%x{
|
|
11
|
-
base.lucid_react_component = class extends Opal.global.React.Component {
|
|
12
|
-
constructor(props) {
|
|
13
|
-
super(props);
|
|
14
|
-
if (base.$default_state_defined()) {
|
|
15
|
-
this.state = base.$state().$to_n();
|
|
16
|
-
} else {
|
|
17
|
-
this.state = {};
|
|
18
|
-
};
|
|
19
|
-
this.__ruby_instance = base.$new(this);
|
|
20
|
-
this.__object_id = this.__ruby_instance.$object_id().$to_s();
|
|
21
|
-
if (!this.state.component_state) {
|
|
22
|
-
this.state.component_state = {};
|
|
23
|
-
this.state.component_state[this.__object_id] = {};
|
|
24
|
-
};
|
|
25
|
-
var event_handlers = #{base.event_handlers};
|
|
26
|
-
for (var i = 0; i < event_handlers.length; i++) {
|
|
27
|
-
this[event_handlers[i]] = this[event_handlers[i]].bind(this);
|
|
28
|
-
}
|
|
29
|
-
var defined_refs = #{base.defined_refs};
|
|
30
|
-
for (var ref in defined_refs) {
|
|
31
|
-
if (defined_refs[ref] != null) {
|
|
32
|
-
this[ref] = function(element) {
|
|
33
|
-
element = Opal.React.native_element_or_component_to_ruby(element);
|
|
34
|
-
#{`this.__ruby_instance`.instance_exec(`element`, &`defined_refs[ref]`)}
|
|
35
|
-
}
|
|
36
|
-
this[ref] = this[ref].bind(this);
|
|
37
|
-
} else {
|
|
38
|
-
this[ref] = Opal.global.React.createRef();
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
static get displayName() {
|
|
43
|
-
return #{component_name};
|
|
44
|
-
}
|
|
45
|
-
static set displayName(new_name) {
|
|
46
|
-
// dont do anything here except returning the set value
|
|
47
|
-
return new_name;
|
|
48
|
-
}
|
|
49
|
-
render() {
|
|
50
|
-
Opal.React.render_buffer.push([]);
|
|
51
|
-
// console.log("material component pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());
|
|
52
|
-
Opal.React.active_components.push(this);
|
|
53
|
-
Opal.React.active_redux_components.push(this);
|
|
54
|
-
let block_result;
|
|
55
|
-
if (base.preload_block && base.while_loading_block && !this.state.preloaded) { block_result = #{`this.__ruby_instance`.instance_exec(&`base.while_loading_block`)}; }
|
|
56
|
-
else { block_result = #{`this.__ruby_instance`.instance_exec(&`base.render_block`)}; }
|
|
57
|
-
if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result); }
|
|
58
|
-
Opal.React.active_redux_components.pop();
|
|
59
|
-
Opal.React.active_components.pop();
|
|
60
|
-
// console.log("material component popping", Opal.React.render_buffer, Opal.React.render_buffer.toString());
|
|
61
|
-
if (base.except_ssr) {
|
|
62
|
-
if (typeof block_result === "object" && block_result.danger) { return Opal.global.React.createElement('div', {'data-ssrhelper': this.__ruby_instance.$class().$to_s(), dangerouslySetInnerHTML: { __html: block_result.html}});}
|
|
63
|
-
else { return Opal.global.React.createElement('div', {'data-ssrhelper': this.__ruby_instance.$class().$to_s()}, Opal.React.render_buffer.pop()); }
|
|
64
|
-
}
|
|
65
|
-
return Opal.React.render_buffer.pop();
|
|
66
|
-
}
|
|
67
|
-
data_access() {
|
|
68
|
-
return this.props.store;
|
|
69
|
-
}
|
|
70
|
-
shouldComponentUpdate(next_props, next_state) {
|
|
71
|
-
let counter = 0;
|
|
72
|
-
for (var property in next_props) {
|
|
73
|
-
counter++;
|
|
74
|
-
if (next_props.hasOwnProperty(property)) {
|
|
75
|
-
if (!this.props.hasOwnProperty(property)) { return true; };
|
|
76
|
-
if (property === "children") { if (next_props.children !== this.props.children) { return true; }}
|
|
77
|
-
else if (typeof next_props[property] !== "undefined" && next_props[property] !== null && typeof next_props[property]['$!='] === "function" &&
|
|
78
|
-
typeof this.props[property] !== "undefined" && this.props[property] !== null ) {
|
|
79
|
-
if (#{ !! (`next_props[property]` != `this.props[property]`) }) { return true; }
|
|
80
|
-
} else if (next_props[property] !== this.props[property]) { return true; }
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
if (counter !== Object.keys(this.props).length) { return true; }
|
|
84
|
-
counter = 0;
|
|
85
|
-
for (var property in next_state) {
|
|
86
|
-
counter++;
|
|
87
|
-
if (next_state.hasOwnProperty(property)) {
|
|
88
|
-
if (!this.state.hasOwnProperty(property)) { return true; };
|
|
89
|
-
if (typeof next_state[property] !== "undefined" && next_state[property] !== null && typeof next_state[property]['$!='] === "function" &&
|
|
90
|
-
typeof this.state[property] !== "undefined" && this.state[property] !== null) {
|
|
91
|
-
if (#{ !! (`next_state[property]` != `this.state[property]`) }) { return true }
|
|
92
|
-
} else if (next_state[property] !== this.state[property]) { return true }
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
if (counter !== Object.keys(this.state).length) { return true; }
|
|
96
|
-
return false;
|
|
97
|
-
}
|
|
98
|
-
validateProp(props, propName, componentName) {
|
|
99
|
-
try { base.$validate_prop(propName, props[propName]) }
|
|
100
|
-
catch (e) { return new Error(componentName + " Error: prop validation failed: " + e.message); }
|
|
101
|
-
return null;
|
|
102
|
-
}
|
|
103
|
-
};
|
|
104
|
-
base.preload_block = null;
|
|
105
|
-
base.while_loading_block = null;
|
|
106
|
-
base.jss_styles = null;
|
|
107
|
-
base.use_styles = null;
|
|
108
|
-
base.store_updates = true;
|
|
109
11
|
base.react_component = function(props) {
|
|
110
12
|
let classes = null;
|
|
111
13
|
let store;
|
data/lib/react/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
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.17
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Jan Biedermann
|
|
@@ -179,6 +179,7 @@ files:
|
|
|
179
179
|
- lib/lucid_app/context.rb
|
|
180
180
|
- lib/lucid_app/mixin.rb
|
|
181
181
|
- lib/lucid_app/native_component_constructor.rb
|
|
182
|
+
- lib/lucid_app/native_lucid_component_constructor.rb
|
|
182
183
|
- lib/lucid_component/app_store_defaults.rb
|
|
183
184
|
- lib/lucid_component/app_store_proxy.rb
|
|
184
185
|
- lib/lucid_component/base.rb
|
|
@@ -190,6 +191,7 @@ files:
|
|
|
190
191
|
- lib/lucid_component/instance_store_proxy.rb
|
|
191
192
|
- lib/lucid_component/mixin.rb
|
|
192
193
|
- lib/lucid_component/native_component_constructor.rb
|
|
194
|
+
- lib/lucid_component/native_lucid_component_constructor.rb
|
|
193
195
|
- lib/lucid_component/preloading_support.rb
|
|
194
196
|
- lib/lucid_component/reducers.rb
|
|
195
197
|
- lib/lucid_component/store_api.rb
|