@expressive/mvc 1.0.0-beta.3 → 1.0.0-beta.30

package/README.md

@@ -14,6 +14,7 @@
 <p align="center">
   <a href="https://www.npmjs.com/package/@expressive/mvc"><img alt="NPM" src="https://badge.fury.io/js/%40expressive%2Fmvc.svg"></a>
   <a href=""><img alt="Build" src="https://shields-staging.herokuapp.com/npm/types/@expressive/mvc.svg"></a>
+  <img src="https://img.shields.io/badge/Coverage-100%25-brightgreen.svg">
 </p>
 
 <p align="center">
@@ -23,9 +24,18 @@
 </p>
 
 <br/>
-<h1 id="overview-section"></h1>
+<p align="center">
+  <b>Have suggestions, need help or just want to discuss?</b><br/><br/>
+  <a href="https://join.slack.com/t/expressivejs/shared_invite/zt-s2j5cdhz-gffKn3bTATMbXf~iq4pvHg" alt="Join Slack">
+    <img src="https://img.shields.io/badge/Slack-Come%20say%20hi!-blueviolet" />  
+  </a>
+</p>
+
+<br/>
+<h1 id="overview-section">Overview</h1>
+
+Classes which extend `Model` can manage behavior for components. Custom models are easy to define, use and even provide. While hooks are great, state and logic are not a part of well-formed JSX. Models help wrap that stuff in robust, portable controllers instead.
 
-Classes which extend `Model` can manage state and logic for components. Custom models are easy to define, use and even provide. Hooks are great, but state and logic are not a part of well-formed components. Models help wrap that stuff in robust, portable controllers instead.
 
 <br/>
 
@@ -87,7 +97,7 @@ const MyComponent = () => {
 <br/>
 
 ### Refresh using simple assignment
-Reserved `set` loops back to instance, to update from inside a component.
+Reserved `set` loops back to the instance, to update from inside a component.
 
 ```jsx
 class Hello extends Model {
@@ -199,7 +209,7 @@ const MyComponent = () => {
 <br/>
 
 ### Extend to configure
-Custom models may be extended to set needed properties.
+Use class extension to set needed properties.
 Reusable logic is easy to implement, document and share. 
 
 ```ts
@@ -496,10 +506,10 @@ class Timer extends Model {
 
 A getter's value is cached, facing the user. It will only run when a dependency changes, and **not upon access** as you might expect. However, getters are also lazy, so first access is one exception.
 
-Because getters run whenever a controller thinks they *could* change, make sure to design them along these principles:
+Getters run whenever a controller thinks they *could* change. Make sure to design them along these lines:
 - Getters should be deterministic. Only expect a change where inputs have changed.
 - Avoid computing from values which change a lot, but don't change output as often.
-- [Goes without saying](https://www.youtube.com/watch?v=0i0IlSKn0sE "Goes Without Saying") but, **side-effects are an anti-pattern** and can cause infinite loops.
+- [Goes without saying](https://www.youtube.com/watch?v=0i0IlSKn0sE "Goes Without Saying") but, **side-effects are an anti-pattern** and may cause infinite loops.
 
 <br/>
 
@@ -535,7 +545,7 @@ const SayHello = ({ fullName }) => {
 
 <h2 id="concept-passing-props">Assigning props to state</h2>
 
-Besides `use`, similar methods will assign values after a controller is created. This is a great alternative to a manual setup, as done previously.
+Besides `use`, similar methods will assign values after a controller is created. Good alternative to a manual setup.
 
 <h4 id="method-uses"><code>Model.uses(source, keys?)</code></h4>
 
@@ -797,8 +807,6 @@ Sometimes, we want to react to changes coming from outside, usually via props. O
 
 This method helps watch an object by running [`assign`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) on it *every render*. Because controllers only react to new values, this makes for a simple way to watch externals. Combine this with getters and event-listeners, to do things when inputs change.
 
-<br />
-
 ```ts
 class ActivityTracker extends Model {
   active = undefined;
@@ -843,8 +851,6 @@ const Activate = () => {
 
 <sup><a href="https://codesandbox.io/s/example-using-method-wvrtu">View in CodeSandbox</a></sup>
 
-With this, we can interact with all different sorts of state!
-
 > **Note:** Method is also picky (ala `uses`), and will ignore values which don't already exist in state.
 
 <br />
@@ -1323,7 +1329,7 @@ class Greet extends Model {
   }
 }
 ```
-Create a controller which taps another one. Make sure it's wrapped by proper `Provider`, and controller will fetch that instance from context.
+Create a controller which taps another one. Make sure it's wrapped by proper `Provider`, and the controller will fetch that instance from context.
 ```js
 import { Provider } from "@expressive/mvc";
 
@@ -1412,8 +1418,8 @@ class FooBar extends Model {
     return this.foo.value + this.bar.value;
   }
 
-  plusFoo = () => this.bar.value = this.value;
-  plusBar = () => this.foo.value = this.value;
+  addFoo = () => this.bar.value = this.value;
+  addBar = () => this.foo.value = this.value;
 }
 ```
 
@@ -1421,17 +1427,17 @@ class FooBar extends Model {
 
 ```js
 const FibonacciApp = () => {
-  const { foo, bar, value, plusFoo, plusBar } = FooBar.use();
+  const { foo, bar, value, addFoo, addBar } = FooBar.use();
 
   return (
     <div>
       <div>
         Foo + Bar = {value}
       </div>
-      <div onClick={plusBar}>
+      <div onClick={addBar}>
         Foo's value is ${foo.value}, click to add in bar!
       </div>
-      <div onClick={plusFoo}>
+      <div onClick={addFoo}>
         Bar's value is ${bar.value}, click to add in foo!
       </div>
     </div>