porous 0.1.1 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b55c1eaf688f84af5c848e212ab0f5686ca6d6f270a0ef68d35846824af0d716
-  data.tar.gz: 4ca350f60c41896911dba97cd62ec05437ede55ae11d0a6c1fd0e3a68a09281e
+  metadata.gz: 605209154f6a44bc2c7a84934bf661de4c721a2a5ed5f3b9c21556064ac1672e
+  data.tar.gz: 27eb154e0be5f0b524e723355c1544541b26207f36e49eb372cea7d06e24cdd5
 SHA512:
-  metadata.gz: a434473bf2ee80768ed88e729ecec2287af5a2596521e4fdb1857e82cff861eaeeba84ac9be5b6afba41340f6de543a7c57e1382e4a6d6e19e85960f0e6ea0c6
-  data.tar.gz: 5ddf2319739891025fac39dfc34d50a379f2403139f6171d95d2488eabf621b22dacad1266c9151af35242dff02210aef15ccc350d3b9f1c782c0c2d585f7a8b
+  metadata.gz: f4244bbc93b9c53b55e486d52420653ce8ffd5ee5e8d642b91e25aafc439ea2c48b5622c84167083b93c05ef424f5ea2b5964b7a4696665e92ffab68d13a43b9
+  data.tar.gz: 58e28a76335c29b19f57c8b68e9c1c6bd00136b753025b230bcabf4a041a872e0efe8a8ebf233a15c7249de018662f4de9c240b27c10701989faeb71231bc866

data/.rubocop.yml

@@ -13,6 +13,9 @@ Style/StringLiteralsInInterpolation:
 Style/Documentation:
   Enabled: false
 
+Style/GlobalVars:
+  Enabled: false
+
 Layout/LineLength:
   Max: 120
 

data/CHANGELOG.md

@@ -1,15 +1,20 @@
 ## [Planned]
 
-- Server-side hot reloading
-- Dynamic page metadata
-- Client-side component rendering
-- Client-side routing
-- Websockets support
+- WebSockets support
+- Production mode
+
+## [0.2.0] - 18 February 2024
+
+- Server-side hot reloading (browser reloads on changes)
+- Dynamic page metadata (title and description)
+- Less noisy logging (silence logging for Rack::Static)
+- Client-side component rendering (sans SVG support)
+- Client-side routing / navigation
 - Client-side hot reloading
 
 ## [0.1.1] - 17 February 2024
 
-- Server-side reloading
+- Server-side reloading (server requests reflect changes)
 
 ## [0.1.0] - 15 February 2024
 

data/README.md

@@ -1,11 +1,19 @@
-# Porous
+# 🧽 Porous
 
