porous 0.1.1 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b55c1eaf688f84af5c848e212ab0f5686ca6d6f270a0ef68d35846824af0d716
-  data.tar.gz: 4ca350f60c41896911dba97cd62ec05437ede55ae11d0a6c1fd0e3a68a09281e
+  metadata.gz: 87cf02a737a26d181f89e3ee42f73574a30473e490b4ce045d76960e3dbc6fa5
+  data.tar.gz: 679a28921b7fc66630d2ec21b75543cd7dc4906d3f77230a052ff9fb08ab1281
 SHA512:
-  metadata.gz: a434473bf2ee80768ed88e729ecec2287af5a2596521e4fdb1857e82cff861eaeeba84ac9be5b6afba41340f6de543a7c57e1382e4a6d6e19e85960f0e6ea0c6
-  data.tar.gz: 5ddf2319739891025fac39dfc34d50a379f2403139f6171d95d2488eabf621b22dacad1266c9151af35242dff02210aef15ccc350d3b9f1c782c0c2d585f7a8b
+  metadata.gz: 7e25b7156a1e9d10c8d66ea198be3ddb3da0a87aa904519b6fbe0c71006e13d33f5840c051114c7a8e8506ce73f033492fb1bc4089506534759b8bc1a86d18e6
+  data.tar.gz: 8da9145c152a0d93d0a2d182f3ade0da334dc9bb898a75483675173f341a3ea42e5fcd1bc8e16b5e949e92b283fc1f845f7772c3fd19e193283d5338a8acd557

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,34 @@
 ## [Planned]
 
-- Server-side hot reloading
-- Dynamic page metadata
-- Client-side component rendering
-- Client-side routing
-- Websockets support
+- Production mode
+- Data Abstraction Layer / Object Relational Model
+- Event Model
+- Plugin / Extension system
+
+- Frontend Extensions
+  - Tailwind CSS (tailwind-cli)
+
+- Persistence Extensions
+  - Memory (default)
+	- Disk (file)
+	- Databases (SQLite, PostgreSQL)
+
+## [0.3.0] - 22 February 2024
+
+- WebSockets support
+
+## [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* the code that is *unique to your application* and the engine takes care of the rest!
 
-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.
+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 WebSocket push 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,32 @@
+# 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', id: 'application'
+          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,14 @@ module Porous
 
     namespace :build
 
-    desc 'build', 'Build static assets'
-
-    def build
-      empty_directory 'static/dist', force: options[:force]
-      transpile
+    def self.exit_on_failure?
+      true
     end
 
-    no_commands do
-      def transpile
-        # TODO: Use Opal::Builder to generate pages, components and entities into static/dist
-      end
+    desc 'build', 'Build static assets'
+    def build
+      empty_directory 'static/dist', verbose: false, force: options[:force]
+      Porous::Server::Builder.new.build
     end
   end
 end

data/lib/porous/cli/server.rb

@@ -16,11 +16,37 @@ module Porous
     method_option :host,
                   aliases: :h,
                   type: :string,
-                  default: '127.0.0.1',
+                  default: 'localhost',
                   desc: 'The host address Porous will bind to'
 
-    def server
-      Rackup::Server.start environment: 'development', builder: 'run Porous::Server.new'
+    def server # rubocop:todo Metrics/MethodLength
+      Agoo::Log.configure(dir: '',
+                          console: true,
+                          classic: true,
+                          colorize: true,
+                          states: {
+                            INFO: true,
+                            DEBUG: false,
+                            connect: false,
+                            request: false,
+                            response: false,
+                            eval: true,
+                            push: true
+                          })
+
+      Agoo::Server.init 9292, Dir.pwd, thread_count: 1
+      Agoo::Server.use Rack::ContentLength
+      Agoo::Server.use Rack::Static, urls: ['/static']
+      Agoo::Server.use Rack::ShowExceptions
+
+      # Socket Communication
+      $socket ||= Porous::Server::Socket.new
+      Agoo::Server.handle nil, '/connect', Porous::Server::Connect.new
+      # Server-Side Rendering
+      Agoo::Server.handle nil, '**', Porous::Server::Application.new
+      Agoo::Server.start
+      # Live Reload Builder
+      Server::Builder.new.build.start
     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/cli.rb

@@ -3,6 +3,10 @@
 require 'thor'
 
 require 'porous'
+require 'porous/server/builder'
+require 'porous/server/socket'
+require 'porous/server/connect'
+require 'porous/server/application'
 
 require 'rack'
 require 'rackup/server'

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/application.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Porous
+  module Server
+    class Application
+      MONITORING = %w[components pages].freeze
+
+      def call(env)
+        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
+end

