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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 70053e0a26f29ea0ee7021a2842b5c87a90059663cd6632c6d0f09537fde5a14
4
- data.tar.gz: d4e4392d9c50afce0a800afd847d5490ef915614fbe8a31944088e03ca38d3d9
3
+ metadata.gz: d6a624f8280c1b483397dadc3361be73488bb6004dc263aaec62d0bab21cf065
4
+ data.tar.gz: 48003a6d556f82771e4cbe4b63f163bb4f376c9077162f43114e52d9f73fa832
5
5
  SHA512:
6
- metadata.gz: 94d4bf83a2dbcdcd8842b11bd8b1a2f5724d4862b1c4a27b07786542222a1b0aba390f8c01639e1680c7787d9183a93269fb6972418b20bbe243c62e925a69fb
7
- data.tar.gz: bd391ac3e496bf54711ef02f0b2e113dac261b1f5e802dd36ba557660f8da1863e5e3ddbd450531a653d5a7f9aa84b09d2271924e916f1f8f24b19f7e34edd0b
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, Redux, Lucid and LucidMaterial Components:
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
- mount_component(component, props, root_element, hydrated)
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
- var children = Opal.React.render_buffer.pop();
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
- var next_state = Opal.Isomorfeus.store.native.getState();
68
- var current_ruby_state = Opal.Hash.$new(this.state.isomorfeus_store_state);
69
- var next_ruby_state = Opal.Hash.$new(next_state);
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
- var self = this;
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.react_component = function(props) {
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
- base.use_styles = Opal.global.ReactJSS.createUseStyles(base.jss_styles);
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
- if (classes) {
94
- let classes_props = Object.assign({}, props, { classes: classes });
95
- return Opal.global.React.createElement(base.lucid_react_component, classes_props);
96
- } else {
97
- return Opal.global.React.createElement(base.lucid_react_component, props);
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, access_key = 'state')
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[this.access_key]["isomorfeus_store"]["application_state"].hasOwnProperty(key)`
18
- return @native_component_instance.JS[@access_key].JS[:isomorfeus_store].JS[:application_state].JS[key]
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, access_key = 'state')
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[@access_key].JS[:isomorfeus_store].JS[:component_class_state].JS[@component_name] &&
20
- @native_component_instance.JS[@access_key].JS[:isomorfeus_store].JS[:component_class_state].JS[@component_name].JS.hasOwnProperty(key)
21
- return @native_component_instance.JS[@access_key].JS[:isomorfeus_store].JS[:component_class_state].JS[@component_name].JS[key]
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}, 'props')`
6
- @class_store = `Opal.LucidComponent.ClassStoreProxy.$new(#{self}, 'props')`
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}, 'props')`
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, access_key = 'state')
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[@access_key].JS[:isomorfeus_store].JS[:component_state].JS[@component_object_id] &&
22
- @native_component_instance.JS[@access_key].JS[:isomorfeus_store].JS[:component_state].JS[@component_object_id].JS.hasOwnProperty(key)
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[@access_key].JS[:isomorfeus_store].JS[:component_state].JS[@component_object_id].JS[key]
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
- base.use_styles = Opal.global.ReactJSS.createUseStyles(base.jss_styles);
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
- return Opal.global.React.createElement(Opal.global.LucidApplicationContext.Consumer, null, function(store) {
137
- let store_props = Object.assign({}, props, { isomorfeus_store: store });
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
- var result = block.$call(Opal.Hash.$new(theme));
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 classes
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.lucid_material_component = null;
86
- base.react_component = class extends Opal.global.React.Component {
87
- constructor(props) { super(props) }
88
- static get displayName() {
89
- return #{component_name} + 'Shell';
90
- }
91
- render() {
92
- if (base.jss_styles) {
93
- if (!base.lucid_material_component || Opal.Isomorfeus["$development?"]()) {
94
- base.lucid_material_component = Opal.global.MuiStyles.withStyles(base.jss_styles)(function(props){
95
- return Opal.global.React.createElement(base.lucid_react_component, props);
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.lucid_material_component = null;
129
- base.react_component = function(outer_props) {
130
- return Opal.global.React.createElement(Opal.global.LucidApplicationContext.Consumer, null, function(store) {
131
- var store_props = Object.assign({}, outer_props, { isomorfeus_store: store });
132
- if (base.jss_styles) {
133
- if (!base.lucid_material_component || Opal.Isomorfeus["$development?"]()) {
134
- base.lucid_material_component = Opal.global.MuiStyles.withStyles(base.jss_styles)(function(props) {
135
- return Opal.global.React.createElement(base.lucid_react_component, props);
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
- return #@native[prop];
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
@@ -1,3 +1,3 @@
1
1
  module React
2
- VERSION = '16.9.14'
2
+ VERSION = '16.9.15'
3
3
  end
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.14
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-26 00:00:00.000000000 Z
11
+ date: 2019-08-27 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: oj