isomorfeus-preact 10.6.30 → 10.6.34

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 261bf828fca3276232e1cc9a57f32cb6bd45ddd0fa2d386c42dc799813a5f110
-  data.tar.gz: a18cdda3bbb233fd376f90c0cabda7637cd110a34697e2a2d7710e78249775db
+  metadata.gz: 94d90b7804579f6dd573ec4878ad1d0f4579a7541eefb6b8a7874ca115b36951
+  data.tar.gz: 835a4f9d89c1f0cdd2bc3e7f909481ed182fb4cbd8d5aaf545744280645c16aa
 SHA512:
-  metadata.gz: a76b3e58d5d4fd34409126b93487eb8f257509f6c9ff4697248c60333d51c416b1232bc78c4e72d694fbbab5b2392405cdda5aa40310f500e0a53e8d7e61e76b
-  data.tar.gz: ea99ad3ec25838e3c6c94d971e529fe92b7ba7597e685578fcd097a62a852e095faae7f10d18d7822d5880510350ac1997578818d4cde8ae9a45bd2ec9a8f971
+  metadata.gz: 2ec9097e4dfae922a7d665831a90ded698c549f1ac1cbde91912bce844b7124c7de6a4eaaade509624e4a44e56f265fe0c1625daec89375313a91f8d2cae9a29
+  data.tar.gz: b4219dd2ad74032549c276a29d4388058175ea4baf161dfee8c2f5ad7d4181314895289917b2db4e898375130940ab8fd6a244b062c153891cb4586d8c548cb8

data/README.md

@@ -7,7 +7,7 @@ Isomorfeus Preact<br/>
 Develop Preact components for Opal Ruby along with very easy to use and advanced Preact-Redux Components.
 
 ## Community and Support