-Porous is a web engine that uses isomorphic Ruby components to build a Progressive Web App. Its use is analogous to a web framework, but the approach is entirely different.
+Porous is a web engine that uses isomorphic Ruby components to build a Progressive Web App. Its use is analogous to a web framework, but the approach is entirely different. You write only
 
 This project is a work-in-progress and is not yet even in the Proof of Concept phase. However, if you are interested in a full-stack, everything included solution, that only requires you to use one language (that is arguably easy and enjoyable to write) then feel free to follow this project.
 
 The closest thing to this I could find was [Volt](https://github.com/voltrb/volt) or [Silica](https://github.com/youchan/silica), neither of which are active or match the overall development flow I'm looking for.
 
+## Current Features
+
+- 🙅 No bundled runtime (only code unique to your app needs to be in your repository)
+- 🖥️ Server-side rendering (server responds with the entire initial page populated for SEO)
+- 💻 Client-side rendering (application bundle is served and interactions and subsequent pages are rendered client-side)
+- 🌄 Serves static files (from `static` folder)
+- 🔥 Hot reloading (via HTTP polling and browser refresh)
+
 ## Design
 
 Applications are composed of `Page`s which are in turn composed of `Component`s. Data is persisted as `Entity`s in configurable store options (memory, disk, database). Client-server communication occurs as `Event`s over WebSockets.
@@ -16,7 +24,7 @@ A page is conceptually similar to what would be rendered when visiting a specifi
 
 ### Components
 
-A component is any composable unit of code responsible for rendering markup, potentially based on some state. This is somewhat equivalent to Web Components, in that it can also have some behaviour attached. But it can also simply be based to remove code duplication. Essentially any markup that has behaviour attached or would otherwise create code duplication should probably be in a Components.
+A component is any composable unit of code responsible for rendering markup, potentially based on some state. This is somewhat equivalent to Web Components, in that it can also have some behaviour attached. But it can also simply be used to remove code duplication. Essentially any markup that has behaviour attached or would otherwise create code duplication should probably be in Components.
 
 ### Entities
 
@@ -36,11 +44,13 @@ Porous is not a framework. You don't build an application with it as a dependenc
 
 Porous is still pre-alpha and so is not ready for usage yet, but the general idea is that you would define your application's entities, pages, components and events in Ruby scripts structured in a specific way. Then you would simply run `porous` while pointing it to that folder and it will spin up a Rack-compatible web server for you to use.
 
-To start a new Porous project simply `gem install porous` using whichever Ruby environment you want to use (Ruby 3.0 minimum). Then change to that directory and run:
+> ⚠️ Expect any and all APIs to change radically until version 1.0! Hence why it won't be documented or properly tested until things settle to a more stable state.
+
+To start a new Porous project simply `gem install porous` using whichever Ruby environment you want to use (Ruby 3.0+). Then change to that directory and run:
 
     $ porous server
 
-By default Porous will run at `loclahost:9292`. Now you can edit `pages/home.rb` or add more pages. Files you modify will be reloaded so you can simply refresh the page in your browser. Hot-reloading will be coming later once WebSockets support is implemented.
+By default Porous will run at `localhost:9292`. Now you can edit `pages/home.rb` or add more pages. Files you modify will be hot-reloaded so you can simply open the page in your browser and edit the file. Hot-reloading will be improved once WebSockets support is implemented.
 
 ### Running examples
 
@@ -66,4 +76,4 @@ Everyone interacting in the Porous project's codebases, issue trackers, chat roo
 
 ## Acknowledgements
 
-I'd like to thank Michał Kalbarczyk ([fazibear](https://github.com/fazibear)) for his work done on [Inesita](https://github.com/inesita-rb/inesita) and his [VirtualDOM wrapper](https://github.com/fazibear/opal-virtual-dom) which served as the starting point for my implementation of Porous.
+I'd like to thank Michał Kalbarczyk ([fazibear](https://github.com/fazibear)) for his work done on [Inesita](https://github.com/inesita-rb/inesita) and his [VirtualDOM wrapper](https://github.com/fazibear/opal-virtual-dom) which served as the starting point for my implementation of Porous. While my final approach may deviate significantly from theirs, having code to review and a workable starting point was invaluable.

data/lib/porous/application.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Porous
+  class Application
+    include Porous::Component
+
+    # rubocop:disable Metrics/AbcSize
+    def render
+      html do
+        head do
+          meta charset: 'UTF-8'
+          meta name: 'viewport', content: 'width=device-width, initial-scale=1.0'
+
+          if props[:title]
+            title do
+              text props[:title]
+            end
+          end
+          meta name: 'description', content: props[:description] if props[:description]
+
+          script src: '/static/dist/application.js'
+          script src: '/static/dist/reload.js'
+          script src: 'https://cdn.tailwindcss.com'
+        end
+
+        body class: 'bg-gray-50 dark:bg-gray-900' do
+          component Porous::Router, props: { path: props[:path], query: props[:query] }
+        end
+      end
+    end
+    # rubocop:enable Metrics/AbcSize
+  end
+end

data/lib/porous/cli/build.rb

@@ -8,17 +8,51 @@ module Porous
 
     namespace :build
 
-    desc 'build', 'Build static assets'
+    def self.exit_on_failure?
+      true
+    end
 
+    desc 'build', 'Build static assets'
     def build
-      empty_directory 'static/dist', force: options[:force]
+      empty_directory 'static/dist', verbose: false, force: options[:force]
       transpile
+      live_reload
     end
 
+    # rubocop:disable Metrics/BlockLength
     no_commands do
       def transpile
-        # TODO: Use Opal::Builder to generate pages, components and entities into static/dist
+        components = Dir.glob(File.join('{components,pages}', '**', '*.rb')).map do |relative_path|
+          "require '#{relative_path}'"
+        end
+        build_string = "require 'porous'; #{components.join ";"}".gsub '.rb', ''
+        builder = Opal::Builder.new
+        builder.build_str build_string, '(inline)'
+        File.binwrite "#{Dir.pwd}/static/dist/application.js", builder.to_s
+      end
+
+      # rubocop:disable Metrics/MethodLength
+      def live_reload
+        timestamp = Time.now.to_i.to_s
+        File.write "#{Dir.pwd}/static/dist/timestamp", timestamp
+        builder = Opal::Builder.new
+        script = <<-BROWSER
+          $document.ready do
+            every 0.1 do
+              Browser::HTTP.get('/static/dist/timestamp').then do |response|
+                return unless response.success?
+                timestamp = response.text.to_i
+                TIMESTAMP ||= timestamp
+                $document.location.reload if TIMESTAMP < timestamp
+              end
+            end
+          end
+        BROWSER
+        builder.build_str script, '(inline)'
+        File.binwrite "#{Dir.pwd}/static/dist/reload.js", builder.to_s
       end
+      # rubocop:enable Metrics/MethodLength
     end
+    # rubocop:enable Metrics/BlockLength
   end
 end

data/lib/porous/cli/server.rb

@@ -16,11 +16,32 @@ module Porous
     method_option :host,
                   aliases: :h,
                   type: :string,
-                  default: '127.0.0.1',
+                  default: 'localhost',
                   desc: 'The host address Porous will bind to'
 
+    MONITORING = %w[components pages].freeze
+
     def server
-      Rackup::Server.start environment: 'development', builder: 'run Porous::Server.new'
+      MONITORING.each { |path| FileUtils.mkdir_p path }
+      build
+      start_live_reload
+      Rackup::Server.start environment: 'none', app: Porous::Server.new
+    end
+
+    no_commands do
+      def start_live_reload
+        opts = { only: /\.rb$/, relative: true }
+        @listener = Listen.to(*MONITORING, opts) do |modified, added, _removed|
+          # Load for server
+          (modified + added).each do |file|
+            load File.expand_path("#{Dir.pwd}/#{file}")
+          end
+          # Rebuild for browser
+          Thread.new { build }
+        end
+        @listener.start
+        at_exit { @listener.stop }
+      end
     end
   end
 end

data/lib/porous/cli/template/pages/home.rb

@@ -5,6 +5,8 @@ class Home
   include Porous::Component
 
   def route = '/'
+  def page_title = 'Porous Web | Home'
+  def page_description = 'Landing page generated by Porous'
 
   # rubocop:disable Metrics, Layout/LineLength
   def render
@@ -23,7 +25,7 @@ class Home
           div class: 'flex flex-col items-start space-y-3 sm:space-x-4 sm:space-y-0 sm:items-center sm:flex-row' do
             a href: 'https://github.com/exastencil/porous', target: '_blank', rel: 'noopener',
               class: 'group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-md bg-indigo-600 px-6 font-medium text-neutral-200 transition hover:scale-110' do
-              span 'Get Started'
+              span 'Get Started 🧽'
               div class: 'absolute inset-0 flex h-full w-full justify-center [transform:skew(-12deg)_translateX(-100%)] group-hover:duration-1000 group-hover:[transform:skew(-12deg)_translateX(100%)]' do
                 div class: 'relative h-full w-8 bg-white/20'
               end

data/lib/porous/injection.rb

@@ -22,14 +22,12 @@ module Porous
 
     def init_injections
       @injections ||= {}
-      self.class.injections.each do |name, clazz|
-        unless clazz.included_modules.include?(Porous::Injection)
-          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] = clazz
-                            .new
-                            .with_root_component(@root_component)
+        @injections[name] = klass.new.with_root_component(@root_component)
       end
       @injections.each_value do |instance|
         instance.inject

