jetpacker 0.1.0 → 0.2.0

data/package/environments/base.js

@@ -0,0 +1,166 @@
+/* eslint global-require: 0 */
+/* eslint import/no-dynamic-require: 0 */
+
+const {
+  basename, dirname, join, relative, resolve
+} = require('path')
+const { sync } = require('glob')
+const extname = require('path-complete-extname')
+
+const webpack = require('webpack')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const WebpackAssetsManifest = require('webpack-assets-manifest')
+const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
+const PnpWebpackPlugin = require('pnp-webpack-plugin')
+
+const { isNotObject, prettyPrint } = require('../utils/helpers')
+const deepMerge = require('../utils/deep_merge')
+
+const { ConfigList, ConfigObject } = require('../config_types')
+const rules = require('../rules')
+const config = require('../config')
+
+const getLoaderList = () => {
+  const result = new ConfigList()
+  Object.keys(rules).forEach((key) => result.append(key, rules[key]))
+  return result
+}
+
+const getPluginList = () => {
+  const result = new ConfigList()
+  result.append(
+    'Environment',
+    new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(process.env)))
+  )
+  result.append('CaseSensitivePaths', new CaseSensitivePathsPlugin())
+  result.append(
+    'MiniCssExtract',
+    new MiniCssExtractPlugin({
+      filename: 'css/[name]-[contenthash:8].css',
+      chunkFilename: 'css/[name]-[contenthash:8].chunk.css'
+    })
+  )
+  result.append(
+    'Manifest',
+    new WebpackAssetsManifest({
+      integrity: false,
+      entrypoints: true,
+      writeToDisk: true,
+      publicPath: config.publicPathWithoutCDN
+    })
+  )
+  return result
+}
+
+const getExtensionsGlob = () => {
+  const { extensions } = config
+  return extensions.length === 1 ? `**/*${extensions[0]}` : `**/*{${extensions.join(',')}}`
+}
+
+const getEntryObject = () => {
+  const result = new ConfigObject()
+  const glob = getExtensionsGlob()
+  const rootPath = join(config.source_path, config.source_entry_path)
+  const paths = sync(join(rootPath, glob))
+  paths.forEach((path) => {
+    const namespace = relative(join(rootPath), dirname(path))
+    const name = join(namespace, basename(path, extname(path)))
+    result.set(name, resolve(path))
+  })
+  return result
+}
+
+const getModulePaths = () => {
+  const result = new ConfigList()
+  result.append('source', resolve(config.source_path))
+  if (config.resolved_paths) {
+    config.resolved_paths.forEach((path) => result.append(path, resolve(path)))
+  }
+  result.append('node_modules', 'node_modules')
+  return result
+}
+
+const getBaseConfig = () => new ConfigObject({
+  mode: 'production',
+  output: {
+    filename: 'js/[name]-[contenthash].js',
+    chunkFilename: 'js/[name]-[contenthash].chunk.js',
+    hotUpdateChunkFilename: 'js/[id]-[hash].hot-update.js',
+    path: config.outputPath,
+    publicPath: config.publicPath
+  },
+
+  resolve: {
+    extensions: config.extensions,
+    plugins: [PnpWebpackPlugin]
+  },
+
+  resolveLoader: {
+    modules: ['node_modules'],
+    plugins: [PnpWebpackPlugin.moduleLoader(module)]
+  },
+
+  node: {
+    dgram: 'empty',
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty',
+    child_process: 'empty'
+  }
+})
+
+module.exports = class Base {
+  constructor() {
+    this.loaders = getLoaderList()
+    this.plugins = getPluginList()
+    this.config = getBaseConfig()
+    this.entry = getEntryObject()
+    this.resolvedModules = getModulePaths()
+  }
+
+  splitChunks(callback = null) {
+    let appConfig = {}
+    const defaultConfig = {
+      optimization: {
+        // Split vendor and common chunks
+        // https://twitter.com/wSokra/status/969633336732905474
+        splitChunks: {
+          chunks: 'all',
+          name: false
+        },
+        // Separate runtime chunk to enable long term caching
+        // https://twitter.com/wSokra/status/969679223278505985
+        runtimeChunk: true
+      }
+    }
+
+    if (callback) {
+      appConfig = callback(defaultConfig)
+      if (isNotObject(appConfig)) {
+        throw new Error(`
+          ${prettyPrint(appConfig)} is not a valid splitChunks configuration.
+          See https://webpack.js.org/plugins/split-chunks-plugin/#configuration
+        `)
+      }
+    }
+
+    return this.config.merge(deepMerge(defaultConfig, appConfig))
+  }
+
+  toWebpackConfig() {
+    return this.config.merge({
+      entry: this.entry.toObject(),
+
+      module: {
+        strictExportPresence: true,
+        rules: [{ parser: { requireEnsure: false } }, ...this.loaders.values()]
+      },
+
+      plugins: this.plugins.values(),
+
+      resolve: {
+        modules: this.resolvedModules.values()
+      }
+    })
+  }
+}

