isomorfeus-preact 10.6.22 → 10.6.26

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0c7377e941df8a5dd82b65906faa7353cd463aff37722ef42e7545b00967bed8
-  data.tar.gz: 3e4a52c1ea3ab9db460e06deba29a42e915e6e01a2d8c43bbdf7c9eaa8153c3f
+  metadata.gz: 0d26f73d028c328b0dc47a55e0bb2c7c413df5b8ab7b186952e50949d96dde08
+  data.tar.gz: 5952469a0ea71a67f3176f6551e91ed1968dbf0c58131026c6a81d938acc9e75
 SHA512:
-  metadata.gz: 9010971c7c91b3dd4ee6f97c36d42b783b1885ca6a8ef74aae2c921c4e67f4cc9c1acc5a7b3997808f48338afe9a0fd4518c17d93bced3f12960c816bbd3fe94
-  data.tar.gz: 52d34fd59be865c5edac53bf371813b430f3b2ff85d94047a30b4c64cdb42bb2470435533d19bfeb405eab89597085de8cafaee6d6b8a380953df2902e7bb1ef
+  metadata.gz: 3c44c6fc3355ff2f600e9db9debc14804ff7578339af433a5fb271962412a4f530fd401fb592a3267a3845908f328fb94fa9721ca6859a3c701335298a5d3b8f
+  data.tar.gz: 65728c2ecc71694b1794d6c4f5d94c5cc9e962db84e4c38569bb36beb6985e408aeaad8e1c77cade61f842c5a8c3d1af0138a80569859b8d3f37a995ddfe74fd

data/lib/browser/delegate_native.rb

