sewing_kit 0.92.1 → 0.93.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +95 -12
- data/lib/sewing_kit/configuration.rb +3 -1
- data/lib/sewing_kit/railtie.rb +4 -0
- data/lib/sewing_kit/version.rb +1 -1
- data/lib/sewing_kit/webpack/helper.rb +4 -3
- data/lib/sewing_kit/webpack/manifest.rb +4 -0
- data/lib/sewing_kit/webpack/manifest/development.rb +5 -1
- data/lib/sewing_kit/webpack/manifest/production.rb +6 -0
- 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: 2332ea58c71355f50a1c488183042654146d15c5de2a760e878947e0f34f94fd
|
4
|
+
data.tar.gz: 8bab2fe8bac88e5685c6a61f9a7f925a486b0dd6d864e30bb88a71c9c6003e59
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 12a99b5d80d7ad42943dda11faad69f2df93a682c48a36d9e14c9d1ff21ad31409119f210148b7b64c8f8d1e449adde9fce24aa4e2cf70954b777dd7fd876b13
|
7
|
+
data.tar.gz: c347db6c58d7b1152fcfc9e8243694d6597a8161a6b21ffc3806b7ff484d6396847151ec40cbc18ece73daa517aabf125bb6fa756f2886cd1b9ab22552b01cef
|
data/README.md
CHANGED
@@ -2,7 +2,7 @@
|
|
2
2
|
|
3
3
|
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
7
|
## Quick Start
|
8
8
|
|
@@ -68,6 +68,9 @@ A typical Polaris app will use React to render views and components. The followi
|
|
68
68
|
├── styles (optional)
|
69
69
|
│ └── settings.scss (global vars and @polaris overrides)
|
70
70
|
│
|
71
|
+
└── tests (optional)
|
72
|
+
│ └── each-test.ts
|
73
|
+
│ └── setup.ts
|
71
74
|
└── components (optional)
|
72
75
|
├── App
|
73
76
|
│ ├── index.js
|
@@ -88,17 +91,6 @@ A typical Polaris app will use React to render views and components. The followi
|
|
88
91
|
└── Home.js
|
89
92
|
```
|
90
93
|
|
91
|
-
## Which version of sewing-kit can I use?
|
92
|
-
|
93
|
-
Assume that the sewing*kit gem's latest minor version requires \_at least* the same minor version of the sewing-kit package.
|
94
|
-
|
95
|
-
If sewing-kit makes a breaking change, this gem's minor version will be bumped to match the required sewing-kit version.
|
96
|
-
|
97
|
-
## Transitioning from sprockets-commoner
|
98
|
-
|
99
|
-
It is currently not recommended to use `sprockets-commoner` and `sewing_kit` in the same project.
|
100
|
-
Minimally, it is required that the project does not have its own `babel-*` libraries that `sewing-kit` currently has as [dependencies](https://github.com/Shopify/sewing-kit/blob/master/package.json#L97~L102).
|
101
|
-
|
102
94
|
## React Boilerplate
|
103
95
|
|
104
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))
|
@@ -106,8 +98,95 @@ Minimally, it is required that the project does not have its own `babel-*` libra
|
|
106
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))
|
107
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))
|
108
100
|
|
101
|
+
## Testing the front end
|
102
|
+
|
103
|
+
For fast tests with consistent results, test front-end components using Jest instead of Rails integration tests.
|
104
|
+
|
105
|
+
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
|
+
|
107
|
+
### Testing React
|
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`
|
114
|
+
|
115
|
+
```tsx
|
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';
|
127
|
+
|
128
|
+
describe('MyComponent', () => {
|
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).
|
181
|
+
|
109
182
|
## FAQ
|
110
183
|
|
184
|
+
### Which version of sewing-kit can I use?
|
185
|
+
|
186
|
+
Assume that the sewing*kit gem's latest minor version requires \_at least* the same minor version of the sewing-kit package.
|
187
|
+
|
188
|
+
If sewing-kit makes a breaking change, this gem's minor version will be bumped to match the required sewing-kit version.
|
189
|
+
|
111
190
|
### How can I fix production builds that are failing due to missing devDependencies?
|
112
191
|
|
113
192
|
By moving everything into `package.json#dependencies`. This is necessary because Rails 5.2 prunes `devDependencies` during asset compilation.
|
@@ -122,3 +201,7 @@ NODE_ENV=production SK_SIMULATE_PRODUCTION=1 dev run
|
|
122
201
|
```
|
123
202
|
|
124
203
|
Note that code changes will not be automatically recompiled in this state. After verifying production behaviour, run `bundle exec rake assets:clobber` to get back to development mode.
|
204
|
+
|
205
|
+
### My project is using `sprockets-commenoner`, can I use sewing_kit too?
|
206
|
+
|
207
|
+
No. sprockets-commoner uses an outdated Babel version, and is no longer compatible with sewing-kit.
|
@@ -1,11 +1,13 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
module SewingKit
|
3
3
|
class Configuration
|
4
|
-
attr_accessor :build_options, :dev_server_sewing_kit_bin, :manifest_name
|
4
|
+
attr_accessor :build_options, :dev_server_sewing_kit_bin, :manifest_name,
|
5
|
+
:manifest_path
|
5
6
|
|
6
7
|
def initialize
|
7
8
|
@build_options = nil
|
8
9
|
@manifest_name = 'sewing-kit-manifest.json'
|
10
|
+
@manifest_path = nil
|
9
11
|
@dev_server_sewing_kit_bin = 'node_modules/.bin/sewing-kit'
|
10
12
|
end
|
11
13
|
end
|
data/lib/sewing_kit/railtie.rb
CHANGED
data/lib/sewing_kit/version.rb
CHANGED
@@ -1,13 +1,10 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
require 'base64'
|
3
|
-
require 'action_view/helpers'
|
4
3
|
require 'sewing_kit/webpack/manifest'
|
5
4
|
|
6
5
|
module SewingKit
|
7
6
|
module Webpack
|
8
7
|
module Helper
|
9
|
-
include ActionView::Helpers
|
10
|
-
|
11
8
|
class UnknownAssetError < StandardError
|
12
9
|
end
|
13
10
|
|
@@ -52,6 +49,10 @@ module SewingKit
|
|
52
49
|
safe_join(tags, "\n")
|
53
50
|
end
|
54
51
|
|
52
|
+
def sewing_kit_assets_bundle_name
|
53
|
+
SewingKit::Webpack::Manifest.asset_bundle_name(request.user_agent)
|
54
|
+
end
|
55
|
+
|
55
56
|
private
|
56
57
|
|
57
58
|
def create_asset_tag(tag_type, asset, tag_options)
|
@@ -36,6 +36,10 @@ module SewingKit
|
|
36
36
|
end
|
37
37
|
|
38
38
|
class << self
|
39
|
+
def asset_bundle_name(user_agent)
|
40
|
+
instance.asset_bundle_name(user_agent)
|
41
|
+
end
|
42
|
+
|
39
43
|
# :nodoc:
|
40
44
|
def asset_dependencies(entrypoint_name, user_agent)
|
41
45
|
instance.asset_dependencies(entrypoint_name, user_agent)
|
@@ -10,7 +10,11 @@ module SewingKit
|
|
10
10
|
@metadata_path = nil
|
11
11
|
end
|
12
12
|
|
13
|
-
def
|
13
|
+
def asset_bundle_name(_user_agent)
|
14
|
+
'dev'
|
15
|
+
end
|
16
|
+
|
17
|
+
def asset_dependencies(entrypoint_name, _user_agent)
|
14
18
|
current_metadata = metadata
|
15
19
|
if current_metadata.key?('development')
|
16
20
|
current_metadata['development']['hangTight']
|
@@ -9,6 +9,10 @@ module SewingKit
|
|
9
9
|
@metadata = nil
|
10
10
|
@metadata_path = nil
|
11
11
|
|
12
|
+
def asset_bundle_name(user_agent)
|
13
|
+
metadata_for(user_agent)['name']
|
14
|
+
end
|
15
|
+
|
12
16
|
# :nodoc:
|
13
17
|
def asset_dependencies(entrypoint_name, user_agent)
|
14
18
|
metadata_for(user_agent)['entrypoints'][entrypoint_name]
|
@@ -44,6 +48,8 @@ module SewingKit
|
|
44
48
|
end
|
45
49
|
|
46
50
|
def path
|
51
|
+
return SewingKit.configuration.manifest_path unless SewingKit.configuration.manifest_path.nil?
|
52
|
+
|
47
53
|
File.join(Rails.root, 'public', 'bundles', SewingKit.configuration.manifest_name)
|
48
54
|
end
|
49
55
|
end
|
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.
|
4
|
+
version: 0.93.0
|
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-09-04 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: railties
|