@best-shot/preset-web 0.8.6 → 0.10.1

package/README.md

@@ -42,7 +42,6 @@ export default {
 // example: .best-shot/config.mjs
 export default {
   presets: ['web'],
-  sri: false, // Subresource Integrity, enable by default
   vendors: {
     // Split Chunks
     common: ['lodash', 'axios']

package/{index.cjs → index.mjs}

@@ -1,10 +1,8 @@
-'use strict';
+import suffix from 'suffix';
 
-const suffix = require('suffix');
-
-const { setOutputName } = require('./lib/apply-set-output-name.cjs');
-const { splitChunks } = require('./lib/apply-split-chunks.cjs');
-const { setHtml } = require('./lib/apply-set-html.cjs');
+import { setHtml } from './lib/apply-set-html.mjs';
+import { setOutputName } from './lib/apply-set-output-name.mjs';
+import { splitChunks } from './lib/apply-split-chunks.mjs';
 
 function addHash(filename) {
   return suffix(filename, '.[contenthash:8]');
@@ -14,25 +12,12 @@ function addMin(filename) {
   return suffix(filename, '.min');
 }
 
-exports.name = 'preset-web';
-
-function isInstalled() {
-  try {
-    require.resolve('@road-to-rome/webpack-plugin/package.json');
-    return true;
-  } catch {
-    return false;
-  }
-}
-
-exports.apply = function applyWeb({
-  config: { html, inject, vendors, define, sri, rtr },
-}) {
-  return (chain) => {
+export function apply({ config: { html, inject, vendors } }) {
+  return async (chain) => {
     const mode = chain.get('mode');
-    const hot = chain.devServer.get('hot') || false;
     const minimize = chain.optimization.get('minimize');
     const serve = chain.devServer.entries() !== undefined;
+    const hot = (serve && chain.devServer.get('hot')) || false;
 
     chain.devtool(
       mode === 'production' ? false : serve ? 'eval-source-map' : 'source-map',
@@ -46,15 +31,15 @@ exports.apply = function applyWeb({
           script: (filename) => `script/${filename}`,
           style: (filename) => `style/${filename}`,
         }),
-      )
-      .batch(splitChunks({ vendors }))
-      .batch(setHtml({ sri, html, define, inject }));
+      );
+
+    await splitChunks({ vendors })(chain);
 
-    if (isInstalled()) {
-      chain.plugin('road-to-rome').use('@road-to-rome/webpack-plugin', [rtr]);
-    }
+    await setHtml({ html, inject })(chain);
   };
-};
+}
+
+export const name = 'preset-web';
 
 const regexpFormat = {
   format: 'regex',
@@ -66,7 +51,7 @@ const items = {
   type: 'object',
 };
 
-exports.schema = {
+export const schema = {
   html: {
     oneOf: [
       items,
@@ -87,6 +72,7 @@ exports.schema = {
     },
   },
   babel: {
+    default: {},
     type: 'object',
     properties: {
       polyfill: {
@@ -94,10 +80,6 @@ exports.schema = {
       },
     },
   },
-  sri: {
-    default: true,
-    type: 'boolean',
-  },
   vendors: {
     additionalProperties: {
       oneOf: [
@@ -112,5 +94,4 @@ exports.schema = {
     },
     type: 'object',
   },
-  rtr: {},
 };

package/lib/{apply-set-html.cjs → apply-set-html.mjs}

@@ -1,14 +1,9 @@
-'use strict';
+import { relative, resolve } from 'path';
+import { fileURLToPath } from 'url';
 
-const deepmerge = require('deepmerge');
-const extToRegexp = require('ext-to-regexp');
-const slashToRegexp = require('slash-to-regexp');
-const { SubresourceIntegrityPlugin } = require('webpack-subresource-integrity');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const {
-  default: HtmlWebpackInjectPlugin,
-} = require('html-webpack-inject-plugin');
-const { relative } = require('path');
+import deepmerge from 'deepmerge';
+import extToRegexp from 'ext-to-regexp';
+import slashToRegexp from 'slash-to-regexp';
 
 function mergeAll(...options) {
   return deepmerge.all(options, {
@@ -28,8 +23,8 @@ const htmlMinifier = {
   useShortDoctype: true,
 };
 
-exports.setHtml = function setHtml({ html = {}, inject = [], define, sri }) {
-  return (chain) => {
+export function setHtml({ html = {}, inject = [] }) {
+  return async (chain) => {
     const mode = chain.get('mode');
     const watch = chain.get('watch');
     const context = chain.get('context');
@@ -37,11 +32,12 @@ exports.setHtml = function setHtml({ html = {}, inject = [], define, sri }) {
 
     const page = Array.isArray(html) ? html : [html];
 
+    const { default: HtmlWebpackPlugin } = await import('html-webpack-plugin');
+
     page.forEach((options, index) => {
       chain.plugin(`html-page-${index}`).use(HtmlWebpackPlugin, [
         mergeAll(
           {
-            ...(define && { templateParameters: { define } }),
             template: './src/index.html',
             cache: watch,
           },
@@ -53,14 +49,22 @@ exports.setHtml = function setHtml({ html = {}, inject = [], define, sri }) {
     });
 
     if (inject.length > 0) {
+      const {
+        default: { default: HtmlWebpackInjectPlugin },
+      } = await import('html-webpack-inject-plugin');
+
       chain
         .plugin('inject')
         .use(HtmlWebpackInjectPlugin, [{ externals: inject }]);
     }
 
-    if (mode === 'production' && sri) {
+    if (mode === 'production') {
       chain.output.crossOriginLoading('anonymous');
 
+      const { SubresourceIntegrityPlugin } = await import(
+        'webpack-subresource-integrity'
+      );
+
       chain.plugin('subresource-integrity').use(SubresourceIntegrityPlugin);
     }
 
@@ -70,12 +74,17 @@ exports.setHtml = function setHtml({ html = {}, inject = [], define, sri }) {
       .use('micro-tpl-loader')
       .loader('micro-tpl-loader');
 
-    chain.resolveLoader.modules.prepend(relative(context, module.paths[1]));
+    chain.resolveLoader.modules.prepend(
+      relative(
+        context,
+        resolve(fileURLToPath(import.meta.url), '../../node_modules'),
+      ),
+    );
 
-    if (chain.module.rules.has('babel')) {
+    if (!watch && chain.module.rules.has('babel')) {
       chain.module
         .rule('babel')
         .exclude.add(slashToRegexp('/node_modules/micromustache/'));
     }
   };
-};
+}

package/lib/{apply-set-output-name.cjs → apply-set-output-name.mjs}

@@ -1,6 +1,4 @@
-'use strict';
-
-exports.setOutputName = function setOutputName({ script, style }) {
+export function setOutputName({ script, style }) {
   return (chain) => {
     const jsFilename = chain.output.get('filename');
 
@@ -18,4 +16,4 @@ exports.setOutputName = function setOutputName({ script, style }) {
         ]);
     }
   };
-};
+}

package/lib/{apply-split-chunks.cjs → apply-split-chunks.mjs}

@@ -1,15 +1,13 @@
-'use strict';
-
-const slashToRegexp = require('slash-to-regexp');
-const { MinChunkSizePlugin } = require('webpack').optimize;
-
-const { join } = require('path');
+import slashToRegexp from 'slash-to-regexp';
 
 function mapValues(obj, func) {
   const arr = Object.entries(obj);
-  return Object.fromEntries(arr.map(
-    ( [key, value], index) => [key, func(value, key, index, arr.length)],
-  ));
+  return Object.fromEntries(
+    arr.map(([key, value], index) => [
+      key,
+      func(value, key, index, arr.length),
+    ]),
+  );
 }
 
 const force = {
@@ -17,8 +15,8 @@ const force = {
   reuseExistingChunk: true,
 };
 
-exports.splitChunks = function splitChunks({ vendors = {} }) {
-  return (chain) => {
+export function splitChunks({ vendors = {} }) {
+  return async (chain) => {
     const settings = mapValues(vendors, (value, key, index, length) => {
       const mod = Array.isArray(value) ? `(${value.join('|')})` : value;
       const regexp = slashToRegexp(`/node_modules/${mod}/`);
@@ -63,20 +61,18 @@ exports.splitChunks = function splitChunks({ vendors = {} }) {
     const mode = chain.get('mode');
 
     if (mode === 'production') {
+      const {
+        default: {
+          optimize: { MinChunkSizePlugin },
+        },
+      } = await import('webpack');
       chain
         .plugin('min-chunk-size')
         .use(MinChunkSizePlugin, [{ minChunkSize: 1024 * 8 }]);
 
-      const name = chain.get('name') || '';
+      const { cachePath } = chain.get('x');
 
-      chain.recordsPath(
-        join(
-          process.cwd(),
-          'node_modules/.cache/best-shot/stats',
-          name,
-          'records.json',
-        ),
-      );
+      chain.recordsPath(cachePath('records.json'));
     }
   };
-};
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@best-shot/preset-web",
-  "version": "0.8.6",
+  "version": "0.10.1",
   "description": "A `best-shot` preset for web project",
   "license": "MIT",
   "author": {
@@ -29,23 +29,23 @@
   "bugs": {
     "url": "https://github.com/best-shot/best-shot/issues"
   },
-  "main": "index.cjs",
+  "main": "index.mjs",
   "dependencies": {
     "deepmerge": "^4.2.2",
     "ext-to-regexp": "^0.1.0",
-    "html-webpack-inject-plugin": "^5.0.0",
-    "html-webpack-plugin": "^5.4.0",
-    "micro-tpl-loader": "^0.0.1",
+    "html-webpack-inject-plugin": "^5.2.3",
+    "html-webpack-plugin": "^5.5.0",
+    "micro-tpl-loader": "^0.1.0",
     "slash-to-regexp": "^0.0.4",
     "suffix": "^1.0.0",
-    "webpack-subresource-integrity": "5.0.0"
+    "webpack-subresource-integrity": "^5.0.0"
   },
   "peerDependencies": {
-    "@best-shot/core": "^0.5.1",
-    "webpack": "^5.58.0"
+    "@best-shot/core": "^0.6.0",
+    "webpack": "^5.65.0"
   },
   "engines": {
-    "node": "^12.22.0 || ^14.17.0"
+    "node": "^14.17.0 || >=16.13.0"
   },
   "x-readme": {
     "logo": "https://cdn.jsdelivr.net/gh/best-shot/best-shot/packages/core/logo.svg"