-At the [Isomorfeus Framework Project](http://isomorfeus.com)
+At the [Isomorfeus Framework Project](https://isomorfeus.com)
 
 ## Versioning and Compatibility
 isomorfeus-preact version follows the Preact version which features and API it implements.

data/lib/isomorfeus/preact_view_helper.rb

@@ -60,7 +60,9 @@ module Isomorfeus
           global.Exception = false;
           global.IsomorfeusSessionId = '#{Thread.current[:isomorfeus_session_id]}';
           global.Opal.Isomorfeus['$env=']('#{Isomorfeus.env}');
-          if (typeof global.Opal.Isomorfeus.$negotiated_locale === 'function') {
+          if (typeof global.Opal.Isomorfeus["$current_locale="] === 'function') {
+            global.Opal.Isomorfeus["$current_locale="]('#{props[:locale]}');
+          } else if (typeof global.Opal.Isomorfeus["$negotiated_locale="] === 'function') { // remove later on
             global.Opal.Isomorfeus["$negotiated_locale="]('#{props[:locale]}');
           }
           global.Opal.Isomorfeus['$force_init!']();
@@ -124,11 +126,11 @@ module Isomorfeus
           let rendered_tree;
           let ssr_styles;
           let component;
-            try {
-              rendered_tree = global.Opal.Isomorfeus.TopLevel.$render_component_to_string('#{component_name}', #{Oj.dump(props, mode: :strict)});
-            } catch (e) {
-              global.Exception = e;
-            }
+          try {
+            rendered_tree = global.Opal.Isomorfeus.TopLevel.$render_component_to_string('#{component_name}', #{Oj.dump(props, mode: :strict)});
+          } catch (e) {
+            global.Exception = e;
+          }
           let application_state = global.Opal.Isomorfeus.store.native.getState();
           let transport_busy = false;
           if (typeof global.Opal.Isomorfeus.Transport !== 'undefined' && global.Opal.Isomorfeus.Transport["$busy?"]()) { transport_busy = true; }
@@ -171,7 +173,7 @@ module Isomorfeus
       if Isomorfeus.server_side_rendering
         render_result = "<script type='application/javascript'>\nServerSideRenderingStateJSON = #{Oj.dump(application_state, mode: :strict)}\n</script>\n" << render_result
       end
-      STDERR.puts "PreactViewHelper Server Side Rendering rendered #{pass} passes and took ~#{Time.now - start_time}s" if Isomorfeus.development? && !skip_ssr
+      STDERR.puts "PreactViewHelper Server Side Rendering rendered #{pass} passes and took ~#{((Time.now - start_time)*1000).to_i}ms" if Isomorfeus.development? && !skip_ssr
       render_result
     end
 

data/lib/isomorfeus-preact.rb

@@ -38,6 +38,14 @@ if RUBY_ENGINE == 'opal'
   require 'preact/native_constant_wrapper'
 
   # Preact::Component
+  # make modules available
+  module Preact
+    module Component
+    end
+    module FunctionComponent
+    end
+  end
+
   require 'preact/component/api'
   require 'preact/component/callbacks'
   require 'preact/component/initializer'
@@ -52,6 +60,13 @@ if RUBY_ENGINE == 'opal'
     include Preact::ComponentResolution
   end
 
+  # make modules available
+  module LucidApp
+  end
+  module LucidComponent
+  end
+  module LucidFunc
+  end
   # init LucidApplicationContext (Store Provider and Consumer)
   require 'lucid_app/context'
   LucidApp::Context.create_application_context

data/lib/isomorfeus_preact/lucid_app/api.rb

@@ -1,40 +1,38 @@
-module LucidApp
-  module Api
-    def self.included(base)
-      base.instance_exec do
-        def theme(theme_hash = nil, &block)
-          theme_hash = block.call if block_given?
-          if theme_hash
-            component_name = self.to_s
-            %x{
-              let rule_name = component_name.replace(/:/g, '_');
-              let ogni = Opal.global.NanoCSSInstance;
-              if (base.css_theme && #{Isomorfeus.production?}) { return base.css_theme; }
-              else if(#{Isomorfeus.development?}) {
-                if (#{on_browser?}) {
-                  ogni.delete_from_sheet(rule_name);
-                  ogni.delete_from_rule_blocks(rule_name);
-                  ogni.hydrate_force_put = true;
-                }
-              }
-              if (typeof theme_hash.$is_wrapped_style !== 'undefined') {
-                base.css_theme = theme_hash;
-              } else {
-                let css;
-                if (typeof theme_hash.$to_n === 'function') { css = theme_hash.$to_n(); }
-                else { css = theme_hash; }
-                let nano_styles = ogni.sheet(css, rule_name);
-                base.css_theme = #{::LucidComponent::StylesWrapper.new(`nano_styles`)};
+module LucidApp::Api
+  def self.included(base)
+    base.instance_exec do
+      def theme(theme_hash = nil, &block)
+        theme_hash = block.call if block_given?
+        if theme_hash
+          component_name = self.to_s
+          %x{
+            let rule_name = component_name.replace(/:/g, '_');
+            let ogni = Opal.global.NanoCSSInstance;
+            if (base.css_theme && #{Isomorfeus.production?}) { return base.css_theme; }
+            else if(#{Isomorfeus.development?}) {
+              if (#{on_browser?}) {
+                ogni.delete_from_sheet(rule_name);
+                ogni.delete_from_rule_blocks(rule_name);
+                ogni.hydrate_force_put = true;
               }
             }
-          end
-          %x{
-            if (!base.css_theme) { return nil; }
-            return base.css_theme;
+            if (typeof theme_hash.$is_wrapped_style !== 'undefined') {
+              base.css_theme = theme_hash;
+            } else {
+              let css;
+              if (typeof theme_hash.$to_n === 'function') { css = theme_hash.$to_n(); }
+              else { css = theme_hash; }
+              let nano_styles = ogni.sheet(css, rule_name);
+              base.css_theme = #{::LucidComponent::StylesWrapper.new(`nano_styles`)};
+            }
           }
         end
-        alias_method :theme=, :theme
+        %x{
+          if (!base.css_theme) { return nil; }
+          return base.css_theme;
+        }
       end
+      alias_method :theme=, :theme
     end
   end
 end

data/lib/isomorfeus_preact/lucid_app/mixin.rb

@@ -1,15 +1,14 @@
-module LucidApp
-  module Mixin
-    def self.included(base)
-      base.include(::Native::Wrapper)
-      base.extend(::LucidApp::NativeComponentConstructor)
-      base.include(::Preact::Elements)
-      base.extend(::LucidPropDeclaration::Mixin)
-      base.include(::Preact::Component::Api)
-      base.include(::Preact::Component::Callbacks)
-      base.include(::LucidComponent::Api)
-      base.include(::LucidApp::Api)
-      base.include(::LucidComponent::Initializer)
-    end
+module LucidApp::Mixin
+  def self.included(base)
+    base.include(::Native::Wrapper)
+    base.extend(::LucidApp::NativeComponentConstructor)
+    base.include(::Preact::Elements)
+    base.extend(::LucidPropDeclaration::Mixin)
+    base.include(::Preact::Component::Api)
+    base.include(::Preact::Component::Callbacks)
+    base.include(::LucidComponent::Api)
+    base.include(::LucidApp::Api)
+    base.include(::LucidComponent::Initializer)
+    base.include(::LucidI18n::Mixin) if `("lucid_i18n/mixin" in Opal.modules)`
   end
 end

data/lib/isomorfeus_preact/lucid_app/native_component_constructor.rb

@@ -1,102 +1,100 @@
-module LucidApp
-  module NativeComponentConstructor
-    # 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
-    def self.extended(base)
-      component_name = base.to_s
-      %x{
-        base.css_styles = null;
-        base.css_theme = null;
-        base.preload_block = null;
-        base.while_loading_block = null;
+module LucidApp::NativeComponentConstructor
+  # 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
+  def self.extended(base)
+    component_name = base.to_s
+    %x{
+      base.css_styles = null;
+      base.css_theme = null;
+      base.preload_block = null;
+      base.while_loading_block = null;
 
-        base.preact_component = class extends Opal.global.Preact.Component {
-          constructor(props) {
-            super(props);
-            const oper = Opal.Preact;
-            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.class_state[#{component_name}] !== "undefined") {
-              this.state.class_state = {};
-              this.state.class_state[#{component_name}] = current_store_state.class_state[#{component_name}];
-            } else {
-              this.state.class_state = {};
-              this.state.class_state[#{component_name}] = {};
-            };
-            this.__ruby_instance = base.$new(this);
-            var defined_refs = #{base.defined_refs};
-            for (var ref in defined_refs) {
-              if (defined_refs[ref] != null) {
-                let r = ref; // to ensure closure for function below gets correct ref name
-                this[ref] = function(element) {
-                  element = oper.native_element_or_component_to_ruby(element);
-                  oper.register_active_component(this);
-                  try {
-                    #{`this.__ruby_instance`.instance_exec(`element`, &`defined_refs[r]`)}
-                  } catch (e) { console.error(e.message === nil ? 'error at' : e.message, e.stack); }
-                  oper.unregister_active_component(this);
-                }
-                this[ref] = this[ref].bind(this);
-              } else {
-                this[ref] = Opal.global.Preact.createRef();
+      base.preact_component = class extends Opal.global.Preact.Component {
+        constructor(props) {
+          super(props);
+          const oper = Opal.Preact;
+          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.class_state[#{component_name}] !== "undefined") {
+            this.state.class_state = {};
+            this.state.class_state[#{component_name}] = current_store_state.class_state[#{component_name}];
+          } else {
+            this.state.class_state = {};
+            this.state.class_state[#{component_name}] = {};
+          };
+          this.__ruby_instance = base.$new(this);
+          var defined_refs = #{base.defined_refs};
+          for (var ref in defined_refs) {
+            if (defined_refs[ref] != null) {
+              let r = ref; // to ensure closure for function below gets correct ref name
+              this[ref] = function(element) {
+                element = oper.native_element_or_component_to_ruby(element);
+                oper.register_active_component(this);
+                try {
+                  #{`this.__ruby_instance`.instance_exec(`element`, &`defined_refs[r]`)}
+                } catch (e) { console.error(e.message === nil ? 'error at' : e.message, e.stack); }
+                oper.unregister_active_component(this);
               }
+              this[ref] = this[ref].bind(this);
+            } else {
+              this[ref] = Opal.global.Preact.createRef();
             }
-            if (base.preload_block) {
-              oper.register_active_component(this);
-              this.state.preloaded = this.__ruby_instance.$execute_preload_block(); // caught in execute_preload_block itself
-              oper.unregister_active_component(this);
-            }
-            this.listener = this.listener.bind(this);
-            this.unsubscriber = Opal.Isomorfeus.store.native.subscribe(this.listener);
-          }
-          static get displayName() {
-            return #{component_name};
           }
-          render(props, state) {
-            const oper = Opal.Preact;
-            oper.render_buffer.push([]);
+          if (base.preload_block) {
             oper.register_active_component(this);
-            let block_result;
-            try {
-              if (base.while_loading_block && !state.preloaded) { block_result = #{`this.__ruby_instance`.instance_exec(&`base.while_loading_block`)}; }
-              else { block_result = #{`this.__ruby_instance`.instance_exec(&`base.render_block`)}; }
-              if (block_result && block_result !== nil) { oper.render_block_result(block_result); }
-            } catch (e) {
-              if (oper.using_did_catch) { throw e; }
-              else { console.error(e.message === nil ? 'error at' : e.message, e.stack); }
-            }
+            this.state.preloaded = this.__ruby_instance.$execute_preload_block(); // caught in execute_preload_block itself
             oper.unregister_active_component(this);
-            let children = oper.render_buffer.pop();
-            return Opal.global.Preact.createElement(Opal.global.LucidApplicationContext.Provider, { value: { iso_store: this.state.isomorfeus_store_state, iso_theme: base.css_theme }}, children);
-          }
-          data_access() {
-            return this.state.isomorfeus_store_state;
-          }
-          listener() {
-            let next_state = Opal.Isomorfeus.store.native.getState();
-            this.setState({ isomorfeus_store_state: next_state });
-          }
-          componentWillUnmount() {
-            if (typeof this.unsubscriber === "function") { this.unsubscriber(); }
           }
-          shouldComponentUpdate(next_props, next_state) {
-            if (!Opal.Preact.props_are_equal(this.props, next_props)) { return true; }
-            if (Opal.Preact.state_is_not_equal(this.state, next_state)) { return true; }
-            return false;
-          }
-          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;
+          this.listener = this.listener.bind(this);
+          this.unsubscriber = Opal.Isomorfeus.store.native.subscribe(this.listener);
+        }
+        static get displayName() {
+          return #{component_name};
+        }
+        render(props, state) {
+          const oper = Opal.Preact;
+          oper.render_buffer.push([]);
+          oper.register_active_component(this);
+          let block_result;
+          try {
+            if (base.while_loading_block && !state.preloaded) { block_result = #{`this.__ruby_instance`.instance_exec(&`base.while_loading_block`)}; }
+            else { block_result = #{`this.__ruby_instance`.instance_exec(&`base.render_block`)}; }
+            if (block_result && block_result !== nil) { oper.render_block_result(block_result); }
+          } catch (e) {
+            if (oper.using_did_catch) { throw e; }
+            else { console.error(e.message === nil ? 'error at' : e.message, e.stack); }
           }
+          oper.unregister_active_component(this);
+          let children = oper.render_buffer.pop();
+          return Opal.global.Preact.createElement(Opal.global.LucidApplicationContext.Provider, { value: { iso_store: this.state.isomorfeus_store_state, iso_theme: base.css_theme }}, children);
+        }
+        data_access() {
+          return this.state.isomorfeus_store_state;
+        }
+        listener() {
+          let next_state = Opal.Isomorfeus.store.native.getState();
+          this.setState({ isomorfeus_store_state: next_state });
+        }
+        componentWillUnmount() {
+          if (typeof this.unsubscriber === "function") { this.unsubscriber(); }
+        }
+        shouldComponentUpdate(next_props, next_state) {
+          if (!Opal.Preact.props_are_equal(this.props, next_props)) { return true; }
+          if (Opal.Preact.state_is_not_equal(this.state, next_state)) { return true; }
+          return false;
+        }
+        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;
         }
       }
-    end
+    }
   end
 end

data/lib/isomorfeus_preact/lucid_component/api.rb

@@ -1,123 +1,121 @@
-module LucidComponent
-  module Api
-    def self.included(base)
-      base.instance_exec do
-        # stores
-        attr_accessor :app_store
-        attr_accessor :class_store
-        attr_accessor :store
+module LucidComponent::Api
+  def self.included(base)
+    base.instance_exec do
+      # stores
+      attr_accessor :app_store
+      attr_accessor :class_store
+      attr_accessor :store
 
-        def class_store
-          @class_store ||= ::LucidComponent::ClassStoreProxy.new(self.to_s)
-        end
+      def class_store
+        @class_store ||= ::LucidComponent::ClassStoreProxy.new(self.to_s)
+      end
 
-        # preloading
-        def preload(&block)
-          `base.preload_block = block`
-          component_did_mount do
-            unless self.state.preloaded
-              @_preload_promise.then { self.state.preloaded = true } if @_preload_promise
-            end
+      # preloading
+      def preload(&block)
+        `base.preload_block = block`
+        component_did_mount do
+          unless self.state.preloaded
+            @_preload_promise.then { self.state.preloaded = true } if @_preload_promise
           end
         end
+      end
 
-        def while_loading(option = nil, &block)
-          wl_block = proc do
-            if @_preload_promise && @_preload_promise.resolved?
-              instance_exec(&`base.render_block`)
-            else
-              instance_exec(&block)
-            end
+      def while_loading(option = nil, &block)
+        wl_block = proc do
+          if @_preload_promise && @_preload_promise.resolved?
+            instance_exec(&`base.render_block`)
+          else
+            instance_exec(&block)
           end
-          `base.while_loading_block = wl_block`
         end
+        `base.while_loading_block = wl_block`
+      end
 
-        # styles
-        def styles(styles_hash = nil, &block)
-          styles_hash = block.call if block_given?
-          if styles_hash
-            component_name = self.to_s
-            %x{
-              let rule_name = component_name.replace(/:/g, '_');
-              let ogni = Opal.global.NanoCSSInstance;
-              if (base.css_styles && #{Isomorfeus.production?}) { return base.css_styles; }
-              else if(#{Isomorfeus.development?}) {
-                if (#{on_browser?}) {
-                  ogni.delete_from_sheet(rule_name);
-                  ogni.delete_from_rule_blocks(rule_name);
-                  ogni.hydrate_force_put = true;
-                }
-              }
-              if (typeof styles_hash.$is_wrapped_style !== 'undefined') {
-                base.css_styles = styles_hash;
-              } else {
-                let css;
-                if (typeof styles_hash.$to_n === 'function') { css = styles_hash.$to_n(); }
-                else { css = styles_hash; }
-                let nano_styles = ogni.sheet(css, rule_name);
-                base.css_styles = #{::LucidComponent::StylesWrapper.new(`nano_styles`)};
+      # styles
+      def styles(styles_hash = nil, &block)
+        styles_hash = block.call if block_given?
+        if styles_hash
+          component_name = self.to_s
+          %x{
+            let rule_name = component_name.replace(/:/g, '_');
+            let ogni = Opal.global.NanoCSSInstance;
+            if (base.css_styles && #{Isomorfeus.production?}) { return base.css_styles; }
+            else if(#{Isomorfeus.development?}) {
+              if (#{on_browser?}) {
+                ogni.delete_from_sheet(rule_name);
+                ogni.delete_from_rule_blocks(rule_name);
+                ogni.hydrate_force_put = true;
               }
             }
-          end
-          %x{
-            if (!base.css_styles) { return nil; }
-            return base.css_styles;
+            if (typeof styles_hash.$is_wrapped_style !== 'undefined') {
+              base.css_styles = styles_hash;
+            } else {
+              let css;
+              if (typeof styles_hash.$to_n === 'function') { css = styles_hash.$to_n(); }
+              else { css = styles_hash; }
+              let nano_styles = ogni.sheet(css, rule_name);
+              base.css_styles = #{::LucidComponent::StylesWrapper.new(`nano_styles`)};
+            }
           }
         end
-        alias_method :styles=, :styles
+        %x{
+          if (!base.css_styles) { return nil; }
+          return base.css_styles;
+        }
       end
+      alias_method :styles=, :styles
+    end
 
-      # stores
-      def local_store
-        LocalStore
-      end
+    # stores
+    def local_store
+      LocalStore
+    end
 
-      def session_store
-        SessionStore
-      end
+    def session_store
+      SessionStore
+    end
 
-      def theme
-        props.theme
-      end
+    def theme
+      props.theme
+    end
 
-      # preloading
-      def execute_preload_block
-        begin
-          @_preload_promise = instance_exec(&self.class.JS[:preload_block])
-        rescue => e
-          %x{
-            console.error(e.message);
-            console.error(e.stack);
-          }
-        end
-        if @_preload_promise
-          @_preload_promise.fail do |result|
-            err_text = "#{self.class.name}: preloading failed, last result: #{result.nil? ? 'nil' : result}!"
-            `console.error(err_text)`
-          end
-          @_preload_promise.resolved?
-        else
-          false
+    # preloading
+    def execute_preload_block
+      begin
+        @_preload_promise = instance_exec(&self.class.JS[:preload_block])
+      rescue => e
+        %x{
+          console.error(e.message);
+          console.error(e.stack);
+        }
+      end
+      if @_preload_promise
+        @_preload_promise.fail do |result|
+          err_text = "#{self.class.name}: preloading failed, last result: #{result.nil? ? 'nil' : result}!"
+          `console.error(err_text)`
         end
+        @_preload_promise.resolved?
+      else
+        false
       end
+    end
 
-      def preloaded?
-        !!state.preloaded
-      end
+    def preloaded?
+      !!state.preloaded
+    end
 
-      # styles
-      def styles
-        %x{
-          let c = self.$class()
-          if (typeof(c.css_styles) === 'undefined') { return nil; }
-          return c.css_styles;
-        }
-      end
+    # styles
+    def styles
+      %x{
+        let c = self.$class()
+        if (typeof(c.css_styles) === 'undefined') { return nil; }
+        return c.css_styles;
+      }
+    end
 
-      # requires transport
-      def current_user
-        Isomorfeus.current_user
-      end
+    # requires transport
+    def current_user
+      Isomorfeus.current_user
     end
   end
 end

data/lib/isomorfeus_preact/lucid_component/initializer.rb

@@ -1,12 +1,10 @@
-module LucidComponent
-  module Initializer
-    def initialize(native_component)
-      @native = native_component
-      @app_store = LucidComponent::AppStoreProxy.new(self)
-      @class_store = LucidComponent::ClassStoreProxy.new(self.class.to_s, self, @native)
-      @store = LucidComponent::InstanceStoreProxy.new(self)
-      @props = `Opal.Preact.Props.$new(#@native)`
-      @state = `Opal.Preact.State.$new(#@native)`
-    end
+module LucidComponent::Initializer
+  def initialize(native_component)
+    @native = native_component
+    @app_store = LucidComponent::AppStoreProxy.new(self)
+    @class_store = LucidComponent::ClassStoreProxy.new(self.class.to_s, self, @native)
+    @store = LucidComponent::InstanceStoreProxy.new(self)
+    @props = `Opal.Preact.Props.$new(#@native)`
+    @state = `Opal.Preact.State.$new(#@native)`
   end
 end

data/lib/isomorfeus_preact/lucid_component/mixin.rb

@@ -1,14 +1,13 @@
-module LucidComponent
-  module Mixin
-    def self.included(base)
-      base.include(::Native::Wrapper)
-      base.extend(::LucidComponent::NativeComponentConstructor)
-      base.include(::Preact::Elements)
-      base.extend(::LucidPropDeclaration::Mixin)
-      base.include(::Preact::Component::Api)
-      base.include(::Preact::Component::Callbacks)
-      base.include(::LucidComponent::Api)
-      base.include(::LucidComponent::Initializer)
-    end
+module LucidComponent::Mixin
+  def self.included(base)
+    base.include(::Native::Wrapper)
+    base.extend(::LucidComponent::NativeComponentConstructor)
+    base.include(::Preact::Elements)
+    base.extend(::LucidPropDeclaration::Mixin)
+    base.include(::Preact::Component::Api)
+    base.include(::Preact::Component::Callbacks)
+    base.include(::LucidComponent::Api)
+    base.include(::LucidComponent::Initializer)
+    base.include(::LucidI18n::Mixin) if `("lucid_i18n/mixin" in Opal.modules)`
   end
 end