isomorfeus-preact 22.9.0.rc9 → 22.10.0.rc2

data/lib/isomorfeus-preact.rb

@@ -28,6 +28,7 @@ if RUBY_ENGINE == 'opal'
   end
 else
   Isomorfeus.browser_history = Browser::History.new
+  require 'isomorfeus_preact_ext'
 end
 
 # allow mounting of components
@@ -49,7 +50,9 @@ require 'preact/component_resolution'
 require 'preact/module_component_resolution'
 
 # HTML Elements and Fragment support
-require 'preact/elements'
+require 'preact/html_elements'
+# require 'preact/svg_elements' # optional
+# require 'preact/math_ml_elements' # optional
 # Component
 require 'preact/component'
 # Context
@@ -94,8 +97,8 @@ else
   end
 
   require 'iso_opal'
-  Opal.append_path(__dir__.untaint) unless IsoOpal.paths.include?(__dir__.untaint)
-  path = File.expand_path(File.join(__dir__.untaint, '..', 'opal'))
+  Opal.append_path(__dir__) unless IsoOpal.paths.include?(__dir__)
+  path = File.expand_path(File.join(__dir__, '..', 'opal'))
   Opal.append_path(path) unless IsoOpal.paths.include?(path)
 
   Isomorfeus.zeitwerk.push_dir(File.expand_path(File.join('app', 'components')))

data/lib/link.rb

@@ -2,6 +2,8 @@ class Link < Preact::Component
   EVENT_PUSH_STATE = "pushState"
   EVENT_REPLACE_STATE = "replaceState"
 
+  self.context_type = RouterContext
+
   def initialize(props, context)
     super(props, context)
     if RUBY_ENGINE == 'opal'
@@ -49,4 +51,3 @@ class Link < Preact::Component
     Preact.clone_element(a, extra_props)
   end
 end
-Link.context_type = RouterContext

data/lib/lucid_app.rb

@@ -33,7 +33,6 @@ class LucidApp < LucidComponent
       @theme_hash = theme_hash if theme_hash
       @theme_hash
     end
-    alias_method :theme=, :theme
 
     if RUBY_ENGINE == 'opal'
       def css_theme
@@ -56,7 +55,7 @@ class LucidApp < LucidComponent
         i = NanoCSS.instance
         i.delete_from_sheet(rule_name)
         i.renderer[:hydrate_force_put] = true
-        thread_css_theme = i.sheet(@theme_hash, rule_name)
+        self.thread_css_theme = i.sheet(@theme_hash, rule_name)
       end
 
       def thread_css_theme_key
@@ -79,31 +78,34 @@ class LucidApp < LucidComponent
     super(props, context)
 
     # theme
-    @class_name_sym = @class_name.to_sym
     @theme = @self_class.css_theme
 
-    store_state = Isomorfeus.store.get_state
-    unless store_state[:class_state].key?(@class_name_sym)
-      store_state[:class_state][@class_name_sym] = {}
-    end
-    @state.merge!({ _app_ctx: { value: { iso_location: props[:location],
-       iso_store: store_state,
-       iso_theme: @theme }}})
+    @state.merge!({ _app_ctx: { value: {
+      iso_location: props[:location],
+      iso_store: Isomorfeus.store.get_state,
+      iso_theme: @theme }}})
 
-    lai = self
     if RUBY_ENGINE == 'opal'
+      lai = self
       @unsubscriber = Isomorfeus.store.subscribe do
