quilt_rails 2.0.0 → 3.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c6dead256d2474833a254f212522b7e05b4c7a798d082a2a84b7b2003606583d
-  data.tar.gz: c77e268a3c4be95a2990087ad03400cf16c5b8ba8fcd25f36cbb095b7ce6d169
+  metadata.gz: 368430de6c7c02cfc1a3c569997ca045cbd08afe6a463143740adf0c3d8c3989
+  data.tar.gz: c0e39d8dd544865e466ea919fe3414c722411c0d0f91757a82abac333fb17f2a
 SHA512:
-  metadata.gz: ebc9c4a21b3e5046583a3e9711c084856c2a46844806f058d26e0bc90b06bab6f9be7074b91c216d75ccfb6883fe20c01fc250744a6c2b725b63633b88046ae5
-  data.tar.gz: 4c490e4b849cd5a6e548285129eaa130c7217c4d9534b76899a274983ce298a568d5e7713d59a31bd1406e4f46e91ce34b4d4b2c089ecf424cd704d572a2b638
+  metadata.gz: 65fec4f054fd578870567e4528ebd6b5e335877db8096d6af27775869a2fd7ecce8547ed6f0104c6e542cc58bb00ed98a2148a915198d4512f5eb769f2d023f8
+  data.tar.gz: c17031bff1b39d21b771e062dbdc5745e78b937a21989b444ca46d68cee1d6ead8b7b00e8b2c0131b6f0d656fa8fed962a37241e3c244f05716e7a19b4eb1c36

data/README.md

@@ -23,7 +23,7 @@ A turn-key solution for integrating Quilt client-side libraries into your Rails
 
 ## Server-side-rendering
 