data/lib/porous/server/builder.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+require 'opal/builder_scheduler/sequential'
+
+module Porous
+  module Server
+    class Builder
+      def initialize
+        @build_queue = Queue.new
+        @last_build = nil
+        @latest_change = Dir.glob(File.join('**', '*.rb')).map { |f| File.mtime f }.max
+      end
+
+      def build
+        components = Dir.glob(File.join('**', '*.rb')).map do |relative_path|
+          modified = File.mtime relative_path
+          @latest_change = modified if modified > @latest_change
+          "require '#{relative_path}'"
+        end
+        build_string = "require 'porous'; #{components.join ";"}".gsub '.rb', ''
+        builder = Opal::Builder.new scheduler: Opal::BuilderScheduler::Sequential, cache: false
+        builder.build_str build_string, '(inline)'
+        File.binwrite "#{Dir.pwd}/static/dist/application.js", builder.to_s
+        @last_build = Time.now
+        self
+      end
+
+      # rubocop:disable Metrics/AbcSize
+      def start
+        loop do
+          sleep 0.25
+          next unless @build_queue.empty?
+
+          modified = Dir.glob(File.join('**', '*.rb')).map { |f| File.mtime f }.max
+          next unless modified > @last_build
+
+          @build_queue.push modified
+          # Load for server
+          Dir.glob(File.join('**', '*.rb')).map { |f| load File.expand_path("#{Dir.pwd}/#{f}") }
+
+          # Rebuild for browser
+          Thread.new { build }.join
+
+          # Notify clients
+          $socket.public 'build', @last_build.inspect
+          @build_queue.clear
+        end
+      end
+      # rubocop:enable Metrics/AbcSize
+    end
+  end
+end

data/lib/porous/server/connect.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Porous
+  module Server
+    class Connect
+      # Only used for WebSocket or SSE upgrades.
+      def call(env)
+        if env['rack.upgrade?'].nil?
+          [404, {}, []]
+        else
+          $socket ||= Socket.new
+          env['rack.upgrade'] = $socket
+          [200, {}, []]
+        end
+      end
+    end
+  end
+end

data/lib/porous/server/socket.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module Porous
+  module Server
+    class Socket
+      def initialize
+        @clients = []
+        @mutex = Mutex.new
+      end
+
+      def on_open(client)
+        @mutex.synchronize do
+          @clients << client
+        end
+      end
+
+      def on_close(client)
+        @mutex.synchronize do
+          @clients.delete(client)
+        end
+      end
+
+      def on_drained(_client); end
+
+      def on_message(client, data)
+        client.write("Handler says #{data}")
+      end
+
+      def public(channel, message)
+        output = "#{channel}|#{message}"
+        @mutex.synchronize do
+          @clients.each do |c|
+            c.write output
+          end
+        end
+      end
+    end
+  end
+end

data/lib/porous/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Porous
-  VERSION = '0.1.1'
+  VERSION = '0.3.0'
 end

data/lib/porous.rb

@@ -2,10 +2,12 @@
 
 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 'agoo'
 
 require 'porous/version'
 
@@ -24,7 +26,7 @@ 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'
 
 module Porous
   class Error < StandardError; end

data/lib/virtual_dom/dom.rb

@@ -11,8 +11,9 @@ module VirtualDOM
                    small source span strong style sub summary sup table tbody td textarea tfoot th
                    thead time title tr track u ul var video wbr].freeze
 
-    SVG_TAGS = %w[svg path].freeze
-
+    SVG_TAGS = %w[animate animateMotion animateTransform circle clipPath defs desc ellipse filter
+                  foreignObject g image line linearGradient marker mask metadata mpath path pattern
+                  polygon polyline radialGradient rect set stop svg switch symbol textPath tspan use view].freeze
     (HTML_TAGS + SVG_TAGS).each do |tag|
       define_method tag do |params = {}, &block|
         if params.is_a?(String)
@@ -55,10 +56,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?
+        Browser::AnimationFrame.new $window 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,43 @@ require 'console'
 
 require 'virtual_dom'
 require 'virtual_dom/support/browser'
+
+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)
+  Browser::Socket.new 'ws://localhost:9292/connect' do
+    on :open do |_e|
+      $console.info 'Connected to server!'
+    end
+
+    on :message do |e|
+      channel, content = e.data.split '|'
+      case channel
+      when 'build'
+        if content == 'started'
+          $console.log 'New build started…'
+        else
+          $console.log 'Reloading scripts…'
+          $document.location.reload
+        end
+      else
+        $console.log "Received #{e.data}"
+      end
+    end
+  end
+end

metadata

@@ -1,29 +1,29 @@
 --- !ruby/object:Gem::Specification
 name: porous
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.3.0
 platform: ruby
 authors:
 - Exa Stencil
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2024-02-17 00:00:00.000000000 Z
+date: 2024-02-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
-  name: listen
+  name: agoo
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '3.0'
+        version: '2.15'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '3.0'
+        version: '2.15'
 - !ruby/object:Gem::Dependency
   name: opal-browser
   requirement: !ruby/object:Gem::Requirement
@@ -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,20 +113,27 @@ 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
-- lib/porous/server.rb
+- lib/porous/server/application.rb
+- lib/porous/server/builder.rb
+- lib/porous/server/connect.rb
+- lib/porous/server/socket.rb
 - lib/porous/version.rb
 - 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/lib/porous/server.rb

@@ -1,72 +0,0 @@
-# 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
-
-    def setup_rack_app
-      @rack = Rack::Builder.new do
-        use Rack::Static, urls: ['/static']
-        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]]
-        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
-
-    def call(*args)
-      @rack.call(*args)
-    end
-  end
-end

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