isomorfeus-preact 10.6.31 → 10.6.35

data/lib/isomorfeus_preact/lucid_component/initializer.rb

@@ -1,12 +1,9 @@
-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)
+    @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

data/lib/isomorfeus_preact/lucid_component/native_component_constructor.rb

@@ -1,89 +1,87 @@
-module LucidComponent
-  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
-      wrapper_name = component_name + 'Wrapper'
-      %x{
-        base.css_styles = null;
-        base.preload_block = null;
-        base.while_loading_block = null;
+module LucidComponent::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
+    wrapper_name = component_name + 'Wrapper'
+    %x{
+      base.css_styles = null;
+      base.preload_block = null;
+      base.while_loading_block = null;
 
-        base.preact_component = function(props) {
-          let value = Opal.global.PreactHooks.useContext(Opal.global.LucidApplicationContext);
-          return Opal.global.Preact.createElement(base.lucid_preact_component, Object.assign({}, props, value));
-        };
-        base.preact_component.displayName = #{wrapper_name};
-        base.lucid_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.__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 = function(props) {
+        let value = Opal.global.PreactHooks.useContext(Opal.global.LucidApplicationContext);
+        return Opal.global.Preact.createElement(base.lucid_preact_component, Object.assign({}, props, value));
+      };
+      base.preact_component.displayName = #{wrapper_name};
+      base.lucid_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.__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);
-            }
-          }
-          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 result = oper.render_buffer.pop();
-            return (result.length === 1) ? result[0] : result;
-          }
-          data_access() {
-            return this.props.iso_store;
-          }
-          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;
+        }
+        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); }
           }
-        };
-      }
-    end
+          oper.unregister_active_component(this);
+          let result = oper.render_buffer.pop();
+          return (result.length === 1) ? result[0] : result;
+        }
+        data_access() {
+          return this.props.iso_store;
+        }
+        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

data/lib/isomorfeus_preact/lucid_func/initializer.rb

@@ -1,11 +1,8 @@
-module LucidFunc
-  module Initializer
-    def initialize
-      self.JS[:native_props] = `{ props: null }`
-      @native_props = `Opal.Preact.Props.$new(#{self})`
-      @app_store = LucidComponent::AppStoreProxy.new(self)
-      @class_store = LucidComponent::ClassStoreProxy.new(self.class.to_s, self, self)
-      @store = LucidComponent::InstanceStoreProxy.new(self)
-    end
+module LucidFunc::Initializer
+  def initialize
+    self.JS[:native_props] = `{ props: null }`
+    @native_props = `Opal.Preact.Props.$new(#{self})`
+    @app_store = LucidComponent::AppStoreProxy.new(self)
+    @class_store = LucidComponent::ClassStoreProxy.new(self.class.to_s, self, self)
   end
 end

data/lib/isomorfeus_preact/lucid_func/mixin.rb

@@ -1,11 +1,10 @@
-module LucidFunc
-  module Mixin
-    def self.included(base)
-      base.include(::LucidFunc::Initializer)
-      base.include(::Preact::FunctionComponent::Api)
-      base.extend(::LucidFunc::NativeComponentConstructor)
-      base.include(::Preact::Elements)
-      base.include(::LucidComponent::Api)
-    end
+module LucidFunc::Mixin
+  def self.included(base)
+    base.include(::LucidFunc::Initializer)
+    base.include(::Preact::FunctionComponent::Api)
+    base.extend(::LucidFunc::NativeComponentConstructor)
+    base.include(::Preact::Elements)
+    base.include(::LucidComponent::Api)
+    base.include(::LucidI18n::Mixin) if `("lucid_i18n/mixin" in Opal.modules)`
   end
 end

data/lib/isomorfeus_preact/lucid_func/native_component_constructor.rb

