webpacker 6.0.0.beta.6 → 6.0.0.pre.1

data/docs/yarn.md

@@ -0,0 +1,23 @@
+# Yarn
+
+Webpacker by default uses `yarn` as a package manager for `node_modules`
+
+
+## Add a new npm module
+
+To add any new JS module you can use `yarn`:
+
+```bash
+yarn add bootstrap material-ui
+```
+
+## Add an npm module to `devDependencies`
+To add a new JS module that will only be available to local development:
+
+```bash
+yarn add --dev browser-sync
+```
+
+Be careful not to add any build or app related JS modules in this fashion. Adding JS modules to `devDependencies` [will block them from being installed in **any** production environment](https://yarnpkg.com/lang/en/docs/cli/install/#toc-yarn-install-production-true-false).
+
+Docs from JS modules may instruct you to use `--dev` or `devDependencies`, but this is generally under the assumption that you are using a `node.js` workflow.

data/lib/install/config/webpacker.yml

@@ -1,8 +1,8 @@
 # Note: You must restart bin/webpack-dev-server for changes to take effect
 
 default: &default
-  source_path: app/packs
-  source_entry_path: entrypoints
+  source_path: app/javascript
+  source_entry_path: packs
   public_root_path: public
   public_output_path: packs
   cache_path: tmp/cache/webpacker
@@ -25,8 +25,6 @@ development:
     host: localhost
     port: 3035
     public: localhost:3035
-    # Inject browserside javascript that required by both HMR and Live(full) reload
-    inject_client: true
     # Hot Module Replacement updates modules while the application is running without a full reload
     hmr: false
     # Inline should be set to true if using HMR; it inserts a script to take care of live reloading

data/lib/install/examples/vue3/app.vue

@@ -0,0 +1,27 @@
+<template>
+  <p>
+    {{ message }}
+  </p>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  name: 'HelloWorld',
+  setup() {
+    const message = ref('Hello World')
+
+    return {
+      message
+    }
+  }
+}
+</script>
+
+<style scoped>
+p {
+  font-size: 2em;
+  text-align: center;
+}
+</style>

data/lib/install/examples/vue3/hello_vue.js

@@ -0,0 +1,15 @@
+/* eslint no-console: 0 */
+// Run this example by adding <%= javascript_pack_tag 'hello_vue' %> (and
+// <%= stylesheet_pack_tag 'hello_vue' %> if you have styles in your component)
+// to the head of your layout file,
+// like app/views/layouts/application.html.erb.
+// Create a div container with the id 'vue-app' <div id='vue-app'></div>
+// It renders <p>Hello Vue</p> into it.
+
+import { createApp } from "vue";
+import App from "../app.vue";
+
+document.addEventListener("DOMContentLoaded", () => {
+  const app = createApp(App);
+  app.mount("#vue-app");
+});

data/lib/install/javascript/packs/application.css

@@ -0,0 +1,9 @@
+/* 
+Any CSS added to this file or imported from this file, e.g. `@import '../stylesheets/my-css.css'`,
+will be included in the "application" pack. Any CSS imported from application.js or as part of the 
+application.js dependency graph, e.g. `import '../stylesheets/my-css.css'` will also be included 
+in the "application" pack. 
+
+To reference this file, add <%= stylesheet_pack_tag 'application' %> to the appropriate
+layout file, like app/views/layouts/application.html.erb
+*/

data/lib/install/{packs/entrypoints → javascript/packs}/application.js

@@ -1,12 +1,13 @@
 /* eslint no-console:0 */
 // This file is automatically compiled by Webpack, along with any other files
 // present in this directory. You're encouraged to place your actual application logic in
-// a relevant structure within app/packs and only use these pack files to reference
+// a relevant structure within app/javascript and only use these pack files to reference
 // that code so it'll be compiled.
 //
 // To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
 // layout file, like app/views/layouts/application.html.erb
 
+
 // Uncomment to copy all static images under ../images to the output folder and reference
 // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
 // or the `imagePath` JavaScript helper below.
@@ -14,7 +15,4 @@
 // const images = require.context('../images', true)
 // const imagePath = (name) => images(name, true)
 
-import 'core-js/stable'
-import 'regenerator-runtime/runtime'
-
 console.log('Hello World from Webpacker')

data/lib/install/template.rb

@@ -5,10 +5,10 @@ say "Copying webpack core config"
 directory "#{__dir__}/config/webpack", "config/webpack"
 
 if Dir.exists?(Webpacker.config.source_path)
-  say "The packs app source directory already exists"
+  say "The JavaScript app source directory already exists"
 else
-  say "Creating packs app source directory"
-  directory "#{__dir__}/packs", Webpacker.config.source_path
+  say "Creating JavaScript app source directory"
+  directory "#{__dir__}/javascript", Webpacker.config.source_path
 end
 
 apply "#{__dir__}/binstubs.rb"