@@ -26,12 +26,22 @@ module Browser
         %x{
           let value = #@native[#{property_name}];
           let type = typeof(value);
-          if (type === 'function') {
-            return value.apply(#@native, args);
-          } else if (value === null || type === 'undefined' || (type === 'number' && isNaN(value))) {
-            return nil;
-          }
-          return value;
+          try {
+            if (type === 'function') {
+              return value.apply(#@native, args);
+            } else if (type === 'object' && (value instanceof HTMLCollection)) {
+              let a = [];
+              for(let i=0; i<value.length; i++) {
+                a[i] = #{Browser::Element.new(`value.item(i)`)};
+              }
+              value = a;
+            } else if (type === 'object' && (value instanceof HTMLElement)) {
+              value = #{Browser::Element.new(value)};
+            } else if (value === null || type === 'undefined' || (type === 'number' && isNaN(value))) {
+              return nil;
+            }
+            return value;
+          } catch { return value; }
         }
       end
     end

data/lib/isomorfeus/preact/config.rb

@@ -132,7 +132,7 @@ module Isomorfeus
   class << self
     def raise_error(error: nil, error_class: nil, message: nil, stack: nil)
       error_class = error.class if error
-        
+
       error_class = RuntimeError unless error_class
       execution_environment = if on_browser? then 'on Browser'
                               elsif on_ssr? then 'in Server Side Rendering'

data/lib/isomorfeus/preact_view_helper.rb

@@ -4,19 +4,19 @@ module Isomorfeus
       base.include Isomorfeus::AssetManager::ViewHelper
     end
 
-    def cached_mount_component(component_name, props = {}, asset_key = 'ssr.js')
+    def cached_mount_component(component_name, props = {}, asset_key = 'ssr.js', skip_ssr: false, use_ssr: false, max_passes: 4)
       key = "#{component_name}#{props}#{asset}"
       if Isomorfeus.production?
         render_result, @ssr_response_status, @ssr_styles = component_cache.fetch(key)
         return render_result if render_result
       end
-      render_result = mount_component(component_name, props, asset_key)
+      render_result = mount_component(component_name, props, asset_key, skip_ssr: skip_ssr, use_ssr: use_ssr, max_passes: max_passes)
       status = ssr_response_status
       component_cache.store(key, render_result, status, ssr_styles) if status >= 200 && status < 300
       render_result
     end
 
-    def mount_component(component_name, props = {}, asset_key = 'ssr.js', skip_ssr: false, use_ssr: false)
+    def mount_component(component_name, props = {}, asset_key = 'ssr.js', skip_ssr: false, use_ssr: false, max_passes: 4)
       @ssr_response_status = nil
       @ssr_styles = nil
       thread_id_asset = "#{Thread.current.object_id}#{asset_key}"
@@ -41,6 +41,8 @@ module Isomorfeus
           end
         end
 
+        start_time = Time.now if Isomorfeus.development?
+        pass = 0
         # if location_host and scheme are given and if Transport is loaded, connect and then render,
         # otherwise do not render because only one pass is required
         ws_scheme = props[:location_scheme] == 'https:' ? 'wss:' : 'ws:'
@@ -82,6 +84,7 @@ module Isomorfeus
         JAVASCRIPT
         # execute first render pass
         begin
+          pass += 1
           first_pass_skipped = Isomorfeus.ssr_contexts[thread_id_asset].exec(javascript)
         rescue Exception => e
           Isomorfeus.raise_error(error: e)
@@ -104,14 +107,14 @@ module Isomorfeus
             if transport_busy
               start_time = Time.now
               while transport_busy
-                break if (Time.now - start_time) > 10
+                break if (Time.now - start_time) > 5
                 sleep 0.01
                 transport_busy = Isomorfeus.ssr_contexts[thread_id_asset].exec('return global.Opal.Isomorfeus.Transport["$busy?"]()')
               end
             end
           end
         end
-        # build javascript for second render pass
+        # build javascript for additional render passes
         # guard against leaks from first pass, maybe because of a exception
         javascript = <<~JAVASCRIPT
           global.Opal.Preact.render_buffer = [];
@@ -127,12 +130,30 @@ module Isomorfeus
               global.Exception = e;
             }
           let application_state = global.Opal.Isomorfeus.store.native.getState();
-          if (typeof global.Opal.Isomorfeus.Transport !== 'undefined') { global.Opal.Isomorfeus.Transport.$disconnect(); }
+          let transport_busy = false;
+          if (typeof global.Opal.Isomorfeus.Transport !== 'undefined' && global.Opal.Isomorfeus.Transport["$busy?"]()) { transport_busy = true; }
           if (typeof global.NanoCSSInstance !== 'undefined') { ssr_styles = global.NanoCSSInstance.raw }
-          return [rendered_tree, application_state, ssr_styles, global.Opal.Isomorfeus['$ssr_response_status'](), global.Exception ? { message: global.Exception.message, stack: global.Exception.stack } : false];
+          return [rendered_tree, application_state, ssr_styles, global.Opal.Isomorfeus['$ssr_response_status'](), transport_busy, global.Exception ? { message: global.Exception.message, stack: global.Exception.stack } : false];
+        JAVASCRIPT
+        # execute further render passes
+        pass += 1
+        rendered_tree, application_state, @ssr_styles, @ssr_response_status, transport_busy, exception = Isomorfeus.ssr_contexts[thread_id_asset].exec(javascript)
+        start_time = Time.now
+        while transport_busy
+          break if (Time.now - start_time) > 5
+          while transport_busy
+            break if (Time.now - start_time) > 4
+            sleep 0.01
+            transport_busy = Isomorfeus.ssr_contexts[thread_id_asset].exec('return global.Opal.Isomorfeus.Transport["$busy?"]()')
+          end
+          pass += 1
+          rendered_tree, application_state, @ssr_styles, @ssr_response_status, transport_busy, exception = Isomorfeus.ssr_contexts[thread_id_asset].exec(javascript)
+          break if pass >= max_passes
+        end
+        javascript = <<~JAVASCRIPT
+          if (typeof global.Opal.Isomorfeus.Transport !== 'undefined') { global.Opal.Isomorfeus.Transport.$disconnect(); }
         JAVASCRIPT
-        # execute second render pass
-        rendered_tree, application_state, @ssr_styles, @ssr_response_status, exception = Isomorfeus.ssr_contexts[thread_id_asset].exec(javascript)
+        Isomorfeus.ssr_contexts[thread_id_asset].exec(javascript)
         Isomorfeus.raise_error(message: exception['message'], stack: exception['stack']) if exception
         render_result << " data-iso-hydrated='true'" if rendered_tree
         if Isomorfeus.respond_to?(:current_user) && Isomorfeus.current_user && !Isomorfeus.current_user.anonymous?
@@ -150,6 +171,7 @@ module Isomorfeus
       if Isomorfeus.server_side_rendering
         render_result = "<script type='application/javascript'>\nServerSideRenderingStateJSON = #{Oj.dump(application_state, mode: :strict)}\n</script>\n" << render_result
       end
+      STDERR.puts "PreactViewHelper Server Side Rendering rendered #{pass} passes and took ~#{Time.now - start_time}s" if Isomorfeus.development? && !skip_ssr
       render_result
     end
 

data/lib/isomorfeus/top_level.rb

@@ -1,98 +1,122 @@
 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} + "'!")`
+      if on_browser? # execution environment
+        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
-          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]] });
+            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
+              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
-      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);
+        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);
           }
-          ready_fun(run);
-        }
-      end
+        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
 
-      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)
+          top = Preact.create_element(component, props)
+          hydrated ? Preact.hydrate(top, element) : Preact.render(top, element)
+          Isomorfeus.top_component = top
         end
-      end
+      else # execution environment
+        attr_accessor :ssr_route_path
+        attr_accessor :transport_ws_url
 
-      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
+        def mount!
+          # nothing, but keep it for compatibility with browser
         end
 
-        top = Preact.create_element(component, props)
-        hydrated ? Preact.hydrate(top, element) : Preact.render(top, element)
-        Isomorfeus.top_component = top
-      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 # execution environment
     end
   end
 end

data/lib/isomorfeus-preact.rb

@@ -13,11 +13,7 @@ if RUBY_ENGINE == 'opal'
   require 'isomorfeus/preact/config'
 
   # allow mounting of components
-  if on_browser?
-    require 'isomorfeus/top_level'
-  else
-    require 'isomorfeus/top_level_ssr'
-  end
+  require 'isomorfeus/top_level'
 
   # nanocss
   require 'nano_css'
@@ -35,7 +31,7 @@ if RUBY_ENGINE == 'opal'
   require 'preact/props'
 
   # HTML Elements and Fragment support
-  require 'preact/component/elements'
+  require 'preact/elements'
 
   # Preact Wrappers
   require 'preact/context_wrapper'
@@ -47,20 +43,21 @@ if RUBY_ENGINE == 'opal'
   require 'preact/component/initializer'
   require 'preact/component/native_component_constructor'
   require 'preact/state'
-  require 'preact/component/resolution'
   require 'preact/component/mixin'
   require 'preact/component/base'
 
+  # component resolution
+  require 'preact/component_resolution'
+  class Object
+    include Preact::ComponentResolution
+  end
+
   # init LucidApplicationContext (Store Provider and Consumer)
   require 'lucid_app/context'
   LucidApp::Context.create_application_context
 
-  class Object
-    include Preact::Component::Resolution
-  end
-
+  # init auto loader
   Isomorfeus.zeitwerk = Zeitwerk::Loader.new
-
   Isomorfeus.zeitwerk.push_dir('isomorfeus_preact')
   require_tree 'isomorfeus_preact', autoload: true
 

data/lib/isomorfeus_preact/lucid_app/api.rb

@@ -5,15 +5,33 @@ module LucidApp
         def theme(theme_hash = nil, &block)
           theme_hash = block.call if block_given?
           if theme_hash
+            component_name = self.to_s
             %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`)};
