isomorfeus-preact 10.5.0

data/lib/preact/component/api.rb

@@ -0,0 +1,124 @@
+module Preact
+  module Component
+    module Api
+      def self.included(base)
+        base.instance_exec do
+          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
+
+          attr_accessor :props
+          attr_accessor :state
+
+          def ref(ref_name, &block)
+            defined_refs.JS[ref_name] = block_given? ? block : `null`
+          end
+
+          def defined_refs
+            @defined_ref ||= `{}`
+          end
+
+          def default_state_defined
+            @default_state_defined
+          end
+
+          def state
+            return @default_state if @default_state
+            @default_state_defined = true
+            %x{
+              var native_state = {state: {}};
+              native_state.setState = function(new_state, callback) {
+                for (var key in new_state) {
+                  this.state[key] = new_state[key];
+                }
+                if (callback) { callback.call(); }
+              }
+            }
+            @default_state = Preact::Component::State.new(`native_state`)
+          end
+
+          def render(&block)
+            `base.render_block = #{block}`
+          end
+
+          def should_component_update?(&block)
+            `base.should_component_update_block = block`
+          end
+        end
+      end
+
+      def display_name
+        @native.JS[:displayName]
+      end
+
+      def force_update(&block)
+        if block_given?
+          # this maybe needs instance_exec too
+          @native.JS.forceUpdate(`function() { block.$call(); }`)
+        else
+          @native.JS.forceUpdate
+        end
+      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 method_ref(method_symbol, *args)
+        method_key = "#{method_symbol}#{args}"
+        %x{
+          if (#@native.method_refs && #@native.method_refs[#{method_key}]) { return #@native.method_refs[#{method_key}]; }
+          if (!#@native.method_refs) { #@native.method_refs = {}; }
+          #@native.method_refs[#{method_key}] = { m: #{method(method_symbol)}, a: args };
+          return #@native.method_refs[#{method_key}];
+        }
+      end
+      alias m_ref method_ref
+
+      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 ref(name)
+        `#@native[name]`
+      end
+
+      def ruby_ref(name)
+        return `#@native[name]` if `(typeof #@native[name] === 'function')`
+        Preact::Ref::new(`#@native[name]`)
+      end
+
+      def set_state(updater, &callback)
+        @state.set_state(updater, &callback)
+      end
+    end
+  end
+end

data/lib/preact/component/base.rb

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

data/lib/preact/component/callbacks.rb

@@ -0,0 +1,102 @@
+module Preact
+  module Component
+    module Callbacks
+      def self.included(base)
+        base.instance_exec do
+          def component_did_catch(&block)
+            # TODO convert error
+            %x{
+              var fun = function(error) {
+                Opal.Preact.active_redux_components.push(this);
+                #{`this.__ruby_instance`.instance_exec(`error`, &block)};
+                Opal.Preact.active_redux_components.pop();
+              }
+              if (self.lucid_preact_component) { self.lucid_preact_component.prototype.componentDidCatch = fun; }
+              else { self.preact_component.prototype.componentDidCatch = fun; }
+            }
+          end
+
+          def component_did_mount(&block)
+            %x{
+              let fun = function() {
+                Opal.Preact.active_redux_components.push(this);
+                #{`this.__ruby_instance`.instance_exec(&block)};
+                Opal.Preact.active_redux_components.pop();
+              }
+              if (self.lucid_preact_component) {
+                if (self.lucid_preact_component.prototype.componentDidMount) {
+                  let fun_one = self.lucid_preact_component.prototype.componentDidMount;
+                  let fun_two = fun;
+                  fun = function() {
+                    fun_one();
+                    fun_two();
+                  }
+                }
+                self.lucid_preact_component.prototype.componentDidMount = fun;
+              } else { self.preact_component.prototype.componentDidMount = fun; }
+            }
+          end
+
+          def component_did_update(&block)
+            %x{
+              var fun = function(prev_props, prev_state, snapshot) {
+                Opal.Preact.active_redux_components.push(this);
+                #{`this.__ruby_instance`.instance_exec(`Opal.Preact.Component.Props.$new({props: prev_props})`,
+                                                       `Opal.Preact.Component.State.$new({state: prev_state})`,
+                                                       `snapshot`, &block)};
+                Opal.Preact.active_redux_components.pop();
+              }
+              if (self.lucid_preact_component) { self.lucid_preact_component.prototype.componentDidUpdate = fun; }
+              else { self.preact_component.prototype.componentDidUpdate = fun; }
+            }
+          end
+
+          def component_will_unmount(&block)
+            %x{
+              var fun = function() {
+                if (typeof this.unsubscriber === "function") { this.unsubscriber(); };
+                Opal.Preact.active_redux_components.push(this);
+                #{`this.__ruby_instance`.instance_exec(&block)};
+                Opal.Preact.active_redux_components.pop();
+              }
+              if (self.lucid_preact_component) { self.lucid_preact_component.prototype.componentWillUnmount = fun; }
+              else { self.preact_component.prototype.componentWillUnmount = fun; }
+            }
+          end
+
+
+          def get_derived_state_from_props(&block)
+            %x{
+              var fun = function(props, state) {
+                Opal.Preact.active_redux_components.push(this);
+                var result = #{`this.__ruby_instance`.instance_exec(`Opal.Preact.Component.Props.$new({props: props})`,
+                                                                     `Opal.Preact.Component.State.$new({state: state})`, &block)};
+                Opal.Preact.active_redux_components.pop();
+                if (typeof result.$to_n === 'function') { result = result.$to_n() }
+                if (result === Opal.nil) { return null; }
+                return result;
+              }
+              if (self.lucid_preact_component) { self.lucid_preact_component.prototype.getDerivedStateFromProps = fun; }
+              else { self.preact_component.prototype.getDerivedStateFromProps = fun; }
+            }
+          end
+
+          def get_snapshot_before_update(&block)
+            %x{
+              var fun = function(prev_props, prev_state) {
+                Opal.Preact.active_redux_components.push(this);
+                var result = #{`this.__ruby_instance`.instance_exec(`Opal.Preact.Component.Props.$new({props: prev_props})`,
+                                                                    `Opal.Preact.Component.State.$new({state: prev_state})`, &block)};
+                Opal.Preact.active_redux_components.pop();
+                if (result === Opal.nil) { return null; }
+                return result;
+              }
+              if (self.lucid_preact_component) { self.lucid_preact_component.prototype.getSnapshotBeforeUpdate = fun; }
+              else { self.preact_component.prototype.getSnapshotBeforeUpdate = fun; }
+            }
+          end
+        end
+      end
+    end
+  end
+end

