quilt_rails 1.13.0 → 3.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dee878b6b3d7207ed8c6883791e896ccc1208d6508aae5c592487d2da900cf91
-  data.tar.gz: 38f3fbd9695b816b0a873891b3fd6b90377f541595ac3427b11677d62289e6aa
+  metadata.gz: e887915bb7068b86352c99c8f53b38a69bcc313c8859a058ceac543ef1ea1d79
+  data.tar.gz: 8aa15f78b167b1513094d40b4714b7539164880cb7514884ce3ab40c03288325
 SHA512:
-  metadata.gz: 0fb1891f8f988bb0b1b8c60c7b5b25e45c8859ba06ef855625d4656fd24f54a79ead749bad2ee0a2a15559ce097106215d5801a6eda9b3b6c55b7fdc2ee42895
-  data.tar.gz: 74d4d5a3b5ed3e96ce4d3348c67ecc89e6022c24cf631c3be192eb43b7ca4202e4d82351d0d22fd8385ddc75c3ddc82657ca54689b35a1341b44de8b3bf70aa9
+  metadata.gz: 1138e0a191bd3412a5bfb735efdb2a45e24549660a5085922e8495427ebe5246baf5b5d2e216446975efd5cee9f77c25c4d79b35edbde462383495f70e709ea5
+  data.tar.gz: 9d52ae742f44161da2486543e335d83a46c8ae70a21778e9a809d4b62ce029687c2571379ae9cc2f4adc87758135e5bdb448cddcf41b14ca2446b1bc7b25f059

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) , and following the [react-server-webpack-plugin](../../packages/react-server-webpack-plugin/README.md) 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) 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
 
@@ -46,22 +41,25 @@ This will install our ruby dependencies and update the project's gemfile.
 
 #### Generate app boilerplate
 
-`rails generate quilt_rails:install`
+`rails generate sewing_kit:install`
+
+This will generate a package.json file with common sewing-kit script tasks, default lint, format configuration; a sewing-kit configuration file, and other project default configurations.
 
-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.
+`rails generate quilt:install`
+
+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.
 
 ### Manual installation
 
-Follow [this guide](./docs/manual-installation) on how to do manual setup without the generator.
+Follow [this guide](./docs/manual-installation.md) on how to do manual setup without the generator.
 
 ### Advanced use
 
@@ -133,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.
@@ -147,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
@@ -169,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
@@ -179,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
@@ -218,11 +224,11 @@ 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
 
