updated installers and instructions

Author: catmando

docs/installation/installation.md

@@ -58,7 +58,7 @@ gem 'rails-hyperstack',
 
 These are the steps to manually install Hyperstack in an existing Rails app:
 
-+ Insure yarn is loaded
+1. Insure yarn is loaded
 + Add the gems
 + Update the `application.js` file
 + Add the `hyperstack` directories
@@ -256,7 +256,7 @@ included) in the asset manifest.
 The `on_error` method defines what you want to do when errors occur.  In production
 you will may want to direct the output to a dedicated log file for example.
 
-### Integrate with webpacker
+### 9. Integrate with webpacker
 
 The Rails webpacker gem will bundle up all your javascript assets including those used by Hyperstack such as React, and React-Router.
 
@@ -275,7 +275,7 @@ Once you have the pack files setup you will also need to fetch the packages, plu
 >
 > In the JS world its a two part process.  Yarn fetches packages and their dependents, and maintains a `yarn.lock` file.  The pack files specify how to package up the JS code, making it ready for delivery to the client.
 
-#### Add the `client_and_server.js` pack file
+##### Add the `client_and_server.js` pack file
 
 * Note that this goes in a new directory: `app/javascripts/packs` *
 
@@ -290,7 +290,7 @@ ReactRailsUJS = require('react_ujs');          // interface to react-rails
 // to add additional NPM packages run add yarn package-name@version
 // then add the require here.
 ```
-#### Add the `client_only.js` pack file
+##### Add the `client_only.js` pack file
 
 ```javascript
 //app/javascript/packs/client_only.js
@@ -301,7 +301,7 @@ jQuery = require('jquery');
 // then add the require here.
 ```
 
-#### Add the packages using `yarn`
+##### Add the packages using `yarn`
 
 First you need make sure you have `yarn` installed:  
 [Yarn install for any system](https://yarnpkg.com/en/docs/install)
@@ -317,13 +317,25 @@ yarn add react_ujs@^2.5.0
 yarn add jquery@^3.4.1
 ```
 
