README.md in quilt_rails-1.7.0 vs README.md in quilt_rails-1.8.0

- old
+ new

@@ -61,12 +61,12 @@ ```sh # Add core Node dependencies yarn add @shopify/sewing-kit @shopify/react-server -# Add Polaris and React -yarn add @shopify/polaris react react-dom +# Add React +yarn add react react-dom yarn dev up ``` @@ -119,26 +119,19 @@ ### Add JavaScript `sewing_kit` looks for the top level component of your React app in `app/ui/index`. The component exported from this component (and any imported JS/CSS) will be built into a `main` bundle, and used to render the initial server-rendered markup. -We will add a basic entrypoint using React with Polaris components. +We will add a basic entrypoint using React with some HTML. ```tsx // app/ui/index.tsx import React from 'react'; -import {AppProvider, Page, Card} from '@shopify/polaris'; function App() { - return ( - <AppProvider> - <Page title="Hello"> - <Card sectioned>Hi there</Card> - </Page> - </AppProvider> - ); + return <h1>My application ❤️</h1>; } export default App; ``` @@ -163,11 +156,11 @@ │ └─- index.{js|ts} (exports a React component) └── controllers └─- react_controller.rb (see above) ``` -### Rails, Polaris, and React +### Rails and React A more complex application will want a more complex layout. The following shows scalable locations for: - Global SCSS settings - App sections (roughly analogous to Rails routes) @@ -179,11 +172,11 @@ ``` └── app └── ui ├─- index.{js|ts} (exports a React component) ├── styles (optional) - │ └── settings.scss (global vars and @polaris overrides) + └── shared.scss (common functions/mixins you want available in every scss file. Requires configuring `plugin.sass`'s `autoInclude` option in `sewing-kit.config.js`) │ └── tests (optional) │ └── each-test.{js|ts} │ └── setup.{js|ts} └── features (optional) @@ -291,78 +284,37 @@ expect(wrapper).toContainReactText('Hello, Kokusho'); }); }); ``` -### Test setup files +#### Customizing the test environment -By default, the jest plugin will look for test setup files under `/app/ui/tests`. +Often you will want to hook up custom polyfills, global mocks, or other logic that needs to run either before the initialization of the test environment, or once for each test suite. -`setup` can be used to add any custom polyfills needed for the testing environment. +By default, sewing-kit will look for such test setup files under `/app/ui/tests`. Check out the [documentation](https://github.com/Shopify/sewing-kit/blob/master/docs/plugins/jest.md#smart-defaults) for more details. -```tsx -// app/ui/tests/setup.ts - -import 'isomorphic-fetch'; -import 'raf/polyfill'; -import {URL, URLSearchParams} from 'url'; - -(global as any).URL = URL; -(global as any).URLSearchParams = URLSearchParams; -``` - -`each-test` can be used for any logic that needs to run for each individual test suite. Any setup logic that needs to happen with `jest` globals in scope, such as importing custom matchers, should also be done here. - -```tsx -// app/ui/tests/each-test.ts - -// we cannot import these in `setup` because `expect` will not be defined -import '@shopify/react-testing/matchers'; - -beforeAll(() => { - console.log('I will run before every test suite'); -}); - -beforeEach(() => { - console.log('I will run before every test case'); -}); - -afterEach(() => { - console.log('I will run after every test case'); -}); - -afterAll(() => { - console.log('I will run after every test suite'); -}); -``` - -For more complete documentation of the jest plugin see [it's documentation](https://github.com/Shopify/sewing-kit/tree/master/docs/plugins/jest.md). - ### Interacting with the request and response in React code -React-server sets up [@shopify/react-network](https://github.com/Shopify/quilt/blob/master/packages/react-network/src/hooks.ts#L25) automatically, so most interactions with the request or response can be done from inside the React app. +React-server sets up [@shopify/react-network](https://github.com/Shopify/quilt/blob/master/packages/react-network) automatically, so most interactions with the request or response can be done from inside the React app. #### Example: getting headers ```tsx // app/ui/index.tsx import 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> + <> + <h1>My application ❤️</h1> + <div>{someHeaderICareAbout}</div> + </> ); } export default App; ``` @@ -371,23 +323,16 @@ ```tsx // app/ui/index.tsx import 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> - ); + return <h1>My application ❤️</h1>; } export default App; ```