sewing_kit 0.95.2 → 0.95.3
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +9 -130
- data/lib/sewing_kit/version.rb +1 -1
- data/lib/sewing_kit/webpack/manifest/test_with_no_assets.rb +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 5326345174261f199f09dd225bff39a8bff36211605f02e50023cb42599cbbf0
|
4
|
+
data.tar.gz: 4ce1b74f45294fbe3b3a78756e032ed5663ee8de7349a1ab3664fd7a0d7fd01c
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 46b6f646a80548019b2504bcded4bfa5a2c9341dc712c2a34d2f5d574fbd52c1520c7868c72aabf1e6e148381b40e6fce96d1df43154073f5b996cb453a28568
|
7
|
+
data.tar.gz: b84efa8493dc8d172087001a3058bef87be22fa2a74f0be1a60327495f7a54fd18cffe8f388ba044c67a138d68e410071faba1aa7e0cb129f61330ed9e0a2474
|
data/README.md
CHANGED
@@ -4,6 +4,12 @@ Zero configuration, high performance front end development at organization scale
|
|
4
4
|
|
5
5
|
`sewing_kit` facilitates legacy Rails integration using ERB tags. For a more complete modern stack with performance-as-a-feature, consider [quilt_rails](https://github.com/Shopify/quilt/tree/master/gems/quilt_rails). For details of the `sewing-kit` node package's configuration and usage, see the [sewing-kit README](/README.md).
|
6
6
|
|
7
|
+
## Use `quilt_rails` for React Server-Side-Rendering
|
8
|
+
|
9
|
+
For React applications with a Rails backend, the best-practice for user-experience is server-side-rendering (SSR). **For building out React applications using SSR and Sewing-Kit, see [`quilt_rails`](https://github.com/Shopify/quilt/tree/master/gems/quilt_rails)**.
|
10
|
+
|
11
|
+
If you are building a conventional Rails application using `.erb` files and just want modern JavaScript / TypeScript compilation, continue reading this document.
|
12
|
+
|
7
13
|
## Quick Start
|
8
14
|
|
9
15
|
Create a Rails project using `dev init` then:
|
@@ -15,9 +21,6 @@ Create a Rails project using `dev init` then:
|
|
15
21
|
bundle add sewing_kit
|
16
22
|
yarn add @shopify/sewing-kit
|
17
23
|
|
18
|
-
# Optional - add Polaris
|
19
|
-
yarn add @shopify/polaris react react-dom
|
20
|
-
|
21
24
|
yarn
|
22
25
|
dev up
|
23
26
|
```
|
@@ -51,133 +54,17 @@ The `main` bundle is imported into `erb` files using Rails helpers:
|
|
51
54
|
└─- application.html.erb (must link to JS / CSS using sewing_kit_script_tag / sewing_kit_link_tag
|
52
55
|
```
|
53
56
|
|
54
|
-
## Rails, Polaris, and React Layout
|
55
|
-
|
56
|
-
A typical Polaris app will use React to render views and components. The following layout shows best practice locations for:
|
57
|
-
|
58
|
-
- Global SCSS settings
|
59
|
-
- App sections (roughly analogous to Rails routes)
|
60
|
-
- Components
|
61
|
-
- Co-located CSS modules
|
62
|
-
- Co-located unit tests
|
63
|
-
|
64
|
-
```
|
65
|
-
└── app
|
66
|
-
└── ui
|
67
|
-
├─- index.js (renders React into the DOM)
|
68
|
-
├── styles (optional)
|
69
|
-
│ └── settings.scss (global vars and @polaris overrides)
|
70
|
-
│
|
71
|
-
└── tests (optional)
|
72
|
-
│ └── each-test.ts
|
73
|
-
│ └── setup.ts
|
74
|
-
└── components (optional)
|
75
|
-
├── App
|
76
|
-
│ ├── index.js
|
77
|
-
│ ├── App.js
|
78
|
-
│ └── tests
|
79
|
-
│ └── App.test.js
|
80
|
-
│
|
81
|
-
├-─ MyComponent
|
82
|
-
│ ├-─ index.js
|
83
|
-
│ ├-─ MyComponent.js
|
84
|
-
│ ├── MyComponent.scss (optional; component-scoped CSS styles, mixins, etc)
|
85
|
-
│ └── tests
|
86
|
-
│ └── MyComponent.test.js
|
87
|
-
│
|
88
|
-
└── sections (optional; container views that compose presentation components into UI blocks)
|
89
|
-
└── Home
|
90
|
-
├-─ index.js
|
91
|
-
└── Home.js
|
92
|
-
```
|
93
|
-
|
94
|
-
## React Boilerplate
|
95
|
-
|
96
|
-
- Create a React app in `app/ui/App.js` ([example](https://github.com/Shopify/sewing-kit-gem-example/blob/master/app/ui/App.jsx))
|
97
|
-
- In an `erb` view, add a placeholder for React content ([example](https://github.com/Shopify/sewing-kit-gem-example/blob/master/app/views/home/index.html.erb#L4))
|
98
|
-
- In `index.js`, render a React component into the placeholder element ([example](https://github.com/Shopify/sewing-kit-gem-example/blob/master/app/ui/index.js))
|
99
|
-
- Use `sewing_kit_script_tag`/`sewing_kit_link_tag` helpers to link erb/js ([example](https://github.com/Shopify/sewing-kit-gem-example/blob/master/app/views/layouts/application.html.erb#L8))
|
100
|
-
|
101
57
|
## Testing the front end
|
102
58
|
|
103
59
|
For fast tests with consistent results, test front-end components using Jest instead of Rails integration tests.
|
104
60
|
|
105
61
|
Use [`sewing-kit test`](https://github.com/Shopify/sewing-kit/blob/master/docs/commands/test.md#L3) to run all `.test.tsx` files in the `app/ui` directory. [Jest](https://jestjs.io) is used as a test runner, with customization available via [its sewing-kit plugin](https://github.com/Shopify/sewing-kit/blob/master/docs/plugins/jest.md).
|
106
62
|
|
107
|
-
###
|
108
|
-
|
109
|
-
For testing React applications we provide and support [`@shopify/react-testing`](https://github.com/Shopify/quilt/tree/master/packages/react-testing).
|
110
|
-
|
111
|
-
#### Example
|
112
|
-
|
113
|
-
Given a component `MyComponent.tsx`
|
63
|
+
### Customizing the test environment
|
114
64
|
|
115
|
-
|
116
|
-
// app/components/MyComponent/MyComponent.tsx
|
117
|
-
export function MyComponent({name}: {name: string}) {
|
118
|
-
return <div>Hello, {name}!</div>;
|
119
|
-
}
|
120
|
-
```
|
121
|
-
|
122
|
-
A test would be written using Jest and `@shopify/react-testing`'s `mount` feature.
|
123
|
-
|
124
|
-
```tsx
|
125
|
-
// app/components/MyComponent/tests/MyComponent.test.tsx
|
126
|
-
import {MyComponent} from '../MyComponent';
|
65
|
+
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.
|
127
66
|
|
128
|
-
|
129
|
-
it('greets the given named person', () => {
|
130
|
-
const wrapper = mount(<MyComponent name="Kokusho" />);
|
131
|
-
|
132
|
-
// toContainReactText is a custom matcher provided by @shopify/react-testing/matchers
|
133
|
-
expect(wrapper).toContainReactText('Hello, Kokusho');
|
134
|
-
});
|
135
|
-
});
|
136
|
-
```
|
137
|
-
|
138
|
-
### Test setup files
|
139
|
-
|
140
|
-
By default, the jest plugin will look for test setup files under `/app/ui/tests`.
|
141
|
-
|
142
|
-
`setup` can be used to add any custom polyfills needed for the testing environment.
|
143
|
-
|
144
|
-
```tsx
|
145
|
-
// app/ui/tests/setup.ts
|
146
|
-
|
147
|
-
import 'isomorphic-fetch';
|
148
|
-
import 'raf/polyfill';
|
149
|
-
import {URL, URLSearchParams} from 'url';
|
150
|
-
|
151
|
-
(global as any).URL = URL;
|
152
|
-
(global as any).URLSearchParams = URLSearchParams;
|
153
|
-
```
|
154
|
-
|
155
|
-
`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.
|
156
|
-
|
157
|
-
```tsx
|
158
|
-
// app/ui/tests/each-test.ts
|
159
|
-
|
160
|
-
// we cannot import these in `setup` because `expect` will not be defined
|
161
|
-
import '@shopify/react-testing/matchers';
|
162
|
-
|
163
|
-
beforeAll(() => {
|
164
|
-
console.log('I will run before every test suite');
|
165
|
-
});
|
166
|
-
|
167
|
-
beforeEach(() => {
|
168
|
-
console.log('I will run before every test case');
|
169
|
-
});
|
170
|
-
|
171
|
-
afterEach(() => {
|
172
|
-
console.log('I will run after every test case');
|
173
|
-
});
|
174
|
-
|
175
|
-
afterAll(() => {
|
176
|
-
console.log('I will run after every test suite');
|
177
|
-
});
|
178
|
-
```
|
179
|
-
|
180
|
-
For more complete documentation of the jest plugin see [it's documentation](/docs/plugins/jest.md).
|
67
|
+
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.
|
181
68
|
|
182
69
|
### Rails tests
|
183
70
|
|
@@ -254,11 +141,3 @@ SewingKit.configure do |config|
|
|
254
141
|
config.log_level = :warn # may be `:inherit`, `:debug`, `:info`, `:warn`, or `:error`
|
255
142
|
end
|
256
143
|
```
|
257
|
-
|
258
|
-
### How can I set breakpoints for server rendered apps?
|
259
|
-
|
260
|
-
Start your Rails server with `SK_DEBUG` set as an environment variable, and configure your Node debugger to listen on port `5858`.
|
261
|
-
|
262
|
-
```bash
|
263
|
-
SK_DEBUG=1 bundle exec rails start
|
264
|
-
```
|
data/lib/sewing_kit/version.rb
CHANGED
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: sewing_kit
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.95.
|
4
|
+
version: 0.95.3
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Chris Sauve
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2019-
|
11
|
+
date: 2019-10-07 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: railties
|