data/lib/webpacker/commands.rb

@@ -64,8 +64,7 @@ class Webpacker::Commands
 
     def current_version
       packs = manifest.refresh.values.map do |value|
-        value = value["src"] if value.is_a?(Hash)
-        next unless value.is_a?(String)
+        next if value.is_a?(Hash)
 
         File.join(config.root_path, "public", "#{value}*")
       end.compact

data/lib/webpacker/compiler.rb

@@ -28,14 +28,14 @@ class Webpacker::Compiler
         record_compilation_digest
       end
     else
-      logger.debug "Everything's up-to-date. Nothing to do"
+      logger.info "Everything's up-to-date. Nothing to do"
       true
     end
   end
 
   # Returns true if all the compiled packs are up to date with the underlying asset files.
   def fresh?
-    last_compilation_digest&.== watched_files_digest
+    watched_files_digest == last_compilation_digest
   end
 
   # Returns true if the compiled packs are out of date with the underlying asset files.
@@ -65,18 +65,12 @@ class Webpacker::Compiler
       compilation_digest_path.write(watched_files_digest)
     end
 
-    def optionalRubyRunner
-      bin_webpack_path = config.root_path.join("bin/webpack")
-      first_line = File.readlines(bin_webpack_path).first.chomp
-      /ruby/.match?(first_line) ? RbConfig.ruby : ""
-    end
-
     def run_webpack
       logger.info "Compiling..."
 
       stdout, stderr, status = Open3.capture3(
         webpack_env,
-        "#{optionalRubyRunner} ./bin/webpack",
+        "#{RbConfig.ruby} ./bin/webpack",
         chdir: File.expand_path(config.root_path)
       )
 

data/lib/webpacker/dev_server_runner.rb

@@ -64,7 +64,6 @@ module Webpacker
       def execute_cmd
         env = Webpacker::Compiler.env
         env["WEBPACKER_CONFIG"] = @webpacker_config
-        env["WEBPACK_DEV_SERVER"] = "true"
 
         cmd = if node_modules_bin_exist?
           ["#{@node_modules_bin_path}/webpack", "serve"]
@@ -74,7 +73,6 @@ module Webpacker
 
         if @argv.include?("--debug-webpacker")
           cmd = [ "node", "--inspect-brk"] + cmd
-          @argv.delete "--debug-webpacker"
         end
 
         cmd += ["--config", @webpack_config]

data/lib/webpacker/helper.rb

@@ -72,15 +72,27 @@ module Webpacker::Helper
     favicon_link_tag(resolve_path_to_image(name), options)
   end
 
+  # Creates a script tag that references the named pack file, as compiled by webpack per the entries list
+  # in package/environments/base.js. By default, this list is auto-generated to match everything in
+  # app/javascript/packs/*.js. In production mode, the digested reference is automatically looked up.
+  #
+  # Example:
+  #
+  #   <%= javascript_pack_tag 'calendar', 'data-turbolinks-track': 'reload' %> # =>
+  #   <script src="/packs/calendar-1016838bab065ae1e314.js" data-turbolinks-track="reload"></script>
+  def javascript_pack_tag(*names, **options)
+    javascript_include_tag(*sources_from_manifest_entries(names, type: :javascript), **options)
+  end
+
   # Creates script tags that reference the js chunks from entrypoints when using split chunks API,
   # as compiled by webpack per the entries list in package/environments/base.js.
   # By default, this list is auto-generated to match everything in
-  # app/packs/entrypoints/*.js and all the dependent chunks. In production mode, the digested reference is automatically looked up.
+  # app/javascript/packs/*.js and all the dependent chunks. In production mode, the digested reference is automatically looked up.
   # See: https://webpack.js.org/plugins/split-chunks-plugin/
   #
   # Example:
   #
-  #   <%= javascript_pack_tag 'calendar', 'map', 'data-turbolinks-track': 'reload' %> # =>
+  #   <%= javascript_packs_with_chunks_tag 'calendar', 'map', 'data-turbolinks-track': 'reload' %> # =>
   #   <script src="/packs/vendor-16838bab065ae1e314.chunk.js" data-turbolinks-track="reload"></script>
   #   <script src="/packs/calendar~runtime-16838bab065ae1e314.chunk.js" data-turbolinks-track="reload"></script>
   #   <script src="/packs/calendar-1016838bab065ae1e314.chunk.js" data-turbolinks-track="reload"></script>
@@ -89,13 +101,13 @@ module Webpacker::Helper
   #
   # DO:
   #
-  #   <%= javascript_pack_tag 'calendar', 'map' %>
+  #   <%= javascript_packs_with_chunks_tag 'calendar', 'map' %>
   #
   # DON'T:
   #
