porous 0.2.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 605209154f6a44bc2c7a84934bf661de4c721a2a5ed5f3b9c21556064ac1672e
-  data.tar.gz: 27eb154e0be5f0b524e723355c1544541b26207f36e49eb372cea7d06e24cdd5
+  metadata.gz: 87cf02a737a26d181f89e3ee42f73574a30473e490b4ce045d76960e3dbc6fa5
+  data.tar.gz: 679a28921b7fc66630d2ec21b75543cd7dc4906d3f77230a052ff9fb08ab1281
 SHA512:
-  metadata.gz: f4244bbc93b9c53b55e486d52420653ce8ffd5ee5e8d642b91e25aafc439ea2c48b5622c84167083b93c05ef424f5ea2b5964b7a4696665e92ffab68d13a43b9
-  data.tar.gz: 58e28a76335c29b19f57c8b68e9c1c6bd00136b753025b230bcabf4a041a872e0efe8a8ebf233a15c7249de018662f4de9c240b27c10701989faeb71231bc866
+  metadata.gz: 7e25b7156a1e9d10c8d66ea198be3ddb3da0a87aa904519b6fbe0c71006e13d33f5840c051114c7a8e8506ce73f033492fb1bc4089506534759b8bc1a86d18e6
+  data.tar.gz: 8da9145c152a0d93d0a2d182f3ade0da334dc9bb898a75483675173f341a3ea42e5fcd1bc8e16b5e949e92b283fc1f845f7772c3fd19e193283d5338a8acd557

data/CHANGELOG.md

@@ -1,7 +1,21 @@
 ## [Planned]
 
-- 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
 

data/README.md

@@ -1,8 +1,8 @@
 # 🧽 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. You write only
+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.
 
@@ -12,7 +12,7 @@ The closest thing to this I could find was [Volt](https://github.com/voltrb/volt
 - 🖥️ 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)
+- 🔥 Hot reloading (via WebSocket push and browser refresh)
 
 ## Design
 

data/lib/porous/application.rb

@@ -18,8 +18,7 @@ module Porous
           end
           meta name: 'description', content: props[:description] if props[:description]
 
-          script src: '/static/dist/application.js'
-          script src: '/static/dist/reload.js'
+          script src: '/static/dist/application.js', id: 'application'
           script src: 'https://cdn.tailwindcss.com'
         end
 

data/lib/porous/cli/build.rb

@@ -15,44 +15,7 @@ module Porous
     desc 'build', 'Build static assets'
     def build
       empty_directory 'static/dist', verbose: false, force: options[:force]
-      transpile
-      live_reload
+      Porous::Server::Builder.new.build
     end
-
-    # rubocop:disable Metrics/BlockLength
-    no_commands do
-      def transpile
-        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

@@ -19,29 +19,34 @@ module Porous
                   default: 'localhost',
                   desc: 'The host address Porous will bind to'
 
-    MONITORING = %w[components pages].freeze
+    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
+                          })
 
-    def server
-      MONITORING.each { |path| FileUtils.mkdir_p path }
-      build
-      start_live_reload
-      Rackup::Server.start environment: 'none', app: Porous::Server.new
-    end
+      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
 
-    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
+      # 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.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/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.2.0'
+  VERSION = '0.3.0'
 end

data/lib/porous.rb

@@ -7,7 +7,7 @@ require 'opal-virtual-dom'
 Opal.append_path File.expand_path('../opal', __dir__)
 Opal.append_path File.expand_path(Dir.pwd)
 
-require 'listen'
+require 'agoo'
 
 require 'porous/version'
 
@@ -27,7 +27,6 @@ Dir.glob(File.join('{components,pages}', '**', '*.rb')).each do |relative_path|
 end
 
 require 'porous/application'
-require 'porous/server' unless RUBY_ENGINE == 'opal'
 
 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)

data/opal/porous/injection.rb

@@ -37,7 +37,7 @@ module Porous
 
     def render!
       if Browser::AnimationFrame.supported?
-        animation_frame do
+        Browser::AnimationFrame.new $window do
           @root_component.render_if_root
         end
       else

data/opal/porous.rb

@@ -11,15 +11,6 @@ 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'
@@ -38,4 +29,24 @@ 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.2.0
+  version: 0.3.0
 platform: ruby
 authors:
 - Exa Stencil
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2024-02-18 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
@@ -117,7 +117,10 @@ files:
 - 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

data/lib/porous/server.rb

@@ -1,45 +0,0 @@
-# frozen_string_literal: true
-
-module Porous
-  class Server
-    def initialize(*_args)
-      setup_rack_app
-    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|
-          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)
-    end
-  end
-end