@pixolith/webpack-sw6-config 7.5.0 → 8.0.0

package/README.md

@@ -5,7 +5,7 @@
 ### Install
 
 ```bash
-npm install @pixolith/webpack-sw6-config--save-dev
+npm install @pixolith/webpack-sw6-config --save-dev
 ```
 
 ### Require the plugin

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pixolith/webpack-sw6-config",
   "public": true,
-  "version": "7.5.0",
+  "version": "8.0.0",
   "description": "",
   "main": "src/index.js",
   "scripts": {},
@@ -21,26 +21,28 @@
     "url": "https://github.com/pixolith/webpack-plugins/issues"
   },
   "homepage": "https://github.com/pixolith/webpack-plugins/tree/master/packages/webpack-hook-plugin/#readme",
-  "gitHead": "ce1a0dfc319927e3bc9462e460a0c32873471a5e",
+  "gitHead": "97830e50cddc91762ad93716771e0d67a6ed2e03",
   "dependencies": {
-    "@babel/core": "^7.22.1",
-    "@babel/eslint-parser": "^7.21.8",
+    "@babel/cli": "7.23.4",
+    "@babel/core": "^7.23.7",
+    "@babel/eslint-parser": "^7.23.3",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-transform-classes": "^7.21.0",
     "@babel/plugin-transform-runtime": "^7.22.4",
-    "@babel/preset-env": "^7.22.4",
-    "@babel/preset-typescript": "^7.21.5",
-    "@pixolith/eslint-config-sw6": "^7.2.0",
-    "@pixolith/external-svg-sprite-loader": "^7.3.0",
-    "@pixolith/stylelint-config-standard": "^7.2.0",
-    "@pixolith/webpack-assets-copy-plugin": "^7.1.0",
-    "@pixolith/webpack-filename-linter-plugin": "^7.0.0",
-    "@pixolith/webpack-hook-plugin": "^7.0.0",
-    "@pixolith/webpack-twig-assets-emitter-plugin": "^7.0.0",
-    "@pixolith/webpack-watcher": "^7.0.0",
+    "@babel/preset-env": "7.23.7",
+    "@babel/preset-typescript": "7.23.3",
+    "@pixolith/eslint-config-sw6": "^8.0.0",
+    "@pixolith/external-svg-sprite-loader": "^8.0.0",
+    "@pixolith/stylelint-config-standard": "^8.0.0",
+    "@pixolith/webpack-assets-copy-plugin": "^8.0.0",
+    "@pixolith/webpack-filename-linter-plugin": "^8.0.0",
+    "@pixolith/webpack-hook-plugin": "^8.0.0",
+    "@pixolith/webpack-twig-assets-emitter-plugin": "^8.0.0",
+    "@pixolith/webpack-watcher": "^8.0.0",
+    "@swc/core": "^1.7.0",
     "autoprefixer": "^10.4.14",
     "babel-loader": "^9.1.2",
     "change-case": "^4.1.2",

package/src/babel.config.js

@@ -2,9 +2,12 @@ module.exports = {
     presets: [
         ['@babel/preset-env', {
             useBuiltIns: 'entry',
-            corejs: '3.27',
+            corejs: '3.34.0',
             bugfixes: true,
         }],
         '@babel/preset-typescript',
-    ]
+    ],
+    plugins: [
+        ['@babel/plugin-proposal-decorators', { version: '2023-01' }],
+    ],
 };

package/src/index.js

@@ -4,7 +4,6 @@ const dev = require('./webpack.config.dev');
 const administration = require('./webpack.config.administration');
 const isProd = process.env.NODE_ENV === 'production';
 const pkg = require('./../package.json');
-const isModern = process.env.MODE === 'modern';
 const watcher = require('@pixolith/webpack-watcher');
 const { merge } = require('webpack-merge');
 const Consola = require('consola');
