jetpacker 0.4.2 → 0.5.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (85) hide show
  1. checksums.yaml +4 -4
  2. data/.eslintrc.js +8 -8
  3. data/.github/workflows/jest.yml +38 -0
  4. data/.github/workflows/js-lint.yml +39 -0
  5. data/.github/workflows/rubocop.yml +39 -0
  6. data/.github/workflows/ruby.yml +70 -0
  7. data/.node-version +1 -1
  8. data/.travis.yml +8 -21
  9. data/CHANGELOG.jetpacker.md +5 -0
  10. data/CHANGELOG.md +44 -2
  11. data/Gemfile +1 -0
  12. data/Gemfile.lock +115 -101
  13. data/README.md +23 -649
  14. data/docs/css.md +58 -3
  15. data/docs/deployment.md +2 -2
  16. data/docs/docker.md +17 -17
  17. data/docs/engines.md +13 -0
  18. data/docs/env.md +0 -2
  19. data/docs/integrations.md +220 -0
  20. data/docs/target.md +22 -0
  21. data/docs/testing.md +2 -3
  22. data/docs/troubleshooting.md +3 -1
  23. data/docs/typescript.md +92 -28
  24. data/docs/webpack-dev-server.md +1 -1
  25. data/jetpacker.gemspec +4 -3
  26. data/lib/install/config/babel.config.js +1 -3
  27. data/lib/install/config/webpacker.yml +1 -4
  28. data/lib/install/examples/react/tsconfig.json +2 -1
  29. data/lib/install/examples/typescript/tsconfig.json +2 -1
  30. data/lib/install/loaders/svelte.js +2 -2
  31. data/lib/install/template.rb +1 -1
  32. data/lib/install/typescript.rb +5 -1
  33. data/lib/jetpacker/version.rb +1 -1
  34. data/lib/tasks/webpacker/check_node.rake +15 -8
  35. data/lib/tasks/webpacker/check_yarn.rake +17 -10
  36. data/lib/tasks/webpacker/clean.rake +12 -8
  37. data/lib/tasks/webpacker/clobber.rake +8 -4
  38. data/lib/tasks/webpacker/yarn_install.rake +5 -16
  39. data/lib/webpacker/commands.rb +33 -9
  40. data/lib/webpacker/compiler.rb +9 -5
  41. data/lib/webpacker/configuration.rb +13 -9
  42. data/lib/webpacker/dev_server_proxy.rb +3 -1
  43. data/lib/webpacker/dev_server_runner.rb +2 -2
  44. data/lib/webpacker/helper.rb +37 -18
  45. data/lib/webpacker/manifest.rb +4 -4
  46. data/lib/webpacker/railtie.rb +0 -43
  47. data/lib/webpacker/runner.rb +1 -0
  48. data/lib/webpacker/turbine.rb +0 -41
  49. data/lib/webpacker/version.rb +1 -1
  50. data/lib/webpacker/webpack_runner.rb +2 -2
  51. data/package.json +39 -39
  52. data/package/__tests__/config.js +12 -1
  53. data/package/__tests__/dev_server.js +2 -0
  54. data/package/__tests__/development.js +14 -1
  55. data/package/config.js +4 -1
  56. data/package/configPath.js +3 -0
  57. data/package/dev_server.js +1 -1
  58. data/package/env.js +1 -2
  59. data/package/environments/__tests__/base.js +29 -2
  60. data/package/environments/base.js +17 -7
  61. data/package/environments/development.js +39 -37
  62. data/package/environments/production.js +1 -3
  63. data/package/rules/babel.js +12 -5
  64. data/package/rules/file.js +1 -0
  65. data/package/rules/node_modules.js +1 -3
  66. data/package/rules/sass.js +7 -1
  67. data/package/utils/helpers.js +1 -1
  68. data/test/compiler_test.rb +8 -3
  69. data/test/configuration_test.rb +8 -7
  70. data/test/dev_server_runner_test.rb +1 -1
  71. data/test/helper_test.rb +3 -0
  72. data/test/manifest_test.rb +37 -6
  73. data/test/rake_tasks_test.rb +11 -0
  74. data/test/test_app/app/javascript/packs/multi_entry.css +4 -0
  75. data/test/test_app/app/javascript/packs/multi_entry.js +4 -0
  76. data/test/test_app/config/application.rb +0 -1
  77. data/test/test_app/config/webpacker.yml +7 -1
  78. data/test/test_app/public/packs/manifest.json +1 -0
  79. data/test/webpack_runner_test.rb +1 -1
  80. data/yarn.lock +3405 -2836
  81. metadata +35 -14
  82. data/gemfiles/Gemfile-rails.4.2.x +0 -9
  83. data/gemfiles/Gemfile-rails.5.0.x +0 -9
  84. data/gemfiles/Gemfile-rails.5.1.x +0 -9
  85. data/lib/install/loaders/typescript.js +0 -11
