Site updated to 2d36f27

Author: barriehadfield

docs/components/docs/index.html

@@ -453,10 +453,10 @@ <h2 class="h5 project-tagline center-text">
 <a href="#what-components-should-have-state">What Components Should Have State?</a>
 </li>
 <li class="navtoc-item">
-<a href="#what-should-go-in-state">What Should Go in State?</a>
+<a href="#what-should-go-in-state">What <em>Should</em> Go in State?</a>
 </li>
 <li class="navtoc-item">
-<a href="#what-shouldn-t-go-in-state">What Shouldn't Go in State?</a>
+<a href="#what-shouldn-t-go-in-state">What <em>Shouldn't</em> Go in State?</a>
 </li>
 </ul>
 </li>
@@ -1009,18 +1009,22 @@ <h3 id="using-state">Using State</h3>
 
 <h4 id="a-simple-example">A Simple Example</h4>
 
-<p>```ruby runable
-class LikeButton &lt; Hyperloop::Component</p>
+<div class="codemirror-live-edit"
+  data-heading="A simple Component rendering state"
+  data-rows=12
+  data-top-level-component="LikeButton">
+<pre>
+class LikeButton < Hyperloop::Component
 
-<p>render(DIV) do
+  render(DIV) do
     P do
-      &quot;You #{state.liked ? &#39;like&#39; : &#39;haven\&#39;t liked&#39;} this. Click to toggle.&quot;
+      "You #{state.liked ? 'like' : 'haven\'t liked'} this. Click to toggle."
     end.on(:click) do
       mutate.liked !state.liked
     end
   end
 end
-```</p>
+</pre></div>
 
 <h3 id="components-are-just-state-machines">Components are Just State Machines</h3>
 
@@ -1040,14 +1044,14 @@ <h3 id="what-components-should-have-state">What Components Should Have State?</h
 
 <p>A common pattern is to create several stateless components that just render data, and have a stateful component above them in the hierarchy that passes its state to its children via <code>params</code>. The stateful component encapsulates all of the interaction logic, while the stateless components take care of rendering data in a declarative way.</p>
 
-<h3 id="what-should-go-in-state">What Should Go in State?</h3>
+<h3 id="what-should-go-in-state">What <em>Should</em> Go in State?</h3>
 
 <p><strong>State should contain data that a component&#39;s event handlers, timers, or http requests may change and trigger a UI update.</strong></p>
 
 <p>When building a stateful component, think about the minimal possible representation of its state, and only store those properties in <code>state</code>.  Add to your class methods to compute higher level values from your state variables.  Avoid adding redundant or computed values as state variables as
 these values must then be kept in sync whenever state changes.</p>
 
-<h3 id="what-shouldnt-go-in-state">What Shouldn&#39;t Go in State?</h3>
+<h3 id="what-shouldnt-go-in-state">What <em>Shouldn&#39;t</em> Go in State?</h3>
 
 <p><code>state</code> should only contain the minimal amount of data needed to represent your UI&#39;s state. As such, it should not contain:</p>
 
@@ -1189,7 +1193,7 @@ <h3 id="data-flow">Data Flow</h3>
 
 <h3 id="stores">Stores</h3>
 
-<p>Managing state between components is best done using Stores as many Components can access one store. This saves passing data btween Components. Please see the <a href="/docs/stores/overview">Store documentation</a> for details.</p>
+<p>Managing state between components is best done using Stores as many Components can access one store. This saves passing data btween Components. Please see the <a href="/docs/stores/docs">Store documentation</a> for details.</p>
 
 <h3 id="reusable-components">Reusable Components</h3>
 
@@ -1253,40 +1257,44 @@ <h3 id="mixins-and-inheritance">Mixins and Inheritance</h3>
 </code></pre>
 <p>One common use case is a component wanting to update itself on a time interval. It&#39;s easy to use the kernel method <code>every</code>, but it&#39;s important to cancel your interval when you don&#39;t need it anymore to save memory. React provides <a href="/docs/working-with-the-browser.html#component-lifecycle">lifecycle methods</a> that let you know when a component is about to be created or destroyed. Let&#39;s create a simple mixin that uses these methods to provide a React friendly <code>every</code> function that will automatically get cleaned up when your component is destroyed.</p>
 
