webpacker 6.0.0.beta.2 → 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/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.js

@@ -7,6 +7,7 @@
 // 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/webpacker/compiler.rb

@@ -28,7 +28,7 @@ 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
@@ -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/version.rb

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

data/package.json

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

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)
   }
 }

data/package/environments/__tests__/base.js

@@ -44,7 +44,7 @@ describe('Base config', () => {
     })
 
     test('should return default plugins', () => {
-      expect(baseConfig.plugins.length).toEqual(3)
+      expect(baseConfig.plugins.length).toEqual(4)
     })
 
     test('should return default resolveLoader', () => {

data/package/environments/base.js

@@ -4,20 +4,19 @@
 const { basename, dirname, join, relative, resolve } = require('path')
 const extname = require('path-complete-extname')
 const PnpWebpackPlugin = require('pnp-webpack-plugin')
-const { sync: globSync } = require('glob')
+const { sync } = require('glob')
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
 const WebpackAssetsManifest = require('webpack-assets-manifest')
 const webpack = require('webpack')
 const rules = require('../rules')
 const config = require('../config')
 const { isDevelopment } = require('../env')
-const { moduleExists } = require('../utils/helpers')
 
 const getEntryObject = () => {
   const entries = {}
   const rootPath = join(config.source_path, config.source_entry_path)
 
-  globSync(`${rootPath}/**/*.*`).forEach((path) => {
+  sync(`${rootPath}/**/*.*`).forEach((path) => {
     const namespace = relative(join(rootPath), dirname(path))
     const name = join(namespace, basename(path, extname(path)))
     let assetPaths = resolve(path)
@@ -53,6 +52,7 @@ const getModulePaths = () => {
 const getPlugins = () => {
   const plugins = [
     new webpack.EnvironmentPlugin(process.env),
+    PnpWebpackPlugin,
     new CaseSensitivePathsPlugin(),
     new WebpackAssetsManifest({
       entrypoints: true,
@@ -63,18 +63,18 @@ const getPlugins = () => {
     })
   ]
 
-  if (moduleExists('css-loader') && moduleExists('mini-css-extract-plugin')) {
-    const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-    plugins.push(
-      new MiniCssExtractPlugin({
-        filename: isDevelopment
-          ? 'css/[name].css'
-          : 'css/[name]-[contenthash:8].css',
-        chunkFilename: isDevelopment
-          ? 'css/[id].css'
-          : 'css/[id]-[contenthash:8].css'
-      })
-    )
+  try {
+    if (require.resolve('css-loader')) {
+      const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+      plugins.push(
+        new MiniCssExtractPlugin({
+          filename: isDevelopment ? '[name].css' : '[name].[contenthash:8].css',
+          chunkFilename: isDevelopment ? '[id].css' : '[id].[contenthash:8].css'
+        })
+      )
+    }
+  } catch (e) {
+    /* Work out what to print here */
   }
 
   return plugins
@@ -86,14 +86,14 @@ module.exports = {
     filename: 'js/[name]-[contenthash].js',
     chunkFilename: 'js/[name]-[contenthash].chunk.js',
     hotUpdateChunkFilename: 'js/[id]-[hash].hot-update.js',
+    assetModuleFilename: 'static/[hash][ext][query]',
     path: config.outputPath,
     publicPath: config.publicPath
   },
   entry: getEntryObject(),
   resolve: {
-    extensions: ['.js', '.mjs', '.ts', '.coffee'],
-    modules: getModulePaths(),
-    plugins: [PnpWebpackPlugin]
+    extensions: ['.js', '.mjs', '.ts'],
+    modules: getModulePaths()
   },
 
   plugins: getPlugins(),
@@ -106,7 +106,7 @@ module.exports = {
   optimization: {
     splitChunks: { chunks: 'all' },
 
-    runtimeChunk: 'single'
+    runtimeChunk: { name: (entrypoint) => `runtime-${entrypoint.name}` }
   },
 
   module: {

data/package/environments/production.js

@@ -5,42 +5,45 @@ const { merge } = require('webpack-merge')
 const CompressionPlugin = require('compression-webpack-plugin')
 const TerserPlugin = require('terser-webpack-plugin')
 const baseConfig = require('./base')
-const { moduleExists } = require('../utils/helpers')
 
 const getPlugins = () => {
-  const plugins = []
+  let compressionPlugin = new CompressionPlugin({
+    filename: '[path].gz[query]',
+    algorithm: 'gzip',
+    test: /\.(js|css|html|json|ico|svg|eot|otf|ttf|map)$/
+  })
 
-  plugins.push(
-    new CompressionPlugin({
-      filename: '[path][base].gz[query]',
-      algorithm: 'gzip',
+  if ('brotli' in process.versions) {
+    compressionPlugin = new CompressionPlugin({
+      filename: '[path].br[query]',
+      algorithm: 'brotliCompress',
       test: /\.(js|css|html|json|ico|svg|eot|otf|ttf|map)$/
     })
-  )
-
-  if ('brotli' in process.versions) {
-    plugins.push(
-      new CompressionPlugin({
-        filename: '[path][base].br[query]',
-        algorithm: 'brotliCompress',
-        test: /\.(js|css|html|json|ico|svg|eot|otf|ttf|map)$/
-      })
-    )
   }
 
-  return plugins
-}
+  const plugins = [compressionPlugin]
 
-const tryCssMinimizer = () => {
-  if (
-    moduleExists('css-loader') &&
-    moduleExists('css-minimizer-webpack-plugin')
-  ) {
-    const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
-    return new CssMinimizerPlugin({ sourceMap: true })
+  try {
+    if (require.resolve('css-loader')) {
+      const OptimizeCSSAssetsPlugin = require.resolve(
+        'optimize-css-assets-webpack-plugin'
+      )
+      const safePostCssParser = require.resolve('postcss-safe-parser')
+      plugins.push(
+        new OptimizeCSSAssetsPlugin({
+          parser: safePostCssParser,
+          map: {
+            inline: false,
+            annotation: true
+          }
+        })
+      )
+    }
+  } catch (e) {
+    /* Work out what to output without clutter */
   }
 
-  return null
+  return plugins
 }
 
 const productionConfig = {
@@ -50,7 +53,6 @@ const productionConfig = {
   plugins: getPlugins(),
   optimization: {
     minimizer: [
-      tryCssMinimizer(),
       new TerserPlugin({
         parallel: Number.parseInt(process.env.WEBPACKER_PARALLEL, 10) || true,
         terserOptions: {
@@ -72,7 +74,7 @@ const productionConfig = {
           }
         }
       })
-    ].filter(Boolean)
+    ]
   }
 }
 

data/package/index.js

@@ -1,15 +1,13 @@
 /* eslint global-require: 0 */
 /* eslint import/no-dynamic-require: 0 */
 
-const { merge } = require('webpack-merge')
 const { resolve } = require('path')
 const { existsSync } = require('fs')
 const baseConfig = require('./environments/base')
-const rules = require('./rules')
+const loaders = require('./rules')
 const config = require('./config')
 const devServer = require('./dev_server')
 const { nodeEnv } = require('./env')
-const { moduleExists, canProcess } = require('./utils/helpers')
 
 const webpackConfig = () => {
   const path = resolve(__dirname, 'environments', `${nodeEnv}.js`)
@@ -22,8 +20,5 @@ module.exports = {
   devServer,
   webpackConfig: webpackConfig(),
   baseConfig,
-  rules,
-  merge,
-  moduleExists,
-  canProcess
+  loaders
 }