isomorfeus-react 16.6.8 → 16.8.0

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.
Files changed (59) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +39 -413
  3. data/lib/isomorfeus-react-base.rb +55 -0
  4. data/lib/isomorfeus-react-component.rb +20 -0
  5. data/lib/isomorfeus-react-lucid.rb +39 -0
  6. data/lib/isomorfeus-react-material-ui.rb +41 -0
  7. data/lib/isomorfeus-react-redux-component.rb +25 -0
  8. data/lib/isomorfeus-react.rb +4 -101
  9. data/lib/isomorfeus/config.rb +3 -8
  10. data/lib/isomorfeus/top_level_browser.rb +1 -1
  11. data/lib/lucid_app/api.rb +1 -12
  12. data/lib/lucid_app/mixin.rb +1 -0
  13. data/lib/lucid_app/native_component_constructor.rb +10 -0
  14. data/lib/lucid_component/api.rb +1 -1
  15. data/lib/lucid_component/initializer.rb +5 -5
  16. data/lib/lucid_component/mixin.rb +1 -0
  17. data/lib/lucid_component/native_component_constructor.rb +13 -3
  18. data/lib/lucid_material/app/base.rb +9 -0
  19. data/lib/lucid_material/app/mixin.rb +20 -0
  20. data/lib/lucid_material/app/native_component_constructor.rb +116 -0
  21. data/lib/lucid_material/component/api.rb +19 -0
  22. data/lib/lucid_material/component/base.rb +9 -0
  23. data/lib/lucid_material/component/mixin.rb +21 -0
  24. data/lib/lucid_material/component/native_component_constructor.rb +158 -0
  25. data/lib/react.rb +13 -5
  26. data/lib/react/children.rb +35 -0
  27. data/lib/react/component/api.rb +5 -91
  28. data/lib/react/component/callbacks.rb +103 -0
  29. data/lib/react/component/elements.rb +3 -23
  30. data/lib/react/component/features.rb +12 -29
  31. data/lib/react/component/initializer.rb +2 -2
  32. data/lib/react/component/mixin.rb +1 -0
  33. data/lib/react/component/native_component_constructor.rb +7 -0
  34. data/lib/react/component/props.rb +13 -1
  35. data/lib/react/component/resolution.rb +14 -15
  36. data/lib/react/component/styles.rb +23 -0
  37. data/lib/react/context_wrapper.rb +4 -0
  38. data/lib/react/function_component/api.rb +83 -0
  39. data/lib/react/function_component/base.rb +9 -0
  40. data/lib/react/function_component/creator.rb +19 -65
  41. data/lib/react/function_component/event_handler.rb +13 -0
  42. data/lib/react/function_component/mixin.rb +14 -0
  43. data/lib/react/function_component/resolution.rb +17 -15
  44. data/lib/react/memo_component/base.rb +9 -0
  45. data/lib/react/memo_component/creator.rb +32 -0
  46. data/lib/react/memo_component/mixin.rb +14 -0
  47. data/lib/react/native_constant_wrapper.rb +1 -11
  48. data/lib/react/pure_component/mixin.rb +2 -0
  49. data/lib/react/redux_component/api.rb +1 -93
  50. data/lib/react/redux_component/initializer.rb +5 -5
  51. data/lib/react/redux_component/mixin.rb +1 -0
  52. data/lib/react/redux_component/native_component_constructor.rb +13 -3
  53. data/lib/react/redux_component/reducers.rb +29 -35
  54. data/lib/react/ref.rb +4 -0
  55. data/lib/react/version.rb +1 -1
  56. data/lib/react_dom.rb +9 -3
  57. metadata +70 -8
  58. data/lib/lucid_router.rb +0 -18
  59. data/lib/react/function_component/runner.rb +0 -19
@@ -0,0 +1,9 @@
1
+ module React
2
+ module FunctionComponent
3
+ class Base
4
+ def self.inherited(base)
5
+ base.include(::React::FunctionComponent::Mixin)
6
+ end
7
+ end
8
+ end
9
+ end
@@ -1,77 +1,31 @@
1
1
  module React
2
2
  module FunctionComponent