-And now you are good to go.  In the future if you want to add a new package like [react-datepicker](https://reactdatepicker.com/), you would run
-
-`yarn add react-datepicker`
+And now you are good to go.  
 
+>One of the great things about Hyperstack is that while you can code in Ruby, you have access to the thousands of predefined react component libraries.
+>
+>For example if you want to add a new package like [react-datepicker](https://reactdatepicker.com/), you would run  
+```text
+yarn add react-datepicker
+```
+> and then add  
+```javascript
+DatePicker = require('jquery'); // bring in the component
+require("react-datepicker/dist/react-datepicker.css"); // bring in the styles
+```
+> to the `client_only.js` pack file.  *Note that DatePicker can only be sensibly run on the client, as time on the client will be different from the server.*
+>
+>Finally you will have to run `bin/webpack` to rebuild everything
 
 
-### Add the Hyperstack engine to the routes file
+### 10. Add the Hyperstack engine to the routes file
 
 At the beginning of the `config/routes.rb` file mount the Hyperstack engine:
 
@@ -337,7 +349,7 @@ Rails.application.routes.draw do
 end
 ```
 
-You can mount the engine under any name you please.  All of internal Hyperstack requests will be prefixed with that mount point.
+You can mount the engine under any name you please.  All of internal Hyperstack requests will be prefixed with whatever name you use.
 
 >Note: You can also directly ask Hyperstack to mount your top level components
 via the routes file.  For example  
@@ -347,13 +359,17 @@ Rails.application.routes.draw do
   get '/(*other)', to: 'hyperstack#app'
 ```
 > will pass all requests (i.e. `/(*other)`) to the hyperstack engine, and find
-and mount a component named `App`.  Whatever ever you name the engine
+and mount a component named `App`.  Whatever you name the engine
 mount point (i.e. `hyperstack` in this case) is what you direct the requests to.
 >
 > Likewise `get /price-quote/(*other), to: hyperstack#price_quote` would mount
-a component named `PriceQuote` when the url begins with `price-quote`.  
+a component named `PriceQuote` when the url begins with `price-quote`.
+>
+> Remember though that the first route that matches will be used, so if you had both examples in your routes, the price-quote route would be before the wildcard route.
+>
+> This the way you have have 2 or more single page apps served by the same Rails backend.
 
-### Add/Update the Procfile
+### 11. Add/Update the Procfile
 
 If you are using the Hotloader, then you will also want to use the `foreman` gem.
 The Hotloader runs in its own application process, and foreman will start and stop both Rails and the Hotloader together.
@@ -373,7 +389,7 @@ To run foreman simply execute `bundle exec foreman start`, and CTRL-C to quit.
 
 > Note when running foreman with the above Procfile your port will be 5000 instead of the usual 3000.
 
-### Using generators
+### 12. Using generators
 
 No matter which way you installed Hyperstack you can use the included generators to add new components.
 
@@ -382,7 +398,7 @@ skeleton top level (router) component named App.
 
 `bundle exec rails g hyper:component Index` will create a skeleton component named Index.
 
-### Adding a test component
+### 13. Adding a test component
 
 Once you have installed Hyperstack you have a couple of options to see how things work.  
 
@@ -398,7 +414,7 @@ and then route everything to this component from your routes file:
 
 ##### Mounting a component from an existing page
 
-Another approach is to add a regular component again using the generator:
+Another approach is to add a simple component using the component generator:
 
 `bundle exec rails g hyper:component HyperTest`
 

ruby/hyper-component/lib/hyperstack/internal/component/rails/railtie.rb

@@ -12,8 +12,9 @@ class Railtie < ::Rails::Railtie
           end
           config.after_initialize do
             class ::HyperstackController < ::ApplicationController
-              def action_missing(_name)
-                render_component
+              def action_missing(*)
+                parts = params[:action].split('__')
+                render_component (parts[0..-2]+[parts.last.camelize]).join('::')
               end
             end
           end

ruby/hyper-operation/lib/hyper-operation/transport/client_drivers.rb

@@ -185,12 +185,17 @@ def self.sync_dispatch(data)
         # not sure why the second check is needed.  It happens in the test app
         route.app == Hyperstack::Engine or (route.app.respond_to?(:app) and route.app.app == Hyperstack::Engine)
       end
-      raise 'Hyperstack::Engine mount point not found.  Check your config/routes.rb file' unless path
-      path = path.path.spec
-      "<script type='text/javascript'>\n"\
-        "window.HyperstackEnginePath = '#{path}';\n"\
-        "window.HyperstackOpts = #{config_hash.to_json}\n"\
-      "</script>\n"
+      if path
+        path = path.path.spec
+        "<script type='text/javascript'>\n"\
+          "window.HyperstackEnginePath = '#{path}';\n"\
+          "window.HyperstackOpts = #{config_hash.to_json}\n"\
+        "</script>\n"
+      else
+        "<script type='text/javascript'>\n"\
+          "window.HyperstackOpts = #{config_hash.to_json}\n"\
+        "</script>\n"
+      end
     end if RUBY_ENGINE != 'opal'
 
     class << self
@@ -244,6 +249,9 @@ def self.initialize_client_drivers_on_boot
 
         @opts = Hash.new(`window.HyperstackOpts`)
 
+        if opts[:transport] != :none && `typeof(window.HyperstackEnginePath) == 'undefined'`
+          raise "No hyperstack mount point found!\nCheck your Rails routes.rb file";
+        end
 
         if opts[:transport] == :pusher
 

ruby/hyperstack-config/lib/hyperstack/imports.rb

@@ -6,13 +6,17 @@ def import_list
     end
 
     def import(value, gem: nil, cancelled: nil, client_only: nil, server_only: nil, tree: nil, js_import: nil, at_head: nil)
-      return if import_list.detect { |current_value, *_rest| value == current_value }
+      return if imported? value
       new_element = [
         value, cancelled, !client_only, !server_only, (tree ? :tree : :gem), js_import
       ]
       import_list.send(at_head ? :unshift : :push, new_element)
     end
 
+    def imported?(value)
+      import_list.detect { |current_value, *| value == current_value }
+    end
+
     alias imports import
 
     def import_tree(value, cancelled: nil, client_only: nil, server_only: nil)

ruby/rails-hyperstack/lib/generators/hyper/component_generator.rb

@@ -2,19 +2,25 @@
 module Hyper
   class Component < Rails::Generators::Base
     source_root File.expand_path('../templates', __FILE__)
-
     argument :components, type: :array
+    class_option 'base-class', :default => 'HyperComponent'
+    class_option 'add-route', :default => nil
+
     def create_component_file
+      clear_cache
+      insure_hyperstack_loader_installed
+      insure_base_component_class_exists unless options['base-class'] == 'skip'
       self.components.each do |component|
         component_array = component.split('::')
         @modules = component_array[0..-2]
         @file_name = component_array.last
         @indent = 0
         template 'component_template.rb',
-                 File.join('app/hyperstack/components',
-                           @modules.map(&:downcase).join('/'),
+                 File.join('app', 'hyperstack', 'components',
+                           *@modules.map(&:downcase),
                            "#{@file_name.underscore}.rb")
       end
+      add_route
     end
   end
 end

ruby/rails-hyperstack/lib/generators/hyper/router_generator.rb

@@ -9,6 +9,7 @@ def create_component_file
       component_array = component.split('::')
       @modules = component_array[0..-2]
       @file_name = component_array.last
+      
       @indent = 0
       template 'router_template.rb',
                File.join('app/hyperstack/components',

ruby/rails-hyperstack/lib/generators/hyper/templates/component_template.rb

@@ -1,5 +1,5 @@
 <%- @modules.each do |module_name| %><%= "  "* @indent %>module <%= module_name.camelize %><%- @indent += 1 %>
-<%- end %><%="  "* @indent %>class <%= @file_name %> < Hyperstack::Component
+<%- end %><%="  "* @indent %>class <%= @file_name %> < <%= @component_base_class %>
 
 <%="  "* @indent %>  # param :my_param
 <%="  "* @indent %>  # param param_with_default: "default value"