-  #   <%= javascript_pack_tag 'calendar' %>
-  #   <%= javascript_pack_tag 'map' %>
-  def javascript_pack_tag(*names, **options)
+  #   <%= javascript_packs_with_chunks_tag 'calendar' %>
+  #   <%= javascript_packs_with_chunks_tag 'map' %>
+  def javascript_packs_with_chunks_tag(*names, **options)
     javascript_include_tag(*sources_from_manifest_entrypoints(names, type: :javascript), **options)
   end
 
@@ -115,35 +127,53 @@ module Webpacker::Helper
     end
   end
 
+  # Creates a link tag that references the named pack file, as compiled by webpack per the entries list
+  # in package/environments/base.js. By default, this list is auto-generated to match everything in
+  # app/javascript/packs/*.js. In production mode, the digested reference is automatically looked up.
+  #
+  # Note: If the development server is running and hot module replacement is active, this will return nothing.
+  # In that setup you need to configure your styles to be inlined in your JavaScript for hot reloading.
+  #
+  # Examples:
+  #
+  #   <%= stylesheet_pack_tag 'calendar', 'data-turbolinks-track': 'reload' %> # =>
+  #   <link rel="stylesheet" media="screen" href="/packs/calendar-1016838bab065ae1e122.css" data-turbolinks-track="reload" />
+  def stylesheet_pack_tag(*names, **options)
+    stylesheet_link_tag(*sources_from_manifest_entries(names, type: :stylesheet), **options)
+  end
+
   # Creates link tags that reference the css chunks from entrypoints when using split chunks API,
   # as compiled by webpack per the entries list in package/environments/base.js.
   # By default, this list is auto-generated to match everything in
-  # app/packs/entrypoints/*.js and all the dependent chunks. In production mode, the digested reference is automatically looked up.
+  # app/javascript/packs/*.js and all the dependent chunks. In production mode, the digested reference is automatically looked up.
   # See: https://webpack.js.org/plugins/split-chunks-plugin/
   #
   # Examples:
   #
-  #   <%= stylesheet_pack_tag 'calendar', 'map' %> # =>
+  #   <%= stylesheet_packs_with_chunks_tag 'calendar', 'map' %> # =>
   #   <link rel="stylesheet" media="screen" href="/packs/3-8c7ce31a.chunk.css" />
   #   <link rel="stylesheet" media="screen" href="/packs/calendar-8c7ce31a.chunk.css" />
   #   <link rel="stylesheet" media="screen" href="/packs/map-8c7ce31a.chunk.css" />
   #
   # DO:
   #
-  #   <%= stylesheet_pack_tag 'calendar', 'map' %>
+  #   <%= stylesheet_packs_with_chunks_tag 'calendar', 'map' %>
   #
   # DON'T:
   #
-  #   <%= stylesheet_pack_tag 'calendar' %>
-  #   <%= stylesheet_pack_tag 'map' %>
-  def stylesheet_pack_tag(*names, **options)
+  #   <%= stylesheet_packs_with_chunks_tag 'calendar' %>
+  #   <%= stylesheet_packs_with_chunks_tag 'map' %>
+  def stylesheet_packs_with_chunks_tag(*names, **options)
     stylesheet_link_tag(*sources_from_manifest_entrypoints(names, type: :stylesheet), **options)
   end
 
   private
+    def sources_from_manifest_entries(names, type:)
+      names.map { |name| current_webpacker_instance.manifest.lookup!(name, type: type) }.flatten
+    end
 
     def sources_from_manifest_entrypoints(names, type:)
-      names.map { |name| current_webpacker_instance.manifest.lookup_pack_with_chunks!(name.to_s, type: type) }.flatten.uniq
+      names.map { |name| current_webpacker_instance.manifest.lookup_pack_with_chunks!(name, type: type) }.flatten.uniq
     end
 
     def resolve_path_to_image(name, **options)

data/lib/webpacker/manifest.rb

@@ -92,7 +92,7 @@ class Webpacker::Manifest
     # When the user provides a name with a file extension, we want to try to strip it off.
     def manifest_name(name, pack_type)
       return name if File.extname(name.to_s).empty?
-      File.basename(name, ".#{pack_type}")
+      File.basename(name, pack_type)
     end
 
     def manifest_type(pack_type)

data/lib/webpacker/version.rb

@@ -1,4 +1,4 @@
 module Webpacker
   # Change the version in package.json too, please!
-  VERSION = "6.0.0.beta.6".freeze
+  VERSION = "6.0.0.pre.1".freeze
 end

data/lib/webpacker/webpack_runner.rb

@@ -15,7 +15,6 @@ module Webpacker
 
       if @argv.include?("--debug-webpacker")
         cmd = [ "node", "--inspect-brk"] + cmd