+              let rule_name = component_name.replace(/:/g, '_');
+              let ogni = Opal.global.NanoCSSInstance;
+              if (base.css_theme && #{Isomorfeus.production?}) { return base.css_theme; }
+              else if(#{Isomorfeus.development?}) {
+                if (#{on_browser?}) {
+                  ogni.delete_from_sheet(rule_name);
+                  ogni.delete_from_rule_blocks(rule_name);
+                  ogni.hydrate_force_put = true;
+                }
+              }
+              if (typeof theme_hash.$is_wrapped_style !== 'undefined') {
+                base.css_theme = theme_hash;
+              } else {
+                let css;
+                if (typeof theme_hash.$to_n === 'function') { css = theme_hash.$to_n(); }
+                else { css = theme_hash; }
+                let nano_styles = ogni.sheet(css, rule_name);
+                base.css_theme = #{::LucidComponent::StylesWrapper.new(`nano_styles`)};
+              }
             }
           end
-          `base.css_theme`
+          %x{
+            if (!base.css_theme) { return nil; }
+            return base.css_theme;
+          }
         end
         alias_method :theme=, :theme
       end

data/lib/isomorfeus_preact/lucid_app/mixin.rb

@@ -3,12 +3,11 @@ module LucidApp
     def self.included(base)
       base.include(::Native::Wrapper)
       base.extend(::LucidApp::NativeComponentConstructor)
