isomorfeus-preact 10.5.0

data/lib/isomorfeus/top_level.rb

@@ -0,0 +1,101 @@
+module Isomorfeus
+  class TopLevel
+    class << self
+      def mount!
+        Isomorfeus.init
+        Isomorfeus::TopLevel.on_ready do
+          root_element = `document.querySelector('div[data-iso-root]')`
+          Isomorfeus.raise_error(message: "Isomorfeus root element not found!") unless root_element
+          component_name = root_element.JS.getAttribute('data-iso-root')
+          Isomorfeus.env = root_element.JS.getAttribute('data-iso-env')
+          user_sid = root_element.JS.getAttribute('data-iso-usid')
+          Isomorfeus.current_user_sid =`JSON.parse(user_sid)` if user_sid
+          component = nil
+          begin
+            component = component_name.constantize
+          rescue Exception => e
+            `console.warn("Deferring mount: " + #{e.message})`
+            @timeout_start = Time.now unless @timeout_start
+            if (Time.now - @timeout_start) < 10
+              `setTimeout(Opal.Isomorfeus.TopLevel['$mount!'], 100)`
+            else
+              `console.error("Unable to mount '" + #{component_name} + "'!")`
+            end
+          end
+          if component
+            props_json = root_element.JS.getAttribute('data-iso-props')
+            props = `Opal.Hash.$new(JSON.parse(props_json))`
+            raw_hydrated = root_element.JS.getAttribute('data-iso-hydrated')
+            hydrated = (raw_hydrated && raw_hydrated == "true")
+            %x{
+              if (global.ServerSideRenderingStateJSON) {
+              var state = global.ServerSideRenderingStateJSON;
+                var keys = Object.keys(state);
+                for(var i=0; i < keys.length; i++) {
+                  if (Object.keys(state[keys[i]]).length > 0) {
+                    global.Opal.Isomorfeus.store.native.dispatch({ type: keys[i].toUpperCase(), set_state: state[keys[i]] });
+                  }
+                }
+              }
+            }
+            Isomorfeus.execute_init_after_store_classes
+            begin
+              result = Isomorfeus::TopLevel.mount_component(component, props, root_element, hydrated)
+              @tried_another_time = false
+              result
+            rescue Exception => e
+              if  !@tried_another_time
+                @tried_another_time = true
+                `console.warn("Deferring mount: " + #{e.message})`
+                `console.error(#{e.backtrace.join("\n")})`
+                `setTimeout(Opal.Isomorfeus.TopLevel['$mount!'], 250)`
+              else
+                `console.error("Unable to mount '" + #{component_name} + "'! Error: " + #{e.message} + "!")`
+                `console.error(#{e.backtrace.join("\n")})`
+             end
+            end
+          end
+        end
+      end
+
+      def on_ready(&block)
+        %x{
+          function run() { block.$call() };
+          function ready_fun(fn) {
+            if (document.readyState === "complete" || document.readyState === "interactive") {
+              setTimeout(fn, 1);
+            } else {
+              document.addEventListener("DOMContentLoaded", fn);
+            }
+          }
+          ready_fun(run);
+        }
+      end
+
+      def on_ready_mount(component, props = nil, element_query = nil)
+        # init in case it hasn't been run yet
+        Isomorfeus.init
+        on_ready do
+          Isomorfeus::TopLevel.mount_component(component, props, element_query)
+        end
+      end
+
+      def mount_component(component, props, element_or_query, hydrated = false)
+        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
+
+        top = if hydrated
+                Preact.hydrate(Preact.create_element(component, props), element)
+              else
+                Preact.render(Preact.create_element(component, props), element)
+              end
+        Isomorfeus.top_component = top if top
+      end
+    end
+  end
+end

data/lib/isomorfeus/top_level_ssr.rb

@@ -0,0 +1,27 @@
+module Isomorfeus
+  class TopLevel
+    class << self
+      attr_accessor :ssr_route_path
+      attr_accessor :transport_ws_url
+
+      def mount!
+        # nothing, but keep it for compatibility with browser
+      end
+
+      def render_component_to_string(component_name, props)
+        component = nil
+        %x{
+          if (typeof component_name === 'string' || component_name instanceof String) {
+            component = component_name.split(".").reduce(function(o, x) {
+              return (o !== null && typeof o[x] !== "undefined" && o[x] !== null) ? o[x] : null;
+            }, Opal.global)
+          } else {
+            component = component_name;
+          }
+        }
+        component = Isomorfeus.cached_component_class(component_name) unless component
+        Preact.render_to_string(Preact.create_element(component, `Opal.Hash.$new(props)`))
+      end
+    end
+  end
+end

data/lib/isomorfeus_preact/lucid_app/api.rb

@@ -0,0 +1,22 @@
+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
+            %x{
+              let css;
+              if (typeof theme_hash.$to_n === 'function') { css = theme_hash.$to_n(); }
+              else { css = theme_hash; }
+              let nano_styles = Opal.global.NanoCSSInstance.sheet(css, "LucidAppTheme");
+              base.css_theme = #{::LucidComponent::StylesWrapper.new(`nano_styles`)};
+            }
+          end
+          `base.css_theme`
+        end
+        alias_method :theme=, :theme
+      end
+    end
+  end
+end

