wp-blank-scripts 2.7.0 → 3.0.0-beta.0

package/config/.eslintrc.js

@@ -1,5 +1,4 @@
 module.exports = {
-  parser: 'babel-eslint',
   env: {
     browser: true,
     node: true,

package/config/.eslintrc.react.js

@@ -1,7 +1,6 @@
 const path = require('path');
 
 module.exports = {
-  parser: 'babel-eslint',
   env: {
     browser: true,
     es6: true,

package/lib/buildProject.js

@@ -2,7 +2,7 @@ const chalk = require('chalk');
 const opn = require('opn');
 const rimraf = require('rimraf');
 const webpack = require('webpack');
-const merge = require('webpack-merge');
+const { merge } = require('webpack-merge');
 const webpackDevMiddleware = require('webpack-dev-middleware');
 const webpackHotMiddleware = require('webpack-hot-middleware');
 const browserSync = require('browser-sync');
@@ -82,13 +82,18 @@ module.exports = async (envConfig = {}, buildOptions, failOnError = false) => {
 
   rimraf.sync('dist');
 
-  const config = merge.smart(baseConfig, envConfig, buildConfig, webpackConfig);
+  const config = merge(...[baseConfig, envConfig, buildConfig, webpackConfig].filter(Boolean));
 
   if (options.isDev) {
     const settings = getSettings();
     const url = settings.url[options.environment];
 
-    const compiler = webpack(config);
+    const compiler = webpack(config, (err, stats) => {
+      if (err || stats.hasErrors()) {
+        logger.error(err.stack || err);
+        return;
+      }
+    });
     const devMiddleware = webpackDevMiddleware(compiler, {
       publicPath: config.output.publicPath,
       stats: {
@@ -97,7 +102,6 @@ module.exports = async (envConfig = {}, buildOptions, failOnError = false) => {
         warnings: true,
       },
       writeToDisk: true,
-      logger,
     });
     const hotMiddleware = webpackHotMiddleware(compiler);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wp-blank-scripts",
-  "version": "2.7.0",
+  "version": "3.0.0-beta.0",
   "description": "Personal Wordpress Scripts",
   "main": "index.js",
   "bin": {
@@ -31,73 +31,65 @@
   "author": "ViVO Digital",
   "license": "ISC",
   "dependencies": {
-    "@babel/core": "^7.9.6",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/plugin-proposal-export-default-from": "^7.8.3",
-    "@babel/plugin-proposal-export-namespace-from": "^7.8.3",
-    "@babel/plugin-proposal-object-rest-spread": "^7.9.6",
-    "@babel/preset-env": "^7.9.6",
-    "@babel/preset-react": "^7.0.0",
-    "@hot-loader/react-dom": "^16.12.0",
-    "@prettier/plugin-php": "^0.14.1",
-    "babel-eslint": "^10.1.0",
-    "babel-loader": "^8.1.0",
-    "babel-plugin-transform-export-extensions": "^6.22.0",
-    "browser-sync": "^2.26.7",
-    "chalk": "^2.4.2",
-    "copy-webpack-plugin": "^5.1.1",
-    "core-js": "^3.6.5",
-    "css-loader": "^3.6.0",
-    "cssnano": "^4.1.10",
-    "eslint": "^6.3.0",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-config-prettier": "^5.1.0",
-    "eslint-import-resolver-node": "^0.3.4",
-    "eslint-plugin-import": "^2.18.0",
-    "eslint-plugin-jsx-a11y": "^6.2.1",
-    "eslint-plugin-prettier": "^3.1.0",
-    "eslint-plugin-react": "^7.14.2",
-    "file-loader": "^6.0.0",
-    "get-port": "^4.1.0",
-    "glob": "^7.1.1",
-    "html-webpack-plugin": "^4.3.0",
-    "husky": "^3.0.5",
-    "inquirer": "^3.0.4",
-    "lint-staged": "^9.2.5",
-    "mini-css-extract-plugin": "^0.9.0",
-    "mysql": "^2.13.0",
+    "@hot-loader/react-dom": "^17.0.2",
+    "@prettier/plugin-php": "^0.19.6",
+    "browser-sync": "^2.29.3",
+    "chalk": "4.1.2",
+    "copy-webpack-plugin": "^11.0.0",
+    "core-js": "^3.31.0",
+    "css-loader": "^6.8.1",
+    "cssnano": "^6.0.1",
+    "esbuild-loader": "^3.0.1",
+    "eslint": "^8.42.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-import-resolver-node": "^0.3.7",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.32.2",
+    "file-loader": "^6.2.0",
+    "get-port": "5.1.1",
+    "glob": "^10.2.7",
+    "html-webpack-plugin": "^5.5.3",
+    "husky": "^8.0.3",
+    "inquirer": "3.0.4",
+    "lint-staged": "^13.2.2",
+    "mini-css-extract-plugin": "^2.7.6",
+    "mysql": "^2.18.1",
     "node-fetch": "2",
-    "node-sass": "^4.14.1",
     "normalize.css": "^8.0.1",
     "opn": "^6.0.0",
-    "ora": "^3.1.0",
-    "postcss-loader": "^3.0.0",
-    "postcss-preset-env": "^6.7.0",
-    "prettier": "^1.18.2",
-    "raw-loader": "^4.0.1",
-    "react-hot-loader": "^4.12.21",
-    "replace-in-file": "^2.1.0",
-    "rimraf": "^2.6.3",
+    "ora": "^5.4.1",
+    "postcss": "^8.4.24",
+    "postcss-loader": "^7.3.3",
+    "postcss-preset-env": "^8.5.0",
+    "prettier": "^2.8.8",
+    "raw-loader": "^4.0.2",
+    "react-hot-loader": "^4.13.1",
+    "replace-in-file": "^7.0.1",
+    "rimraf": "^5.0.1",
     "rsync": "^0.6.1",
-    "sass-loader": "^8.0.2",
-    "sass-resources-loader": "^2.2.1",
-    "semver": "^6.3.0",
-    "slugify": "^1.3.4",
+    "sass": "^1.63.4",
+    "sass-loader": "^13.3.2",
+    "sass-resources-loader": "^2.2.5",
+    "semver": "^7.5.2",
+    "slugify": "^1.6.6",
     "ssh2": "0.8.9",
-    "style-loader": "^1.2.1",
+    "style-loader": "^3.3.3",
     "tempy": "^0.2.1",
-    "terser-webpack-plugin": "^2.3.5",
-    "time-fix-plugin": "^2.0.6",
-    "webpack": "^4.43.0",
-    "webpack-dev-middleware": "^3.7.2",
-    "webpack-fix-style-only-entries": "^0.5.1",
-    "webpack-hot-middleware": "^2.25.0",
-    "webpack-merge": "^4.2.2",
-    "yargs": "^9.0.1"
+    "terser-webpack-plugin": "^5.3.9",
+    "time-fix-plugin": "^2.0.7",
+    "webpack": "^5.87.0",
+    "webpack-dev-middleware": "^6.1.1",
+    "webpack-hot-middleware": "^2.25.3",
+    "webpack-merge": "^5.9.0",
+    "webpack-remove-empty-scripts": "^1.0.3",
+    "yargs": "^17.7.2"
   },
   "devDependencies": {
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-jsx-a11y": "^6.1.2",
-    "eslint-plugin-node": "^8.0.0"
+    "eslint-plugin-node": "^11.1.0"
   }
 }

package/webpack.base.config.js

@@ -1,12 +1,11 @@
 const path = require('path');
 const fs = require('fs');
 
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries');
+const CopyPlugin = require('copy-webpack-plugin');
+const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const TimeFixPlugin = require('time-fix-plugin');
-const chalk = require('chalk');
 const cssnano = require('cssnano');
 const glob = require('glob');
 const postcssPresetEnv = require('postcss-preset-env');
@@ -14,7 +13,6 @@ const postcssPresetEnv = require('postcss-preset-env');
 const logger = require('./logger');
 const { copyFiles, copyFx, loaderOptions } = require('./overridable');
 
-const babelConfig = require('./utils/babelConfig');
 const getEnvironmentFile = require('./utils/getEnvironmentFile');
 const getSettings = require('./utils/projectSettings');
 const getFxFiles = require('./utils/getFxFiles');
@@ -51,16 +49,18 @@ function makeBaseConfig(options) {
     {
       from: path.join(sourceDir, 'assets', 'img'),
       to: path.join(themePath, 'assets', 'img'),
+      globOptions: { ignore: ['.DS_Store'] },
     },
     {
       from: path.join(sourceDir, 'assets', 'fonts'),
       to: path.join(themePath, 'assets', 'fonts'),
+      globOptions: { ignore: ['.DS_Store'] },
     },
     {
-      from: path.join(sourceDir, 'templates', '**', '*'),
+      from: path.join(sourceDir, 'templates'),
       to: themePath,
-      transformPath(targetPath) {
-        return targetPath.replace(path.join(sourceDir, 'templates'), '');
+      globOptions: {
+        ignore: ['.DS_Store'],
       },
     },
     {
@@ -73,11 +73,13 @@ function makeBaseConfig(options) {
         }
         return contentBuffer;
       },
+      globOptions: { ignore: ['.DS_Store'] },
     },
     ...fxFiles.copy.map(({ context, from, to }) => ({
       from,
       to: path.join(themePath, 'inc', to),
       context,
+      globOptions: { ignore: ['.DS_Store'] },
     })),
   ];
 
@@ -85,27 +87,25 @@ function makeBaseConfig(options) {
     path.join('config', 'wp-config.php'),
     path.join('config', 'robots.txt'),
     path.join('config', '.htaccess'),
-  ].map(filePath => getEnvironmentFile(filePath, environment));
+  ].map((filePath) => getEnvironmentFile(filePath, environment));
 
   const wordpressFiles = [
     {
-      from: path.join('wordpress', '**', '*'),
+      from: 'wordpress',
       to: '',
-      ignore: [
-        path.join('**', 'wp-content', 'themes', '**', '*'),
-        path.join('**', 'wp-content', 'plugins', 'hello.php'),
-        'composer.json',
-        'readme.html',
-        'license.txt',
-      ],
-      transformPath(targetPath) {
-        return targetPath.replace('wordpress', '');
+      globOptions: {
+        ignore: [
+          '**/wp-content/themes/**/*',
+          '**/wp-content/plugins/hello.php',
+          '**/wp-content/plugins/akismet/**/*',
+          '.DS_Store',
+          'composer.json',
+          'readme.html',
+          'license.txt',
+        ],
       },
     },
-    {
-      from: 'wp-content',
-      to: 'wp-content',
-    },
+    { from: 'wp-content', to: 'wp-content' },
   ];
 
   let customFiles = [];
@@ -155,7 +155,7 @@ function makeBaseConfig(options) {
     },
     output: {
       path: buildPath,
-      filename: chunkData => {
+      filename: (chunkData) => {
         const name = chunkData.chunk.name === 'adminScripts' ? 'admin' : chunkData.chunk.name;
         return path.join(themeDir, 'assets', 'js', `${name}.js`);
       },
@@ -167,11 +167,16 @@ function makeBaseConfig(options) {
     module: {
       rules: [
         {
-          test: /\.(js|jsx)$/,
+          test: /\.[jt]sx?$/,
           exclude: /node_modules\/(?!(dom7|swiper)\/)/,
           use: {
-            loader: 'babel-loader',
-            options: babelConfig,
+            loader: 'esbuild-loader',
+            options: {
+              loader: 'jsx',
+              // TODO: Remove in react build
+              jsxFactory: 'wp.element.createElement',
+              target: 'es2015',
+            },
           },
           ...loaderOverrides.js,
         },
@@ -191,12 +196,13 @@ function makeBaseConfig(options) {
             {
               loader: 'postcss-loader',
               options: {
-                ident: 'postcss',
-                plugins() {
-                  if (isProd) {
-                    return [postcssPresetEnv(), cssnano()];
-                  }
-                  return [postcssPresetEnv({ browsers: 'last 2 versions' })];
+                postcssOptions: {
+                  postcssOptions: {
+                    plugins: [
+                      postcssPresetEnv({ browsers: 'last 2 versions' }),
+                      ...(isProd ? [postcssPresetEnv(), cssnano()] : []),
+                    ],
+                  },
                 },
                 sourceMap: !isProd,
               },
@@ -235,28 +241,18 @@ function makeBaseConfig(options) {
       ],
     },
     plugins: [
-      new TimeFixPlugin(),
-      new CopyWebpackPlugin(filesToCopy, {
-        // We log our own warning and errors
-        logLevel: 'silent',
-        ignore: ['.DS_Store'],
-      }),
-      new FixStyleOnlyEntriesPlugin({
-        silent: true,
-      }),
+      // TODO: See if we can remove
+      // new TimeFixPlugin(),
+      new CopyPlugin({ patterns: filesToCopy }),
+      new RemoveEmptyScriptsPlugin({ silent: true }),
     ],
     resolve: {
       symlinks: false,
-      alias: {
-        scrollmagic: path.resolve(
-          'node_modules/scrollmagic/scrollmagic/minified/ScrollMagic.min.js'
-        ),
-      },
     },
     devtool: isProd ? undefined : 'cheap-module-source-map',
     performance: {
       maxEntrypointSize: Infinity,
-      assetFilter: function(assetFilename) {
+      assetFilter: function (assetFilename) {
         // Only warn about large JS assets
         return (
           assetFilename.includes(path.join(themeDir, 'assets')) && assetFilename.endsWith('.js')
@@ -267,10 +263,9 @@ function makeBaseConfig(options) {
       minimize: isProd,
       minimizer: [
         new TerserPlugin({
-          cache: true,
           parallel: true,
-          sourceMap: true,
           terserOptions: {
+            sourceMap: true,
             keep_classnames: true,
             keep_fnames: true,
           },

package/webpack.wp.config.js

@@ -57,13 +57,6 @@ function makeWpWebpackConfig() {
     plugins: [
       new MiniCssExtractPlugin({
         filename: path.join(themeDir, 'assets', 'css', '[name].css'),
-        fallback: 'style-loader',
-        use: [
-          {
-            loader: 'css-loader',
-            options: { minimize: isProd, url: false, sourceMap: !isProd },
-          },
-        ],
       }),
     ],
   };

package/utils/babelConfig.js

@@ -1,52 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-
-const isReactProject = require('./isReactProject');
-const logger = require('../logger');
-
-// Check for a .babelrc file in the project directory, if not, use the default config
-
-const getBabelConfig = () => {
-  const isReact = isReactProject();
-
-  const defaultConfig = {
-    plugins: [
-      '@babel/plugin-proposal-class-properties',
-      '@babel/plugin-proposal-object-rest-spread',
-      '@babel/plugin-proposal-export-default-from',
-      '@babel/plugin-proposal-export-namespace-from',
-    ],
-    presets: [
-      [
-        '@babel/preset-env',
-        {
-          corejs: '3',
-          useBuiltIns: 'usage',
-        },
-      ],
-    ],
-  };
-
-  if (isReact) {
-    defaultConfig.presets.push('@babel/preset-react');
-    defaultConfig.plugins.push('transform-export-extensions');
-    defaultConfig.env = {
-      development: {
-        plugins: ['react-hot-loader/babel'],
-      },
-    };
-  }
-
-  const customConfig = path.join(process.cwd(), '.babelrc');
-
-  if (fs.existsSync(customConfig)) {
-    logger.info('Using custom babel config from .babelrc');
-    return JSON.parse(fs.readFileSync(customConfig, 'utf8'));
-  }
-
-  logger.info(`Using ${isReact ? 'react' : 'default'} babel config`);
-
-  return defaultConfig;
-};
-
-module.exports = getBabelConfig();