-      base.include(::Preact::Component::Elements)
+      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::StylesApi)
       base.include(::LucidApp::Api)
       base.include(::LucidComponent::Initializer)
     end

data/lib/isomorfeus_preact/lucid_component/api.rb

@@ -34,6 +34,40 @@ module LucidComponent
           end
           `base.while_loading_block = wl_block`
         end
+
+        # styles
+        def styles(styles_hash = nil, &block)
+          styles_hash = block.call if block_given?
+          if styles_hash
+            component_name = self.to_s
+            %x{
+              let rule_name = component_name.replace(/:/g, '_');
+              let ogni = Opal.global.NanoCSSInstance;
+              if (base.css_styles && #{Isomorfeus.production?}) { return base.css_styles; }
+              else if(#{Isomorfeus.development?}) {
+                if (#{on_browser?}) {
+                  ogni.delete_from_sheet(rule_name);
+                  ogni.delete_from_rule_blocks(rule_name);
+                  ogni.hydrate_force_put = true;
+                }
+              }
+              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 = ogni.sheet(css, rule_name);
+                base.css_styles = #{::LucidComponent::StylesWrapper.new(`nano_styles`)};
+              }
+            }
+          end
+          %x{
+            if (!base.css_styles) { return nil; }
+            return base.css_styles;
+          }
+        end
+        alias_method :styles=, :styles
       end
 
       # stores
@@ -59,6 +93,15 @@ module LucidComponent
         !!state.preloaded
       end
 
+      # styles
+      def styles
+        %x{
+          let c = self.$class()
+          if (typeof(c.css_styles) === 'undefined') { return nil; }
+          return c.css_styles;
+        }
+      end
+
       # requires transport
       def current_user
         Isomorfeus.current_user

data/lib/isomorfeus_preact/lucid_component/mixin.rb

@@ -3,12 +3,11 @@ module LucidComponent
     def self.included(base)
       base.include(::Native::Wrapper)
       base.extend(::LucidComponent::NativeComponentConstructor)
-      base.include(::Preact::Component::Elements)
+      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::StylesApi)
       base.include(::LucidComponent::Initializer)
     end
   end

data/lib/isomorfeus_preact/lucid_func/mixin.rb

@@ -4,9 +4,8 @@ module LucidFunc
       base.include(::LucidFunc::Initializer)
       base.include(::Preact::FunctionComponent::Api)
       base.extend(::LucidFunc::NativeComponentConstructor)
-      base.include(::Preact::Component::Elements)
+      base.include(::Preact::Elements)
       base.include(::LucidComponent::Api)