data/lib/isomorfeus_preact/lucid_app/base.rb

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

data/lib/isomorfeus_preact/lucid_app/mixin.rb

@@ -0,0 +1,16 @@
+module LucidApp
+  module Mixin
+    def self.included(base)
+      base.include(::Native::Wrapper)
+      base.extend(::LucidApp::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(::LucidApp::Api)
+      base.include(::LucidComponent::Initializer)
+    end
+  end
+end

data/lib/isomorfeus_preact/lucid_app/native_component_constructor.rb

@@ -0,0 +1,91 @@
+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;
+
+        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) {
+                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();
+            }
+            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([]);
+            // console.log("lucid app 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();
+            let children = oper.render_buffer.pop();
+            // console.log("lucid app popping", oper.render_buffer, oper.render_buffer.toString());
+            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() {
+            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(); }
+          }
+          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

@@ -0,0 +1,68 @@
+module LucidComponent
+  module Api
+    def self.included(base)
+      base.instance_exec do
+        # store
+        attr_accessor :app_store
+        attr_accessor :class_store
+        attr_accessor :store
+
+        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 }.fail do |result|
+                err_text = "#{self.class.name}: preloading failed, last result: #{result.nil? ? 'nil' : result}!"
+                `console.error(err_text)`
+              end
+            end
+          end
+        end
+
+        def while_loading(option = nil, &block)
+          wl_block = proc do
+            if @_preload_promise.resolved?
+              instance_exec(&`base.render_block`)
+            else
+              instance_exec(&block)
+            end
+          end
+          `base.while_loading_block = wl_block`
+        end
+      end
+
+      # stores
+      def local_store
+        LocalStore
+      end
+
+      def session_store
+        SessionStore
+      end
+
+      def theme
+        props.theme
+      end
+
+      # preloading
+      def execute_preload_block
+        @_preload_promise = instance_exec(&self.class.JS[:preload_block])
+        @_preload_promise.resolved?
+      end
+
+      def preloaded?
+        !!state.preloaded
+      end
+
+      # requires transport
+      def current_user
+        Isomorfeus.current_user
+      end
+    end
+  end
+end

data/lib/isomorfeus_preact/lucid_component/app_store_proxy.rb

@@ -0,0 +1,37 @@
+module LucidComponent
+  class AppStoreProxy
+    def initialize(component_instance)
+      if component_instance
+        @native = component_instance.to_n
+        @component_instance = component_instance
+      end
+    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 class state, simply a dispatch
+        action = { type: 'APPLICATION_STATE', name: (`key.endsWith('=')` ? key.chop : key), value: args[0] }
+        Isomorfeus.store.collect_and_defer_dispatch(action)
+      else
+        # check if we have a component local state value
+        if @native && `#@native.props.iso_store`
+          if `#@native.props.iso_store.application_state && #@native.props.iso_store.application_state.hasOwnProperty(key)`
+            return @native.JS[:props].JS[:iso_store].JS[:application_state].JS[key]
+          end
+        else
+          return AppStore[key]
+        end
+        # otherwise return nil
+        return nil
+      end
+    end
+  end
+end

data/lib/isomorfeus_preact/lucid_component/base.rb

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

data/lib/isomorfeus_preact/lucid_component/class_store_proxy.rb

@@ -0,0 +1,44 @@
+module LucidComponent
+  class ClassStoreProxy
+    def initialize(component_name, component_instance = nil, native = nil)
+      @component_name = component_name
+      if component_instance
+        @native = native
+        @component_instance = component_instance
+      end
+    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 class state, simply a dispatch
+        action = { type: 'CLASS_STATE', class: @component_name, name: (`key.endsWith('=')` ? key.chop : key), value: args[0] }
+        Isomorfeus.store.collect_and_defer_dispatch(action)
+      else
+        # get class state
+        # check if we have a component local state value
+        if @native && @native.JS[:props].JS[:iso_store]
+          if @native.JS[:props].JS[:iso_store].JS[:class_state] &&
+              @native.JS[:props].JS[:iso_store].JS[:class_state].JS[@component_name] &&
+              @native.JS[:props].JS[:iso_store].JS[:class_state].JS[@component_name].JS.hasOwnProperty(key)
+            return @native.JS[:props].JS[:iso_store].JS[:class_state].JS[@component_name].JS[key]
+          end
+        else
+          a_state = Isomorfeus.store.get_state
+          if a_state.key?(:class_state) && a_state[:class_state].key?(@component_name) && a_state[:class_state][@component_name].key?(key)
+            return a_state[:class_state][@component_name][key]
+          end
+        end
+        # otherwise return nil
+        return nil
+      end
+    end
+  end
+end

data/lib/isomorfeus_preact/lucid_component/initializer.rb

@@ -0,0 +1,14 @@
+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)
+      # @iso_store = Isomorfeus::IsomorphicStoreProxy.new(self)
+      # @local_store = Isomorfeus::LocalStoreProxy.new(self)
+      @store = LucidComponent::InstanceStoreProxy.new(self)
+      @props = `Opal.Preact.Component.Props.$new(#@native)`
+      @state = `Opal.Preact.Component.State.$new(#@native)`
+    end
+  end
+end