data/lib/preact/component/elements.rb

@@ -0,0 +1,64 @@
+module Preact
+  module Component
+    module Elements
+      # https://www.w3.org/TR/html52/fullindex.html#index-elements
+      # https://www.w3.org/TR/SVG11/eltindex.html
+      SUPPORTED_HTML_AND_SVG_ELEMENTS = %w[
+        a abbr address area article aside audio
+        b base bdi bdo blockquote body br button
+        canvas caption cite code col colgroup
+        data datalist dd del details dfn dialog div dl dt
+        em embed
+        fieldset figcaption figure footer form
+        h1 h2 h3 h4 h5 h6 head header hr html
+        i iframe img input ins
+        kbd
+        label legend li link
+        main map mark meta meter
+        nav noscript
+        object ol optgroup option output
+        p param picture pre progress
+        q
+        rp rt rtc ruby
+        s samp script section select small source span strong style sub summary sup
+        table tbody td template textarea tfoot th thead time title tr track
+        u ul
+        var video
+        wbr
+        altGlyph altGlyphDef altGlyphItem animate animateColor animateMotion animateTransform
+        circle clipPath color-profile cursor
+        defs desc
+        ellipse
+        feBlend feColorMatrix feComponentTransfer feComposite feConvolveMatrix feDiffuseLighting
+        feDisplacementMap feDistantLight feFlood feFuncA feFuncB feFuncG feFuncR feGaussianBlur
+        feImage feMerge feMergeNode feMorphology feOffset fePointLight feSpecularLighting
+        feSpotLight feTile feTurbulence
+        filter font font-face font-face-format font-face-name font-face-src font-face-uri foreignObject
+        g glyph glyphRef
+        hkern
+        image
+        line linearGradient
+        marker mask metadata missing-glyph mpath
+        path pattern polygon polyline
+        radialGradient rect
+        script set stop style svg switch symbol
+        text textPath tref tspan
+        use
+        view vkern
+      ]
+
+      SUPPORTED_HTML_AND_SVG_ELEMENTS.each do |element|
+        define_method(element) do |*args, &block|
+          `Opal.Preact.internal_prepare_args_and_render(element, args, block)`
+        end
+        define_method(`element.toUpperCase()`) do |*args, &block|
+          `Opal.Preact.internal_prepare_args_and_render(element, args, block)`
+        end
+      end
+
+      def Fragment(*args, &block)
+        `Opal.Preact.internal_prepare_args_and_render(Opal.global.Preact.Fragment, args, block)`
+      end
+    end
+  end
+end

data/lib/preact/component/initializer.rb

@@ -0,0 +1,11 @@
+module Preact
+  module Component
+    module Initializer
+      def initialize(native_component)
+        @native = native_component
+        @props = `Opal.Preact.Component.Props.$new(#@native)`
+        @state = `Opal.Preact.Component.State.$new(#@native)`
+      end
+    end
+  end
+end

data/lib/preact/component/mixin.rb

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

data/lib/preact/component/native_component_constructor.rb

@@ -0,0 +1,65 @@
+module Preact
+  module Component
+    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.preact_component = class extends Opal.global.Preact.Component {
+            constructor(props) {
+              super(props);
+              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 = Opal.Preact.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();
+                }
+              }
+            }
+            static get displayName() {
+              return #{component_name};
+            }
+            render(props, state) {
+              const oper = Opal.Preact;
+              oper.render_buffer.push([]);
+              // console.log("react component pushed", oper.render_buffer, oper.render_buffer.toString());
+              oper.active_components.push(this);
+              let block_result = #{`this.__ruby_instance`.instance_exec(&`base.render_block`)};
+              if (block_result && block_result !== nil) { oper.render_block_result(block_result); }
+              // console.log("react component popping", oper.render_buffer, oper.render_buffer.toString());
+              oper.active_components.pop();
+              let result = oper.render_buffer.pop();
+              return (result.length === 1) ? result[0] : result;
+            }
+            shouldComponentUpdate(next_props, next_state) {
+              if (base.should_component_update_block) {
+                return #{!!`this.__ruby_instance`.instance_exec(Preact::Component::Props.new(`{props: next_props}`), Preact::Component::State.new(`{state: next_state }`), &`base.should_component_update_block`)};
+              }
+              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
+end

data/lib/preact/component/params.rb

@@ -0,0 +1,18 @@
+module Preact
+  module Component
+    class Params
+      include Native::Wrapper
+
+      def method_missing(prop, *args, &block)
+        %x{
+          const p = #@native;
+          if (typeof p[prop] === 'undefined') {
+            prop = Opal.Preact.lower_camelize(prop);
+            if (typeof p[prop] === 'undefined') { return nil; }
+          }
+          return p[prop];
+        }
+      end
+    end
+  end
+end

data/lib/preact/component/props.rb

@@ -0,0 +1,55 @@
+module Preact
+  module Component
+    class Props
+      def initialize(native)
+        @native = native
+      end
+
+      def method_missing(prop, *args, &block)
+        %x{
+          const p = #@native.props;
+          if (typeof p[prop] === 'undefined') {
+            prop = Opal.Preact.lower_camelize(prop);
+            if (typeof p[prop] === 'undefined') { return nil; }
+          }
+          return p[prop];
+        }
+      end
+
+      def children
+        @native.JS[:props].JS[:children]
+      end
+
+      def isomorfeus_store
+        # TODO
+        @native.JS[:props].JS[:isomorfeus_store]
+      end
+
+      def theme
+        `#@native.props.iso_theme`
+      end
+
+      def params
+        return @params if @params
+        return nil if `typeof #@native.props.params === 'undefined'`
+        @params = ::Preact::Component::Params.new(`#@native.props.params`)
+      end
+
+      def to_h
+        `Opal.Hash.$new(#@native.props)`.transform_keys!(&:underscore)
+      end
+
+      def to_json
+        JSON.dump(to_transport)
+      end
+
+      def to_n
+        @native.JS[:props]
+      end
+
+      def to_transport
+        {}.merge(to_h)
+      end
+    end
+  end
+end