Merge branch 'hotfix/4.1.1'

composer.json

@@ -1,6 +1,6 @@
 {
   "name": "studiometa/webpack-config",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "PHP Helpers for @studiometa/webpack-config",
   "type": "library",
   "require": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/webpack-config-root",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "private": true,
   "type": "commonjs",
   "workspaces": [

packages/demo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/webpack-config-demo",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "private": true,
   "type": "module",
   "scripts": {

packages/preset-vue-2/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/webpack-config-preset-vue-2",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "publishConfig": {
     "access": "public"
   },

packages/preset-vue-3/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/webpack-config-preset-vue-3",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "publishConfig": {
     "access": "public"
   },

packages/webpack-config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/webpack-config",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "A basic webpack config",
   "type": "module",
   "main": "src/index.js",
@@ -80,6 +80,7 @@
     "eslint-webpack-plugin": "^3.2.0",
     "filemanager-webpack-plugin": "^7.0.0",
     "find-up": "^6.3.0",
+    "get-port": "^6.1.2",
     "glob": "^8.0.3",
     "hot-accept-webpack-plugin": "^2.0.0-beta.7",
     "html-webpack-harddisk-plugin": "^2.0.0",

packages/webpack-config/src/build.js

@@ -6,7 +6,7 @@ import getWebpackConfig from './webpack.prod.config.js';
 /**
  * Build a given Webpack config.
  * @param {WebpackConfig} config The Weback configuration object.
- * @param {String} name The name of the build.
+ * @param {string} name The name of the build.
  */
 async function build(config, name) {
   console.log(`Building ${name} bundle in ${config.output.path.replace(cwd(), '.')}...`);

packages/webpack-config/src/dev.js

@@ -1,4 +1,3 @@
-import path from 'path';
 import webpack from 'webpack';
 import webpackDevMiddleware from 'webpack-dev-middleware';
 import webpackHotMiddleware from 'webpack-hot-middleware';
@@ -8,12 +7,17 @@ import getConfig from './utils/get-config.js';
 import getWebpackConfig from './webpack.dev.config.js';
 import getServer from './utils/get-browsersync.js';
 
-export default async (options = {}) => {
+/**
+ * Init dev server.
+ * @param   {{ analyze?: boolean }} [options]
+ * @returns {Promise<void>}
+ */
+export default async function dev(options = {}) {
   process.env.NODE_ENV = 'development';
 
   const config = await getConfig(options);
   const webpackConfig = await getWebpackConfig(config);
-  const server = getServer(config);
+  const server = await getServer(config);
 
   const webpackBar = webpackConfig.plugins.find(
     (plugin) => plugin.constructor.name === 'WebpackBarPlugin'
@@ -99,4 +103,4 @@ export default async (options = {}) => {
   };
 
   server.instance.init(browserSyncConfig);
-};
+}

packages/webpack-config/src/index.js

@@ -6,7 +6,7 @@ import getWebpackDevConfig from './webpack.dev.config.js';
  * Create a configuration.
  *
  * @param  {MetaConfig} config
- * @return {MetaConfig}
+ * @returns {MetaConfig}
  */
 export function createConfig(config) {
   return config;
@@ -28,15 +28,12 @@ export function defineConfig(config) {
  * @param {Object} options
  * @param {'production'|'development'} [options.mode]
  * @param {'modern'|'legacy'} [options.target]
- *
- * @return {import('webpack').Configuration}
+ * @returns {import('webpack').Configuration}
  */
-export function getWebpackConfig(
-  { mode, target } = { mode: process.env.NODE_ENV, target: 'legacy' }
-) {
-  const config = getMetaConfig();
+export function getWebpackConfig({ mode = process.env.NODE_ENV, target = 'legacy' } = {}) {
+  const config = getMetaConfig({ target: [target] });
   const options = { isModern: target === 'modern', isLegacy: target === 'legacy' };
   return mode === 'production'
     ? getWebpackProdConfig(config, options)
-    : getWebpackDevConfig(config, options);
+    : getWebpackDevConfig(config);
 }

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

@@ -109,7 +109,7 @@ export default function prototyping(options) {
         // Add debug comments
         Twig.Templates.registerParser('twig', (params) => {
           if (params.id) {
-            const namespace = Object.entries(params.options.namespaces).find(([key, value]) =>
+            const namespace = Object.entries(params.options.namespaces).find(([, value]) =>
               params.id.startsWith(value)
             );
             let tpl = params.id;

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

@@ -36,7 +36,7 @@ export default class Html {
   /**
    * Render classes.
    * @param  {Classes} classes
-   * @return {string}
+   * @returns {string}
    */
   static renderClass(classes) {
     if (!classes) {
@@ -65,7 +65,7 @@ export default class Html {
   /**
    * Render a style attribute.
    * @param  {Record<string, string|number>} styles
-   * @return {string}
+   * @returns {string}
    */
   static renderStyleAttribute(styles) {
     if (!styles) {
@@ -87,7 +87,7 @@ export default class Html {
    * Render attributes.
    *
    * @param  {Record<string, any>} attributes
-   * @return {string}
+   * @returns {string}
    */
   static renderAttributes(attributes) {
     if (!attributes) {
@@ -132,7 +132,7 @@ export default class Html {
    * Convert a map to an object.
    *
    * @param  {Map} map
-   * @return {Record<string, any>}
+   * @returns {Record<string, any>}
    */
   static mapToObject(map) {
     const obj = {};
@@ -152,7 +152,7 @@ export default class Html {
    * @param  {string} name
    * @param  {Record<string, any>} attributes
    * @param  {string} content
-   * @return {string}
+   * @returns {string}
    */
   static renderTag(name, attributes, content = '') {
     const formattedAttributes = Html.renderAttributes(attributes);

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

@@ -16,4 +16,4 @@ export default async function extendWebpackConfig(config, fn) {
     await oldWebpackConfig(webpackConfig, isDev);
     await fn(webpackConfig, isDev);
   };
-};
+}

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

@@ -1,15 +1,21 @@
 import bs from 'browser-sync';
 import chalk from 'chalk';
+import getPort, { portNumbers } from 'get-port';
 
 const instance = bs.create();
 
 let WATCH_HANDLERS_BINDED = false;
 
-const getConfig = (metaConfig) => {
+/**
+ * Get BrowserSync config
+ * @param   {import('./index').MetaConfig} metaConfig
+ * @returns {Promise<import('@types/browser-sync').Options>}
+ */
+async function getConfig(metaConfig) {
   const browserSyncConfig = {
     open: false,
+    port: await getPort({ port: portNumbers(3000, 3100) }),
     logPrefix: '',
-    port: 3042,
     logFileChanges: false,
     logLevel: 'silent',
     notify: {
@@ -64,33 +70,40 @@ const getConfig = (metaConfig) => {
   }
 
   return browserSyncConfig;
-};
+}
 
 let config;
 
-export default (metaConfig) => ({
-  instance,
-  get config() {
-    if (!config) {
-      config = getConfig(metaConfig);
-    }
-    return config;
-  },
-  get getInfo() {
-    return () => {
-      if (!instance.active) {
-        return 'Application not running.\n';
-      }
+/**
+ * Get the BrowserSync config and other server stuff.
+ * @param   {import('./index').MetaConfig} metaConfig
+ * @returns {{ instance: import('@types/browser-sync').BrowserSyncInstance, config: import('@types/browser-sync').Options, getInfo: () => string }}
+ */
+export default async function getServer(metaConfig) {
+  if (!config) {
+    config = await getConfig(metaConfig);
+  }
+  return {
+    instance,
+    get config() {
+      return config;
+    },
+    get getInfo() {
+      return () => {
+        if (!instance.active) {
+          return 'Application not running.\n';
+        }
 
-      const url = new URL('http://localhost');
-      url.port = instance.getOption('port');
-      url.protocol = this.config.https ? 'https://' : 'http://';
+        const url = new URL('http://localhost');
+        url.port = instance.getOption('port');
+        url.protocol = this.config.https ? 'https://' : 'http://';
 
-      const proxy = instance.getOption('proxy');
+        const proxy = instance.getOption('proxy');
 
-      return `Application running at ${chalk.blue(url.toString())}${
-        proxy ? chalk.white(` (proxying ${chalk.blue(proxy.get('target'))})`) : ''
-      }\n`;
-    };
-  },
-});
+        return `Application running at ${chalk.blue(url.toString())}${
+          proxy ? chalk.white(` (proxying ${chalk.blue(proxy.get('target'))})`) : ''
+        }\n`;
+      };
+    },
+  };
+}