quilt_rails 1.11.1 → 1.12.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0375ff704f3b5de3a726c3483e1aee2808871d0979a6e4a35f03d490ad5f9c47
-  data.tar.gz: 6ccb28ab1d0ac38f149922668ef43acfa5c43811a2b4c683772d28243614d6e9
+  metadata.gz: 801ba2d2d619ae8c7a6714bf69f06a8edeb2ae7edc1d0255f8e9df57755be211
+  data.tar.gz: bc17c1c983af45c573a589c1c9ae84d241b1af242a996d33998aa360ef560ae7
 SHA512:
-  metadata.gz: 6999712f3a0bab58d7e824f2d9caf3570385e613cf77dc7adcc24eda499464a923bcfdbe9fb5caa64c2647448e1d49c89e4e932a6e49d2479cbbc7a6ff42ab0a
-  data.tar.gz: 60013d5daf244057e5edf7c21f1fdadc8eefb5ff966fba8754077ae07af0a228f6aa5ea70f962f0af80044e20729af5d2a6ed8e41ec70039520c80d44716e245
+  metadata.gz: a3f14ae99c0e106a9b3a71606c7489c20c99446a91e8ddfe20ed7b294bab50a358927cb6f6e70ed295b814fe7b520039e7f14dcb68cb1a2d7395b934f92f3c3d
+  data.tar.gz: 21b493fecf60259353c8df068c219d51de3eb3859cf4889bc8f44b6c4ea8f2993c6e08d1f58dad0585bf98d9f10128a4001e651528afb779d3008f5b8ca902b1

data/README.md