data/lib/porous/logger.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module Porous
+  class Logger < Rack::CommonLogger
+    def log(env, status, response_headers, began_at)
+      super unless env['PATH_INFO'].start_with? 'static'
+    end
+  end
+end

data/lib/porous/page.rb

@@ -9,5 +9,8 @@ module Porous
         routes.route path, to: self.class
       end
     end
+
+    def page_title = 'Porous Web'
+    def page_description = nil
   end
 end

data/lib/porous/router.rb

@@ -100,11 +100,11 @@ module Porous
     end
 
     def query
-      @props ? @props[:query] : '' # Browser.query
+      @props ? @props[:query] : ''
     end
 
     def path
-      @props ? @props[:path] : '/' # @props[:path] # Browser.path
+      @props ? @props[:path] : '/'
     end
 
     def current_url?(name)

data/lib/porous/server.rb

@@ -1,69 +1,42 @@
 # frozen_string_literal: true
 
 module Porous
-  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 Porous::Router, props: { path: props[:path], query: props[:query] }
-        end
-      end
-    end
-  end
-
   class Server
-    MONITORING = %w[components pages].freeze
-
     def initialize(*_args)
-      @queue = Queue.new
-      start_live_reload
       setup_rack_app
     end
 
-    def start_live_reload
-      MONITORING.each { |path| FileUtils.mkdir_p path }
-      opts = {
-        only: /\.rb$/,
-        relative: true
-      }
-      @listener = Listen.to(*MONITORING, opts) do |modified, added, _removed|
-        (modified + added).each do |file|
-          load File.expand_path("#{Dir.pwd}/#{file}")
-        end
-        setup_rack_app
-      end
-      @listener.start
-      at_exit { @listener.stop }
-    end
-
+    # 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|
-          # Build a router to check for a valid route
-          Porous::Router.new path: env['PATH_INFO'], query: env['QUERY_STRING']
-          [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]]
+          [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]]
+          [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.1'
+  VERSION = '0.2.0'
 end

data/lib/porous.rb

@@ -2,9 +2,11 @@
 
 require 'opal'
 require 'opal-browser'
+require 'opal-virtual-dom'
+
 Opal.append_path File.expand_path('../opal', __dir__)
+Opal.append_path File.expand_path(Dir.pwd)
 
-require 'opal-virtual-dom'
 require 'listen'
 
 require 'porous/version'
@@ -24,7 +26,8 @@ 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

data/lib/virtual_dom/dom.rb

@@ -55,10 +55,10 @@ module VirtualDOM
 
       class_params = @__last_virtual_node__.params.delete(:className)
       method_params = if klass.end_with?('!')
-                        { id: clazz[0..-2],
+                        { id: klass[0..-2],
                           class: merge_string(class_params, params[:class]) }
                       else
-                        { class: merge_string(class_params, params[:class], klass.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)

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

@@ -7,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.rb

@@ -19,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

@@ -36,7 +36,11 @@ module Porous
     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

@@ -10,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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: porous
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.2.0
 platform: ruby
 authors:
 - Exa Stencil
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2024-02-17 00:00:00.000000000 Z
+date: 2024-02-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: listen
@@ -99,6 +99,7 @@ files:
 - Rakefile
 - exe/porous
 - lib/porous.rb
+- lib/porous/application.rb
 - lib/porous/cli.rb
 - lib/porous/cli/build.rb
 - lib/porous/cli/new.rb
@@ -112,6 +113,7 @@ files:
 - lib/porous/component/render.rb
 - lib/porous/component/virtual.rb
 - lib/porous/injection.rb
+- lib/porous/logger.rb
 - lib/porous/page.rb
 - lib/porous/router.rb
 - lib/porous/routes.rb
@@ -120,12 +122,15 @@ files:
 - lib/virtual_dom/dom.rb
 - lib/virtual_dom/virtual_node.rb
 - opal/porous.rb
-- opal/porous/browser.rb
+- opal/porous/application.rb
 - opal/porous/component.rb
 - opal/porous/component/class_methods.rb
 - opal/porous/component/render.rb
 - opal/porous/component/virtual.rb
 - opal/porous/injection.rb
+- opal/porous/page.rb
+- opal/porous/router.rb
+- opal/porous/routes.rb
 - sig/porous.rbs
 homepage: https://github.com/exastencil/porous
 licenses:

data/opal/porous/browser.rb

@@ -1,39 +0,0 @@
-# frozen_string_literal: true
-
-module Porous
-  module Browser
-    module_function
-
-    Window = JS.global
-    Document = Window.JS[:document]
-    AddEventListener = Window.JS[:addEventListener]
-
-    if Native(Window.JS[:requestAnimationFrame])
-      def animation_frame(&block)
-        Window.JS.requestAnimationFrame(block)
-      end
-    else
-      def animation_frame(&block)
-        block.call
-      end
-    end
-
-    def ready?(&block)
-      AddEventListener.call('load', block)
-    end
-
-    def body
-      Document.JS[:body]
-    end
-
-    def append_child(node, new_node)
-      node = node.to_n unless native?(node)
-      new_node = new_node.to_n unless native?(new_node)
-      node.JS.appendChild(new_node)
-    end
-
-    def query_element(css)
-      Document.JS.querySelector(css)
-    end
-  end
-end