@@ -6,7 +6,7 @@ Webpacker supports importing CSS, Sass and SCSS files directly into your JavaScr
6
6
  Importing and loading styles is a two step process:
7
7
 
8
8
  1. You need to tell webpack which file(s) it has to compile and know how to load
9
-
9
+
10
10
  When you do `import '../scss/application.scss'`, you're telling webpack to include `application.scss` in the build. This does not mean it's going to be compiled into your javascript, only that webpack now compiles and knows how to load this file. (How that file compilation is handled is depending on how your loaders (`css-loader`, `sass-loader`, `file-loader`, etc.) are configured.)
11
11
 
12
12
  2. You need to load those files in your views
@@ -18,6 +18,51 @@ Importing and loading styles is a two step process:
18
18
 
19
19
  ## Import global styles into your JS app
20
20
 
21
+ ### Importing CSS as a multi-file pack (Webpacker v5)
22
+
23
+ When you add a CSS/SCSS/SASS file to `app/javascript/packs/` directory, make sure to use the same pack name as its complementary JavaScript pack, e.g. `application.js` and `application.css`. By Webpacker convention (as of Webpacker v5), this will bundle `application.js` and `application.scss` as part of the same entry point (also described as [a multi-file entry point in the webpack docs](https://webpack.js.org/concepts/entry-points/#single-entry-shorthand-syntax)). With this approach, you can avoid importing CSS from JS, if desired.
24
+
25
+ ```
26
+ app/
27
+ javascript/
28
+ packs/
29
+ application.js
30
+ application.scss
31
+ ```
32
+
33
+ ### Importing CSS from CSS
34
+
35
+ You can import additional CSS/SCSS/SASS files from within a CSS file:
36
+
37
+ ```
38
+ app/
39
+ javascript/
40
+ stylesheets/
41
+ application.scss
42
+ posts.scss
43
+ comments.scss
44
+ ```
45
+
46
+ ```css
47
+ /* app/javascript/stylesheets/application.scss */
48
+
49
+ @import './posts';
50
+ @import './comments';
51
+ ```
52
+
53
+ ### Importing CSS provided by an NPM package from SCSS/CSS
54
+
55
+ Given your application installs an NPM package that provides CSS, such as `flatpickr`, you can import the CSS file(s) by path from the package directory within `node_modules/`:
56
+
57
+ ```js
58
+ /* app/javascript/stylesheets/application.scss */
59
+
60
+ @import "flatpickr/dist/flatpickr.css"
61
+ ```
62
+
63
+
64
+ ### Importing CSS from JS
65
+
21
66
  ```sass
22
67
  // app/javascript/hello_react/styles/hello-react.sass
23
68
 
@@ -42,6 +87,16 @@ const Hello = props => (
42
87
  )
43
88
  ```
44
89
 
90
+ ### Importing CSS provided by an NPM package from JS
91
+
92
+ Given your application installs an NPM package that provides CSS, such as `flatpickr`, you can import the CSS file(s) by path from the package directory within `node_modules/`. This is an alternative to importing from within a CSS file, as above:
93
+
94
+ ```js
95
+ // app/javascript/packs/application.js
96
+
97
+ import "flatpickr/dist/flatpickr.css"
98
+ ```
99
+
45
100
  ## Import scoped styles into your JS app
46
101
 
47
102
  Stylesheets that end with `.module.*` are treated as [CSS Modules](https://github.com/css-modules/css-modules).
@@ -147,14 +202,14 @@ You can use Yarn to add bootstrap or any other modules available on npm:
147
202
  yarn add bootstrap
148
203
  ```
149
204
 
150
- Import Bootstrap and theme (optional) CSS in your app/javascript/packs/app.js file:
205
+ Import Bootstrap and theme (optional) CSS in your app/javascript/packs/application.js file:
151
206
 
152
207
  ```js
153
208
  import 'bootstrap/dist/css/bootstrap'
154
209
  import 'bootstrap/dist/css/bootstrap-theme'
155
210
  ```
156
211
 
157
- Or in your app/javascript/app.sass file:
212
+ Or in your app/javascript/packs/application.sass file:
158
213
 
159
214
  ```sass
160
215
  // ~ to tell that this is not a relative import
@@ -13,8 +13,8 @@ By default the output will look like this in different environments:
13
13
  <script src="http://localhost:8080/calendar-0bd141f6d9360cf4a7f5.js"></script>
14
14
  <link rel="stylesheet" media="screen" href="http://localhost:8080/calendar-dc02976b5f94b507e3b6.css">
15
15
  <!-- In production or development mode -->
16
- <script src="/packs/calendar-0bd141f6d9360cf4a7f5.js"></script>
17
- <link rel="stylesheet" media="screen" href="/packs/calendar-dc02976b5f94b507e3b6.css">
16
+ <script src="/packs/js/calendar-0bd141f6d9360cf4a7f5.js"></script>
17
+ <link rel="stylesheet" media="screen" href="/packs/css/calendar-dc02976b5f94b507e3b6.css">
18
18
  ```
19
19
 
20
20
 
@@ -1,6 +1,6 @@
1
1
  # Docker
2
2
 
3
- To setup webpacker with a dockerized Rails application is trivial.
3
+ To setup webpacker with a dockerized Rails application.
4
4
 
5
5
  First, add a new service for webpacker in docker-compose.yml:
6
6
 
@@ -9,8 +9,10 @@ version: '3'
9
9
  services:
10
10
  webpacker:
11
11
  build: .
12
- env_file:
13
- - '.env.docker'
12
+ environment:
13
+ - NODE_ENV=development
14
+ - RAILS_ENV=development
15
+ - WEBPACKER_DEV_SERVER_HOST=0.0.0.0
14
16
  command: ./bin/webpack-dev-server
15
17
  volumes:
16
18
  - .:/webpacker-example-app
@@ -18,15 +20,6 @@ services:
18
20
  - '3035:3035'
19
21
  ```
20
22
 
21
- Second, change the webpack-dev-server host to the service name of the docker-compose in config/webpacker.yml:
22
-
23
- ```yaml
24
- development:
25
- <<: *default
26
- dev_server:
27
- host: webpacker
28
- ```
29
-
30
23
  add nodejs and yarn as dependencies in Dockerfile,
31
24
 
32
25
  ```dockerfile
@@ -53,12 +46,19 @@ RUN curl -sL https://deb.nodesource.com/setup_8.x | bash \
53
46
  # Rest of the commands....
54
47
  ```
55
48
 
56
- and create an env file to load environment variables from:
49
+ then add the webpacker host name environment variable to the web/app service:
57
50
 
58
- ```env
59
- NODE_ENV=development
60
- RAILS_ENV=development
61
- WEBPACKER_DEV_SERVER_HOST=0.0.0.0
51
+ ```Dockerfile
52
+ web:
53
+ build:
54
+ context: .
55
+ command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
56
+ volumes:
57
+ - .:/usr/src/app
58
+ ports:
59
+ - "3000:3000"
60
+ environment:
61
+ - WEBPACKER_DEV_SERVER_HOST=webpacker
62
62
  ```
63
63
 
64
64
  Lastly, rebuild your container:
@@ -196,5 +196,18 @@ config.middleware.use(
196
196
  urls: ["/my-engine-packs"], root: "my_engine/public"
197
197
  )
198
198
  ```
199
+ or if you prefer to keep your engine-related configuration within the engine itself
200
+
201
+ ```ruby
202
+ # my-engine-root/lib/my-engine/engine.rb
203
+ module MyEngine
204
+ class Engine < ::Rails:Engine
205
+ config.app_middleware.use(
206
+ Rack::Static,
207
+ urls: ["/my-engine-packs"], root: "my_engine/public"
208
+ )
209
+ end
210
+ end
211
+ ```
199
212
 
200
213
  **NOTE:** in the example above we assume that your `public_output_path` is set to `my-engine-packs` in your engine's `webpacker.yml`.
@@ -49,8 +49,6 @@ dotenvFiles.forEach((dotenvFile) => {
49
49
  dotenv.config({ path: dotenvFile, silent: true })
50
50
  })
51
51
 
52
- environment.plugins.prepend('Environment', new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(process.env))))
53
-
54
52
  module.exports = environment
55
53
  ```
56
54
 
@@ -0,0 +1,220 @@
1
+ # Integrations
2
+
3
+ Webpacker ships with basic out-of-the-box integration for React, Angular, Vue and Elm.
4
+ You can see a list of available commands/tasks by running `bundle exec rails webpacker`:
5
+
6
+ ## React
7
+
8
+ To use Webpacker with [React](https://facebook.github.io/react/), create a
9
+ new Rails 5.1+ app using `--webpack=react` option:
10
+
11
+ ```bash
12
+ # Rails 5.1+
13
+ rails new myapp --webpack=react
14
+ ```
15
+
16
+ (or run `bundle exec rails webpacker:install:react` in an existing Rails app already
17
+ setup with Webpacker).
18
+
19
+ The installer will add all relevant dependencies using Yarn, changes
20
+ to the configuration files, and an example React component to your
21
+ project in `app/javascript/packs` so that you can experiment with React right away.
22
+
23
+
24
+ ## Angular with TypeScript
25
+
26
+ To use Webpacker with [Angular](https://angular.io/), create a
27
+ new Rails 5.1+ app using `--webpack=angular` option:
28
+
29
+ ```bash
30
+ # Rails 5.1+
31
+ rails new myapp --webpack=angular
32
+ ```
33
+
34
+ (or run `bundle exec rails webpacker:install:angular` on a Rails app already
35
+ setup with Webpacker).
36
+
37
+ The installer will add the TypeScript and Angular core libraries using Yarn alongside
38
+ a few changes to the configuration files. An example component written in
39
+ TypeScript will also be added to your project in `app/javascript` so that
40
+ you can experiment with Angular right away.
41
+
42
+ By default, Angular uses a JIT compiler for development environment. This
43
+ compiler is not compatible with restrictive CSP (Content Security
44
+ Policy) environments like Rails 5.2+. You can use Angular AOT compiler
45
+ in development with the [@ngtools/webpack](https://www.npmjs.com/package/@ngtools/webpack#usage) plugin.
46
+
47
+ Alternatively if you're using Rails 5.2+ you can enable `unsafe-eval` rule for your
48
+ development environment. This can be done in the `config/initializers/content_security_policy.rb`
49
+ with the following code:
50
+
51
+ ```ruby
52
+ Rails.application.config.content_security_policy do |policy|
53
+ if Rails.env.development?
54
+ policy.script_src :self, :https, :unsafe_eval
55
+ else
56
+ policy.script_src :self, :https
57
+ end
58
+ end
59
+ ```
60
+
61
+
62
+ ## Vue
63
+
64
+ To use Webpacker with [Vue](https://vuejs.org/), create a
65
+ new Rails 5.1+ app using `--webpack=vue` option:
66
+
67
+ ```bash
68
+ # Rails 5.1+
69
+ rails new myapp --webpack=vue
70
+ ```
71
+ (or run `bundle exec rails webpacker:install:vue` on a Rails app already setup with Webpacker).
72
+
73
+ The installer will add Vue and its required libraries using Yarn alongside
74
+ automatically applying changes needed to the configuration files. An example component will
75
+ be added to your project in `app/javascript` so that you can experiment with Vue right away.
76
+
77
+ If you're using Rails 5.2+ you'll need to enable `unsafe-eval` rule for your development environment.
78
+ This can be done in the `config/initializers/content_security_policy.rb` with the following
79
+ configuration:
80
+
81
+ ```ruby
82
+ Rails.application.config.content_security_policy do |policy|
83
+ if Rails.env.development?
84
+ policy.script_src :self, :https, :unsafe_eval
85
+ else
86
+ policy.script_src :self, :https
87
+ end
88
+ end
89
+ ```
90
+ You can read more about this in the [Vue docs](https://vuejs.org/v2/guide/installation.html#CSP-environments).
91
+
92
+ ### Lazy loading integration
93
+
94
+ See [docs/es6](es6.md) to know more about Webpack and Webpacker configuration.
95
+
96
+ For instance, you can lazy load Vue JS components:
97
+
98
+ Before:
99
+ ```js
100
+ import Vue from 'vue'
101
+ import { VCard } from 'vuetify/lib'
102
+
103
+ Vue.component('VCard', VCard)
104
+ ```
105
+
106
+ After:
107
+ ```js
108
+ import Vue from 'vue'
109
+
110
+ // With destructuring assignment
111
+ Vue.component('VCard', import('vuetify/lib').then(({ VCard }) => VCard)
112
+
113
+ // Or without destructuring assignment
114
+ Vue.component('OtherComponent', () => import('./OtherComponent'))
115
+ ```
116
+
117
+ You can use it in a Single File Component as well:
118
+
119
+ ```html
120
+ <template>
121
+ ...
122
+ </template>
123
+
124
+ <script>
125
+ export default {
126
+ components: {
127
+ OtherComponent: () => import('./OtherComponent')
128
+ }
129
+ }
130
+ </script>
131
+ ```
132
+
133
+ By wrapping the import function into an arrow function, Vue will execute it only when it gets requested, loading the module in that moment.
134
+
135
+ ##### Automatic registration
136
+
137
+ ```js
138
+ /**
139
+ * The following block of code may be used to automatically register your
140
+ * Vue components. It will recursively scan this directory for the Vue
141
+ * components and automatically register them with their "basename".
142
+ *
143
+ * Eg. ./components/OtherComponent.vue -> <other-component></other-component>
144
+ * Eg. ./UI/ButtonComponent.vue -> <button-component></button-component>
145
+ */
146
+
147
+ const files = require.context('./', true, /\.vue$/i)
148
+ files.keys().map(key => {
149
+ const component = key.split('/').pop().split('.')[0]
150
+
151
+ // With Lazy Loading
152
+ Vue.component(component, () => import(`${key}`))
153
+
154
+ // Or without Lazy Loading
155
+ Vue.component(component, files(key).default)
156
+ })
157
+ ```
158
+
159
+ ## Elm
160
+
161
+ To use Webpacker with [Elm](http://elm-lang.org), create a
162
+ new Rails 5.1+ app using `--webpack=elm` option:
163
+
164
+ ```
165
+ # Rails 5.1+
166
+ rails new myapp --webpack=elm
167
+ ```
168
+
169
+ (or run `bundle exec rails webpacker:install:elm` on a Rails app already setup with Webpacker).
170
+
171
+ The Elm library and its core packages will be added via Yarn and Elm.
172
+ An example `Main.elm` app will also be added to your project in `app/javascript`
173
+ so that you can experiment with Elm right away.
174
+
175
+ ## Svelte
176
+
177
+ To use Webpacker with [Svelte](https://svelte.dev), create a
178
+ new Rails 5.1+ app using `--webpack=svelte` option:
179
+
180
+ ```
181
+ # Rails 5.1+
182
+ rails new myapp --webpack=svelte
183
+ ```
184
+
185
+ (or run `bundle exec rails webpacker:install:svelte` on a Rails app already setup with Webpacker).
186
+
187
+ Please play with the [Svelte Tutorial](https://svelte.dev/tutorial/basics) or learn more about its API at https://svelte.dev/docs
188
+
189
+ ## Stimulus
190
+
191
+ To use Webpacker with [Stimulus](http://stimulusjs.org), create a
192
+ new Rails 5.1+ app using `--webpack=stimulus` option:
193
+
194
+ ```
195
+ # Rails 5.1+
196
+ rails new myapp --webpack=stimulus
197
+ ```
198
+
199
+ (or run `bundle exec rails webpacker:install:stimulus` on a Rails app already setup with Webpacker).
200
+
201
+ Please read [The Stimulus Handbook](https://stimulusjs.org/handbook/introduction) or learn more about its source code at https://github.com/stimulusjs/stimulus
202
+
203
+ ## CoffeeScript
204
+
205
+ To add [CoffeeScript](http://coffeescript.org/) support,
206
+ run `bundle exec rails webpacker:install:coffee` on a Rails app already
207
+ setup with Webpacker.
208
+
209
+ An example `hello_coffee.coffee` file will also be added to your project
210
+ in `app/javascript/packs` so that you can experiment with CoffeeScript right away.
211
+
212
+ ## Erb
213
+
214
+ To add [Erb](https://apidock.com/ruby/ERB) support in your JS templates,
215
+ run `bundle exec rails webpacker:install:erb` on a Rails app already
216
+ setup with Webpacker.
217
+
218
+ An example `hello_erb.js.erb` file will also be added to your project
219
+ in `app/javascript/packs` so that you can experiment with Erb-flavoured
220
+ javascript right away.
@@ -0,0 +1,22 @@
1
+ # Target browsers
2
+
3
+ By default webpacker provides these front-end tools:
4
+ - [@babel/preset-env](https://github.com/babel/babel/tree/master/packages/babel-preset-env)
5
+ - [Autoprefixer](https://github.com/postcss/autoprefixer)
6
+ - [postcss-preset-env](https://github.com/csstools/postcss-preset-env)
7
+
8
+ All these tools use [Browserslist](https://github.com/browserslist/browserslist) to detect which environment your users have
9
+
10
+ Webpacker browserslist default target:
11
+ ```
12
+ defaults
13
+ ```
14
+
15
+ `defaults`: `(> 0.5%, last 2 versions, Firefox ESR, not dead)`, [browserl.ist](https://browserl.ist/) is an online tool to check what browsers will be selected by some query.
16
+
17
+ To keep browsers data up to date, you need to run:
18
+ ```bash
19
+ yarn upgrade caniuse-lite
20
+ ```
21
+
22
+ at least once every few months, to prevent such [problems](https://github.com/browserslist/browserslist/issues/492)
@@ -10,8 +10,7 @@ Webpacker does not setup `Karma` by default, so you've to manually install it al
10
10
  "test": "NODE_ENV=test karma start"
11
11
  },
12
12
  "dependencies": {
13
- "typescript": "^2.5.2",
14
- "ts-loader": "^2.3.7"
13
+ "typescript": "^2.5.2"
15
14
  },
16
15
  "devDependencies": {
17
16
  "karma": "^1.7.1",
@@ -33,7 +32,7 @@ It is beneficial to use the same webpack configuration file (generated by webpac
33
32
  ```js
34
33
  // config/webpack/test.js
35
34
  const environment = require('./environment')
36
- environment.plugins.get('Manifest').opts.writeToFileEmit = process.env.NODE_ENV !== 'test'
35
+ environment.plugins.get('Manifest').options.writeToFileEmit = process.env.NODE_ENV !== 'test'
37
36
  environment.loaders.append('istanbul-instrumenter', {
38
37
  test: /\.ts$/,
39
38
  enforce: "post",