isomorfeus-preact 10.9.0 → 22.9.0.rc2

data/lib/isomorfeus-preact.rb

@@ -1,102 +1,80 @@
+require 'base64'
+require 'stringio'
 if RUBY_ENGINE == 'opal'
-  require 'isomorfeus-redux'
-  require 'active_support/core_ext/string'
-  require 'zeitwerk'
-
-  if on_browser?
-    require 'browser/event'
-    require 'browser/event_target'
-    require 'browser/delegate_native'
-    require 'browser/element' # depends on 'preact'
-    require 'browser/history'
-  end
+  require 'iso_uri'
+else
+  require 'uri'
+  require 'oj'
+end
+require 'data_uri'
+require 'isomorfeus-transport'
+require 'isomorfeus-redux'
+require 'isomorfeus-i18n'
+require 'isomorfeus/preact/config'
+require 'browser/history'
+require 'browser/location'
 
-  require 'isomorfeus/preact/config'
-  if on_browser? && `window?.history`
+if RUBY_ENGINE == 'opal'
+  require 'browser/event'
+  require 'browser/event_target'
+  require 'browser/delegate_native'
+  require 'browser/element'
+  require 'browser/document'
+  require 'browser/window'
+
+  if `window?.history`
     Isomorfeus.browser_history = Browser::History.new(`window.history`)
+    Isomorfeus.browser_location = Browser::Location.new(`window.location`)
   end
-  # allow mounting of components
-  require 'isomorfeus/top_level'
-
-  # nanocss
-  require 'nano_css'
-
-  # preact
-  require 'preact/version'
-  require 'preact'
-  require 'preact/ref'
-
-  # props
-  require 'isomorfeus/props/validate_hash_proxy'
-  require 'isomorfeus/props/validator'
-  require 'lucid_prop_declaration/mixin'
-  require 'preact/params'
-  require 'preact/props'
-
-  # HTML Elements and Fragment support
-  require 'preact/elements'
-
-  # Preact Wrappers
-  require 'preact/context_wrapper'
-  require 'preact/native_constant_wrapper'
-
-  # Preact::Component
-  # make modules available
-  module Preact
-    module Component
-    end
-    module FunctionComponent
-    end
-  end
+else
+  Isomorfeus.browser_history = Browser::History.new
+end
 
-  require 'preact/component/api'
-  require 'preact/component/callbacks'
-  require 'preact/component/initializer'
-  require 'preact/component/native_component_constructor'
-  require 'preact/state'
-  require 'preact/component/mixin'
-  require 'preact/component/base'
-
-  # component resolution
-  require 'preact/component_resolution'
-  class Object
-    include Preact::ComponentResolution
-  end
+# allow mounting of components
+require 'isomorfeus/top_level'
 
-  # make modules available
-  module LucidApp
-  end
-  module LucidComponent
-  end
-  module LucidFunc
-  end
-  # init LucidApplicationContext (Store Provider and Consumer)
-  require 'lucid_app/context'
-  LucidApp::Context.create_application_context
+# nanocss
+require 'nano_css'
 
-  # init auto loader
-  Isomorfeus.zeitwerk = Zeitwerk::Loader.new
-  Isomorfeus.zeitwerk.push_dir('isomorfeus_preact')
-  require_tree 'isomorfeus_preact', autoload: true
+# preact
+require 'preact'
 
+# props
+require 'isomorfeus/props/validate_hash_proxy'
+require 'isomorfeus/props/validator'
+require 'preact/prop_declaration_mixin'
+
+# component resolution
+require 'preact/component_resolution'
+require 'preact/module_component_resolution'
+
+# HTML Elements and Fragment support
+require 'preact/elements'
+# Component
+require 'preact/component'
+# Context
+require 'preact/context'
+
+Preact::Context.create_application_contexts
+
+# Router Components
+require 'link'
+require 'redirect'
+require 'route'
+require 'router'
+require 'switch'
+
+# LucidComponent
+require 'lucid_component'
+
+# LucidApp
+require 'lucid_app'
+
+if RUBY_ENGINE == 'opal'
+  # init auto loader
   Isomorfeus.zeitwerk.push_dir('components')
 else
-  require 'uri'
-  require 'oj'
-  require 'opal'
-  require 'opal/compiler'
-  require 'opal-activesupport'
-  require 'opal-zeitwerk'
-  require 'isomorfeus-speednode'
-  require 'isomorfeus-asset-manager'
-  require 'isomorfeus-redux'
-  require 'preact/version'
-  require 'isomorfeus/preact/config'
-
-  # props
-  require 'isomorfeus/props/validate_hash_proxy'
-  require 'isomorfeus/props/validator'
-  require 'lucid_prop_declaration/mixin'
+  require 'isomorfeus/preact/version'
 
   if Isomorfeus.development?
     require 'net/http'
@@ -104,28 +82,25 @@ else
   end
 
   Isomorfeus.server_side_rendering = true
+  NanoCSS.instance = NanoCSS.new(nil)
 
-  # caches
+  # cache
   require 'isomorfeus/preact/thread_local_component_cache'
