porous 0.1.0

data/lib/porous/routes.rb

@@ -0,0 +1,86 @@
+module Porous
+  class Routes
+    attr_reader :routes
+
+    def initialize(parent = nil)
+      @parent = parent
+      @routes = []
+    end
+
+    def route(*params, &block)
+      path = params.first.gsub(/^\//, '')
+      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
+
+    def validate_component(component)
+      raise Error, 'Component not exists' unless component
+
+      raise Error,
+            "Invalid #{component} class, should mixin Porous::Component" unless component.include?(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
+
+    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..-1]
+          regex << '([^\/]+)'
+        when '*'
+          params << part[1..-1]
+          regex << '(.*)'
+          break
+        else
+          regex << part
+        end
+      end
+      regex << '$'
+      {
+        regex: Regexp.new(regex.join),
+        params: params
+      }
+    end
+
+    def combine(other)
+      @routes += other.routes
+    end
+  end
+end

data/lib/porous/server.rb

@@ -0,0 +1,47 @@
+module Porous
+  class Server
+    class Router
+      include Porous::Router
+    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)
+      @rack = Rack::Builder.new do
+        use Rack::Static, urls: ['/static']
+        run do |env|
+          [
+            200,
+            { 'content-type' => 'text/html' },
+            [
+              Application.new(title: 'Porous Web', path: env['PATH_INFO'], query: env['QUERY_STRING']).to_s
+            ]
+          ]
+        end
+      end
+    end
+
+    def call(*args)
+      @rack.call(*args)
+    end
+  end
+end

data/lib/porous/version.rb

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

data/lib/porous.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+require 'opal'
+require 'opal-browser'
+Opal.append_path File.expand_path('../../opal', __FILE__)
+
+require 'opal-virtual-dom'
+require 'listen'
+
+require 'porous/version'
+
+require 'porous/injection'
+require 'virtual_dom/virtual_node'
+require 'virtual_dom/dom'
+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'
+
+Dir.glob(File.join('{components,pages}', '**', '*.rb')).each do |relative_path|
+  require File.expand_path("#{Dir.pwd}/#{relative_path}")
+end
+
+require 'porous/server'
+
+module Porous
+end

data/lib/virtual_dom/dom.rb

@@ -0,0 +1,113 @@
+module VirtualDOM
+  module 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_TAGS = %w(svg path)
+
+    (HTML_TAGS + SVG_TAGS).each do |tag|
+      define_method tag do |params = {}, &block|
+        if params.is_a?(String)
+          process_tag(tag, {}, block, params)
+        elsif params.is_a?(Hash)
+          process_tag(tag, params, block)
+        end
+      end
+    end
+
+    def process_tag(tag, params, block, children = [])
+      @__virtual_nodes__ ||= []
+      if block
+        current = @__virtual_nodes__
+        @__virtual_nodes__ = []
+        result = block.call || children
+        vnode = VirtualNode.new(tag, process_params(params),
+                                @__virtual_nodes__.count.zero? ? result : @__virtual_nodes__)
+        @__virtual_nodes__ = current
+      else
+        vnode = VirtualNode.new(tag, process_params(params), children)
+      end
+      @__last_virtual_node__ = vnode
+      @__virtual_nodes__ << @__last_virtual_node__
+      self
+    end
+
+    def method_missing(clazz, params = {}, &block)
+      return unless @__last_virtual_node__
+      return unless @__virtual_nodes__
+
+      @__virtual_nodes__.pop
+      children = []
+
+      if params.is_a?(String)
+        children = [params]
+        params = {}
+      end
+
+      class_params = @__last_virtual_node__.params.delete(:className)
+      method_params = if clazz.end_with?('!')
+                        { id: clazz[0..-2],
+                          class: merge_string(class_params, params[:class]) }
+                      else
+                        { class: merge_string(class_params, params[:class], clazz.gsub('_', '-').gsub('--', '_')) }
+                      end
+      params = @__last_virtual_node__.params.merge(params).merge(method_params)
+      process_tag(@__last_virtual_node__.name, params, block, children)
+    end
+
+    def merge_string(*params)
+      arr = []
+      params.each do |string|
+        next unless string
+
+        arr << string.split(' ')
+      end
+      arr.join(' ')
+    end
+
+    def process_params(params)
+      params.dup.each do |k, v|
+        case k
+        when 'for'
+          params['htmlFor'] = params.delete('for')
+        when 'class'
+          params['className'] = params.delete('class')
+        when 'data'
+          params['dataset'] = params.delete('data')
+        when 'default'
+          params['defaultValue'] = params.delete('default')
+        when /^on/
+          # Events are ignored server-side
+          params.delete k
+        end
+      end
+      params
+    end
+
+    def text(string)
+      @__virtual_nodes__ << string.to_s
+    end
+
+    def to_vnode
+      if @__virtual_nodes__.one?
+        @__virtual_nodes__.first
+      else
+        VirtualNode.new('div', {}, @__virtual_nodes__)
+      end
+    end
+
+    def class_names(hash)
+      class_names = []
+      hash.each do |key, value|
+        class_names << key if value
+      end
+      class_names.join(' ')
+    end
+  end
+end

