webpacker 5.2.1 → 6.0.0.pre.1

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.
Files changed (154) hide show
  1. checksums.yaml +4 -4
  2. data/.eslintrc.js +1 -1
  3. data/.gitignore +2 -0
  4. data/.node-version +1 -1
  5. data/.rubocop.yml +11 -16
  6. data/CHANGELOG.md +15 -4
  7. data/CONTRIBUTING.md +1 -1
  8. data/Gemfile.lock +17 -11
  9. data/README.md +8 -4
  10. data/docs/assets.md +21 -5
  11. data/docs/css.md +24 -29
  12. data/docs/deployment.md +18 -0
  13. data/docs/docker.md +2 -2
  14. data/docs/engines.md +1 -1
  15. data/docs/env.md +5 -0
  16. data/docs/es6.md +1 -1
  17. data/docs/integrations.md +1 -1
  18. data/docs/props.md +2 -38
  19. data/docs/react.md +183 -0
  20. data/docs/testing.md +11 -0
  21. data/docs/typescript.md +2 -2
  22. data/docs/webpack-dev-server.md +17 -15
  23. data/docs/webpack.md +58 -107
  24. data/lib/install/config/webpack/base.js +3 -0
  25. data/lib/install/config/webpack/development.js +2 -2
  26. data/lib/install/config/webpack/production.js +2 -2
  27. data/lib/install/config/webpack/test.js +2 -2
  28. data/lib/install/config/webpacker.yml +8 -37
  29. data/lib/install/examples/{vue → vue3}/app.vue +10 -5
  30. data/lib/install/examples/vue3/hello_vue.js +15 -0
  31. data/lib/install/javascript/packs/application.css +9 -0
  32. data/lib/install/template.rb +33 -19
  33. data/lib/tasks/webpacker.rake +2 -11
  34. data/lib/tasks/webpacker/binstubs.rake +6 -4
  35. data/lib/tasks/webpacker/check_binstubs.rake +4 -4
  36. data/lib/tasks/webpacker/check_yarn.rake +1 -2
  37. data/lib/tasks/webpacker/compile.rake +4 -2
  38. data/lib/tasks/webpacker/info.rake +12 -10
  39. data/lib/tasks/webpacker/install.rake +6 -4
  40. data/lib/tasks/webpacker/verify_install.rake +2 -1
  41. data/lib/tasks/webpacker/yarn_install.rake +9 -1
  42. data/lib/webpacker/commands.rb +1 -1
  43. data/lib/webpacker/compiler.rb +7 -6
  44. data/lib/webpacker/configuration.rb +6 -30
  45. data/lib/webpacker/dev_server_runner.rb +21 -2
  46. data/lib/webpacker/helper.rb +22 -32
  47. data/lib/webpacker/manifest.rb +1 -1
  48. data/lib/webpacker/version.rb +1 -1
  49. data/lib/webpacker/webpack_runner.rb +5 -0
  50. data/package.json +23 -39
  51. data/package/__tests__/config.js +5 -37
  52. data/package/__tests__/development.js +9 -11
  53. data/package/__tests__/env.js +12 -4
  54. data/package/__tests__/production.js +6 -6
  55. data/package/__tests__/staging.js +7 -6
  56. data/package/__tests__/test.js +4 -5
  57. data/package/babel/preset-react.js +62 -0
  58. data/package/babel/preset.js +44 -0
  59. data/package/config.js +3 -11
  60. data/package/env.js +8 -2
  61. data/package/environments/__tests__/base.js +15 -47
  62. data/package/environments/base.js +66 -126
  63. data/package/environments/development.js +45 -44
  64. data/package/environments/production.js +69 -65
  65. data/package/environments/test.js +2 -2
  66. data/package/index.js +6 -6
  67. data/package/rules/babel.js +9 -7
  68. data/package/rules/coffee.js +6 -0
  69. data/package/rules/erb.js +13 -0
  70. data/package/rules/file.js +19 -19
  71. data/package/rules/index.js +24 -18
  72. data/package/rules/less.js +18 -0
  73. data/package/rules/sass.js +5 -6
  74. data/package/rules/svg.js +23 -0
  75. data/package/utils/get_style_rule.js +22 -28
  76. data/package/utils/helpers.js +3 -35
  77. data/test/compiler_test.rb +0 -12
  78. data/test/configuration_test.rb +1 -32
  79. data/test/dev_server_runner_test.rb +24 -5
  80. data/test/engine_rake_tasks_test.rb +39 -0
  81. data/test/helper_test.rb +15 -9
  82. data/test/mounted_app/Rakefile +4 -0
  83. data/test/mounted_app/test/dummy/Rakefile +3 -0
  84. data/test/mounted_app/test/dummy/bin/rails +3 -0
  85. data/test/mounted_app/test/dummy/bin/rake +3 -0
  86. data/test/mounted_app/test/dummy/config.ru +5 -0
  87. data/test/mounted_app/test/dummy/config/application.rb +10 -0
  88. data/test/mounted_app/test/dummy/config/environment.rb +3 -0
  89. data/test/mounted_app/test/dummy/config/webpacker.yml +75 -0
  90. data/test/mounted_app/test/dummy/package.json +7 -0
  91. data/test/rake_tasks_test.rb +1 -10
  92. data/test/test_app/config/webpacker.yml +1 -25
  93. data/test/test_app/config/webpacker_public_root.yml +0 -1
  94. data/test/test_app/public/packs/manifest.json +17 -13
  95. data/test/test_app/some.config.js +0 -0
  96. data/test/webpack_runner_test.rb +9 -3
  97. data/webpacker.gemspec +1 -1
  98. data/yarn.lock +1858 -4915
  99. metadata +47 -70
  100. data/.travis.yml +0 -43
  101. data/lib/install/angular.rb +0 -23
  102. data/lib/install/coffee.rb +0 -25
  103. data/lib/install/config/.browserslistrc +0 -1
  104. data/lib/install/config/babel.config.js +0 -70
  105. data/lib/install/config/postcss.config.js +0 -12
  106. data/lib/install/config/webpack/environment.js +0 -3
  107. data/lib/install/elm.rb +0 -39
  108. data/lib/install/erb.rb +0 -25
  109. data/lib/install/examples/angular/hello_angular.js +0 -7
  110. data/lib/install/examples/angular/hello_angular/app/app.component.ts +0 -9
  111. data/lib/install/examples/angular/hello_angular/app/app.module.ts +0 -16
  112. data/lib/install/examples/angular/hello_angular/index.ts +0 -8
  113. data/lib/install/examples/angular/hello_angular/polyfills.ts +0 -73
  114. data/lib/install/examples/coffee/hello_coffee.coffee +0 -4
  115. data/lib/install/examples/elm/Main.elm +0 -55
  116. data/lib/install/examples/elm/hello_elm.js +0 -16
  117. data/lib/install/examples/erb/hello_erb.js.erb +0 -6
  118. data/lib/install/examples/react/babel.config.js +0 -87
  119. data/lib/install/examples/react/hello_react.jsx +0 -26
  120. data/lib/install/examples/react/tsconfig.json +0 -21
  121. data/lib/install/examples/stimulus/application.js +0 -1
  122. data/lib/install/examples/stimulus/controllers/hello_controller.js +0 -18
  123. data/lib/install/examples/stimulus/controllers/index.js +0 -9
  124. data/lib/install/examples/svelte/app.svelte +0 -11
  125. data/lib/install/examples/svelte/hello_svelte.js +0 -20
  126. data/lib/install/examples/typescript/hello_typescript.ts +0 -4
  127. data/lib/install/examples/typescript/tsconfig.json +0 -24
  128. data/lib/install/examples/vue/hello_vue.js +0 -72
  129. data/lib/install/loaders/coffee.js +0 -6
  130. data/lib/install/loaders/elm.js +0 -25
  131. data/lib/install/loaders/erb.js +0 -11
  132. data/lib/install/loaders/svelte.js +0 -9
  133. data/lib/install/loaders/vue.js +0 -6
  134. data/lib/install/react.rb +0 -18
  135. data/lib/install/stimulus.rb +0 -12
  136. data/lib/install/svelte.rb +0 -29
  137. data/lib/install/typescript.rb +0 -39
  138. data/lib/install/vue.rb +0 -49
  139. data/lib/tasks/installers.rake +0 -42
  140. data/package/config_types/__tests__/config_list.js +0 -118
  141. data/package/config_types/__tests__/config_object.js +0 -43
  142. data/package/config_types/config_list.js +0 -75
  143. data/package/config_types/config_object.js +0 -55
  144. data/package/config_types/index.js +0 -7
  145. data/package/rules/module.css.js +0 -3
  146. data/package/rules/module.sass.js +0 -8
  147. data/package/rules/node_modules.js +0 -22
  148. data/package/utils/__tests__/deep_assign.js +0 -32
  149. data/package/utils/__tests__/deep_merge.js +0 -10
  150. data/package/utils/__tests__/get_style_rule.js +0 -65
  151. data/package/utils/__tests__/objectify.js +0 -9
  152. data/package/utils/deep_assign.js +0 -22
  153. data/package/utils/deep_merge.js +0 -22
  154. 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');