isomorfeus-preact 10.6.33 → 10.6.37

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dc07c6bee9a5ccb2910f7c5d9d6ecfa419a398cffd823750f05dbc34080fc93d
-  data.tar.gz: e4b629929b8140883f1e199d47e7b8d050f46b1cd864d4c46b8497e543003abc
+  metadata.gz: f82bf99a53bc67d3fd34a366579d35c1e560c6dd860e9981dca3c24e58a4bed6
+  data.tar.gz: c031adbcb8102d1225012d1526e602b70275b872be1b74c96828c1e53c20c78d
 SHA512:
-  metadata.gz: e548a9592e54326e4333dadbd615106a20829063bc2417efbd55a8fb247f3f5a89627867411552a4b9b43f1092065b724140c84622444cb109f7e64dd2760043
-  data.tar.gz: f610b788abbb7c585c44c852e51bbf3885ba97faf2424dce64ca294bce30ceb0fa739a697a286aecd664602be40a8568c4d0e976b34347593e3d725906deb3b5
+  metadata.gz: c238454b703626f7db793109fe26c81443e55ffe6bae3e0a717132369bcdb8854c5319bc56db2780f976b4721e1e0f26bd07ddb21cddcb04fe0d8a15bc63e4cf
+  data.tar.gz: 28b3a937f2e305534e7cfc038de0f76445128b58c464d6596b5de36e79d3f25f709956d34969f8e681d3780c0d2fe9e4a07d672005aba5cc205c9ab477493e15

data/lib/isomorfeus/preact/config.rb

@@ -83,7 +83,7 @@ module Isomorfeus
 
       def start_app!
         Isomorfeus.zeitwerk.setup
-        Isomorfeus::TopLevel.mount!
+        Isomorfeus::TopLevel.mount! unless on_ssr?
       end
 
       def force_render

data/lib/isomorfeus/preact_view_helper.rb

@@ -4,9 +4,9 @@ module Isomorfeus
       base.include Isomorfeus::AssetManager::ViewHelper
     end
 
-    def cached_mount_component(component_name, props = {}, asset_key = 'ssr.js', skip_ssr: false, use_ssr: false, max_passes: 4)
+    def cached_mount_component(component_name, props = {}, asset_key = 'ssr.js', skip_ssr: false, use_ssr: false, max_passes: 4, force: false)
       key = "#{component_name}#{props}#{asset}"
-      if Isomorfeus.production?
+      if Isomorfeus.production? && !force
         render_result, @ssr_response_status, @ssr_styles = component_cache.fetch(key)
         return render_result if render_result
       end
@@ -17,19 +17,13 @@ module Isomorfeus
     end
 
     def mount_component(component_name, props = {}, asset_key = 'ssr.js', skip_ssr: false, use_ssr: false, max_passes: 4)
+      ssr_start_time = Time.now if Isomorfeus.development?
       @ssr_response_status = nil
       @ssr_styles = nil
-      thread_id_asset = "#{Thread.current.object_id}#{asset_key}"
       render_result = "<div data-iso-env=\"#{Isomorfeus.env}\" data-iso-root=\"#{component_name}\" data-iso-props='#{Oj.dump(props, mode: :strict)}'"
       if !skip_ssr && (Isomorfeus.server_side_rendering || use_ssr)
+        thread_id_asset = "#{Thread.current.object_id}#{asset_key}"
         if Isomorfeus.development?
-          # always create a new context, effectively reloading code
-          # delete the existing context first, saves memory
-          if Isomorfeus.ssr_contexts.key?(thread_id_asset)
-            uuid = Isomorfeus.ssr_contexts[thread_id_asset].instance_variable_get(:@uuid)
-            runtime = Isomorfeus.ssr_contexts[thread_id_asset].instance_variable_get(:@runtime)
-            runtime.vm.delete_context(uuid)
-          end
           begin
             init_speednode_context(asset_key, thread_id_asset)
           rescue Exception => e
@@ -41,7 +35,7 @@ module Isomorfeus
           end
         end
 
-        start_time = Time.now if Isomorfeus.development?
+        ctx = Isomorfeus.ssr_contexts[thread_id_asset]
         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