-By default, sewing-kit bundles in [`@shopify/react-server-webpack-plugin`](../../packages/react-server-webpack-plugin/README.md) for `quilt_rails` applications to get apps up and running fast without needing to manually write any Node server code.
+By default, sewing-kit bundles in [`@shopify/react-server/webpack-plugin`](../../packages/react-server/README.md#webpack-plugin) for `quilt_rails` applications to get apps up and running fast without needing to manually write any Node server code.
 
 If what it provides is not sufficient, a completely custom server can be defined by adding a `server.js` or `server.ts` file to the `app/ui` folder. The simplest way to customize the server is to export the object created by [`@shopify/react-server`](../../packages/react-server/README.md#node-usage)'s `createServer` call in `server.ts` file.
 
@@ -240,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
@@ -259,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
 
@@ -277,15 +287,34 @@ 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`.
-Follow details guide [here](./docs/performance-tracking).
+Follow details guide [here](./docs/performance-tracking.md).
 
 ## API
 
-Find all features this gem offer in this [API doc](./docs/api).
+Find all features this gem offer in this [API doc](./docs/api.md).
 
 ## FAQ
 
-Find your [here](./docs/FAQ).
+Find your [here](./docs/FAQ.md).

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/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 = "1.13.0"
+  VERSION = "3.2.1"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: quilt_rails
 version: !ruby/object:Gem::Version
-  version: 1.13.0
+  version: 3.2.1
 platform: ruby
 authors:
 - Mathew Allen
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-06-02 00:00:00.000000000 Z
+date: 2020-07-15 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
@@ -104,14 +104,7 @@ 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/generators/quilt_rails/USAGE
-- lib/generators/quilt_rails/install_generator.rb
-- lib/generators/sewing_kit/USAGE
-- lib/generators/sewing_kit/install_generator.rb
-- lib/generators/sewing_kit/templates/package.json
-- lib/generators/sewing_kit/templates/sewing-kit.config.ts
 - lib/quilt_rails.rb
 - lib/quilt_rails/configuration.rb
 - lib/quilt_rails/engine.rb
@@ -153,6 +146,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;

data/lib/generators/quilt_rails/USAGE

@@ -1,5 +0,0 @@
-Description:
-    This generator runs all the generators
-
-Example:
-    rails generate quilt_rails:install

data/lib/generators/quilt_rails/install_generator.rb

@@ -1,10 +0,0 @@
-# frozen_string_literal: true
-
-module QuiltRails
-  class InstallGenerator < Rails::Generators::Base
-    def run_all_generators
-      generate("sewing_kit:install")
-      generate("quilt:install")
-    end
-  end
-end

data/lib/generators/sewing_kit/USAGE

@@ -1,5 +0,0 @@
-Description:
-    This generator creates a sewing-kit config file.
-
-Example:
-    rails generate sewing_kit:install

data/lib/generators/sewing_kit/install_generator.rb

@@ -1,34 +0,0 @@
-# frozen_string_literal: true
-
-module SewingKit
-  class InstallGenerator < Rails::Generators::Base
-    source_root File.expand_path('templates', __dir__)
-
-    desc "This generator creates a sewing-kit config file."
-
-    def initialize(args, *options)
-      @application_name = Rails.application.class.module_parent.to_s.underscore
-      super(args, *options)
-    end
-
-    def create_package_json
-      package_json_path = "package.json"
-
-      copy_file(package_json_path)
-      gsub_file(package_json_path, "\${application_name}", @application_name)
-    end
-
-    def create_sk_config
-      sk_config_path = "config/sewing-kit.config.ts"
-
-      copy_file("sewing-kit.config.ts", sk_config_path)
-      gsub_file(sk_config_path, "\${application_name}", @application_name)
-    end
-
-    def create_config_files
-      copy_file(".editorconfig")
-      copy_file(".eslintignore")
-      copy_file(".prettierignore")
-    end
-  end
-end

data/lib/generators/sewing_kit/templates/package.json

@@ -1,31 +0,0 @@
-{
-  "name": "${application_name}",
-  "private": true,
-  "sideEffects": false,
-  "scripts": {
-    "dev": "sewing-kit dev",
-    "check": "sewing-kit check",
-    "lint": "sewing-kit lint",
-    "type-check": "sewing-kit type-check",
-    "nuke": "sewing-kit nuke",
-    "test": "sewing-kit test"
-  },
-  "eslintConfig": {
-    "extends": [
-      "plugin:@shopify/typescript",
-      "plugin:@shopify/react",
-      "plugin:@shopify/prettier",
-      "plugin:@shopify/jest",
-      "plugin:@shopify/polaris"
-    ]
-  },
-  "prettier": "@shopify/prettier-config",
-  "stylelint": {
-    "extends": [
-      "@shopify/stylelint-plugin/prettier"
-    ]
-  },
-  "resolutions": {
-    "babel-plugin-dynamic-import-node": "2.3.0"
-  }
-}

data/lib/generators/sewing_kit/templates/sewing-kit.config.ts

@@ -1,11 +0,0 @@
-/* eslint-env node */
-
-import {Plugins} from '@shopify/sewing-kit';
-
-export default function sewingKitConfig(plugins: Plugins) {
-  return {
-    name: "${application_name}",
-    plugins: [
-    ],
-  };
-}