wp-blank-scripts 3.0.0-beta.7 → 3.0.0-beta.9

package/cli/{settings.js → config.js}

@@ -1,7 +1,7 @@
 const chalk = require('chalk');
 const inquirer = require('inquirer');
 
-const addSettings = require('../lib/addSettings');
+const addDeployConfig = require('../lib/addDeployConfig');
 
 const logger = require('../logger');
 const getCliOptions = require('../utils/getCliOptions');
@@ -64,23 +64,23 @@ module.exports = async () => {
       {
         name: 'urlProduction',
         message: 'What is the production URL?',
-        when: answers => answers.environment === 'production',
+        when: (answers) => answers.environment === 'production',
       },
       {
         name: 'hostProduction',
         message: 'What is the production server host?',
-        when: answers => answers.environment === 'production',
+        when: (answers) => answers.environment === 'production',
       },
       {
         name: 'userProduction',
         message: 'What is the production server user?',
-        when: answers => answers.environment === 'production',
+        when: (answers) => answers.environment === 'production',
       },
       {
         name: 'destinationProduction',
         message: 'What is the production path?',
-        when: answers => answers.environment === 'production',
-        default: answers => {
+        when: (answers) => answers.environment === 'production',
+        default: (answers) => {
           const user = answers.userProduction;
           return `/home/${user}/public_html`;
         },
@@ -88,40 +88,40 @@ module.exports = async () => {
       {
         name: 'dbNameProduction',
         message: 'Production database name?',
-        when: answers => answers.environment === 'production',
+        when: (answers) => answers.environment === 'production',
       },
       {
         name: 'dbUserNameProduction',
         message: 'Production database username?',
-        when: answers => answers.environment === 'production',
+        when: (answers) => answers.environment === 'production',
       },
       {
         name: 'dbPasswordProduction',
         message: 'Production database password?',
-        when: answers => answers.environment === 'production',
+        when: (answers) => answers.environment === 'production',
       },
       {
         name: 'urlStaging',
         message: 'What is the staging URL?',
-        when: answers => answers.environment === 'staging',
+        when: (answers) => answers.environment === 'staging',
       },
       {
         name: 'hostStaging',
         message: 'What is the staging server host?',
-        when: answers => answers.environment === 'staging',
+        when: (answers) => answers.environment === 'staging',
         default: 'staging.vivo.digital',
       },
       {
         name: 'userStaging',
         message: 'What is the staging server user?',
-        when: answers => answers.environment === 'staging',
+        when: (answers) => answers.environment === 'staging',
         default: 'stagingvivo',
       },
       {
         name: 'destinationStaging',
         message: 'What is the staging path?',
-        when: answers => answers.environment === 'staging',
-        default: answers => {
+        when: (answers) => answers.environment === 'staging',
+        default: (answers) => {
           const user = answers.userStaging;
           let url = answers.urlStaging;
           url = url && url.replace('https://', '');
@@ -132,17 +132,17 @@ module.exports = async () => {
       {
         name: 'dbNameStaging',
         message: 'Staging database name?',
-        when: answers => answers.environment === 'staging',
+        when: (answers) => answers.environment === 'staging',
       },
       {
         name: 'dbUserNameStaging',
         message: 'Staging database username?',
-        when: answers => answers.environment === 'staging',
+        when: (answers) => answers.environment === 'staging',
       },
       {
         name: 'dbPasswordStaging',
         message: 'Staging database password?',
-        when: answers => answers.environment === 'staging',
+        when: (answers) => answers.environment === 'staging',
       },
     ]);
 
@@ -150,7 +150,7 @@ module.exports = async () => {
     const confirmed = options.didPrompt ? await confirmOptions(options) : true;
 
     if (confirmed) {
-      await addSettings(options);
+      await addDeployConfig(options);
       logger.success(`${options.environment} Settings updated!`);
     }
   } catch (err) {

package/config/.eslintrc.react.js

@@ -26,6 +26,7 @@ module.exports = {
     'react/forbid-prop-types': 0,
     'react/require-default-props': 0,
     'react/sort-comp': 0,
+    'react/function-component-definition': 0,
     'prefer-destructuring': 0,
     'no-nested-ternary': 0,
     'no-continue': 0,

package/config/.prettierrc.js

@@ -9,7 +9,7 @@ module.exports = {
     {
       files: '*.php',
       options: {
-        phpVersion: '7.2',
+        phpVersion: '7.4',
         tabWidth: 4,
         braceStyle: '1tbs',
       },

package/index.js

@@ -10,11 +10,9 @@ const deploy = require('./cli/deploy');
 const importSQL = require('./cli/import');
 const exportSQL = require('./cli/export');
 const pullSQL = require('./cli/pull');
-const upgrade = require('./cli/upgrade');
-const settings = require('./cli/settings'); //@TODO rename... addDeployConfig
+const addDeployConfig = require('./cli/config');
 
 const exitWithError = require('./utils/exitWithError');
-const logger = require('./logger');
 
 const _ = () => {};
 
@@ -23,7 +21,7 @@ yargs
   .command(
     'build',
     'Build',
-    yargs =>
+    (yargs) =>
       yargs.option('environment', {
         describe: 'The environment to build for.',
       }),
@@ -34,7 +32,7 @@ yargs
   .command(
     'setup',
     'Setup Project',
-    yargs =>
+    (yargs) =>
       yargs
         .option('projectLocation', {
           describe: 'Where is the project located?',
@@ -59,7 +57,7 @@ yargs
   .command(
     'deploy',
     'Deploy',
-    yargs =>
+    (yargs) =>
       yargs
         .option('environment', {
           describe: 'The environment to deploy to.',
@@ -81,7 +79,7 @@ yargs
   .command(
     'import',
     'Import SQL',
-    yargs =>
+    (yargs) =>
       yargs
         .option('file', {
           describe: 'The path to the file to import.',
@@ -103,7 +101,7 @@ yargs
   .command(
     'export',
     'Export SQL',
-    yargs =>
+    (yargs) =>
       yargs.option('environment', {
         describe: 'The environment you are exporting for.',
       }),
@@ -112,7 +110,7 @@ yargs
   .command(
     'pull',
     'Pull SQL',
-    yargs =>
+    (yargs) =>
       yargs.option('environment', {
         describe: 'The environment you are pulling from.',
       }),
@@ -121,31 +119,30 @@ yargs
   .command(
     'hooks',
     'Run a git hook',
-    yargs =>
+    (yargs) =>
       yargs.option('type', {
         describe: 'The git hook to run.',
       }),
     hooks
   )
-  .command('upgrade', 'Upgrade to v0.4', _, upgrade)
   .command(
-    'settings',
-    'Add Deployment Settings',
-    yargs =>
+    'config',
+    'Add deployment config',
+    (yargs) =>
       yargs.option('environment', {
-        describe: 'What environment are you adding settings for?',
+        describe: 'What environment are you adding deployment config for?',
       }),
-    settings
+    addDeployConfig
   )
   .help()
   .alias('h', 'help')
   .demandCommand()
   .strict().argv;
 
-process.on('uncaughtException', err => {
+process.on('uncaughtException', (err) => {
   exitWithError(err.message);
 });
 
-process.on('unhandledRejection', err => {
+process.on('unhandledRejection', (err) => {
   exitWithError(err instanceof Error ? err.stack || err.message : 'Something went wrong');
 });

package/lib/{addSettings.js → addDeployConfig.js}

@@ -1,12 +1,11 @@
 const fs = require('fs');
 const glob = require('glob');
-const slugify = require('slugify');
 const replace = require('replace-in-file');
 
 const logger = require('../logger');
 const getProjectPath = require('../utils/getProjectPath');
 
-const getReplacements = options => {
+const getReplacements = (options) => {
   if (options.environment === 'production') {
     return [
       ['{{url_production}}', options.urlProduction],
@@ -32,7 +31,7 @@ const getReplacements = options => {
   return;
 };
 
-module.exports = async options => {
+module.exports = async (options) => {
   const projectPath = getProjectPath();
   const filesToReplace = [
     ...glob.sync('config/*', { cwd: projectPath, dot: true }),
@@ -44,7 +43,7 @@ module.exports = async options => {
   let files = filesToReplace;
   if (getProjectPath() !== process.cwd()) {
     // Check if the script is being run from outside of the project and then fix the paths
-    files = files.map(file => getProjectPath(file));
+    files = files.map((file) => getProjectPath(file));
   }
 
   // Remove any files that don't exist

package/overridable/index.js

@@ -1,20 +1,12 @@
 const fs = require('fs');
 const path = require('path');
 
-const logger = require('../logger');
-
 let overrides;
 const overridesPath = path.resolve(process.cwd(), './tasks/overrides.js');
 if (fs.existsSync(overridesPath)) {
   overrides = require(overridesPath);
 }
 
-if (overrides.copyFxClasses) {
-  logger.warn(
-    `You are using the old "copyFxClasses" override, please upgrade your code to use the new "copyFx" API.`
-  );
-}
-
 const checkProjectDependencies = require('./checkProjectDependencies');
 const copyFx = require('./copyFx');
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wp-blank-scripts",
-  "version": "3.0.0-beta.7",
+  "version": "3.0.0-beta.9",
   "description": "Personal Wordpress Scripts",
   "main": "index.js",
   "bin": {
@@ -31,6 +31,7 @@
   "author": "ViVO Digital",
   "license": "ISC",
   "dependencies": {
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
     "@prettier/plugin-php": "^0.19.6",
     "@swc/cli": "^0.1.62",
     "@swc/core": "^1.3.67",
@@ -59,13 +60,13 @@
     "mini-css-extract-plugin": "^2.7.6",
     "mysql": "^2.18.1",
     "node-fetch": "2",
-    "normalize.css": "^8.0.1",
     "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-refresh": "^0.14.0",
     "replace-in-file": "^7.0.1",
     "rimraf": "^5.0.1",
     "rsync": "^0.6.1",

package/webpack.base.config.js

@@ -172,13 +172,15 @@ function makeBaseConfig(options) {
       rules: [
         {
           test: /\.[jt]sx?$/,
-          exclude: /node_modules\/(?!(dom7|swiper)\/)/,
+          exclude: /node_modules/,
           use: {
-            loader: 'esbuild-loader',
+            loader: 'swc-loader',
             options: {
-              loader: 'jsx',
-              jsxFactory: 'wp.element.createElement',
-              target: 'es2015',
+              jsc: {
+                parser: {
+                  jsx: true,
+                },
+              },
             },
           },
           ...loaderOverrides.js,

package/webpack.react.config.js

@@ -6,6 +6,7 @@ const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const postcssPresetEnv = require('postcss-preset-env');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const cssnano = require('cssnano');
 
 const getSettings = require('./utils/projectSettings');
@@ -16,22 +17,24 @@ function makeReactWebpackConfig(options) {
   const isProd = mode === 'production';
   const sourceDir = 'app';
   const sourcePath = path.join(process.cwd(), sourceDir);
-  const entryPath = path.join(sourcePath, 'index.js');
+  const entryPath = [path.join(sourcePath, 'index.js')];
   const globalVariablesPath = path.join(sourcePath, 'variables.scss');
 
   const settings = getSettings();
   const themeDir = path.join('wp-content', 'themes', settings.project);
 
-  if (!fs.existsSync(entryPath)) {
-    const relativeEntryPath = path.relative(process.cwd(), entryPath);
+  if (!fs.existsSync(entryPath[0])) {
+    const relativeEntryPath = path.relative(process.cwd(), entryPath[0]);
     exitWithError(`This project is a React project, but the entry file is missing.
        Please create ${chalk.yellow(relativeEntryPath)} to continue.`);
   }
 
+  if (!isProd) {
+    entryPath.unshift('webpack-hot-middleware/client');
+  }
+
   const config = {
     entry: {
-      // Make sure global is first
-      style: ['normalize.css'],
       main: entryPath,
     },
     output: {
@@ -56,6 +59,12 @@ function makeReactWebpackConfig(options) {
                 parser: {
                   jsx: true,
                 },
+                transform: {
+                  react: {
+                    development: !isProd,
+                    refresh: !isProd,
+                  },
+                },
               },
             },
           },
@@ -198,10 +207,9 @@ function makeReactWebpackConfig(options) {
       version: false,
     },
   };
-
   if (!isProd) {
-    config.entry.main = ['webpack-hot-middleware/client', config.entry.main];
     config.plugins.push(new webpack.HotModuleReplacementPlugin());
+    config.plugins.push(new ReactRefreshWebpackPlugin());
   }
 
   return config;

package/webpack.wp.config.js

@@ -13,7 +13,6 @@ const getSettings = require('./utils/projectSettings');
 
 function makeWpWebpackConfig() {
   const mode = process.env.NODE_ENV || 'development';
-  const isProd = mode === 'production';
 
   const settings = getSettings();
 
@@ -25,12 +24,12 @@ function makeWpWebpackConfig() {
 
   // Source entries
   const mainScripts = {};
-  glob.sync(path.join(sourcePath, 'assets', 'js', '*.js')).forEach(filePath => {
+  glob.sync(path.join(sourcePath, 'assets', 'js', '*.js')).forEach((filePath) => {
     const name = path.basename(filePath, '.js');
     mainScripts[name] = [filePath];
   });
 
-  glob.sync(path.join(sourcePath, 'assets', 'js', 'gutenberg', '*.js')).forEach(filePath => {
+  glob.sync(path.join(sourcePath, 'assets', 'js', 'gutenberg', '*.js')).forEach((filePath) => {
     const name = path.basename(filePath, '.js');
     mainScripts[`gutenberg/${name}`] = [filePath];
   });
@@ -52,7 +51,7 @@ function makeWpWebpackConfig() {
   return {
     entry: {
       ...mainScripts,
-      style: ['normalize.css', ...fxFiles.sass, ...mainStyles],
+      style: [...fxFiles.sass, ...mainStyles],
     },
     plugins: [
       new MiniCssExtractPlugin({

package/cli/upgrade.js

@@ -1,150 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const rimraf = require('rimraf');
-const replace = require('replace-in-file');
-const ora = require('ora');
-
-const execAsync = require('../utils/execAsync');
-const logger = require('../logger');
-
-const unusedPackages = [
-  'pace-progress',
-  '@babel/polyfill',
-  '@babel/runtime',
-  'babel-polyfill',
-  'babel-runtime',
-];
-
-const filesToChange = [
-  [path.join('config', 'htaccess.txt'), path.join('config', '.htaccess')],
-  [
-    path.join('config', 'htaccess-staging.txt'),
-    path.join('config', '.htaccess-staging'),
-  ],
-  [
-    path.join('config', 'htaccess-production.txt'),
-    path.join('config', '.htaccess-production'),
-  ],
-];
-
-module.exports = async () => {
-  logger.log('Upgrading your project to the latest wp-blank-scripts');
-
-  // Rename files
-  filesToChange.forEach(([to, from]) => {
-    if (fs.existsSync(to)) {
-      fs.renameSync(to, from);
-      logger.log(`Renamed ${to} to ${from}`);
-    }
-  });
-
-  const pckFile = fs.readFileSync('package.json');
-  const pck = JSON.parse(pckFile);
-
-  // Remove browserify-shim from package.json
-  delete pck['browserify-shim'];
-  delete pck['browserify'];
-  logger.log('Removed browserify & browserify-shim config');
-
-  // Add new pull command
-  pck.scripts.pull = 'wp-scripts pull';
-
-  // Add new vivo config
-  pck.vivo = {
-    'dev-command': 'start',
-    designs: [],
-  };
-
-  logger.log('Added new fields to project package');
-
-  fs.writeFileSync('package.json', JSON.stringify(pck, null, 2));
-
-  // Remove pace-progress occurences from style.scss, preloader.scss, main.js
-  const scriptFilePP = path.join('src', 'assets', 'js', 'main.js');
-  const styleFilePP = path.join(
-    'src',
-    'assets',
-    'css',
-    'partials',
-    'preloader.scss'
-  );
-  const mainStyleFile = path.join('src', 'assets', 'css', 'style.scss');
-
-  // Remove from main.js
-  const importLinesPreloader = [
-    '// Pace',
-    'import pace from \'pace-progress\';',
-    'pace.start();',
-  ];
-  replace.sync({
-    files: scriptFilePP,
-    from: importLinesPreloader,
-    to: '',
-  });
-
-  // Delete preloader.scss
-  rimraf.sync(styleFilePP);
-  logger.log('Removed pace-progress from project');
-
-  // Remove import from style.scss
-  const importPreloaderStyles = '@import \'partials/preloader\';';
-  replace.sync({
-    files: mainStyleFile,
-    from: importPreloaderStyles,
-    to: '',
-  });
-
-  // Rename admin.css
-  const enqueueFile = path.join('src', 'inc', 'fx-enqueue.php');
-  replace.sync({
-    files: enqueueFile,
-    from: 'admin.css',
-    to: 'admin.style.css',
-  });
-  logger.log('Renamed admin styles in enqueue');
-
-  // Remove normalize.css
-  const normalizeFile = path.join(
-    'src',
-    'assets',
-    'css',
-    'vendor',
-    'normalize.scss'
-  );
-  rimraf.sync(normalizeFile);
-  const styleFile = path.join('src', 'assets', 'css', 'style.scss');
-  const importLine = '@import \'vendor/normalize\';';
-  replace.sync({
-    files: styleFile,
-    from: importLine,
-    to: '',
-  });
-  logger.log('Removed normalize.css from project');
-
-  // Remove deployment.log
-  rimraf.sync('deployment.log');
-  logger.log('Removed deployment.log from project');
-
-  const packagesToRemove = unusedPackages.filter(p =>
-    Boolean(pck.dependencies[p] || pck.devDependencies[p])
-  );
-
-  if (packagesToRemove.length > 0) {
-    // Remove unused packages
-    logger.log('Removing unused packages...');
-
-    const spinner = ora();
-    spinner.prefixText = logger.prefix;
-    spinner.start();
-    await execAsync(`yarn remove ${packagesToRemove.join(' ')}`);
-
-    spinner.stop();
-    logger.log(
-      `Removed ${packagesToRemove.length} package${
-        packagesToRemove.length === 1 ? '' : 's'
-      }`
-    );
-  }
-
-  logger.success('Upgraded to wp-blank-scripts v0.4, you\'re good to go!');
-};