reworked rails-webpacker.md to include prerendering

Author: catmando

docs/installation/installation.md

@@ -89,7 +89,7 @@ And if you just added webpacker make sure to run `bundle exec rails webpacker:in
 
 ### Update the `application.js` file
 
-The `hyperstack-loader` is a dynamically generated asset manifest that will load all your client side Ruby code. Make sure it is the last require in `app/assets/javascripts/application.js` file.
+The `hyperstack-loader` is a dynamically generated asset manifest that will load all your client side Ruby code. Make sure it is the last require in `app/assets/javascripts/application.js` file.  That is it should be just before the final `require_tree` directive
 
 `jQuery` is very nicely integrated with Hyperstack, and provides a well
 documented uniform interface to the DOM.  To use it require it and its Rails
@@ -99,6 +99,7 @@ counter part in `application.js` before the `hyperstack-loader`
 //= require jquery
 //= require jquery_ujs
 //= require hyperstack-loader
+//= require_tree .
 ```
 > Note check to make sure jquery is not already being required.
 

install/rails-webpacker.rb

@@ -1,4 +1,5 @@
 # Hyperstack
+WITH_PRERENDERING = true
 
 # ----------------------------------- Commit so we have good history of these changes
 
@@ -9,7 +10,7 @@
 # ----------------------------------- Add the gems
 
 gem 'webpacker'
-gem 'rails-hyperstack', '~> 1.0.alpha'
+gem 'rails-hyperstack', '~> 1.0.alpha1.0'
 gem_group :development do
   gem 'foreman'
 end
@@ -116,36 +117,86 @@ class Hyperstack::ApplicationPolicy
 run 'yarn add react'
 run 'yarn add react-dom'
 run 'yarn add react-router'
+if WITH_PRERENDERING
+run 'yarn add react-router-dom'
+run 'yarn add history'
+run 'yarn add react_ujs'
+run 'yarn add jquery'
+end
 
-# ----------------------------------- Create hyperstack.js
+if !WITH_PRERENDERING
+  # ----------------------------------- Create hyperstack.js
 
-file 'app/javascript/packs/hyperstack.js', <<-CODE
-// Import all the modules
-import React from 'react';
-import ReactDOM from 'react-dom';
+  file 'app/javascript/packs/hyperstack.js', <<-CODE
+  // Import all the modules
+  import React from 'react';
+  import ReactDOM from 'react-dom';
 
-// for opal/hyperstack modules to find React and others they must explicitly be saved
-// to the global space, otherwise webpack will encapsulate them locally here
-global.React = React;
-global.ReactDOM = ReactDOM;
-CODE
+  // for opal/hyperstack modules to find React and others they must explicitly be saved
+  // to the global space, otherwise webpack will encapsulate them locally here
+  global.React = React;
+  global.ReactDOM = ReactDOM;
+  CODE
 
-# ----------------------------------- View template
+  # ----------------------------------- View template
 
-inject_into_file 'app/views/layouts/application.html.erb', before: %r{<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>} do
-<<-CODE
-<%= javascript_pack_tag 'hyperstack' %>
-CODE
-end
+  inject_into_file 'app/views/layouts/application.html.erb', before: %r{<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>} do
+  <<-CODE
+  <%= javascript_pack_tag 'hyperstack' %>
+  CODE
+  end
 
-# ----------------------------------- application.js
+  # ----------------------------------- application.js
 
-inject_into_file 'app/assets/javascripts/application.js', before: %r{//= require_tree .} do
+  inject_into_file 'app/assets/javascripts/application.js', before: %r{//= require_tree .} do
 <<-CODE
 //= require jquery
 //= require jquery_ujs
 //= require hyperstack-loader
 CODE
+  end
+else
+  # ----------------------------------- Create client_and_server.js
+
+  file 'app/javascript/packs/client_and_server.js', <<-CODE
+//app/javascript/packs/client_and_server.js
+// these packages will be loaded both during prerendering and on the client
+React = require('react');                      // react-js library
+History = require('history');                  // react-router history library
+ReactRouter = require('react-router');         // react-router js library
+ReactRouterDOM = require('react-router-dom');  // react-router DOM interface
+ReactRailsUJS = require('react_ujs');          // interface to react-rails
+// to add additional NPM packages call run yarn package-name@version
+// then add the require here.
+CODE
+
+  # ----------------------------------- Create client_only.js
+
+  file 'app/javascript/packs/client_only.js', <<-CODE
+//app/javascript/packs/client_only.js
+// add any requires for packages that will run client side only
+ReactDOM = require('react-dom');               // react-js client side code
+jQuery = require('jquery');
+// to add additional NPM packages call run yarn package-name@version
+// then add the require here.
+CODE
+
+  # ----------------------------------- add asset paths
+
+  # note before this was just public/packs now its public/paths/js.  WHY???
+  append_file 'config/initializers/assets.rb' do
+    <<-RUBY
+Rails.application.config.assets.paths << Rails.root.join('public', 'packs', 'js').to_s
+    RUBY
+  end
+
+  # ----------------------------------- application.js
+
+  inject_into_file 'app/assets/javascripts/application.js', before: %r{//= require_tree .} do
+<<-CODE
+//= require hyperstack-loader
+CODE
+  end
 end
 
 # ----------------------------------- Procfile

ruby/hyper-component/lib/hyperstack/ext/component/element.rb

@@ -3,7 +3,7 @@ def self.find(selector)
     if `typeof #{selector}['$respond_to?'] == 'function'` && selector.respond_to?(:dom_node)
       selector = selector.dom_node
     end
-    `$(#{selector})`
+    `jQuery(#{selector})`
   end
 
   def self.[](selector)
@@ -35,7 +35,7 @@ def self.[](selector)
   # see react-rails documentation for more details
 
   %x{
-    $.fn.mount_components = function() {
+    jQuery.fn.mount_components = function() {
       this.each(function(e) { ReactRailsUJS.mountComponents(e[0]) })
       return this;
     }

ruby/hyper-model/spec/batch7/poly_assoc_spec.rb

@@ -308,7 +308,7 @@ class Testing123 < HyperComponent
       evaluate_ruby do
         Uzer.find(1).groups << Group.find(1) # client side
       end
-      wait_for_ajax
+      wait_for_ajax # this is required
       @group1.reload
       compare_to_server @group1, 'uzers.collect(&:id)', [@uzer1.id], false # server side
     end