server_component 0.3.0 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9bead1c946447ad4a8fec276be086f00c650c519c05aa8c8c9e5ca47d5b47015
-  data.tar.gz: 407725a376a34d739c9bd6e6ae1582abe5b82d14496a473d4ff1a93f0dbd6b68
+  metadata.gz: 4e2df6ac9d580c8c3caa04ef86a853ca4ecc5c4c1a527c5ab2a31e27e3f38e4d
+  data.tar.gz: ea199011564cddee7a37c342d1e4fcddb3d11b23021de8cf629ea4a0d1916b1e
 SHA512:
-  metadata.gz: 0631f5f4c76228277c471ebd80592210f50c5d0b5ff46cc2da25ea2672b921e8da64dda6d857c672a767a469d25c40554e084c10976c9c210058ad75347a5e1d
-  data.tar.gz: 908494d1f9e3b908a083a3af30ad397ea50998d85f5aeee9b32c356d934cc77b4fed1a6610c76598db82f06313e2dfee02d50291353e6d3e83d7f527f10df5cc
+  metadata.gz: 37e464b972ed2782ea3c0995711780de2ed383696a5bbf82feca5e9404de3cfbf23d507bfea11aba909b02feb9c8085164089e9966324684e45c78e9e3a236d9
+  data.tar.gz: 61a058355d9254f10d46d18b82b3979d38fdc99046f2665f45e7b6e24ef29b99d684eed47f7f0d6e919a7f8c0b036821d0cf3be415cc593f69547682e0cedcb1

data/.rubocop.yml

@@ -41,6 +41,8 @@ Style/AccessModifierDeclarations:
 Style/NumericPredicate:
   Enabled: false
 
+Style/ClassAndModuleChildren:
+  Enabled: false
+
 Metrics/BlockLength:
-  Exclude:
-    - 'spec/**/*'
+  Enabled: false

data/Gemfile

@@ -9,6 +9,7 @@ gem 'execjs'
 gem 'stitch-rb'
 
 group :development, :test do
+  gem 'ammeter'
   gem 'capybara', '~> 2.18.0'
   gem 'pry-byebug'
   gem 'rspec-rails', '~> 3.8'
@@ -16,4 +17,5 @@ group :development, :test do
   gem 'selenium-webdriver'
   gem 'simplecov'
   gem 'webpacker', '4.0.0.rc.2'
+  gem 'yard'
 end

data/README.md