3
- class Creator
4
- def self.event_handler(name, &block)
3
+ module Creator
4
+ def self.extended(base)
5
5
  %x{
6
- Opal.React.FunctionComponent.Runner.event_handlers[name] = function(event, info) {
7
- #{ruby_event = ::React::SyntheticEvent.new(`event`)};
8
- #{React::FunctionComponent::Runner.new(`{}`).instance_exec(ruby_event, `info`, &block)};
9
- }
10
- }
11
- end
12
-
13
- def self.function_component(component_name, &block)
14
- %x{
15
- var fun = function(props) {
6
+ base.react_component = function(props) {
16
7
  Opal.React.render_buffer.push([]);
17
- Opal.React.active_components.push(Opal.React.FunctionComponent.Runner.event_handlers);
18
- #{React::FunctionComponent::Runner.new(`props`).instance_exec(&block)};
8
+ Opal.React.active_components.push(base);
9
+ #{base.new(`props`).instance_exec(&`base.function_block`)};
19
10
  Opal.React.active_components.pop();
20
11
  return Opal.React.render_buffer.pop();
21
12
  }
22
- var const_names;
23
- if (component_name.includes('.')) {
24
- const_names = component_name.split('.');
25
- } else {
26
- const_names = [component_name];
27
- }
28
- var const_last = const_names.length - 1;
29
- const_names.reduce(function(prev, curr) {
30
- if (prev && prev[curr]) {
31
- return prev[curr];
32
- } else {
33
- if (const_names.indexOf(curr) === const_last) {
34
- prev[curr] = fun;
35
- return prev[curr];
36
- } else {
37
- prev[curr] = {};
38
- return prev[curr];
39
- }
40
- }
41
- }, Opal.global);
42
13
  }
43
- end
44
14
 
45
- def self.memo_component(component_name, &block)
46
- %x{
47
- var fun = Opal.global.React.memo(function(props) {
48
- Opal.React.render_buffer.push([]);
49
- Opal.React.active_components.push(Opal.React.FunctionComponent.Runner.event_handlers);
50
- #{React::FunctionComponent::Runner.new(`props`).instance_exec(&block)};
51
- Opal.React.active_components.pop();
52
- return Opal.React.render_buffer.pop();
53
- });
54
- var const_names;
55
- if (component_name.includes('.')) {
56
- const_names = component_name.split('.');
57
- } else {
58
- const_names = [component_name];
59
- }
60
- var const_last = const_names.length - 1;
61
- const_names.reduce(function(prev, curr) {
62
- if (prev && prev[curr]) {
63
- return prev[curr];
64
- } else {
65
- if (const_names.indexOf(curr) === const_last) {
66
- prev[curr] = fun;
67
- return prev[curr];
68
- } else {
69
- prev[curr] = {};
70
- return prev[curr];
71
- }
72
- }
73
- }, Opal.global);
74
- }
15
+ base_module = base.to_s.deconstantize
16
+ if base_module != ''
17
+ base_module.constantize.define_singleton_method(base.to_s.demodulize) do |*args, &block|
18
+ `Opal.React.internal_prepare_args_and_render(#{base}.react_component, args, block)`
19
+ end
20
+ else
21
+ Object.define_method(base.to_s) do |*args, &block|
22
+ `Opal.React.internal_prepare_args_and_render(#{base}.react_component, args, block)`
23
+ end
24
+ end
25
+
26
+ def create_function(&block)
27
+ `base.function_block = #{block}`
28
+ end
75
29
  end
76
30
  end
77
31
  end
@@ -0,0 +1,13 @@
1
+ module React
2
+ module FunctionComponent
3
+ module EventHandler
4
+ def event_handler(name, &block)
5
+ define_method(name) do |event, info|
6
+ ruby_event = ::React::SyntheticEvent.new(event)
7
+ block.call(ruby_event, info)
8
+ end
9
+ `self[name] = self.prototype['$' + name]`
10
+ end
11
+ end
12
+ end
13
+ end
@@ -0,0 +1,14 @@
1
+ module React
2
+ module FunctionComponent
3
+ module Mixin
4
+ def self.included(base)
5
+ base.include(::React::Component::Elements)
6
+ base.include(::React::Component::Features)
7
+ base.include(::React::FunctionComponent::API)
8
+ base.include(::React::FunctionComponent::Resolution)
9
+ base.extend(::React::FunctionComponent::EventHandler)
10
+ base.extend(::React::FunctionComponent::Creator)
11
+ end
12
+ end
13
+ end
14
+ end
@@ -3,7 +3,7 @@ module React
3
3
  module Resolution
4
4
  def self.included(base)
5
5
  base.instance_exec do
6
- alias _react_component_resolution_original_const_missing const_missing
6
+ alias _react_function_component_resolution_original_const_missing const_missing
7
7
 
8
8
  def const_missing(const_name)
9
9
  # language=JS
@@ -13,14 +13,14 @@ module React
13
13
  #{Object.const_set(const_name, `new_const`)};
14
14
  return new_const;
15
15
  } else {
16
- return #{_react_component_resolution_original_const_missing(const_name)};
16
+ return #{_react_function_component_resolution_original_const_missing(const_name)};
17
17
  }