-🗒 This guide is focused on internal Shopify developers with access to [`dev`](https://github.com/Shopify/dev) and [@shopify/sewing-kit](https://github.com/Shopify/sewing-kit). A similar setup can be achieved using the [manual installation](./docs/manual-installation.md) , and following the [react-server webpack plugin](../../packages/react-server/README.md#webpack-plugin) guide. Apps not running on Shopify infrastructure should [disable server-side GraphQL queries](./docs/FAQ.md) to avoid scalability issue.
+🗒 This guide is focused on internal Shopify developers with access [@shopify/sewing-kit](https://github.com/Shopify/sewing-kit). A similar setup can be achieved using the [manual installation](./docs/manual-installation.md) , and following the [react-server webpack plugin](../../packages/react-server/README.md#webpack-plugin) guide. Apps not running on Shopify infrastructure should [disable server-side GraphQL queries](./docs/FAQ.md) to avoid scalability issue.
 
 ### Quick start
 
@@ -31,12 +31,7 @@ Using the magic of generators, we can spin up a basic app with a few console com
 
 #### Generate Rails boilerplate
 
-With access to [`dev`](https://github.com/Shopify/dev), you can use `dev init` to scaffold out a Rails application.
-When prompted, choose `rails`. This will generate a basic Rails application scaffold.
-
-Alternatively, you can use [`rails new .`](https://guides.rubyonrails.org/command_line.html#rails-new) to do the same.
-
-In either case, remove [`webpacker`](./docs/FAQ.md#i-run-into-webpacker-issue-while-setting-up-quilt_rails) and [these files](./docs/FAQ.md#any-other-files-i-should-remove-before-running-generator) that any create conflict before continuing.
+Use [`rails new . --skip-javascript`](https://guides.rubyonrails.org/command_line.html#rails-new) to scaffold out a Rails application.to do the same.
 
 #### Add Ruby dependencies
 
@@ -52,13 +47,12 @@ This will generate a package.json file with common sewing-kit script tasks, defa
 
 `rails generate quilt:install`
 
-This will install Node dependencies, provide a basic React app (in TypeScript), and mount the Quilt engine in `config/routes.rb`. Basic linting and format configurations are also generated.
+This command will install Node dependencies, mount the Quilt engine in `config/routes.rb`, and provide a bare bone React app (in TypeScript) that.
 
 #### Try it out
 
 ```sh
-dev up
-dev server
+bin/rails server
 ```
 
 Will run the application, starting up both servers and compiling assets.
@@ -137,6 +131,8 @@ function App() {
 export default App;
 ```
 
+**Note:** This solution works out of the box for initial server-side renders. If you wish to have consistent access to request headers on subsequent client-side renders, take a look at [`NetworkUniversalProvider`](https://github.com/Shopify/quilt/tree/master/packages/react-network#networkuniversalprovider).
+
 ##### Example: sending custom headers from Rails controller
 
 In some cases you may want to send custom headers from Rails to your React server. Quilt facilitates this case by providing consumers with a `headers` argument on the `render_react` call.
@@ -151,6 +147,8 @@ class ReactController < ApplicationController
 end
 ```
 
+🗒️ if you don't have a controller. Follow the [instruction](./docs/manual-installation#add-a-react-controller-and-routes) to setup `quilt_rails` in a controller instead of using the engine.
+
 Headers can be accessed during server-side-rendering with the `useRequestHeader` hook from `@shopify/react-network`.
 
 ```tsx
@@ -173,6 +171,8 @@ In some cases you may want to send basic data from Rails to your React server. Q
 
 **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.
 
+**Note:** Please note the minimal dependencies require to use this feature is listed in [CHANGELOG](./CHANGELOG.md#[1.12.0]-2020-05-07)
+
 ```ruby
 class ReactController < ApplicationController
   include Quilt::ReactRenderable
@@ -183,7 +183,9 @@ class ReactController < ApplicationController
 end
 ```
 
-If using the webpack plugin, this will be automatically passed into your application as the `data` prop.
+🗒️ if you don't have a controller. Follow the [instruction](./docs/manual-installation#add-a-react-controller-and-routes) to setup `quilt_rails` in a controller instead of using the engine.
+
+If using `react-server` without a customized server & client file, this will be automatically passed into your application as the `data` prop. If `react-server` is not being used or a customized server / client file was provided, check out [`react-server/webpack-plugin`](../../packages/react-server/src/webpack-plugin/webpack-plugin.ts) on how to pass the data to React.
 
 ```tsx
 // app/ui/index.tsx
@@ -222,7 +224,7 @@ export default App;
 
 With SSR enabled React apps, state must be serialized on the server and deserialized on the client to keep it consistent. When using `@shopify/react-server`, the best tool for this job is [`@shopify/react-html`](https://github.com/Shopify/quilt/tree/master/packages/react-html)'s [`useSerialized`](https://github.com/Shopify/quilt/tree/master/packages/react-html#in-your-application-code) hook.
 
-`useSerialized` can be used to implement [universal-providers](https://github.com/Shopify/quilt/tree/master/packages/react-universal-provider#what-is-a-universal-provider-), allowing application code to manage what is persisted between the server and client without adding any custom code to client or server entrypoints. We offer some for common use cases such as [CSRF](https://github.com/Shopify/quilt/tree/master/packages/react-csrf-universal-provider), [GraphQL](https://github.com/Shopify/quilt/tree/master/packages/react-graphql-universal-provider), [I18n](https://github.com/Shopify/quilt/tree/master/packages/react-i18n-universal-provider), and the [Shopify App Bridge](https://github.com/Shopify/quilt/tree/master/packages/react-app-bridge-universal-provider).
+`useSerialized` can be used to implement [universal-providers](https://github.com/Shopify/quilt/tree/master/packages/react-universal-provider#what-is-a-universal-provider-), allowing application code to manage what is persisted between the server and client without adding any custom code to client or server entrypoints. We offer some for common use cases such as [GraphQL](https://github.com/Shopify/quilt/tree/master/packages/react-graphql-universal-provider), and [I18n](https://github.com/Shopify/quilt/tree/master/packages/react-i18n-universal-provider).
 
 #### Customizing the Node server
 
@@ -244,6 +246,10 @@ When a React component sends HTTP requests back to a Rails endpoint (e.g., `/gra
 
 If your API **does not** require session data, the easiest way to deal with this is to use `protect_from_forgery with: :null_session`. This will work for APIs that either have no authentication requirements, or use header based authentication.
 
+While `Can't verify CSRF token authenticity` error will persist, `protect_from_forgery with: :null_session` will keep CSRF protection while ensuring the session is nullified when a token is not sent in to be more secure.
+
+You can also add `self.log_warning_on_csrf_failure = false` to the controller to suppress this error all together.
+
 ##### Example
 
 ```rb
@@ -263,7 +269,7 @@ end
 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
+- Add a `protect_from_forgery with: Quilt::HeaderCsrfStrategy` override to your API controllers
 
 ##### Example
 
@@ -281,6 +287,25 @@ class GraphqlController < ApplicationController
 end
 ```
 
+#### Exception monitoring with Bugsnag
+
+For an opinionated universal Bugsnag+React setup we provide and support [`@shopify/react-bugsnag`](https://github.com/Shopify/quilt/tree/master/packages/react-bugsnag).
+
+##### Example
+
+```typescript
+// app/ui/index.tsx
+import React from 'react';
+import {Bugsnag, createBugsnagClient} from 'utilities/bugsnag';
+import {bugsnagClientApiKey} from 'config/bugsnag';
+
+const bugsnagClient = createBugsnagClient({apiKey: bugsnagClientApiKey});
+
+export function App() {
+  return <Bugsnag client={bugsnagClient}>{/* actual app content here */}</Bugsnag>;
+}
+```
+
 ## Performance tracking a React app
 
 To setup performance tracking with your React app with `quilt_rails`.

data/app/controllers/quilt/ui_controller.rb

@@ -3,6 +3,11 @@
 module Quilt
   class UiController < ApplicationController
     include Quilt::ReactRenderable
+    layout(false)
+
+    rescue_from(Quilt::ReactRenderable::ReactServerNoResponseError) do
+      render(:react_render_error, status: :internal_server_error)
+    end
 
     def index
       render_react

data/app/views/quilt/ui/react_render_error.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>React Render Error</title>
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <meta http-equiv="refresh" content="3;URL='/'" />
+  <link rel="stylesheet" href="https://unpkg.com/@shopify/polaris@5.1.0/dist/styles.css" />
+</head>
+<body>
+  <div>
+    <div>
+      <h1>Waiting for React Sever to boot up.</h1>
+      <p>This page will refresh automatically.</p>
+    </div>
+    <p>
+      If this error persists, ensure <code>@shopify/react-server</code>
+      is running on <code>http://localhost:8081</code>.
+    </p>
+  </div>
+</body>
+</html>

data/lib/generators/quilt/react_app/react_app_generator.rb

@@ -6,6 +6,18 @@ module Quilt
 
     desc "This generator adds a React app."
 
+    def set_app_config_javascript_path
+      config_path = "config/application.rb"
+
+      unless File.exist?(config_path)
+        inject_into_file(
+          config_path,
+          "\n    config.javascript_path = \"ui\"\n",
+          before: /^  end$/,
+        )
+      end
+    end
+
     def create_app_file
       copy_file("App.tsx", "app/ui/index.tsx")
     end

data/lib/generators/quilt/react_setup/react_setup_generator.rb

@@ -3,19 +3,20 @@
 module Quilt
   class ReactSetupGenerator < Rails::Generators::Base
     source_root File.expand_path('templates', __dir__)
+    class_option :skip_yarn, type: :boolean, default: false
 
     desc "This generator adds a React app."
 
     def install_js_dependencies
-      say "Installing @shopify/react-server and @shopify/sewing-kit dependencies"
+      return if options.skip_yarn?
+
+      say "Installing react and types dependencies"
       system("yarn add "\
-        "@shopify/sewing-kit "\
-        "@shopify/react-server "\
         "typescript@~3.8.0 "\
         "react@~16.11.0 "\
         "react-dom@~16.11.0 "\
         "@types/react@~16.9.0 "\
-        "@types/react-dom@~16.9.0 ") unless Rails.env.test?
+        "@types/react-dom@~16.9.0 ")
     end
 
     def create_tsconfig

data/lib/quilt_rails/engine.rb

@@ -3,5 +3,11 @@
 module Quilt
   class Engine < ::Rails::Engine
     isolate_namespace Quilt
+
+    initializer(:mount_quilt, before: :add_builtin_route) do |app|
+      app.routes.append do
+        mount(Quilt::Engine, at: '/') unless has_named_route?(:quilt)
+      end
+    end
   end
 end

data/lib/quilt_rails/logger.rb

@@ -3,7 +3,7 @@
 module Quilt
   module Logger
     def self.log(string)
-      if defined? Rails && Rails.logger.nil?
+      if Rails.logger.nil?
         puts string
       else
         Rails.logger.info(string)

data/lib/quilt_rails/react_renderable.rb

@@ -37,10 +37,9 @@ module Quilt
       end
 
       begin
-
         reverse_proxy(
           url,
-          headers: headers.merge('X-CSRF-Token': form_authenticity_token, 'X-Quilt-Data': headers.merge(data).to_json)
+          headers: headers.merge('X-Quilt-Data': data.to_json)
         ) do |callbacks|
           callbacks.on_response do |status_code, _response|
             Quilt::Logger.log("[ReactRenderable] #{url} returned #{status_code}")
@@ -54,7 +53,7 @@ module Quilt
     class ReactServerNoResponseError < StandardError
       def initialize(url)
         # rubocop:disable LineLength
-        super "Errno::ECONNREFUSED: Waiting for React server to boot up. If this error presists verify that @shopify/react-server is configured on #{url}"
+        super "Errno::ECONNREFUSED: Waiting for React server to boot up. If this error persists verify that @shopify/react-server is configured on #{url}"
         # rubocop:enable LineLength
       end
     end

data/lib/quilt_rails/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: quilt_rails
 version: !ruby/object:Gem::Version
-  version: 2.0.0
+  version: 3.3.0
 platform: ruby
 authors:
 - Mathew Allen
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-06-08 00:00:00.000000000 Z
+date: 2020-08-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
@@ -80,7 +80,7 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: 0.1.3
-description: A turn-key solution for integrating server-rendered react into your Rails
+description: A turn-key solution for integrating server-rendered React into your Rails
   app using Quilt libraries.
 email:
 - mathew.allen@shopify.com
@@ -92,6 +92,7 @@ files:
 - Rakefile
 - app/controllers/quilt/performance_report_controller.rb
 - app/controllers/quilt/ui_controller.rb
+- app/views/quilt/ui/react_render_error.html
 - config/routes.rb
 - lib/generators/quilt/USAGE
 - lib/generators/quilt/install_generator.rb
@@ -104,7 +105,6 @@ files:
 - lib/generators/quilt/react_app/templates/App.tsx
 - lib/generators/quilt/react_setup/USAGE
 - lib/generators/quilt/react_setup/react_setup_generator.rb
-- lib/generators/quilt/react_setup/templates/App.tsx
 - lib/generators/quilt/react_setup/templates/tsconfig.json
 - lib/quilt_rails.rb
 - lib/quilt_rails/configuration.rb
@@ -147,6 +147,6 @@ requirements: []
 rubygems_version: 3.0.3
 signing_key: 
 specification_version: 4
-summary: A turn-key solution for integrating server-rendered react into your Rails
+summary: A turn-key solution for integrating server-rendered React into your Rails
   app using Quilt libraries.
 test_files: []

data/lib/generators/quilt/react_setup/templates/App.tsx

@@ -1,7 +0,0 @@
-import React from 'react';
-
-function App() {
-  return <div>Hello Quilt</div>;
-}
-
-export default App;