-  # require 'isomorfeus/preact/memcached_component_cache'
-  # require 'isomorfeus/preact/redis_component_cache'
-  require 'isomorfeus/preact_view_helper'
+
+  require 'isomorfeus/preact/ssr'
+  require 'isomorfeus/preact/view_helper'
 
   Isomorfeus.component_cache_init do
     Isomorfeus::ThreadLocalComponentCache.new
   end
 
-  Opal.append_path(__dir__.untaint)
-
-  require 'concurrent/atomic/atomic_fixnum'
-  require 'concurrent/atomic/reentrant_read_write_lock'
-  require 'zeitwerk'
+  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(path) unless IsoOpal.paths.include?(path)
 
-  Isomorfeus.zeitwerk = Zeitwerk::Loader.new
-  Isomorfeus.zeitwerk_lock = Concurrent::ReentrantReadWriteLock.new if Isomorfeus.development?
-  # nothing to push_dir to zeitwerk here, as components are available only within browser/SSR
+  Isomorfeus.zeitwerk.push_dir(File.expand_path(File.join('app', 'components')))
 
   require 'isomorfeus/preact/imports'
-  Isomorfeus.node_paths << File.expand_path(File.join(File.dirname(__FILE__), '..', 'node_modules'))
-  Isomorfeus::Preact::Imports.add
+  Isomorfeus::PreactImports.add
 end

data/lib/link.rb

@@ -0,0 +1,52 @@
+class Link < Preact::Component
+  EVENT_PUSH_STATE = "pushState"
+  EVENT_REPLACE_STATE = "replaceState"
+
+  def initialize(props, context)
+    super(props, context)
+    if RUBY_ENGINE == 'opal'
+      if `typeof window !== "undefined"`
+        @history = `window.history`
+      else
+        @history = `{ length: 1, state: null, scrollRestoration: "auto", pushState: function(e,t,n){}, replaceState: function(e,t,n){} }`
+      end
+    end
+    @rbase = nil
+  end
+
+  def navigate
+    rto = props[:to] || props[:href]
+    m = props[:replace] ? EVENT_REPLACE_STATE : EVENT_PUSH_STATE
+    `#@history[m](null, "", rto[0] === "~" ? rto.slice(1) : #@rbase + rto)`
+    @context[:router][:callback]&.call
+  end
+
+  def handle_click(event)
+    # ignores the navigation when clicked using right mouse button or
+    # by holding a special modifier key: ctrl, command, win, alt, shift
+    if event.ctrl? || event.meta? || event.alt? || event.shift? || event.button > 0
+      event.prevent
+      return
+    end
+    props[:on_click]&.call(event)
+    event.prevent unless event.prevented?
+    navigate
+  end
+
+  render do
+    to = props[:to]
+    href = props[:href] || to
+    children = props[:children]
+    @rbase = @context[:router][:base]
+    extra_props = {
+      # handle nested routers and absolute paths
+      href: href[0] === "~" ? href.slice(1) : @rbase + href,
+      on_click: call(:handle_click),
+      to: nil
+    }
+    # wraps children in `a` if needed
+    a = children.is_a?(VNode) ? children : Preact.create_element("a", props)
+    Preact.clone_element(a, extra_props)
+  end
+end
+Link.context_type = RouterContext

data/lib/lucid_app.rb

@@ -0,0 +1,117 @@
+class LucidApp < LucidComponent
+  class << self
+    def inherited(base)
+      base.context_type = nil
+    end
+
+    def render(&block)
+      define_method(:render) do
+        pr = Preact.render_buffer
+        block_result = _internal_render(pr, &block)
+        children = pr.pop
+        if Preact.is_renderable?(block_result)
+          children.push(block_result)
+        end
+        Preact.create_element(LucidApplicationContext.Provider, state[:_app_ctx], children)
+      end
+    end
+
+    def component_will_unmount(&block)
+      define_method(:component_will_unmount) do
+        instance_exec do
+          Isomorfeus.store.unsubscribe(@unsubscriber)
+        end
+        instance_exec(&block)
+        nil
+      end
+    end
+
+    # theme
+
+    def theme(theme_hash = nil, &block)
+      theme_hash = block.call if block_given?
+      @theme_hash = theme_hash if theme_hash
+      @theme_hash
+    end
+    alias_method :theme=, :theme
+
+    if RUBY_ENGINE == 'opal'
+      def css_theme
+        return {} unless @theme_hash
+        return @css_theme if @css_theme
+        component_name = self.to_s
+        rule_name = component_name.gsub(':', '_')
+        i = NanoCSS.instance
+        i.delete_from_sheet(rule_name)
+        i.renderer[:hydrate_force_put] = true
+        @css_theme = i.sheet(@theme_hash, rule_name)
+      end
+    else
+      def css_theme
+        return {} unless @theme_hash
+        t = thread_css_theme
+        return t if t
+        component_name = self.to_s
+        rule_name = component_name.gsub(':', '_')
+        i = NanoCSS.instance
+        i.delete_from_sheet(rule_name)
+        i.renderer[:hydrate_force_put] = true
+        thread_css_theme = i.sheet(@theme_hash, rule_name)
+      end
+
+      def thread_css_theme_key
+        @thread_css_theme_key ||= "#{self.to_s.underscore}_css_theme".to_sym
+      end
+
+      def thread_css_theme
+        Thread.current[thread_css_theme_key]
+      end
+
+      def thread_css_theme=(s)
+        Thread.current[thread_css_theme_key] = s
+      end
+    end
+  end
+
+  attr_reader :theme
+
+  def initialize(props, context)
+    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 }}})
+
+    lai = self
+    if RUBY_ENGINE == 'opal'
+      @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,
+          iso_theme: lai.theme }}})
+      end
+    end
+  end
+
+  def should_component_update?(next_props, next_state, _next_context)
+    return true if @props != next_props || @state != next_state
+    false
+  end
+
+  if RUBY_ENGINE == 'opal'
+    def component_will_unmount
+      Isomorfeus.store.unsubscribe(@unsubscriber)
+    end
+  end
+end