@@ -1,11 +1,21 @@
 [![CircleCI](https://circleci.com/gh/effective-spa/server_component_rails.svg?style=svg)](https://circleci.com/gh/effective-spa/server_component_rails) [![codecov](https://codecov.io/gh/effective-spa/server_component_rails/branch/master/graph/badge.svg)](https://codecov.io/gh/effective-spa/server_component_rails) [![Maintainability](https://api.codeclimate.com/v1/badges/3a8af74f091ff7c3dbf4/maintainability)](https://codeclimate.com/github/effective-spa/server_component_rails/maintainability) [![Gem Version](https://badge.fury.io/rb/server_component.svg)](https://badge.fury.io/rb/server_component)
 
+
 # ServerComponent
 
-ServerComponent makes it possible to implement React component as Rails controller.
-This gem is designed to be used with [server_component](https://github.com/effective-spa/server_component) NPM package.
+**ServerComponent** is a painless framework for React apps.
+
+*This gem is designed to be used with **npm package version of [server_component](https://github.com/effective-spa/server_component)**.*
+
+### Why?
+
+SPAs do not always require much-highly scalable technology stack. There need alternatives for those who want to keep less code with retaining expressiveness of SPA. ServerComponent is a smart one of them.
 
-## Installation
+The following image depicts how it reduces the complexity among modules. You can get more development efficiency with keeping advantages of SPA as you choose ServerComponent.
+
+![figure](https://github.com/effective-spa/server_component_rails/raw/master/figure.png)
+
+### Installation
 
 Add this line to your application's Gemfile and run `bundle install`:
 
@@ -19,18 +29,12 @@ Run this command to initialize configuration file and base classes.
 $ rails generate server_component:install
 ```
 
-Add the following line into `config/application.rb`.
-
-```rb
-config.autoload_paths << Rails.root.join('component_routers')
-```
-
-## Getting Started
+## 🚀 Getting Started
 
 Add a new component controller:
 
 ```rb
-class CounterComponentController < ServerComponent::ComponentController
+class Api::CounterComponentController < ServerComponent::Base
   def self.initial_state
     {
       count: 0
@@ -53,11 +57,11 @@ class CounterComponentController < ServerComponent::ComponentController
 end
 ```
 
-Specify in a component router:
+Add new lines into routes.rb:
 
 ```rb
-class ApiComponentRouter < ServerComponent::ComponentRouter
-  component :counter
+component_scope :api do
+  component :counter, actions: [:increment, :decrement]
 end
 ```
 
@@ -92,7 +96,7 @@ class CounterBody extends Component {
 class Main extends Component {
   render() {
     return (
-      <ServerComponent.Use at="/react" name="api">
+      <ServerComponent.Use name="api">
         <CounterContainer>
           <CounterBody />
         </CounterContainer>
@@ -104,6 +108,8 @@ class Main extends Component {
 ReactDOM.render(<Main />, document.getElementById('root'));
 ```
 
+(Note that the conventional Rails' meta tags for CSRF token are needed.)
+
 If you don't use decorators, here's an alternative:
 
 ```js
@@ -116,15 +122,128 @@ const CounterBody = consume(class extends Component {
 }, 'counter');
 ```
 
-## API Documentation
 
-(TODO)
+## 🎓 Usage
+
+### Write view files with [Jsrb](https://github.com/effective-spa/jsrb)
 
-## Contributing
+[Jsrb](https://github.com/effective-spa/jsrb), a view handler that generates JavaScript, is included in this library. Because the action of the server component merely renders executable JavaScript code instead of JSON, you have to build code safely. But don't be serious! Most of state updating functions won't be much complicated. Using `Jsrb`, you can easily and safely construct JavaScript code.
+
+#### Example
+
+In `controllers/books_component_controller.rb`:
+
+```rb
+action :create
+def create
+  @book = Book.new(book_params)
+  @book.save
+  render :js
+end
+```
+
+In `views/books_component/create.js.jsrb`:
+
+```rb
+# Note that set_state must take `js` as an argument.
+set_state(js) do |s|
+  s.total { |prev| prev + 1 }
+  s.books do |books|
+    books.concat id: @book.id, title: @book.title
+  end
+end
+```
+
+### Fallback to conventional JSON handling
+
+The component controller is just a Rails controller, so you can render JSON in a conventional manner. The client side handles response by Content-Type and status properly, so you don't have to reconstruct the status handling logic.
+
+#### Example
+
+In `controllers/books_component_controller.rb`:
+
+```rb
+action :create
+def create
+  @book = Book.new(book_params)
+  if @book.save
+    render json: { book: { id: @book.id, title: @book.title }
+  else
+    render json: { errors: @book.error_messages }, status: :unprocessable_entity
+  end
+end
+```
+
+In frontend:
+
+```js
+@server_component('book')
+class BookContainer extends Component {
+  // method name sufixed with `Ok` automatically
+  // executed after 2XX response
+  createOk({ book }) {
+    this.setState({
+      books: this.state.books.concat(book),
+    });
+  }
+
+  // method name sufixed with `Err` automatically
+  // executed after 4XX response
+  createErr({ errors }) {
+    this.setState({ errors });
+  }
+}
+```
+
+### Utility for temporary UI state
+
+It is a common UI pattern to display the user operated resource in a particular state while waiting the server response. In such cases, you have to `setState` in a certain component before request. ServerComponent's controller has an utility to implement this behavior.
+
+#### Example
+
+```rb
+action :create do |c|
+  c.before do |s, data|
+    # data is a request payload
+    s.books do |book|
+      book.concat title: data[:title], creating: true
+    end
+  end
+end
+def create
+  @book = Book.new(book_params)
+  @book.save
+  set_state do |s|
+    s.books do |books|
+      books = books.filter { |b| !b[:creating] }
+      if @book.persisted?
+        books.push id: @book.id, title: @book.title
+      end
+      books
+    end
+  end
+end
+```
+
+### Uploading files
+
+File uploading requires FormData request because its Content-Type must be `multipart/form-data`. You have to specify explicitly that the action should accept file if you need.
+
+#### Example
+
+```rb
+action :upload do |c|
+  c.accept_file!
+end
+def upload
+  params[:file] # => ActionDispatch::Http::UploadedFile
+end
+```
 
-Bug reports and pull requests are welcome on GitHub at https://github.com/effective-spa/server_component.
+## 🤝 Contributing
 
+**Contributions are extremely welcome on Github Issue or Pull Request!**
 
-## License
+## 📝 License
 
 The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).

data/app/controllers/server_component/component_routers_controller.rb

@@ -3,21 +3,13 @@
 module ServerComponent
   class ComponentRoutersController < ServerComponent.parent_controller.constantize
     def show
-      component_router = find_component_router
       render json: component_router.to_json
     end
 
     private
 
-    def find_component_router
-      component_router_class_name = "#{name.camelize}ComponentRouter"
-      component_router_class =
-        begin
-          component_router_class_name.constantize
-        rescue NameError
-          raise ActionController::RoutingError, "No route matches routes/#{name}"
-        end
-      component_router_class.new
+    def component_router
+      ServerComponent.mappings[name] || raise
     end
 
     def name

data/lib/generators/server_component/controller_generator.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module ServerComponent
+  module Generators
+    class ControllerGenerator < Rails::Generators::NamedBase
+      source_root File.expand_path('../templates', __dir__)
+
+      desc 'Creates a ServerComponent initializer.'
+
+      def create_controller_file
+        template 'component_controller.rb', File.join('app/controllers', class_path, "#{file_name}_component_controller.rb")
+      end
+    end
+  end
+end

data/lib/generators/server_component/install_generator.rb

@@ -11,18 +11,6 @@ module ServerComponent
         template 'server_component.rb', 'config/initializers/server_component.rb'
       end
 
-      def setup_route
-        route "mount ServerComponent::Engine, at: 'react'"
-      end
-
-      def create_directory
-        empty_directory 'app/component_routers'
-      end
-
-      def add_one_router
-        template 'api_component_router.rb', 'app/component_routers/api_component_router.rb'
-      end
-
       def show_readme
         readme 'AFTER_INSTALL' if behavior == :invoke
       end

data/lib/generators/templates/AFTER_INSTALL

@@ -2,27 +2,23 @@
 
 What's next:
 
-1. Add "component_routers" directory into autoload_paths
-   in config/application.rb
+1. Create component controller. If you want BookComponent for example, run:
 
-   config.autoload_paths << Rails.root.join('component_routers')
+   $ rails generate server_component:controller book
 
 
-2. Create component controller. If you want BookComponent for example, run:
+2. Instantiate component class in the client with `server_component` package:
 
-   $ rails generate server_component:component_controller book --router api
-
-
-3. Conjoin client application with `server_component`:
+   import ServerComponent, { server_component, consumer } from 'server_component';
 
    // Create a component class.
 
-   @ServerComponent.component('book')
+   @server_component('book')
    class BookContainer extends React.Component {}
 
    // Create a component-attached class.
 
-   @ServerComponent.attach('book')
+   @consumer('book')
    class Book extends React.Component {
      render() {
        const { state: { list } } = this.props.book;
@@ -36,7 +32,7 @@ What's next:
 
    // And use in your root render function:
 
-   <ServerComponent.Use at="/react" name="api">
+   <ServerComponent.Use name="api">
      <BookContainer>
        <Book />
      </BookContainer>

data/lib/generators/templates/component_controller.rb.tt

@@ -1,4 +1,4 @@
-class <%= class_name %>ComponentController < ServerComponent::BaseComponentController
+class <%= class_name %>ComponentController < ServerComponent::Base
   # def self.initial_state
   #   {}
   # end

data/lib/generators/templates/server_component.rb

@@ -2,7 +2,7 @@
 
 # Use this hook to configure ServerComponent
 ServerComponent.setup do |config|
-  # context_script is executed before response scripts.
+  # context_script is prepended to response scripts.
   # It is useful if you want to add functions
   # invoked from JSRB renderer.
   # You can get identifiers from JSRB by calling

data/lib/server_component.rb

@@ -5,7 +5,9 @@ require 'jsrb'
 
 module ServerComponent
   autoload :VERSION, 'server_component/version'
+  autoload :Base, 'server_component/base'
   autoload :ComponentRouter, 'server_component/component_router'
+  autoload :Component, 'server_component/component'
 
   class NamespaceNotFound < StandardError; end
 
@@ -16,6 +18,9 @@ module ServerComponent
     yield self
   end
 
+  mattr_accessor :mappings
+  @@mappings = {}
+
   mattr_accessor :context_script
   @@context_script = ''
 

data/lib/server_component/base.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module ServerComponent
+  class Base < ServerComponent.parent_controller.constantize
+    include Component
+  end
+end

data/{app/controllers/server_component/base_component_controller.rb → lib/server_component/component.rb}

@@ -28,21 +28,25 @@ module ServerComponent
     end
   end
 
-  class BaseComponentController < ServerComponent.parent_controller.constantize
-    class_attribute :initial_state, :action_on_mount
+  module Component
+    extend ActiveSupport::Concern
 
-    helper ServerComponentHelper
-    include ServerComponentHelper
+    included do
+      class_attribute :initial_state, :action_on_mount
 
-    private
+      helper ServerComponentHelper
+      include ServerComponentHelper
 
-    def set_state(&block) # rubocop:disable Naming/AccessorMethodName
-      jsrb = Jsrb::Base.new
-      super(jsrb, &block)
-      render jsrb: jsrb.generate_code
+      private
+
+      def set_state(&block) # rubocop:disable Naming/AccessorMethodName
+        jsrb = Jsrb::Base.new
+        super(jsrb, &block)
+        render jsrb: jsrb.generate_code
+      end
     end
 
-    class << self
+    class_methods do
       def to_json
         {
           action_on_mount: action_on_mount,

data/lib/server_component/component_router.rb

@@ -2,7 +2,12 @@
 
 module ServerComponent
   class ComponentRouter
-    class_attribute :_namespace
+    attr_reader :namespace, :components
+
+    def initialize(namespace = nil)
+      @namespace = namespace
+      @components = []
+    end
 
     def to_json
       h = {}
@@ -14,12 +19,8 @@ module ServerComponent
       h
     end
 
-    def components
-      self.class.components
-    end
-
-    def namespace
-      self.class._namespace
+    def add_component(name)
+      @components << name.to_sym
     end
 
     def context_script
@@ -32,27 +33,5 @@ module ServerComponent
       name = (namespace ? "#{namespace}/#{component}" : component).to_s
       "#{name.camelize}ComponentController".constantize
     end
-
-    class << self
-      def namespace(mod)
-        self._namespace = mod
-      end
-
-      def components
-        if instance_variable_defined?('@components')
-          instance_variable_get '@components'
-        else
-          a = []
-          instance_variable_set '@components', a
-          a
-        end
-      end
-
-      def component(*component_names)
-        component_names.each do |name|
-          components << name.to_sym
-        end
-      end
-    end
   end
 end

data/lib/server_component/engine.rb

@@ -1,7 +1,8 @@
 # frozen_string_literal: true
 
+require 'server_component/engine/routes'
+
 module ServerComponent
   class Engine < ::Rails::Engine
-    isolate_namespace ServerComponent
   end
 end

data/lib/server_component/engine/routes.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module ActionDispatch
+  module Routing
+    class Mapper
+      # component_scope :api do
+      #   component :counter, actions: [:hoge]
+      # end
+      #
+      # will generate
+      #
+      # /api => Description Endpoint
+      # /api/counter/hoge => Component Endpoints
+      def component_scope(*args)
+        path = args.first.to_s
+        get "/#{path}", controller: 'server_component/component_routers', action: 'show', name: path
+        namespace(*args) do
+          @current_component_router = ServerComponent::ComponentRouter.new(@scope[:module])
+          yield
+        end
+        ServerComponent.mappings[path] = @current_component_router
+        @current_component_router = nil
+      end
+
+      def component(name, options = {})
+        actions = [options.fetch(:actions, [])].flatten(1)
+        actions.each do |action|
+          post "/#{name}/#{action}", controller: "#{name}_component", action: action
+        end
+        @current_component_router.add_component(name)
+      end
+    end
+  end
+end

data/lib/server_component/version.rb

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

data/server_component.gemspec

@@ -10,8 +10,8 @@ Gem::Specification.new do |spec|
   spec.authors       = ['Shun MIZUKAMI']
   spec.email         = ['norainu234@gmail.com']
 
-  spec.summary       = 'ServerComponent support for Rails'
-  spec.description   = 'ServerComponent makes it possible to implement React component as Rails controller'
+  spec.summary       = 'A painless framework for React apps.'
+  spec.description   = 'A painless framework for React apps.'
   spec.homepage      = 'https://github.com/effective-spa/server_component_rails'
   spec.license       = 'MIT'
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: server_component
 version: !ruby/object:Gem::Version
-  version: 0.3.0
+  version: 0.4.0
 platform: ruby
 authors:
 - Shun MIZUKAMI
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2019-01-13 00:00:00.000000000 Z
+date: 2019-02-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jsrb
@@ -86,8 +86,7 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '3.0'
-description: ServerComponent makes it possible to implement React component as Rails
-  controller
+description: A painless framework for React apps.
 email:
 - norainu234@gmail.com
 executables: []
@@ -103,22 +102,22 @@ files:
 - Gemfile
 - README.md
 - Rakefile
-- app/controllers/server_component/base_component_controller.rb
 - app/controllers/server_component/component_routers_controller.rb
-- app/controllers/server_component/components_controller.rb
 - app/helpers/server_component_helper.rb
 - bin/rails
 - bin/webpack
-- config/routes.rb
-- lib/generators/server_component/component_controller_generator.rb
+- figure.png
+- lib/generators/server_component/controller_generator.rb
 - lib/generators/server_component/install_generator.rb
 - lib/generators/templates/AFTER_INSTALL
-- lib/generators/templates/api_component_router.rb
 - lib/generators/templates/component_controller.rb.tt
 - lib/generators/templates/server_component.rb
 - lib/server_component.rb
+- lib/server_component/base.rb
+- lib/server_component/component.rb
 - lib/server_component/component_router.rb
 - lib/server_component/engine.rb
+- lib/server_component/engine/routes.rb
 - lib/server_component/js_function_builder.rb
 - lib/server_component/version.rb
 - server_component.gemspec
@@ -146,5 +145,5 @@ rubyforge_project:
 rubygems_version: 2.7.6
 signing_key: 
 specification_version: 4
-summary: ServerComponent support for Rails
+summary: A painless framework for React apps.
 test_files: []

data/app/controllers/server_component/components_controller.rb

@@ -1,35 +0,0 @@
-# frozen_string_literal: true
-
-module ServerComponent
-  class ComponentsController < ServerComponent.parent_controller.constantize
-    def perform
-      component_class = find_component_class!
-      component_class.dispatch(component_action, request, response)
-    end
-
-    private
-
-    def find_component_class!
-      klass_name = "#{component_name.camelize}ComponentController"
-      klass =
-        begin
-          klass_name.constantize
-        rescue NameError
-          raise ActionController::RoutingError, "No route matches #{component_name}/#{component_action}"
-        end
-      unless klass <= ServerComponent::BaseComponentController
-        raise ActionController::RoutingError, "No route matches #{component_name}/#{component_action}"
-      end
-
-      klass
-    end
-
-    def component_name
-      params[:component_name]
-    end
-
-    def component_action
-      params[:component_action_name]
-    end
-  end
-end

data/config/routes.rb

@@ -1,6 +0,0 @@
-# frozen_string_literal: true
-
-ServerComponent::Engine.routes.draw do
-  get '/routes/:name' => 'component_routers#show'
-  post '/components/*component_name/:component_action_name' => 'components#perform'
-end

data/lib/generators/server_component/component_controller_generator.rb

@@ -1,28 +0,0 @@
-# frozen_string_literal: true
-
-module ServerComponent
-  module Generators
-    class ComponentControllerGenerator < Rails::Generators::NamedBase
-      source_root File.expand_path('../templates', __dir__)
-
-      desc 'Creates a ServerComponent initializer.'
-
-      def create_controller_file
-        template 'component_controller.rb', File.join('app/controllers', class_path, "#{file_name}_component_controller.rb")
-      end
-
-      def component
-        rgx = /class [A-z::]+ComponentRouter < ServerComponent::ComponentRouter\n/
-        router_path = File.join('app/component_routers', "#{router_name}_component_router.rb")
-        routing_code = "  component '#{name}'\n"
-        inject_into_file router_path, routing_code, after: rgx
-      end
-
-      private
-
-      def router_name
-        @options.fetch(:router, 'api')
-      end
-    end
-  end
-end

data/lib/generators/templates/api_component_router.rb

@@ -1,3 +0,0 @@
-class ApiComponentRouter < ServerComponent::ComponentRouter
-  # component :simple_counter
-end