Update eslint config to newest format.

Author: sheabunge

.eslintrc.js

@@ -8,8 +8,8 @@ locally, and be comfortable running commands from a terminal or command line int
 The following tools will need to be installed.
 
 - [Composer](https://getcomposer.org/download/) v2 or later.
-- [Node.js](https://nodejs.org/en/download/) v14.15 or later with
-[npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) v7 or later.
+- [Node.js](https://nodejs.org/en/download/) v20.16.0 or later with
+  [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) v10 or later.
 
 Once Node.js and npm are installed, run the following command from inside the plugin directory to install the required
 node packages:
@@ -20,11 +20,6 @@ Additionally, run the following command to install the required Composer package
 
     composer install
 
-You will also need a system-level copy of [gulp](https://gulpjs.com/docs/en/getting-started/quick-start) in order to
-run the build scripts:
-
-    npm install --global gulp-cli
-
 ## Building the plugin
 
 Code Snippets is primarily written in PHP, which does not require any post-processing and should work out-of-the-box,
@@ -34,30 +29,25 @@ plugin can be loaded into WordPress.
 
 In order to get things built from the source files, the following command can be used:
 
-    gulp
+    npm run build
 
-This will run the default `build` gulp task, which:
+This will run the basic Webpack configuration, which will:
 
 1. Copies required vendor files from the `node_modules/` directory, such as CodeMirror and PrismJS theme files.
-2. Transforms the SCSS source files into browser-ready minified CSS code, including right-to-left files where appropriate.
+2. Transforms the SCSS source files into browser-ready minified CSS code, including right-to-left files where
+   appropriate.
 3. Transforms the TypeScript source files into browser-ready minified JavaScript code, after checking with a linter.
 
 The generated files will be located together under the `dist/` directory, where they are loaded from by WordPress.
 
-This task can also be run with `gulp build`. More information on the specific tasks available, such as only performing
-a single step out of those listed above, can be found by inspecting [`gulpfile.babel.ts`](gulpfile.babel.ts) or running
-the following command:
-
-    gulp --tasks
-
 ## Building while developing
 
 If you are actively editing the included TypeScript or SCSS sources and wish to see your changes reflected more quickly
 than running the entire build script, there is an alternative command available that will monitor the source files
-for changes and run only the necessary tasks when changes are detected. This can be begun by running the following 
+for changes and run only the necessary tasks when changes are detected. This can be begun by running the following
 command:
 
-    gulp watch
+    npm run watch
 
 ## Preparing for release
 
@@ -68,7 +58,7 @@ In order to simplify things and reduce the file size of the distributed plugin p
 generating these distribution files separately from the plugin source. Running the following command will commence this
 process:
 
-    gulp bundle
+    npm run bundle
 
 This command will regenerate all processed files and copy those to be distributed to the `bundle/` directory, where they
 can be copied directly into a Subversion repository or similar for distribution.

.npmrc

@@ -45,20 +45,20 @@ export const cssWebpackConfig: Configuration = {
 				use: [
 					MiniCssExtractPlugin.loader,
 					{
-						loader: "css-loader",
+						loader: 'css-loader',
 						options: {
 							sourceMap: true,
 							importLoaders: 2
 						}
 					},
 					{
-						loader: "postcss-loader",
+						loader: 'postcss-loader',
 						options: {
 							postcssOptions
 						}
 					},
 					{
-						loader: "sass-loader",
+						loader: 'sass-loader',
 						options: {
 							implementation: libsass,
 							sourceMap: true
@@ -71,14 +71,14 @@ export const cssWebpackConfig: Configuration = {
 				use: [
 					MiniCssExtractPlugin.loader,
 					{
-						loader: "css-loader",
+						loader: 'css-loader',
 						options: {
 							sourceMap: false,
 							importLoaders: 1
 						}
 					},
 					{
-						loader: "postcss-loader",
+						loader: 'postcss-loader',
 						options: {
 							postcssOptions: {
 								plugins: [cssnano()]
@@ -93,15 +93,15 @@ export const cssWebpackConfig: Configuration = {
 		new RemoveEmptyScriptsPlugin(),
 		new MiniCssExtractPlugin({
 			filename: ({ chunk }) =>
-				chunk ?
+				chunk?.name ?
 					`${chunk.name}.css`
 						.replace(/^codemirror-theme-/, 'editor-themes/')
 						.replace(/-style\.css$/, '.css') :
 					'[name].css'
 		}),
 		new WebpackRTLPlugin({
-			test: /^(edit|manage)\.css$/,
-			filename: [/(\.css)/i, '-rtl$1']
+			test: /^(?<filename>edit|manage)\.css$/,
+			filename: [/(?<ext>\.css)/i, '-rtl$1']
 		})
 	]
 }

CONTRIBUTING.md

@@ -1,27 +1,36 @@
-import path from 'path'
 import { DefinePlugin, Configuration } from 'webpack'
+import { join, resolve } from 'path'
 import ESLintPlugin from 'eslint-webpack-plugin'
 import RemoveEmptyScriptsPlugin from 'webpack-remove-empty-scripts'
+import { toCamelCase } from '../js/utils/text'
+import { dependencies } from '../package.json'
 
 const SOURCE_DIR = './js'
 
+const babelConfig = {
+	presets: [
+		'@babel/preset-env',
+		'@wordpress/babel-preset-default'
+	],
+	plugins: [
+		['prismjs', {
+			languages: ['php', 'php-extras'],
+			plugins: ['line-highlight', 'line-numbers']
+		}]
+	]
+}
+
 export const jsWebpackConfig: Configuration = {
 	entry: {
-		manage: `${SOURCE_DIR}/manage/index.ts`,
-		edit: {
-			import: `${SOURCE_DIR}/Edit/index.tsx`,
-			dependOn: 'editor'
-		},
-		settings: {
-			import: `${SOURCE_DIR}/settings/index.ts`,
-			dependOn: 'editor'
-		},
+		edit: { import: `${SOURCE_DIR}/edit.tsx`, dependOn: 'editor' },
+		editor: `${SOURCE_DIR}/editor.ts`,
+		manage: `${SOURCE_DIR}/manage.ts`,
 		mce: `${SOURCE_DIR}/mce.ts`,
 		prism: `${SOURCE_DIR}/prism.ts`,
-		editor: `${SOURCE_DIR}/editor.ts`
+		settings: { import: `${SOURCE_DIR}/settings.ts`, dependOn: 'editor' }
 	},
 	output: {
-		path: path.join(path.resolve(__dirname), '..', 'dist'),
+		path: join(resolve(__dirname), '..', 'dist'),
 		filename: '[name].js',
 		clean: true
 	},
@@ -33,19 +42,17 @@ export const jsWebpackConfig: Configuration = {
 		'tinymce': 'tinymce',
 		'codemirror': ['wp', 'CodeMirror'],
 		...Object.fromEntries(
-			['api-fetch', 'block-editor', 'blocks', 'components', 'data', 'i18n', 'server-side-render']
-				.map(p => [
-					`@wordpress/${p}`,
-					['wp', p.replace(/-(?<letter>[a-z])/g, (_, letter) => letter.toUpperCase())]
+			Object.keys(dependencies)
+				.filter(name => name.startsWith('@wordpress/'))
+				.map(packageName => [
+					packageName,
+					['wp', toCamelCase(packageName.replace('@wordpress/', ''))]
 				])
 		)
 	},
 	resolve: {
-		modules: [path.resolve(__dirname, '..', 'node_modules')],
-		extensions: ['.ts', '.tsx', '.js', '.json'],
-		alias: {
-			'php-parser': path.resolve(__dirname, '../node_modules/php-parser/src/index.js')
-		}
+		modules: [resolve(__dirname, '..', 'node_modules')],
+		extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
 	},
 	module: {
 		rules: [
@@ -54,18 +61,7 @@ export const jsWebpackConfig: Configuration = {
 				exclude: /node_modules/,
 				use: {
 					loader: 'babel-loader',
-					options: {
-						presets: [
-							'@babel/preset-env',
-							'@wordpress/babel-preset-default'
-						],
-						plugins: [
-							['prismjs', {
-								languages: ['php', 'php-extras'],
-								plugins: ['line-highlight', 'line-numbers']
-							}]
-						]
-					}
+					options: babelConfig
 				}
 			}
 		]