porous 0.1.0 → 0.2.0

data/lib/porous/server.rb

@@ -1,44 +1,42 @@
+# frozen_string_literal: true
+
 module Porous
   class Server
-    class Router
-      include Porous::Router
+    def initialize(*_args)
+      setup_rack_app
     end
 
-    class Application
-      include Porous::Component
-
-      def render
-        html do
-          head do
-            title do
-              text props[:title]
-            end
-            meta charset: 'UTF-8'
-            meta name: 'viewport', content: 'width=device-width, initial-scale=1.0'
-            script src: 'https://cdn.tailwindcss.com'
-          end
-
-          body class: 'bg-gray-50 dark:bg-gray-900' do
-            component Router, props: { path: props[:path], query: props[:query] }
-          end
-        end
-      end
-    end
-
-    def initialize(*args, &block)
+    # rubocop:disable Metrics/MethodLength, Metrics/AbcSize
+    def setup_rack_app
       @rack = Rack::Builder.new do
+        use Rack::ContentLength
         use Rack::Static, urls: ['/static']
+        use Rack::CommonLogger
+        use Rack::ShowExceptions
+        use Rack::Lint
+        use Rack::TempfileReaper
+
         run do |env|
-          [
-            200,
-            { 'content-type' => 'text/html' },
-            [
-              Application.new(title: 'Porous Web', path: env['PATH_INFO'], query: env['QUERY_STRING']).to_s
-            ]
-          ]
+          router = Porous::Router.new path: env['PATH_INFO'], query: env['QUERY_STRING']
+          route = router.find_route
+          page = route[:component].new(route[:params])
+
+          [200, { 'content-type' => 'text/html' }, [
+            Porous::Application.new(
+              title: page.page_title,
+              description: page.page_description,
+              path: env['PATH_INFO'],
+              query: env['QUERY_STRING']
+            ).to_s
+          ]]
+        rescue Porous::InvalidRouteError => e
+          [404, { 'content-type' => 'text/plain' }, ["404 Page not found\n", e.message]]
+        rescue Porous::Error => e
+          [500, { 'content-type' => 'text/plain' }, ["500 Internal Server Error\n", e.message]]
         end
       end
     end
+    # rubocop:enable Metrics/MethodLength, Metrics/AbcSize
 
     def call(*args)
       @rack.call(*args)

data/lib/porous/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Porous
-  VERSION = "0.1.0"
+  VERSION = '0.2.0'
 end

data/lib/porous.rb

@@ -2,9 +2,11 @@
 
 require 'opal'
 require 'opal-browser'
-Opal.append_path File.expand_path('../../opal', __FILE__)
-
 require 'opal-virtual-dom'
+
+Opal.append_path File.expand_path('../opal', __dir__)
+Opal.append_path File.expand_path(Dir.pwd)
+
 require 'listen'
 
 require 'porous/version'
@@ -24,7 +26,10 @@ Dir.glob(File.join('{components,pages}', '**', '*.rb')).each do |relative_path|
   require File.expand_path("#{Dir.pwd}/#{relative_path}")
 end
 
-require 'porous/server'
+require 'porous/application'
+require 'porous/server' unless RUBY_ENGINE == 'opal'
 
 module Porous
+  class Error < StandardError; end
+  class InvalidRouteError < Error; end
 end

data/lib/virtual_dom/dom.rb

@@ -1,15 +1,17 @@
+# frozen_string_literal: true
+
 module VirtualDOM
   module DOM
-    HTML_TAGS = %w(a abbr address area article aside audio b base bdi bdo big blockquote body br
+    HTML_TAGS = %w[a abbr address area article aside audio b base bdi bdo big 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 keygen label legend li link
                    main map mark menu menuitem meta meter nav noscript object ol optgroup option
                    output p param picture pre progress q rp rt ruby s samp script section select
                    small source span strong style sub summary sup table tbody td textarea tfoot th
-                   thead time title tr track u ul var video wbr)
+                   thead time title tr track u ul var video wbr].freeze
 
-    SVG_TAGS = %w(svg path)
+    SVG_TAGS = %w[svg path].freeze
 
     (HTML_TAGS + SVG_TAGS).each do |tag|
       define_method tag do |params = {}, &block|
@@ -38,7 +40,8 @@ module VirtualDOM
       self
     end
 
-    def method_missing(clazz, params = {}, &block)
+    # rubocop:disable Style/MissingRespondToMissing, Metrics/MethodLength, Metrics/AbcSize
+    def method_missing(klass, params = {}, &block)
       return unless @__last_virtual_node__
       return unless @__virtual_nodes__
 
