webpacker 5.1.0 → 6.0.0.pre.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (163) 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/.gitignore +2 -0
  8. data/.node-version +1 -1
  9. data/.rubocop.yml +11 -16
  10. data/CHANGELOG.md +26 -0
  11. data/CONTRIBUTING.md +1 -1
  12. data/Gemfile.lock +91 -85
  13. data/README.md +18 -22
  14. data/docs/assets.md +21 -5
  15. data/docs/css.md +80 -30
  16. data/docs/deployment.md +18 -0
  17. data/docs/docker.md +2 -2
  18. data/docs/engines.md +1 -1
  19. data/docs/env.md +5 -0
  20. data/docs/es6.md +1 -1
  21. data/docs/integrations.md +2 -2
  22. data/docs/props.md +2 -38
  23. data/docs/react.md +183 -0
  24. data/docs/target.md +22 -0
  25. data/docs/testing.md +12 -1
  26. data/docs/troubleshooting.md +3 -1
  27. data/docs/typescript.md +89 -8
  28. data/docs/webpack-dev-server.md +17 -15
  29. data/docs/webpack.md +58 -107
  30. data/lib/install/config/webpack/base.js +3 -0
  31. data/lib/install/config/webpack/development.js +2 -2
  32. data/lib/install/config/webpack/production.js +2 -2
  33. data/lib/install/config/webpack/test.js +2 -2
  34. data/lib/install/config/webpacker.yml +9 -38
  35. data/lib/install/examples/{vue → vue3}/app.vue +10 -5
  36. data/lib/install/examples/vue3/hello_vue.js +15 -0
  37. data/lib/install/javascript/packs/application.css +9 -0
  38. data/lib/install/template.rb +33 -19
  39. data/lib/tasks/webpacker.rake +2 -11
  40. data/lib/tasks/webpacker/binstubs.rake +6 -4
  41. data/lib/tasks/webpacker/check_binstubs.rake +4 -4
  42. data/lib/tasks/webpacker/check_node.rake +1 -1
  43. data/lib/tasks/webpacker/check_yarn.rake +2 -3
  44. data/lib/tasks/webpacker/compile.rake +4 -2
  45. data/lib/tasks/webpacker/info.rake +12 -10
  46. data/lib/tasks/webpacker/install.rake +6 -4
  47. data/lib/tasks/webpacker/verify_install.rake +2 -1
  48. data/lib/tasks/webpacker/yarn_install.rake +9 -1
  49. data/lib/webpacker/commands.rb +1 -1
  50. data/lib/webpacker/compiler.rb +12 -6
  51. data/lib/webpacker/configuration.rb +7 -23
  52. data/lib/webpacker/dev_server_runner.rb +23 -4
  53. data/lib/webpacker/helper.rb +51 -42
  54. data/lib/webpacker/manifest.rb +1 -1
  55. data/lib/webpacker/runner.rb +1 -0
  56. data/lib/webpacker/version.rb +1 -1
  57. data/lib/webpacker/webpack_runner.rb +7 -2
  58. data/package.json +27 -43
  59. data/package/__tests__/config.js +6 -27
  60. data/package/__tests__/development.js +18 -7
  61. data/package/__tests__/env.js +12 -4
  62. data/package/__tests__/production.js +6 -6
  63. data/package/__tests__/staging.js +7 -6
  64. data/package/__tests__/test.js +4 -5
  65. data/package/babel/preset-react.js +62 -0
  66. data/package/babel/preset.js +44 -0
  67. data/package/config.js +4 -9
  68. data/package/configPath.js +3 -0
  69. data/package/env.js +9 -4
  70. data/package/environments/__tests__/base.js +21 -36
  71. data/package/environments/base.js +67 -128
  72. data/package/environments/development.js +46 -39
  73. data/package/environments/production.js +69 -67
  74. data/package/environments/test.js +2 -2
  75. data/package/index.js +6 -6
  76. data/package/rules/babel.js +19 -10
  77. data/package/rules/coffee.js +6 -0
  78. data/package/rules/erb.js +13 -0
  79. data/package/rules/file.js +19 -18
  80. data/package/rules/index.js +24 -18
  81. data/package/rules/less.js +18 -0
  82. data/package/rules/sass.js +6 -7
  83. data/package/rules/svg.js +23 -0
  84. data/package/utils/get_style_rule.js +22 -28
  85. data/package/utils/helpers.js +3 -35
  86. data/test/compiler_test.rb +4 -11
  87. data/test/configuration_test.rb +2 -32
  88. data/test/dev_server_runner_test.rb +25 -6
  89. data/test/engine_rake_tasks_test.rb +39 -0
  90. data/test/helper_test.rb +18 -9
  91. data/test/mounted_app/Rakefile +4 -0
  92. data/test/mounted_app/test/dummy/Rakefile +3 -0
  93. data/test/mounted_app/test/dummy/bin/rails +3 -0
  94. data/test/mounted_app/test/dummy/bin/rake +3 -0
  95. data/test/mounted_app/test/dummy/config.ru +5 -0
  96. data/test/mounted_app/test/dummy/config/application.rb +10 -0
  97. data/test/mounted_app/test/dummy/config/environment.rb +3 -0
  98. data/test/mounted_app/test/dummy/config/webpacker.yml +75 -0
  99. data/test/mounted_app/test/dummy/package.json +7 -0
  100. data/test/rake_tasks_test.rb +1 -10
  101. data/test/test_app/config/webpacker.yml +3 -21
  102. data/test/test_app/config/webpacker_public_root.yml +0 -1
  103. data/test/test_app/public/packs/manifest.json +18 -13
  104. data/test/test_app/some.config.js +0 -0
  105. data/test/webpack_runner_test.rb +10 -4
  106. data/webpacker.gemspec +1 -1
  107. data/yarn.lock +2657 -6224
  108. metadata +53 -70
  109. data/.travis.yml +0 -43
  110. data/lib/install/angular.rb +0 -23
  111. data/lib/install/coffee.rb +0 -25
  112. data/lib/install/config/.browserslistrc +0 -1
  113. data/lib/install/config/babel.config.js +0 -72
  114. data/lib/install/config/postcss.config.js +0 -12
  115. data/lib/install/config/webpack/environment.js +0 -3
  116. data/lib/install/elm.rb +0 -39
  117. data/lib/install/erb.rb +0 -25
  118. data/lib/install/examples/angular/hello_angular.js +0 -7
  119. data/lib/install/examples/angular/hello_angular/app/app.component.ts +0 -9
  120. data/lib/install/examples/angular/hello_angular/app/app.module.ts +0 -16
  121. data/lib/install/examples/angular/hello_angular/index.ts +0 -8
  122. data/lib/install/examples/angular/hello_angular/polyfills.ts +0 -73
  123. data/lib/install/examples/coffee/hello_coffee.coffee +0 -4
  124. data/lib/install/examples/elm/Main.elm +0 -55
  125. data/lib/install/examples/elm/hello_elm.js +0 -16
  126. data/lib/install/examples/erb/hello_erb.js.erb +0 -6
  127. data/lib/install/examples/react/babel.config.js +0 -87
  128. data/lib/install/examples/react/hello_react.jsx +0 -26
  129. data/lib/install/examples/react/tsconfig.json +0 -21
  130. data/lib/install/examples/stimulus/application.js +0 -1
  131. data/lib/install/examples/stimulus/controllers/hello_controller.js +0 -18
  132. data/lib/install/examples/stimulus/controllers/index.js +0 -9
  133. data/lib/install/examples/svelte/app.svelte +0 -11
  134. data/lib/install/examples/svelte/hello_svelte.js +0 -20
  135. data/lib/install/examples/typescript/hello_typescript.ts +0 -4
  136. data/lib/install/examples/typescript/tsconfig.json +0 -24
  137. data/lib/install/examples/vue/hello_vue.js +0 -72
  138. data/lib/install/loaders/coffee.js +0 -6
  139. data/lib/install/loaders/elm.js +0 -25
  140. data/lib/install/loaders/erb.js +0 -11
  141. data/lib/install/loaders/svelte.js +0 -9
  142. data/lib/install/loaders/vue.js +0 -6
  143. data/lib/install/react.rb +0 -18
  144. data/lib/install/stimulus.rb +0 -12
  145. data/lib/install/svelte.rb +0 -29
  146. data/lib/install/typescript.rb +0 -42
  147. data/lib/install/vue.rb +0 -49
  148. data/lib/tasks/installers.rake +0 -42
  149. data/package/config_types/__tests__/config_list.js +0 -118
  150. data/package/config_types/__tests__/config_object.js +0 -43
  151. data/package/config_types/config_list.js +0 -75
  152. data/package/config_types/config_object.js +0 -55
  153. data/package/config_types/index.js +0 -7
  154. data/package/rules/module.css.js +0 -3
  155. data/package/rules/module.sass.js +0 -8
  156. data/package/rules/node_modules.js +0 -24
  157. data/package/utils/__tests__/deep_assign.js +0 -32
  158. data/package/utils/__tests__/deep_merge.js +0 -10
  159. data/package/utils/__tests__/get_style_rule.js +0 -65
  160. data/package/utils/__tests__/objectify.js +0 -9
  161. data/package/utils/deep_assign.js +0 -22
  162. data/package/utils/deep_merge.js +0 -22
  163. data/package/utils/objectify.js +0 -3
