Merge branch 'release/3.0.0'

.eslintrc.js

@@ -2,6 +2,7 @@ module.exports = {
   extends: '@studiometa/eslint-config',
   rules: {
     'global-require': 'off',
+    'import/extensions': ['error', 'always', { ignorePackages: false }],
   },
   overrides: [
     {

.github/workflows/release.yml

@@ -13,7 +13,7 @@ jobs:
 
       - uses: actions/setup-node@v1
         with:
-          node-version: 15
+          node-version: 16
           registry-url: https://registry.npmjs.org/
 
       - run: npm i

.nvmrc

@@ -1 +1 @@
-15
+16

package.json

@@ -1,8 +1,19 @@
 {
   "name": "@studiometa/webpack-config-root",
-  "version": "2.9.3",
+  "version": "3.0.0",
   "private": true,
+  "type": "commonjs",
   "workspaces": [
     "packages/*"
-  ]
+  ],
+  "scripts": {
+    "lint": "eslint packages/webpack-config/src packages/demo/src --ext=.js,.vue",
+    "fix": "npm run lint -- --fix"
+  },
+  "devDependencies": {
+    "@studiometa/eslint-config": "^2.1.3",
+    "@studiometa/prettier-config": "^2.0.1",
+    "eslint": "^7.32.0",
+    "prettier": "^2.3.2"
+  }
 }

packages/demo/.eslintrc.js

@@ -1,6 +1,9 @@
 module.exports = {
   root: true,
   extends: ['@studiometa/eslint-config'],
+  rules: {
+    'import/extensions': ['error', 'always', { ignorePackages: false }],
+  },
   settings: {
     'import/resolver': 'webpack',
   },

packages/demo/.stylelintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: '@studiometa/stylelint-config',
+};

packages/demo/package.json

@@ -1,23 +1,24 @@
 {
   "name": "@studiometa/webpack-config-demo",
-  "version": "2.9.3",
+  "version": "3.0.0",
   "private": true,
+  "type": "commonjs",
   "scripts": {
-    "dev": "meta dev",
-    "build": "meta build"
+    "dev": "node ../webpack-config/bin/cli.js dev",
+    "build": "node ../webpack-config/bin/cli.js build"
   },
   "devDependencies": {
     "@studiometa/eslint-config": "^2.1.3",
     "@studiometa/prettier-config": "^2.0.1",
     "@studiometa/stylelint-config": "^2.0.0",
     "@studiometa/webpack-config": "file:../webpack-config",
-    "eslint": "^7.28.0",
-    "prettier": "^2.3.1",
+    "eslint": "^7.32.0",
+    "prettier": "^2.3.2",
     "stylelint": "^13.13.1",
-    "tailwindcss": "^2.1.4"
+    "tailwindcss": "^2.2.9"
   },
   "dependencies": {
-    "@studiometa/js-toolkit": "^1.3.1",
+    "@studiometa/js-toolkit": "^1.6.1",
     "vue": "^2.6.14"
   }
 }

packages/demo/src/css/app.scss

@@ -1,5 +1,7 @@
 @tailwind base;
+
 @tailwind components;
+
 @tailwind utilities;
 
 body {

packages/demo/src/js/app.js

@@ -17,7 +17,7 @@ class App extends Base {
     refs: ['content', 'vue'],
     ...config,
     components: {
-      Component: () => import('./components/Component'),
+      Component: () => import('./components/Component.js'),
     },
   };
 

packages/demo/src/js/components/Component.js

@@ -9,7 +9,7 @@ export default class Component extends Base {
   static config = {
     name: 'Component',
     components: {
-      ComponentFoo: () => import('../foo/Component'),
+      ComponentFoo: () => import('../foo/Component.js'),
     },
   };
 }

packages/webpack-config/bin/cli.js

@@ -1,12 +1,14 @@
 #!/usr/bin/env node
-const cac = require('cac');
-const chalk = require('chalk');
+import cac from 'cac';
+import chalk from 'chalk';
+import { createRequire } from "module";
+import build from '../src/build.js';
+import dev from '../src/dev.js';
 
-const { version, bin } = require('../package.json');
+const require = createRequire(import.meta.url);
+const { version, name } = require('../package.json');
 
-const cli = cac(Object.keys(bin).pop());
-const build = require('../src/build.js');
-const dev = require('../src/dev.js');
+const cli = cac('meta');
 
 cli
   .command('build', 'Build assets.')
@@ -35,7 +37,7 @@ cli
   });
 
 cli.help();
-cli.version(version);
+cli.version(`${name}@${version}`);
 cli.parse();
 
 if (!cli.matchedCommandName && Object.keys(cli.options).length <= 1) {

packages/webpack-config/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@studiometa/webpack-config",
-  "version": "2.9.3",
+  "version": "3.0.0",
   "description": "A basic webpack config",
+  "type": "module",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "bin": {
@@ -28,6 +29,9 @@
   "bugs": {
     "url": "https://github.com/studiometa/webpack-config/issues"
   },
+  "engines": {
+    "node": "^14.13.1 || >=16.0.0"
+  },
   "homepage": "https://github.com/studiometa/webpack-config#readme",
   "devDependencies": {
     "@studiometa/eslint-config": "^2.1.3",
@@ -40,50 +44,50 @@
     "@studiometa/eslint-config": "^2.1.3",
     "@studiometa/prettier-config": "^2.0.1",
     "@studiometa/stylelint-config": "^2.0.0",
-    "eslint": "^7.26.0",
-    "prettier": "^2.3.0",
+    "eslint": "^7.32.0",
+    "prettier": "^2.3.2",
     "stylelint": "^13.13.1"
   },
   "dependencies": {
-    "@babel/plugin-transform-runtime": "^7.14.5",
-    "@babel/preset-env": "^7.14.5",
+    "@babel/plugin-transform-runtime": "^7.15.0",
+    "@babel/preset-env": "^7.15.0",
     "@npmcli/move-file": "^1.1.2",
     "@soda/friendly-errors-webpack-plugin": "^1.8.0",
-    "@types/browser-sync": "^2.26.1",
-    "autoprefixer": "^10.2.6",
+    "@types/browser-sync": "^2.26.2",
+    "autoprefixer": "^10.3.3",
     "babel-loader": "^8.2.2",
-    "browser-sync": "^2.26.14",
+    "browser-sync": "^2.27.5",
     "cac": "^6.7.3",
-    "chalk": "^4.1.1",
+    "chalk": "^4.1.2",
     "common-dir": "^3.0.1",
-    "core-js": "^3.14.0",
-    "css-loader": "^5.2.6",
-    "css-minimizer-webpack-plugin": "^3.0.1",
+    "core-js": "^3.16.4",
+    "css-loader": "^6.2.0",
+    "css-minimizer-webpack-plugin": "^3.0.2",
     "dotenv": "^10.0.0",
     "eslint-import-resolver-webpack": "^0.13.1",
-    "eslint-webpack-plugin": "^2.5.4",
-    "find-up": "^5.0.0",
+    "eslint-webpack-plugin": "^3.0.1",
+    "find-up": "^6.0.0",
     "glob": "^7.1.7",
-    "html-webpack-plugin": "^5.3.1",
+    "html-webpack-plugin": "^5.3.2",
     "js-yaml-loader": "^1.2.2",
     "lodash.merge": "^4.6.2",
-    "mini-css-extract-plugin": "^1.6.0",
-    "postcss": "^8.3.4",
-    "postcss-loader": "^6.1.0",
+    "mini-css-extract-plugin": "^2.2.0",
+    "postcss": "^8.3.6",
+    "postcss-loader": "^6.1.1",
     "postcss-preset-env": "^6.7.0",
     "raw-loader": "^4.0.2",
     "resolve-url-loader": "^4.0.0",
-    "sass": "^1.35.0",
+    "sass": "^1.38.2",
     "sass-loader": "^12.1.0",
-    "style-loader": "^2.0.0",
-    "stylelint-webpack-plugin": "^2.1.1",
+    "style-loader": "^3.2.1",
+    "stylelint-webpack-plugin": "^3.0.1",
     "tailwind-config-viewer": "^1.6.2",
-    "terser-webpack-plugin": "^5.1.3",
+    "terser-webpack-plugin": "^5.1.4",
     "twig-html-loader": "^0.1.9",
-    "vue-loader": "^15.9.7",
+    "vue-loader": "^15.9.8",
     "vue-svg-loader": "^0.16.0",
     "vue-template-compiler": "^2.6.14",
-    "webpack": "^5.39.0",
+    "webpack": "^5.51.1",
     "webpack-assets-manifest": "^5.0.6",
     "webpack-bundle-analyzer": "^4.4.2",
     "webpack-dev-middleware": "^5.0.0",

packages/webpack-config/src/build.js

@@ -1,12 +1,12 @@
-const webpack = require('webpack');
-const getMetaConfig = require('./utils/get-config.js');
-const getWebpackConfig = require('./webpack.prod.config.js');
+import webpack from 'webpack';
+import getConfig from './utils/get-config.js';
+import getWebpackConfig from './webpack.prod.config.js';
 
-module.exports = (options = {}) => {
+export default async (options = {}) => {
   process.env.NODE_ENV = 'production';
 
-  const config = getMetaConfig(options);
-  const webpackConfig = getWebpackConfig(config);
+  const config = await getConfig(options);
+  const webpackConfig = await getWebpackConfig(config);
 
   webpack(webpackConfig, (err, stats) => {
     if (err) {

packages/webpack-config/src/dev.js

@@ -1,17 +1,17 @@
-const path = require('path');
-const webpack = require('webpack');
-const webpackDevMiddleware = require('webpack-dev-middleware');
-const webpackHotMiddleware = require('webpack-hot-middleware');
-const FriendlyErrorsWebpackPlugin = require('@soda/friendly-errors-webpack-plugin');
-const getMetaConfig = require('./utils/get-config');
-const getWebpackConfig = require('./webpack.dev.config');
-const getServer = require('./utils/get-browsersync');
+import path from 'path';
+import webpack from 'webpack';
+import webpackDevMiddleware from 'webpack-dev-middleware';
+import webpackHotMiddleware from 'webpack-hot-middleware';
+import FriendlyErrorsWebpackPlugin from '@soda/friendly-errors-webpack-plugin';
+import getConfig from './utils/get-config.js';
+import getWebpackConfig from './webpack.dev.config.js';
+import getServer from './utils/get-browsersync.js';
 
-module.exports = (options = {}) => {
+export default async (options = {}) => {
   process.env.NODE_ENV = 'development';
 
-  const config = getMetaConfig(options);
-  const webpackConfig = getWebpackConfig(config);
+  const config = await getConfig(options);
+  const webpackConfig = await getWebpackConfig(config);
   const server = getServer(config);
 
   const webpackBar = webpackConfig.plugins.find(
@@ -51,7 +51,7 @@ module.exports = (options = {}) => {
       clearConsole: true,
       compilationSuccessInfo: {
         get messages() {
-          return server.getInfo();
+          return [server.getInfo()];
         },
       },
     }),

packages/webpack-config/src/index.d.ts

@@ -91,7 +91,7 @@ export interface MetaConfig {
    *
    * @link https://browsersync.io/docs/api#api-watch
    */
-  watch: Array<
+  watch?: Array<
     | string
     | [
         string,

packages/webpack-config/src/index.js

@@ -1,10 +1,22 @@
-const getMetaConfig = require('./utils/get-config.js');
-const getWebpackConfig = require('./webpack.prod.config.js');
+import getMetaConfig from './utils/get-config.js';
+import getWebpackProdConfig from './webpack.prod.config.js';
 
-module.exports = {
-  createConfig: (config) => config,
-  getWebpackConfig: () => {
-    const config = getMetaConfig();
-    return getWebpackConfig(config);
-  },
-};
+/**
+ * Create a configuration.
+ *
+ * @param  {MetaConfig} config
+ * @return {MetaConfig}
+ */
+export function createConfig(config) {
+  return config;
+}
+
+/**
+ * Get the generated Webpack configuration.
+ *
+ * @return {import('webpack').Configuration}
+ */
+export function getWebpackConfig() {
+  const config = getMetaConfig();
+  return getWebpackProdConfig(config);
+}

packages/webpack-config/src/presets/prototyping.js

@@ -1,12 +1,12 @@
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const glob = require('glob');
-const path = require('path');
-const merge = require('lodash.merge');
-const twigPreset = require('./twig');
-const tailwindcssPreset = require('./tailwindcss');
-const extendWebpackConfig = require('../utils/extend-webpack-config.js');
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import glob from 'glob';
+import path from 'path';
+import merge from 'lodash.merge';
+import twigPreset from './twig.js';
+import tailwindcssPreset from './tailwindcss.js';
+import extendWebpackConfig from '../utils/extend-webpack-config.js';
 
-module.exports = (config, options) => {
+export default async (config, options) => {
   const opts = merge(
     {
       tailwindcss: {},
@@ -21,7 +21,7 @@ module.exports = (config, options) => {
 
   opts.twig.namespaces = glob.sync('./src/templates/*/').reduce((acc, file) => {
     const name = path.basename(file);
-    acc[name] = path.resolve(file);
+    acc[name] = file;
     return acc;
   }, opts.twig.namespaces || {});
 
@@ -46,22 +46,22 @@ module.exports = (config, options) => {
     (file) =>
       new HtmlWebpackPlugin({
         ...opts.html,
-        template: path.resolve(file),
+        template: file,
         filename: file.replace('./src/templates/pages/', '').replace(/\.twig$/, '.html'),
       })
   );
 
-  twigPreset(config, opts.twig);
-  tailwindcssPreset(config, opts.tailwindcss);
+  await twigPreset(config, opts.twig);
+  await tailwindcssPreset(config, opts.tailwindcss);
 
-  config.src = ['./src/css/**/[!_]*.scss', './src/js/app.js', ...(config.src || [])];
+  config.src = ['./src/js/app.js', './src/css/**/[!_]*.scss', ...(config.src || [])];
   config.dist = config.dist || './dist';
   config.public = config.public || '/';
   config.server = config.server || 'dist';
   config.watch = ['./dist/**/*.html', ...(config.watch || [])];
   config.mergeCSS = true;
 
-  extendWebpackConfig(config, (webpackConfig, isDev) => {
+  await extendWebpackConfig(config, async (webpackConfig, isDev) => {
     webpackConfig.plugins = [...webpackConfig.plugins, ...plugins];
     if (!isDev) {
       webpackConfig.output.filename = '[name].[contenthash].js';