@@ -1,58 +1,56 @@
-module LucidFunc
-  module NativeComponentConstructor
-    def self.extended(base)
-      component_name = base.to_s
-      %x{
-        base.css_styles = null;
-        base.instance_init = function(initial) {
-          let ruby_state = { instance: #{base.new(`{}`)} };
-          ruby_state.instance.__ruby_instance = ruby_state.instance;
-          ruby_state.instance.data_access = function() { return this.props.iso_store; }
-          ruby_state.instance.data_access.bind(ruby_state.instance);
-          return ruby_state;
-        }
-        base.instance_reducer = function(state, action) { return state; }
-        base.preact_component = function(props) {
-          const og = Opal.global;
-          const oper = Opal.Preact;
-          oper.render_buffer.push([]);
-          // console.log("function pushed", oper.render_buffer, oper.render_buffer.toString());
-          // Lucid functionality
-          let context = og.PreactHooks.useContext(og.LucidApplicationContext);
-          // prepare Ruby instance
-          const [__ruby_state, __ruby_dispatch] = og.PreactHooks.useReducer(base.instance_reducer, null, base.instance_init);
-          const __ruby_instance = __ruby_state.instance;
-          __ruby_instance.props = Object.assign({}, props, context);
-          oper.register_active_component(__ruby_instance);
-          try {
-            let block_result = #{`__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(__ruby_instance);
-          // console.log("function popping", oper.render_buffer, oper.render_buffer.toString());
-          let result = oper.render_buffer.pop();
-          return (result.length === 1) ? result[0] : result;
-        };
-        base.preact_component.displayName = #{component_name};
+module LucidFunc::NativeComponentConstructor
+  def self.extended(base)
+    component_name = base.to_s
+    %x{
+      base.css_styles = null;
+      base.instance_init = function(initial) {
+        let ruby_state = { instance: #{base.new(`{}`)} };
+        ruby_state.instance.__ruby_instance = ruby_state.instance;
+        ruby_state.instance.data_access = function() { return this.props.iso_store; }
+        ruby_state.instance.data_access.bind(ruby_state.instance);
+        return ruby_state;
       }
+      base.instance_reducer = function(state, action) { return state; }
+      base.preact_component = function(props) {
+        const og = Opal.global;
+        const oper = Opal.Preact;
+        oper.render_buffer.push([]);
+        // console.log("function pushed", oper.render_buffer, oper.render_buffer.toString());
+        // Lucid functionality
+        let context = og.PreactHooks.useContext(og.LucidApplicationContext);
+        // prepare Ruby instance
+        const [__ruby_state, __ruby_dispatch] = og.PreactHooks.useReducer(base.instance_reducer, null, base.instance_init);
+        const __ruby_instance = __ruby_state.instance;
+        __ruby_instance.props = Object.assign({}, props, context);
+        oper.register_active_component(__ruby_instance);
+        try {
+          let block_result = #{`__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(__ruby_instance);
+        // console.log("function popping", oper.render_buffer, oper.render_buffer.toString());
+        let result = oper.render_buffer.pop();
+        return (result.length === 1) ? result[0] : result;
+      };
+      base.preact_component.displayName = #{component_name};
+    }
 
-      base_module = base.to_s.deconstantize
-      if base_module != ''
-        base_module.constantize.define_singleton_method(base.to_s.demodulize) do |*args, &block|
-          `Opal.Preact.internal_prepare_args_and_render(#{base}.preact_component, args, block)`
-        end
-      else
-        Object.define_method(base.to_s) do |*args, &block|
-          `Opal.Preact.internal_prepare_args_and_render(#{base}.preact_component, args, block)`
-        end
+    base_module = base.to_s.deconstantize
+    if base_module != ''
+      base_module.constantize.define_singleton_method(base.to_s.demodulize) do |*args, &block|
+        `Opal.Preact.internal_prepare_args_and_render(#{base}.preact_component, args, block)`
       end
-
-      def render(&block)
-        `base.render_block = #{block}`
+    else
+      Object.define_method(base.to_s) do |*args, &block|
+        `Opal.Preact.internal_prepare_args_and_render(#{base}.preact_component, args, block)`
       end
     end
+
+    def render(&block)
+      `base.render_block = #{block}`
+    end
   end
 end

data/lib/isomorfeus_preact/preact/function_component/api.rb

@@ -1,123 +1,119 @@
-module Preact
-  module FunctionComponent
-    module Api
-      def props
-        @native_props
-      end
+module Preact::FunctionComponent::Api
+  def props
+    @native_props
+  end
 
-      def use_callback(*deps, &block)
-        `Opal.global.PreactHooks.useCallback(function() { #{block.call} }, deps)`
-      end
+  def use_callback(*deps, &block)
+    `Opal.global.PreactHooks.useCallback(function() { #{block.call} }, deps)`
+  end
 
-      def use_context(context)
-        native_context = `(typeof context.$is_wrapped_context !== 'undefined')` ? context.to_n : context
-        `Opal.global.PreactHooks.useContext(native_context)`
-      end
+  def use_context(context)
+    native_context = `(typeof context.$is_wrapped_context !== 'undefined')` ? context.to_n : context
+    `Opal.global.PreactHooks.useContext(native_context)`
+  end
 
-      def use_debug_value(value, formatter)
-        formatter = `null` unless formatter
-        `Opal.global.PreactHooks.useDebugValue(value, formatter)`
-      end
+  def use_debug_value(value, formatter)
+    formatter = `null` unless formatter
+    `Opal.global.PreactHooks.useDebugValue(value, formatter)`
+  end
 
-      def use_effect(*args, &block)
-        `Opal.global.PreactHooks.useEffect(function() { #{block.call} }, args)`
-      end
+  def use_effect(*args, &block)
+    `Opal.global.PreactHooks.useEffect(function() { #{block.call} }, args)`
+  end
 
-      def use_error_boundary(&block)
-        error = nil
-        reset_error = nil
-        %x{
-          let _error;
-          let _reset_error;
-          if (block) {
-            [_error, reset_error] = Opal.global.PreactHooks.useErrorBoundary(function() { #{block.call(Error(_error))} });
-          } else {
-            [_error, reset_error] = Opal.global.PreactHooks.useErrorBoundary();
-          }
-          error = #{Error(e)};
-        }
-        [error, reset_error]
-      end
+  def use_error_boundary(&block)
+    error = nil
+    reset_error = nil
+    %x{
+      let _error;
+      let _reset_error;
+      if (block) {
+        [_error, reset_error] = Opal.global.PreactHooks.useErrorBoundary(function() { #{block.call(Error(_error))} });
+      } else {
+        [_error, reset_error] = Opal.global.PreactHooks.useErrorBoundary();
+      }
+      error = #{Error(e)};
+    }
+    [error, reset_error]
+  end
 
-      def use_imperative_handle(ruby_ref, *args, &block)
-        ref = ruby_ref.to_n
-        args = `null` if args.empty?
-        `Opal.global.PreactHooks.useImperativeHandle(ref, function() { #{block.call} }, args)`
-      end
+  def use_imperative_handle(ruby_ref, *args, &block)
+    ref = ruby_ref.to_n
+    args = `null` if args.empty?
+    `Opal.global.PreactHooks.useImperativeHandle(ref, function() { #{block.call} }, args)`
+  end
 
-      def use_layout_effect(&block)
-        `Opal.global.PreactHooks.useLayoutEffect(function() { #{block.call} })`
-      end
+  def use_layout_effect(&block)
+    `Opal.global.PreactHooks.useLayoutEffect(function() { #{block.call} })`
+  end
 
-      def use_memo(*deps, &block)
-        `Opal.global.PreactHooks.useMemo(function() { #{block.call} }, deps)`
-      end
+  def use_memo(*deps, &block)
+    `Opal.global.PreactHooks.useMemo(function() { #{block.call} }, deps)`
+  end
 
-      def use_reducer(inital_state, &block)
-        state = nil
-        dispatcher = nil
-        %x{
-          [state, dispatcher] = Opal.global.PreactHooks.useReducer(function(state, action) {
-            #{block.call(state, action)}
-          }, initial_state);
-        }
-        [state, proc { |arg| `dispatcher(arg)` }]
-      end
+  def use_reducer(inital_state, &block)
+    state = nil
+    dispatcher = nil
+    %x{
+      [state, dispatcher] = Opal.global.PreactHooks.useReducer(function(state, action) {
+        #{block.call(state, action)}
+      }, initial_state);
+    }
+    [state, proc { |arg| `dispatcher(arg)` }]
+  end
 
-      def use_ref(native_ref)
-        Preact::Ref.new(`Opal.global.PreactHooks.useRef(native_ref)`)
-      end
+  def use_ref(native_ref)
+    Preact::Ref.new(`Opal.global.PreactHooks.useRef(native_ref)`)
+  end
 
-      def use_state(initial_value)
-        initial = nil
-        setter = nil
-        `[initial, setter] = Opal.global.PreactHooks.useState(initial_value);`
-        [initial, proc { |arg| `setter(arg)` }]
-      end
+  def use_state(initial_value)
+    initial = nil
+    setter = nil
+    `[initial, setter] = Opal.global.PreactHooks.useState(initial_value);`
+    [initial, proc { |arg| `setter(arg)` }]
+  end
 
-      def get_preact_element(arg, &block)
-        if block_given?
-          # execute block, fetch last element from buffer
-          %x{
-            let last_buffer_length = Opal.Preact.render_buffer[Opal.Preact.render_buffer.length - 1].length;
-            let last_buffer_element = Opal.Preact.render_buffer[Opal.Preact.render_buffer.length - 1][last_buffer_length - 1];
-            block.$call();
-            // console.log("get_preact_element popping", Opal.Preact.render_buffer, Opal.Preact.render_buffer.toString())
-            let new_element = Opal.Preact.render_buffer[Opal.Preact.render_buffer.length - 1].pop();
-            if (last_buffer_element === new_element) { #{Isomorfeus.raise_error(message: "Block did not create any Preact element!")} }
-            return new_element;
-          }
-        else
-          # element was rendered before being passed as arg
-          # fetch last element from buffer
-          # `console.log("get_preact_element popping", Opal.Preact.render_buffer, Opal.Preact.render_buffer.toString())`
-          `Opal.Preact.render_buffer[Opal.Preact.render_buffer.length - 1].pop()`
-        end
-      end
-      alias gpe get_preact_element
+  def get_preact_element(arg, &block)
+    if block_given?
+      # execute block, fetch last element from buffer
+      %x{
+        let last_buffer_length = Opal.Preact.render_buffer[Opal.Preact.render_buffer.length - 1].length;
+        let last_buffer_element = Opal.Preact.render_buffer[Opal.Preact.render_buffer.length - 1][last_buffer_length - 1];
+        block.$call();
+        // console.log("get_preact_element popping", Opal.Preact.render_buffer, Opal.Preact.render_buffer.toString())
+        let new_element = Opal.Preact.render_buffer[Opal.Preact.render_buffer.length - 1].pop();
+        if (last_buffer_element === new_element) { #{Isomorfeus.raise_error(message: "Block did not create any Preact element!")} }
+        return new_element;
+      }
+    else
+      # element was rendered before being passed as arg
+      # fetch last element from buffer
+      # `console.log("get_preact_element popping", Opal.Preact.render_buffer, Opal.Preact.render_buffer.toString())`
+      `Opal.Preact.render_buffer[Opal.Preact.render_buffer.length - 1].pop()`
+    end
+  end
+  alias gpe get_preact_element
 
-      def render_preact_element(el)
-        # push el to buffer
-        `Opal.Preact.render_buffer[Opal.Preact.render_buffer.length - 1].push(el)`
-        # `console.log("render_preact_element pushed", Opal.Preact.render_buffer, Opal.Preact.render_buffer.toString())`
-        nil
-      end
-      alias rpe render_preact_element
+  def render_preact_element(el)
+    # push el to buffer
+    `Opal.Preact.render_buffer[Opal.Preact.render_buffer.length - 1].push(el)`
+    # `console.log("render_preact_element pushed", Opal.Preact.render_buffer, Opal.Preact.render_buffer.toString())`
+    nil
+  end
+  alias rpe render_preact_element
 
-      def method_ref(method_symbol, *args)
-        method_key = "#{method_symbol}#{args}"
-        %x{
-          if (#{self}.method_refs && #{self}.method_refs[#{method_key}]) { return #{self}.method_refs[#{method_key}]; }
-          if (!#{self}.method_refs) { #{self}.method_refs = {}; }
-          #{self}.method_refs[#{method_key}] = { m: #{method(method_symbol)}, a: args };
-          return #{self}.method_refs[#{method_key}];
-        }
-      end
-      alias m_ref method_ref
+  def method_ref(method_symbol, *args)
+    method_key = "#{method_symbol}#{args}"
+    %x{
+      if (#{self}.method_refs && #{self}.method_refs[#{method_key}]) { return #{self}.method_refs[#{method_key}]; }
+      if (!#{self}.method_refs) { #{self}.method_refs = {}; }
+      #{self}.method_refs[#{method_key}] = { m: #{method(method_symbol)}, a: args };
+      return #{self}.method_refs[#{method_key}];
+    }
+  end
+  alias m_ref method_ref
 
-      def to_n
-        self
-      end
-    end
+  def to_n
+    self
   end
 end

data/lib/isomorfeus_preact/preact/function_component/base.rb

@@ -1,9 +1,7 @@
-module Preact
-  module FunctionComponent
-    class Base
-      def self.inherited(base)
-        base.include(::Preact::FunctionComponent::Mixin)
-      end
+module Preact::FunctionComponent
+  class Base
+    def self.inherited(base)
+      base.include(::Preact::FunctionComponent::Mixin)
     end
   end
-end
+end

data/lib/isomorfeus_preact/preact/function_component/initializer.rb

@@ -1,10 +1,6 @@
-module Preact
-  module FunctionComponent
-    module Initializer
-      def initialize
-        self.JS[:native_props] = `{ props: null }`
-        @native_props = `Opal.Preact.Props.$new(self)`
-      end
-    end
+module Preact::FunctionComponent::Initializer
+  def initialize
+    self.JS[:native_props] = `{ props: null }`
+    @native_props = `Opal.Preact.Props.$new(self)`
   end
 end

data/lib/isomorfeus_preact/preact/function_component/mixin.rb

@@ -1,12 +1,8 @@
-module Preact
-  module FunctionComponent
-    module Mixin
-      def self.included(base)
-        base.include(::Preact::Elements)
-        base.include(::Preact::FunctionComponent::Initializer)
-        base.include(::Preact::FunctionComponent::Api)
-        base.extend(::Preact::FunctionComponent::NativeComponentConstructor)
-      end
-    end
+module Preact::FunctionComponent::Mixin
+  def self.included(base)
+    base.include(::Preact::Elements)
+    base.include(::Preact::FunctionComponent::Initializer)
+    base.include(::Preact::FunctionComponent::Api)
+    base.extend(::Preact::FunctionComponent::NativeComponentConstructor)
   end
 end