isomorfeus-preact 10.5.0

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

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

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

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

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

@@ -0,0 +1,48 @@
+module Preact
+  module FunctionComponent
+    module NativeComponentConstructor
+      def self.extended(base)
+        component_name = base.to_s
+        %x{
+          base.instance_init = function(initial) {
+            let ruby_state = { instance: #{base.new(`{}`)} };
+            ruby_state.instance.__ruby_instance = ruby_state.instance;
+            return ruby_state;
+          }
+          base.instance_reducer = function(state, action) { return state; }
+          base.preact_component = function(props) {
+            const oper = Opal.Preact;
+            oper.render_buffer.push([]);
+            // console.log("function pushed", oper.render_buffer, oper.render_buffer.toString());
+            const [__ruby_state, __ruby_dispatch] = Opal.global.PreactHooks.useReducer(base.instance_reducer, null, base.instance_init);
+            const __ruby_instance = __ruby_state.instance;
+            __ruby_instance.props = props;
+            oper.active_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_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
+end

data/lib/lucid_app/context.rb

@@ -0,0 +1,24 @@
+module LucidApp
+  module Context
+    def self.create_application_context
+      nano_css = `null`
+      css_server = `null`
+      css_server = `document.getElementById('css-server-side')` unless on_ssr?
+      %x{
+        let og = Opal.global;
+        nano_css = (css_server) ? og.NanoCSS.create({ sh: css_server }) : og.NanoCSS.create();
+        og.NanoCSSAddOns.rule(nano_css);
+        og.NanoCSSAddOns.sheet(nano_css);
+        og.NanoCSSAddOns.nesting(nano_css);
+        og.NanoCSSAddOns.hydrate(nano_css);
+        og.NanoCSSAddOns.unitless(nano_css);
+        og.NanoCSSAddOns.global(nano_css);
+        og.NanoCSSAddOns.keyframes(nano_css);
+        og.NanoCSSAddOns.fade_in(nano_css);
+        og.NanoCSSAddOns.fade_out(nano_css);
+        og.NanoCSSInstance = nano_css;
+      }
+      Preact.create_context('LucidApplicationContext', { iso_store: Isomorfeus.store, nano_css: nano_css })
+    end
+  end
+end

data/lib/lucid_prop_declaration/mixin.rb

@@ -0,0 +1,126 @@
+module LucidPropDeclaration
+  module Mixin
+    if RUBY_ENGINE == 'opal'
+      def self.extended(base)
+        def prop(prop_name, validate_hash = { required: true })
+          validate_hash = validate_hash.to_h if validate_hash.class == Isomorfeus::Props::ValidateHashProxy
+          if validate_hash.key?(:default)
+            %x{
+              if (base.lucid_preact_component) {
+                let preact_prop_name = Opal.Preact.lower_camelize(prop_name);
+                #{value = validate_hash[:default]}
+                if (!base.lucid_preact_component.defaultProps) { base.lucid_preact_component.defaultProps = {}; }
+                base.lucid_preact_component.defaultProps[preact_prop_name] = value;
+                if (!base.lucid_preact_component.propTypes) { base.lucid_preact_component.propTypes = {}; }
+                base.lucid_preact_component.propTypes[preact_prop_name] = base.lucid_preact_component.prototype.validateProp;
+              } else if (base.preact_component) {
+                let preact_prop_name = Opal.Preact.lower_camelize(prop_name);
+                #{value = validate_hash[:default]}
+                if (!base.preact_component.defaultProps) { base.preact_component.defaultProps = {}; }
+                base.preact_component.defaultProps[preact_prop_name] = value;
+                if (!base.preact_component.propTypes) { base.preact_component.propTypes = {}; }
+                base.preact_component.propTypes[preact_prop_name] = base.preact_component.prototype.validateProp;
+              }
+            }
+          end
+          declared_props[prop_name.to_sym] = validate_hash
+        end
+      end
+
+      def validate_function
+        %x{
+          if (typeof self.validate_function === 'undefined') {
+            self.validate_function = function(props_object) {
+              try { self.$validate_props(Opal.Hash.$new(props_object)) }
+              catch (e) { return e.message; }
+            }
+          }
+          return self.validate_function;
+        }
+      end
+
+      def validate_prop_function(prop)
+        function_name = "validate_#{prop}_function"
+        %x{
+          if (typeof self[function_name] === 'undefined') {
+            self[function_name] = function(value) {
+              try { self.$validate_prop(prop, value); }
+              catch (e) { return e.message; }
+            }
+          }
+          return self[function_name];
+        }
+      end
+    else
+      def prop(prop_name, validate_hash = { required: true })
+        validate_hash = validate_hash.to_h if validate_hash.class == Isomorfeus::Props::ValidateHashProxy
+        declared_props[prop_name.to_sym] = validate_hash
+      end
+    end
+
+    def declared_props
+      @declared_props ||= {}
+    end
+
+    def valid_prop?(prop, value)
+      validate_prop(prop, value)
+    rescue
+      false
+    end
+
+    def valid_props?(props)
+      validate_props(props)
+    rescue
+      false
+    end
+
+    def validate
+      Isomorfeus::Props::ValidateHashProxy.new
+    end
+
+    def validate_prop(prop, value)
+      return false unless declared_props.key?(prop)
+      validator = Isomorfeus::Props::Validator.new(self, prop, value, declared_props[prop])
+      validator.validate!
+      true
+    end
+
+    def validate_props(props)
+      props = {} unless props
+      declared_props.each_key do |prop|
+        if declared_props[prop].key?(:required) && declared_props[prop][:required] && !props.key?(prop)
+          Isomorfeus.raise_error(message: "Required prop #{prop} not given!")
+        end
+      end
+      result = true
+      props.each do |p, v|
+        r = validate_prop(p, v)
+        result = false unless r
+      end
+      result
+    end
+
+    def validated_prop(prop, value)
+      Isomorfeus.raise_error(message: "No such prop #{prop} declared!") unless declared_props.key?(prop)
+      validator = Isomorfeus::Props::Validator.new(self, prop, value, declared_props[prop])
+      validator.validated_value
+    end
+
+    def validated_props(props)
+      props = {} unless props
+
+      declared_props.each_key do |prop|
+        if declared_props[prop].key?(:required) && declared_props[prop][:required] && !props.key?(prop)
+          Isomorfeus.raise_error(message: "Required prop #{prop} not given!")
+        end
+        props[prop] = nil unless props.key?(prop) # let validator handle value
+      end
+
+      result = {}
+      props.each do |p, v|
+        result[p] = validated_prop(p, v)
+      end
+      result
+    end
+  end
+end

data/lib/preact.rb

@@ -0,0 +1,309 @@
+module Preact
+  %x{
+    self.render_buffer = [];
+
+    self.set_validate_prop = function(component, prop_name) {
+      let core = component.preact_component;
+      if (typeof core.propTypes == "undefined") {
+        core.propTypes = {};
+        core.propValidations = {};
+        core.propValidations[prop_name] = {};
+      }
+      core.propTypes[prop_name] = core.prototype.validateProp;
+    };
+
+    self.props_are_equal = function(this_props, next_props) {
+      let counter = 0;
+      for (var property in next_props) {
+        counter++;
+        if (next_props.hasOwnProperty(property)) {
+          if (!this_props.hasOwnProperty(property)) { return false; };
+          if (property === "children") { if (next_props.children !== this_props.children) { return false; }}
+          else if (typeof next_props[property] === "object" && next_props[property] !== null && typeof next_props[property]['$!='] === "function" &&
+                   typeof this_props[property] !== "undefined" && this_props[property] !== null ) {
+            if (#{ !! (`next_props[property]` != `this_props[property]`) }) { return false; }
+          } else if (next_props[property] !== this_props[property]) { return false; }
+        }
+      }
+      if (counter !== Object.keys(this_props).length) { return false; }
+      return true;
+    };
+
+    self.state_is_not_equal = function(this_state, next_state) {
+      let counter = 0;
+      for (var property in next_state) {
+        counter++;
+        if (next_state.hasOwnProperty(property)) {
+          if (!this_state.hasOwnProperty(property)) { return true; };
+          if (typeof next_state[property] === "object" && next_state[property] !== null && typeof next_state[property]['$!='] === "function" &&
+              typeof this_state[property] !== "undefined" && this_state[property] !== null) {
+            if (#{ !! (`next_state[property]` != `this_state[property]`) }) { return true }
+          } else if (next_state[property] !== this_state[property]) { return true }
+        }
+      }
+      if (counter !== Object.keys(this_state).length) { return true; }
+      return false;
+    };
+
+    self.lower_camelize = function(snake_cased_word) {
+      if (self.prop_dictionary[snake_cased_word]) { return self.prop_dictionary[snake_cased_word]; }
+      let parts = snake_cased_word.split('_');
+      let res = parts[0];
+      for (let i = 1; i < parts.length; i++) {
+        res += parts[i][0].toUpperCase() + parts[i].slice(1);
+      }
+      self.prop_dictionary[snake_cased_word] = res;
+      return res;
+    };
+
+    self.native_element_or_component_to_ruby = function (element) {
+      if (typeof element.__ruby_instance !== 'undefined') { return element.__ruby_instance }
+      if (element instanceof Element || element instanceof Node) { return #{Browser::Element.new(`element`)} }
+      return element;
+    };
+
+    self.native_to_ruby_event = function(event) {
+       if (event.hasOwnProperty('target')) { return #{::Browser::Event.new(`event`)}; }
+       else if (Array.isArray(event)) { return event; }
+       else { return Opal.Hash.$new(event); }
+    };
+
+    self.internal_prepare_args_and_render = function(component, args, block) {
+      const operain = self.internal_render;
+      if (args.length > 0) {
+        let last_arg = args[args.length - 1];
+        if (last_arg && last_arg.constructor === String) {
+          if (args.length === 1) { return operain(component, null, last_arg, null); }
+          else { operain(component, args[0], last_arg, null); }
+        } else { operain(component, args[0], null, block); }
+      } else { operain(component, null, null, block); }
+    };
+
+    self.active_components = [];
+
+    self.active_component = function() {
+      let length = self.active_components.length;
+      if (length === 0) { return null; };
+      return self.active_components[length-1];
+    };
+
+    self.active_redux_components = [];
+
+    self.active_redux_component = function() {
+      let length = self.active_redux_components.length;
+      if (length === 0) { return null; };
+      return self.active_redux_components[length-1];
+    };
+
+    function isObject(obj) { return (obj && typeof obj === 'object'); }
+
+    self.merge_deep = function(one, two) {
+      return [one, two].reduce(function(pre, obj) {
+        Object.keys(obj).forEach(function(key){
+          let pVal = pre[key];
+          let oVal = obj[key];
+          if (Array.isArray(pVal) && Array.isArray(oVal)) {
+            pre[key] = pVal.concat.apply(this, oVal);
+          } else if (isObject(pVal) && isObject(oVal)) {
+            pre[key] = self.merge_deep(pVal, oVal);
+          } else {
+            pre[key] = oVal;
+          }
+        });
+        return pre;
+      }, {});
+    };
+
+    self.prop_dictionary = {};
+
+    self.to_native_preact_props = function(ruby_style_props) {
+      let result = {};
+      let keys = ruby_style_props.$$keys;
+      let keys_length = keys.length;
+      let key = '';
+      for (let i = 0; i < keys_length; i++) {
+        key = keys[i];
+        let value = ruby_style_props.$$smap[key];
+        if (key[0] === 'o' && key[1] === 'n' && key[2] === '_') {
+          let type = typeof value;
+          if (type === "function") {
+            let active_c = self.active_component();
+            result[self.lower_camelize(key)] = function(event, info) {
+              let ruby_event = self.native_to_ruby_event(event);
+              #{`active_c.__ruby_instance`.instance_exec(`ruby_event`, `info`, &`value`)};
+            }
+          } else if (type === "object" && typeof value.m === "object" && typeof value.m.$call === "function" ) {
+            if (!value.preact_event_handler_function) {
+              value.preact_event_handler_function = function(event, info) {
+                let ruby_event = self.native_to_ruby_event(event);
+                if (value.a.length > 0) { value.m.$call.apply(value.m, [ruby_event, info].concat(value.a)); }
+                else { value.m.$call(ruby_event, info); }
+              };
+            }
+            result[self.lower_camelize(key)] = value.preact_event_handler_function;
+          } else if (type === "string" ) {
+            let active_component = self.active_component();
+            let method_ref;
+            let method_name = '$' + value;
+            if (typeof active_component[method_name] === "function") {
+              // got a ruby instance
+              if (active_component.native && active_component.native.method_refs && active_component.native.method_refs[value]) { method_ref = active_component.native.method_refs[value]; } // ruby instance with native
+              else if (active_component.method_refs && active_component.method_refs[value]) { method_ref = active_component.method_refs[value]; } // ruby function component
+              else { method_ref = active_component.$method_ref(value); } // create the ref
+            } else if (typeof active_component.__ruby_instance[method_name] === "function") {
+              // got a native instance
+              if (active_component.method_refs && active_component.method_refs[value]) { method_ref = active_component.method_refs[value]; }
+              else { method_ref = active_component.__ruby_instance.$method_ref(value); } // create ref for native
+            }
+            if (method_ref) {
+              if (!method_ref.preact_event_handler_function) {
+                method_ref.preact_event_handler_function = function(event, info) {
+                  let ruby_event = self.native_to_ruby_event(event);
+                  method_ref.m.$call(ruby_event, info)
+                };
+              }
+              result[self.lower_camelize(key)] = method_ref.preact_event_handler_function;
+            } else {
+              let component_name;
+              if (active_component.__ruby_instance) { component_name = active_component.__ruby_instance.$to_s(); }
+              else { component_name = active_component.$to_s(); }
+              #{Isomorfeus.raise_error(message: "Is #{`value`} a valid method of #{`component_name`}? If so then please use: #{`key`}: method_ref(:#{`value`}) within component: #{`component_name`}")}
+            }
+          } else {
+            let active_component = self.active_component();
+            let component_name;
+            if (active_component.__ruby_instance) { component_name = active_component.__ruby_instance.$to_s(); }
+            else { component_name = active_component.$to_s(); }
+            #{Isomorfeus.raise_error(message: "Received invalid value for #{`key`} with #{`value`} within component: #{`component_name`}")}
+            console.error( + key + " event handler:", value, " within component:", self.active_component());
+          }
+        } else if (key[0] === 'a' && key.startsWith("aria_")) {
+          result[key.replace("_", "-")] = value;
+        } else if (key === "style" || key === "theme") {
+          if (typeof value.$to_n === "function") { value = value.$to_n() }
+          result[key] = value;
+        } else {
+          result[self.lower_camelize(key)] = value;
+        }
+      }
+      return result;
+    };
+
+    self.render_block_result = function(block_result) {
+      if (block_result.constructor === String || block_result.constructor === Number) {
+        Opal.Preact.render_buffer[Opal.Preact.render_buffer.length - 1].push(block_result);
+      }
+    };
+
+    self.internal_render = function(component, props, string_child, block) {
+      const operabu = self.render_buffer;
+      let native_props;
+      if (props && props !== nil) { native_props = self.to_native_preact_props(props); }
+      if (string_child) {
+        operabu[operabu.length - 1].push(Opal.global.Preact.createElement(component, native_props, string_child));
+      } else if (block && block !== nil) {
+        operabu.push([]);
+        // console.log("internal_render pushed", Opal.Preact.render_buffer, Opal.Preact.render_buffer.toString());
+        let block_result = block.$call();
+        if (block_result && block_result !== nil) { Opal.Preact.render_block_result(block_result); }
+        // console.log("internal_render popping", Opal.Preact.render_buffer, Opal.Preact.render_buffer.toString());
+        let children = operabu.pop();
+        operabu[operabu.length - 1].push(Opal.global.Preact.createElement.apply(this, [component, native_props].concat(children)));
+      } else {
+        operabu[operabu.length - 1].push(Opal.global.Preact.createElement(component, native_props));
+      }
+    };
+  }
+
+
+  def self.create_element(type, props = nil, children = nil, &block)
+    %x{
+      const operabu = self.render_buffer;
+      let component = null;
+      let native_props = null;
+      if (typeof type.preact_component !== 'undefined') { component = type.preact_component; }
+      else { component = type; }
+      if (block !== nil) {
+        operabu.push([]);
+        // console.log("create_element pushed", Opal.Preact.render_buffer, Opal.Preact.render_buffer.toString());
+        let block_result = block.$call();
+        if (block_result && block_result !== nil) { Opal.Preact.render_block_result(block_result); }
+        // console.log("create_element popping", Opal.Preact.render_buffer, Opal.Preact.render_buffer.toString());
+        children = operabu.pop();
+      } else if (children === nil) { children = []; }
+      else if (typeof children === 'string') { children = [children]; }
+      if (props && props !== nil) { native_props = self.to_native_preact_props(props); }
+      return Opal.global.Preact.createElement.apply(this, [component, native_props].concat(children));
+    }
+  end
+
+  def self.to_child_array(props_children)
+    `Opal.global.Preact.toChildArray(children)`
+  end
+
+  def self.clone_element(ruby_preact_element, props = nil, children = nil, &block)
+    block_result = `null`
+    if block_given?
+      block_result = block.call
+      block_result = `null` unless block_result
+    end
+    native_props = props ? `Opal.Preact.to_native_preact_props(props)` : `null`
+    `Opal.global.Preact.cloneElement(ruby_preact_element.$to_n(), native_props, block_result)`
+  end
+
+  def self.create_context(const_name, default_value)
+    %x{
+      Opal.global[const_name] = Opal.global.Preact.createContext(default_value);
+      var new_const = #{Preact::ContextWrapper.new(`Opal.global[const_name]`)};
+      #{Object.const_set(const_name, `new_const`)};
+      return new_const;
+    }
+  end
+
+  def self.create_ref
+    Preact::Ref.new(`Opal.global.Preact.createRef()`)
+  end
+
+  def self.hydrate(native_preact_element, container_node, replace_node, &block)
+    # container is a native DOM element
+    if block_given?
+      `Opal.global.Preact.hydrate(native_preact_element, container_node, function() { block.$call() })`
+    else
+      `Opal.global.Preact.hydrate(native_preact_element, container_node)`
+    end
+  end
+
+  def self.location_hook(location)
+    %x{
+      if (Opal.global.locationHook) { return Opal.global.locationHook; }
+      else if (Opal.global.staticLocationHook) { return Opal.global.staticLocationHook(location); }
+      else { #{raise "Wouter Location Hooks not imported!"}; }
+    }
+  end
+
+  def self.render(native_preact_element, container_node, replace_node)
+    # container is a native DOM element
+    if block_given?
+      `Opal.global.Preact.render(native_preact_element, container_node, function() { block.$call() })`
+    else
+      `Opal.global.Preact.render(native_preact_element, container_node)`
+    end
+  end
+
+  if on_ssr?
+    def self.render_to_string(native_preact_element)
+      `Opal.global.Preact.renderToString(native_preact_element)`
+    end
+  end
+
+  def self.unmount_component_at_node(element_or_query)
+    if `(typeof element_or_query === 'string')` || (`(typeof element_or_query.$class === 'function')` && element_or_query.class == String)
+      element = `document.body.querySelector(element_or_query)`
+    elsif `(typeof element_or_query.$is_a === 'function')` && element_or_query.is_a?(Browser::Element)
+      element = element_or_query.to_n
+    else
+      element = element_or_query
+    end
+    `Opal.global.Preact.render(null, element)`
+  end
+end