sewing_kit 0.92.1 → 0.93.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|