@@ -16,7 +15,6 @@ const setup = () => {
     watcher.run();
     console.table({
         isProd: isProd,
-        isModern: isModern,
         pluginPath: process.env.PLUGIN_PATH,
         vendorPath: process.env.VENDOR_PATH,
         publicPath: process.env.PUBLIC_PATH,

package/src/postcss.config.js

@@ -1,15 +1,11 @@
-module.exports = ({ file, options, env }) => {
-    return {
-        plugins: {
-            // to edit target browsers: use "browserslist" field in package.json
-            autoprefixer: {
-                env: options.mode + (options.isModern ? ':modern' : ''),
-            },
-            'postcss-pxtorem': {
-                rootValue: 16,
-                unitPrecision: 5,
-                propList: ['*']
-            }
-        },
-    };
+module.exports = {
+    'plugins': {
+        // to edit target browsers: use "browserslist" field in package.json
+        'autoprefixer': {},
+        'postcss-pxtorem': {
+            rootValue: 16,
+            unitPrecision: 5,
+            propList: ['*']
+        }
+    },
 };

package/src/webpack.config.administration.js

@@ -1,13 +1,15 @@
 const Path = require('path'),
     Fs = require('fs'),
+    Entry = require('webpack-glob-entry'),
     privatePath = process.env.PLUGIN_PATH,
-    changeCase = require('change-case'),
-    entry = require('webpack-glob-entry'),
+    vendorPath = process.env.VENDOR_PATH,
     publicPath = process.env.PUBLIC_PATH,
-    spritePath = process.env.SPRITE_PATH ?? 'custom/plugins/PxswTheme/src/Resources/views/administration',
+    spritePath = process.env.SPRITE_PATH ?? 'custom/static-plugins/PxswTheme/src/Resources/views/administration',
+    isProd = process.env.NODE_ENV === 'production',
+    ChangeCase = require('change-case'),
     MiniCssExtractPlugin = require('mini-css-extract-plugin'),
+    Consola = require('consola'),
     AssetsCopyPlugin = require('@pixolith/webpack-assets-copy-plugin'),
-    isProd = process.env.NODE_ENV === 'production',
     SvgStorePlugin = require('@pixolith/external-svg-sprite-loader'),
     HookPlugin = require('@pixolith/webpack-hook-plugin'),
     outputPath = Path.resolve(process.cwd(), publicPath),
@@ -17,25 +19,51 @@ const Path = require('path'),
         filename: (chunkData) => {
             let pluginName = chunkData.chunk.name
                 .toLowerCase()
-                .replace('vendor-', '');
+                .replace('vendor-', '')
+                .replace('pxsw-pxsw-', 'pxsw-');
             return `${pluginName.replace(
                 /-/g,
                 '',
             )}/administration/js/${pluginName}.js`;
-        },
+        }
+    },
+    miniCssChunksConfig = {
+        filename: (chunkData) => {
+            let pluginName = chunkData.chunk.name
+                .toLowerCase()
+                .replace('vendor-', '')
+                .replace('pxsw-pxsw-', 'pxsw-');
+            return `${pluginName.replace(
+                /-/g,
+                '',
+            )}/administration/css/${pluginName}.css`;
+        }
     }
 
 module.exports = {
     entry: () => {
-        let entriesPlugins = entry(
+        let entriesPlugins = Entry(
             (filePath) =>
-                changeCase.paramCase(
+                ChangeCase.paramCase(
                     filePath.match(/plugins\/(Pxsw[\w]*)\//)[1],
                 ),
             Path.resolve(privatePath, 'index.js'),
         );
 
-        return { ...entriesPlugins };
+        let entriesVendor = Entry(
+            (filePath) =>
+                ChangeCase.paramCase(
+                    filePath.match(/(vendor\/pxsw\/[\w-]*)\//)[1],
+                ),
+            Path.resolve(vendorPath, 'index.js'),
+        );
+
+        if (process.env.DEBUG) {
+            Consola.info('[DEBUG]: Webpack entry points:');
+            Consola.info({...entriesPlugins, ...entriesVendor});
+        }
+
+        return {...entriesPlugins, ...entriesVendor};
     },
     module: {
         // loader order is from right to left or from bottom to top depending on the notation but basicly always reverse
@@ -150,32 +178,6 @@ module.exports = {
                 callback();
             },
         }),
-        new AssetsCopyPlugin({
-            includes: ['js', 'css'],
-            ignoreFiles: [/[-\w.]*.hot-update.js/, /sprite\/sprite_uses.svg/],
-            files: [
-                {
-                    from: publicPath,
-                    to: 'custom/$pluginFolder/$plugin/src/Resources/public',
-                    replace: async (fromPath, toPath) => {
-                        let pluginName = changeCase.pascalCase(
-                            Path.basename(fromPath).replace(
-                                Path.extname(fromPath),
-                                '',
-                            ),
-                        );
-
-                        const pluginOrStaticPlugin = await Fs.existsSync('custom/plugins/$plugin/src'.replace('$plugin', pluginName));
-
-                        let pluginFolder = pluginOrStaticPlugin ? 'plugins' : 'static-plugins';
-
-                        toPath = toPath.replace('$pluginFolder', pluginFolder);
-                        toPath = toPath.replace('$plugin', pluginName);
-                        return toPath;
-                    },
-                },
-            ],
-        }),
 
         new SvgStorePlugin({
             sprite: {
@@ -187,8 +189,37 @@ module.exports = {
             },
         }),
 
-        new MiniCssExtractPlugin(),
-    ],
+        new MiniCssExtractPlugin(miniCssChunksConfig),
+    ].concat(
+        isProd ?
+            new AssetsCopyPlugin({
+                includes: ['js', 'css'],
+                ignoreFiles: [/[-\w.]*.hot-update.js/, /sprite\/sprite_uses.svg/],
+                files: [
+                    {
+                        from: publicPath,
+                        to: '$pluginPath/$plugin/src/Resources/public',
+                        replace: async (fromPath, toPath) => {
+                            let pluginName = ChangeCase.pascalCase(
+                                Path.basename(fromPath).replace(
+                                    Path.extname(fromPath),
+                                    '',
+                                ),
+                            );
+
+                            let isPlugin = await Fs.existsSync(`custom/plugins/${pluginName}/src`),
+                                isStaticPlugin = await Fs.existsSync(`custom/static-plugins/${pluginName}/src`);
+
+                            let pluginFolder = isPlugin ? 'custom/plugins' : (isStaticPlugin ? 'custom/static-plugins' : 'vendor/pxsw');
+
+                            toPath = toPath.replace('$pluginPath', pluginFolder);
+                            toPath = toPath.replace('$plugin', pluginName);
+                            return toPath;
+                        },
+                    },
+                ],
+            }) : [],
+    ),
 
     optimization: {
         splitChunks: false,

package/src/webpack.config.dev.js

@@ -1,9 +1,8 @@
 const webpack = require('webpack'),
     Path = require('path'),
     Consola = require('consola'),
-    fs = require('fs'),
+    Fs = require('fs'),
     ASSET_URL = process.env.ASSET_URL || '/',
-    StyleLintPlugin = require('stylelint-webpack-plugin'),
     isProd = process.env.NODE_ENV === 'production',
     privatePath = process.env.PLUGIN_PATH,
     MiniCssExtractPlugin = require('mini-css-extract-plugin'),
@@ -13,7 +12,7 @@ const webpack = require('webpack'),
     watcher = require('@pixolith/webpack-watcher'),
     Glob = require('glob'),
     HookPlugin = require('@pixolith/webpack-hook-plugin'),
-    sass = require('sass'),
+    Sass = require('sass'),
     TimeFixPlugin = require('time-fix-plugin');
 
 module.exports = {
@@ -68,7 +67,7 @@ module.exports = {
                             additionalData: `$asset_url: '${ASSET_URL}';`,
                             sassOptions: {
                                 quietDeps: true,
-                                logger: sass.Logger.silent,
+                                logger: Sass.Logger.silent,
                             },
                         },
                     },
@@ -120,19 +119,19 @@ module.exports = {
             ? {
                 type: 'https',
                 options: {
-                    ca: fs.readFileSync(
+                    ca: Fs.readFileSync(
                         Path.join(
                             process.cwd() +
                             '/.ddev/ssl/_wildcard.px-staging.de+1-client.pem',
                         ),
                     ),
-                    key: fs.readFileSync(
+                    key: Fs.readFileSync(
                         Path.join(
                             process.cwd() +
                             '/.ddev/ssl/_wildcard.px-staging.de+1-key.pem',
                         ),
                     ),
-                    cert: fs.readFileSync(
+                    cert: Fs.readFileSync(
                         Path.join(
                             process.cwd() +
                             '/.ddev/ssl/_wildcard.px-staging.de+1.pem',
@@ -164,13 +163,13 @@ module.exports = {
             beforeCompile(compiler, callback) {
                 let path = Path.join(process.cwd(), 'public/sprite'),
                     filename = 'sprite.svg',
-                    exists = fs.existsSync(path);
+                    exists = Fs.existsSync(path);
 
                 if (!exists) {
-                    fs.mkdirSync(path, {
+                    Fs.mkdirSync(path, {
                         recursive: true,
                     });
-                    fs.appendFile(Path.join(path, filename), '#', (err) => {
+                    Fs.appendFile(Path.join(path, filename), '#', (err) => {
                         if (err) {
                             throw err;
                         }

package/src/webpack.config.production.js

@@ -5,7 +5,6 @@ const webpack = require('webpack'),
     Glob = require('glob'),
     Path = require('path'),
     privatePath = process.env.PLUGIN_PATH,
-    isModern = process.env.MODE === 'modern',
     config = {
         devtool: 'nosources-source-map',
         performance: {
@@ -15,11 +14,8 @@ const webpack = require('webpack'),
         },
         mode: 'production',
         optimization: {
-            concatenateModules: true,
-            removeAvailableModules: true,
-            removeEmptyChunks: true,
-            sideEffects: false,
-            minimize: true,
+            splitChunks: false,
+            runtimeChunk: false,
             minimizer: [
                 new CssMinimizerPlugin({
                     minimizerOptions: {
@@ -36,21 +32,13 @@ const webpack = require('webpack'),
                     ]
                 }),
                 new TerserPlugin({
+                    minify: TerserPlugin.swcMinify,
                     terserOptions: {
                         compress: {
                             drop_console: true,
                         },
-                        mangle: true,
-                        ecma: isModern ? 8 : 5,
-                        keep_classnames: false,
-                        keep_fnames: false,
-                        ie8: false,
-                        module: false,
-                        nameCache: null, // or specify a name cache object
-                        safari10: !isModern,
-                        toplevel: false,
-                        warnings: false,
                     },
+                    parallel: true,
                     extractComments: false,
                 }),
             ],

package/src/webpack.config.storefront.js

@@ -3,15 +3,14 @@ const Path = require('path'),
     MiniCssExtractPlugin = require('mini-css-extract-plugin'),
     privatePath = process.env.PLUGIN_PATH,
     vendorPath = process.env.VENDOR_PATH,
-    spritePath = process.env.SPRITE_PATH ?? 'custom/plugins/PxswTheme/src/Resources/views/storefront',
+    spritePath = process.env.SPRITE_PATH ?? 'custom/static-plugins/PxswTheme/src/Resources/views/storefront',
     swNodePath = process.env.SW_NODE_PATH ?? './vendor/shopware/storefront/Resources/app/storefront/vendor',
     swAliasPath = process.env.SW_ALIAS_PATH ?? '/vendor/shopware/storefront/Resources/app/storefront/src',
+    isProd = process.env.NODE_ENV === 'production',
     ChangeCase = require('change-case'),
     Consola = require('consola'),
     TwigAssetEmitterPlugin = require('@pixolith/webpack-twig-assets-emitter-plugin'),
-    entry = require('webpack-glob-entry'),
-    isProd = process.env.NODE_ENV === 'production',
-    isModern = process.env.MODE === 'modern',
+    Entry = require('webpack-glob-entry'),
     SvgStorePlugin = require('@pixolith/external-svg-sprite-loader'),
     publicPath = process.env.PUBLIC_PATH,
     ASSET_URL = process.env.ASSET_URL || '/',
@@ -19,27 +18,29 @@ const Path = require('path'),
     outputConfig = {
         path: Path.join(process.cwd(), publicPath),
         publicPath: ASSET_URL,
-        chunkFilename: `js/[name]${
-            isModern ? '.modern' : '' + isProd ? '.[contenthash]' : ''
-        }.js`,
+        chunkFilename: (chunkData) => {
+            return `js/chunk[name]${
+                isProd ? '.[contenthash:6]' : ''
+            }.js`;
+        },
         filename: (chunkData) => {
-            return `js/${chunkData.chunk.name.toLowerCase()}${(isModern
-                ? '.modern'
-                : '') + (isProd ? `.${chunkData.chunk.hash}` : '')}.js`;
+            return `js/${chunkData.chunk.name.toLowerCase()}${
+                isProd ? `.[contenthash:6]` : ''
+            }.js`;
         },
     },
     miniCssChunksConfig = {
-        filename: `css/[name]${isModern ? '.modern' : ''}${
+        filename: `css/[name]${
             isProd ? '.[contenthash]' : ''
         }.css`,
-        chunkFilename: `css/[name].vendor${isModern ? '.modern' : ''}${
+        chunkFilename: `css/[name].vendor${
             isProd ? '.[contenthash]' : ''
         }.css`
     };
 
 module.exports = {
     entry: () => {
-        let entriesPlugins = entry(
+        let entriesPlugins = Entry(
             (filePath) =>
                 ChangeCase.paramCase(
                     filePath.match(/plugins\/(Pxsw[\w]*)\//)[1],
@@ -47,7 +48,7 @@ module.exports = {
             Path.resolve(privatePath, 'index.js'),
         );
 
-        let entriesVendor = entry(
+        let entriesVendor = Entry(
             (filePath) =>
                 ChangeCase.paramCase(
                     filePath.match(/(vendor\/pxsw\/[\w-]*)\//)[1],
@@ -81,32 +82,30 @@ module.exports = {
             {
                 test: /\.js$/,
                 exclude: (file) => {
-                    if (
-                        !isModern &&
-                        /node_modules/.test(file) &&
-                        JSON.parse(process.env.JS_TRANSPILE) &&
-                        JSON.parse(process.env.JS_TRANSPILE).length &&
-                        JSON.parse(process.env.JS_TRANSPILE).filter((lib) => {
-                            return new RegExp(lib).test(file);
-                        }).length > 0
-                    ) {
-                        return false;
-                    }
-
-                    if (/node_modules/.test(file)) {
-                        return true;
-                    }
-
-                    return false;
+                    return /node_modules/.test(file);
                 },
                 use: [
                     {
-                        loader: 'babel-loader',
+                        loader: 'swc-loader',
                         options: {
-                            configFile: Path.resolve(
-                                __dirname,
-                                'babel.config.js',
-                            ),
+                            env: {
+                                mode: 'entry',
+                                coreJs: '3.34.0',
+                                // .browserlist settings are not found by swc-loader, so we load it manually: https://github.com/swc-project/swc/issues/3365
+                                targets: require('browserslist').loadConfig({
+                                    config: './package.json',
+                                }),
+                            },
+                            jsc: {
+                                parser: {
+                                    syntax: 'typescript',
+                                },
+                                transform: {
+                                    // NEXT-30535 - Restore babel option to not use defineProperty for class fields.
+                                    // Previously (in v6.5.x) this was done by `@babel/preset-typescript` automatically.
+                                    useDefineForClassFields: false,
+                                },
+                            },
                         },
                     },
                 ],
@@ -215,28 +214,22 @@ module.exports = {
         }),
         new TwigAssetEmitterPlugin({
             includes: ['js', 'css'],
-            ignoreFiles: [/.*icons.*\.js/],
+            ignoreFiles: [/.*icons.*\.js/, /.*chunk.*\.js/],
             template: {
-                [isModern ? 'scriptsmodern' : 'scripts']: {
+                'scripts': {
                     namespace: '@Storefront/storefront',
                     path: '',
-                    filename: isModern
-                        ? '_px_base_modern.html.twig'
-                        : '_px_base.html.twig',
+                    filename: '_px_base.html.twig',
                 },
-                [isModern ? 'stylesmodern' : 'styles']: {
+                'styles': {
                     namespace: '@Storefront/storefront',
                     path: 'layout',
-                    filename: isModern
-                        ? '_px_meta_modern.html.twig'
-                        : '_px_meta.html.twig',
+                    filename: '_px_meta.html.twig',
                 },
-                [isModern ? 'hintsmodern' : 'hints']: {
+                'hints': {
                     namespace: '@Storefront/storefront',
                     path: 'layout',
-                    filename: isModern
-                        ? '_px_meta_modern.html.twig'
-                        : '_px_meta.html.twig',
+                    filename: '_px_meta.html.twig',
                 },
             },
         }),