-<p>```ruby runable
-module ReactInterval</p>
+<div class="codemirror-live-edit"
+  data-heading="Using state"
+  data-rows=33
+  data-top-level-component="TickTock">
+<pre>
+module ReactInterval
 
-<p>def self.included(base)
+  def self.included(base)
     base.before_mount do
       @intervals = []
-    end</p>
-<pre class="highlight plaintext"><code>base.before_unmount do
-  @intervals.each(&amp;:stop)
-end
-</code></pre>
-<p>end</p>
+    end
 
-<p>def every(seconds, &amp;block)
-    Kernel.every(seconds, &amp;block).tap { |i| @intervals &lt;&lt; i }
+    base.before_unmount do
+      @intervals.each(&:stop)
+    end
+  end
+
+  def every(seconds, &block)
+    Kernel.every(seconds, &block).tap { |i| @intervals << i }
   end
-end</p>
+end
 
-<p>class TickTock &lt; Hyperloop::Component
-  include ReactInterval</p>
+class TickTock < Hyperloop::Component
+  include ReactInterval
 
-<p>before_mount do
+  before_mount do
     state.seconds! 0
-  end</p>
+  end
 
-<p>after_mount do
+  after_mount do
     every(1) { mutate.seconds state.seconds+1}
-  end</p>
+  end
 
-<p>render(DIV) do
-    &quot;Hyperloop has been running for #{state.seconds} seconds&quot;.para
+  render(DIV) do
+    "Hyperloop has been running for #{state.seconds} seconds".para
   end
 end
-```</p>
+</pre></div>
 
 <p>Notice that TickTock effectively has two before_mount callbacks, one that is called to initialize the <code>@intervals</code> array and another to initialize <code>state.seconds</code></p>
 
@@ -1421,27 +1429,31 @@ <h4 id="the-children-method">The children method</h4>
 
 <p>The instance method <code>children</code> returns an enumerable that is used to access the unrendered children of a component.</p>
 
-<p>```ruby runable
-class IndentEachLine &lt; Hyperloop::Component
-  param by: 20, type: Integer</p>
+<div class="codemirror-live-edit"
+  data-heading="The children method"
+  data-rows=20
+  data-top-level-component="Indenter">
+<pre>
+class IndentEachLine < Hyperloop::Component
+  param by: 20, type: Integer
 
-<p>render(DIV) do
-    children.each<em>with</em>index do |child, i|
-      child.render(style: {&quot;margin-left&quot; =&gt; params.by*i})
+  render(DIV) do
+    children.each_with_index do |child, i|
+      child.render(style: {"margin-left" => params.by*i})
     end
   end
-end</p>
+end
 
-<p>class Indenter &lt; Hyperloop::Component
+class Indenter < Hyperloop::Component
   render(DIV) do
     IndentEachLine(by: 100) do
-      DIV {&quot;Line 1&quot;}
-      DIV {&quot;Line 2&quot;}
-      DIV {&quot;Line 3&quot;}
+      DIV {"Line 1"}
+      DIV {"Line 2"}
+      DIV {"Line 3"}
     end
   end
 end
-```</p>
+</pre></div>
 
 <h3 id="lifecycle-methods">Lifecycle Methods</h3>
 
@@ -1919,8 +1931,10 @@ <h4 id="including-react-source">Including React Source</h4>
 <p>If you are in the business of importing components with a tool like Webpack, then you will need to let Webpack (or whatever dependency manager you are using) take care of including the React source code.  Just make sure that you are <em>not</em> including it on the ruby side of things. Hyperloop is currently tested with React versions 13, 14, and 15, so its not sensitive to the version you use.</p>
 
 <p>However it gets a little tricky if you are using the react-rails gem.  Each version of this gem depends on a specific version of React, and so you will need to manually declare this dependency in your Javascript dependency manager.  Consult this <a href="https://github.com/reactjs/react-rails/blob/master/VERSIONS.md">table</a> to determine which version of React you need. For example assuming you are using <code>npm</code> to install modules and you are using version 1.7.2 of react-rails you would say something like this:</p>