-        @argv.delete "--debug-webpacker"
       end
 
       if @argv.include?("--trace-deprecation")

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rails/webpacker",
-  "version": "6.0.0-beta.6",
+  "version": "6.0.0-pre.1",
   "description": "Use webpack to manage app-like JavaScript modules in Rails",
   "main": "package/index.js",
   "files": [

data/package/__tests__/development.js

@@ -22,8 +22,7 @@ describe('Development environment', () => {
       expect(webpackConfig).toMatchObject({
         devServer: {
           host: 'localhost',
-          port: 3035,
-          injectClient: true
+          port: 3035
         }
       })
     })

data/package/babel/preset-react.js

@@ -0,0 +1,62 @@
+module.exports = function config(api) {
+  const validEnv = ['development', 'test', 'production']
+  const currentEnv = api.env()
+  const isDevelopmentEnv = api.env('development')
+  const isProductionEnv = api.env('production')
+  const isTestEnv = api.env('test')
+
+  if (!validEnv.includes(currentEnv)) {
+    throw new Error(
+      `Please specify a valid NODE_ENV or BABEL_ENV environment variable. Valid values are "development", "test", and "production". Instead, received: "${JSON.stringify(currentEnv)}".`
+    )
+  }
+
+  return {
+    presets: [
+      isTestEnv && [
+        '@babel/preset-env',
+        {
+          targets: { node: 'current' },
+          modules: 'commonjs'
+        }
+      ],
+      (isProductionEnv || isDevelopmentEnv) && [
+        '@babel/preset-env',
+        {
+          useBuiltIns: 'entry',
+          corejs: '3.8',
+          modules: false,
+          bugfixes: true,
+          loose: true,
+          exclude: ['transform-typeof-symbol']
+        }
+      ],
+      [
+        '@babel/preset-react',
+        {
+          development: isDevelopmentEnv || isTestEnv,
+          useBuiltIns: true
+        }
+      ]
+    ].filter(Boolean),
+    plugins: [
+      'babel-plugin-macros',
+      [
+        '@babel/plugin-proposal-class-properties',
+        { loose: true }
+      ],
+      [
+        '@babel/plugin-transform-runtime',
+        {
+          helpers: false,
+          regenerator: true,
+          corejs: false
+        }
+      ],
+      isProductionEnv && [
+        'babel-plugin-transform-react-remove-prop-types',
+        { removeImport: true }
+      ]
+    ].filter(Boolean)
+  }
+}

data/package/babel/preset.js

@@ -1,5 +1,3 @@
-const { moduleExists } = require('@rails/webpacker')
-
 module.exports = function config(api) {
   const validEnv = ['development', 'test', 'production']
   const currentEnv = api.env()
@@ -9,15 +7,16 @@ module.exports = function config(api) {
 
   if (!validEnv.includes(currentEnv)) {
     throw new Error(
-      `Please specify a valid NODE_ENV or BABEL_ENV environment variable. Valid values are "development", "test", and "production". Instead, received: "${JSON.stringify(
-        currentEnv
-      )}".`
+      `Please specify a valid NODE_ENV or BABEL_ENV environment variable. Valid values are "development", "test", and "production". Instead, received: "${JSON.stringify(currentEnv)}".`
     )
   }
 
   return {
     presets: [
-      isTestEnv && ['@babel/preset-env', { targets: { node: 'current' } }],
+      isTestEnv && [
+        '@babel/preset-env',
+        { targets: { node: 'current' } }
+      ],
       (isProductionEnv || isDevelopmentEnv) && [
         '@babel/preset-env',
         {
@@ -28,28 +27,18 @@ module.exports = function config(api) {
           loose: true,
           exclude: ['transform-typeof-symbol']
         }
-      ],
-      moduleExists('@babel/preset-typescript') && [
-        '@babel/preset-typescript',
-        { allExtensions: true, isTSX: true }
-      ],
-      moduleExists('@babel/preset-react') && [
-        '@babel/preset-react',
-        {
-          development: isDevelopmentEnv || isTestEnv,
-          useBuiltIns: true
-        }
       ]
     ].filter(Boolean),
     plugins: [
       'babel-plugin-macros',
-      ['@babel/plugin-proposal-class-properties', { loose: true }],
-      ['@babel/plugin-transform-runtime', { helpers: false }],
-      isProductionEnv &&
-        moduleExists('babel-plugin-transform-react-remove-prop-types') && [
-          'babel-plugin-transform-react-remove-prop-types',
-          { removeImport: true }
-        ]
+      [
+        '@babel/plugin-proposal-class-properties',
+        { loose: true }
+      ],
+      [
+        '@babel/plugin-transform-runtime',
+        { helpers: false }
+      ]
     ].filter(Boolean)
   }
 }