Module: LucidApp::NativeComponentConstructor

Defined in:
lib/lucid_app/native_component_constructor.rb

Class Method Summary collapse

Class Method Details

.extended(base) ⇒ Object

for should_component_update we apply ruby semantics for comparing props to do so, we convert the props to ruby hashes and then compare this makes sure, that for example rubys Nil object gets handled properly



6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
 
# File 'lib/lucid_app/native_component_constructor.rb', line 6

def self.extended(base)
  component_name = base.to_s
  # language=JS
  %x{
    base.lucid_react_component = class extends Opal.global.React.Component {
      constructor(props) {
        super(props);
        if (base.$default_state_defined()) {
          this.state = base.$state().$to_n();
        } else {
          this.state = {};
        };
        this.state.isomorfeus_store_state = Opal.Isomorfeus.store.native.getState();
        var current_store_state = this.state.isomorfeus_store_state;
        if (typeof current_store_state.component_class_state[#{component_name}] !== "undefined") {
          this.state.component_class_state = {};
          this.state.component_class_state[#{component_name}] = current_store_state.component_class_state[#{component_name}];
        } else {
          this.state.component_class_state = {};
          this.state.component_class_state[#{component_name}] = {};
        };
        this.__ruby_instance = base.$new(this);
        this.__object_id = this.__ruby_instance.$object_id().$to_s();
        if (Opal.Isomorfeus.$top_component() == nil) { Opal.Isomorfeus['$top_component='](this); }
        if (!this.state.component_state) {
          this.state.component_state = {};
          this.state.component_state[this.__object_id] = {};
        };
        var event_handlers = #{base.event_handlers};
        for (var i = 0; i < event_handlers.length; i++) {
          this[event_handlers[i]] = this[event_handlers[i]].bind(this);
        }
        var defined_refs = #{base.defined_refs};
        for (var ref in defined_refs) {
          if (defined_refs[ref] != null) {
            this[ref] = function(element) {
              element = Opal.React.native_element_or_component_to_ruby(element);
              #{`this.__ruby_instance`.instance_exec(`element`, &`defined_refs[ref]`)}
            }
            this[ref] = this[ref].bind(this);
          } else {
            this[ref] = Opal.global.React.createRef();
          }
        }
        this.listener = this.listener.bind(this);
        this.unsubscriber = Opal.Isomorfeus.store.native.subscribe(this.listener);
      }
      static get displayName() {
        return #{component_name};
      }
      render() {
        Opal.React.render_buffer.push([]);
        // console.log("lucid app pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());
        Opal.React.active_components.push(this);
        Opal.React.active_redux_components.push(this.__ruby_instance);
        let block_result = #{`this.__ruby_instance`.instance_exec(&`base.render_block`)};
        if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result); }
        Opal.React.active_redux_components.pop();
        Opal.React.active_components.pop();
        // console.log("lucid app popping", Opal.React.render_buffer, Opal.React.render_buffer.toString());
        let children = Opal.React.render_buffer.pop();
        return Opal.global.React.createElement(Opal.global.LucidApplicationContext.Provider, { value: this.state.isomorfeus_store_state }, children);
      }
      listener() {
        let next_state = Opal.Isomorfeus.store.native.getState();
        this.setState({ isomorfeus_store_state: next_state });
      }
      componentWillUnmount() {
        if (typeof this.unsubscriber === "function") { this.unsubscriber(); }
      }
      validateProp(props, propName, componentName) {
        try { base.$validate_prop(propName, props[propName]) }
        catch (e) { return new Error(componentName + ": Error: prop validation failed: " + e.message); }
        return null;
      }
    }
    base.jss_styles = null;
    base.jss_styles_used = null;
    base.jss_theme = {};
    base.use_styles = null;
    base.themed_react_component = function(props) {
      let classes = null;
      let theme = Opal.global.ReactJSS.useTheme();
      if (base.jss_styles) {
        if (!base.use_styles || (Opal.Isomorfeus["$development?"]() && !Object.is(base.jss_styles, base.jss_styles_used))) {
          base.jss_styles_used = base.jss_styles;
          let styles = base.jss_styles
          if (typeof styles === 'function') { styles = styles(theme); }
          base.use_styles = Opal.global.ReactJSS.createUseStyles(styles);
        }
        classes = base.use_styles();
      }
      let themed_classes_props = Object.assign({}, props, { classes: classes, theme: theme });
      return Opal.global.React.createElement(base.lucid_react_component, themed_classes_props);
    }
    base.react_component = function(props) {
      let themed_component = Opal.global.React.createElement(base.themed_react_component, props);
      return Opal.global.React.createElement(Opal.global.ReactJSS.ThemeProvider, { theme: base.jss_theme }, themed_component);
    }
  }
end