isomorfeus-preact 10.5.0

data/lib/isomorfeus_preact/lucid_component/instance_store_proxy.rb

@@ -0,0 +1,44 @@
+module LucidComponent
+  class InstanceStoreProxy
+    def initialize(component_instance)
+      @native = component_instance.to_n
+      @component_instance = component_instance
+      @component_object_id = component_instance.object_id.to_s
+    end
+
+    def [](key)
+      method_missing(key)
+    end
+
+    def []=(key, value)
+      method_missing(key, value)
+    end
+
+    def method_missing(key, *args, &block)
+      if `args.length > 0`
+        # set instance state, simply a dispatch
+
+        action = { type: 'INSTANCE_STATE', object_id: @component_object_id, name: (`key.endsWith('=')` ? key.chop : key), value: args[0] }
+        Isomorfeus.store.collect_and_defer_dispatch(action)
+
+      else
+        # get instance state
+        if @native.JS[:props].JS[:iso_store]
+          if @native.JS[:props].JS[:iso_store].JS[:instance_state] &&
+              @native.JS[:props].JS[:iso_store].JS[:instance_state].JS[@component_object_id] &&
+              @native.JS[:props].JS[:iso_store].JS[:instance_state].JS[@component_object_id].JS.hasOwnProperty(key)
+            # check if we have a component local state value
+            return @native.JS[:props].JS[:iso_store].JS[:instance_state].JS[@component_object_id].JS[key]
+          end
+        else
+          a_state = Isomorfeus.store.get_state
+          if a_state.key?(:instance_state) && a_state[:instance_state].key?(key)
+            return a_state[:instance_state][key]
+          end
+        end
+        # otherwise return nil
+        return nil
+      end
+    end
+  end
+end

data/lib/isomorfeus_preact/lucid_component/mixin.rb

@@ -0,0 +1,15 @@
+module LucidComponent
+  module Mixin
+    def self.included(base)
+      base.include(::Native::Wrapper)
+      base.extend(::LucidComponent::NativeComponentConstructor)
+      base.include(::Preact::Component::Elements)
+      base.extend(::LucidPropDeclaration::Mixin)
+      base.include(::Preact::Component::Api)
+      base.include(::Preact::Component::Callbacks)
+      base.include(::LucidComponent::Api)
+      base.include(::LucidComponent::StylesApi)
+      base.include(::LucidComponent::Initializer)
+    end
+  end
+end

data/lib/isomorfeus_preact/lucid_component/native_component_constructor.rb

@@ -0,0 +1,84 @@
+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;
+
+        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) {
+                this[ref] = function(element) {
+                  element = oper.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.Preact.createRef();
+              }
+            }
+            if (base.preload_block) {
+              oper.active_redux_components.push(this);
+              this.state.preloaded = this.__ruby_instance.$execute_preload_block();
+              oper.active_redux_components.pop();
+            }
+          }
+          static get displayName() {
+            return #{component_name};
+          }
+          render(props, state) {
+            const oper = Opal.Preact;
+            oper.render_buffer.push([]);
+            // console.log("lucid component pushed", oper.render_buffer, oper.render_buffer.toString());
+            oper.active_components.push(this);
+            oper.active_redux_components.push(this);
+            let block_result;
+            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); }
+            oper.active_redux_components.pop();
+            oper.active_components.pop();
+            // console.log("lucid component popping", oper.render_buffer, oper.render_buffer.toString());
+            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
+end

data/lib/isomorfeus_preact/lucid_component/styles_api.rb

@@ -0,0 +1,31 @@
+module LucidComponent
+  module StylesApi
+    def self.included(base)
+      base.instance_exec do
+        def styles(styles_hash = nil, &block)
+          component_name = self.to_s
+          styles_hash = block.call if block_given?
+          if styles_hash
+            %x{
+              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 = Opal.global.NanoCSSInstance.sheet(css, component_name.replace(/:/g, '_'));
+                base.css_styles = #{::LucidComponent::StylesWrapper.new(`nano_styles`)};
+              }
+            }
+          end
+          `base.css_styles`
+        end
+        alias_method :styles=, :styles
+      end
+
+      def styles
+        `self.$class().css_styles`
+      end
+    end
+  end
+end

data/lib/isomorfeus_preact/lucid_component/styles_wrapper.rb

@@ -0,0 +1,40 @@
+module LucidComponent
+  class StylesWrapper
+    include ::Native::Wrapper
+
+    def is_wrapped_style
+      true
+    end
+
+    def fade_in
+      'fadeIn'
+    end
+
+    def fade_out
+      'fadeOut'
+    end
+
+    def [](prop)
+      method_missing(prop)
+    end
+
+    def method_missing(prop, *args, &block)
+      %x{
+        let value;
+        value = #@native[prop];
+        if (value) { return value; }
+        else {
+          console.warn("Style/Theme key '" + prop + "' returning nil!");
+          return #{nil};
+        }
+      }
+    end
+
+    def to_h
+      %x{
+        if (#@props_prop) { return Opal.Hash.$new(#@native.props[#@props_prop]); }
+        else { return Opal.Hash.$new(#@native); }
+      }
+    end
+  end
+end

data/lib/isomorfeus_preact/lucid_func/base.rb

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

data/lib/isomorfeus_preact/lucid_func/initializer.rb

@@ -0,0 +1,11 @@
+module LucidFunc
+  module Initializer
+    def initialize
+      self.JS[:native_props] = `{ props: null }`
+      @native_props = `Opal.Preact.Component.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
+  end
+end

data/lib/isomorfeus_preact/lucid_func/mixin.rb

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

data/lib/isomorfeus_preact/lucid_func/native_component_constructor.rb

@@ -0,0 +1,55 @@
+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.active_components.push(__ruby_instance);
+          oper.active_redux_components.push(__ruby_instance);
+          let block_result = #{`__ruby_instance`.instance_exec(&`base.render_block`)};
+          if (block_result && block_result !== nil) { oper.render_block_result(block_result); }
+          oper.active_redux_components.pop();
+          oper.active_components.pop();
+          // 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
+      end
+
+      def render(&block)
+        `base.render_block = #{block}`
+      end
+    end
+  end
+end

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

@@ -0,0 +1,123 @@
+module Preact
+  module FunctionComponent
+    module Api
+      def props
+        @native_props
+      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_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_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_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_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_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 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 to_n
+        self
+      end
+    end
+  end
+end

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

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