data/lib/virtual_dom/virtual_node.rb

@@ -0,0 +1,30 @@
+module VirtualDOM
+  class VirtualNode
+    attr_reader :name, :params, :children
+
+    def initialize(name, params = {}, children = [])
+      @name = name
+      @params = params
+      @children = children
+    end
+
+    def to_s
+      "<#{@name}#{to_s_params}>#{to_s_children}</#{@name}>"
+    end
+
+    def to_s_params
+      return unless @params.any?
+
+      ' ' + @params.map { |k, v| "#{k}=\"#{v}\"" }.join(' ')
+    end
+
+    def to_s_children
+      return @children if @children.is_a?(String)
+      return unless @children.any?
+
+      @children
+        .map(&:to_s)
+        .join
+    end
+  end
+end

data/opal/porous/browser.rb

@@ -0,0 +1,37 @@
+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

data/opal/porous/component/class_methods.rb

@@ -0,0 +1,19 @@
+module Porous
+  module Component
+    module ClassMethods
+      def mount_to(element)
+        new.mount_to(element)
+      end
+
+      def inject(clazz, opts = {})
+        method_name = opts[:as] || clazz.to_s.downcase
+        @injections ||= {}
+        @injections[method_name] = clazz
+      end
+
+      def injections
+        @injections || {}
+      end
+    end
+  end
+end

data/opal/porous/component/render.rb

@@ -0,0 +1,27 @@
+odule Porous
+	module Component
+		module Render
+			def render
+				raise Error, "Implement #render in #{self.class} component"
+			end
+
+			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
+
+			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

@@ -0,0 +1,37 @@
+module Porous
+  module Component
+    module Virtual
+      # Memoizes instances of sub-components for re-rendering
+      def cache_component(component, &block)
+        @cache_component ||= {}
+        @cache_component_counter ||= 0
+        @cache_component_counter += 1
+        cache_key = "#{component}-#{@cache_component_counter}"
+        @cache_component[cache_key] || @cache_component[cache_key] = block.call
+      end
+
+      # Used to render nested components
+      def component(comp, opts = {})
+        raise Error, "Component is nil in #{self.class} class" if comp.nil?
+
+        @__virtual_nodes__ ||= []
+        @__virtual_nodes__ << cache_component(comp) do
+          comp = (comp.is_a?(Class) ? comp.new : comp)
+                 .with_root_component(@root_component)
+                 .inject
+          comp.init
+          comp
+        end.with_props(opts[:props] || {}).render_virtual_dom
+        self
+      end
+
+      def hook(mthd)
+        VirtualDOM::Hook.method(method(mthd))
+      end
+
+      def unhook(mthd)
+        VirtualDOM::UnHook.method(method(mthd))
+      end
+    end
+  end
+end

data/opal/porous/component.rb

@@ -0,0 +1,31 @@
+module Porous
+  module Component
+    include VirtualDOM::DOM
+    include Virtual
+    include Render
+    include Injection
+
+    def self.included(base)
+      base.extend Porous::Component::ClassMethods
+    end
+
+    def mount_to(element)
+      raise Error, "Can't mount #{self.class}, target element not found!" unless element
+
+      @root_component = self
+      init_injections
+      inject
+      @virtual_dom = render_virtual_dom
+      @root_node = VirtualDOM.create @virtual_dom
+      Browser.append_child element, @root_node
+      self
+    end
+
+    attr_reader :props
+
+    def with_props(props)
+      @props = props
+      self
+    end
+  end
+end

data/opal/porous/injection.rb

@@ -0,0 +1,44 @@
+module Porous
+  module Injection
+    def init; end
+
+    def with_root_component(component)
+      @root_component = component
+      self
+    end
+
+    def inject
+      @root_component.injections.each do |name, instance|
+        define_singleton_method(name) do
+          instance
+        end
+      end
+      self
+    end
+
+    attr_reader :injections
+
+    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"
+        end
+      end
+      @injections.each do |key, instance|
+        instance.inject
+        instance.init
+      end
+    end
+
+    def render!
+      Browser.animation_frame do
+        @root_component.render_if_root
+      end
+    end
+  end
+end

data/opal/porous.rb

@@ -0,0 +1,10 @@
+require 'opal'
+require 'native'
+require 'promise'
+require 'browser/setup/full'
+
+require 'js'
+require 'console'
+
+require 'virtual_dom'
+require 'virtual_dom/support/browser'

data/sig/porous.rbs

@@ -0,0 +1,4 @@
+module Porous
+  VERSION: String
+  # See the writing guide of rbs: https://github.com/ruby/rbs#guides
+end