data/package/environments/development.js

@@ -0,0 +1,51 @@
+const webpack = require('webpack')
+const Base = require('./base')
+const devServer = require('../dev_server')
+const { outputPath: contentBase, publicPath } = require('../config')
+
+module.exports = class extends Base {
+  constructor() {
+    super()
+
+    if (devServer.hmr) {
+      this.plugins.append('HotModuleReplacement', new webpack.HotModuleReplacementPlugin())
+      this.config.output.filename = '[name]-[hash].js'
+    }
+
+    this.config.merge({
+      mode: 'development',
+      cache: true,
+      devtool: 'cheap-module-source-map',
+      output: {
+        pathinfo: true
+      },
+      devServer: {
+        clientLogLevel: 'none',
+        compress: devServer.compress,
+        quiet: devServer.quiet,
+        disableHostCheck: devServer.disable_host_check,
+        host: devServer.host,
+        port: devServer.port,
+        https: devServer.https,
+        hot: devServer.hmr,
+        contentBase,
+        inline: devServer.inline,
+        useLocalIp: devServer.use_local_ip,
+        public: devServer.public,
+        publicPath,
+        historyApiFallback: {
+          disableDotRule: true
+        },
+        headers: devServer.headers,
+        overlay: devServer.overlay,
+        stats: {
+          entrypoints: false,
+          errorDetails: true,
+          modules: false,
+          moduleTrace: false
+        },
+        watchOptions: devServer.watch_options
+      }
+    })
+  }
+}

data/package/environments/production.js

@@ -0,0 +1,79 @@
+const TerserPlugin = require('terser-webpack-plugin')
+const CompressionPlugin = require('compression-webpack-plugin')
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+const safePostCssParser = require('postcss-safe-parser')
+const Base = require('./base')
+
+module.exports = class extends Base {
+  constructor() {
+    super()
+
+    this.plugins.append(
+      'Compression',
+      new CompressionPlugin({
+        filename: '[path].gz[query]',
+        algorithm: 'gzip',
+        cache: true,
+        test: /\.(js|css|html|json|ico|svg|eot|otf|ttf|map)$/
+      })
+    )
+
+    if ('brotli' in process.versions) {
+      this.plugins.append(
+        'Compression Brotli',
+        new CompressionPlugin({
+          filename: '[path].br[query]',
+          algorithm: 'brotliCompress',
+          cache: true,
+          test: /\.(js|css|html|json|ico|svg|eot|otf|ttf|map)$/
+        })
+      )
+    }
+
+    this.plugins.append(
+      'OptimizeCSSAssets',
+      new OptimizeCSSAssetsPlugin({
+        parser: safePostCssParser,
+        map: {
+          inline: false,
+          annotation: true
+        }
+      })
+    )
+
+    this.config.merge({
+      devtool: 'source-map',
+      stats: 'normal',
+      bail: true,
+      optimization: {
+        minimizer: [
+          new TerserPlugin({
+            parallel: true,
+            cache: true,
+            sourceMap: true,
+            terserOptions: {
+              parse: {
+                // Let terser parse ecma 8 code but always output
+                // ES5 compliant code for older browsers
+                ecma: 8
+              },
+              compress: {
+                ecma: 5,
+                warnings: false,
+                comparisons: false
+              },
+              mangle: {
+                safari10: true
+              },
+              output: {
+                ecma: 5,
+                comments: false,
+                ascii_only: true
+              }
+            }
+          })
+        ]
+      }
+    })
+  }
+}

data/package/environments/test.js

@@ -0,0 +1,3 @@
+const Base = require('./base')
+
+module.exports = class extends Base {}

data/package/index.js

@@ -0,0 +1,24 @@
+/* eslint global-require: 0 */
+/* eslint import/no-dynamic-require: 0 */
+
+const { resolve } = require('path')
+const { existsSync } = require('fs')
+const Environment = require('./environments/base')
+const loaders = require('./rules')
+const config = require('./config')
+const devServer = require('./dev_server')
+const { nodeEnv } = require('./env')
+
+const createEnvironment = () => {
+  const path = resolve(__dirname, 'environments', `${nodeEnv}.js`)
+  const constructor = existsSync(path) ? require(path) : Environment
+  return new constructor()
+}
+
+module.exports = {
+  config,
+  devServer,
+  environment: createEnvironment(),
+  Environment,
+  loaders
+}