18
18
  }
19
19
  end
20
20
  end
21
21
  end
22
22
 
23
- alias _react_component_resolution_original_method_missing method_missing
23
+ alias _react_function_component_resolution_original_method_missing method_missing
24
24
 
25
25
  def method_missing(component_name, *args, &block)
26
26
  # html tags are defined as methods, so they will not end up here.
@@ -37,8 +37,7 @@ module React
37
37
  else {
38
38
  try {
39
39
  var constant = self.$class().$const_get(component_name, true);
40
- component_type = typeof constant.react_component;
41
- if (component_type === "function" || component_type === "object") {
40
+ if (typeof constant.react_component !== 'undefined') {
42
41
  component = constant.react_component;
43
42
  }
44
43
  }
@@ -46,20 +45,23 @@ module React
46
45
  component = null;
47
46
  }
48
47
  }
48
+ if (!component) {
49
+ try {
50
+ constant = Opal.Object.$const_get(component_name);
51
+ if (typeof constant.react_component !== 'undefined') {
52
+ component = constant.react_component;
53
+ }
54
+ } catch(err) {
55
+ component = null
56
+ }
57
+ }
49
58
  if (component) {
50
- if (args.length > 0) {
51
- var last_arg = args[args.length - 1];
52
- if (typeof last_arg === 'string' || last_arg instanceof String) {
53
- if (args.length === 1) { Opal.React.internal_render(component, null, last_arg, null); }
54
- else { Opal.React.internal_render(component, args[0], last_arg, null); }
55
- } else { Opal.React.internal_render(component, args[0], null, block); }
56
- } else { Opal.React.internal_render(component, null, null, block); }
59
+ Opal.React.internal_prepare_args_and_render(component, args, block);
57
60
  } else {
58
- return #{_react_component_resolution_original_method_missing(component_name, *args, block)};
61
+ return #{_react_function_component_resolution_original_method_missing(component_name, *args, block)};
59
62
  }
60
63
  }
61
64
  end
62
-
63
65
  end
64
66
  end
65
- end
67
+ end
@@ -0,0 +1,9 @@
1
+ module React
2
+ module MemoComponent
3
+ class Base
4
+ def self.inherited(base)
5
+ base.include(::React::MemoComponent::Mixin)
6
+ end
7
+ end
8
+ end
9
+ end
@@ -0,0 +1,32 @@
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
+ Opal.React.active_components.push(base);
10
+ #{base.new(`props`).instance_exec(&`base.function_block`)};
11
+ Opal.React.active_components.pop();
12
+ return Opal.React.render_buffer.pop();
13
+ }, base.equality_checker);
14
+ }
15
+
16
+ def props_are_equal?(&block)
17
+ %x{
18
+ base.equality_checker = function (prev_props, next_props) {
19
+ var prev_ruby_props = Opal.React.Component.Props.$new(prev_props);
20
+ var next_ruby_props = Opal.React.Component.Props.$new(next_props);
21
+ return #{base.new(`{}`).instance_exec(`prev_ruby_props`, `next_ruby_props`, &block)};
22
+ }
23
+ }
24
+ end
25
+
26
+ def create_memo(&block)
27
+ `base.function_block = #{block}`
28
+ end
29
+ end
30
+ end
31
+ end
32
+ end
@@ -0,0 +1,14 @@
1
+ module React
2
+ module MemoComponent
3
+ module Mixin
4
+ def self.included(base)
5
+ base.include(::React::Component::Elements)
6
+ base.include(::React::Component::Features)
7
+ base.include(::React::FunctionComponent::API)
8
+ base.include(::React::FunctionComponent::Resolution)
9
+ base.extend(::React::FunctionComponent::EventHandler)
10
+ base.extend(::React::MemoComponent::Creator)
11
+ end
12
+ end
13
+ end
14
+ end
@@ -15,22 +15,12 @@ module React
15
15
  if (component_type === "function" || component_type === "object") {
16
16
  component = #@native[name];
17
17
  }