@@ -51,28 +54,29 @@ module VirtualDOM
       end
 
       class_params = @__last_virtual_node__.params.delete(:className)
-      method_params = if clazz.end_with?('!')
-                        { id: clazz[0..-2],
+      method_params = if klass.end_with?('!')
+                        { id: klass[0..-2],
                           class: merge_string(class_params, params[:class]) }
                       else
-                        { class: merge_string(class_params, params[:class], clazz.gsub('_', '-').gsub('--', '_')) }
+                        { class: merge_string(class_params, params[:class], klass.to_s.gsub('_', '-').gsub('--', '_')) }
                       end
       params = @__last_virtual_node__.params.merge(params).merge(method_params)
       process_tag(@__last_virtual_node__.name, params, block, children)
     end
+    # rubocop:enable Style/MissingRespondToMissing, Metrics/MethodLength, Metrics/AbcSize
 
     def merge_string(*params)
       arr = []
       params.each do |string|
         next unless string
 
-        arr << string.split(' ')
+        arr << string.split
       end
       arr.join(' ')
     end
 
     def process_params(params)
-      params.dup.each do |k, v|
+      params.dup.each_key do |k|
         case k
         when 'for'
           params['htmlFor'] = params.delete('for')

data/lib/virtual_dom/virtual_node.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 module VirtualDOM
   class VirtualNode
     attr_reader :name, :params, :children
@@ -15,7 +17,7 @@ module VirtualDOM
     def to_s_params
       return unless @params.any?
 
-      ' ' + @params.map { |k, v| "#{k}=\"#{v}\"" }.join(' ')
+      " #{@params.map { |k, v| "#{k}=\"#{v}\"" }.join(" ")}"
     end
 
     def to_s_children

data/opal/porous/application.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Porous
+  class Application
+    include Porous::Component
+
+    inject Porous::Router, as: :router
+
+    def render
+      body class: 'bg-gray-50 dark:bg-gray-900' do
+        component router
+      end
+    end
+  end
+end

data/opal/porous/component/class_methods.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 module Porous
   module Component
     module ClassMethods
@@ -5,10 +7,10 @@ module Porous
         new.mount_to(element)
       end
 
-      def inject(clazz, opts = {})
-        method_name = opts[:as] || clazz.to_s.downcase
+      def inject(klass, opts = {})
+        method_name = opts[:as] || klass.to_s.downcase
         @injections ||= {}
-        @injections[method_name] = clazz
+        @injections[method_name] = klass
       end
 
       def injections

data/opal/porous/component/render.rb

@@ -1,27 +1,30 @@
-odule Porous
-	module Component
-		module Render
-			def render
-				raise Error, "Implement #render in #{self.class} component"
-			end
+# frozen_string_literal: true
 
-			def render_if_root
-				return unless @virtual_dom && @root_node
-				new_virtual_dom = render_virtual_dom
-				diff = VirtualDOM.diff @virtual_dom, new_virtual_dom
-				VirtualDOM.patch @root_node, diff
-				@virtual_dom = new_virtual_dom
-			end
+module Porous
+  module Component
+    module Render
+      def render
+        raise Error, "Implement #render in #{self.class} component"
+      end
 
-			def before_render; end;
+      def render_if_root
+        return unless @virtual_dom && @root_node
 
-			def render_virtual_dom
-				before_render
-				@cache_component_counter = 0
-				@__virtual_nodes__ = []
-				render
-				to_vnode
-			end
-		end
-	end
+        new_virtual_dom = render_virtual_dom
+        diff = VirtualDOM.diff @virtual_dom, new_virtual_dom
+        VirtualDOM.patch @root_node, diff
+        @virtual_dom = new_virtual_dom
+      end
+
+      def before_render; end
+
+      def render_virtual_dom
+        before_render
+        @cache_component_counter = 0
+        @__virtual_nodes__ = []
+        render
+        to_vnode
+      end
+    end
+  end
 end

data/opal/porous/component/virtual.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 module Porous
   module Component
     module Virtual

data/opal/porous/component.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 module Porous
   module Component
     include VirtualDOM::DOM
@@ -17,7 +19,7 @@ module Porous
       inject
       @virtual_dom = render_virtual_dom
       @root_node = VirtualDOM.create @virtual_dom
-      Browser.append_child element, @root_node
+      element.replace_with @root_node
       self
     end
 

data/opal/porous/injection.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 module Porous
   module Injection
     def init; end
@@ -20,23 +22,25 @@ module Porous
 
     def init_injections
       @injections ||= {}
-      self.class.injections.each do |name, clazz|
-        if clazz.included_modules.include?(Porous::Injection)
-          @injections[name] = clazz
-                              .new
-                              .with_root_component(@root_component)
-        else
-          raise Error, "Invalid #{clazz} class, should mixin Porous::Injection"
+      self.class.injections.each do |name, klass|
+        unless klass.included_modules.include?(Porous::Injection)
+          raise Error, "Invalid #{klass} class, should mixin Porous::Injection"
         end
+
+        @injections[name] = klass.new.with_root_component(@root_component)
       end
-      @injections.each do |key, instance|
+      @injections.each_value do |instance|
         instance.inject
         instance.init
       end
     end
 
     def render!
-      Browser.animation_frame do
+      if Browser::AnimationFrame.supported?
+        animation_frame do
+          @root_component.render_if_root
+        end
+      else
         @root_component.render_if_root
       end
     end

data/opal/porous/page.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Porous
+  module Page
+    # Define the route according to the Router::Routes rules
+    def route!
+      path = route
+      @route ||= Routes.new.tap do |routes|
+        routes.route path, to: self.class
+      end
+    end
+
+    def page_title = 'Porous Web'
+    def page_description = nil
+  end
+end

data/opal/porous/router.rb

@@ -0,0 +1,153 @@
+# frozen_string_literal: true
+
+module Porous
+  # rubocop:disable Metrics/ClassLength
+  class Router
+    include Porous::Component
+
+    attr_reader :params
+
+    def initialize
+      @routes = Routes.new
+      # Extract the routes from all Pages
+      # Object.descendants.each { |klass| puts klass if klass.is_a?(Class) }
+      Object.descendants.select { |c| c.is_a?(Class) && c.included_modules.include?(Porous::Page) }.each do |klass|
+        # puts "Included in: #{klass}"
+        # next if klass.to_s.start_with? '#<Class:' # skip singleton classes
+
+        @routes.combine klass.new.route!
+      end
+
+      raise Error, 'No Porous::Page components found!' if @routes.routes.empty?
+
+      find_route
+      parse_url_params
+      add_listeners
+    end
+
+    # Handle anchor tags with router (requires router to be injected)
+    Component.module_eval do
+      unless respond_to?(:__a)
+        alias_method :__a, :a
+        define_method(:a) do |params = {}, &block|
+          if params['href'].include?('//') || params['target'] == '_blank'
+            # Retain behaviour
+          else
+            href = params['href']
+            params[:onclick] = lambda { |e|
+              e.prevent
+              raise Error, 'No router to handle navigation. Did you `inject Porous::Router`' unless router
+
+              router.go_to(href)
+            }
+          end
+          __a(params, &block)
+        end
+      end
+    end
+
+    def add_listeners
+      return unless Browser::History.supported?
+
+      $window.on(:popstate) do
+        find_route
+        parse_url_params
+        render!
+      end
+      $window.on(:hashchange) do
+        find_route
+        parse_url_params
+        render!
+      end
+    end
+
+    def route(*params, &block)
+      @routes.route(*params, &block)
+    end
+
+    def find_route
+      @routes.routes.each do |route|
+        next unless path.match(route[:regex])
+        return go_to(url_for(route[:redirect_to])) if route[:redirect_to]
+
+        return @route = route
+      end
+      raise Error, "Can't find route for url"
+    end
+
+    def find_component(route)
+      call_on_enter_callback(route)
+      @component_props = route[:component_props]
+      route[:component]
+    end
+
+    def render
+      component find_component(@route), props: @component_props if @route
+    end
+
+    def call_on_enter_callback(route)
+      return unless route[:on_enter]
+
+      return unless route[:on_enter].respond_to?(:call)
+
+      route[:on_enter].call
+    end
+
+    def go_to(path)
+      $window.history.push path
+      find_route
+      parse_url_params
+      render!
+      false
+    end
+
+    def parse_url_params
+      @params = component_url_params
+      return if query.empty?
+
+      query[1..].split('&').each do |param|
+        key, value = param.split('=')
+        @params[Browser.decode_uri_component(key)] = Browser.decode_uri_component(value)
+      end
+    end
+
+    def component_url_params
+      @route[:params].zip(path.match(@route[:regex])[1..]).to_h
+    end
+
+    def url_for(name, params = nil)
+      route = @routes.routes.find do |r|
+        case name
+        when String
+          r[:name] == name || r[:path] == name
+        when Object
+          r[:component] == name
+        else
+          false
+        end
+      end
+      route ? url_with_params(route, params) : raise(Error, "Route '#{name}' not found.")
+    end
+
+    def query
+      $window.location.query
+    end
+
+    def path
+      $window.location.path
+    end
+
+    def current_url?(name)
+      path == url_for(name, params)
+    end
+
+    def url_with_params(route, params)
+      path = route[:path]
+      params&.each do |key, value|
+        path = path.gsub(":#{key}", value.to_s)
+      end
+      path
+    end
+  end
+  # rubocop:enable Metrics/ClassLength
+end

data/opal/porous/routes.rb

@@ -0,0 +1,94 @@
+# frozen_string_literal: true
+
+module Porous
+  class Routes
+    attr_reader :routes
+
+    def initialize(parent = nil)
+      @parent = parent
+      @routes = []
+    end
+
+    # rubocop:disable Metrics/AbcSize
+    def route(*params, &block)
+      path = params.first.gsub(%r{^/}, '')
+      path = @parent ? "#{@parent}/#{path}" : "/#{path}"
+
+      add_subroutes(path, &block) if block_given?
+
+      if params.last[:redirect_to]
+        add_redirect(path, params.last[:redirect_to])
+      else
+        add_route(params.last[:as], path, params.last[:to], params.last[:props], params.last[:on_enter])
+      end
+    end
+    # rubocop:enable Metrics/AbcSize
+
+    def validate_component(component)
+      raise Error, 'Component not exists' unless component
+
+      return if component.include?(Porous::Component)
+
+      raise Error,
+            "Invalid #{component} class, should mixin Porous::Component"
+    end
+
+    def add_redirect(path, redirect_to)
+      @routes << {
+        path: path,
+        redirect_to: redirect_to
+      }.merge(build_params_and_regex(path))
+    end
+
+    def add_route(name, path, component, component_props, on_enter)
+      validate_component(component)
+      @routes << {
+        path: path,
+        component: component,
+        component_props: component_props,
+        on_enter: on_enter,
+        name: name || component.to_s.gsub(/(.)([A-Z])/, '\1_\2').downcase
+      }.merge(build_params_and_regex(path))
+    end
+
+    def add_subroutes(path, &block)
+      subroutes = Routes.new(path)
+      subroutes.instance_exec(&block)
+      @routes += subroutes.routes
+    end
+
+    # rubocop:disable Metrics/AbcSize, Metrics/MethodLength
+    def build_params_and_regex(path)
+      regex = ['^']
+      params = []
+      parts = path.split('/')
+      regex << '\/' if parts.empty?
+      parts.each do |part|
+        next if part.empty?
+
+        regex << '\/'
+        case part[0]
+        when ':'
+          params << part[1..]
+          regex << '([^\/]+)'
+        when '*'
+          params << part[1..]
+          regex << '(.*)'
+          break
+        else
+          regex << part
+        end
+      end
+      regex << '$'
+      {
+        regex: Regexp.new(regex.join),
+        params: params
+      }
+    end
+    # rubocop:enable Metrics/AbcSize, Metrics/MethodLength
+
+    def combine(other)
+      @routes += other.routes
+    end
+  end
+end

data/opal/porous.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 require 'opal'
 require 'native'
 require 'promise'
@@ -8,3 +10,32 @@ require 'console'
 
 require 'virtual_dom'
 require 'virtual_dom/support/browser'
+
+VirtualDOM::DOM::HTML_TAGS = %w[a abbr address area article aside audio b base bdi bdo big 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 keygen label legend li link
+                                main map mark menu menuitem meta meter nav noscript object ol optgroup option
+                                output p param picture pre progress q rp rt ruby s samp script section select
+                                small source span strong style sub summary sup table tbody td textarea tfoot th
+                                thead time title tr track u ul var video wbr svg path].freeze
+
+require 'porous/injection'
+require 'porous/component/class_methods'
+require 'porous/component/render'
+require 'porous/component/virtual'
+require 'porous/component'
+require 'porous/page'
+
+require 'porous/routes'
+require 'porous/router'
+require 'porous/application'
+
+module Porous
+  class Error < StandardError; end
+  class InvalidRouteError < Error; end
+end
+
+$document.ready do
+  Porous::Application.mount_to($document.body)
+end