-        store_state = Isomorfeus.store.get_state
-        unless store_state[:class_state].key?(@class_name_sym)
-          store_state[:class_state][@class_name_sym] = {}
-        end
-        lai.set_state({ _app_ctx: { value: { iso_location: lai.props[:location],
-          iso_store: store_state,
+        lai.set_state({ _app_ctx: { value: {
+          iso_location: lai.props[:location],
+          iso_store: Isomorfeus.store.get_state,
           iso_theme: lai.theme }}})
       end
     end
   end
 
+  def app_state
+    @state.dig(:_app_ctx, :value, :iso_store, :application_state)
+  end
+
+  def class_state
+    res = @state.dig(:_app_ctx, :value, :iso_store, :class_state, @class_name)
+    return res if res
+    {}
+  end
+
   def should_component_update?(next_props, next_state, _next_context)
     return true if @props != next_props || @state != next_state
     false
@@ -114,4 +116,4 @@ class LucidApp < LucidComponent
       Isomorfeus.store.unsubscribe(@unsubscriber)
     end
   end
-end
+end

data/lib/lucid_component.rb

@@ -29,14 +29,12 @@ class LucidComponent < Preact::Component
       @styles_hash = styles_hash if styles_hash
       @styles_hash
     end
-    alias_method :styles=, :styles
 
     if RUBY_ENGINE == 'opal'
       def css_styles
         return {} unless @styles_hash
         return @css_styles if @css_styles
-        component_name = self.to_s
-        rule_name = component_name.gsub(':', '_')
+        rule_name = self.to_s.underscore
         i = NanoCSS.instance
         i.delete_from_sheet(rule_name)
         i.renderer[:hydrate_force_put] = true
@@ -47,12 +45,11 @@ class LucidComponent < Preact::Component
         return {} unless @styles_hash
         s = thread_css_styles
         return s if s
-        component_name = self.to_s
-        rule_name = component_name.gsub(':', '_')
+        rule_name = self.to_s.underscore
         i = NanoCSS.instance
         i.delete_from_sheet(rule_name)
         i.renderer[:hydrate_force_put] = true
-        thread_css_styles = i.sheet(@styles_hash, rule_name)
+        self.thread_css_styles = i.sheet(@styles_hash, rule_name)
       end
 
       def thread_css_styles_key
@@ -151,4 +148,4 @@ class LucidComponent < Preact::Component
   def theme
     @context[:iso_theme]
   end
-end
+end

data/lib/nano_css.rb

@@ -41,11 +41,6 @@ class NanoCSS
 
   def initialize(config = nil, given_renderer: nil)
     config = {} unless config
-    if RUBY_ENGINE == 'opal'
-      @client = `typeof window === "object"`
-    else
-      @client = false
-    end
 
     if given_renderer
       @renderer = given_renderer
@@ -56,7 +51,7 @@ class NanoCSS
 
     @hydrated = {}
 
-    if @client
+    if RUBY_ENGINE == 'opal'
       unless @renderer.key?(:sh)
         e = `document.createElement('style')`
         @renderer[:sh] = e
@@ -76,10 +71,10 @@ class NanoCSS
       @@unitless_css_properties = {}
       UNITLESS_NUMBER_PROPS.each do |prop|
         @@unitless_css_properties[prop] = 1
-        @@unitless_css_properties['-webkit-' + prop] = 1
-        @@unitless_css_properties['-ms-' + prop] = 1
-        @@unitless_css_properties['-moz-' + prop] = 1
-        @@unitless_css_properties['-o-' + prop] = 1
+        @@unitless_css_properties["-webkit-#{prop}"] = 1
+        @@unitless_css_properties["-ms-#{prop}"] = 1
+        @@unitless_css_properties["-moz-#{prop}"] = 1
+        @@unitless_css_properties["-o-#{prop}"] = 1
       end
     end
 
@@ -110,7 +105,7 @@ class NanoCSS
     str.each_codepoint do |cp|
       h = (h * 33) ^ cp
     end
-    '_' + h.abs.to_s(36)
+    "_#{h.abs.to_s(36)}"
   end
 
   def kebab(prop)
@@ -118,7 +113,7 @@ class NanoCSS
   end
 
   def put(css_selector, decls, atrule = nil)
-    return if @client && !@renderer[:hydrate_force_put] && @hydrated.key?(css_selector)
+    return if RUBY_ENGINE == 'opal' && !@renderer[:hydrate_force_put] && @hydrated.key?(css_selector)
 
     str = ''
     postponed = []
@@ -132,8 +127,8 @@ class NanoCSS
     end
 
     unless str.empty?
-      str = css_selector + '{' + str + '}'
-      put_raw(atrule ? atrule + '{' + str + '}' : str)
+      str = "#{css_selector}{#{str}}"
+      put_raw(atrule ? "#{atrule}{#{str}}" : str)
     end
 
     postponed.each do |prop|
@@ -157,8 +152,8 @@ class NanoCSS
       end
 
       @renderer[:prefixes].each do |prefix|
-        raw_key_frames = prelude.sub('@keyframes', "@#{prefix}keyframes") + "{#{str}}"
-        if @client
+        raw_key_frames = "#{prelude.sub('@keyframes', "@#{prefix}keyframes")}{#{str}}"
+        if RUBY_ENGINE == 'opal'
           ksh = @renderer[:ksh]
           `ksh.appendChild(document.createTextNode(raw_key_frames))`
         else
@@ -171,20 +166,18 @@ class NanoCSS
     put(nil, keyframes, prelude)
   end
 
-  def put_raw(raw_css_rule)
-    @client ? put_raw_client(raw_css_rule) : put_raw_ssr(raw_css_rule)
-  end
-
-  def put_raw_ssr(raw_css_rule)
-    @renderer[:raw] << raw_css_rule
-  end
-
-  def put_raw_client(raw_css_rule)
-    # .insertRule() is faster than .appendChild(), that's why we use it in PROD.
-    # But CSS injected using .insertRule() is not displayed in Chrome Devtools
-    sheet = @renderer[:sh].JS[:sheet]
-    # Unknown pseudo-selectors will throw, this try/catch swallows all errors.
-    `sheet.insertRule(raw_css_rule, sheet.cssRules.length)` rescue nil
+  if RUBY_ENGINE == 'opal'
+    def put_raw(raw_css_rule)
+      # .insertRule() is faster than .appendChild(), that's why we use it in PROD.
+      # But CSS injected using .insertRule() is not displayed in Chrome Devtools
+      sheet = @renderer[:sh].JS[:sheet]
+      # Unknown pseudo-selectors will throw, this try/catch swallows all errors.
+      `sheet.insertRule(raw_css_rule, sheet.cssRules.length)` rescue nil
+    end
+  else
+    def put_raw(raw_css_rule)
+      @renderer[:raw] << raw_css_rule
+    end
   end
 
   # addons
@@ -193,16 +186,16 @@ class NanoCSS
 
   def rule(css, block = nil)
     block = block || hash(css)
-    block = @renderer[:pfx] + block
-    put('.' + block, css)
+    block = "#{@renderer[:pfx]}#{block}"
+    put(".#{block}", css)
 
-    ' ' + block
+    " #{block}"
   end
 
   # sheet
 
   def delete_from_sheet(rule_name)
-    selector_rule_name = "._" + rule_name + "-"
+    selector_rule_name = "._#{rule_name}-"
     if renderer[:sh] && renderer[:sh].JS[:sheet]
       sheet = renderer[:sh].JS[:sheet]
       css_rules = sheet.JS[:cssRules]
@@ -256,7 +249,7 @@ class NanoCSS
           result.push(sel)
         else
           parents.each do |parent|
-            result.push(parent + ' ' + sel)
+            result.push("#{parent} #{sel}")
           end
         end
       end

data/lib/preact/component.rb

@@ -1,7 +1,7 @@
 module Preact
   class Component
     extend Preact::PropDeclarationMixin
-    include Preact::Elements
+    include Preact::HtmlElements
     include Preact::ComponentResolution
 
     class << self
@@ -115,16 +115,7 @@ module Preact
     attr_reader :props
     attr_reader :state
 
-    if RUBY_ENGINE != 'opal'
-      attr_accessor :__d
-      attr_accessor :__s
-      attr_accessor :__v
-      attr_accessor :_dirty
-      attr_accessor :_next_state
-    end
-
     def initialize(props, context)
-      @development = Isomorfeus.development?
       @self_class = self.class
 
       if RUBY_ENGINE == 'opal'

data/lib/preact/component_resolution.rb

@@ -11,10 +11,15 @@ module Preact::ComponentResolution
       %x{
         let constant;
         let sc = self.$class();
+        // disable stack traces here for improved performance
+        // if const cannot be found, the orignal method_mising will throw with stacktrace
+        Opal.config.enable_stack_trace = false
         try {
           constant = sc.$const_get(component_name);
         } catch(err) {
-          let module_names = sc.$to_s().split("::");
+          let module_names;
+          if (sc.$$full_name) { module_names = sc.$$full_name.split("::"); }
+          else { module_names = sc.$to_s().split("::"); }
           let module_name;
           for (let i = module_names.length - 1; i > 0; i--) {
             module_name = module_names.slice(0, i).join('::');
@@ -23,6 +28,8 @@ module Preact::ComponentResolution
               break;
             } catch(err) { }
           }
+        } finally {
+          Opal.config.enable_stack_trace = true
         }
         if (constant) {
           let last = args[args.length-1];

data/lib/preact/context.rb

@@ -6,15 +6,20 @@ module Preact
     end
 
     class Provider < Preact::Component
+      class << self
+        attr_reader :root_context
+      end
+
       attr_reader :context_id
       attr_reader :subs
 
       def initialize(props, context)
+        @self_class_root = self.class.root_context
         unless props.key?(:value)
-          props = props.merge({ value: get_default_value })
+          props = props.merge({ value: @self_class_root.value })
         end
         super(props, context)
-        @context_id = get_context_id
+        @context_id = @self_class_root.context_id
         @child_context = { @context_id => self }
         @getChildContext = true
         @subs = []
@@ -51,18 +56,7 @@ module Preact
       @Provider = Class.new(Provider)
       @value = default_value
       @context_id = Preact._context_id
-      ctx = self
-      @Provider.define_method(:get_default_value) do
-        ctx.value
-      end
-      @Provider.define_method(:get_context_id) do
-        ctx.context_id
-      end
-    end
-
-    def Consumer(&block)
-      block_result = block.call(@value)
-      Preact.render_buffer.last.push(block_result) if block_result
+      @Provider.instance_variable_set(:@root_context, self)
     end
   end
 end

data/lib/preact/html_elements.rb

@@ -0,0 +1,58 @@
+module Preact::HtmlElements
+  # https://html.spec.whatwg.org/multipage/indices.html#elements-3
+  SUPPORTED_HTML_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 hgroup hr html
+    i iframe img input ins
+    kbd
+    label legend li link
+    main map mark math menu meta meter
+    nav noscript
+    object ol optgroup option output
+    p picture pre progress
+    q
+    rp rt ruby
+    s samp script section select slot small source span strong style sub summary sup svg
+    table tbody td template textarea tfoot th thead time title tr track
+    u ul
+    var video
+    wbr
+  ]
+
+  if RUBY_ENGINE == 'opal'
+    SUPPORTED_HTML_ELEMENTS.each do |element|
+      define_method(element.underscore.JS.toUpperCase()) do |props = nil, &block|
+        %x{
+          const op = Opal.Preact;
+          const opr = op.render_buffer;
+          if (typeof block === 'function') op.$create_element.$$p = block.$to_proc();
+          opr[opr.length-1].push(op.$create_element(element, props, nil));
+        }
+      end
+    end
+  else
+    SUPPORTED_HTML_ELEMENTS.each do |element|
+      define_method(element.to_s.underscore.upcase.to_sym) do |props = nil, &block|
+        Preact._render_element(element, props, &block)
+      end
+    end
+  end
+
+  def GPE(arg, &block)
+    if block_given?
+      el = block.call
+      return el if el
+    end
+    Preact.render_buffer.last.pop
+  end
+
+  def RPE(el)
+    Preact.render_buffer.last.push(el)
+    nil
+  end
+end

data/lib/preact/math_ml_elements.rb

@@ -0,0 +1,53 @@
+module Preact::MathMlElements
+  # https://www.w3.org/TR/MathML3/appendixi.html#index.elem
+  SUPPORTED_MATH_ML_ELEMENTS = %w[
+    abs and annotation apply approx arccos arccosh arccot arccoth arccsc arccsch
+    arcsec arcsech arcsin arcsinh arctan arctanh arg
+    bind bvar
+    card cartesianproduct cbytes ceiling cerror ci cn codomain complexes compose
+    condition conjugate cos cosh cot coth cs csc csch csymbol curl
+    declare degree determinant diff divergence divide domain domainofapplication
+    emptyset eq equivalent eulergamma exists exp exponentiale
+    factorial factorof false floor fn forall
+    gcd geq grad gt
+    ident image imaginary imaginaryi implies in infinity int integers intersect
+    interval inverse lambda laplacian lcm leq limit list ln log logbase
+    lowlimit lt
+    maction maligngroup malignmark matrix matrixrow max mean median
+    menclose merror mfenced mfrac mglyph mi min minus mlabeledtr mlongdiv
+    mmultiscripts mn mo mode moment momentabout mover mpadded mphantom
+    mprescripts mroot mrow ms mscarries mscarry msgroup msline mspace msqrt
+    msrow mstack mstyle msub msubsup msup mtable mtd mtext mtr munder
+    munderover
+    naturalnumbers neq none not notanumber notin notprsubset notsubset
+    or otherwise outerproduct
+    partialdiff pi piece piecewise plus power primes product prsubset
+    quotient
+    rationals real reals reln rem root
+    scalarproduct sdev sec sech selector semantics sep set setdiff share sin
+    sinh subset sum
+    tan tanh tendsto times transpose true
+    union uplimit
+    variance vector vectorproduct
+    xor
+  ]
+
+  if RUBY_ENGINE == 'opal'
+    SUPPORTED_MATH_ML_ELEMENTS.each do |element|
+      define_method(element.underscore.JS.toUpperCase()) do |props = nil, &block|
+        %x{
+          const op = Opal.Preact;
+          const opr = op.render_buffer;
+          if (typeof block === 'function') op.$create_element.$$p = block.$to_proc();
+          opr[opr.length-1].push(op.$create_element(element, props, nil));
+        }
+      end
+    end
+  else
+    SUPPORTED_MATH_ML_ELEMENTS.each do |element|
+      define_method(element.to_s.underscore.upcase.to_sym) do |props = nil, &block|
+        Preact._render_element(element, props, &block)
+      end
+    end
+  end
+end

data/lib/preact/module_component_resolution.rb

@@ -13,9 +13,16 @@ class Module
         let constant = null;
         let c = component_name[0];
         if (c == c.toUpperCase()) {
+          // disable stack traces here for improved performance
+          // if const cannot be found, the orignal method_mising will throw with stacktrace
+          Opal.config.enable_stack_trace = false;
           try {
             constant = self.$const_get(component_name);
-          } catch(err) { }
+          } catch(err) {
+            // nothing
+          } finally {
+            Opal.config.enable_stack_trace = true;
+          }
           if (constant) {
             let last = args[args.length-1];
             #{`Opal.Preact`._render_element(`constant`, `(last === undefined || last === null) ? nil : last`, &block)};

data/lib/preact/{elements.rb → svg_elements.rb}

@@ -1,34 +1,33 @@
-module Preact::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[
+module Preact::SvgElements
+  # https://www.w3.org/TR/SVG11/eltindex.html + https://www.w3.org/TR/SVG2/eltindex.htm
+  SUPPORTED_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
+    h1 h2 h3 h4 h5 h6 head header hgroup hr html
     i iframe img input ins
     kbd
     label legend li link
-    main map mark meta meter
+    main map mark math menu meta meter
     nav noscript
     object ol optgroup option output
-    p param picture pre progress
+    p picture pre progress
     q
-    rp rt rtc ruby
-    s samp script section select small source span strong style sub summary sup
+    rp rt ruby
+    s samp script section select slot small source span strong style sub summary sup svg
     table tbody td template textarea tfoot th thead time title tr track
     u ul
     var video
     wbr
-    altGlyph altGlyphDef altGlyphItem animate animateColor animateMotion animateTransform
+    altGlyph altGlyphDef altGlyphItem animate animateColor animateMotion animateTransform audio
     circle clipPath color-profile cursor
-    defs desc
+    defs desc discard
     ellipse
     feBlend feColorMatrix feComponentTransfer feComposite feConvolveMatrix feDiffuseLighting
-    feDisplacementMap feDistantLight feFlood feFuncA feFuncB feFuncG feFuncR feGaussianBlur
+    feDisplacementMap feDistantLight feDropShadow 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
@@ -39,15 +38,15 @@ module Preact::Elements
     marker mask metadata missing-glyph mpath
     path pattern polygon polyline
     radialGradient rect
-    script set stop style svg switch symbol
-    text textPath tref tspan
-    use
+    set stop switch symbol
+    text textPath tspan
+    unknown use
     view vkern
   ]
 
   if RUBY_ENGINE == 'opal'
-    SUPPORTED_HTML_AND_SVG_ELEMENTS.each do |element|
-      define_method(element.underscore.upcase) do |props = nil, &block|
+    SUPPORTED_SVG_ELEMENTS.each do |element|
+      define_method(element.underscore.JS.toUpperCase()) do |props = nil, &block|
         %x{
           const op = Opal.Preact;
           const opr = op.render_buffer;
@@ -57,23 +56,10 @@ module Preact::Elements
       end
     end
   else
-    SUPPORTED_HTML_AND_SVG_ELEMENTS.each do |element|
+    SUPPORTED_SVG_ELEMENTS.each do |element|
       define_method(element.to_s.underscore.upcase.to_sym) do |props = nil, &block|
         Preact._render_element(element, props, &block)
       end
     end
   end
-
-  def GPE(arg, &block)
-    if block_given?
-      el = block.call
-      return el if el
-    end
-    Preact.render_buffer.last.pop
-  end
-
-  def RPE(el)
-    Preact.render_buffer.last.push(el)
-    nil
-  end
 end