-      base.include(::LucidComponent::StylesApi)
     end
   end
 end

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

@@ -2,7 +2,7 @@ module Preact
   module FunctionComponent
     module Mixin
       def self.included(base)
-        base.include(::Preact::Component::Elements)
+        base.include(::Preact::Elements)
         base.include(::Preact::FunctionComponent::Initializer)
         base.include(::Preact::FunctionComponent::Api)
         base.extend(::Preact::FunctionComponent::NativeComponentConstructor)

data/lib/nano_css.rb

@@ -58,27 +58,24 @@ module NanoCSS
 
         renderer.putRaw = function (rawCssRule) {
           // .insertRule() is faster than .appendChild(), that's why we use it in PROD.
-          // But CSS injected using .insertRule() is not displayed in Chrome Devtools,
-          // that's why we use .appendChild in DEV.
+          // But CSS injected using .insertRule() is not displayed in Chrome Devtools
+          var sheet = renderer.sh.sheet;
           if (process.env.NODE_ENV === 'production') {
-            var sheet = renderer.sh.sheet;
-
             // Unknown pseudo-selectors will throw, this try/catch swallows all errors.
             try { sheet.insertRule(rawCssRule, sheet.cssRules.length); }
             catch (error) {}
           } else {
             // Test if .insertRule() works in dev mode. Unknown pseudo-selectors will throw when
-            // .insertRule() is used, but .appendChild() will not throw.
             try {
-              renderer.shTest.sheet.insertRule(rawCssRule, renderer.shTest.sheet.cssRules.length);
+              var testSheet = renderer.shTest.sheet;
+              testSheet.insertRule(rawCssRule, testSheet.cssRules.length);
+              testSheet.deleteRule(testSheet.cssRules.length - 1);
             } catch (error) {
               if (config.verbose) {
                 console.error(error);
               }
             }
-
-            // Insert pretty-printed CSS for dev mode.
-            renderer.sh.appendChild(document.createTextNode(rawCssRule));
+            sheet.insertRule(rawCssRule, sheet.cssRules.length);
           }
         };
       }
@@ -132,9 +129,15 @@ module NanoCSS
 
   %x{
     self.rule = function (renderer) {
-      var blocks;
       if (process.env.NODE_ENV !== 'production') {
-          blocks = {};
+        renderer.rule_blocks = {};
+      }
+
+      renderer.delete_from_rule_blocks = function (rule_name) {
+        rule_name = rule_name + '-';
+        for(const rule in renderer.rule_blocks) {
+          if (rule.startsWith(rule_name)) { delete renderer.rule_blocks[rule]; }
+        }
       }
 
       renderer.rule = function (css, block) {
@@ -148,11 +151,11 @@ module NanoCSS
                       );
                   }
 
-                  if (blocks[block]) {
+                  if (renderer.rule_blocks[block]) {
                       console.error('nano-css block name "' + block + '" used more than once.');
                   }
 
-                  blocks[block] = 1;
+                  renderer.rule_blocks[block] = 1;
               }
           }
 