@@ -11,6 +11,7 @@ A turn-key solution for integrating Quilt client-side libraries into your Rails
     - [Generate Quilt boilerplate](#generate-quilt-boilerplate)
     - [Try it out](#try-it-out)
   - [Manual Install](#manual-installation)
+    - [Generate Rails boilerplate](#generate-rails-boilerplate)
     - [Install Dependencies](#install-dependencies)
     - [Setup the Rails app](#setup-the-rails-app)
     - [Add JavaScript](#add-javascript)
@@ -21,6 +22,7 @@ A turn-key solution for integrating Quilt client-side libraries into your Rails
     - [Interacting with the request and response in React code](#interacting-with-the-request-and-response-in-react-code)
     - [Dealing with isomorphic state](#dealing-with-isomorphic-state)
     - [Customizing the node server](#customizing-the-node-server)
+    - [Fixing rejected CSRF tokens for new user sessions](#fixing-rejected-csrf-tokens-for-new-user-sessions)
 - [Performance tracking a React app](#performance-tracking-a-react-app)
   - [Install dependencies](#install-dependencies)
   - [Setup an endpoint for performance reports](setup-an-endpoint-for-performance-reports)
@@ -80,7 +82,10 @@ This will install the Node dependencies, provide a basic React app (in TypeScrip
 
 #### Try it out
 
-`dev server`
+```sh
+dev up
+dev server
+```
 
 Will run the application, starting up both servers and compiling assets.
 
@@ -88,6 +93,8 @@ Will run the application, starting up both servers and compiling assets.
 
 An application can also be setup manually using the following steps.
 
+[Generate Rails boilerplate](#generate-rails-boilerplate)
+
 #### Install dependencies
 
 ```sh
@@ -100,6 +107,25 @@ yarn add @shopify/sewing-kit @shopify/react-server
 # Add React
 yarn add react react-dom
 
+# Add Typescript
+yarn add typescript @types/react @types/react-dom
+```
+
+##### Define typescript config
+
+```json
+// tsconfig.json
+{
+  "extends": "@shopify/typescript-configs/application.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": "."
+  },
+  "include": ["app/ui"]
+}
+```
+
+```sh
 yarn
 dev up
 ```
@@ -303,67 +329,45 @@ function App() {
 export default App;
 ```
 
-##### Example: sending headers from Rails controller
+##### Example: sending custom data from Rails controller
+
+In some cases you may want to send custom headers or basic data from Rails to your React server. Quilt facilitates this case by providing consumers with a `headers` and `data` argument on the `render_react` call.
+
+**Note:** The data passed should be data that is unlikely or will never change over the course of the session before they render any React components.
 
 ```ruby
 class ReactController < ApplicationController
   include Quilt::ReactRenderable
 
   def index
-    render_react(headers: { 'x-custom-header': 'header-value-a' })
+    render_react(headers: {'x-custom-header': 'header-value-a'}, data: {'some_id': 123})
   end
 end
 ```
 
-You will need to serialize the result of the useRequestHeader hook in order for it to persist to the client
-
-```tsx
-// app/ui/foundation/CustomUniversalProvider.tsx
-import {createContext} from 'react';
-import {createUniversalProvider} from '@shopify/react-universal-provider';
-
-export const CustomContext = createContext<string | null>(null);
-export const CustomUniversalProvider = createUniversalProvider('custom-key', CustomContext);
-```
+The React server will serialize the provided quilt data using `x-quilt-data` as the ID. You can then get this serialized data on the client with `getSerialized` from `@shopify/react-html`.
 
 ```tsx
 // app/ui/index.tsx
 
 import React from 'react';
-import {useRequestHeader} from '@shopify/react-network';
-import {CustomUniversalProvider} from './foundation/CustomUniversalProvider';
-import {ComponentWithCustomHeader} from './components/ComponentWithCustomHeader';
+import {getSerialized} from '@shopify/react-html';
+
+const IS_CLIENT = typeof window !== 'undefined';
 
 function App() {
-  // get `x-custom-header` from the request that was sent through Rails ReactController
-  const customHeader = useRequestHeader('x-custom-header');
+  // get `x-quilt-data` from the request that was sent through Rails ReactController
+  const quiltData = IS_CLIENT ? getSerialized<{[key: string]: any}>('x-quilt-data') : null;
 
-  return (
-    <CustomUniversalProvider value={customHeader}>
-      <h1>My application ❤️</h1>
-      <ComponentWithCustomHeader />
-    </CustomUniversalProvider>
-  );
+  // Logs {"x-custom-header":"header-value-a","some_id":123}
+  console.log(quiltData);
+
+  return <h1>Data: {quiltData}</h1>;
 }
 
 export default App;
 ```
 
-```tsx
-// app/ui/components/ComponentWithCustomHeader.tsx
-
-import React, {useContext} from 'react';
-import {CustomContext} from '../foundation/CustomUniversalProvider';
-
-export function ComponentWithCustomHeader() {
-  // get `x-custom-header` from serialized context
-  // will be 'header-value-a' in this example
-  const customHeader = useContext(CustomContext);
-
-  return <span>{customHeader}</span>;
-}
-```
-
 ##### Example: redirecting
 
 ```tsx
@@ -424,7 +428,7 @@ class GraphqlController < ApplicationController
 end
 ```
 
-If your API **does** require session data, you may can use follow the following steps:
+If your API **does** require session data, you can follow these steps:
 
 - Add an `x-shopify-react-xhr` header to all GraphQL requests with a value of 1 (this is done automatically if you are using `@shopify/react-graphql-universal-provider`)
 - Add a `protect_from_forgery with: Quilt::HeaderCsrfStrategy` override to your controllers
@@ -445,8 +449,6 @@ class GraphqlController < ApplicationController
 end
 ```
 
--
-
 ## Performance tracking a React app
 
 Using [`Quilt::Performance::Reportable`](#performanceReportable) and [@shopify/react-performance](https://www.npmjs.com/package/@shopify/react-performance) it's easy to add performance tracking to apps using[`sewing_kit`](https://github.com/Shopify/sewing-kit/tree/master/gems/sewing_kit#sewing_kit-) for client-side-rendering or `quilt_rails` for server-side-rendering.

data/lib/quilt_rails/react_renderable.rb

@@ -6,29 +6,29 @@ module Quilt
   module ReactRenderable
     include ReverseProxy::Controller
 
-    def render_react(headers: {})
+    def render_react(headers: {}, data: {})
       raise DoNotIntegrationTestError if Rails.env.test?
 
       # Allow concurrent loading to prevent this thread from blocking class
       # loading in controllers called by the Node server.
       ActiveSupport::Dependencies.interlock.permit_concurrent_loads do
-        call_proxy(headers)
+        call_proxy(headers, data)
       end
     end
 
     private
 
-    def call_proxy(headers)
+    def call_proxy(headers, data)
       if defined? ShopifySecurityBase
         ShopifySecurityBase::HTTPHostRestriction.whitelist([Quilt.configuration.react_server_host]) do
-          proxy(headers)
+          proxy(headers, data)
         end
       else
-        proxy(headers)
+        proxy(headers, data)
       end
     end
 
-    def proxy(headers)
+    def proxy(headers, data)
       url = "#{Quilt.configuration.react_server_protocol}://#{Quilt.configuration.react_server_host}"
       Quilt::Logger.log("[ReactRenderable] proxying to React server at #{url}")
 
@@ -37,7 +37,11 @@ module Quilt
       end
 
       begin
-        reverse_proxy(url, headers: headers.merge('X-CSRF-Token': form_authenticity_token)) do |callbacks|
+
+        reverse_proxy(
+          url,
+          headers: headers.merge('X-CSRF-Token': form_authenticity_token, 'X-Quilt-Data': headers.merge(data).to_json)
+        ) do |callbacks|
           callbacks.on_response do |status_code, _response|
             Quilt::Logger.log("[ReactRenderable] #{url} returned #{status_code}")
           end

data/lib/quilt_rails/version.rb

@@ -1,4 +1,4 @@
 # frozen_string_literal: true
 module Quilt
-  VERSION = "1.11.1"
+  VERSION = "1.12.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: quilt_rails
 version: !ruby/object:Gem::Version
-  version: 1.11.1
+  version: 1.12.0
 platform: ruby
 authors:
 - Mathew Allen
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-03-24 00:00:00.000000000 Z
+date: 2020-05-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties