@dream-encode/wp-js-plugin-utils 0.1.0

package/dist/webpack/createWebpackConfig.js

@@ -0,0 +1,210 @@
+"use strict";
+
+const webpack = require('webpack');
+const {
+  resolve
+} = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const RtlCssPlugin = require('rtlcss-webpack-plugin');
+const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
+const TerserPlugin = require('terser-webpack-plugin');
+const DependencyExtractionWebpackPlugin = require('@wordpress/dependency-extraction-webpack-plugin');
+const postcssPlugins = require('@wordpress/postcss-plugins-preset');
+const tryRequire = id => {
+  try {
+    return require(id);
+  } catch (e) {
+    return null;
+  }
+};
+
+/**
+ * Create a Webpack configuration for a WordPress plugin.
+ *
+ * @param  {Object}  options                       Configuration options.
+ * @param  {string}  options.context               Absolute path to the plugin root.
+ * @param  {Object}  options.entry                 Webpack entry map.
+ * @param  {string}  [options.outputPath]          Absolute path to the output directory.
+ * @param  {Object}  [options.alias]               Additional resolve aliases.
+ * @param  {Object}  [options.appVersion]          Plugin package.json (for APP_VERSION define).
+ * @param  {Object}  [options.define]              Additional DefinePlugin values.
+ * @param  {boolean} [options.sentry]              Enable Sentry webpack plugin.
+ * @param  {Object}  [options.sentryOptions]       Overrides for Sentry plugin options.
+ * @param  {Array}   [options.extraPlugins]        Additional webpack plugins.
+ * @param  {Array}   [options.extraRules]          Additional module rules.
+ * @param  {string}  [options.devtool]             Webpack devtool.
+ * @param  {Function}[options.modify]              Final mutation hook receiving the config.
+ * @return {Object}                                Webpack configuration array.
+ */
+const createWebpackConfig = (options = {}) => {
+  const {
+    context,
+    entry,
+    outputPath,
+    alias = {},
+    appVersion,
+    define = {},
+    sentry = false,
+    sentryOptions = {},
+    extraPlugins = [],
+    extraRules = [],
+    devtool = 'source-map',
+    modify
+  } = options;
+  if (!context) {
+    throw new Error('[wp-plugin-utils] createWebpackConfig: "context" (plugin root path) is required.');
+  }
+  if (!entry) {
+    throw new Error('[wp-plugin-utils] createWebpackConfig: "entry" is required.');
+  }
+  const isProduction = process.argv[process.argv.indexOf('--mode') + 1] === 'production';
+  const resolvedOutputPath = outputPath || resolve(context, 'admin/assets/dist/');
+  const definePluginValues = {
+    ...define
+  };
+  if (appVersion && appVersion.version) {
+    definePluginValues.APP_VERSION = JSON.stringify(appVersion.version);
+  }
+  const plugins = [new webpack.DefinePlugin(definePluginValues), new MiniCssExtractPlugin({
+    filename: 'css/[name].min.css',
+    chunkFilename: '[id].css',
+    ignoreOrder: false
+  }), new RtlCssPlugin({
+    filename: 'css/[name]-rtl.css'
+  }), new RemoveEmptyScriptsPlugin(), new DependencyExtractionWebpackPlugin()];
+  if (sentry) {
+    const sentryWebpackPlugin = tryRequire('@sentry/webpack-plugin');
+    if (sentryWebpackPlugin && sentryWebpackPlugin.sentryWebpackPlugin) {
+      plugins.push(sentryWebpackPlugin.sentryWebpackPlugin({
+        org: process.env.SENTRY_ORG,
+        project: process.env.SENTRY_PROJECT,
+        authToken: process.env.SENTRY_AUTH_TOKEN,
+        ...sentryOptions
+      }));
+    }
+  }
+  plugins.push(...extraPlugins);
+  const svgrAvailable = !!tryRequire('@svgr/webpack');
+  const urlLoaderAvailable = !!tryRequire('url-loader');
+  const rules = [{
+    test: /\.jsx?$/,
+    exclude: /node_modules/,
+    use: {
+      loader: 'babel-loader'
+    }
+  }, {
+    test: /\.(j|t)sx?$/,
+    exclude: [/node_modules/],
+    use: require.resolve('source-map-loader'),
+    enforce: 'pre'
+  }, {
+    test: /\.(css|scss)$/,
+    use: [{
+      loader: MiniCssExtractPlugin.loader
+    }, {
+      loader: require.resolve('css-loader'),
+      options: {
+        importLoaders: 1,
+        sourceMap: true,
+        modules: {
+          auto: true
+        }
+      }
+    }, {
+      loader: 'sass-loader',
+      options: {
+        implementation: require('sass'),
+        sourceMap: true
+      }
+    }, {
+      loader: require.resolve('postcss-loader'),
+      options: {
+        postcssOptions: {
+          ident: 'postcss',
+          sourceMap: !isProduction,
+          plugins: isProduction ? [...postcssPlugins, require('cssnano')({
+            preset: ['default', {
+              discardComments: {
+                removeAll: true
+              }
+            }]
+          })] : postcssPlugins
+        }
+      }
+    }]
+  }];
+  if (svgrAvailable) {
+    rules.push({
+      test: /\.svg$/,
+      issuer: /\.(j|t)sx?$/,
+      use: urlLoaderAvailable ? ['@svgr/webpack', 'url-loader'] : ['@svgr/webpack'],
+      type: 'javascript/auto'
+    });
+  }
+  rules.push({
+    test: /\.svg$/,
+    issuer: /\.(pc|sc|sa|c)ss$/,
+    type: 'asset/inline'
+  }, {
+    test: /\.(bmp|png|jpe?g|gif|webp)$/i,
+    type: 'asset/resource',
+    generator: {
+      filename: 'images/[name].[hash:8][ext]'
+    }
+  }, {
+    test: /\.(woff|woff2|eot|ttf|otf)$/i,
+    type: 'asset/resource',
+    generator: {
+      filename: 'fonts/[name].[hash:8][ext]'
+    }
+  });
+  rules.push(...extraRules);
+  const config = {
+    context,
+    entry,
+    output: {
+      filename: 'js/[name].min.js',
+      path: resolvedOutputPath,
+      clean: true
+    },
+    devtool,
+    resolve: {
+      extensions: ['.jsx', '.ts', '.tsx', '.js'],
+      alias: {
+        '@': resolve(context, 'admin/assets/src/js'),
+        ...alias
+      }
+    },
+    optimization: {
+      concatenateModules: isProduction,
+      minimizer: [new TerserPlugin({
+        parallel: true,
+        terserOptions: {
+          output: {
+            comments: /translators:/i
+          },
+          compress: {
+            passes: 2
+          },
+          mangle: {
+            reserved: ['__', '_n', '_nx', '_x']
+          },
+          sourceMap: true
+        },
+        extractComments: false
+      })]
+    },
+    module: {
+      rules
+    },
+    plugins
+  };
+  if (typeof modify === 'function') {
+    const modified = modify(config);
+    return Array.isArray(modified) ? modified : [modified || config];
+  }
+  return [config];
+};
+module.exports = createWebpackConfig;
+module.exports.createWebpackConfig = createWebpackConfig;
+module.exports.default = createWebpackConfig;

package/dist/webpack/postcss.config.js

@@ -0,0 +1,6 @@
+"use strict";
+
+const postcssPlugins = require('@wordpress/postcss-plugins-preset');
+module.exports = {
+  plugins: postcssPlugins
+};

package/package.json

@@ -0,0 +1,165 @@
+{
+  "name": "@dream-encode/wp-js-plugin-utils",
+  "version": "0.1.0",
+  "description": "Common JS functionality used by custom WP plugins.",
+  "keywords": [
+    "wordpress",
+    "utilities",
+    "settings"
+  ],
+  "homepage": "https://github.com/dream-encode/wp-js-plugin-utils#readme",
+  "bugs": {
+    "url": "https://github.com/dream-encode/wp-js-plugin-utils/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dream-encode/wp-js-plugin-utils.git"
+  },
+  "license": "GPL-2.0-or-later",
+  "author": "David B",
+  "type": "commonjs",
+  "exports": {
+    ".": "./dist/index.js",
+    "./webpack": "./dist/webpack/createWebpackConfig.js",
+    "./postcss": "./dist/webpack/postcss.config.js",
+    "./settings": "./dist/settings/index.js",
+    "./settings/styles": "./dist/settings/styles/_settings-page.scss",
+    "./data-migrations": "./dist/data-migrations/index.js",
+    "./components": "./dist/components/index.js",
+    "./hooks": "./dist/hooks/index.js",
+    "./api": "./dist/api/index.js",
+    "./utils": "./dist/utils/index.js",
+    "./constants": "./dist/utils/constants.js"
+  },
+  "main": "./dist/index.js",
+  "files": [
+    "dist/"
+  ],
+  "scripts": {
+    "build": "babel src --out-dir dist --extensions \".js,.jsx\" --copy-files --no-copy-ignored",
+    "clean": "rimraf dist",
+    "prepublishOnly": "yarn clean && yarn build"
+  },
+  "dependencies": {
+    "anymatch": "^3.1.3",
+    "babel-plugin-polyfill-corejs2": "^0.4.17",
+    "babel-plugin-polyfill-corejs3": "^0.14.2",
+    "babel-plugin-polyfill-regenerator": "^0.6.8",
+    "balanced-match": "^1.0.2",
+    "baseline-browser-mapping": "^2.10.23",
+    "binary-extensions": "^2.3.0",
+    "brace-expansion": "^1.1.14",
+    "braces": "^3.0.3",
+    "browserslist": "^4.28.2",
+    "caniuse-lite": "^1.0.30001791",
+    "chokidar": "^3.6.0",
+    "commander": "^6.2.1",
+    "concat-map": "^0.0.1",
+    "convert-source-map": "^2.0.0",
+    "core-js-compat": "^3.49.0",
+    "debug": "^4.4.3",
+    "electron-to-chromium": "^1.5.344",
+    "es-errors": "^1.3.0",
+    "escalade": "^3.2.0",
+    "esutils": "^2.0.3",
+    "fill-range": "^7.1.1",
+    "fs-readdir-recursive": "^1.1.0",
+    "fs.realpath": "^1.0.0",
+    "function-bind": "^1.1.2",
+    "gensync": "^1.0.0-beta.2",
+    "glob": "^13.0.6",
+    "glob-parent": "^5.1.2",
+    "hasown": "^2.0.3",
+    "inflight": "^1.0.6",
+    "inherits": "^2.0.4",
+    "is-binary-path": "^2.1.0",
+    "is-core-module": "^2.16.1",
+    "is-extglob": "^2.1.1",
+    "is-glob": "^4.0.3",
+    "is-number": "^7.0.0",
+    "js-tokens": "^4.0.0",
+    "jsesc": "^3.1.0",
+    "json5": "^2.2.3",
+    "lodash.debounce": "^4.0.8",
+    "lru-cache": "^5.1.1",
+    "make-dir": "^2.1.0",
+    "minimatch": "^10.2.5",
+    "minipass": "^7.1.3",
+    "ms": "^2.1.3",
+    "node-releases": "^2.0.38",
+    "normalize-path": "^3.0.0",
+    "once": "^1.4.0",
+    "package-json-from-dist": "^1.0.1",
+    "path-is-absolute": "^1.0.1",
+    "path-parse": "^1.0.7",
+    "path-scurry": "^2.0.2",
+    "picocolors": "^1.1.1",
+    "picomatch": "^2.3.2",
+    "pify": "^4.0.1",
+    "readdirp": "^3.6.0",
+    "regenerate": "^1.4.2",
+    "regenerate-unicode-properties": "^10.2.2",
+    "regexpu-core": "^6.4.0",
+    "regjsgen": "^0.8.0",
+    "regjsparser": "^0.13.1",
+    "resolve": "^1.22.12",
+    "semver": "^6.3.1",
+    "slash": "^2.0.0",
+    "supports-preserve-symlinks-flag": "^1.0.0",
+    "to-regex-range": "^5.0.1",
+    "unicode-canonical-property-names-ecmascript": "^2.0.1",
+    "unicode-match-property-ecmascript": "^2.0.0",
+    "unicode-match-property-value-ecmascript": "^2.2.1",
+    "unicode-property-aliases-ecmascript": "^2.2.0",
+    "update-browserslist-db": "^1.2.3",
+    "wrappy": "^1.0.2",
+    "yallist": "^3.1.1"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.28.6",
+    "@babel/core": "^7.29.0",
+    "@babel/preset-env": "^7.29.2",
+    "@babel/preset-react": "^7.28.5",
+    "rimraf": "^6.1.3"
+  },
+  "peerDependencies": {
+    "@sentry/webpack-plugin": "^3.0.0",
+    "@svgr/webpack": "^8.0.0",
+    "@wordpress/api-fetch": "^7.0.0",
+    "@wordpress/components": "^28.0.0",
+    "@wordpress/data": "^10.0.0",
+    "@wordpress/dependency-extraction-webpack-plugin": "^6.0.0",
+    "@wordpress/dom-ready": "^4.0.0",
+    "@wordpress/element": "^6.0.0",
+    "@wordpress/i18n": "^5.0.0",
+    "@wordpress/notices": "^5.0.0",
+    "@wordpress/postcss-plugins-preset": "^5.0.0",
+    "@wordpress/url": "^4.0.0",
+    "babel-loader": "^9.0.0",
+    "css-loader": "^7.0.0",
+    "cssnano": "^7.0.0",
+    "mini-css-extract-plugin": "^2.0.0",
+    "postcss": "^8.0.0",
+    "postcss-loader": "^8.0.0",
+    "react": "^18.0.0",
+    "rtlcss-webpack-plugin": "^4.0.0",
+    "sass": "^1.0.0",
+    "sass-loader": "^16.0.0",
+    "source-map-loader": "^5.0.0",
+    "terser-webpack-plugin": "^5.0.0",
+    "url-loader": "^4.0.0",
+    "webpack": "^5.0.0",
+    "webpack-remove-empty-scripts": "^1.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@sentry/webpack-plugin": {
+      "optional": true
+    },
+    "@svgr/webpack": {
+      "optional": true
+    },
+    "url-loader": {
+      "optional": true
+    }
+  }
+}