data/lib/lucid_component.rb

@@ -0,0 +1,154 @@
+class LucidComponent < Preact::Component
+  include LucidI18nMixin
+
+  class << self
+    def inherited(base)
+      base.context_type = LucidApplicationContext
+    end
+
+    def render(&block)
+      define_method(:render) do
+        pr = Preact.render_buffer
+        block_result = _internal_render(pr, &block)
+        if Preact.is_renderable?(block_result)
+          pr.pop.push(block_result)
+        else
+          pr.pop
+        end
+      end
+    end
+
+    def while_loading(&block)
+      @while_loading_block = block
+    end
+
+    # styles
+
+    def styles(styles_hash = nil, &block)
+      styles_hash = block.call if block_given?
+      @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(':', '_')
+        i = NanoCSS.instance
+        i.delete_from_sheet(rule_name)
+        i.renderer[:hydrate_force_put] = true
+        @css_styles = i.sheet(@styles_hash, rule_name)
+      end
+    else
+      def css_styles
+        return {} unless @styles_hash
+        s = thread_css_styles
+        return s if s
+        component_name = self.to_s
+        rule_name = component_name.gsub(':', '_')
+        i = NanoCSS.instance
+        i.delete_from_sheet(rule_name)
+        i.renderer[:hydrate_force_put] = true
+        thread_css_styles = i.sheet(@styles_hash, rule_name)
+      end
+
+      def thread_css_styles_key
+        @thread_css_styles_key ||= "#{self.to_s.underscore}_css_styles".to_sym
+      end
+
+      def thread_css_styles
+        Thread.current[thread_css_styles_key]
+      end
+
+      def thread_css_styles=(s)
+        Thread.current[thread_css_styles_key] = s
+      end
+    end
+  end
+
+  attr_reader :styles
+
+  def initialize(props, context)
+    super(props, context)
+    @class_name = @self_class.to_s
+    if RUBY_ENGINE == 'opal'
+      @while_loading_block = `#@self_class.while_loading_block`
+    else
+      @while_loading_block = @self_class.instance_variable_get(:@while_loading_block)
+    end
+    # styles
+    @styles = @self_class.css_styles
+  end
+
+  def _internal_render(pr, &block)
+    pr.push([])
+    outer_loading = Isomorfeus.something_loading?
+    ex = nil
+    begin
+      block_result = instance_exec(&block)
+    rescue => e
+      ex = e
+    end
+    if Isomorfeus.something_loading?
+      STDERR.puts "#{@class_name} component still loading ...\n#{ex.message}\n#{ex.backtrace&.join("\n")}" if ex && Isomorfeus.development?
+      pr[pr.length-1].clear
+      block_result = @while_loading_block ? instance_exec(&@while_loading_block) : Preact.create_element('div')
+    elsif ex
+      raise ex
+    end
+    Isomorfeus.something_loading! if outer_loading
+    block_result
+  end
+
+  def should_component_update?(next_props, next_state, next_context)
+    return true if @props != next_props || @state != next_state || @context != next_context
+    false
+  end
+
+  def current_user
+    Isomorfeus.current_user
+  end
+
+  def history
+    Isomorfeus.browser_history
+  end
+
+  def location
+    Isomorfeus.browser_location
+  end
+
+  def app_state
+    @context.dig(:iso_store, :application_state)
+  end
+
+  def set_app_state(update)
+    action = { type: 'APPLICATION_STATE', state: update }
+    Isomorfeus.store.deferred_dispatch(action)
+  end
+
+  def class_state
+    res = @context.dig(:iso_store, :class_state, @class_name)
+    return res if res
+    {}
+  end
+
+  def set_class_state(update)
+    action = { type: 'CLASS_STATE', class: @class_name, state: update }
+    Isomorfeus.store.deferred_dispatch(action)
+  end
+
+  def local_store
+    LocalStore
+  end
+
+  def session_store
+    SessionStore
+  end
+
+  def theme
+    @context[:iso_theme]
+  end
+end