Merge branch 'master' into improve_cable_component_docs

Author: jonasjabari

docs/api/000-base/00-app.md

@@ -7,8 +7,8 @@ An app is a special kind of `Matestack::Ui::VueJsComponent`. Matestack will
 therefore wrap the UI defined in the `response` method with some markup enabling
 dynamic UI behavior and CSS styling.
 
-The app ships a `Vuex store` and `Vue.js event hub`, which are used by core vuejs
-components and can optionally be used by custom vuejs components in order to
+The app ships a `Vuex store` and `Vue.js event hub`, which are used by core Vue.js
+components and can optionally be used by custom Vue.js components in order to
 trigger events, manage client side date and communicate between components.
 
 ## An App can wrap pages with a layout

docs/api/000-base/30-vue_js_component.md

@@ -1,18 +1,18 @@
-# VueJs Component
+# Vue.js Component
 
 In order to equip a Ruby component with some JavaScript, we associate
-the Ruby component with a VueJs JavaScript component. The Ruby component therefore needs to inherit
+the Ruby component with a Vue.js JavaScript component. The Ruby component therefore needs to inherit
 from `Matestack::Ui::VueJsComponent`. Matestack will then render a HTML component
 tag with some special attributes and props around the response defined in the
-Ruby component. The VueJs JavaScript component (defined in a separate JavaScript file and
+Ruby component. The Vue.js JavaScript component (defined in a separate JavaScript file and
 managed via Sprockets or Webpacker) will treat the response of the Ruby
 component as its template.
 
 ## Structure, files and registry
 
-A VueJs component is defined by two files. A Ruby file and a JavaScript file:
+A Vue.js component is defined by two files. A Ruby file and a JavaScript file:
 
-### VueJs Ruby component
+### Vue.js Ruby component
 
 Within the Ruby file, the Ruby class inherits from `Matestack::Ui::VueJsComponent`:
 
@@ -48,9 +48,9 @@ module Components::Registry
   )
 end
 ```
-### VueJs JavaScript component
+### Vue.js JavaScript component
 
-The VueJs JavaScript component is defined in a separate JavaScript file:
+The Vue.js JavaScript component is defined in a separate JavaScript file:
 
 `app/matestack/components/some_component.js`
 
@@ -73,7 +73,7 @@ it right next to the Ruby component file.
 
 *Important*
 
-The VueJs JavaScript file needs to be imported by some kind of JavaScript package
+The Vue.js JavaScript file needs to be imported by some kind of JavaScript package
 manager. This could be `Sprockets` or `Webpacker`
 
 For **Sprockets** it would be something like:
@@ -112,29 +112,29 @@ If setup correctly, matestack will render the component to:
 </component>
 ```
 
-As you can see, the component tag is referencing the VueJs JavaScript component via `is`
+As you can see, the component tag is referencing the Vue.js JavaScript component via `is`
 and tells the JavaScript component that it should use the inner html (coming from the `response` method)
 as the `inline-template` of the component.
 
 `{{ foo }}` will be evaluated to "bar" as soon as Vue.js has booted and mounted
 the component in the browser.
 
-Matestack will inject JSON objects into the VueJs JavaScript component through
+Matestack will inject JSON objects into the Vue.js JavaScript component through
 the `component-config` and `params` props if either component config or params are
 available. This data is injected once on initial serverside rendering of the component's
-markup. See below, how you can pass in data to the VueJs JavaScript component.
+markup. See below, how you can pass in data to the Vue.js JavaScript component.
 
-## VueJs Ruby component API
+## Vue.js Ruby component API
 
 ### Same as component
 
-The basic VueJs Ruby component API is the same as described within the
+The basic Vue.js Ruby component API is the same as described within the
 [component API documenation](/docs/api/000-base/20-component.md). The options below extend
 this API.
 
-### Referencing the VueJs JavaScript component
+### Referencing the Vue.js JavaScript component
 
-As seen above, the VueJs JavaScript component name has to be referenced in the VueJs
+As seen above, the Vue.js JavaScript component name has to be referenced in the Vue.js
 Ruby component using the `vue_js_component_name` class method
 
 `app/matestack/components/some_component.rb`