data/package/rules/babel.js

@@ -0,0 +1,21 @@
+const { join, resolve } = require('path')
+const { cache_path: cachePath, source_path: sourcePath, resolved_paths: resolvedPaths } = require('../config')
+const { nodeEnv } = require('../env')
+
+// Process application Javascript code with Babel.
+// Uses application .babelrc to apply any transformations
+module.exports = {
+  test: /\.(js|jsx|mjs)?(\.erb)?$/,
+  include: [sourcePath, ...resolvedPaths].map((p) => resolve(p)),
+  exclude: /node_modules/,
+  use: [
+    {
+      loader: 'babel-loader',
+      options: {
+        cacheDirectory: join(cachePath, 'babel-loader-node-modules'),
+        cacheCompression: nodeEnv === 'production',
+        compact: nodeEnv === 'production'
+      }
+    }
+  ]
+}

data/package/rules/css.js

@@ -0,0 +1,3 @@
+const getStyleRule = require('../utils/get_style_rule')
+
+module.exports = getStyleRule(/\.(css)$/i)

data/package/rules/file.js

@@ -0,0 +1,20 @@
+const { join } = require('path')
+const { source_path: sourcePath, static_assets_extensions: fileExtensions } = require('../config')
+
+module.exports = {
+  test: new RegExp(`(${fileExtensions.join('|')})$`, 'i'),
+  use: [
+    {
+      loader: 'file-loader',
+      options: {
+        name(file) {
+          if (file.includes(sourcePath)) {
+            return 'media/[path][name]-[hash].[ext]'
+          }
+          return 'media/[folder]/[name]-[hash:8].[ext]'
+        },
+        context: join(sourcePath)
+      }
+    }
+  ]
+}

data/package/rules/index.js

@@ -0,0 +1,20 @@
+const babel = require('./babel')
+const file = require('./file')
+const css = require('./css')
+const sass = require('./sass')
+const moduleCss = require('./module.css')
+const moduleSass = require('./module.sass')
+const nodeModules = require('./node_modules')
+
+// Webpack loaders are processed in reverse order
+// https://webpack.js.org/concepts/loaders/#loader-features
+// Lastly, process static files using file loader
+module.exports = {
+  file,
+  css,
+  sass,
+  moduleCss,
+  moduleSass,
+  nodeModules,
+  babel
+}

data/package/rules/module.css.js

@@ -0,0 +1,3 @@
+const getStyleRule = require('../utils/get_style_rule')
+
+module.exports = getStyleRule(/\.(css)$/i, true)

data/package/rules/module.sass.js

@@ -0,0 +1,8 @@
+const getStyleRule = require('../utils/get_style_rule')
+
+module.exports = getStyleRule(/\.(scss|sass)$/i, true, [
+  {
+    loader: 'sass-loader',
+    options: { sourceMap: true }
+  }
+])

data/package/rules/node_modules.js

@@ -0,0 +1,24 @@
+const { join } = require('path')
+const { cache_path: cachePath } = require('../config')
+const { nodeEnv } = require('../env')
+
+// Compile standard ES features for JS in node_modules with Babel.
+//   Regex details for exclude: https://regex101.com/r/SKPnnv/1
+module.exports = {
+  test: /\.(js|mjs)$/,
+  include: /node_modules/,
+  exclude: /(?:@?babel(?:\/|\\{1,2}|-).+)|regenerator-runtime|core-js|^webpack$|^webpack-assets-manifest$|^webpack-cli$|^webpack-sources$|^@rails\/webpacker$/,
+  use: [
+    {
+      loader: 'babel-loader',
+      options: {
+        babelrc: false,
+        presets: [['@babel/preset-env', { modules: false }]],
+        cacheDirectory: join(cachePath, 'babel-loader-node-modules'),
+        cacheCompression: nodeEnv === 'production',
+        compact: false,
+        sourceMaps: false
+      }
+    }
+  ]
+}

data/package/rules/sass.js

@@ -0,0 +1,8 @@
+const getStyleRule = require('../utils/get_style_rule')
+
+module.exports = getStyleRule(/\.(scss|sass)(\.erb)?$/i, false, [
+  {
+    loader: 'sass-loader',
+    options: { sourceMap: true }
+  }
+])