@plaudit/webpack-extensions 0.0.9

package/README.md

@@ -0,0 +1,13 @@
+# Development
+To test locally, either set up yarn to pull from this folder or (ideally) build and copy the resulting built files into another project for testing purposes.
+
+# To Deploy
+If you haven't
+```
+yarn global add genversion
+```
+
+To deploy
+```
+./publish.sh y
+```

package/build/wordpress-scripts-wrapper/AdditionalDependencyInjectorPlugin.d.ts

@@ -0,0 +1,6 @@
+import { type Compiler, type WebpackPluginInstance } from "webpack";
+export default class AdditionalDependencyInjectorPlugin implements WebpackPluginInstance {
+    private readonly filesWithAdditionalDependencies;
+    constructor(filesWithAdditionalDependencies?: Map<string, string[]>);
+    apply(compiler: Compiler): void;
+}

package/build/wordpress-scripts-wrapper/AdditionalDependencyInjectorPlugin.js

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const node_fs_1 = __importDefault(require("node:fs"));
+const node_path_1 = __importDefault(require("node:path"));
+const webpack_1 = require("webpack");
+const webpack_sources_1 = require("webpack-sources");
+class AdditionalDependencyInjectorPlugin {
+    filesWithAdditionalDependencies;
+    constructor(filesWithAdditionalDependencies = new Map()) {
+        this.filesWithAdditionalDependencies = filesWithAdditionalDependencies;
+    }
+    apply(compiler) {
+        compiler.hooks.thisCompilation.tap("AdditionalDependencyInjectorPlugin", compilation => {
+            compilation.hooks.processAssets.tap({
+                name: "AdditionalDependencyInjectorPlugin_ProcessAssets",
+                stage: webpack_1.Compilation.PROCESS_ASSETS_STAGE_ANALYSE
+            }, compilationAssets => {
+                const srcDir = process.env['WP_SRC_DIRECTORY'] || 'src';
+                const srcRoot = node_path_1.default.join(process.cwd(), srcDir);
+                Object.entries(compilationAssets).map(([name, asset]) => {
+                    if (name.endsWith(".asset.php") && asset instanceof webpack_sources_1.RawSource) {
+                        const extensionlessName = name.substring(0, name.length - 10);
+                        const additionalDependencies = [];
+                        const possibleExtensions = ['ts', 'tsx', 'js', 'jsx'];
+                        for (const possibleExtension of possibleExtensions) {
+                            const possibleFile = node_path_1.default.join(srcRoot, `${extensionlessName}.${possibleExtension}`);
+                            if (node_fs_1.default.existsSync(possibleFile)) {
+                                const firstLine = node_fs_1.default.readFileSync(possibleFile, 'utf8').trim().split(/\r?\n/)[0];
+                                if (firstLine.startsWith("//ADDITIONAL_DEPENDENCIES:")) {
+                                    additionalDependencies.push(...firstLine.substring(26).trim().split(','));
+                                }
+                                break;
+                            }
+                        }
+                        if (this.filesWithAdditionalDependencies.has(extensionlessName)) {
+                            additionalDependencies.push(...this.filesWithAdditionalDependencies.get(extensionlessName));
+                        }
+                        const seen = new Set();
+                        const additionalDeps = additionalDependencies.filter(dep => !seen.has(dep) && seen.add(dep)).sort().map(v => `'${v}'`).join(', ');
+                        if (additionalDeps) {
+                            compilation.updateAsset(name, new webpack_sources_1.RawSource(asset.source().replace(/('dependencies'\s+=>\s+(?:array\(|\[))(.*)([)\]], 'version')/g, (match, g1, g2, g3) => `${g1}${g2.length > 0 ? `${g2}, ${additionalDeps}` : additionalDeps}${g3}`)));
+                        }
+                    }
+                });
+            });
+        });
+    }
+}
+exports.default = AdditionalDependencyInjectorPlugin;

package/build/wordpress-scripts-wrapper/BlockJSONStyleRemappingPlugin.d.ts

@@ -0,0 +1,4 @@
+import type { Compiler, WebpackPluginInstance } from "webpack";
+export default class BlockJSONStyleRemappingPlugin implements WebpackPluginInstance {
+    apply(compiler: Compiler): void;
+}

package/build/wordpress-scripts-wrapper/BlockJSONStyleRemappingPlugin.js