-<pre class="highlight shell"><code>npm install react@15.0.2 react-dom@15.0.2 --save
+<pre class="highlight shell"><code>npm install react@15.6.2 react-dom@15.6.2 --save
 </code></pre>
+<p>See <a href="/tutorials/hyperlooprails/webpack/">{ NPM and Webpack Tutorial }</a> or <a href="/tutorials/hyperlooprails/hyperloop-rails-webpackergem-helloworld/">{ Webpacker GEM Tutorial }</a> for more information.</p>
+
 <h4 id="using-webpack">Using Webpack</h4>
 
 <p>Just a word on Webpack: If you a Ruby developer who is new to using Javascript libraries then we recommend using Webpack to manage javascript component dependencies.  Webpack is essentially bundler for Javascript. Please see our Tutorials section for more information.</p>
@@ -1979,7 +1993,7 @@ <h4 id="opal-under-the-covers">Opal under the covers</h4>
 <p>Hyperloop Components are a DSL wrapper of React which uses Opal to compile Ruby code to ES5 native JavaScript. If you have not used Opal before then you should at a minimum read the excellent guides as they will teach you enough Opal to get you started with Hyperloop.</p>
 
 <ul>
-<li><a href="http://opalrb.com/">Opal</a></li>
+<li><a href="http://opalrb.org/">Opal</a></li>
 <li><a href="http://opalrb.org/docs/guides/v0.9.2/index.html">Opal Guides</a></li>
 <li><a href="https://www.youtube.com/watch?v=vhIrrlcWphU">To see the full power of Opal in action watch this video</a></li>
 </ul>

docs/models/docs/index.html

@@ -405,6 +405,9 @@ <h2 class="h5 project-tagline center-text">
 <li class="navtoc-item">
 <a href="#rails-5-1-x">Rails 5.1.x</a>
 </li>
+<li class="navtoc-item">
+<a href="#explicit-scope-access">Explicit Scope Access</a>
+</li>
 </ul>
 </li>
 <li class="navtoc-item">
@@ -624,7 +627,7 @@ <h2 id="isomorphic-models">Isomorphic Models</h2>
 
 <h3 id="rails-5-1-x">Rails 5.1.x</h3>
 
-<p>Upto Rails 4.2, all models inherited from <code>ActiveRecord::Base</code>. But starting from Rails 5, all models will inherit from <code>ApplicationRecord</code>.</p>
+<p>Up until Rails 4.2, all models inherited from <code>ActiveRecord::Base</code>. But starting from Rails 5, all models will inherit from <code>ApplicationRecord</code>.</p>
 
 <p>To accommodate this change, the following file has been automatically added to models in Rails 5 applications.</p>
 <pre class="highlight ruby"><code><span class="c1"># app/models/application_record.rb</span>
@@ -634,6 +637,15 @@ <h3 id="rails-5-1-x">Rails 5.1.x</h3>
 </code></pre>
 <p>For Hyperloop to see this change, this file needs to be moved (or copied if you have some server-side models) to the <code>apps/hyperloop</code> folder.</p>
 