@@ -167,6 +170,20 @@ module NanoCSS
 
   %x{
     self.sheet = function (renderer) {
+      renderer.delete_from_sheet = function(rule_name) {
+        let selector_rule_name = "._" + rule_name + "-";
+        if (renderer.sh && renderer.sh.sheet) {
+          let sheet = renderer.sh.sheet;
+          let rules = sheet.cssRules;
+          for (let i=rules.length-1;i>=0;i--) {
+            let rule = rules.item(i);
+            if (rule.cssText.includes(selector_rule_name)) {
+              sheet.deleteRule(i);
+            }
+          }
+        }
+      }
+
       renderer.sheet = function (map, block) {
         var result = {};
 
@@ -248,7 +265,7 @@ module NanoCSS
   %x{
     self.hydrate = function (renderer) {
       var hydrated = {};
-
+      renderer.hydrate_force_put = false;
       renderer.hydrate = function (sh) {
         var cssRules = sh.cssRules || sh.sheet.cssRules;
 
@@ -262,7 +279,7 @@ module NanoCSS
         var put = renderer.put;
 
         renderer.put = function (selector, css) {
-          if (selector in hydrated) return;
+          if (!renderer.hydrate_force_put && selector in hydrated) return;
 
           put(selector, css);
         };

data/lib/preact/component/mixin.rb

@@ -5,7 +5,7 @@ module Preact
         base.include(::Native::Wrapper)
         base.extend(::Preact::Component::NativeComponentConstructor)
         base.extend(::LucidPropDeclaration::Mixin)
-        base.include(::Preact::Component::Elements)
+        base.include(::Preact::Elements)
         base.include(::Preact::Component::Api)
         base.include(::Preact::Component::Callbacks)
         base.include(::Preact::Component::Initializer)

data/lib/preact/component_resolution.rb

@@ -0,0 +1,95 @@
+module Preact
+  module ComponentResolution
+    def self.included(base)
+      base.instance_exec do
+        unless method_defined?(:_preact_component_class_resolution_original_const_missing)
+          alias _preact_component_class_resolution_original_const_missing const_missing
+        end
+
+        def const_missing(const_name)
+          %x{
+            if (typeof Opal.global[const_name] !== "undefined" && (const_name[0] === const_name[0].toUpperCase())) {
+              var new_const = Opal.Preact.NativeConstantWrapper.$new(Opal.global[const_name], const_name);
+              new_const.preact_component = Opal.global[const_name];
+              Opal.Object.$const_set(const_name, new_const);
+              return new_const;
+            } else {
+              return #{_preact_component_class_resolution_original_const_missing(const_name)};
+            }
+          }
+        end
+
+        # this is required for autoloading support, as the component may not be loaded and so its method is not registered.
+        # must load it first, done by const_get, and next time the method will be there.
+        unless method_defined?(:_preact_component_class_resolution_original_method_missing)
+          alias _preact_component_class_resolution_original_method_missing method_missing
+        end
+
+        def method_missing(component_name, *args, &block)
+          # check for ruby component and render it
+          # otherwise pass on method missing
+          %x{
+            var constant;
+            if (typeof self.iso_preact_const_cache === 'undefined') { self.iso_preact_const_cache = {}; }
+            try {
+              if (typeof self.iso_preact_const_cache[component_name] !== 'undefined') {
+                constant = self.iso_preact_const_cache[component_name]
+              } else {
+                constant = self.$const_get(component_name);
+                self.iso_preact_const_cache[component_name] = constant;
+              }
+              if (typeof constant.preact_component !== 'undefined') {
+                return Opal.Preact.internal_prepare_args_and_render(constant.preact_component, args, block);
+              }
+            } catch(err) { }
+            return #{_preact_component_class_resolution_original_method_missing(component_name, *args, block)};
+          }
+        end
+      end
+    end
+
+    unless method_defined?(:_preact_component_resolution_original_method_missing)
+      alias _preact_component_resolution_original_method_missing method_missing
+    end
+
+    def method_missing(component_name, *args, &block)
+      # Further on it must check for modules, because $const_get does not take
+      # the full nesting into account, as usually its called via $$ with the
+      # nesting provided by the compiler.
+      %x{
+        var constant;
+        if (typeof self.iso_preact_const_cache === 'undefined') { self.iso_preact_const_cache = {}; }
+
+        if (typeof self.iso_preact_const_cache[component_name] !== 'undefined') {
+          constant = self.iso_preact_const_cache[component_name]
+        } else if (typeof self.$$is_a_module !== 'undefined') {
+          try {
+            constant = self.$const_get(component_name);
+            self.iso_preact_const_cache[component_name] = constant;
+          } catch(err) { }
+        } else {
+          let sc = self.$class();
+          try {
+            constant = sc.$const_get(component_name);
+            self.iso_preact_const_cache[component_name] = constant;
+          } catch(err) {
+            var module_names = sc.$to_s().split("::");
+            var module_name;
+            for (var i = module_names.length - 1; i > 0; i--) {
+              module_name = module_names.slice(0, i).join('::');
+              try {
+                constant = sc.$const_get(module_name).$const_get(component_name, false);
+                self.iso_preact_const_cache[component_name] = constant;
+                break;
+              } catch(err) { }
+            }
+          }
+        }
+        if (constant && typeof constant.preact_component !== 'undefined') {
+          return Opal.Preact.internal_prepare_args_and_render(constant.preact_component, args, block);
+        }
+        return #{_preact_component_resolution_original_method_missing(component_name, *args, block)};
+      }
+    end
+  end
+end

data/lib/preact/elements.rb

@@ -0,0 +1,62 @@
+module Preact
+  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

data/lib/preact/{options.rb → option_hooks.rb}

@@ -1,5 +1,5 @@
 module Preact
-  class Options
+  class OptionHooks
     class << self
       def debounce_rendering(&block)
         %x{
@@ -79,7 +79,7 @@ module Preact
         }
         nil
       end
-      
+
       def vnode(&block)
         %x{
           const old_hook = Opal.global.Preact.options.unmount;

data/lib/preact/version.rb

@@ -1,3 +1,3 @@
 module Preact
-  VERSION = '10.6.22'
+  VERSION = '10.6.26'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: isomorfeus-preact
 version: !ruby/object:Gem::Version
-  version: 10.6.22
+  version: 10.6.26
 platform: ruby
 authors:
 - Jan Biedermann
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-01-30 00:00:00.000000000 Z
+date: 2022-02-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: concurrent-ruby
@@ -86,14 +86,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 0.14.7
+        version: 0.14.8
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 0.14.7
+        version: 0.14.8
 - !ruby/object:Gem::Dependency
   name: isomorfeus-redux
   requirement: !ruby/object:Gem::Requirement
@@ -233,7 +233,6 @@ files:
 - lib/isomorfeus/props/validate_hash_proxy.rb
 - lib/isomorfeus/props/validator.rb
 - lib/isomorfeus/top_level.rb
-- lib/isomorfeus/top_level_ssr.rb
 - lib/isomorfeus_preact/lucid_app/api.rb
 - lib/isomorfeus_preact/lucid_app/base.rb
 - lib/isomorfeus_preact/lucid_app/mixin.rb
@@ -246,7 +245,6 @@ files:
 - lib/isomorfeus_preact/lucid_component/instance_store_proxy.rb
 - lib/isomorfeus_preact/lucid_component/mixin.rb
 - lib/isomorfeus_preact/lucid_component/native_component_constructor.rb
-- lib/isomorfeus_preact/lucid_component/styles_api.rb
 - lib/isomorfeus_preact/lucid_component/styles_wrapper.rb
 - lib/isomorfeus_preact/lucid_func/base.rb
 - lib/isomorfeus_preact/lucid_func/initializer.rb
@@ -264,14 +262,14 @@ files:
 - lib/preact/component/api.rb
 - lib/preact/component/base.rb
 - lib/preact/component/callbacks.rb
-- lib/preact/component/elements.rb
 - lib/preact/component/initializer.rb
 - lib/preact/component/mixin.rb
 - lib/preact/component/native_component_constructor.rb
-- lib/preact/component/resolution.rb
+- lib/preact/component_resolution.rb
 - lib/preact/context_wrapper.rb
+- lib/preact/elements.rb
 - lib/preact/native_constant_wrapper.rb
-- lib/preact/options.rb
+- lib/preact/option_hooks.rb
 - lib/preact/params.rb
 - lib/preact/props.rb
 - lib/preact/ref.rb

data/lib/isomorfeus/top_level_ssr.rb

@@ -1,27 +0,0 @@
-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_component/styles_api.rb

@@ -1,31 +0,0 @@
-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/preact/component/elements.rb

@@ -1,64 +0,0 @@
-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/resolution.rb

@@ -1,97 +0,0 @@
-module Preact
-  module Component
-    module Resolution
-      def self.included(base)
-        base.instance_exec do
-          unless method_defined?(:_preact_component_class_resolution_original_const_missing)
-            alias _preact_component_class_resolution_original_const_missing const_missing
-          end
-
-          def const_missing(const_name)
-            %x{
-              if (typeof Opal.global[const_name] !== "undefined" && (const_name[0] === const_name[0].toUpperCase())) {
-                var new_const = Opal.Preact.NativeConstantWrapper.$new(Opal.global[const_name], const_name);
-                new_const.preact_component = Opal.global[const_name];
-                Opal.Object.$const_set(const_name, new_const);
-                return new_const;
-              } else {
-                return #{_preact_component_class_resolution_original_const_missing(const_name)};
-              }
-            }
-          end
-
-          # this is required for autoloading support, as the component may not be loaded and so its method is not registered.
-          # must load it first, done by const_get, and next time the method will be there.
-          unless method_defined?(:_preact_component_class_resolution_original_method_missing)
-            alias _preact_component_class_resolution_original_method_missing method_missing
-          end
-
-          def method_missing(component_name, *args, &block)
-            # check for ruby component and render it
-            # otherwise pass on method missing
-            %x{
-              var constant;
-              if (typeof self.iso_preact_const_cache === 'undefined') { self.iso_preact_const_cache = {}; }
-              try {
-                if (typeof self.iso_preact_const_cache[component_name] !== 'undefined') {
-                  constant = self.iso_preact_const_cache[component_name]
-                } else {
-                  constant = self.$const_get(component_name);
-                  self.iso_preact_const_cache[component_name] = constant;
-                }
-                if (typeof constant.preact_component !== 'undefined') {
-                  return Opal.Preact.internal_prepare_args_and_render(constant.preact_component, args, block);
-                }
-              } catch(err) { }
-              return #{_preact_component_class_resolution_original_method_missing(component_name, *args, block)};
-            }
-          end
-        end
-      end
-
-      unless method_defined?(:_preact_component_resolution_original_method_missing)
-        alias _preact_component_resolution_original_method_missing method_missing
-      end
-
-      def method_missing(component_name, *args, &block)
-        # Further on it must check for modules, because $const_get does not take
-        # the full nesting into account, as usually its called via $$ with the
-        # nesting provided by the compiler.
-        %x{
-          var constant;
-          if (typeof self.iso_preact_const_cache === 'undefined') { self.iso_preact_const_cache = {}; }
-
-          if (typeof self.iso_preact_const_cache[component_name] !== 'undefined') {
-            constant = self.iso_preact_const_cache[component_name]
-          } else if (typeof self.$$is_a_module !== 'undefined') {
-            try {
-              constant = self.$const_get(component_name);
-              self.iso_preact_const_cache[component_name] = constant;
-            } catch(err) { }
-          } else {
-            let sc = self.$class();
-            try {
-              constant = sc.$const_get(component_name);
-              self.iso_preact_const_cache[component_name] = constant;
-            } catch(err) {
-              var module_names = sc.$to_s().split("::");
-              var module_name;
-              for (var i = module_names.length - 1; i > 0; i--) {
-                module_name = module_names.slice(0, i).join('::');
-                try {
-                  constant = sc.$const_get(module_name).$const_get(component_name, false);
-                  self.iso_preact_const_cache[component_name] = constant;
-                  break;
-                } catch(err) { }
-              }
-            }
-          }
-          if (constant && typeof constant.preact_component !== 'undefined') {
-            return Opal.Preact.internal_prepare_args_and_render(constant.preact_component, args, block);
-          }
-          return #{_preact_component_resolution_original_method_missing(component_name, *args, block)};
-        }
-      end
-    end
-  end
-end