@@ -0,0 +1,60 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const node_path_1 = __importDefault(require("node:path"));
+const webpack_sources_1 = require("webpack-sources");
+class BlockJSONStyleRemappingPlugin {
+    apply(compiler) {
+        compiler.hooks.compilation.tap("BlockJSONStyleRemappingPlugin", compilation => {
+            compilation.hooks.processAssets.tap("BlockJSONStyleRemappingPlugin_ProcessAssets", compilationAssets => {
+                const stats = compilation.getStats().toJson({
+                    hash: true,
+                    publicPath: true,
+                    assets: true,
+                    chunks: true,
+                    modules: true,
+                    source: true,
+                    errorDetails: false,
+                    timings: false
+                });
+                const toNumericChunkId = (chunk) => typeof chunk !== 'number' ? parseInt(chunk) : chunk;
+                const assetSourceFiles = new Map(stats.assets?.map(asset => [asset.name, asset.info?.sourceFilename])
+                    .filter((v) => v[0] !== undefined && v[1] !== undefined) ?? []);
+                const singleFileChunkToOutputName = new Map(stats.assets?.filter((asset) => asset.chunks?.length === 1)
+                    .map(asset => [toNumericChunkId(asset.chunks[0]), asset.name]) ?? []);
+                const singleFileInputToOutputName = new Map(stats.modules?.map(module => {
+                    if (module.nameForCondition !== undefined && module.chunks?.length === 1) {
+                        const output = singleFileChunkToOutputName.get(toNumericChunkId(module.chunks[0]));
+                        return output !== undefined ? [module.nameForCondition, output] : undefined;
+                    }
+                    return undefined;
+                }).filter((v) => v !== undefined) ?? []);
+                const styleKeys = ["editorStyle", "style", "viewStyle"];
+                Object.entries(compilationAssets).map(([name, asset]) => {
+                    if (name.endsWith("block.json") && asset instanceof webpack_sources_1.RawSource) {
+                        const dirname = node_path_1.default.dirname(assetSourceFiles.get(name) ?? name);
+                        const json = JSON.parse(asset.source());
+                        for (const styleKey of styleKeys) {
+                            if (styleKey in json) {
+                                const style = json[styleKey];
+                                if (typeof style === 'string' && style.startsWith('file:')) {
+                                    const styleInputPath = node_path_1.default.normalize(node_path_1.default.join(compiler.context, dirname, style.substring(5)));
+                                    const styleOutputPath = singleFileInputToOutputName.get(styleInputPath);
+                                    if (styleOutputPath !== undefined) {
+                                        const prefix = style.startsWith("./", 5) ? "./" : "";
+                                        const relativePath = node_path_1.default.relative(node_path_1.default.dirname(name), styleOutputPath);
+                                        json[styleKey] = `file:${prefix}${relativePath}`;
+                                    }
+                                }
+                            }
+                        }
+                        compilation.updateAsset(name, new webpack_sources_1.RawSource(JSON.stringify(json, undefined, "  ")));
+                    }
+                });
+            });
+        });
+    }
+}
+exports.default = BlockJSONStyleRemappingPlugin;

package/build/wordpress-scripts-wrapper/wordpressWebpackEntrypointWrapper.d.ts

@@ -0,0 +1,2 @@
+import type { Configuration } from "webpack";
+export default function (config: Configuration): typeof config;

package/build/wordpress-scripts-wrapper/wordpressWebpackEntrypointWrapper.js

