Convert package from CJS to ESM

.nvmrc

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

package.json

@@ -2,6 +2,7 @@
   "name": "@studiometa/webpack-config-root",
   "version": "2.9.3",
   "private": true,
+  "type": "module",
   "workspaces": [
     "packages/*"
   ]

packages/demo/meta.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   presets: ['prototyping', 'yaml'],
   // Exclude the `test.scss` file from the merge
   mergeCSS: /^(?!.*css\/test\.scss).*$/,

packages/demo/package.json

@@ -2,22 +2,23 @@
   "name": "@studiometa/webpack-config-demo",
   "version": "2.9.3",
   "private": true,
+  "type": "module",
   "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/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

@@ -2,6 +2,7 @@
   "name": "@studiometa/webpack-config",
   "version": "2.9.3",
   "description": "A basic webpack config",
+  "type": "module",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "bin": {

packages/webpack-config/src/build.js

@@ -1,11 +1,11 @@
-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 config = await getConfig(options);
   const webpackConfig = getWebpackConfig(config);
 
   webpack(webpackConfig, (err, stats) => {

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(

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,13 +46,13 @@ 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.dist = config.dist || './dist';
@@ -61,7 +61,7 @@ module.exports = (config, options) => {
   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';

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

@@ -1,12 +1,15 @@
-const merge = require('lodash.merge');
-const findUp = require('find-up');
-const chalk = require('chalk');
-const createServer = require('tailwind-config-viewer/server');
-const extendWebpackConfig = require('../utils/extend-webpack-config.js');
-const extendBrowserSyncConfig = require('../utils/extend-browsersync-config.js');
-const { withTrailingSlash, withoutTrailingSlash, withLeadingSlash } = require('../utils');
+import merge from 'lodash.merge';
+import findUp from 'find-up';
+import chalk from 'chalk';
+import createServer from 'tailwind-config-viewer/server/index.js';
+import { createRequire } from 'module';
+import extendWebpackConfig from '../utils/extend-webpack-config.js';
+import extendBrowserSyncConfig from '../utils/extend-browsersync-config.js';
+import { withTrailingSlash, withoutTrailingSlash, withLeadingSlash } from '../utils/index.js';
 
-module.exports = (config, options = {}) => {
+const require = createRequire(import.meta.url);
+
+export default async (config, options = {}) => {
   const configPath = config.PATH;
 
   const opts = merge(
@@ -18,7 +21,7 @@ module.exports = (config, options = {}) => {
   );
 
   if (process.env.NODE_ENV === 'development') {
-    extendBrowserSyncConfig(config, (bsConfig) => {
+    await extendBrowserSyncConfig(config, async (bsConfig) => {
       const tailwindConfigViewerServer = createServer({
         // eslint-disable-next-line import/no-dynamic-require
         tailwindConfigProvider: () => require(findUp.sync('tailwind.config.js')),
@@ -40,7 +43,7 @@ module.exports = (config, options = {}) => {
     });
   }
 
-  extendWebpackConfig(config, (webpackConfig, isDev) => {
+  await extendWebpackConfig(config, async (webpackConfig, isDev) => {
     const tailwind = opts.path
       ? opts.path
       : require.resolve('tailwindcss', { paths: [configPath] });
@@ -75,3 +78,4 @@ module.exports = (config, options = {}) => {
     });
   });
 };
+

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

@@ -1,10 +1,10 @@
-const merge = require('lodash.merge');
-const extendWebpackConfig = require('../utils/extend-webpack-config.js');
+import merge from 'lodash.merge';
+import extendWebpackConfig from '../utils/extend-webpack-config.js';
 
-module.exports = (config, options = {}) => {
+export default async (config, options = {}) => {
   const opts = merge({ data: {} }, options);
 
-  extendWebpackConfig(config, (webpackConfig) => {
+  await extendWebpackConfig(config, async (webpackConfig) => {
     webpackConfig.module.rules.push({
       test: /\.twig$/,
       use: [

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

@@ -1,15 +1,15 @@
-const merge = require('lodash.merge');
-const extendWebpackConfig = require('../utils/extend-webpack-config.js');
+import merge from 'lodash.merge';
+import extendWebpackConfig from '../utils/extend-webpack-config.js';
 
-module.exports = (config, options = {}) => {
+export default async (config, options = {}) => {
   const opts = merge(
     {
       loaderOptions: {},
     },
     options
   );
 
-  extendWebpackConfig(config, (webpackConfig) => {
+  await extendWebpackConfig(config, async (webpackConfig) => {
     webpackConfig.module.rules.push({
       test: /\.ya?ml$/,
       use: [

packages/webpack-config/src/utils/extend-browsersync-config.js

@@ -3,7 +3,7 @@
  * @param {Object}   config The meta config object.
  * @param {Function} fn     The function to apply.
  */
-module.exports = (config, fn) => {
+export default (config, fn) => {
   const oldServerConfig =
     typeof config.server === 'function' ? config.server : () => config.server || {};
 

packages/webpack-config/src/utils/extend-webpack-config.js

@@ -3,11 +3,11 @@
  * @param {Object}   config The meta config object.
  * @param {Function} fn     The function to apply.
  */
-module.exports = (config, fn) => {
+export default async (config, fn) => {
   const oldWebpackConfig = typeof config.webpack === 'function' ? config.webpack : () => {};
 
-  config.webpack = (webpackConfig, isDev) => {
-    fn(webpackConfig, isDev);
-    oldWebpackConfig(webpackConfig, isDev);
+  config.webpack = async (webpackConfig, isDev) => {
+    await fn(webpackConfig, isDev);
+    await oldWebpackConfig(webpackConfig, isDev);
   };
 };

packages/webpack-config/src/utils/get-browsersync.js

@@ -1,6 +1,7 @@
-const path = require('path');
-const chalk = require('chalk');
-const instance = require('browser-sync').create();
+import path from 'path';
+import bs from 'browser-sync';
+
+const instance = bs.create();
 
 let WATCH_HANDLERS_BINDED = false;
 
@@ -80,47 +81,23 @@ const getConfig = (metaConfig) => {
   return browserSyncConfig;
 };
 
-/**
- * Get the URL generated by the BrowserSync config.
- * @param {BrowserSync} bs     The BrowserSync instance.
- * @param {Object}      config The BrowserSync config.
- */
-function getUrl(bs, config) {
-  const port = bs.getOption('port');
-  const proxy = bs.getOption('proxy');
-  const protocol = config.https ? 'https://' : 'http://';
-  const target = proxy ? proxy.get('target') : `${protocol}localhost`;
-
-  return `${target}:${port}`;
-}
-
-module.exports = (metaConfig) => ({
+export default (metaConfig) => ({
   instance,
-  config: getConfig(metaConfig),
+  get config() {
+    return getConfig(metaConfig);
+  },
   get getInfo() {
     return () => {
       if (!instance.active) {
-        return ['Application not running.'];
+        return 'Application not running.';
       }
 
-      const additionalInfos = this.config.infos || [];
-      const messages = [
-        `Application running at ${chalk.blue(getUrl(instance, this.config))}`,
-        ...additionalInfos.map((info) => {
-          if (typeof info === 'function') {
-            return info(getUrl(instance, this.config), this);
-          }
-
-          return info;
-        }),
-      ];
-
-      // Append a line break to the last message
-      if (!messages[messages.length - 1].endsWith('\n')) {
-        messages[messages.length - 1] += '\n';
-      }
+      const port = instance.getOption('port');
+      const proxy = instance.getOption('proxy');
+      const protocol = this.config.https ? 'https://' : 'http://';
+      const target = proxy ? proxy.get('target') : `${protocol}localhost`;
 
-      return messages;
+      return `Application running at \x1b[34m${target}:${port}\x1b[0m\n`;
     };
   },
 });