isomorfeus-react 16.9.16 → 16.9.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_view_helper.rb +34 -4
- data/lib/isomorfeus/top_level_ssr.rb +14 -4
- data/lib/lucid_app/native_component_constructor.rb +4 -6
- data/lib/lucid_component/app_store_proxy.rb +0 -1
- data/lib/lucid_component/class_store_proxy.rb +0 -1
- data/lib/lucid_component/instance_store_proxy.rb +0 -1
- data/lib/lucid_component/native_component_constructor.rb +5 -34
- data/lib/lucid_material/app/native_component_constructor.rb +4 -7
- data/lib/lucid_material/component/native_component_constructor.rb +5 -34
- data/lib/react/version.rb +1 -1
- metadata +4 -4
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: a78b7f6de2b24a82c500e35b74919f9e331bd0a7e4d797f355f79a755e855a07
|
4
|
+
data.tar.gz: 546561eced5206c1f8edf0dccdc11bcbfa5b665eb7404fe47b0722b311dd3176
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 8cdfc880b7a0a6ef1c5d2d6b7fb10ee5292be980311244d5e84347d7f8599856fa2a47ac0ee02ac7ae664fe56c5f512c5c3299774002b0d43e2feede6d00855c
|
7
|
+
data.tar.gz: e6d742909a28d9cd6ea1af7c0556c9301888b8af64742fa7e8f6e7f98bcc9b095d50626bb2f4351f153650bcbe0ad19cb27b9bd199f493bf44eb841724298142
|
@@ -2,6 +2,7 @@ module Isomorfeus
|
|
2
2
|
module ReactViewHelper
|
3
3
|
def mount_component(component_name, props = {}, asset = 'application_ssr.js')
|
4
4
|
@ssr_response_status = nil
|
5
|
+
@ssr_styles = nil
|
5
6
|
thread_id_asset = "#{Thread.current.object_id}#{asset}"
|
6
7
|
render_result = "<div data-iso-env=\"#{Isomorfeus.env}\" data-iso-root=\"#{component_name}\" data-iso-props='#{Oj.dump(props, mode: :strict)}'"
|
7
8
|
if Isomorfeus.server_side_rendering
|
@@ -74,14 +75,39 @@ module Isomorfeus
|
|
74
75
|
|
75
76
|
# build javascript for second render pass
|
76
77
|
javascript = <<~JAVASCRIPT
|
77
|
-
|
78
|
-
|
78
|
+
let rendered_tree;
|
79
|
+
let ssr_styles;
|
80
|
+
let component;
|
81
|
+
if (typeof global.Opal.global.MuiStyles !== 'undefined' && typeof global.Opal.global.MuiStyles.ServerStyleSheets !== 'undefined') {
|
82
|
+
component = '#{component_name}'.split(".").reduce(function(o, x) {
|
83
|
+
return (o !== null && typeof o[x] !== "undefined" && o[x] !== null) ? o[x] : null;
|
84
|
+
}, global.Opal.global)
|
85
|
+
if (!component) { component = global.Opal.Isomorfeus.$cached_component_class('#{component_name}'); }
|
86
|
+
let sheets = new global.Opal.global.MuiStyles.ServerStyleSheets();
|
87
|
+
let app = global.Opal.React.$create_element(component, global.Opal.Hash.$new(#{Oj.dump(props, mode: :strict)}));
|
88
|
+
rendered_tree = global.Opal.global.ReactDOMServer.renderToString(sheets.collect(app));
|
89
|
+
ssr_styles = sheets.toString();
|
90
|
+
} else if (typeof global.Opal.global.ReactJSS !== 'undefined' && typeof global.Opal.global.ReactJSS.SheetsRegistry !== 'undefined') {
|
91
|
+
component = '#{component_name}'.split(".").reduce(function(o, x) {
|
92
|
+
return (o !== null && typeof o[x] !== "undefined" && o[x] !== null) ? o[x] : null;
|
93
|
+
}, global.Opal.global)
|
94
|
+
if (!component) { component = global.Opal.Isomorfeus.$cached_component_class('#{component_name}'); }
|
95
|
+
let sheets = new global.Opal.global.ReactJSS.SheetsRegistry();
|
96
|
+
let generate_id = global.Opal.global.ReactJSS.createGenerateId();
|
97
|
+
let app = global.Opal.React.$create_element(component, global.Opal.Hash.$new(#{Oj.dump(props, mode: :strict)}));
|
98
|
+
let element = global.Opal.global.React.createElement(global.Opal.global.ReactJSS.JssProvider, { registry: sheets, generateId: generate_id }, app);
|
99
|
+
rendered_tree = global.Opal.global.ReactDOMServer.renderToString(element);
|
100
|
+
ssr_styles = sheets.toString();
|
101
|
+
} else {
|
102
|
+
rendered_tree = global.Opal.Isomorfeus.TopLevel.$render_component_to_string('#{component_name}', #{Oj.dump(props, mode: :strict)});
|
103
|
+
}
|
104
|
+
let application_state = global.Opal.Isomorfeus.store.native.getState();
|
79
105
|
if (typeof global.Opal.Isomorfeus.Transport !== 'undefined') { global.Opal.Isomorfeus.Transport.$disconnect(); }
|
80
|
-
return [rendered_tree, application_state, global.Opal.Isomorfeus['$ssr_response_status']()];
|
106
|
+
return [rendered_tree, application_state, ssr_styles, global.Opal.Isomorfeus['$ssr_response_status']()];
|
81
107
|
JAVASCRIPT
|
82
108
|
|
83
109
|
# execute second render pass
|
84
|
-
rendered_tree, application_state, @ssr_response_status = Isomorfeus.ssr_contexts[thread_id_asset].exec(javascript)
|
110
|
+
rendered_tree, application_state, @ssr_styles, @ssr_response_status = Isomorfeus.ssr_contexts[thread_id_asset].exec(javascript)
|
85
111
|
|
86
112
|
# build result
|
87
113
|
render_result << " data-iso-nloc='#{props[:locale]}' data-iso-state='#{Oj.dump(application_state, mode: :strict)}'>"
|
@@ -96,5 +122,9 @@ module Isomorfeus
|
|
96
122
|
def ssr_response_status
|
97
123
|
@ssr_response_status || 200
|
98
124
|
end
|
125
|
+
|
126
|
+
def ssr_styles
|
127
|
+
@ssr_styles || ''
|
128
|
+
end
|
99
129
|
end
|
100
130
|
end
|
@@ -8,10 +8,20 @@ module Isomorfeus
|
|
8
8
|
# nothing, but keep it for compatibility with browser
|
9
9
|
end
|
10
10
|
|
11
|
-
def render_component_to_string(component_name,
|
12
|
-
|
13
|
-
|
14
|
-
|
11
|
+
def render_component_to_string(component_name, props)
|
12
|
+
component = nil
|
13
|
+
%x{
|
14
|
+
if (typeof component_name === 'string' || component_name instanceof String) {
|
15
|
+
component = component_name.split(".").reduce(function(o, x) {
|
16
|
+
return (o !== null && typeof o[x] !== "undefined" && o[x] !== null) ? o[x] : null;
|
17
|
+
}, Opal.global)
|
18
|
+
} else {
|
19
|
+
component = component_name;
|
20
|
+
}
|
21
|
+
}
|
22
|
+
component = Isomorfeus.cached_component_class(component_name) unless component
|
23
|
+
|
24
|
+
ReactDOMServer.render_to_string(React.create_element(component, `Opal.Hash.$new(props)`))
|
15
25
|
end
|
16
26
|
end
|
17
27
|
end
|
@@ -64,11 +64,7 @@ module LucidApp
|
|
64
64
|
}
|
65
65
|
listener() {
|
66
66
|
let next_state = Opal.Isomorfeus.store.native.getState();
|
67
|
-
|
68
|
-
let next_ruby_state = Opal.Hash.$new(next_state);
|
69
|
-
if (#{`next_ruby_state` != `current_ruby_state`}) {
|
70
|
-
this.setState({ isomorfeus_store_state: next_state });
|
71
|
-
}
|
67
|
+
this.setState({ isomorfeus_store_state: next_state });
|
72
68
|
}
|
73
69
|
componentWillUnmount() {
|
74
70
|
if (typeof this.unsubscriber === "function") { this.unsubscriber(); };
|
@@ -80,13 +76,15 @@ module LucidApp
|
|
80
76
|
}
|
81
77
|
}
|
82
78
|
base.jss_styles = null;
|
79
|
+
base.jss_styles_used = null;
|
83
80
|
base.jss_theme = {};
|
84
81
|
base.use_styles = null;
|
85
82
|
base.themed_react_component = function(props) {
|
86
83
|
let classes = null;
|
87
84
|
let theme = Opal.global.ReactJSS.useTheme();
|
88
85
|
if (base.jss_styles) {
|
89
|
-
if (!base.use_styles || Opal.Isomorfeus["$development?"]()) {
|
86
|
+
if (!base.use_styles || (Opal.Isomorfeus["$development?"]() && !Object.is(base.jss_styles, base.jss_styles_used))) {
|
87
|
+
base.jss_styles_used = base.jss_styles;
|
90
88
|
let styles = base.jss_styles
|
91
89
|
if (typeof styles === 'function') { styles = styles(theme); }
|
92
90
|
base.use_styles = Opal.global.ReactJSS.createUseStyles(styles);
|
@@ -6,7 +6,6 @@ module LucidComponent
|
|
6
6
|
end
|
7
7
|
|
8
8
|
def method_missing(key, *args, &block)
|
9
|
-
@native_component_instance.JS.register_used_store_path(['application_state', key])
|
10
9
|
if `args.length > 0`
|
11
10
|
# set class state, simply a dispatch
|
12
11
|
action = { type: 'APPLICATION_STATE', name: (`key.endsWith('=')` ? key.chop : key), value: args[0] }
|
@@ -7,7 +7,6 @@ module LucidComponent
|
|
7
7
|
end
|
8
8
|
|
9
9
|
def method_missing(key, *args, &block)
|
10
|
-
@native_component_instance.JS.register_used_store_path(['component_class_state', @component_name, key])
|
11
10
|
if `args.length > 0`
|
12
11
|
# set class state, simply a dispatch
|
13
12
|
action = { type: 'COMPONENT_CLASS_STATE', class: @component_name, name: (`key.endsWith('=')` ? key.chop : key), value: args[0] }
|
@@ -45,17 +45,13 @@ module LucidComponent
|
|
45
45
|
Opal.React.render_buffer.push([]);
|
46
46
|
Opal.React.active_components.push(this);
|
47
47
|
Opal.React.active_redux_components.push(this);
|
48
|
-
this.used_store_paths = [];
|
49
48
|
#{`this.__ruby_instance`.instance_exec(&`base.render_block`)};
|
50
49
|
Opal.React.active_redux_components.pop();
|
51
50
|
Opal.React.active_components.pop();
|
52
51
|
return Opal.React.render_buffer.pop();
|
53
52
|
}
|
54
53
|
data_access() {
|
55
|
-
return this.
|
56
|
-
}
|
57
|
-
register_used_store_path(path) {
|
58
|
-
this.used_store_paths.push(path);
|
54
|
+
return this.context;
|
59
55
|
}
|
60
56
|
shouldComponentUpdate(next_props, next_state) {
|
61
57
|
var next_props_keys = Object.keys(next_props);
|
@@ -66,14 +62,8 @@ module LucidComponent
|
|
66
62
|
var this_state_keys = Object.keys(this.state);
|
67
63
|
if (next_state_keys.length !== this_state_keys.length) { return true; }
|
68
64
|
|
69
|
-
var used_store_result;
|
70
65
|
for (var property in next_props) {
|
71
|
-
if (property
|
72
|
-
used_store_result = this.scu_for_used_store_paths(this, this.state.isomorfeus_store, next_state.isomorfeus_store);
|
73
|
-
if (used_store_result) {
|
74
|
-
return true;
|
75
|
-
}
|
76
|
-
} else if (next_props.hasOwnProperty(property)) {
|
66
|
+
if (next_props.hasOwnProperty(property)) {
|
77
67
|
if (!this.props.hasOwnProperty(property)) { return true; };
|
78
68
|
if (property == "children") { if (next_props.children !== this.props.children) { return true; }}
|
79
69
|
else if (typeof next_props[property] !== "undefined" && next_props[property] !== null &&
|
@@ -95,27 +85,6 @@ module LucidComponent
|
|
95
85
|
}
|
96
86
|
return false;
|
97
87
|
}
|
98
|
-
scu_for_used_store_paths(self, current_state, next_state) {
|
99
|
-
var unique_used_store_paths = self.used_store_paths.filter(function(elem, pos, paths) {
|
100
|
-
return (paths.indexOf(elem) === pos);
|
101
|
-
});
|
102
|
-
var used_length = unique_used_store_paths.length;
|
103
|
-
var store_path;
|
104
|
-
var current_value;
|
105
|
-
var next_value;
|
106
|
-
var store_path_last;
|
107
|
-
for (var i = 0; i < used_length; i++) {
|
108
|
-
store_path = unique_used_store_paths[i];
|
109
|
-
store_path_last = store_path.length - 1;
|
110
|
-
if (store_path[store_path_last].constructor === Array) {
|
111
|
-
store_path[store_path_last] = JSON.stringify(store_path[store_path_last]);
|
112
|
-
}
|
113
|
-
current_value = store_path.reduce(function(prev, curr) { return prev && prev[curr]; }, current_state);
|
114
|
-
next_value = store_path.reduce(function(prev, curr) { return prev && prev[curr]; }, next_state);
|
115
|
-
if (current_value !== next_value) { return true; };
|
116
|
-
}
|
117
|
-
return false;
|
118
|
-
}
|
119
88
|
validateProp(props, propName, componentName) {
|
120
89
|
try { base.$validate_prop(propName, props[propName]) }
|
121
90
|
catch (e) { return new Error(componentName + " Error: prop validation failed: " + e.message); }
|
@@ -124,12 +93,14 @@ module LucidComponent
|
|
124
93
|
}
|
125
94
|
base.lucid_react_component.contextType = Opal.global.LucidApplicationContext;
|
126
95
|
base.jss_styles = null;
|
96
|
+
base.jss_styles_used = null;
|
127
97
|
base.use_styles = null;
|
128
98
|
base.react_component = function(props) {
|
129
99
|
let classes = null;
|
130
100
|
let theme = Opal.global.ReactJSS.useTheme();
|
131
101
|
if (base.jss_styles) {
|
132
|
-
if (!base.use_styles || Opal.Isomorfeus["$development?"]()) {
|
102
|
+
if (!base.use_styles || (Opal.Isomorfeus["$development?"]() && !Object.is(base.jss_styles, base.jss_styles_used))) {
|
103
|
+
base.jss_styles_used = base.jss_styles;
|
133
104
|
let styles = base.jss_styles
|
134
105
|
if (typeof styles === 'function') { styles = base.jss_styles(theme); }
|
135
106
|
base.use_styles = Opal.global.ReactJSS.createUseStyles(styles);
|
@@ -65,12 +65,7 @@ module LucidMaterial
|
|
65
65
|
}
|
66
66
|
listener() {
|
67
67
|
var next_state = Opal.Isomorfeus.store.native.getState();
|
68
|
-
|
69
|
-
var next_ruby_state = Opal.Hash.$new(next_state);
|
70
|
-
if (#{`next_ruby_state` != `current_ruby_state`}) {
|
71
|
-
var self = this;
|
72
|
-
/* setTimeout(function() { */ self.setState({ isomorfeus_store_state: next_state }); /*}, 0 ); */
|
73
|
-
}
|
68
|
+
this.setState({ isomorfeus_store_state: next_state });
|
74
69
|
}
|
75
70
|
componentWillUnmount() {
|
76
71
|
if (typeof this.unsubscriber === "function") { this.unsubscriber(); };
|
@@ -82,13 +77,15 @@ module LucidMaterial
|
|
82
77
|
}
|
83
78
|
}
|
84
79
|
base.jss_styles = null;
|
80
|
+
base.jss_styles_used = null;
|
85
81
|
base.jss_theme = {};
|
86
82
|
base.use_styles = null;
|
87
83
|
base.themed_react_component = function(props) {
|
88
84
|
let classes = null;
|
89
85
|
let theme = Opal.global.MuiStyles.useTheme();
|
90
86
|
if (base.jss_styles) {
|
91
|
-
if (!base.use_styles || Opal.Isomorfeus["$development?"]()) {
|
87
|
+
if (!base.use_styles || (Opal.Isomorfeus["$development?"]() && !Object.is(base.jss_styles, base.jss_styles_used))) {
|
88
|
+
base.jss_styles_used = base.jss_styles;
|
92
89
|
let styles = base.jss_styles
|
93
90
|
if (typeof styles === 'function') { styles = styles(theme); }
|
94
91
|
base.use_styles = Opal.global.MuiStyles.makeStyles(styles);
|
@@ -46,17 +46,13 @@ module LucidMaterial
|
|
46
46
|
Opal.React.render_buffer.push([]);
|
47
47
|
Opal.React.active_components.push(this);
|
48
48
|
Opal.React.active_redux_components.push(this);
|
49
|
-
this.used_store_paths = [];
|
50
49
|
#{`this.__ruby_instance`.instance_exec(&`base.render_block`)};
|
51
50
|
Opal.React.active_redux_components.pop();
|
52
51
|
Opal.React.active_components.pop();
|
53
52
|
return Opal.React.render_buffer.pop();
|
54
53
|
}
|
55
54
|
data_access() {
|
56
|
-
return this.
|
57
|
-
}
|
58
|
-
register_used_store_path(path) {
|
59
|
-
this.used_store_paths.push(path);
|
55
|
+
return this.context;
|
60
56
|
}
|
61
57
|
shouldComponentUpdate(next_props, next_state) {
|
62
58
|
var next_props_keys = Object.keys(next_props);
|
@@ -67,14 +63,8 @@ module LucidMaterial
|
|
67
63
|
var this_state_keys = Object.keys(this.state);
|
68
64
|
if (next_state_keys.length !== this_state_keys.length) { return true; }
|
69
65
|
|
70
|
-
var used_store_result;
|
71
66
|
for (var property in next_props) {
|
72
|
-
if (property
|
73
|
-
used_store_result = this.scu_for_used_store_paths(this, this.state.isomorfeus_store, next_state.isomorfeus_store);
|
74
|
-
if (used_store_result) {
|
75
|
-
return true;
|
76
|
-
}
|
77
|
-
} else if (next_props.hasOwnProperty(property)) {
|
67
|
+
if (next_props.hasOwnProperty(property)) {
|
78
68
|
if (!this.props.hasOwnProperty(property)) { return true; };
|
79
69
|
if (property == "children") { if (next_props.children !== this.props.children) { return true; }}
|
80
70
|
else if (typeof next_props[property] !== "undefined" && next_props[property] !== null &&
|
@@ -96,27 +86,6 @@ module LucidMaterial
|
|
96
86
|
}
|
97
87
|
return false;
|
98
88
|
}
|
99
|
-
scu_for_used_store_paths(self, current_state, next_state) {
|
100
|
-
var unique_used_store_paths = self.used_store_paths.filter(function(elem, pos, paths) {
|
101
|
-
return (paths.indexOf(elem) === pos);
|
102
|
-
});
|
103
|
-
var used_length = unique_used_store_paths.length;
|
104
|
-
var store_path;
|
105
|
-
var current_value;
|
106
|
-
var next_value;
|
107
|
-
var store_path_last;
|
108
|
-
for (var i = 0; i < used_length; i++) {
|
109
|
-
store_path = unique_used_store_paths[i];
|
110
|
-
store_path_last = store_path.length - 1;
|
111
|
-
if (store_path[store_path_last].constructor === Array) {
|
112
|
-
store_path[store_path_last] = JSON.stringify(store_path[store_path_last]);
|
113
|
-
}
|
114
|
-
current_value = store_path.reduce(function(prev, curr) { return prev && prev[curr]; }, current_state);
|
115
|
-
next_value = store_path.reduce(function(prev, curr) { return prev && prev[curr]; }, next_state);
|
116
|
-
if (current_value !== next_value) { return true; };
|
117
|
-
}
|
118
|
-
return false;
|
119
|
-
}
|
120
89
|
validateProp(props, propName, componentName) {
|
121
90
|
try { base.$validate_prop(propName, props[propName]) }
|
122
91
|
catch (e) { return new Error(componentName + " Error: prop validation failed: " + e.message); }
|
@@ -125,12 +94,14 @@ module LucidMaterial
|
|
125
94
|
};
|
126
95
|
base.lucid_react_component.contextType = Opal.global.LucidApplicationContext;
|
127
96
|
base.jss_styles = null;
|
97
|
+
base.jss_styles_used = null;
|
128
98
|
base.use_styles = null;
|
129
99
|
base.react_component = function(props) {
|
130
100
|
let classes = null;
|
131
101
|
let theme = Opal.global.MuiStyles.useTheme();
|
132
102
|
if (base.jss_styles) {
|
133
|
-
if (!base.use_styles || Opal.Isomorfeus["$development?"]()) {
|
103
|
+
if (!base.use_styles || (Opal.Isomorfeus["$development?"]() && !Object.is(base.jss_styles, base.jss_styles_used))) {
|
104
|
+
base.jss_styles_used = base.jss_styles;
|
134
105
|
let styles = base.jss_styles
|
135
106
|
if (typeof styles === 'function') { styles = styles(theme); }
|
136
107
|
base.use_styles = Opal.global.MuiStyles.makeStyles(styles);
|
data/lib/react/version.rb
CHANGED
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: isomorfeus-react
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 16.9.
|
4
|
+
version: 16.9.17
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Jan Biedermann
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2019-08-
|
11
|
+
date: 2019-08-28 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: oj
|
@@ -86,14 +86,14 @@ dependencies:
|
|
86
86
|
requirements:
|
87
87
|
- - "~>"
|
88
88
|
- !ruby/object:Gem::Version
|
89
|
-
version: 4.0.
|
89
|
+
version: 4.0.12
|
90
90
|
type: :runtime
|
91
91
|
prerelease: false
|
92
92
|
version_requirements: !ruby/object:Gem::Requirement
|
93
93
|
requirements:
|
94
94
|
- - "~>"
|
95
95
|
- !ruby/object:Gem::Version
|
96
|
-
version: 4.0.
|
96
|
+
version: 4.0.12
|
97
97
|
- !ruby/object:Gem::Dependency
|
98
98
|
name: isomorfeus-speednode
|
99
99
|
requirement: !ruby/object:Gem::Requirement
|