isomorfeus-react 16.10.16 → 16.10.17
Sign up to get free protection for your applications and to get access to all the features.
- 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
|