18
-
19
18
  if (component) {
20
- var children = null;
21
- var block_result = null;
22
- if (args.length > 0) {
23
- var last_arg = args[args.length - 1];
24
- if (typeof last_arg === 'string' || last_arg instanceof String) {
25
- if (args.length === 1) { Opal.React.internal_render(component, null, last_arg, null); }
26
- else { Opal.React.internal_render(component, args[0], last_arg, null); }
27
- } else { Opal.React.internal_render(component, args[0], null, block); }
28
- } else { Opal.React.internal_render(component, null, null, block); }
19
+ Opal.React.internal_prepare_args_and_render(component, args, block);
29
20
  } else {
30
21
  #{raise NameError, "No such native Component #@const_name.#{name}"};
31
22
  }
32
23
  }
33
24
  end
34
-
35
25
  end
36
26
  end
@@ -8,6 +8,8 @@ module React
8
8
  base.extend(::React::Component::EventHandler)
9
9
  base.include(::React::Component::Elements)
10
10
  base.include(::React::Component::API)
11
+ base.include(::React::Component::Callbacks)
12
+ base.include(::React::Component::UnsafeAPI)
11
13
  base.include(::React::Component::Initializer)
12
14
  base.include(::React::Component::Features)
13
15
  base.include(::React::Component::Resolution)
@@ -21,7 +21,7 @@ module React
21
21
 
22
22
  def app_store
23
23
  @default_app_store_defined = true
24
- @default_app_store ||= ::React::ReduxComponent::AppStoreDefaults.new(state)
24
+ @default_app_store ||= ::React::ReduxComponent::AppStoreDefaults.new(state, self.to_s)
25
25
  end
26
26
 
27
27
  def class_store
@@ -33,98 +33,6 @@ module React
33
33
  @default_instance_store_defined = true
34
34
  @default_class_store ||= ::React::ReduxComponent::ComponentInstanceStoreDefaults.new(state, self.to_s)
35
35
  end
36
-
37
- def component_did_catch(&block)
38
- # TODO convert error and info
39
- %x{
40
- var fun = function(error, info) {
41
- Opal.React.active_redux_components.push(this.__ruby_instance);
42
- #{`this.__ruby_instance`.instance_exec(error, info, &block)};
43
- Opal.React.active_redux_components.pop();
44
- }
45
- if (self.lucid_react_component) { self.lucid_react_component.prototype.componentDidCatch = fun; }
46
- else { self.react_component.prototype.componentDidCatch = fun; }
47
- }
48
- end
49
-
50
- def component_did_mount(&block)
51
- %x{
52
- var fun = function() {
53
- Opal.React.active_redux_components.push(this.__ruby_instance);
54
- #{`this.__ruby_instance`.instance_exec(&block)};
55
- Opal.React.active_redux_components.pop();
56
- }
57
- if (self.lucid_react_component) { self.lucid_react_component.prototype.componentDidMount = fun; }
58
- else { self.react_component.prototype.componentDidMount = fun; }
59
- }
60
- end
61
-
62
- def component_did_update(&block)
63
- %x{
64
- var fun = function() {
65
- Opal.React.active_redux_components.push(this.__ruby_instance);
66
- #{`this.__ruby_instance`.instance_exec(&block)};
67
- Opal.React.active_redux_components.pop();
68
- }
69
- if (self.lucid_react_component) { self.lucid_react_component.prototype.componentDidUpdate = fun; }
70
- else { self.react_component.prototype.componentDidUpdate = fun; }
71
- }
72
- end
73
-
74
- def component_will_unmount(&block)
75
- # unsubscriber support for ReduxComponent
76
- %x{
77
- var fun = function() {
78
- if (typeof this.unsubscriber === "function") { this.unsubscriber(); };
79
- Opal.React.active_redux_components.push(this.__ruby_instance);
80
- #{`this.__ruby_instance`.instance_exec(&block)};
81
- Opal.React.active_redux_components.pop();
82
- }
83
- if (self.lucid_react_component) { self.lucid_react_component.prototype.componentWillUnmount = fun; }
84
- else { self.react_component.prototype.componentWillUnmount = fun; }
85
- }
86
- end
87
-
88
- def get_derived_state_from_props(&block)
89
- %x{
90
- var fun = function(props, state) {
91
- Opal.React.active_redux_components.push(this.__ruby_instance);
92
- #{`this.__ruby_instance`.instance_exec(React::Component::Props.new(`props`), `Opal.Hash.$new(state)`, &block)};
93
- Opal.React.active_redux_components.pop();
94
- }
95
- if (self.lucid_react_component) { self.lucid_react_component.prototype.getDerivedStateFromProps = fun; }
96
- else { self.react_component.prototype.getDerivedStateFromProps = fun; }
97
- }
98
- end
99
-
100
- def get_snapshot_before_update(&block)
101
- %x{
102
- var fun = function(prev_props, prev_state) {
103
- Opal.React.active_redux_components.push(this.__ruby_instance);
104
- #{`this.__ruby_instance`.instance_exec(React::Component::Props.new(`prev_props`), `Opal.Hash.$new(prev_state)`, &block)};
105
- Opal.React.active_redux_components.pop();
106
- }
107
- if (self.lucid_react_component) { self.lucid_react_component.prototype.getSnapshotBeforeUpdate = fun; }
108
- else { self.react_component.prototype.getSnapshotBeforeUpdate = fun; }
109
- }
110
- end
111
-
112
- def render(&block)
113
- %x{
114
- var fun = function() {
115
- Opal.React.render_buffer.push([]);
116
- Opal.React.active_components.push(this);
117
- Opal.React.active_redux_components.push(this);
118
- this.used_store_paths = [];
119
- #{`this.__ruby_instance`.instance_exec(&block)};
120
- Opal.React.active_redux_components.pop();
121
- Opal.React.active_components.pop();
122
- return Opal.React.render_buffer.pop();
123
- }
124
- if (self.lucid_react_component) { self.lucid_react_component.prototype.render = fun; }
125
- else { self.react_component.prototype.render = fun; }
126
- }
127
- end
128
36
  end