@@ -148,7 +148,7 @@ class SomeComponent < Matestack::Ui::VueJsComponent
 end
 ```
 
-### Passing data to the VueJs JavaScript component
+### Passing data to the Vue.js JavaScript component
 
 Like seen above, matestack renders a `component-config` prop as an attribute of
 the component tag. In order to fill in some date there, you should use the `setup`
@@ -174,9 +174,9 @@ This data is then available as:
 this.componentConfig["some_serverside_data"]
 ```
 
-within the VueJs JavaScript component.
+within the Vue.js JavaScript component.
 
-## VueJs JavaScript component API
+## Vue.js JavaScript component API
 
 ### Component mixin
 
@@ -279,6 +279,6 @@ As we're pretty much implementing pure Vue.js components, you can refer to the
 [Vue.js guides](https://vuejs.org/v2/guide/) in order to learn more about Vue.js component
 usage
 
-## VueJs JavaScript component scope
+## Vue.js JavaScript component scope
 
 TODO

docs/api/000-base/40-isolated_component.md

@@ -155,7 +155,7 @@ With `init_on` you can specify events on which the isolate components gets initi
 
 #### public_options
 
-You can pass data as a hash to your custom isolate component with the `public_options` option. This data is inside the isolate component accessible via a hash with indifferent access, for example `public_options[:item_id]`. All data contained in the `public_options` will be passed as json to the corresponding vue component, which means this data is visible on the client side as it is rendered in the vue component config. So be careful what data you pass into `public_options`!
+You can pass data as a hash to your custom isolate component with the `public_options` option. This data is inside the isolate component accessible via a hash with indifferent access, for example `public_options[:item_id]`. All data contained in the `public_options` will be passed as json to the corresponding Vue.js component, which means this data is visible on the client side as it is rendered in the Vue.js component config. So be careful what data you pass into `public_options`!
 
 Due to the isolation of the component the data needs to be stored on the client side as to encapsulate the component from the rest of the UI.
 For example: You want to render a collection of models in single components which should be able to rerender asynchronously without rerendering the whole UI. Since we do not rerender the whole UI there is no way the component can know which of the models it should rerender. Therefore passing for example the id in the public_options hash gives you the possibility to access the id in an async request and fetch the model again for rerendering. See below for examples.
@@ -346,7 +346,7 @@ With `init_on: 'init_time'` you can specify an event on which the isolated compo
 
 ### Example 6 - Use custom data in isolated components
 
-Like described above it is possible to use custom data in your isolated components. Just pass them as a hash to `public_options` and use them in your isolated component. Be careful, because `public_options` are visible in the raw html response from the server as they get passed to a vue component.
+Like described above it is possible to use custom data in your isolated components. Just pass them as a hash to `public_options` and use them in your isolated component. Be careful, because `public_options` are visible in the raw html response from the server as they get passed to a Vue.js component.
 
 Lets render a collection of models and each of them should rerender when a user clicks a corresponding refresh button. Our model is called `Match`, representing a soccer match. It has an attribute called score with the current match score.
 
@@ -401,5 +401,5 @@ end
 ```
 
 This page will render a match_isolated_score component for each match.
-If one of the isolated components gets rerendered we need the id in order to fetch the correct match. Because the server only resolves the isolated component instead of the whole UI it does not know which match exactly is requested unless the client requests a rerender with the match id. This is why `public_options` options are passed to the client side vue component.
+If one of the isolated components gets rerendered we need the id in order to fetch the correct match. Because the server only resolves the isolated component instead of the whole UI it does not know which match exactly is requested unless the client requests a rerender with the match id. This is why `public_options` options are passed to the client side Vue.js component.
 So if match two should be rerendered the client requests the match_isolated_score component with `public_options: { id: 2 }`. With this information our isolated component can fetch the match and rerender itself.

docs/api/000-base/50-event_hub.md

@@ -1,8 +1,8 @@
-### Event Hub
+# Event Hub
 
 Matestack offers an event hub, which can be used to communicate between components.
 
-#### Emitting events
+## Emitting events
 
 `app/matestack/components/some_component.js`
 
@@ -20,7 +20,7 @@ MatestackUiCore.Vue.component('some-component', {
 
 Use `MatestackUiCore.matestackEventHub.$emit(EVENT_NAME, OPTIONAL PAYLOAD)`
 
-#### Receiving events
+## Receiving events
 
 `app/matestack/components/some_component.js`
 

docs/api/000-base/README.md

@@ -52,10 +52,10 @@ wrapping elements by default.
 #### VueJsComponent
 
 In order to equip a Ruby component with some JavaScript, we associate
-the Ruby component with a VueJs JavaScript component. The Ruby component therefore needs to inherit
+the Ruby component with a Vue.js JavaScript component. The Ruby component therefore needs to inherit
 from `Matestack::Ui::VueJsComponent`. Matestack will then render a HTML component
 tag with some special attributes and props around the response defined in the
-Ruby component. The VueJs JavaScript component (defined in a separate JavaScript file and
+Ruby component. The Vue.js JavaScript component (defined in a separate JavaScript file and
 managed via Sprockets or Webpacker) will treat the response of the Ruby
 component as its template.
 
@@ -112,8 +112,8 @@ An app is a special kind of `Matestack::Ui::VueJsComponent`. Matestack will
 therefore wrap the UI defined in the `response` method with some markup enabling
 dynamic UI behavior and CSS styling.
 
-The app ships a `Vuex store` and `Vue.js event hub`, which are used by core vuejs
-components and can optionally be used by custom vuejs components in order to
+The app ships a `Vuex store` and `Vue.js event hub`, which are used by core Vue.js
+components and can optionally be used by custom Vue.js components in order to
 trigger events, manage client side date and communicate between components.
 
 Learn more about [apps](/docs/api/000-base/10-app.md)

docs/api/100-components/cable.md

@@ -18,7 +18,7 @@ consumer.subscriptions.create("MatestackUiCoreChannel", {
 ## `cable(*args, &block)`
 ----
 
-Returns a vue.js driven cable component, initially containing content specified by a block.
+Returns a Vue.js driven cable component initially containing content specified by a block.
 
 Imagine something like this:
 

docs/api/100-components/form.md

@@ -932,9 +932,9 @@ end
 
 ```
 
-## Form and other VueJs components
+## Form and other Vue.js components
 
-The child components `form_*` have to be placed within the scope of the parent `form` component, without any other VueJs component like `toggle`, `async` creating a new scope between the child component and the parent form component**
+The child components `form_*` have to be placed within the scope of the parent `form` component, without any other Vue.js component like `toggle`, `async` creating a new scope between the child component and the parent form component**
 
 
 ```ruby

docs/guides/000-installation/README.md

@@ -18,7 +18,7 @@ $ bundle install
 
 ### JavaScript Setup
 
-Matestack uses JavaScript and, in particular, [vuejs](http://vuejs.org). To include these into your existing rails app, matestack supports both, [webpack](https://webpack.js.org/)([er](https://github.com/rails/webpacker/)) and the [asset pipeline](https://guides.rubyonrails.org/asset_pipeline.html).
+Matestack uses JavaScript and, in particular, [Vue.js](http://vuejs.org). To include these into your existing rails app, matestack supports both, [webpack](https://webpack.js.org/)([er](https://github.com/rails/webpacker/)) and the [asset pipeline](https://guides.rubyonrails.org/asset_pipeline.html).
 
 Rails 6+ apps use webpacker by default. Rails 5 and below apps use the asset pipeline by default.
 
@@ -31,7 +31,7 @@ $ yarn add https://github.com/matestack/matestack-ui-core#v1.1.0
 $ yarn install
 ```
 
-This adds the npm package that provides the javascript corresponding to the matestack-ui-core ruby gem. Make sure that the npm package version matches the gem version. To find out what gem version you are using, you may use `bundle info matestack-ui-core`.
+This adds the npm package that provides the JavaScript corresponding to the matestack-ui-core ruby gem. Make sure that the npm package version matches the gem version. To find out what gem version you are using, you may use `bundle info matestack-ui-core`.
 
 Next, import 'matestack-ui-core' in your `app/javascript/packs/application.js`
 
@@ -49,7 +49,7 @@ When you update the matestack-ui-core gem, make sure to update the npm package a
 
 #### Asset Pipeline
 
-If you are using the asset pipeline, you don't need to install the separate npm package. All required javascript libraries are provided by the matestack-ui-core gem.
+If you are using the asset pipeline, you don't need to install the separate npm package. All required JavaScript libraries are provided by the matestack-ui-core gem.
 
 Require 'matestack-ui-core' in your `app/assets/javascript/application.js`
 

docs/guides/100-tutorial/00_introduction.md

@@ -10,7 +10,7 @@ This guide is designed for Ruby on Rails beginners, advanced and experienced dev
 
 ## What is Matestack?
 
-Matestack deeply integrates a Vue.js based UI into Ruby on Rails, offering prebuilt components. Use these prebuild components to write dynamic Web-UIs mostly in pure Ruby and with minimum effort. Matestack enables you to develop rich SPA like interfaces in no time and without touching javascript. And if you need to go deeper you can always create your own custom components to do so. 
+Matestack deeply integrates a Vue.js based UI into Ruby on Rails, offering prebuilt components. Use these prebuild components to write dynamic Web-UIs mostly in pure Ruby and with minimum effort. Matestack enables you to develop rich SPA like interfaces in no time and without touching JavaScript. And if you need to go deeper you can always create your own custom components to do so. 
 
 ## Concept
 
@@ -38,11 +38,11 @@ For nearly all existing HTML5 Tags there is a component in order to create a ui
 
 #### `Matestack::Ui::VueJsComponent`'s
 
-VueJsComponents are more complex components. These always have a Vue.js counterpart and enable easy development of dynamic ui elements which would usually require you to write javascript code. VueJsComponents provide an abstraction so you don't have to write javascript code and instead create rich interfaces in Ruby. Visit the [components API documentation](/docs/api/100-components/) for more information about `Matestack::Ui::VueJsComponent`'s.
+VueJsComponents are more complex components. These always have a Vue.js counterpart and enable easy development of dynamic ui elements which would usually require you to write JavaScript code. VueJsComponents provide an abstraction so you don't have to write JavaScript code and instead create rich interfaces in Ruby. Visit the [components API documentation](/docs/api/100-components/) for more information about `Matestack::Ui::VueJsComponent`'s.
 
 ## Recap & outlook
 
 We introduced you to the apps, pages and components concepts of matestack. In order to unterstand better how matestack works, we create an application from the ground up using matestack and enhancing it step by step while leveraging more and more features of matestack.
 Read the following guides to get started with matestack and get a better understanding about how apps, pages, components work.
 
-Let's setup a rails app with matestack by following the [next guide](/docs/guides/100-tutorial/01_setup.md)
+Let's setup a rails app with matestack by following the [next guide](/docs/guides/100-tutorial/01_setup.md)

docs/guides/100-tutorial/06_async_component.md

@@ -65,7 +65,7 @@ But how can we easily update the list, when the delete action was successful? Re
 
 ## Rerender list when person is deleted
 
-When a person is deleted an event is emitted, but nothing more happens, but we want to update the list of persons, so we no longer see the deleted person in the list. In order to achieve this we could write some javascript which would manipulate the dom or we can use matestacks `async` component and get the result we want in no time and without touching any javascript. Okay, so let's update our index page like this:
+When a person is deleted an event is emitted, but nothing more happens, but we want to update the list of persons, so we no longer see the deleted person in the list. In order to achieve this we could write some JavaScript which would manipulate the dom or we can use matestacks `async` component and get the result we want in no time and without touching any JavaScript. Okay, so let's update our index page like this:
 
 ```ruby
 class Demo::Pages::Persons::Index
@@ -125,6 +125,6 @@ git add . && git commit -m "add delete button to person list and update it dynam
 
 ## Recap & outlook
 
-We added a delete button to our person list on the index page. When a person is deleted our list gets automatically updated without even reloading the page, just by updating the part that is needed. And all of that with a few lines of code and without writing any javascript.
+We added a delete button to our person list on the index page. When a person is deleted our list gets automatically updated without even reloading the page, just by updating the part that is needed. And all of that with a few lines of code and without writing any JavaScript.
 
 Take a well deserved rest and make sure to come back to the next part of this series, introducing [partials and custom components](/docs/guides/100-tutorial/07_partials_and_custom_components.md).