@thoughtbot/superglue 0.51.1 → 0.52.1

package/README.md

@@ -1,3 +1,7 @@
+<div align="center" style="padding: 30px 0px 20px 0px;">
+  <img src="https://thoughtbot.github.io/superglue/images/superglue.svg" data-origin="images/superglue.svg" alt="Logo" width=250>
+</div>
+
 # Superglue
 
 Use classic Rails to build rich React Redux applications with **NO APIs** and
@@ -5,11 +9,11 @@ Use classic Rails to build rich React Redux applications with **NO APIs** and
 
 [![Build Status](https://circleci.com/gh/thoughtbot/superglue.svg?style=shield)](https://circleci.com/gh/thoughtbot/superglue)
 
-Superglue makes React and Redux equally as productive as Hotwire, Turbo and
-Stimulus. Its inspired by Turbolinks and designed to feel like a natural
-extension of Rails. Enjoy the benefits of Redux state management and React
-components without giving up the productivity of Rails form helpers, UJS,
-tag helpers, flash, cookie auth, and more.
+Superglue makes React and Redux as productive as Hotwire, Turbo and Stimulus.
+Its inspired by Turbolinks and designed to feel like a natural extension of
+Rails. Enjoy the benefits of Redux state management and React components
+without giving up the productivity of Rails form helpers, UJS, tag helpers,
+flash, cookie auth, and more.
 
 ## Caution
 
@@ -30,22 +34,22 @@ The end result would be something like this:
 ![No Apis](https://thoughtbot.github.io/superglue/images/no_apis.png)
 
 ### Powered by Classic Rails
-Superglue is mostly classic Rails. Features like the flash, cookie auth, and URL
+Superglue leans on Rails. Features like the flash, cookie auth, and URL
 helpers continue to be useful. Here's a look at the directory structure of a
 typical Rails application with Superglue.
 
-```
-MyRailsApp/
-  app/
-  views/
-  dashboard/
-    index.html.erb <- Mostly empty. Where `index.json.props` gets rendered as initial state
-    index.js <- Your page component, will receive `index.json.props`. Gets packaged with application.js
-    index.json.props <- will also respond to `.json` requests
+```treeview
+app/
+|-- controllers/
+|-- views/
+|   |-- dashboard/
+|   |   |-- index.js # The React page component
+|   |   |-- index.json.props # The json for the page component
+|   |   |-- index.html.erb
 ```
 
 ### PropsTemplate
-Powering these JSON responses is PropsTemplate, a traversable JSON templating DSL
+Powering the JSON responses is PropsTemplate, a digable JSON templating DSL
 inspired by JBuilder. With PropsTemplate you can specify a path of the node you
 want, and PropsTemplate will walk the tree to it, skipping the execution of nodes
 that don't match the keypath.
@@ -61,36 +65,38 @@ A popular ask of SPAs is page-to-page navigation without reloading. This is
 easily done with Superglue's own UJS attributes inspired by Turbolinks:
 
 ```jsx
-  <a href='/posts' data-sg-visit={true} />
+  <a href='/posts' data-sg-visit />
 ```
 
 The above will request for `/posts` with an `accept` of `application/json`, and
 when the client receives the response, swap out the current component for the
 component the response asks for, and `pushState` on history.
 
-#### Partial updates
-Some features rely on updating some parts of the existing page. In
-addition to `data-sg-visit` and it's equivalent `this.props.visit`, Superglue
-also provides `data-sg-remote` or `this.props.remote`, which you can use to
-update parts of your page in async fashion without changing `window.history`.
 
-Imagine having to implement search, where you enter some text, hit enter, and
-results would show without reloading the screen. In traditional applications,
-you may need a new controller, routes, a discussion over versioning, JSON
-serializer, plenty of new JS code, etc.
+#### Easy Partial updates
+Some features rely on updating some parts of the existing page. Imagine
+implementing type-ahead search. In traditional applications, you may need a new
+controller, routes, a discussion over versioning, JSON serializer, plenty of
+new JS code, etc.
 
 ![haircuts](https://thoughtbot.github.io/superglue/images/haircuts.png)
 
-With Superglue, this can be done in one line:
+With Superglue, this can be done with a simple `onChange`
 
-```javascript
-  this.props.remote('/dashboard?qry=haircut&props_at=data.header.search')
+```js
+const onChange = (e) => (
+  remote(`/dashboard?qry=${e.target.value}&props_at=data.header.search`)}
+)
 ```
 
-The above will make a request to `/dashboard?qry=haircut`, walk your props to
-the `data.header.search` node, return it in the response, and immutably graft it
-in the exact same path on the redux store before finally letting React
-re-render.
+?> `remote` and `visit` is a thunk [passed] to every page component.
+
+  [passed]: ./navigation.md
+
+With `props_at`, the above will make a request to `/dashboard?qry=haircut`,
+dig your template for the `data.header.search` node, return it in the response,
+and immutably graft it in the exact same path on the redux store before finally
+letting React re-render.
 
 For more on what you can do, check out our documentation.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thoughtbot/superglue",
-  "version": "0.51.1",
+  "version": "0.52.1",
   "description": "Use a vanilla Rails with React and Redux",
   "repository": {
     "type": "git",

package/utils/immutability.js

@@ -114,10 +114,6 @@ function atKey(node, key) {
     throw new KeyPathError("Expected to find an Array when using the key: " + key);
   }
 
-  if (isObject(node) && !Object.prototype.hasOwnProperty.call(node, key)) {
-    throw new KeyPathError("Expected to find key: " + key + " in object " + JSON.stringify(node));
-  }
-
   if (Array.isArray(node) && id) {
     var child;