+<h3 id="explicit-scope-access">Explicit Scope Access</h3>
+
+<p>In order to prevent unauthorized access to information like scope counts, lists of record ids, etc, Hyperloop now (see issue <a href="https://github.com/ruby-hyperloop/hyper-mesh/issues/43">https://github.com/ruby-hyperloop/hyper-mesh/issues/43</a>) requires you explicitly allow scopes to be viewed on the client, otherwise you will get an AccessViolation.</p>
+
+<p>To globally allow access to all scopes add this to the ApplicationRecord class</p>
+<pre class="highlight ruby"><code><span class="k">class</span> <span class="nc">ApplicationRecord</span> <span class="o">&lt;</span> <span class="no">ActiveRecord</span><span class="o">::</span><span class="no">Base</span>
+  <span class="n">regulate_scope</span> <span class="ss">:all</span>
+<span class="k">end</span>
+</code></pre>
 <h2 id="activerecord-api">ActiveRecord API</h2>
 
 <p>Hyperloop uses a subset of the standard ActiveRecord API to give your Isomorphic Components, Operations and Stores access to your server side Models.  As much as possible Hyperloop follows the syntax and semantics of ActiveRecord.  </p>

feed.xml

@@ -14,7 +14,7 @@
     <link rel="alternate" href="http://blog.url.com/blog/2018/07/28/Statement-of-Direction/"/>
     <id>http://blog.url.com/blog/2018/07/28/Statement-of-Direction/</id>
     <published>2018-07-28T09:47:00+01:00</published>
-    <updated>2018-07-31T09:52:45+01:00</updated>
+    <updated>2018-07-27T12:49:31+01:00</updated>
     <author>
       <name>Article Author</name>
     </author>
@@ -65,7 +65,7 @@
     <link rel="alternate" href="http://blog.url.com/blog/2018/07/26/hyperloop-2018-update/"/>
     <id>http://blog.url.com/blog/2018/07/26/hyperloop-2018-update/</id>
     <published>2018-07-26T09:47:00+01:00</published>
-    <updated>2018-07-31T09:52:45+01:00</updated>
+    <updated>2018-07-27T12:50:09+01:00</updated>
     <author>
       <name>Article Author</name>
     </author>
@@ -87,7 +87,7 @@
     <link rel="alternate" href="http://blog.url.com/blog/2017/02/28/spring-2017-comps-release/"/>
     <id>http://blog.url.com/blog/2017/02/28/spring-2017-comps-release/</id>
     <published>2017-02-28T00:00:00+00:00</published>
-    <updated>2018-06-01T08:14:59+01:00</updated>
+    <updated>2018-07-26T09:39:17+01:00</updated>
     <author>
       <name>Article Author</name>
     </author>
@@ -244,7 +244,7 @@
     <link rel="alternate" href="http://blog.url.com/blog/2017/01/28/editing-flux-loop-verses-decoupling/"/>
     <id>http://blog.url.com/blog/2017/01/28/editing-flux-loop-verses-decoupling/</id>
     <published>2017-01-28T00:00:00+00:00</published>
-    <updated>2018-06-01T08:14:59+01:00</updated>
+    <updated>2018-07-26T09:39:17+01:00</updated>
     <author>
       <name>Article Author</name>
     </author>
@@ -396,7 +396,7 @@ Yes.  Note that Operations return promises, so asynchronous operation is assumed
     <link rel="alternate" href="http://blog.url.com/blog/2017/01/17/comparing-redux-with-hyperloop/"/>
     <id>http://blog.url.com/blog/2017/01/17/comparing-redux-with-hyperloop/</id>
     <published>2017-01-17T00:00:00+00:00</published>
-    <updated>2018-06-01T08:14:59+01:00</updated>
+    <updated>2018-07-26T09:39:17+01:00</updated>
     <author>
       <name>Article Author</name>
     </author>
@@ -728,7 +728,7 @@ return (
     <link rel="alternate" href="http://blog.url.com/blog/2016/09/08/Hyperloop-is-born/"/>
     <id>http://blog.url.com/blog/2016/09/08/Hyperloop-is-born/</id>
     <published>2016-09-08T06:50:00+01:00</published>
-    <updated>2018-06-01T08:14:59+01:00</updated>
+    <updated>2018-07-26T09:39:17+01:00</updated>
     <author>
       <name>Article Author</name>
     </author>

search/lunr-index.json

@@ -489,7 +489,7 @@ <h4 id="step-1-1-installing-and-setting-up-the-webpacker-gem">Step 1.1 - Install
 <pre class="highlight ruby"><code><span class="n">bundle</span> <span class="n">update</span>
 </code></pre>
 <p>Run the webpacker install generator:</p>
-<pre class="highlight plaintext"><code>bin/rails webpacker:install
+<pre class="highlight plaintext"><code>bundle exec rails webpacker:install
 </code></pre>
 <h4 id="step-1-2-adding-libraries-into-webpack">Step 1.2 - Adding libraries into Webpack:</h4>
 
@@ -499,10 +499,10 @@ <h4 id="step-1-2-adding-libraries-into-webpack">Step 1.2 - Adding libraries into
 React, React-dom, Bootstrap and Bootswatch theme.</p>
 
 <p>Run these commands:</p>
-<pre class="highlight plaintext"><code>yarn add react
-yarn add react-dom
+<pre class="highlight plaintext"><code>yarn add react@15.6.2
+yarn add react-dom@15.6.2
 yarn add bootstrap react-bootstrap
-yarn add bootswatch
+yarn add bootswatch@3.3.7
 </code></pre>
 <h4 id="step-1-3-requiring-the-libraires">Step 1.3 - Requiring the libraires</h4>
 
@@ -520,8 +520,8 @@ <h4 id="step-1-4-letting-webpack-know-react-and-reactdom-are-external">Step 1.4
 
 <p>React and ReactDOM are being brought in by Hyperloop, so we need to let Webpack know that these libraries are external so we do not end up with more than one copy of React running. Note that you will also need to do this for your production environment.</p>
 
-<p>In the <code>module.export</code> block, add the following to <code>development.js</code>:</p>
-<pre class="highlight javascript"><code><span class="c1">//config/webpack/development.js</span>
+<p>In the <code>module.export</code> block, add the following to <code>shared.js</code>:</p>
+<pre class="highlight javascript"><code><span class="c1">//config/webpack/shared.js</span>
 
 <span class="nl">externals</span><span class="p">:</span> <span class="p">{</span>
        <span class="s2">"react"</span><span class="p">:</span> <span class="s2">"React"</span><span class="p">,</span>
@@ -559,15 +559,23 @@ <h4 id="step-1-7-adding-pack-files-to-the-asset-pipeline">Step 1.7 - Adding pack
 
 <span class="no">Hyperloop</span><span class="p">.</span><span class="nf">configuration</span> <span class="k">do</span> <span class="o">|</span><span class="n">config</span><span class="o">|</span>
   <span class="n">config</span><span class="p">.</span><span class="nf">transport</span> <span class="o">=</span> <span class="ss">:simple_poller</span>
+
+  <span class="c1"># If your Webpacker version DO NOT generate Manifest files</span>
   <span class="n">config</span><span class="p">.</span><span class="nf">import</span> <span class="s1">'client_and_server'</span>
   <span class="n">config</span><span class="p">.</span><span class="nf">import</span> <span class="s1">'client_only'</span><span class="p">,</span> <span class="ss">client_only: </span><span class="kp">true</span>
+
+  <span class="c1"># If your Webpacker version DOES generate Manifest files</span>
+  <span class="c1"># config.import Webpacker.manifest.lookup("client_and_server.js").split("/").last</span>
+  <span class="c1"># config.import Webpacker.manifest.lookup("client_only.js").split("/").last</span>
 <span class="k">end</span>
 </code></pre>
 <p><i class="flaticon-signs"></i> In Rails production mode it would be necessary to include the pack files in your application main layout:</p>
 <pre class="highlight erb"><code>#app/views/layouts/application.tml.erb
 
 <span class="cp">&lt;%=</span> <span class="n">javascript_pack_tag</span> <span class="s1">'client_and_server'</span> <span class="cp">%&gt;</span>
 </code></pre>
+<p>And <a href="/docs/advancedconfiguration/#auto_config">{ set Hyperloop in AUTO-CONFIG MODE = OFF }</a> in order to choose manually which libraries will be imported.</p>
+
 <h4 id="step-1-8-adding-css-pack-files-to-the-asset-pipeline">Step 1.8 - Adding CSS pack files to the asset pipeline</h4>
 
 <p>Add this line:</p>