@@ -53,110 +47,84 @@ module Isomorfeus
         # build javascript for rendering first pass
         # it will initialize buffers to guard against leaks, maybe caused by previous exceptions
         javascript = <<~JAVASCRIPT
-          global.Opal.Preact.render_buffer = [];
-          global.Opal.Preact.active_components = [];
-          global.Opal.Preact.active_redux_components = [];
-          global.FirstPassFinished = false;
-          global.Exception = false;
-          global.IsomorfeusSessionId = '#{Thread.current[:isomorfeus_session_id]}';
-          global.Opal.Isomorfeus['$env=']('#{Isomorfeus.env}');
-          if (typeof global.Opal.Isomorfeus["$current_locale="] === 'function') {
-            global.Opal.Isomorfeus["$current_locale="]('#{props[:locale]}');
-          } else if (typeof global.Opal.Isomorfeus["$negotiated_locale="] === 'function') { // remove later on
-            global.Opal.Isomorfeus["$negotiated_locale="]('#{props[:locale]}');
-          }
-          global.Opal.Isomorfeus['$force_init!']();
-          global.Opal.Isomorfeus['$ssr_response_status='](200);
-          global.Opal.Isomorfeus.TopLevel['$ssr_route_path=']('#{props[:location]}');
-          let api_ws_path = '#{api_ws_path}';
-          let exception;
-          if (typeof global.Opal.Isomorfeus.Transport !== 'undefined' && api_ws_path !== '') {
-            global.Opal.Isomorfeus.TopLevel["$transport_ws_url="]("#{transport_ws_url}");
-            global.Opal.send(global.Opal.Isomorfeus.Transport.$promise_connect(global.IsomorfeusSessionId), 'then', [], ($$1 = function(){
-              try {
-                global.Opal.Isomorfeus.TopLevel.$render_component_to_string('#{component_name}', #{Oj.dump(props, mode: :strict)});
-                global.FirstPassFinished = 'transport';
-              } catch (e) {
-                global.Exception = e;
-                global.FirstPassFinished = 'transport';
-              }
-            }, $$1.$$s = this, $$1.$$arity = 0, $$1))
-            return false;
-          } else { global.FirstPassFinished = true; return true; };
+        return Opal.Isomorfeus.SSR.first_pass('#{Thread.current[:isomorfeus_session_id]}', '#{Isomorfeus.env}', '#{props[:locale]}', '#{props[:location]}', '#{api_ws_path}', '#{transport_ws_url}', '#{component_name}', #{Oj.dump(props, mode: :strict)})
         JAVASCRIPT
+
+        finished = false
         # execute first render pass
         begin
           pass += 1
-          first_pass_skipped = Isomorfeus.ssr_contexts[thread_id_asset].exec(javascript)
+          has_transport, has_store, need_further_pass, exception = ctx.exec(javascript)
+          Isomorfeus.raise_error(message: "Server Side Rendering: #{exception['message']}", stack: exception['stack']) if exception
         rescue Exception => e
           Isomorfeus.raise_error(error: e)
         end
-        # wait for first pass to finish
-        unless first_pass_skipped
-          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 ]')
+
+        if has_transport
+          # wait for first pass to finish
+          first_pass_finished, need_further_pass, exception = ctx.eval_script(key: :first_pass_check)
           Isomorfeus.raise_error(message: "Server Side Rendering: #{exception['message']}", stack: exception['stack']) if exception
           unless first_pass_finished
             start_time = Time.now
             while !first_pass_finished
               break if (Time.now - start_time) > 10
-              sleep 0.01
-              first_pass_finished = Isomorfeus.ssr_contexts[thread_id_asset].exec('return global.FirstPassFinished')
+              sleep 0.005
+              first_pass_finished, need_further_pass, exception = ctx.eval_script(key: :first_pass_check)
+              Isomorfeus.raise_error(message: "Server Side Rendering: #{exception['message']}", stack: exception['stack']) if exception
             end
           end
-          # wait for transport requests to finish
-          if first_pass_finished == 'transport'
-            transport_busy = Isomorfeus.ssr_contexts[thread_id_asset].exec('return global.Opal.Isomorfeus.Transport["$busy?"]()')
-            if transport_busy
-              start_time = Time.now
-              while transport_busy
-                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
+
+          # wait for transport to settle
+          transport_busy = ctx.eval_script(key: :transport_busy)
+          if transport_busy
+            start_time = Time.now
+            while transport_busy
+              break if (Time.now - start_time) > 5
+              sleep 0.005
+              transport_busy = ctx.eval_script(key: :transport_busy)
             end
           end
         end
-        # build javascript for additional render passes
-        # guard against leaks from first pass, maybe because of a exception
-        javascript = <<~JAVASCRIPT
-          global.Opal.Preact.render_buffer = [];
-          global.Opal.Preact.active_components = [];
-          global.Opal.Preact.active_redux_components = [];
-          global.Exception = false;
-          let rendered_tree;
-          let ssr_styles;
-          let component;
-          try {
-            rendered_tree = global.Opal.Isomorfeus.TopLevel.$render_component_to_string('#{component_name}', #{Oj.dump(props, mode: :strict)});
-          } catch (e) {
-            global.Exception = e;
-          }
-          let application_state = global.Opal.Isomorfeus.store.native.getState();
-          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'](), 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?"]()')
+
+        if !need_further_pass
+          rendered_tree, application_state, @ssr_styles, @ssr_response_status, exception = ctx.eval_script(key: :first_pass_result)
+          Isomorfeus.raise_error(message: "Server Side Rendering: #{exception['message']}", stack: exception['stack']) if exception
+        else
+          start_time = Time.now
+          script_key = if has_transport && has_store
+                         :sill_busy
+                       elsif has_transport
+                         :transport_busy
+                       elsif has_store
+                         :store_busy
+                       else
+                         nil
+                       end
+          while need_further_pass
+            # execute further render passes
+            javascript = <<~JAVASCRIPT
+            return Opal.Isomorfeus.SSR.further_pass('#{component_name}', #{Oj.dump(props, mode: :strict)})
+            JAVASCRIPT
+            pass += 1
+            rendered_tree, application_state, @ssr_styles, @ssr_response_status, need_further_pass, exception = ctx.exec(javascript)
+            Isomorfeus.raise_error(message: "Server Side Rendering: #{exception['message']}", stack: exception['stack']) if exception
+            if need_further_pass && script_key
+              break if (Time.now - start_time) > 5
+              need_further_pass = ctx.eval_script(key: script_key)
+              while need_further_pass
+                break if (Time.now - start_time) > 4
+                sleep 0.01
+                need_further_pass = ctx.eval_script(key: script_key)
+              end
+              break if pass >= max_passes
+            else
+              break
+            end
           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
-        Isomorfeus.ssr_contexts[thread_id_asset].exec(javascript)
-        Isomorfeus.raise_error(message: exception['message'], stack: exception['stack']) if exception
+
+        ctx.eval_script(key: :transport_disconnect) if has_transport
+
         render_result << " data-iso-hydrated='true'" if rendered_tree
         if Isomorfeus.respond_to?(:current_user) && Isomorfeus.current_user && !Isomorfeus.current_user.anonymous?
           render_result << " data-iso-usid=#{Oj.dump(Isomorfeus.current_user.sid, mode: :strict)}"
@@ -170,10 +138,10 @@ module Isomorfeus
         render_result << " data-iso-nloc='#{props[:locale]}'>"
       end
       render_result << '</div>'
-      if Isomorfeus.server_side_rendering
+      if Isomorfeus.server_side_rendering && !skip_ssr
         render_result = "<script type='application/javascript'>\nServerSideRenderingStateJSON = #{Oj.dump(application_state, mode: :strict)}\n</script>\n" << render_result
+        puts "PreactViewHelper Server Side Rendering rendered #{pass} passes and took ~#{((Time.now - ssr_start_time)*1000).to_i}ms" if Isomorfeus.development?
       end
-      STDERR.puts "PreactViewHelper Server Side Rendering rendered #{pass} passes and took ~#{((Time.now - start_time)*1000).to_i}ms" if Isomorfeus.development? && !skip_ssr
       render_result
     end
 
@@ -198,8 +166,32 @@ module Isomorfeus
     def init_speednode_context(asset_key, thread_id_asset)
       asset = Isomorfeus.assets[asset_key]
       raise "#{self.class.name}: Asset not found: #{asset_key}" unless asset
-      asset_manager.transition(asset_key, asset)
-      Isomorfeus.ssr_contexts[thread_id_asset] = ExecJS.permissive_compile(asset.bundle)
+      if !Isomorfeus.ssr_contexts.key?(thread_id_asset) || !asset.bundled?
+        if Isomorfeus.ssr_contexts.key?(thread_id_asset)
+          uuid = Isomorfeus.ssr_contexts[thread_id_asset].instance_variable_get(:@uuid)
+          runtime = Isomorfeus.ssr_contexts[thread_id_asset].instance_variable_get(:@runtime)
+          runtime.vm.delete_context(uuid)
+        end
+        asset_manager.transition(asset_key, asset)
+        Isomorfeus.ssr_contexts[thread_id_asset] = ExecJS.permissive_compile(asset.bundle)
+        ctx = Isomorfeus.ssr_contexts[thread_id_asset]
+        ctx.exec(top_level_mod)
+        ctx.exec(ssr_mod)
+        ctx.add_script(key: :first_pass_check, source: '[global.FirstPassFinished, global.NeedFurtherPass, global.Exception ? { message: global.Exception.message, stack: global.Exception.stack } : false ]')
+        ctx.add_script(key: :first_pass_result, source: 'Opal.Isomorfeus.SSR.first_pass_result()')
+        ctx.add_script(key: :still_busy, source: 'let nfp = global.Opal.Isomorfeus.Transport["$busy?"]() || global.Opal.Isomorfeus.store["$recently_dispatched?"](); (nfp == nil) ? false : nfp;')
+        ctx.add_script(key: :store_busy, source: 'let nfp = global.Opal.Isomorfeus.store["$recently_dispatched?"](); (nfp == nil) ? false : nfp;')
+        ctx.add_script(key: :transport_busy, source: 'global.Opal.Isomorfeus.Transport["$busy?"]()')
+        ctx.add_script(key: :transport_disconnect, source: 'global.Opal.Isomorfeus.Transport.$disconnect()')
+      end
+    end
+
+    def ssr_mod
+      @_ssr_mod ||= Opal.compile(File.read(File.expand_path(File.join(File.dirname(__FILE__), 'ssr.rb'))))
+    end
+
+    def top_level_mod
+      @_top_level_mod ||= Opal.compile(File.read(File.expand_path(File.join(File.dirname(__FILE__), 'top_level_ssr.rb'))))
     end
   end
 end

data/lib/isomorfeus/ssr.rb

@@ -0,0 +1,75 @@
+module Isomorfeus
+  module SSR
+    %x{
+      self.first_pass = function(session_id, env, locale, location, api_ws_path, transport_ws_url, component_name, props) {
+        global.Opal.Preact.render_buffer = [];
+        global.Opal.Preact.active_components = [];
+        global.Opal.Preact.active_redux_components = [];
+        global.FirstPassFinished = false;
+        global.NeedFurtherPass = false;
+        global.RenderedTree = '';
+        global.Exception = false;
+        global.IsomorfeusSessionId = session_id;
+        global.HasTransport = (typeof global.Opal.Isomorfeus.Transport !== 'undefined') && (api_ws_path !== '');
+        global.HasStore = typeof global.Opal.Isomorfeus.store !== 'undefined';
+        global.Opal.Isomorfeus['$env='](env);
+        if (typeof global.Opal.Isomorfeus["$current_locale="] === 'function') { global.Opal.Isomorfeus["$current_locale="](''); }
+        global.Opal.Isomorfeus['$force_init!']();
+        global.Opal.Isomorfeus['$ssr_response_status='](200);
+        global.Opal.Isomorfeus.TopLevel['$ssr_route_path='](location);
+        if (global.HasTransport) {
+          global.Opal.Isomorfeus.TopLevel["$transport_ws_url="](transport_ws_url);
+          global.Opal.send(global.Opal.Isomorfeus.Transport.$promise_connect(global.IsomorfeusSessionId), 'then', [], ($$1 = function(){
+            try {
+              global.RenderedTree = global.Opal.Isomorfeus.TopLevel.$render_component_to_string(component_name, props);
+              let nfp = global.Opal.Isomorfeus.Transport["$busy?"]() || global.Opal.Isomorfeus.store['$recently_dispatched?']();
+              global.NeedFurtherPass = (nfp == nil) ? false : nfp;
+              global.FirstPassFinished = false;
+            } catch (e) {
+              global.Exception = e;
+              global.NeedFurtherPass = false;
+            }
+          }, $$1.$$s = this, $$1.$$arity = 0, $$1))
+        } else {
+          try {
+            global.RenderedTree = global.Opal.Isomorfeus.TopLevel.$render_component_to_string(component_name, props);
+            if (global.HasStore) {
+              let nfp = global.Opal.Isomorfeus.store['$recently_dispatched?']();
+              global.NeedFurtherPass = (nfp == nil) ? false : nfp;
+            }
+          } catch (e) {
+            global.Exception = e;
+            global.NeedFurtherPass = false;
+          }
+        };
+        return [global.HasTransport, global.HasStore, global.NeedFurtherPass, global.Exception ? { message: global.Exception.message, stack: global.Exception.stack } : false];
+      }
+
+      self.first_pass_result = function() {
+        let ssr_styles;
+        let application_state = global.Opal.Isomorfeus.store.native.getState();
+        if (typeof global.NanoCSSInstance !== 'undefined') { ssr_styles = global.NanoCSSInstance.raw }
+        return [global.RenderedTree, application_state, ssr_styles, global.Opal.Isomorfeus['$ssr_response_status'](), global.Exception ? { message: global.Exception.message, stack: global.Exception.stack } : false];
+      }
+
+      self.further_pass = function(component_name, props) {
+        global.Opal.Preact.render_buffer = [];
+        global.Opal.Preact.active_components = [];
+        global.Opal.Preact.active_redux_components = [];
+        global.Exception = false;
+        let rendered_tree;
+        let ssr_styles;
+        try {
+          rendered_tree = global.Opal.Isomorfeus.TopLevel.$render_component_to_string(component_name, props);
+        } catch (e) {
+          global.Exception = e;
+        }
+        let application_state = global.Opal.Isomorfeus.store.native.getState();
+        if (typeof global.NanoCSSInstance !== 'undefined') { ssr_styles = global.NanoCSSInstance.raw }
+        let nfp = (global.HasTransport && global.Opal.Isomorfeus.Transport["$busy?"]()) || (global.HasStore && global.Opal.Isomorfeus.store["$recently_dispatched?"]());
+        global.NeedFurtherPass = (nfp == nil) ? false : nfp;
+        return [rendered_tree, application_state, ssr_styles, global.Opal.Isomorfeus['$ssr_response_status'](), global.NeedFurtherPass, global.Exception ? { message: global.Exception.message, stack: global.Exception.stack } : false];
+      }
+    }
+  end
+end

data/lib/isomorfeus/top_level.rb

@@ -1,7 +1,7 @@
 module Isomorfeus
   class TopLevel
     class << self
-      if on_browser? # execution environment
+      if on_browser?
         def mount!
           Isomorfeus.init
           Isomorfeus::TopLevel.on_ready do
@@ -94,29 +94,7 @@ module Isomorfeus
           hydrated ? Preact.hydrate(top, element) : Preact.render(top, element)
           Isomorfeus.top_component = top
         end
-      else # execution environment
-        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 # execution environment
+      end
     end
   end
 end

data/lib/isomorfeus/top_level_ssr.rb

@@ -0,0 +1,23 @@
+module Isomorfeus
+  class TopLevel
+    class << self
+      attr_accessor :ssr_route_path
+      attr_accessor :transport_ws_url
+
+      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.rb

@@ -81,6 +81,7 @@ else
   require 'uri'
   require 'oj'
   require 'opal'
+  require 'opal/compiler'
   require 'opal-activesupport'
   require 'opal-zeitwerk'
   require 'isomorfeus-speednode'

data/lib/isomorfeus_preact/lucid_component/api.rb

@@ -4,7 +4,6 @@ module LucidComponent::Api
       # stores
       attr_accessor :app_store
       attr_accessor :class_store
-      attr_accessor :store
 
       def class_store
         @class_store ||= ::LucidComponent::ClassStoreProxy.new(self.to_s)

data/lib/isomorfeus_preact/lucid_component/initializer.rb

@@ -3,7 +3,6 @@ module LucidComponent::Initializer
     @native = native_component
     @app_store = LucidComponent::AppStoreProxy.new(self)
     @class_store = LucidComponent::ClassStoreProxy.new(self.class.to_s, self, @native)
-    @store = LucidComponent::InstanceStoreProxy.new(self)
     @props = `Opal.Preact.Props.$new(#@native)`
     @state = `Opal.Preact.State.$new(#@native)`
   end

data/lib/isomorfeus_preact/lucid_func/initializer.rb

@@ -4,6 +4,5 @@ module LucidFunc::Initializer
     @native_props = `Opal.Preact.Props.$new(#{self})`
     @app_store = LucidComponent::AppStoreProxy.new(self)
     @class_store = LucidComponent::ClassStoreProxy.new(self.class.to_s, self, self)
-    @store = LucidComponent::InstanceStoreProxy.new(self)
   end
 end

data/lib/lucid_app/context.rb

@@ -5,7 +5,7 @@ module LucidApp
       css_server = `null`
       css_server = `document.getElementById('css-server-side')` unless on_ssr?
       %x{
-        n = Opal.NanoCSS;
+        let n = Opal.NanoCSS;
         nano_css = (css_server) ? n.create({ sh: css_server }) : n.create();
         n.rule(nano_css);
         n.sheet(nano_css);

data/lib/nano_css.rb

@@ -1,22 +1,22 @@
 module NanoCSS
   %x{
     var KEBAB_REGEX = /[A-Z]/g;
+    var on_browser = #{on_browser?};
+    var in_dev = #{Isomorfeus.development?};
 
     function hash(str) {
       var h = 5381, i = str.length;
       while (i) h = (h * 33) ^ str.charCodeAt(--i);
       return '_' + (h >>> 0).toString(36);
     };
-  }
 
-  %x{
     self.create = function (config) {
       config = config || {};
       var assign = config.assign || Object.assign;
       var client = typeof window === 'object';
 
       // Check if we are really in browser environment.
-      if (process.env.NODE_ENV !== 'production') {
+      if (on_browser && in_dev) {
         if (client) {
           if ((typeof document !== 'object') || !document.getElementsByTagName('HTML')) {
             console.error('nano-css detected browser environment because of "window" global, but "document" global seems to be defective.');
@@ -47,7 +47,7 @@ module NanoCSS
       if (renderer.client) {
         if (!renderer.sh) { document.head.appendChild(renderer.sh = document.createElement('style')); }
 
-        if (process.env.NODE_ENV !== 'production') {
+        if (in_dev) {
           renderer.sh.setAttribute('data-nano-css-dev', '');
 
           // Test style sheet used in DEV mode to test if .insetRule() would throw.
@@ -60,7 +60,7 @@ module NanoCSS
           // .insertRule() is faster than .appendChild(), that's why we use it in PROD.
           // But CSS injected using .insertRule() is not displayed in Chrome Devtools
           var sheet = renderer.sh.sheet;
-          if (process.env.NODE_ENV === 'production') {
+          if (!in_dev) {
             // Unknown pseudo-selectors will throw, this try/catch swallows all errors.
             try { sheet.insertRule(rawCssRule, sheet.cssRules.length); }
             catch (error) {}
@@ -91,7 +91,7 @@ module NanoCSS
           if ((value instanceof Object) && !(value instanceof Array)) {
             postponed.push(prop);
           } else {
-            if ((process.env.NODE_ENV !== 'production') && !renderer.sourcemaps) {
+            if (in_dev && !renderer.sourcemaps) {
               str += '    ' + renderer.decl(prop, value, selector, atrule) + '\n';
             } else {
               str += renderer.decl(prop, value, selector, atrule);
@@ -100,7 +100,7 @@ module NanoCSS
         }
 
         if (str) {
-          if ((process.env.NODE_ENV !== 'production') && !renderer.sourcemaps) {
+          if (in_dev && !renderer.sourcemaps) {
             str = '\n' + selector + ' {\n' + str + '}\n';
           } else {
             str = selector + '{' + str + '}';
@@ -129,7 +129,7 @@ module NanoCSS
 
   %x{
     self.rule = function (renderer) {
-      if (process.env.NODE_ENV !== 'production') {
+      if (in_dev) {
         renderer.rule_blocks = {};
       }
 
@@ -142,7 +142,7 @@ module NanoCSS
 
       renderer.rule = function (css, block) {
           // Warn user if CSS selectors clash.
-          if (process.env.NODE_ENV !== 'production') {
+          if (in_dev) {
               if (block) {
                   if (typeof block !== 'string') {
                       throw new TypeError(
@@ -194,7 +194,7 @@ module NanoCSS
         var onElementModifier = function (elementModifier) {
           var styles = map[elementModifier];
 
-          if ((process.env.NODE_ENV !== 'production') && renderer.sourcemaps) {
+          if (in_dev && renderer.sourcemaps) {
             // In dev mode emit CSS immediately to generate sourcemaps.
             result[elementModifier] = renderer.rule(styles, block + '-' + elementModifier);
           } else {

data/lib/preact/version.rb

@@ -1,3 +1,3 @@
 module Preact
-  VERSION = '10.6.33'
+  VERSION = '10.6.37'
 end

data/lib/preact.rb

@@ -196,11 +196,12 @@ module Preact
     };
 
     self.internal_render = function(component, props, string_child, block) {
+      const oper = Opal.global.Preact;
       const operabu = self.render_buffer;
       let native_props;
       if (props && props !== nil) { native_props = self.to_native_preact_props(props); }
       if (string_child) {
-        operabu[operabu.length - 1].push(Opal.global.Preact.createElement(component, native_props, string_child));
+        operabu[operabu.length - 1].push(oper.createElement(component, native_props, string_child));
       } else if (block && block !== nil) {
         operabu.push([]);
         // console.log("internal_render pushed", Opal.Preact.render_buffer, Opal.Preact.render_buffer.toString());
@@ -208,9 +209,9 @@ module Preact
         if (block_result && block_result !== nil) { Opal.Preact.render_block_result(block_result); }
         // console.log("internal_render popping", Opal.Preact.render_buffer, Opal.Preact.render_buffer.toString());
         let children = operabu.pop();
-        operabu[operabu.length - 1].push(Opal.global.Preact.createElement.apply(this, [component, native_props].concat(children)));
+        operabu[operabu.length - 1].push(oper.createElement.apply(this, [component, native_props].concat(children)));
       } else {
-        operabu[operabu.length - 1].push(Opal.global.Preact.createElement(component, native_props));
+        operabu[operabu.length - 1].push(oper.createElement(component, native_props));
       }
     };
 

data/node_modules/.package-lock.json

@@ -4,9 +4,9 @@
   "requires": true,
   "packages": {
     "node_modules/preact": {
-      "version": "10.6.5",
-      "resolved": "https://registry.npmjs.org/preact/-/preact-10.6.5.tgz",
-      "integrity": "sha512-i+LXM6JiVjQXSt2jG2vZZFapGpCuk1fl8o6ii3G84MA3xgj686FKjs4JFDkmUVhtxyq21+4ay74zqPykz9hU6w==",
+      "version": "10.6.6",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.6.6.tgz",
+      "integrity": "sha512-dgxpTFV2vs4vizwKohYKkk7g7rmp1wOOcfd4Tz3IB3Wi+ivZzsn/SpeKJhRENSE+n8sUfsAl4S3HiCVT923ABw==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/preact"

data/node_modules/preact/compat/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015-present Jason Miller
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/node_modules/preact/compat/jsx-dev-runtime.js

@@ -1 +1,3 @@
+require('preact/compat');
+
 module.exports = require('preact/jsx-runtime');

data/node_modules/preact/compat/jsx-dev-runtime.mjs

@@ -1 +1,3 @@
+import 'preact/compat';
+
 export * from 'preact/jsx-runtime';

data/node_modules/preact/compat/jsx-runtime.js

@@ -1 +1,3 @@
+require('preact/compat');
+
 module.exports = require('preact/jsx-runtime');