129
37
  end
130
38
  end
@@ -3,11 +3,11 @@ module React
3
3
  module Initializer
4
4
  def initialize(native_component)
5
5
  @native = native_component
6
- @app_store = ::React::ReduxComponent::AppStoreProxy.new(self)
7
- @class_store = ::React::ReduxComponent::ClassStoreProxy.new(self)
8
- @props = ::React::Component::Props.new(@native.JS[:props])
9
- @state = ::React::Component::State.new(@native)
10
- @store = ::React::ReduxComponent::InstanceStoreProxy.new(self)
6
+ @app_store = `Opal.React.ReduxComponent.AppStoreProxy.$new(#{self})`
7
+ @class_store = `Opal.React.ReduxComponent.ClassStoreProxy.$new(#{self})`
8
+ @props = `Opal.React.Component.Props.$new(#@native.props)`
9
+ @state = `Opal.React.Component.State.$new(#@native)`
10
+ @store = `Opal.React.ReduxComponent.InstanceStoreProxy.$new(#{self})`
11
11
  end
12
12
  end
13
13
  end
@@ -8,6 +8,7 @@ module React
8
8
  base.extend(::React::Component::EventHandler)
9
9
  base.include(::React::Component::Elements)
10
10
  base.include(::React::Component::API)
11
+ base.include(::React::Component::Callbacks)
11
12
  base.include(::React::ReduxComponent::API)
12
13
  base.include(::React::ReduxComponent::Initializer)
13
14
  base.include(::React::Component::Features)
@@ -47,12 +47,22 @@ module React
47
47
  this.listener = this.listener.bind(this);
48
48
  this.unsubscriber = Opal.Isomorfeus.store.native.subscribe(this.listener);
49
49
  }
50
- data_access() {
51
- return this.state.isomorfeus_store
52
- }
53
50
  static get displayName() {
54
51
  return #{component_name};
55
52
  }
53
+ render() {
54
+ Opal.React.render_buffer.push([]);
55
+ Opal.React.active_components.push(this);
56
+ Opal.React.active_redux_components.push(this);
57
+ this.used_store_paths = [];
58
+ #{`this.__ruby_instance`.instance_exec(&`base.render_block`)};
59
+ Opal.React.active_redux_components.pop();
60
+ Opal.React.active_components.pop();
61
+ return Opal.React.render_buffer.pop();
62
+ }
63
+ data_access() {
64
+ return this.state.isomorfeus_store
65
+ }
56
66
  listener() {
57
67
  var next_state = Object.assign({}, this.state, { isomorfeus_store: Opal.Isomorfeus.store.native.getState() });
58
68
  if (this.scu_for_used_store_paths(this, this.state.isomorfeus_store, next_state.isomorfeus_store)) {