updated readme dont shim 'closest' function on server

catmando · catmando · commit 67de79f17844 · 2019-07-26T10:13:06.000-04:00
diff --git a/install/readme.md b/install/readme.md
@@ -365,11 +365,12 @@ These two files look like this and are placed in the `app/javascript/packs` dire
 ```javascript
 //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
+React = require('react');                         // react-js library
+createReactClass = require('create-react-class'); // backwards compatibility with ECMA5
+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 add package-name@version
 // then add the require here.
 ```
@@ -406,15 +407,16 @@ end
 
 #### Manage the Hyperstack dependencies with yarn
 
-As you can see above the NPM modules that Hyperstack depends on are part of the webpacker manifests.
-But by default Hyperstack will pull copies of these packages into the old-school Rails sprockets asset pipeline.
-So if you are using Webpacker you need to add the packages using yarn, and then tell Hyperstack not to
-include them in the sprockets asset pipeline.
+The above changes will pull the necessary NPM modules in as part of the webpacker manifests.
+But by default Hyperstack will try to pull copies of these packages from the Hyperstack gem set using the old-school Rails sprockets asset pipeline.
+
+So instead, when using webpacker, you need to add the packages using the `yarn` package manager, and then tell Hyperstack not to include them in the sprockets asset pipeline.
 
 To add the packages using yarn run these commands:
 
 ```bash
 yarn add react@16
+yarn add create-react-class
 yarn add react-dom@16
 yarn add react-router@^5.0.0
 yarn add react-router-dom@^5.0.0
diff --git a/ruby/hyper-model/lib/reactive_record/active_record/reactive_record/while_loading.rb b/ruby/hyper-model/lib/reactive_record/active_record/reactive_record/while_loading.rb
@@ -481,12 +481,12 @@ def component_did_update(*args)
       # This is required to support legacy browsers (Internet Explorer 9+)
       # https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill
       `
-      if (!Element.prototype.matches) {
+      if (typeof(Element) != 'undefined' && !Element.prototype.matches) {
         Element.prototype.matches = Element.prototype.msMatchesSelector ||
                                     Element.prototype.webkitMatchesSelector;
       }
 
-      if (!Element.prototype.closest) {
+      if (typeof(Element) != 'undefined' && !Element.prototype.closest) {
         Element.prototype.closest = function(s) {
           var el = this;
 

Original file line number	Diff line number	Diff line change
`@@ -481,12 +481,12 @@ def component_did_update(*args)`
`481`	`481`	`# This is required to support legacy browsers (Internet Explorer 9+)`
`482`	`482`	`# https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill`
`483`	`483`	`
`484`		`- if (!Element.prototype.matches) {`
	`484`	`+ if (typeof(Element) != 'undefined' && !Element.prototype.matches) {`
`485`	`485`	`Element.prototype.matches = Element.prototype.msMatchesSelector \|\|`
`486`	`486`	`Element.prototype.webkitMatchesSelector;`
`487`	`487`	`}`
`488`	`488`
`489`		`- if (!Element.prototype.closest) {`
	`489`	`+ if (typeof(Element) != 'undefined' && !Element.prototype.closest) {`
`490`	`490`	`Element.prototype.closest = function(s) {`
`491`	`491`	`var el = this;`
`492`	`492`