isomorfeus-preact 10.6.25 → 10.6.29

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5297a6babb3f48a4cebfe2a957fdfcb8b3e3e7de5a928956e0b93f7d3d2741c8
-  data.tar.gz: a2af099fbf9f129b1fb6054249c99b6387b79ad4ea10493f9b481672afdc8ed2
+  metadata.gz: 568b183142ceacc12014377fb018c981eb829354bbedefde4fbaa6afe8e3ffff
+  data.tar.gz: c63fd0c3260e2a2050550b4ae41511c7843dff4a6114e014ede3808f2713d950
 SHA512:
-  metadata.gz: d4098d558db9b42dc5c35ae1602c83829a80ae64e986fb9f843af1321cec415b314acee4ac292b3c891628b4fc7b1b8628605561a7858af5d5e18d8a6c0d2ad3
-  data.tar.gz: c726635dc08b8e506551e3e28ada187bd1327bbe30bad51f4095b56e242b412db83d0028c4d33a9608f958986b04d4b8ad090ebff40862d1776db01beb261cc7
+  metadata.gz: abbe6bfcd288626c53f2434a3334cf2b4af9fee57771632ac48ed10679c67b45ce027e4eb2a5c282398f250eaae9a8724dacd9bc1ef07fe1cb309f1376d2f45f
+  data.tar.gz: 1acb14bef1c93928f8727c8841ef9c413ddea9e56a678e155ca04e40c1d3ade6edacfa89bb04c7770bfc61d2d9fe6d1f50a9b833db1f618bb70d695087684df0

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

@@ -42,7 +42,7 @@ module Isomorfeus
         end
 
         start_time = Time.now if Isomorfeus.development?
-        pass = 1
+        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:'
@@ -84,13 +84,13 @@ 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)
         end
         # wait for first pass to finish
         unless first_pass_skipped
-          pass += 1
           first_pass_finished, exception = Isomorfeus.ssr_contexts[thread_id_asset].exec('return [global.FirstPassFinished, global.Exception ? { message: global.Exception.message, stack: global.Exception.stack } : false ]')
           Isomorfeus.raise_error(message: "Server Side Rendering: #{exception['message']}", stack: exception['stack']) if exception
           unless first_pass_finished
@@ -114,7 +114,7 @@ module Isomorfeus
             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 = [];
@@ -136,6 +136,7 @@ module Isomorfeus
           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
@@ -145,10 +146,9 @@ module Isomorfeus
             sleep 0.01
             transport_busy = Isomorfeus.ssr_contexts[thread_id_asset].exec('return global.Opal.Isomorfeus.Transport["$busy?"]()')
           end
-          # execute third render pass
           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
+          break if pass >= max_passes
         end
         javascript = <<~JAVASCRIPT
           if (typeof global.Opal.Isomorfeus.Transport !== 'undefined') { global.Opal.Isomorfeus.Transport.$disconnect(); }
@@ -171,7 +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?
+      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

@@ -16,17 +16,14 @@ module LucidComponent
           `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
+              @_preload_promise.then { self.state.preloaded = true } if @_preload_promise
             end
           end
         end
 
         def while_loading(option = nil, &block)
           wl_block = proc do
-            if @_preload_promise.resolved?
+            if @_preload_promise && @_preload_promise.resolved?
               instance_exec(&`base.render_block`)
             else
               instance_exec(&block)
@@ -34,6 +31,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
@@ -51,14 +82,38 @@ module LucidComponent
 
       # preloading
       def execute_preload_block
-        @_preload_promise = instance_exec(&self.class.JS[:preload_block])
-        @_preload_promise.resolved?
+        begin
+          @_preload_promise = instance_exec(&self.class.JS[:preload_block])
+        rescue => e
+          %x{
+            console.error(e.message);
+            console.error(e.stack);
+          }
+        end
+        if @_preload_promise
+          @_preload_promise.fail do |result|
+            err_text = "#{self.class.name}: preloading failed, last result: #{result.nil? ? 'nil' : result}!"
+            `console.error(err_text)`
+          end
+          @_preload_promise.resolved?
+        else
+          false
+        end
       end
 
       def preloaded?
         !!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,94 @@
+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 = null;
+            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 {
+              try {
+                constant = self.$const_get(component_name);
+                self.iso_preact_const_cache[component_name] = constant;
+              } 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_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.25'
+  VERSION = '10.6.29'
 end

data/lib/preact.rb

@@ -110,25 +110,6 @@ module Preact
       self.active_components.pop();
     };
 
-    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) {
@@ -231,23 +212,18 @@ module Preact
       }
     };
 
-    self.deep_force_update = function(component) {
-      if (component.forceUpdate) { component.forceUpdate(); }
-      if (component.__c) { self.deep_force_update(component.__c); }
-      else if (component.base) { self.update_components_from_dom(component.base); }
-    };
-
-    self.update_components_from_dom = function(node, fn) {
-      let children = node.childNodes;
-      for (let i=children && children.length; i--;) {
-        let child = children[i];
-        if (child.__c) { self.deep_force_update(child.__c); }
-        else { self.update_components_from_dom(child, fn); }
+    self.deep_force_update = function(vnode) {
+      if(vnode) {
+        if (vnode.__c && vnode.__c.forceUpdate) { vnode.__c.forceUpdate(); }
+        if (vnode.__k) {
+          for (let i=0; i<vnode.__k.length; i++) {
+            self.deep_force_update(vnode.__k[i]);
+          }
+        }
       }
     };
   }
 
-
   def self.create_element(type, props = nil, children = nil, &block)
     %x{
       const operabu = self.render_buffer;

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: isomorfeus-preact
 version: !ruby/object:Gem::Version
-  version: 10.6.25
+  version: 10.6.29
 platform: ruby
 authors:
 - Jan Biedermann
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-02-02 00:00:00.000000000 Z
+date: 2022-02-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: concurrent-ruby
@@ -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