@@ -1,25 +0,0 @@
1
- require "webpacker/configuration"
2
-
3
- say "Copying erb loader to config/webpack/loaders"
4
- copy_file "#{__dir__}/loaders/erb.js", Rails.root.join("config/webpack/loaders/erb.js").to_s
5
-
6
- say "Adding erb loader to config/webpack/environment.js"
7
- insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
8
- "const erb = require('./loaders/erb')\n",
9
- after: /require\(('|")@rails\/webpacker\1\);?\n/
10
-
11
- insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
12
- "environment.loaders.prepend('erb', erb)\n",
13
- before: "module.exports"
14
-
15
- say "Updating webpack paths to include .erb file extension"
16
- insert_into_file Webpacker.config.config_path, "- .erb\n".indent(4), after: /\s+extensions:\n/
17
-
18
- say "Copying the example entry file to #{Webpacker.config.source_entry_path}"
19
- copy_file "#{__dir__}/examples/erb/hello_erb.js.erb",
20
- "#{Webpacker.config.source_entry_path}/hello_erb.js.erb"
21
-
22
- say "Installing all Erb dependencies"
23
- run "yarn add rails-erb-loader"
24
-
25
- say "Webpacker now supports Erb in JS 🎉", :green
@@ -1,7 +0,0 @@
1
- // Run this Angular example by adding the following HTML markup to your view:
2
- //
3
- // <hello-angular>Loading...</hello-angular>
4
- //
5
- // <%= javascript_pack_tag 'hello_angular' %>
6
-
7
- require('../hello_angular')
@@ -1,9 +0,0 @@
1
- import { Component } from '@angular/core';
2
-
3
- @Component({
4
- selector: 'hello-angular',
5
- template: `<h1>Hello {{name}}</h1>`
6
- })
7
- export class AppComponent {
8
- name = 'Angular!';
9
- }
@@ -1,16 +0,0 @@
1
- import { BrowserModule } from '@angular/platform-browser';
2
- import { NgModule } from '@angular/core';
3
-
4
- import { AppComponent } from './app.component';
5
-
6
- @NgModule({
7
- declarations: [
8
- AppComponent
9
- ],
10
- imports: [
11
- BrowserModule
12
- ],
13
- providers: [],
14
- bootstrap: [AppComponent]
15
- })
16
- export class AppModule { }
@@ -1,8 +0,0 @@
1
- import './polyfills.ts';
2
-
3
- import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
4
- import { AppModule } from './app/app.module';
5
-
6
- document.addEventListener('DOMContentLoaded', () => {
7
- platformBrowserDynamic().bootstrapModule(AppModule);
8
- });
@@ -1,73 +0,0 @@
1
- /**
2
- * This file includes polyfills needed by Angular and is loaded before the app.
3
- * You can add your own extra polyfills to this file.
4
- *
5
- * This file is divided into 2 sections:
6
- * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7
- * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8
- * file.
9
- *
10
- * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11
- * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12
- * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13
- *
14
- * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
15
- */
16
-
17
- /***************************************************************************************************
18
- * BROWSER POLYFILLS
19
- */
20
-
21
- /** IE9, IE10 and IE11 requires all of the following polyfills. **/
22
- // import 'core-js/es6/symbol';
23
- // import 'core-js/es6/object';
24
- // import 'core-js/es6/function';
25
- // import 'core-js/es6/parse-int';
26
- // import 'core-js/es6/parse-float';
27
- // import 'core-js/es6/number';
28
- // import 'core-js/es6/math';
29
- // import 'core-js/es6/string';
30
- // import 'core-js/es6/date';
31
- // import 'core-js/es6/array';
32
- // import 'core-js/es6/regexp';
33
- // import 'core-js/es6/map';
34
- // import 'core-js/es6/weak-map';
35
- // import 'core-js/es6/set';
36
-
37
- /** IE10 and IE11 requires the following for NgClass support on SVG elements */
38
- // import 'classlist.js'; // Run `npm install --save classlist.js`.
39
-
40
- /** Evergreen browsers require these. **/
41
- import 'core-js/es/reflect';
42
- import 'core-js/proposals/reflect-metadata';
43
-
44
-
45
- /**
46
- * Required to support Web Animations `@angular/animation`.
47
- * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
48
- **/
49
- // import 'web-animations-js'; // Run `npm install --save web-animations-js`.
50
-
51
-
52
-
53
- /***************************************************************************************************
54
- * Zone JS is required by Angular itself.
55
- */
56
- import 'zone.js/dist/zone';
57
- // import 'zone.js/dist/long-stack-trace-zone' // async stack traces with zone.js
58
-
59
-
60
-
61
- /***************************************************************************************************
62
- * APPLICATION IMPORTS
63
- */
64
-
65
- /**
66
- * Date, currency, decimal and percent pipes.
67
- * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
68
- */
69
- // import 'intl'; // Run `npm install --save intl`.
70
- /**
71
- * Need to import at least one locale-data with intl.
72
- */
73
- // import 'intl/locale-data/jsonp/en';
@@ -1,4 +0,0 @@
1
- # Run this example by adding <%= javascript_pack_tag 'hello_coffee' %> to the head of your layout file,
2
- # like app/views/layouts/application.html.erb.
3
-
4
- console.log 'Hello world from coffeescript'
@@ -1,55 +0,0 @@
1
- module Main exposing (..)
2
-
3
- import Browser
4
- import Html exposing (Html, h1, text)
5
- import Html.Attributes exposing (style)
6
-
7
- -- MODEL
8
-
9
- type alias Model =
10
- {
11
- }
12
-
13
- -- INIT
14
-
15
- init : (Model, Cmd Message)
16
- init =
17
- (Model, Cmd.none)
18
-
19
- -- VIEW
20
-
21
- view : Model -> Html Message
22
- view model =
23
- -- The inline style is being used for example purposes in order to keep this example simple and
24
- -- avoid loading additional resources. Use a proper stylesheet when building your own app.
25
- h1 [style "display" "flex", style "justify-content" "center"]
26
- [text "Hello Elm!"]
27
-
28
- -- MESSAGE
29
-
30
- type Message
31
- = None
32
-
33
- -- UPDATE
34
-
35
- update : Message -> Model -> (Model, Cmd Message)
36
- update message model =
37
- (model, Cmd.none)
38
-
39
- -- SUBSCRIPTIONS
40
-
41
- subscriptions : Model -> Sub Message
42
- subscriptions model =
43
- Sub.none
44
-
45
- -- MAIN
46
-
47
- main : Program (Maybe {}) Model Message
48
- main =
49
- Browser.element
50
- {
51
- init = always init,
52
- view = view,
53
- update = update,
54
- subscriptions = subscriptions
55
- }
@@ -1,16 +0,0 @@
1
- // Run this example by adding <%= javascript_pack_tag "hello_elm" %> to the
2
- // head of your layout file, like app/views/layouts/application.html.erb.
3
- // It will render "Hello Elm!" within the page.
4
-
5
- import {
6
- Elm
7
- } from '../Main'
8
-
9
- document.addEventListener('DOMContentLoaded', () => {
10
- const target = document.createElement('div')
11
-
12
- document.body.appendChild(target)
13
- Elm.Main.init({
14
- node: target
15
- })
16
- })
@@ -1,6 +0,0 @@
1
- // Run this example by adding <%%= javascript_pack_tag 'hello_erb' %> to the head of your layout file,
2
- // like app/views/layouts/application.html.erb. Don't forget to uncomment erb tag after adding it to your layout file.
3
-
4
- <% name = 'Erb' %>
5
-
6
- console.log('Hello world from <%= name %>')
@@ -1,87 +0,0 @@
1
- module.exports = function(api) {
2
- var validEnv = ['development', 'test', 'production']
3
- var currentEnv = api.env()
4
- var isDevelopmentEnv = api.env('development')
5
- var isProductionEnv = api.env('production')
6
- var isTestEnv = api.env('test')
7
-
8
- if (!validEnv.includes(currentEnv)) {
9
- throw new Error(
10
- 'Please specify a valid `NODE_ENV` or ' +
11
- '`BABEL_ENV` environment variables. Valid values are "development", ' +
12
- '"test", and "production". Instead, received: ' +
13
- JSON.stringify(currentEnv) +
14
- '.'
15
- )
16
- }
17
-
18
- return {
19
- presets: [
20
- isTestEnv && [
21
- '@babel/preset-env',
22
- {
23
- targets: {
24
- node: 'current'
25
- },
26
- modules: 'commonjs'
27
- },
28
- '@babel/preset-react'
29
- ],
30
- (isProductionEnv || isDevelopmentEnv) && [
31
- '@babel/preset-env',
32
- {
33
- forceAllTransforms: true,
34
- useBuiltIns: 'entry',
35
- corejs: 3,
36
- modules: false,
37
- exclude: ['transform-typeof-symbol']
38
- }
39
- ],
40
- [
41
- '@babel/preset-react',
42
- {
43
- development: isDevelopmentEnv || isTestEnv,
44
- useBuiltIns: true
45
- }
46
- ]
47
- ].filter(Boolean),
48
- plugins: [
49
- 'babel-plugin-macros',
50
- '@babel/plugin-syntax-dynamic-import',
51
- isTestEnv && 'babel-plugin-dynamic-import-node',
52
- '@babel/plugin-transform-destructuring',
53
- [
54
- '@babel/plugin-proposal-class-properties',
55
- {
56
- loose: true
57
- }
58
- ],
59
- [
60
- '@babel/plugin-proposal-object-rest-spread',
61
- {
62
- useBuiltIns: true
63
- }
64
- ],
65
- [
66
- '@babel/plugin-transform-runtime',
67
- {
68
- helpers: false,
69
- regenerator: true,
70
- corejs: false
71
- }
72
- ],
73
- [
74
- '@babel/plugin-transform-regenerator',
75
- {
76
- async: false
77
- }
78
- ],
79
- isProductionEnv && [
80
- 'babel-plugin-transform-react-remove-prop-types',
81
- {
82
- removeImport: true
83
- }
84
- ]
85
- ].filter(Boolean)
86
- }
87
- }
@@ -1,26 +0,0 @@
1
- // Run this example by adding <%= javascript_pack_tag 'hello_react' %> to the head of your layout file,
2
- // like app/views/layouts/application.html.erb. All it does is render <div>Hello React</div> at the bottom
3
- // of the page.
4
-
5
- import React from 'react'
6
- import ReactDOM from 'react-dom'
7
- import PropTypes from 'prop-types'
8
-
9
- const Hello = props => (
10
- <div>Hello {props.name}!</div>
11
- )
12
-
13
- Hello.defaultProps = {
14
- name: 'David'
15
- }
16
-
17
- Hello.propTypes = {
18
- name: PropTypes.string
19
- }
20
-
21
- document.addEventListener('DOMContentLoaded', () => {
22
- ReactDOM.render(
23
- <Hello name="React" />,
24
- document.body.appendChild(document.createElement('div')),
25
- )
26
- })
@@ -1,21 +0,0 @@
1
- {
2
- "compilerOptions": {
3
- "declaration": false,
4
- "emitDecoratorMetadata": true,
5
- "experimentalDecorators": true,
6
- "lib": ["es6", "dom"],
7
- "module": "es6",
8
- "moduleResolution": "node",
9
- "sourceMap": true,
10
- "target": "es5",
11
- "jsx": "react",
12
- "noEmit": true
13
- },
14
- "exclude": [
15
- "**/*.spec.ts",
16
- "node_modules",
17
- "vendor",
18
- "public"
19
- ],
20
- "compileOnSave": false
21
- }
@@ -1 +0,0 @@
1
- import "controllers"
@@ -1,18 +0,0 @@
1
- // Visit The Stimulus Handbook for more details
2
- // https://stimulusjs.org/handbook/introduction
3
- //
4
- // This example controller works with specially annotated HTML like:
5
- //
6
- // <div data-controller="hello">
7
- // <h1 data-target="hello.output"></h1>
8
- // </div>
9
-
10
- import { Controller } from "stimulus"
11
-
12
- export default class extends Controller {
13
- static targets = [ "output" ]
14
-
15
- connect() {
16
- this.outputTarget.textContent = 'Hello, Stimulus!'
17
- }
18
- }
@@ -1,9 +0,0 @@
1
- // Load all the controllers within this directory and all subdirectories.
2
- // Controller files must be named *_controller.js.
3
-
4
- import { Application } from "stimulus"
5
- import { definitionsFromContext } from "stimulus/webpack-helpers"
6
-
7
- const application = Application.start()
8
- const context = require.context("controllers", true, /_controller\.js$/)
9
- application.load(definitionsFromContext(context))
@@ -1,11 +0,0 @@
1
- <script>
2
- export let name;
3
- </script>
4
-
5
- <style>
6
- h1 {
7
- color: #FF3E00;
8
- }
9
- </style>
10
-
11
- <h1>Hello {name}!</h1>
@@ -1,20 +0,0 @@
1
- /* eslint no-console: 0 */
2
- // Run this example by adding <%= javascript_pack_tag 'hello_svelte' %> (and
3
- // <%= stylesheet_pack_tag 'hello_svelte' %> if you have styles in your component)
4
- // to the head of your layout file,
5
- // like app/views/layouts/application.html.erb.
6
- // All it does is render <div>Hello Svelte!</div> at the bottom of the page.
7
-
8
- import App from '../app.svelte'
9
-
10
- document.addEventListener('DOMContentLoaded', () => {
11
- const app = new App({
12
- target: document.body,
13
- props: {
14
- name: 'Svelte'
15
- }
16
- });
17
-
18
- window.app = app;
19
- })
20
-
@@ -1,4 +0,0 @@
1
- // Run this example by adding <%= javascript_pack_tag 'hello_typescript' %> to the head of your layout file,
2
- // like app/views/layouts/application.html.erb.
3
-
4
- console.log('Hello world from typescript');