isomorfeus-react 16.9.14 → 16.9.15
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 +1 -1
- data/lib/isomorfeus/top_level_browser.rb +11 -2
- data/lib/lucid_app/api.rb +20 -0
- data/lib/lucid_app/native_component_constructor.rb +18 -16
- data/lib/lucid_component/app_store_proxy.rb +3 -4
- data/lib/lucid_component/class_store_proxy.rb +4 -5
- data/lib/lucid_component/initializer.rb +3 -3
- data/lib/lucid_component/instance_store_proxy.rb +4 -5
- data/lib/lucid_component/native_component_constructor.rb +7 -11
- data/lib/lucid_component/styles_support.rb +8 -2
- data/lib/lucid_material/app/native_component_constructor.rb +18 -17
- data/lib/lucid_material/component/native_component_constructor.rb +14 -15
- data/lib/react/component/props.rb +4 -0
- data/lib/react/component/styles.rb +6 -1
- data/lib/react/version.rb +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: d6a624f8280c1b483397dadc3361be73488bb6004dc263aaec62d0bab21cf065
|
4
|
+
data.tar.gz: 48003a6d556f82771e4cbe4b63f163bb4f376c9077162f43114e52d9f73fa832
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: bf81b8abb2289a745047e4820a1706aa61d88e351009c894c57c0145fb03fdac4b8250eab814cb55545930d28a057150bdbc5e69b35392ab0acc1b4a9b5d3783
|
7
|
+
data.tar.gz: eec392fecf656b27d0ec43ce02dbc0d412f5a4ce59dd7d76438810b7867aac2cf8bdfeb64935f435a7da1985d8f83ca50e48c7c33de73bc0f8ace9cef815e7d1
|
data/README.md
CHANGED
@@ -28,7 +28,7 @@ Component Types:
|
|
28
28
|
Which component to use?
|
29
29
|
- Usually LucidApp and LucidComponent along with some imported javascript components.
|
30
30
|
|
31
|
-
Specific to Class, Pure,
|
31
|
+
Specific to Class, Pure, Lucid and LucidMaterial Components:
|
32
32
|
- [Events](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/events.md)
|
33
33
|
- [Lifecycle Callbacks](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/lifecycle_callbacks.md)
|
34
34
|
- [Props](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/props.md)
|
@@ -10,7 +10,7 @@ module Isomorfeus
|
|
10
10
|
component = nil
|
11
11
|
begin
|
12
12
|
component = component_name.constantize
|
13
|
-
rescue
|
13
|
+
rescue LoadError
|
14
14
|
@timeout_start = Time.now unless @timeout_start
|
15
15
|
if (Time.now - @timeout_start) < 10
|
16
16
|
`setTimeout(Opal.Isomorfeus.TopLevel['$mount!'], 100)`
|
@@ -32,7 +32,16 @@ module Isomorfeus
|
|
32
32
|
}
|
33
33
|
}
|
34
34
|
end
|
35
|
-
|
35
|
+
begin
|
36
|
+
mount_component(component, props, root_element, hydrated)
|
37
|
+
rescue LoadError
|
38
|
+
@timeout_start = Time.now unless @timeout_start
|
39
|
+
if (Time.now - @timeout_start) < 10
|
40
|
+
`setTimeout(Opal.Isomorfeus.TopLevel['$mount!'], 100)`
|
41
|
+
else
|
42
|
+
`console.error("Unable to mount '" + #{component_name} + "'!")`
|
43
|
+
end
|
44
|
+
end
|
36
45
|
end
|
37
46
|
end
|
38
47
|
end
|
data/lib/lucid_app/api.rb
CHANGED
@@ -1,6 +1,26 @@
|
|
1
1
|
module LucidApp
|
2
2
|
module API
|
3
3
|
def self.included(base)
|
4
|
+
base.instance_exec do
|
5
|
+
def theme(theme_hash = nil, &block)
|
6
|
+
if block_given?
|
7
|
+
%x{
|
8
|
+
let result = block.$call();
|
9
|
+
base.jss_theme = result.$to_n();
|
10
|
+
return result;
|
11
|
+
}
|
12
|
+
elsif theme_hash
|
13
|
+
`base.jss_theme = #{theme_hash.to_n}` if theme_hash
|
14
|
+
theme_hash
|
15
|
+
elsif `typeof base.jss_theme === 'object'`
|
16
|
+
`Opal.Hash.$new(base.jss_theme)`
|
17
|
+
else
|
18
|
+
nil
|
19
|
+
end
|
20
|
+
end
|
21
|
+
alias_method :theme=, :theme
|
22
|
+
end
|
23
|
+
|
4
24
|
def context
|
5
25
|
@native.JS[:context]
|
6
26
|
end
|
@@ -7,7 +7,6 @@ module LucidApp
|
|
7
7
|
component_name = base.to_s
|
8
8
|
# language=JS
|
9
9
|
%x{
|
10
|
-
base.jss_styles = null;
|
11
10
|
base.lucid_react_component = class extends Opal.global.React.Component {
|
12
11
|
constructor(props) {
|
13
12
|
super(props);
|
@@ -60,16 +59,15 @@ module LucidApp
|
|
60
59
|
#{`this.__ruby_instance`.instance_exec(&`base.render_block`)};
|
61
60
|
Opal.React.active_redux_components.pop();
|
62
61
|
Opal.React.active_components.pop();
|
63
|
-
|
62
|
+
let children = Opal.React.render_buffer.pop();
|
64
63
|
return Opal.global.React.createElement(Opal.global.LucidApplicationContext.Provider, { value: this.state.isomorfeus_store_state }, children);
|
65
64
|
}
|
66
65
|
listener() {
|
67
|
-
|
68
|
-
|
69
|
-
|
66
|
+
let next_state = Opal.Isomorfeus.store.native.getState();
|
67
|
+
let current_ruby_state = Opal.Hash.$new(this.state.isomorfeus_store_state);
|
68
|
+
let next_ruby_state = Opal.Hash.$new(next_state);
|
70
69
|
if (#{`next_ruby_state` != `current_ruby_state`}) {
|
71
|
-
|
72
|
-
/* setTimeout(function() { */ self.setState({ isomorfeus_store_state: next_state }); /*}, 0 ); */
|
70
|
+
this.setState({ isomorfeus_store_state: next_state });
|
73
71
|
}
|
74
72
|
}
|
75
73
|
componentWillUnmount() {
|
@@ -81,24 +79,28 @@ module LucidApp
|
|
81
79
|
return null;
|
82
80
|
}
|
83
81
|
}
|
82
|
+
base.jss_styles = null;
|
83
|
+
base.jss_theme = {};
|
84
84
|
base.use_styles = null;
|
85
|
-
base.
|
85
|
+
base.themed_react_component = function(props) {
|
86
86
|
let classes = null;
|
87
|
+
let theme = Opal.global.ReactJSS.useTheme();
|
87
88
|
if (base.jss_styles) {
|
88
89
|
if (!base.use_styles || Opal.Isomorfeus["$development?"]()) {
|
89
|
-
|
90
|
+
let styles = base.jss_styles
|
91
|
+
if (typeof styles === 'function') { styles = styles(theme); }
|
92
|
+
base.use_styles = Opal.global.ReactJSS.createUseStyles(styles);
|
90
93
|
}
|
91
94
|
classes = base.use_styles();
|
92
95
|
}
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
}
|
96
|
+
let themed_classes_props = Object.assign({}, props, { classes: classes, theme: theme });
|
97
|
+
return Opal.global.React.createElement(base.lucid_react_component, themed_classes_props);
|
98
|
+
}
|
99
|
+
base.react_component = function(props) {
|
100
|
+
let themed_component = Opal.global.React.createElement(base.themed_react_component, props);
|
101
|
+
return Opal.global.React.createElement(Opal.global.ReactJSS.ThemeProvider, { theme: base.jss_theme }, themed_component);
|
99
102
|
}
|
100
103
|
}
|
101
104
|
end
|
102
105
|
end
|
103
106
|
end
|
104
|
-
|
@@ -1,9 +1,8 @@
|
|
1
1
|
module LucidComponent
|
2
2
|
class AppStoreProxy
|
3
|
-
def initialize(component_instance
|
3
|
+
def initialize(component_instance)
|
4
4
|
@native_component_instance = component_instance.to_n
|
5
5
|
@component_instance = component_instance
|
6
|
-
@access_key = access_key
|
7
6
|
end
|
8
7
|
|
9
8
|
def method_missing(key, *args, &block)
|
@@ -14,8 +13,8 @@ module LucidComponent
|
|
14
13
|
Isomorfeus.store.dispatch(action)
|
15
14
|
else
|
16
15
|
# check if we have a component local state value
|
17
|
-
if `this.native_component_instance
|
18
|
-
return @native_component_instance.JS[
|
16
|
+
if `this.native_component_instance.context.application_state.hasOwnProperty(key)`
|
17
|
+
return @native_component_instance.JS['context'].JS[:application_state].JS[key]
|
19
18
|
elsif @component_instance.class.default_app_store_defined && @component_instance.class.app_store.to_h.key?(key)
|
20
19
|
# check if a default value was given
|
21
20
|
return @component_instance.class.app_store.to_h[key]
|
@@ -1,10 +1,9 @@
|
|
1
1
|
module LucidComponent
|
2
2
|
class ClassStoreProxy
|
3
|
-
def initialize(component_instance
|
3
|
+
def initialize(component_instance)
|
4
4
|
@native_component_instance = component_instance.to_n
|
5
5
|
@component_instance = component_instance
|
6
6
|
@component_name = component_instance.class.to_s
|
7
|
-
@access_key = access_key
|
8
7
|
end
|
9
8
|
|
10
9
|
def method_missing(key, *args, &block)
|
@@ -16,9 +15,9 @@ module LucidComponent
|
|
16
15
|
else
|
17
16
|
# get class state
|
18
17
|
# check if we have a component local state value
|
19
|
-
if @native_component_instance.JS[
|
20
|
-
@native_component_instance.JS[
|
21
|
-
return @native_component_instance.JS[
|
18
|
+
if @native_component_instance.JS['context'].JS[:component_class_state].JS[@component_name] &&
|
19
|
+
@native_component_instance.JS['context'].JS[:component_class_state].JS[@component_name].JS.hasOwnProperty(key)
|
20
|
+
return @native_component_instance.JS['context'].JS[:component_class_state].JS[@component_name].JS[key]
|
22
21
|
elsif @component_instance.class.default_class_store_defined && @component_instance.class.class_store.to_h.key?(key)
|
23
22
|
# check if a default value was given
|
24
23
|
return @component_instance.class.class_store.to_h[key]
|
@@ -2,11 +2,11 @@ module LucidComponent
|
|
2
2
|
module Initializer
|
3
3
|
def initialize(native_component)
|
4
4
|
@native = native_component
|
5
|
-
@app_store = `Opal.LucidComponent.AppStoreProxy.$new(#{self}
|
6
|
-
@class_store = `Opal.LucidComponent.ClassStoreProxy.$new(#{self}
|
5
|
+
@app_store = `Opal.LucidComponent.AppStoreProxy.$new(#{self})`
|
6
|
+
@class_store = `Opal.LucidComponent.ClassStoreProxy.$new(#{self})`
|
7
7
|
@props = `Opal.React.Component.Props.$new(#@native)`
|
8
8
|
@state = `Opal.React.Component.State.$new(#@native)`
|
9
|
-
@store = `Opal.LucidComponent.InstanceStoreProxy.$new(#{self}
|
9
|
+
@store = `Opal.LucidComponent.InstanceStoreProxy.$new(#{self})`
|
10
10
|
end
|
11
11
|
end
|
12
12
|
end
|
@@ -1,10 +1,9 @@
|
|
1
1
|
module LucidComponent
|
2
2
|
class InstanceStoreProxy
|
3
|
-
def initialize(component_instance
|
3
|
+
def initialize(component_instance)
|
4
4
|
@native_component_instance = component_instance.to_n
|
5
5
|
@component_instance = component_instance
|
6
6
|
@component_object_id = component_instance.object_id.to_s
|
7
|
-
@access_key = access_key
|
8
7
|
end
|
9
8
|
|
10
9
|
def method_missing(key, *args, &block)
|
@@ -18,10 +17,10 @@ module LucidComponent
|
|
18
17
|
else
|
19
18
|
# get instance state
|
20
19
|
|
21
|
-
if @native_component_instance.JS[
|
22
|
-
@native_component_instance.JS[
|
20
|
+
if @native_component_instance.JS[:context].JS[:component_state].JS[@component_object_id] &&
|
21
|
+
@native_component_instance.JS[:context].JS[:component_state].JS[@component_object_id].JS.hasOwnProperty(key)
|
23
22
|
# check if we have a component local state value
|
24
|
-
return @native_component_instance.JS[
|
23
|
+
return @native_component_instance.JS[:context].JS[:component_state].JS[@component_object_id].JS[key]
|
25
24
|
elsif @component_instance.class.default_instance_store_defined && @component_instance.class.store.to_h.key?(key)
|
26
25
|
# check if a default value was given
|
27
26
|
return @component_instance.class.store.to_h[key]
|
@@ -7,7 +7,6 @@ module LucidComponent
|
|
7
7
|
component_name = base.to_s
|
8
8
|
# language=JS
|
9
9
|
%x{
|
10
|
-
base.jss_styles = null;
|
11
10
|
base.lucid_react_component = class extends Opal.global.React.Component {
|
12
11
|
constructor(props) {
|
13
12
|
super(props);
|
@@ -124,24 +123,21 @@ module LucidComponent
|
|
124
123
|
}
|
125
124
|
}
|
126
125
|
base.lucid_react_component.contextType = Opal.global.LucidApplicationContext;
|
126
|
+
base.jss_styles = null;
|
127
127
|
base.use_styles = null;
|
128
128
|
base.react_component = function(props) {
|
129
129
|
let classes = null;
|
130
|
+
let theme = Opal.global.ReactJSS.useTheme();
|
130
131
|
if (base.jss_styles) {
|
131
132
|
if (!base.use_styles || Opal.Isomorfeus["$development?"]()) {
|
132
|
-
|
133
|
+
let styles = base.jss_styles
|
134
|
+
if (typeof styles === 'function') { styles = base.jss_styles(theme); }
|
135
|
+
base.use_styles = Opal.global.ReactJSS.createUseStyles(styles);
|
133
136
|
}
|
134
137
|
classes = base.use_styles();
|
135
138
|
}
|
136
|
-
|
137
|
-
|
138
|
-
if (classes) {
|
139
|
-
let store_classes_props = Object.assign({}, store_props, { classes: classes });
|
140
|
-
return Opal.global.React.createElement(base.lucid_react_component, store_classes_props);
|
141
|
-
} else {
|
142
|
-
return Opal.global.React.createElement(base.lucid_react_component, store_props);
|
143
|
-
}
|
144
|
-
});
|
139
|
+
let class_theme_props = Object.assign({}, props, { classes: classes, theme: theme });
|
140
|
+
return Opal.global.React.createElement(base.lucid_react_component, class_theme_props);
|
145
141
|
}
|
146
142
|
}
|
147
143
|
end
|
@@ -6,7 +6,8 @@ module LucidComponent
|
|
6
6
|
if block_given?
|
7
7
|
%x{
|
8
8
|
base.jss_styles = function(theme) {
|
9
|
-
|
9
|
+
let wrapped_theme = Opal.React.Component.Styles.$new(theme);
|
10
|
+
var result = block.$call(wrapped_theme);
|
10
11
|
return result.$to_n();
|
11
12
|
}
|
12
13
|
}
|
@@ -20,11 +21,16 @@ module LucidComponent
|
|
20
21
|
nil
|
21
22
|
end
|
22
23
|
end
|
24
|
+
alias_method :styles=, :styles
|
23
25
|
end
|
24
26
|
|
25
|
-
def
|
27
|
+
def styles
|
26
28
|
props.classes
|
27
29
|
end
|
30
|
+
|
31
|
+
def theme
|
32
|
+
props.theme
|
33
|
+
end
|
28
34
|
end
|
29
35
|
end
|
30
36
|
end
|
@@ -8,7 +8,6 @@ module LucidMaterial
|
|
8
8
|
component_name = base.to_s
|
9
9
|
# language=JS
|
10
10
|
%x{
|
11
|
-
base.jss_styles = null;
|
12
11
|
base.lucid_react_component = class extends Opal.global.React.Component {
|
13
12
|
constructor(props) {
|
14
13
|
super(props);
|
@@ -82,24 +81,26 @@ module LucidMaterial
|
|
82
81
|
return null;
|
83
82
|
}
|
84
83
|
}
|
85
|
-
base.
|
86
|
-
base.
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
if (base.
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
});
|
97
|
-
}
|
98
|
-
return Opal.global.React.createElement(base.lucid_material_component, this.props);
|
99
|
-
} else {
|
100
|
-
return Opal.global.React.createElement(base.lucid_react_component, this.props)
|
84
|
+
base.jss_styles = null;
|
85
|
+
base.jss_theme = {};
|
86
|
+
base.use_styles = null;
|
87
|
+
base.themed_react_component = function(props) {
|
88
|
+
let classes = null;
|
89
|
+
let theme = Opal.global.MuiStyles.useTheme();
|
90
|
+
if (base.jss_styles) {
|
91
|
+
if (!base.use_styles || Opal.Isomorfeus["$development?"]()) {
|
92
|
+
let styles = base.jss_styles
|
93
|
+
if (typeof styles === 'function') { styles = styles(theme); }
|
94
|
+
base.use_styles = Opal.global.MuiStyles.makeStyles(styles);
|
101
95
|
}
|
96
|
+
classes = base.use_styles();
|
102
97
|
}
|
98
|
+
let themed_classes_props = Object.assign({}, props, { classes: classes, theme: theme });
|
99
|
+
return Opal.global.React.createElement(base.lucid_react_component, themed_classes_props);
|
100
|
+
}
|
101
|
+
base.react_component = function(props) {
|
102
|
+
let themed_component = Opal.global.React.createElement(base.themed_react_component, props);
|
103
|
+
return Opal.global.React.createElement(Opal.global.MuiStyles.ThemeProvider, { theme: base.jss_theme }, themed_component);
|
103
104
|
}
|
104
105
|
}
|
105
106
|
end
|
@@ -8,7 +8,6 @@ module LucidMaterial
|
|
8
8
|
component_name = base.to_s
|
9
9
|
# language=JS
|
10
10
|
%x{
|
11
|
-
base.jss_styles = null;
|
12
11
|
base.lucid_react_component = class extends Opal.global.React.Component {
|
13
12
|
constructor(props) {
|
14
13
|
super(props);
|
@@ -125,21 +124,21 @@ module LucidMaterial
|
|
125
124
|
}
|
126
125
|
};
|
127
126
|
base.lucid_react_component.contextType = Opal.global.LucidApplicationContext;
|
128
|
-
base.
|
129
|
-
base.
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
return Opal.global.React.createElement(base.lucid_material_component, store_props);
|
139
|
-
} else {
|
140
|
-
return Opal.global.React.createElement(base.lucid_react_component, store_props);
|
127
|
+
base.jss_styles = null;
|
128
|
+
base.use_styles = null;
|
129
|
+
base.react_component = function(props) {
|
130
|
+
let classes = null;
|
131
|
+
let theme = Opal.global.MuiStyles.useTheme();
|
132
|
+
if (base.jss_styles) {
|
133
|
+
if (!base.use_styles || Opal.Isomorfeus["$development?"]()) {
|
134
|
+
let styles = base.jss_styles
|
135
|
+
if (typeof styles === 'function') { styles = styles(theme); }
|
136
|
+
base.use_styles = Opal.global.MuiStyles.makeStyles(styles);
|
141
137
|
}
|
142
|
-
|
138
|
+
classes = base.use_styles();
|
139
|
+
}
|
140
|
+
let themed_classes_props = Object.assign({}, props, { classes: classes, theme: theme });
|
141
|
+
return Opal.global.React.createElement(base.lucid_react_component, themed_classes_props);
|
143
142
|
}
|
144
143
|
}
|
145
144
|
end
|
@@ -15,6 +15,10 @@ module React
|
|
15
15
|
@classes ||= `Opal.React.Component.Styles.$new(#@native.props.classes)`
|
16
16
|
end
|
17
17
|
|
18
|
+
def theme
|
19
|
+
@theme ||= `Opal.React.Component.Styles.$new(#@native.props.theme)`
|
20
|
+
end
|
21
|
+
|
18
22
|
def isomorfeus_store
|
19
23
|
@native.JS[:props].JS[:isomorfeus_store]
|
20
24
|
end
|
@@ -5,10 +5,15 @@ module React
|
|
5
5
|
@native = native
|
6
6
|
end
|
7
7
|
|
8
|
+
# TODO method chain access
|
9
|
+
# we have class.property
|
8
10
|
def method_missing(prop, *args, &block)
|
9
11
|
%x{
|
10
12
|
if (!#@native || typeof #@native[prop] === 'undefined') { return #{nil}; }
|
11
|
-
|
13
|
+
let value = #@native[prop];
|
14
|
+
if (typeof value === 'string' || typeof value === 'number' || Array.isArray(value)) { return value; }
|
15
|
+
if (typeof value === 'function') { return #{Proc.new { `value()` }} }
|
16
|
+
return Opal.React.Component.Styles.$new(value);
|
12
17
|
}
|
13
18
|
end
|
14
19
|
|
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.15
|
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-27 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: oj
|