quilt_rails 1.3.1 → 1.3.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5214ca27d069782ed72ddcd0f8efe1570ac2d8ebbf71df664f01d88977b09d80
-  data.tar.gz: c80609914deb36fb2fe95b683b5bdca6bab97f2100609daf95e9938a31a35e4d
+  metadata.gz: 9cee30519a782a6fddf8ef312f68e594872ff80a832a776549c20c85775fa5e4
+  data.tar.gz: bb9c1ac6a10090dcb245eef5ac5523963319e413f6c19709da7a72f2c72508c5
 SHA512:
-  metadata.gz: 98813d5e73ad5a700318b8185f08db41863665adb071bef21e9abfea66cbda8810f42ee4c3d7065dbc6fbd32111de9b875964a215258d3fdb6fd71ddd0bfaaab
-  data.tar.gz: 0601b77ac976964817c259c5b4fc9d92356493ebe7f9bf617a5be03b8da9493e8cc04375bba08d6bedff54aec5db5b0fc7c5df0ca22ee9ff6eab6bb09f047e4b
+  metadata.gz: dcc8be76612a56b7f8a9b0874d3e8efee17fb6b2eb41ff426113f01e84431abc7418d74b8c1b533561fe9bfb7f647a6eae64fda37d5899fd1c1348ef2978bccd
+  data.tar.gz: ea5953b8ec5e4f4996eaf4f1d611b32c83d0f9b11809a41f478fd6d6123296321d5f74b9e59046001ce4a8bbdf9171531bc91d19e27445f1a3bf840171910e21

data/README.md

@@ -4,6 +4,11 @@ A turn-key solution for integrating server-rendered react into your Rails app us
 
 This document focuses on Rails integration. For details of `@shopify/react-server`'s configuration and usage, see the [react-server documentation](/packages/react-server/README.md).
 
+## Table of Contents
+
+1. [Quick Start](#quick-start)
+1. [Advanced Use](#advanced-use)
+
 ## Quick Start
 
 ### Add Ruby dependencies
@@ -114,12 +119,115 @@ function App() {
 export default App;
 ```
 
-## Rails Generators'
+## Rails Generators
 
 ### `quilt:install`
 
 Installs the Node dependencies, provide a basic React app (in TypeScript) and mounts the Quilt engine inside of your `config/routes.rb` file.
 
-### `sewing-kit:install`
+### `sewing_kit:install`
 
 Adds a basic `sewing-kit.config.ts` file.
+
+## Advanced use
+
+### Interacting with the request / response in your React code
+
+React-server sets up [@shopify/react-network](https://github.com/Shopify/quilt/blob/master/packages/react-network/src/hooks.ts#L25) for you, so most interactions with the request or response can be done from inside your React code.
+
+#### Example: getting headers
+
+```tsx
+// app/ui/index.tsx
+
+import * as React from 'react';
+import {AppProvider, Page, Card} from '@shopify/polaris';
+import {useRequestHeader} from '@shopify/react-network';
+
+function App() {
+  // get `some-header` from the request that was sent through Rails
+  const someHeaderICareAbout = useRequestHeader('some-header');
+
+  return (
+    <AppProvider>
+      <Page title="Hello">
+        {someHeaderICareAbout}
+        <Card sectioned>Hi there</Card>
+      </Page>
+    </AppProvider>
+  );
+}
+
+export default App;
+```
+
+#### Example: redirecting
+
+```tsx
+// app/ui/index.tsx
+
+import * as React from 'react';
+import {AppProvider, Page, Card} from '@shopify/polaris';
+import {useRedirect} from '@shopify/react-network';
+
+function App() {
+  // redirect to google as soon as we render
+  useRedirect('www.google.com');
+
+  return (
+    <AppProvider>
+      <Page title="Hello">
+        <Card sectioned>Hi there</Card>
+      </Page>
+    </AppProvider>
+  );
+}
+
+export default App;
+```
+
+### Customizing the node server
+
+By default, sewing-kit bundles in `@shopify/react-server-webpack-plugin` for `quilt_rails` applications to get you up and running fast without needing to manually write any node server code. If you would like to customize what data your react application receives from the incoming request, you can add your own `server.js` / `server.ts` file to the app folder.
+
+```
+└── app
+   └── ui
+      └─- app.js
+      └─- index.js
+      └─- server.js
+```
+
+```tsx
+// app/ui/server.tsx
+import '@shopify/polyfills/fetch';
+import {createServer} from '@shopify/react-server';
+import {Context} from 'koa';
+import React from 'react';
+
+import App from './app';
+
+// you could create your own server from scratch, but the easiest way to is using `@shopify/react-server`
+// https://github.com/Shopify/quilt/blob/master/packages/react-server/README.md#L8
+const app = createServer({
+  port: process.env.PORT ? parseInt(process.env.PORT, 10) : 8081,
+  ip: process.env.IP,
+  assetPrefix: process.env.CDN_URL || 'localhost:8080/assets/webpack',
+  serverMiddleware: [(ctx, next) => {
+    // you can add your own middleware to extend the server's functionality.
+    console.log('I am a custom middleware!');
+    await next();
+  }]
+  render: (ctx, {locale}) => {
+    const whatever = /* do something special with the koa context */;
+    // any special data we add to the incoming request in our rails controller we can access here to pass into our component
+    return <App server someCustomProp={whatever} location={ctx.request.url} locale={locale} />;
+  },
+});
+
+export default app;
+```
+
+### Isomorphic state
+
+With SSR enabled React apps, state must be serialized on the server and deserialized on the client to keep it consistent. With `@shopify/react-server`, the main way you will accomplish is using [`@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 to implement [self-serializers](https://github.com/Shopify/quilt/blob/master/packages/react-self-serializers/README.md#self-serializers). We offer some common ones out of the box in [`@shopify/react-self-serializers`](https://github.com/Shopify/quilt/blob/master/packages/react-self-serializers/README.md#self-serializers).

data/config/routes.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 Quilt::Engine.routes.draw do
-  get '/*path', to: 'react#index'
-  root 'react#index'
+  get '/*path', to: 'ui#index'
+  root 'ui#index'
 end

data/lib/quilt_rails/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: quilt_rails
 version: !ruby/object:Gem::Version
-  version: 1.3.1
+  version: 1.3.2
 platform: ruby
 authors:
 - Mathew Allen