isomorfeus-react 16.11.0 → 16.11.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +2 -1
- data/lib/isomorfeus-react-material-ui.rb +5 -0
- data/lib/isomorfeus-react.rb +10 -4
- data/lib/lucid_app/api.rb +0 -4
- data/lib/lucid_app/mixin.rb +1 -2
- data/lib/lucid_app/native_component_constructor.rb +4 -1
- data/lib/lucid_app/native_lucid_component_constructor.rb +10 -9
- data/lib/lucid_component/{store_api.rb → api.rb} +32 -1
- data/lib/lucid_component/app_store_proxy.rb +2 -2
- data/lib/lucid_component/mixin.rb +1 -2
- data/lib/lucid_component/native_component_constructor.rb +2 -1
- data/lib/lucid_component/native_lucid_component_constructor.rb +11 -10
- data/lib/lucid_func/base.rb +7 -0
- data/lib/lucid_func/initializer.rb +19 -0
- data/lib/lucid_func/mixin.rb +16 -0
- data/lib/lucid_func/native_component_constructor.rb +74 -0
- data/lib/lucid_material/app/mixin.rb +1 -2
- data/lib/lucid_material/app/native_component_constructor.rb +4 -1
- data/lib/lucid_material/component/mixin.rb +1 -2
- data/lib/lucid_material/component/native_component_constructor.rb +2 -1
- data/lib/lucid_material/func/base.rb +9 -0
- data/lib/lucid_material/func/initializer.rb +21 -0
- data/lib/lucid_material/func/mixin.rb +18 -0
- data/lib/lucid_material/func/native_component_constructor.rb +76 -0
- data/lib/react/component/event_handler.rb +3 -6
- data/lib/react/component/native_component_constructor.rb +8 -7
- data/lib/react/function_component/api.rb +8 -6
- data/lib/react/function_component/event_handler.rb +13 -9
- data/lib/react/function_component/initializer.rb +18 -0
- data/lib/react/function_component/mixin.rb +2 -1
- data/lib/react/function_component/native_component_constructor.rb +43 -0
- data/lib/react/memo_component/mixin.rb +2 -1
- data/lib/react/memo_component/native_component_constructor.rb +44 -0
- data/lib/react/native_constant_wrapper.rb +5 -1
- data/lib/react/version.rb +1 -1
- metadata +21 -7
- data/lib/lucid_component/styles_support.rb +0 -37
- data/lib/react/function_component/creator.rb +0 -35
- data/lib/react/memo_component/creator.rb +0 -35
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: b5301ce025d6a20a58407e97c18e9cb8035239521878ba82ed8d8595feb80112
|
4
|
+
data.tar.gz: afbd4361a197d7ba37968b0058520ef1ce922028debc2a137fd8efb0adad5445
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: e6cac4b0b0259f8f3480b8aa8794e3e6919c79486e99039a73b7835b97897b4059ffe66cc559cf7263381e9aa7e0c5c91d95cdca3de647491b95b7eeb97ad7db
|
7
|
+
data.tar.gz: 3da5277c55b661864d71edc26800ffb05a82afeedc4dca8b73948bbc4fb37d6b13d20fe4a2394fd06ac2d733d31218946ee7d542514039be7ba6f5ac7a0292d0
|
data/README.md
CHANGED
@@ -9,7 +9,7 @@ At the [Isomorfeus Framework Project](http://isomorfeus.com)
|
|
9
9
|
isomorfeus-react version follows the React version which features and API it implements.
|
10
10
|
|
11
11
|
### React
|
12
|
-
Isomorfeus-react 16.
|
12
|
+
Isomorfeus-react 16.11.x implements features and the API of React 16.11 and should be used with React 16.11
|
13
13
|
|
14
14
|
### Preact
|
15
15
|
isomorfeus-react works with preact version 10.0.x.
|
@@ -32,6 +32,7 @@ Component Types:
|
|
32
32
|
- [Function and Memo Component](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/function_component.md)
|
33
33
|
- [Lucid App, Lucid Component](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/lucid_component.md)
|
34
34
|
- [LucidMaterial App, LucidMaterial Component](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/lucid_material_component.md) - support for [MaterialUI](https://material-ui.com)
|
35
|
+
- [Lucid Func, LucidMaterial Func (for use with Hooks)](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/lucid_func_component.md)
|
35
36
|
- [React Javascript Components and React Elements](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/javascript_component.md)
|
36
37
|
|
37
38
|
Which component to use?
|
@@ -8,3 +8,8 @@ require 'lucid_material/component/base'
|
|
8
8
|
require 'lucid_material/app/native_component_constructor'
|
9
9
|
require 'lucid_material/app/mixin'
|
10
10
|
require 'lucid_material/app/base'
|
11
|
+
# LucidMaterial::Func
|
12
|
+
require 'lucid_material/func/initializer'
|
13
|
+
require 'lucid_material/func/native_component_constructor'
|
14
|
+
require 'lucid_material/func/mixin'
|
15
|
+
require 'lucid_material/func/base'
|
data/lib/isomorfeus-react.rb
CHANGED
@@ -51,12 +51,13 @@ if RUBY_ENGINE == 'opal'
|
|
51
51
|
|
52
52
|
# Function Component
|
53
53
|
require 'react/function_component/resolution'
|
54
|
+
require 'react/function_component/initializer'
|
54
55
|
require 'react/function_component/api'
|
55
56
|
require 'react/function_component/event_handler'
|
56
|
-
require 'react/function_component/
|
57
|
+
require 'react/function_component/native_component_constructor'
|
57
58
|
require 'react/function_component/mixin'
|
58
59
|
require 'react/function_component/base'
|
59
|
-
require 'react/memo_component/
|
60
|
+
require 'react/memo_component/native_component_constructor'
|
60
61
|
require 'react/memo_component/mixin'
|
61
62
|
require 'react/memo_component/base'
|
62
63
|
|
@@ -84,10 +85,15 @@ if RUBY_ENGINE == 'opal'
|
|
84
85
|
require 'lucid_app/context'
|
85
86
|
LucidApp::Context.create_application_context
|
86
87
|
|
88
|
+
# LucidFunc
|
89
|
+
require 'lucid_func/initializer'
|
90
|
+
require 'lucid_func/native_component_constructor'
|
91
|
+
require 'lucid_func/mixin'
|
92
|
+
require 'lucid_func/base'
|
93
|
+
|
87
94
|
# LucidComponent
|
88
95
|
require 'lucid_component/environment_support'
|
89
|
-
require 'lucid_component/
|
90
|
-
require 'lucid_component/store_api'
|
96
|
+
require 'lucid_component/api'
|
91
97
|
require 'lucid_component/app_store_defaults'
|
92
98
|
require 'lucid_component/component_class_store_defaults'
|
93
99
|
require 'lucid_component/component_instance_store_defaults'
|
data/lib/lucid_app/api.rb
CHANGED
data/lib/lucid_app/mixin.rb
CHANGED
@@ -11,8 +11,7 @@ module LucidApp
|
|
11
11
|
base.include(::React::Component::Elements)
|
12
12
|
base.include(::React::Component::API)
|
13
13
|
base.include(::React::Component::Callbacks)
|
14
|
-
base.include(::LucidComponent::
|
15
|
-
base.include(::LucidComponent::StylesSupport)
|
14
|
+
base.include(::LucidComponent::API)
|
16
15
|
base.include(::LucidApp::API)
|
17
16
|
base.include(::LucidComponent::Initializer)
|
18
17
|
base.include(::React::Component::Features)
|
@@ -4,7 +4,8 @@ module LucidApp
|
|
4
4
|
# to do so, we convert the props to ruby hashes and then compare
|
5
5
|
# this makes sure, that for example rubys Nil object gets handled properly
|
6
6
|
def self.extended(base)
|
7
|
-
component_name = base.to_s
|
7
|
+
component_name = base.to_s + 'Wrapper'
|
8
|
+
theme_component_name = base.to_s + 'ThemeWrapper'
|
8
9
|
# language=JS
|
9
10
|
%x{
|
10
11
|
base.jss_theme = {};
|
@@ -23,10 +24,12 @@ module LucidApp
|
|
23
24
|
let themed_classes_props = Object.assign({}, props, { classes: classes, theme: theme });
|
24
25
|
return Opal.global.React.createElement(base.lucid_react_component, themed_classes_props);
|
25
26
|
}
|
27
|
+
base.themed_react_component.displayName = #{theme_component_name};
|
26
28
|
base.react_component = function(props) {
|
27
29
|
let themed_component = Opal.global.React.createElement(base.themed_react_component, props);
|
28
30
|
return Opal.global.React.createElement(Opal.global.ReactJSS.ThemeProvider, { theme: base.jss_theme }, themed_component);
|
29
31
|
}
|
32
|
+
base.react_component.displayName = #{component_name};
|
30
33
|
}
|
31
34
|
end
|
32
35
|
end
|
@@ -58,19 +58,20 @@ module LucidApp
|
|
58
58
|
return new_name;
|
59
59
|
}
|
60
60
|
render() {
|
61
|
+
const oper = Opal.React;
|
61
62
|
this.context = this.state.isomorfeus_store_state;
|
62
|
-
|
63
|
-
// console.log("lucid app pushed",
|
64
|
-
|
65
|
-
|
63
|
+
oper.render_buffer.push([]);
|
64
|
+
// console.log("lucid app pushed", oper.render_buffer, oper.render_buffer.toString());
|
65
|
+
oper.active_components.push(this);
|
66
|
+
oper.active_redux_components.push(this.__ruby_instance);
|
66
67
|
let block_result;
|
67
68
|
if (base.preload_block && base.while_loading_block && !this.state.preloaded) { block_result = #{`this.__ruby_instance`.instance_exec(&`base.while_loading_block`)}; }
|
68
69
|
else { block_result = #{`this.__ruby_instance`.instance_exec(&`base.render_block`)}; }
|
69
|
-
if (block_result && (block_result.constructor === String || block_result.constructor === Number)) {
|
70
|
-
|
71
|
-
|
72
|
-
// console.log("lucid app popping",
|
73
|
-
return Opal.global.React.createElement(Opal.global.LucidApplicationContext.Provider, { value: this.state.isomorfeus_store_state },
|
70
|
+
if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { oper.render_buffer[oper.render_buffer.length - 1].push(block_result); }
|
71
|
+
oper.active_redux_components.pop();
|
72
|
+
oper.active_components.pop();
|
73
|
+
// console.log("lucid app popping", oper.render_buffer, oper.render_buffer.toString());
|
74
|
+
return Opal.global.React.createElement(Opal.global.LucidApplicationContext.Provider, { value: this.state.isomorfeus_store_state }, oper.render_buffer.pop());
|
74
75
|
}
|
75
76
|
data_access() {
|
76
77
|
return this.context;
|
@@ -1,7 +1,8 @@
|
|
1
1
|
module LucidComponent
|
2
|
-
module
|
2
|
+
module API
|
3
3
|
def self.included(base)
|
4
4
|
base.instance_exec do
|
5
|
+
# store
|
5
6
|
attr_accessor :app_store
|
6
7
|
attr_accessor :class_store
|
7
8
|
attr_accessor :store
|
@@ -39,6 +40,36 @@ module LucidComponent
|
|
39
40
|
when :off then `base.store_updates = false`
|
40
41
|
end
|
41
42
|
end
|
43
|
+
|
44
|
+
# styles
|
45
|
+
def styles(styles_hash = nil, &block)
|
46
|
+
if block_given?
|
47
|
+
%x{
|
48
|
+
base.jss_styles = function(theme) {
|
49
|
+
let wrapped_theme = Opal.React.Component.Styles.$new(theme);
|
50
|
+
var result = block.$call(wrapped_theme);
|
51
|
+
return result.$to_n();
|
52
|
+
}
|
53
|
+
}
|
54
|
+
nil
|
55
|
+
elsif styles_hash
|
56
|
+
`base.jss_styles = #{styles_hash.to_n}` if styles_hash
|
57
|
+
styles_hash
|
58
|
+
elsif `typeof base.jss_styles === 'object'`
|
59
|
+
`Opal.Hash.$new(base.jss_styles)`
|
60
|
+
else
|
61
|
+
nil
|
62
|
+
end
|
63
|
+
end
|
64
|
+
alias_method :styles=, :styles
|
65
|
+
end
|
66
|
+
|
67
|
+
def styles
|
68
|
+
props.classes
|
69
|
+
end
|
70
|
+
|
71
|
+
def theme
|
72
|
+
props.theme
|
42
73
|
end
|
43
74
|
end
|
44
75
|
end
|
@@ -12,8 +12,8 @@ module LucidComponent
|
|
12
12
|
Isomorfeus.store.dispatch(action)
|
13
13
|
else
|
14
14
|
# check if we have a component local state value
|
15
|
-
if
|
16
|
-
if
|
15
|
+
if `#@native.props.store`
|
16
|
+
if `#@native.props.store.application_state && #@native.props.store.application_state.hasOwnProperty(key)`
|
17
17
|
return @native.JS[:props].JS[:store].JS[:application_state].JS[key]
|
18
18
|
end
|
19
19
|
else
|
@@ -12,8 +12,7 @@ module LucidComponent
|
|
12
12
|
base.include(::React::Component::Elements)
|
13
13
|
base.include(::React::Component::API)
|
14
14
|
base.include(::React::Component::Callbacks)
|
15
|
-
base.include(::LucidComponent::
|
16
|
-
base.include(::LucidComponent::StylesSupport)
|
15
|
+
base.include(::LucidComponent::API)
|
17
16
|
base.include(::LucidComponent::Initializer)
|
18
17
|
base.include(::React::Component::Features)
|
19
18
|
base.include(::React::Component::Resolution)
|
@@ -4,7 +4,7 @@ module LucidComponent
|
|
4
4
|
# to do so, we convert the props to ruby hashes and then compare
|
5
5
|
# this makes sure, that for example rubys Nil object gets handled properly
|
6
6
|
def self.extended(base)
|
7
|
-
component_name = base.to_s
|
7
|
+
component_name = base.to_s + 'Wrapper'
|
8
8
|
# language=JS
|
9
9
|
%x{
|
10
10
|
base.react_component = function(props) {
|
@@ -27,6 +27,7 @@ module LucidComponent
|
|
27
27
|
new_props.store = store;
|
28
28
|
return Opal.global.React.createElement(base.lucid_react_component, new_props);
|
29
29
|
}
|
30
|
+
base.react_component.displayName = #{component_name};
|
30
31
|
}
|
31
32
|
end
|
32
33
|
end
|
@@ -46,22 +46,23 @@ module LucidComponent
|
|
46
46
|
return new_name;
|
47
47
|
}
|
48
48
|
render() {
|
49
|
-
Opal.React
|
50
|
-
|
51
|
-
|
52
|
-
|
49
|
+
const oper = Opal.React;
|
50
|
+
oper.render_buffer.push([]);
|
51
|
+
// console.log("lucid component pushed", oper.render_buffer, oper.render_buffer.toString());
|
52
|
+
oper.active_components.push(this);
|
53
|
+
oper.active_redux_components.push(this);
|
53
54
|
let block_result;
|
54
55
|
if (base.preload_block && base.while_loading_block && !this.state.preloaded) { block_result = #{`this.__ruby_instance`.instance_exec(&`base.while_loading_block`)}; }
|
55
56
|
else { block_result = #{`this.__ruby_instance`.instance_exec(&`base.render_block`)}; }
|
56
|
-
if (block_result && (block_result.constructor === String || block_result.constructor === Number)) {
|
57
|
-
|
58
|
-
|
59
|
-
// console.log("lucid component popping",
|
57
|
+
if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { oper.render_buffer[oper.render_buffer.length - 1].push(block_result); }
|
58
|
+
oper.active_redux_components.pop();
|
59
|
+
oper.active_components.pop();
|
60
|
+
// console.log("lucid component popping", oper.render_buffer, oper.render_buffer.toString());
|
60
61
|
if (base.except_ssr) {
|
61
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}});}
|
62
|
-
else { return Opal.global.React.createElement('div', {'data-ssrhelper': this.__ruby_instance.$class().$to_s()},
|
63
|
+
else { return Opal.global.React.createElement('div', {'data-ssrhelper': this.__ruby_instance.$class().$to_s()}, oper.render_buffer.pop()); }
|
63
64
|
}
|
64
|
-
return
|
65
|
+
return oper.render_buffer.pop();
|
65
66
|
}
|
66
67
|
data_access() {
|
67
68
|
return this.props.store;
|
@@ -0,0 +1,19 @@
|
|
1
|
+
module LucidFunc
|
2
|
+
module Initializer
|
3
|
+
def initialize
|
4
|
+
self.JS[:native_props] = `{ props: null }`
|
5
|
+
@native_props = `Opal.React.Component.Props.$new(#{self})`
|
6
|
+
@app_store = `Opal.LucidComponent.AppStoreProxy.$new(#{self})`
|
7
|
+
@class_store = `Opal.LucidComponent.ClassStoreProxy.$new(#{self})`
|
8
|
+
@store = `Opal.LucidComponent.InstanceStoreProxy.$new(#{self})`
|
9
|
+
event_handlers = self.class.event_handlers
|
10
|
+
event_handler_source = self.class
|
11
|
+
%x{
|
12
|
+
for (var i = 0; i < event_handlers.length; i++) {
|
13
|
+
self[event_handlers[i]] = event_handler_source[event_handlers[i]];
|
14
|
+
self[event_handlers[i]] = self[event_handlers[i]].bind(self);
|
15
|
+
}
|
16
|
+
}
|
17
|
+
end
|
18
|
+
end
|
19
|
+
end
|
@@ -0,0 +1,16 @@
|
|
1
|
+
module LucidFunc
|
2
|
+
module Mixin
|
3
|
+
def self.included(base)
|
4
|
+
base.include(::React::Component::Elements)
|
5
|
+
base.include(::React::Component::Features)
|
6
|
+
base.include(::LucidFunc::Initializer)
|
7
|
+
base.include(::React::FunctionComponent::API)
|
8
|
+
base.include(::React::FunctionComponent::Resolution)
|
9
|
+
base.extend(::React::FunctionComponent::EventHandler)
|
10
|
+
base.extend(::LucidComponent::EnvironmentSupport)
|
11
|
+
base.include(::LucidComponent::EnvironmentSupport)
|
12
|
+
base.extend(::LucidFunc::NativeComponentConstructor)
|
13
|
+
base.include(::LucidComponent::API)
|
14
|
+
end
|
15
|
+
end
|
16
|
+
end
|
@@ -0,0 +1,74 @@
|
|
1
|
+
module LucidFunc
|
2
|
+
module NativeComponentConstructor
|
3
|
+
def self.extended(base)
|
4
|
+
component_name = base.to_s
|
5
|
+
%x{
|
6
|
+
base.store_updates = true;
|
7
|
+
base.equality_checker = null;
|
8
|
+
base.instance_init = function(initial) { return { instance: #{base.new(`{}`)} }; }
|
9
|
+
base.instance_reducer = function(state, action) { return state; }
|
10
|
+
base.react_component = Opal.global.React.memo(function(props) {
|
11
|
+
const og = Opal.global;
|
12
|
+
const oper = Opal.React;
|
13
|
+
oper.render_buffer.push([]);
|
14
|
+
// console.log("function pushed", oper.render_buffer, oper.render_buffer.toString());
|
15
|
+
// Lucid functionality
|
16
|
+
let classes = null;
|
17
|
+
let store;
|
18
|
+
if (base.store_updates) { store = og.React.useContext(og.LucidApplicationContext); }
|
19
|
+
let theme = og.ReactJSS.useTheme();
|
20
|
+
if (base.jss_styles) {
|
21
|
+
if (!base.use_styles || (Opal.Isomorfeus.development && Opal.Isomorfeus.development !== nil)) {
|
22
|
+
let styles;
|
23
|
+
if (typeof base.jss_styles === 'function') { styles = base.jss_styles(theme); }
|
24
|
+
else { styles = base.jss_styles; }
|
25
|
+
base.use_styles = og.ReactJSS.createUseStyles(styles);
|
26
|
+
}
|
27
|
+
classes = base.use_styles();
|
28
|
+
}
|
29
|
+
// prepare Ruby instance
|
30
|
+
const [__ruby_state, __ruby_dispatch] = og.React.useReducer(base.instance_reducer, null, base.instance_init);
|
31
|
+
const __ruby_instance = __ruby_state.instance;
|
32
|
+
__ruby_instance.props = Object.assign({}, props);
|
33
|
+
__ruby_instance.props.store = store;
|
34
|
+
__ruby_instance.props.theme = theme;
|
35
|
+
__ruby_instance.props.classes = classes;
|
36
|
+
oper.active_components.push(__ruby_instance);
|
37
|
+
oper.active_redux_components.push(__ruby_instance);
|
38
|
+
let block_result = #{`__ruby_instance`.instance_exec(&`base.render_block`)};
|
39
|
+
if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { oper.render_buffer[oper.render_buffer.length - 1].push(block_result); }
|
40
|
+
oper.active_redux_components.pop();
|
41
|
+
oper.active_components.pop();
|
42
|
+
// console.log("function popping", oper.render_buffer, oper.render_buffer.toString());
|
43
|
+
return oper.render_buffer.pop();
|
44
|
+
}, base.equality_checker);
|
45
|
+
base.react_component.displayName = #{component_name};
|
46
|
+
}
|
47
|
+
|
48
|
+
base_module = base.to_s.deconstantize
|
49
|
+
if base_module != ''
|
50
|
+
base_module.constantize.define_singleton_method(base.to_s.demodulize) do |*args, &block|
|
51
|
+
`Opal.React.internal_prepare_args_and_render(#{base}.react_component, args, block)`
|
52
|
+
end
|
53
|
+
else
|
54
|
+
Object.define_method(base.to_s) do |*args, &block|
|
55
|
+
`Opal.React.internal_prepare_args_and_render(#{base}.react_component, args, block)`
|
56
|
+
end
|
57
|
+
end
|
58
|
+
|
59
|
+
def props_are_equal?(&block)
|
60
|
+
%x{
|
61
|
+
base.equality_checker = function (prev_props, next_props) {
|
62
|
+
var prev_ruby_props = Opal.React.Component.Props.$new({props: prev_props});
|
63
|
+
var next_ruby_props = Opal.React.Component.Props.$new({props: next_props});
|
64
|
+
return #{block.call(`prev_ruby_props`, `next_ruby_props`)};
|
65
|
+
}
|
66
|
+
}
|
67
|
+
end
|
68
|
+
|
69
|
+
def render(&block)
|
70
|
+
`base.render_block = #{block}`
|
71
|
+
end
|
72
|
+
end
|
73
|
+
end
|
74
|
+
end
|
@@ -12,8 +12,7 @@ module LucidMaterial
|
|
12
12
|
base.include(::React::Component::Elements)
|
13
13
|
base.include(::React::Component::API)
|
14
14
|
base.include(::React::Component::Callbacks)
|
15
|
-
base.include(::LucidComponent::
|
16
|
-
base.include(::LucidComponent::StylesSupport)
|
15
|
+
base.include(::LucidComponent::API)
|
17
16
|
base.include(::LucidApp::API)
|
18
17
|
base.include(::LucidComponent::Initializer)
|
19
18
|
base.include(::React::Component::Features)
|
@@ -5,7 +5,8 @@ module LucidMaterial
|
|
5
5
|
# to do so, we convert the props to ruby hashes and then compare
|
6
6
|
# this makes sure, that for example rubys Nil object gets handled properly
|
7
7
|
def self.extended(base)
|
8
|
-
component_name = base.to_s
|
8
|
+
component_name = base.to_s + 'Wrapper'
|
9
|
+
theme_component_name = base.to_s + 'ThemeWrapper'
|
9
10
|
# language=JS
|
10
11
|
%x{
|
11
12
|
base.jss_theme = Opal.global.Mui.createMuiTheme();
|
@@ -24,10 +25,12 @@ module LucidMaterial
|
|
24
25
|
let themed_classes_props = Object.assign({}, props, { classes: classes, theme: theme });
|
25
26
|
return Opal.global.React.createElement(base.lucid_react_component, themed_classes_props);
|
26
27
|
}
|
28
|
+
base.themed_react_component.displayName = #{theme_component_name};
|
27
29
|
base.react_component = function(props) {
|
28
30
|
let themed_component = Opal.global.React.createElement(base.themed_react_component, props);
|
29
31
|
return Opal.global.React.createElement(Opal.global.MuiStyles.ThemeProvider, { theme: base.jss_theme }, themed_component);
|
30
32
|
}
|
33
|
+
base.react_component.displayName = #{component_name};
|
31
34
|
}
|
32
35
|
end
|
33
36
|
end
|
@@ -13,8 +13,7 @@ module LucidMaterial
|
|
13
13
|
base.include(::React::Component::Elements)
|
14
14
|
base.include(::React::Component::API)
|
15
15
|
base.include(::React::Component::Callbacks)
|
16
|
-
base.include(::LucidComponent::
|
17
|
-
base.include(::LucidComponent::StylesSupport)
|
16
|
+
base.include(::LucidComponent::API)
|
18
17
|
base.include(::LucidComponent::Initializer)
|
19
18
|
base.include(::React::Component::Features)
|
20
19
|
base.include(::React::Component::Resolution)
|
@@ -5,7 +5,7 @@ module LucidMaterial
|
|
5
5
|
# to do so, we convert the props to ruby hashes and then compare
|
6
6
|
# this makes sure, that for example rubys Nil object gets handled properly
|
7
7
|
def self.extended(base)
|
8
|
-
component_name = base.to_s
|
8
|
+
component_name = base.to_s + 'Wrapper'
|
9
9
|
# language=JS
|
10
10
|
%x{
|
11
11
|
base.react_component = function(props) {
|
@@ -28,6 +28,7 @@ module LucidMaterial
|
|
28
28
|
new_props.store = store;
|
29
29
|
return Opal.global.React.createElement(base.lucid_react_component, new_props);
|
30
30
|
}
|
31
|
+
base.react_component.displayName = #{component_name};
|
31
32
|
}
|
32
33
|
end
|
33
34
|
end
|
@@ -0,0 +1,21 @@
|
|
1
|
+
module LucidMaterial
|
2
|
+
module Func
|
3
|
+
module Initializer
|
4
|
+
def initialize
|
5
|
+
self.JS[:native_props] = `{ props: null }`
|
6
|
+
@native_props = `Opal.React.Component.Props.$new(#{self})`
|
7
|
+
@app_store = `Opal.LucidComponent.AppStoreProxy.$new(#{self})`
|
8
|
+
@class_store = `Opal.LucidComponent.ClassStoreProxy.$new(#{self})`
|
9
|
+
@store = `Opal.LucidComponent.InstanceStoreProxy.$new(#{self})`
|
10
|
+
event_handlers = self.class.event_handlers
|
11
|
+
event_handler_source = self.class
|
12
|
+
%x{
|
13
|
+
for (var i = 0; i < event_handlers.length; i++) {
|
14
|
+
self[event_handlers[i]] = event_handler_source[event_handlers[i]];
|
15
|
+
self[event_handlers[i]] = self[event_handlers[i]].bind(self);
|
16
|
+
}
|
17
|
+
}
|
18
|
+
end
|
19
|
+
end
|
20
|
+
end
|
21
|
+
end
|
@@ -0,0 +1,18 @@
|
|
1
|
+
module LucidMaterial
|
2
|
+
module Func
|
3
|
+
module Mixin
|
4
|
+
def self.included(base)
|
5
|
+
base.include(::React::Component::Elements)
|
6
|
+
base.include(::React::Component::Features)
|
7
|
+
base.include(::LucidFunc::Initializer)
|
8
|
+
base.include(::React::FunctionComponent::API)
|
9
|
+
base.include(::React::FunctionComponent::Resolution)
|
10
|
+
base.extend(::React::FunctionComponent::EventHandler)
|
11
|
+
base.extend(::LucidComponent::EnvironmentSupport)
|
12
|
+
base.include(::LucidComponent::EnvironmentSupport)
|
13
|
+
base.extend(::LucidMaterial::Func::NativeComponentConstructor)
|
14
|
+
base.include(::LucidComponent::API)
|
15
|
+
end
|
16
|
+
end
|
17
|
+
end
|
18
|
+
end
|
@@ -0,0 +1,76 @@
|
|
1
|
+
module LucidMaterial
|
2
|
+
module Func
|
3
|
+
module NativeComponentConstructor
|
4
|
+
def self.extended(base)
|
5
|
+
component_name = base.to_s
|
6
|
+
%x{
|
7
|
+
base.store_updates = true;
|
8
|
+
base.equality_checker = null;
|
9
|
+
base.instance_init = function(initial) { return { instance: #{base.new(`{}`)} }; }
|
10
|
+
base.instance_reducer = function(state, action) { return state; }
|
11
|
+
base.react_component = Opal.global.React.memo(function(props) {
|
12
|
+
const og = Opal.global;
|
13
|
+
const oper = Opal.React;
|
14
|
+
oper.render_buffer.push([]);
|
15
|
+
// console.log("function pushed", oper.render_buffer, oper.render_buffer.toString());
|
16
|
+
// Lucid functionality
|
17
|
+
let classes = null;
|
18
|
+
let store;
|
19
|
+
if (base.store_updates) { store = og.React.useContext(og.LucidApplicationContext); }
|
20
|
+
let theme = og.MuiStyles.useTheme();
|
21
|
+
if (base.jss_styles) {
|
22
|
+
if (!base.use_styles || (Opal.Isomorfeus.development && Opal.Isomorfeus.development !== nil)) {
|
23
|
+
let styles;
|
24
|
+
if (typeof base.jss_styles === 'function') { styles = base.jss_styles(theme); }
|
25
|
+
else { styles = base.jss_styles; }
|
26
|
+
base.use_styles = og.MuiStyles.makeStyles(styles);
|
27
|
+
}
|
28
|
+
classes = base.use_styles();
|
29
|
+
}
|
30
|
+
// prepare Ruby instance
|
31
|
+
const [__ruby_state, __ruby_dispatch] = og.React.useReducer(base.instance_reducer, null, base.instance_init);
|
32
|
+
const __ruby_instance = __ruby_state.instance;
|
33
|
+
__ruby_instance.props = Object.assign({}, props);
|
34
|
+
__ruby_instance.props.store = store;
|
35
|
+
__ruby_instance.props.theme = theme;
|
36
|
+
__ruby_instance.props.classes = classes;
|
37
|
+
oper.active_components.push(__ruby_instance);
|
38
|
+
oper.active_redux_components.push(__ruby_instance);
|
39
|
+
let block_result = #{`__ruby_instance`.instance_exec(&`base.render_block`)};
|
40
|
+
if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { oper.render_buffer[oper.render_buffer.length - 1].push(block_result); }
|
41
|
+
oper.active_redux_components.pop();
|
42
|
+
oper.active_components.pop();
|
43
|
+
// console.log("function popping", oper.render_buffer, oper.render_buffer.toString());
|
44
|
+
return oper.render_buffer.pop();
|
45
|
+
}, base.equality_checker);
|
46
|
+
base.react_component.displayName = #{component_name};
|
47
|
+
}
|
48
|
+
|
49
|
+
base_module = base.to_s.deconstantize
|
50
|
+
if base_module != ''
|
51
|
+
base_module.constantize.define_singleton_method(base.to_s.demodulize) do |*args, &block|
|
52
|
+
`Opal.React.internal_prepare_args_and_render(#{base}.react_component, args, block)`
|
53
|
+
end
|
54
|
+
else
|
55
|
+
Object.define_method(base.to_s) do |*args, &block|
|
56
|
+
`Opal.React.internal_prepare_args_and_render(#{base}.react_component, args, block)`
|
57
|
+
end
|
58
|
+
end
|
59
|
+
|
60
|
+
def props_are_equal?(&block)
|
61
|
+
%x{
|
62
|
+
base.equality_checker = function (prev_props, next_props) {
|
63
|
+
var prev_ruby_props = Opal.React.Component.Props.$new({props: prev_props});
|
64
|
+
var next_ruby_props = Opal.React.Component.Props.$new({props: next_props});
|
65
|
+
return #{block.call(`prev_ruby_props`, `next_ruby_props`)};
|
66
|
+
}
|
67
|
+
}
|
68
|
+
end
|
69
|
+
|
70
|
+
def render(&block)
|
71
|
+
`base.render_block = #{block}`
|
72
|
+
end
|
73
|
+
end
|
74
|
+
end
|
75
|
+
end
|
76
|
+
end
|
@@ -8,12 +8,9 @@ module React
|
|
8
8
|
def event_handler(name, &block)
|
9
9
|
event_handlers << name
|
10
10
|
%x{
|
11
|
-
|
12
|
-
if (typeof event === "object") {
|
13
|
-
|
14
|
-
} else {
|
15
|
-
#{ruby_event = `event`};
|
16
|
-
}
|
11
|
+
var fun = function(event, info) {
|
12
|
+
if (typeof event === "object") { #{ruby_event = ::React::SyntheticEvent.new(`event`)}; }
|
13
|
+
else { #{ruby_event = `event`}; }
|
17
14
|
#{`this.__ruby_instance`.instance_exec(ruby_event, `info`, &block)};
|
18
15
|
}
|
19
16
|
if (self.lucid_react_component) { self.lucid_react_component.prototype[name] = fun; }
|
@@ -42,14 +42,15 @@ module React
|
|
42
42
|
return new_name;
|
43
43
|
}
|
44
44
|
render() {
|
45
|
-
Opal.React
|
46
|
-
|
47
|
-
|
45
|
+
const oper = Opal.React;
|
46
|
+
oper.render_buffer.push([]);
|
47
|
+
// console.log("react component pushed", oper.render_buffer, oper.render_buffer.toString());
|
48
|
+
oper.active_components.push(this);
|
48
49
|
let block_result = #{`this.__ruby_instance`.instance_exec(&`base.render_block`)};
|
49
|
-
if (block_result && (block_result.constructor === String || block_result.constructor === Number)) {
|
50
|
-
// console.log("react component popping",
|
51
|
-
|
52
|
-
return
|
50
|
+
if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { oper.render_buffer[oper.render_buffer.length - 1].push(block_result); }
|
51
|
+
// console.log("react component popping", oper.render_buffer, oper.render_buffer.toString());
|
52
|
+
oper.active_components.pop();
|
53
|
+
return oper.render_buffer.pop();
|
53
54
|
}
|
54
55
|
shouldComponentUpdate(next_props, next_state) {
|
55
56
|
if (base.should_component_update_block) {
|
@@ -1,10 +1,8 @@
|
|
1
1
|
module React
|
2
2
|
module FunctionComponent
|
3
3
|
module API
|
4
|
-
|
5
|
-
|
6
|
-
def initialize(props)
|
7
|
-
@props = ::React::Component::Props.new(`{props: props}`)
|
4
|
+
def props
|
5
|
+
@native_props
|
8
6
|
end
|
9
7
|
|
10
8
|
def use_callback(deps, &block)
|
@@ -48,8 +46,8 @@ module React
|
|
48
46
|
[state, proc { |arg| `dispatcher(arg)` }]
|
49
47
|
end
|
50
48
|
|
51
|
-
def use_ref(
|
52
|
-
React::Ref.new(`Opal.global.React.useRef(
|
49
|
+
def use_ref(native_ref)
|
50
|
+
React::Ref.new(`Opal.global.React.useRef(native_ref)`)
|
53
51
|
end
|
54
52
|
|
55
53
|
def use_state(initial_value)
|
@@ -87,6 +85,10 @@ module React
|
|
87
85
|
nil
|
88
86
|
end
|
89
87
|
alias rre render_react_element
|
88
|
+
|
89
|
+
def to_n
|
90
|
+
self
|
91
|
+
end
|
90
92
|
end
|
91
93
|
end
|
92
94
|
end
|
@@ -1,16 +1,20 @@
|
|
1
1
|
module React
|
2
2
|
module FunctionComponent
|
3
3
|
module EventHandler
|
4
|
+
def event_handlers
|
5
|
+
@event_handlers ||= []
|
6
|
+
end
|
7
|
+
|
4
8
|
def event_handler(name, &block)
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
9
|
+
event_handlers << name
|
10
|
+
%x{
|
11
|
+
var fun = function(event, info) {
|
12
|
+
if (typeof event === "object") { #{ruby_event = ::React::SyntheticEvent.new(`event`)}; }
|
13
|
+
else { #{ruby_event = `event`}; }
|
14
|
+
#{`this`.instance_exec(ruby_event, `info`, &block)};
|
15
|
+
}
|
16
|
+
self[name] = fun;
|
17
|
+
}
|
14
18
|
end
|
15
19
|
end
|
16
20
|
end
|
@@ -0,0 +1,18 @@
|
|
1
|
+
module React
|
2
|
+
module FunctionComponent
|
3
|
+
module Initializer
|
4
|
+
def initialize
|
5
|
+
self.JS[:native_props] = `{ props: null }`
|
6
|
+
@native_props = ::React::Component::Props.new(self)
|
7
|
+
event_handlers = self.class.event_handlers
|
8
|
+
event_handler_source = self.class
|
9
|
+
%x{
|
10
|
+
for (var i = 0; i < event_handlers.length; i++) {
|
11
|
+
self[event_handlers[i]] = event_handler_source[event_handlers[i]];
|
12
|
+
self[event_handlers[i]] = self[event_handlers[i]].bind(self);
|
13
|
+
}
|
14
|
+
}
|
15
|
+
end
|
16
|
+
end
|
17
|
+
end
|
18
|
+
end
|
@@ -4,10 +4,11 @@ module React
|
|
4
4
|
def self.included(base)
|
5
5
|
base.include(::React::Component::Elements)
|
6
6
|
base.include(::React::Component::Features)
|
7
|
+
base.include(::React::FunctionComponent::Initializer)
|
7
8
|
base.include(::React::FunctionComponent::API)
|
8
9
|
base.include(::React::FunctionComponent::Resolution)
|
9
10
|
base.extend(::React::FunctionComponent::EventHandler)
|
10
|
-
base.extend(::React::FunctionComponent::
|
11
|
+
base.extend(::React::FunctionComponent::NativeComponentConstructor)
|
11
12
|
end
|
12
13
|
end
|
13
14
|
end
|
@@ -0,0 +1,43 @@
|
|
1
|
+
module React
|
2
|
+
module FunctionComponent
|
3
|
+
module NativeComponentConstructor
|
4
|
+
def self.extended(base)
|
5
|
+
component_name = base.to_s
|
6
|
+
%x{
|
7
|
+
base.instance_init = function(initial) { return { instance: #{base.new(`{}`)} }; }
|
8
|
+
base.instance_reducer = function(state, action) { return state; }
|
9
|
+
base.react_component = function(props) {
|
10
|
+
const oper = Opal.React;
|
11
|
+
oper.render_buffer.push([]);
|
12
|
+
// console.log("function pushed", oper.render_buffer, oper.render_buffer.toString());
|
13
|
+
const [__ruby_state, __ruby_dispatch] = Opal.global.React.useReducer(base.instance_reducer, null, base.instance_init);
|
14
|
+
const __ruby_instance = __ruby_state.instance;
|
15
|
+
__ruby_instance.props = props;
|
16
|
+
oper.active_components.push(__ruby_instance);
|
17
|
+
let block_result = #{`__ruby_instance`.instance_exec(&`base.render_block`)};
|
18
|
+
if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { oper.render_buffer[oper.render_buffer.length - 1].push(block_result); }
|
19
|
+
oper.active_components.pop();
|
20
|
+
// console.log("function popping", oper.render_buffer, oper.render_buffer.toString());
|
21
|
+
return oper.render_buffer.pop();
|
22
|
+
}
|
23
|
+
base.react_component.displayName = #{component_name};
|
24
|
+
}
|
25
|
+
|
26
|
+
base_module = base.to_s.deconstantize
|
27
|
+
if base_module != ''
|
28
|
+
base_module.constantize.define_singleton_method(base.to_s.demodulize) do |*args, &block|
|
29
|
+
`Opal.React.internal_prepare_args_and_render(#{base}.react_component, args, block)`
|
30
|
+
end
|
31
|
+
else
|
32
|
+
Object.define_method(base.to_s) do |*args, &block|
|
33
|
+
`Opal.React.internal_prepare_args_and_render(#{base}.react_component, args, block)`
|
34
|
+
end
|
35
|
+
end
|
36
|
+
|
37
|
+
def render(&block)
|
38
|
+
`base.render_block = #{block}`
|
39
|
+
end
|
40
|
+
end
|
41
|
+
end
|
42
|
+
end
|
43
|
+
end
|
@@ -4,10 +4,11 @@ module React
|
|
4
4
|
def self.included(base)
|
5
5
|
base.include(::React::Component::Elements)
|
6
6
|
base.include(::React::Component::Features)
|
7
|
+
base.include(::React::FunctionComponent::Initializer)
|
7
8
|
base.include(::React::FunctionComponent::API)
|
8
9
|
base.include(::React::FunctionComponent::Resolution)
|
9
10
|
base.extend(::React::FunctionComponent::EventHandler)
|
10
|
-
base.extend(::React::MemoComponent::
|
11
|
+
base.extend(::React::MemoComponent::NativeComponentConstructor)
|
11
12
|
end
|
12
13
|
end
|
13
14
|
end
|
@@ -0,0 +1,44 @@
|
|
1
|
+
module React
|
2
|
+
module MemoComponent
|
3
|
+
module NativeComponentConstructor
|
4
|
+
def self.extended(base)
|
5
|
+
component_name = base.to_s
|
6
|
+
%x{
|
7
|
+
base.instance_init = function(initial) { return { instance: #{base.new(`{}`)} }; }
|
8
|
+
base.instance_reducer = function(state, action) { return state; }
|
9
|
+
base.equality_checker = null;
|
10
|
+
base.react_component = Opal.global.React.memo(function(props) {
|
11
|
+
const oper = Opal.React;
|
12
|
+
oper.render_buffer.push([]);
|
13
|
+
// console.log("memo pushed", oper.render_buffer, oper.render_buffer.toString());
|
14
|
+
const [__ruby_state, __ruby_dispatch] = Opal.global.React.useReducer(base.instance_reducer, null, base.instance_init);
|
15
|
+
const __ruby_instance = __ruby_state.instance;
|
16
|
+
__ruby_instance.props = props;
|
17
|
+
oper.active_components.push(__ruby_instance);
|
18
|
+
let block_result = #{`__ruby_instance`.instance_exec(&`base.render_block`)};
|
19
|
+
if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { oper.render_buffer[oper.render_buffer.length - 1].push(block_result); }
|
20
|
+
oper.active_components.pop();
|
21
|
+
// console.log("memo popping", oper.render_buffer, oper.render_buffer.toString());
|
22
|
+
return oper.render_buffer.pop();
|
23
|
+
}, base.equality_checker);
|
24
|
+
base.react_component.displayName = #{component_name};
|
25
|
+
}
|
26
|
+
|
27
|
+
base_module = base.to_s.deconstantize
|
28
|
+
if base_module != ''
|
29
|
+
base_module.constantize.define_singleton_method(base.to_s.demodulize) do |*args, &block|
|
30
|
+
`Opal.React.internal_prepare_args_and_render(#{base}.react_component, args, block)`
|
31
|
+
end
|
32
|
+
else
|
33
|
+
Object.define_method(base.to_s) do |*args, &block|
|
34
|
+
`Opal.React.internal_prepare_args_and_render(#{base}.react_component, args, block)`
|
35
|
+
end
|
36
|
+
end
|
37
|
+
|
38
|
+
def render(&block)
|
39
|
+
`base.render_block = #{block}`
|
40
|
+
end
|
41
|
+
end
|
42
|
+
end
|
43
|
+
end
|
44
|
+
end
|
@@ -10,6 +10,10 @@ module React
|
|
10
10
|
def method_missing(name, *args, &block)
|
11
11
|
# language=JS
|
12
12
|
%x{
|
13
|
+
if (name[0] === 'u' && name[1] === 's' && name[2] === 'e') {
|
14
|
+
if (name.indexOf('_') > 0) { name = Opal.React.lower_camelize(name); }
|
15
|
+
return #@native[name].call(this, args);
|
16
|
+
}
|
13
17
|
var component = null;
|
14
18
|
var component_type = typeof #@native[name];
|
15
19
|
if (component_type === "function" || component_type === "object") {
|
@@ -23,4 +27,4 @@ module React
|
|
23
27
|
}
|
24
28
|
end
|
25
29
|
end
|
26
|
-
end
|
30
|
+
end
|
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.11.
|
4
|
+
version: 16.11.1
|
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-10-
|
11
|
+
date: 2019-10-28 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: oj
|
@@ -180,6 +180,7 @@ files:
|
|
180
180
|
- lib/lucid_app/mixin.rb
|
181
181
|
- lib/lucid_app/native_component_constructor.rb
|
182
182
|
- lib/lucid_app/native_lucid_component_constructor.rb
|
183
|
+
- lib/lucid_component/api.rb
|
183
184
|
- lib/lucid_component/app_store_defaults.rb
|
184
185
|
- lib/lucid_component/app_store_proxy.rb
|
185
186
|
- lib/lucid_component/base.rb
|
@@ -194,14 +195,20 @@ files:
|
|
194
195
|
- lib/lucid_component/native_lucid_component_constructor.rb
|
195
196
|
- lib/lucid_component/preloading_support.rb
|
196
197
|
- lib/lucid_component/reducers.rb
|
197
|
-
- lib/
|
198
|
-
- lib/
|
198
|
+
- lib/lucid_func/base.rb
|
199
|
+
- lib/lucid_func/initializer.rb
|
200
|
+
- lib/lucid_func/mixin.rb
|
201
|
+
- lib/lucid_func/native_component_constructor.rb
|
199
202
|
- lib/lucid_material/app/base.rb
|
200
203
|
- lib/lucid_material/app/mixin.rb
|
201
204
|
- lib/lucid_material/app/native_component_constructor.rb
|
202
205
|
- lib/lucid_material/component/base.rb
|
203
206
|
- lib/lucid_material/component/mixin.rb
|
204
207
|
- lib/lucid_material/component/native_component_constructor.rb
|
208
|
+
- lib/lucid_material/func/base.rb
|
209
|
+
- lib/lucid_material/func/initializer.rb
|
210
|
+
- lib/lucid_material/func/mixin.rb
|
211
|
+
- lib/lucid_material/func/native_component_constructor.rb
|
205
212
|
- lib/lucid_prop_declaration/mixin.rb
|
206
213
|
- lib/react.rb
|
207
214
|
- lib/react/active_support_support.rb
|
@@ -226,13 +233,14 @@ files:
|
|
226
233
|
- lib/react/context_wrapper.rb
|
227
234
|
- lib/react/function_component/api.rb
|
228
235
|
- lib/react/function_component/base.rb
|
229
|
-
- lib/react/function_component/creator.rb
|
230
236
|
- lib/react/function_component/event_handler.rb
|
237
|
+
- lib/react/function_component/initializer.rb
|
231
238
|
- lib/react/function_component/mixin.rb
|
239
|
+
- lib/react/function_component/native_component_constructor.rb
|
232
240
|
- lib/react/function_component/resolution.rb
|
233
241
|
- lib/react/memo_component/base.rb
|
234
|
-
- lib/react/memo_component/creator.rb
|
235
242
|
- lib/react/memo_component/mixin.rb
|
243
|
+
- lib/react/memo_component/native_component_constructor.rb
|
236
244
|
- lib/react/native_constant_wrapper.rb
|
237
245
|
- lib/react/ref.rb
|
238
246
|
- lib/react/synthetic_event.rb
|
@@ -243,7 +251,13 @@ homepage: http://isomorfeus.com
|
|
243
251
|
licenses:
|
244
252
|
- MIT
|
245
253
|
metadata: {}
|
246
|
-
post_install_message:
|
254
|
+
post_install_message: |2+
|
255
|
+
|
256
|
+
isomorfeus-react 16.11.1:
|
257
|
+
Breaking changes:
|
258
|
+
- React::MemoComponent#create_memo has been renamed to React::MemoComponent#render
|
259
|
+
- React::FunctionComponent#create_function has been renamed to React::FunctionComponent#render
|
260
|
+
|
247
261
|
rdoc_options: []
|
248
262
|
require_paths:
|
249
263
|
- lib
|
@@ -1,37 +0,0 @@
|
|
1
|
-
module LucidComponent
|
2
|
-
module StylesSupport
|
3
|
-
def self.included(base)
|
4
|
-
base.instance_exec do
|
5
|
-
def styles(styles_hash = nil, &block)
|
6
|
-
if block_given?
|
7
|
-
%x{
|
8
|
-
base.jss_styles = function(theme) {
|
9
|
-
let wrapped_theme = Opal.React.Component.Styles.$new(theme);
|
10
|
-
var result = block.$call(wrapped_theme);
|
11
|
-
return result.$to_n();
|
12
|
-
}
|
13
|
-
}
|
14
|
-
nil
|
15
|
-
elsif styles_hash
|
16
|
-
`base.jss_styles = #{styles_hash.to_n}` if styles_hash
|
17
|
-
styles_hash
|
18
|
-
elsif `typeof base.jss_styles === 'object'`
|
19
|
-
`Opal.Hash.$new(base.jss_styles)`
|
20
|
-
else
|
21
|
-
nil
|
22
|
-
end
|
23
|
-
end
|
24
|
-
alias_method :styles=, :styles
|
25
|
-
end
|
26
|
-
|
27
|
-
def styles
|
28
|
-
props.classes
|
29
|
-
end
|
30
|
-
|
31
|
-
def theme
|
32
|
-
props.theme
|
33
|
-
end
|
34
|
-
end
|
35
|
-
end
|
36
|
-
end
|
37
|
-
|
@@ -1,35 +0,0 @@
|
|
1
|
-
module React
|
2
|
-
module FunctionComponent
|
3
|
-
module Creator
|
4
|
-
def self.extended(base)
|
5
|
-
%x{
|
6
|
-
base.react_component = function(props) {
|
7
|
-
Opal.React.render_buffer.push([]);
|
8
|
-
// console.log("function pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());
|
9
|
-
Opal.React.active_components.push(base);
|
10
|
-
let block_result = #{base.new(`props`).instance_exec(&`base.function_block`)};
|
11
|
-
if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result); }
|
12
|
-
Opal.React.active_components.pop();
|
13
|
-
// console.log("function popping", Opal.React.render_buffer, Opal.React.render_buffer.toString());
|
14
|
-
return Opal.React.render_buffer.pop();
|
15
|
-
}
|
16
|
-
}
|
17
|
-
|
18
|
-
base_module = base.to_s.deconstantize
|
19
|
-
if base_module != ''
|
20
|
-
base_module.constantize.define_singleton_method(base.to_s.demodulize) do |*args, &block|
|
21
|
-
`Opal.React.internal_prepare_args_and_render(#{base}.react_component, args, block)`
|
22
|
-
end
|
23
|
-
else
|
24
|
-
Object.define_method(base.to_s) do |*args, &block|
|
25
|
-
`Opal.React.internal_prepare_args_and_render(#{base}.react_component, args, block)`
|
26
|
-
end
|
27
|
-
end
|
28
|
-
|
29
|
-
def create_function(&block)
|
30
|
-
`base.function_block = #{block}`
|
31
|
-
end
|
32
|
-
end
|
33
|
-
end
|
34
|
-
end
|
35
|
-
end
|
@@ -1,35 +0,0 @@
|
|
1
|
-
module React
|
2
|
-
module MemoComponent
|
3
|
-
module Creator
|
4
|
-
def self.extended(base)
|
5
|
-
%x{
|
6
|
-
base.equality_checker = null;
|
7
|
-
base.react_component = Opal.global.React.memo(function(props) {
|
8
|
-
Opal.React.render_buffer.push([]);
|
9
|
-
// console.log("memo pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());
|
10
|
-
Opal.React.active_components.push(base);
|
11
|
-
let block_result = #{base.new(`props`).instance_exec(&`base.function_block`)};
|
12
|
-
if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result); }
|
13
|
-
Opal.React.active_components.pop();
|
14
|
-
// console.log("memo popping", Opal.React.render_buffer, Opal.React.render_buffer.toString());
|
15
|
-
return Opal.React.render_buffer.pop();
|
16
|
-
}, base.equality_checker);
|
17
|
-
}
|
18
|
-
|
19
|
-
def props_are_equal?(&block)
|
20
|
-
%x{
|
21
|
-
base.equality_checker = function (prev_props, next_props) {
|
22
|
-
var prev_ruby_props = Opal.React.Component.Props.$new({props: prev_props});
|
23
|
-
var next_ruby_props = Opal.React.Component.Props.$new({props: next_props});
|
24
|
-
return #{base.new(`{}`).instance_exec(`prev_ruby_props`, `next_ruby_props`, &block)};
|
25
|
-
}
|
26
|
-
}
|
27
|
-
end
|
28
|
-
|
29
|
-
def create_memo(&block)
|
30
|
-
`base.function_block = #{block}`
|
31
|
-
end
|
32
|
-
end
|
33
|
-
end
|
34
|
-
end
|
35
|
-
end
|