@@ -0,0 +1,72 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const node_fs_1 = __importDefault(require("node:fs"));
+const node_path_1 = __importDefault(require("node:path"));
+const AdditionalDependencyInjectorPlugin_1 = __importDefault(require("./AdditionalDependencyInjectorPlugin"));
+const BlockJSONStyleRemappingPlugin_1 = __importDefault(require("./BlockJSONStyleRemappingPlugin"));
+const copy_webpack_plugin_1 = __importDefault(require("copy-webpack-plugin"));
+const fork_ts_checker_webpack_plugin_1 = __importDefault(require("fork-ts-checker-webpack-plugin"));
+const webpack_remove_empty_scripts_1 = __importDefault(require("webpack-remove-empty-scripts"));
+function addEntryPointWithFilter(entrypoints, entrypoint, mapper = (entrypoint) => entrypoint) {
+    if (Array.isArray(entrypoint)) {
+        entrypoints.push(...entrypoint.map(mapper));
+    }
+    else {
+        entrypoints.push(mapper(entrypoint));
+    }
+}
+function default_1(config) {
+    (config.plugins ?? (config.plugins = [])).push(new fork_ts_checker_webpack_plugin_1.default({
+        typescript: {
+            diagnosticOptions: {
+                semantic: true,
+                syntactic: true,
+            },
+        },
+    }), new webpack_remove_empty_scripts_1.default({ stage: webpack_remove_empty_scripts_1.default.STAGE_AFTER_PROCESS_PLUGINS }), new BlockJSONStyleRemappingPlugin_1.default(), new AdditionalDependencyInjectorPlugin_1.default(), new copy_webpack_plugin_1.default({ patterns: [{ from: '**/*.(twig|svg)', context: process.env['WP_SRC_DIRECTORY'] || 'src', noErrorOnMissing: true }] }));
+    const baseEntry = config.entry;
+    config.entry = () => {
+        const srcDir = process.env['WP_SRC_DIRECTORY'] || 'src';
+        const srcRoot = node_path_1.default.join(process.cwd(), srcDir);
+        const entrypoints = node_fs_1.default.readdirSync(srcRoot, 'utf8')
+            .map(dir => node_path_1.default.join(srcRoot, dir))
+            .filter(dir => node_fs_1.default.statSync(dir).isDirectory())
+            .flatMap(dir => {
+            const entrypoints = [];
+            try {
+                const blockJSON = JSON.parse(node_fs_1.default.readFileSync(node_path_1.default.join(dir, 'block.json'), 'utf8'));
+                for (const key of ["editorStyle", "style", "editorScript", "viewScript", "script"]) {
+                    if (key in blockJSON) {
+                        addEntryPointWithFilter(entrypoints, blockJSON[key], ep => ep.startsWith("file:") ? ep.substring(5) : ep);
+                    }
+                }
+            }
+            catch (e) {
+                try {
+                    const packageJSON = JSON.parse(node_fs_1.default.readFileSync(node_path_1.default.join(dir, 'package.json'), 'utf8'));
+                    addEntryPointWithFilter(entrypoints, packageJSON['main']);
+                    addEntryPointWithFilter(entrypoints, packageJSON['style']);
+                }
+                catch (e) {
+                    // This just means that the directory doesn't contain any declared entrypoints.
+                }
+            }
+            return entrypoints.length === 0 ? undefined : entrypoints.map(entrypoint => node_path_1.default.join(dir, entrypoint));
+        })
+            .filter((entrypoint) => typeof entrypoint === 'string' && node_fs_1.default.existsSync(entrypoint));
+        const convertEntrypointsToObject = () => entrypoints.reduce((entry, entrypoint) => {
+            const parsedEntrypoint = node_path_1.default.parse(entrypoint);
+            return {
+                ...entry,
+                [node_path_1.default.join(node_path_1.default.basename(parsedEntrypoint.dir), parsedEntrypoint.name)]: { import: entrypoint }
+            };
+        }, {});
+        const firstPassBaseEntries = typeof baseEntry === 'function' ? baseEntry() : baseEntry;
+        return firstPassBaseEntries instanceof Promise ? firstPassBaseEntries.then(convertEntrypointsToObject) : convertEntrypointsToObject();
+    };
+    return config;
+}
+exports.default = default_1;

package/build/wordpress-scripts-wrapper.d.ts

@@ -0,0 +1 @@
+export { default } from "./wordpress-scripts-wrapper/wordpressWebpackEntrypointWrapper";

package/build/wordpress-scripts-wrapper.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var wordpressWebpackEntrypointWrapper_1 = require("./wordpress-scripts-wrapper/wordpressWebpackEntrypointWrapper");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(wordpressWebpackEntrypointWrapper_1).default; } });

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@plaudit/webpack-extensions",
+  "version": "0.0.9",
+  "scripts": {
+    "prepublishOnly": "rm -rf build && mkdir build && tsc",
+    "build": "tsc",
+    "watch": "tsc -w"
+  },
+  "files": [
+    "/build"
+  ],
+  "exports": {
+    "./wordpress-scripts-wrapper": "./build/wordpress-scripts-wrapper.js"
+  },
+  "devDependencies": {
+    "@types/node": "^18.15.11",
+    "@types/webpack-sources": "^3.2.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "fork-ts-checker-webpack-plugin": "^8.0.0",
+    "typescript": "^5.0.4",
+    "webpack": "^5.79.0",
+    "webpack-remove-empty-scripts": "^1.0.3"
+  },
+  "dependencies": {
+  },
+  "peerDependencies": {
+    "@wordpress/dependency-extraction-webpack-plugin": "^4.13.0",
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "eslint-plugin-jsdoc": "^39.6.4",
+    "fork-ts-checker-webpack-plugin": "^8.0.0",
+    "webpack": "^5.79.0",
+    "webpack-remove-empty-scripts": "^1.0.3",
+    "webpack-sources": "^3.2.3"
+  },
+  "resolutions": {
+    "eslint-plugin-jsdoc": "^39.6.4",
+    "clean-webpack-plugin": "^4.0.0"
+  }
+}