@atomicsmash/compiler 0.5.1 → 0.6.0

package/dist/BlocksLoader.d.ts

@@ -0,0 +1,4 @@
+import type { LoaderContext } from "webpack";
+export declare function loader(this: LoaderContext<Record<string, never>>): Promise<void>;
+export default loader;
+//# sourceMappingURL=BlocksLoader.d.ts.map

package/dist/BlocksLoader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlocksLoader.d.ts","sourceRoot":"","sources":["../src/BlocksLoader.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAG7C,wBAAsB,MAAM,CAC3B,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,iBAc1C;AAED,eAAe,MAAM,CAAC"}

package/dist/BlocksLoader.js

@@ -0,0 +1,14 @@
+import { tsImport } from "tsx/esm/api";
+export async function loader(
+// inputSourceMap?: Record<string, unknown>,
+) {
+    const callback = this.async();
+    const blockJson = await tsImport(this.resourcePath, {
+        parentURL: import.meta.url,
+        onImport: (file) => {
+            this.addDependency(file.slice(7));
+        },
+    }).then((module) => module.blockJson);
+    callback(null, JSON.stringify(blockJson));
+}
+export default loader;

package/dist/BlocksPlugin.d.ts

@@ -0,0 +1,8 @@
+import type { Compiler, WebpackPluginInstance } from "webpack";
+export declare class BlocksPlugin implements WebpackPluginInstance {
+    pluginName: string;
+    srcFolder: string;
+    constructor(srcFolder: string);
+    apply(compiler: Compiler): void;
+}
+//# sourceMappingURL=BlocksPlugin.d.ts.map

package/dist/BlocksPlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlocksPlugin.d.ts","sourceRoot":"","sources":["../src/BlocksPlugin.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAS/D,qBAAa,YAAa,YAAW,qBAAqB;IACzD,UAAU,SAAkB;IAC5B,SAAS,EAAE,MAAM,CAAC;gBAEN,SAAS,EAAE,MAAM;IAI7B,KAAK,CAAC,QAAQ,EAAE,QAAQ;CA4JxB"}

package/dist/BlocksPlugin.js

@@ -0,0 +1,102 @@
+import { readFile, writeFile, unlink as deleteFile } from "node:fs/promises";
+import { extname, resolve, relative, sep as pathSeparator } from "node:path";
+import glob from "fast-glob";
+import json2php from "json2php";
+import { getBlockJsonScriptFields, getBlockJsonStyleFields } from "./utils.js";
+const printer = json2php.make({ linebreak: "\n", indent: "\t" });
+export class BlocksPlugin {
+    pluginName = "BlocksPlugin";
+    srcFolder;
+    constructor(srcFolder) {
+        this.srcFolder = srcFolder;
+    }
+    apply(compiler) {
+        const { webpack: { Compilation, sources }, } = compiler;
+        compiler.hooks.thisCompilation.tap(this.pluginName, (compilation) => {
+            compilation.hooks.processAssets.tapPromise({
+                name: "CustomBlocksCSSHandler",
+                stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
+            }, async (assets) => {
+                const blockJsonFiles = Object.keys(assets).filter((asset) => asset.endsWith("block.json"));
+                const PHPFiles = await glob([
+                    ...blockJsonFiles.map((blockJsonPath) => {
+                        return `${resolve(`${this.srcFolder}${pathSeparator}${blockJsonPath}`, "..", `**${pathSeparator}*.php`)}`;
+                    }),
+                ]);
+                await Promise.all(PHPFiles.map(async (file) => {
+                    return readFile(file, "utf-8").then((data) => {
+                        compilation.emitAsset(relative(this.srcFolder, file), new sources.RawSource(data), {
+                            sourceFilename: file,
+                        });
+                    });
+                }));
+            });
+        });
+        compiler.hooks.afterEmit.tapPromise(this.pluginName, async (compilation) => {
+            const blockJsonFiles = Object.keys(compilation.assets).filter((asset) => asset.endsWith("block.json"));
+            const blocksManifest = {};
+            const wordpressAssetsFilePath = `${compilation.outputOptions.path}${pathSeparator}wordpress-assets-info.json`;
+            const wordpressAssets = await readFile(wordpressAssetsFilePath, "utf-8").then((data) => {
+                return JSON.parse(data);
+            });
+            for (const blockJsonFile of blockJsonFiles) {
+                await readFile(`${compilation.outputOptions.path}${pathSeparator}${blockJsonFile}`, "utf-8")
+                    .then((data) => {
+                    return JSON.parse(data);
+                })
+                    .then(async (json) => {
+                    const blockName = blockJsonFile.replace(`${pathSeparator}block.json`, "");
+                    for (const fields of [
+                        getBlockJsonScriptFields(json),
+                        getBlockJsonStyleFields(json),
+                    ]) {
+                        if (fields === null) {
+                            continue;
+                        }
+                        for (const [fieldName, value] of Object.entries(fields)) {
+                            const values = [value].flat(1);
+                            const newValues = [];
+                            for (const srcFilePath of values) {
+                                if (!srcFilePath.startsWith("file:")) {
+                                    newValues.push(srcFilePath);
+                                    continue;
+                                }
+                                const fileName = srcFilePath
+                                    .replace("file:./", "")
+                                    .replace(extname(srcFilePath), "");
+                                const hashedAsset = Object.keys(compilation.assets).find((asset) => {
+                                    return (asset.startsWith(`${blockName}${pathSeparator}${fileName}`) && !asset.endsWith(".php"));
+                                });
+                                if (hashedAsset) {
+                                    if (hashedAsset in wordpressAssets) {
+                                        await writeFile(`${compilation.outputOptions.path}${pathSeparator}${hashedAsset.replace(extname(hashedAsset), ".asset.php")}`, `<?php return ${printer(wordpressAssets[hashedAsset])};\n`, "utf-8");
+                                    }
+                                    newValues.push(`file:./${hashedAsset.replace(`${blockName}${pathSeparator}`, "")}`);
+                                }
+                                else {
+                                    newValues.push(srcFilePath);
+                                }
+                            }
+                            json[fieldName] = newValues;
+                        }
+                    }
+                    return {
+                        blockName,
+                        newBlockJson: json,
+                    };
+                })
+                    .then(async ({ blockName, newBlockJson }) => {
+                    await writeFile(`${compilation.outputOptions.path}${pathSeparator}${blockJsonFile}`, JSON.stringify(newBlockJson, undefined, 2), "utf-8");
+                    blocksManifest[blockName] = newBlockJson;
+                });
+            }
+            const phpContent = `<?php
+// This file is generated. Do not modify it manually.
+return ${printer(blocksManifest)};
+`;
+            await writeFile(`${compilation.outputOptions.path}${pathSeparator}blocks${pathSeparator}blocks-manifest.php`, phpContent);
+            await writeFile(`${compilation.outputOptions.path}${pathSeparator}wordpress-assets-info.php`, `<?php return ${json2php(wordpressAssets)};\n`);
+            await deleteFile(wordpressAssetsFilePath);
+        });
+    }
+}

package/dist/getBlocksAssetsEntryPoints.d.ts

@@ -0,0 +1,6 @@
+import type { EntryObject } from "webpack";
+export declare function getBlocksAssetsEntryPoints(paths: string[], entryPoints: EntryObject, srcFolder: string): Promise<{
+    restOfPaths: string[];
+    entryPoints: EntryObject;
+}>;
+//# sourceMappingURL=getBlocksAssetsEntryPoints.d.ts.map

package/dist/getBlocksAssetsEntryPoints.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getBlocksAssetsEntryPoints.d.ts","sourceRoot":"","sources":["../src/getBlocksAssetsEntryPoints.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAK3C,wBAAsB,0BAA0B,CAC/C,KAAK,EAAE,MAAM,EAAE,EACf,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,MAAM;;;GAkDjB"}

package/dist/getBlocksAssetsEntryPoints.js

@@ -0,0 +1,50 @@
+import { relative, resolve, extname } from "node:path";
+import { tsImport } from "tsx/esm/api";
+import { getBlockJsonStyleFields, getBlockJsonScriptFields } from "./utils.js";
+export async function getBlocksAssetsEntryPoints(paths, entryPoints, srcFolder) {
+    const restOfPaths = [];
+    for (const path of paths) {
+        if (!path.endsWith("block.json.ts")) {
+            restOfPaths.push(path);
+            continue;
+        }
+        const blockJson = await tsImport(path, import.meta.url).then((module) => module.blockJson);
+        const fields = {
+            ...getBlockJsonScriptFields(blockJson),
+            ...getBlockJsonStyleFields(blockJson),
+        };
+        if (fields) {
+            for (const value of Object.values(fields).flat()) {
+                if (!value.startsWith("file:")) {
+                    continue;
+                }
+                const fileLocation = resolve(path, "../", value.slice(5));
+                const entryName = relative(srcFolder, fileLocation);
+                const type = extname(fileLocation);
+                let fileName = entryName;
+                switch (type) {
+                    case ".ts":
+                        fileName = fileName.replace(".ts", ".[contenthash].js");
+                        break;
+                    case ".tsx":
+                        fileName = fileName.replace(".tsx", ".[contenthash].js");
+                        break;
+                    case ".js":
+                        fileName = fileName.replace(".js", ".[contenthash].js");
+                        break;
+                    case ".css":
+                        fileName = fileName.replace(".css", ".[contenthash].css");
+                        break;
+                    case ".scss":
+                        fileName = fileName.replace(".scss", ".[contenthash].css");
+                        break;
+                }
+                entryPoints[entryName] = {
+                    import: resolve(path, "../", value.slice(5)),
+                    filename: fileName,
+                };
+            }
+        }
+    }
+    return { restOfPaths, entryPoints };
+}

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAuBA,OAAO,CAAC,MAAM,CAAC;IAEd,UAAU,MAAM,CAAC;QAEhB,UAAU,UAAU;YACnB,QAAQ,EAAE,YAAY,GAAG,aAAa,GAAG,MAAM,GAAG,SAAS,CAAC;SAC5D;KACD;CACD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAyBA,OAAO,CAAC,MAAM,CAAC;IAEd,UAAU,MAAM,CAAC;QAEhB,UAAU,UAAU;YACnB,QAAQ,EAAE,YAAY,GAAG,aAAa,GAAG,MAAM,GAAG,SAAS,CAAC;SAC5D;KACD;CACD"}

package/dist/index.js

@@ -14,6 +14,8 @@ import WebpackAssetsManifest from "webpack-assets-manifest";
 import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";
 import yargs from "yargs";
 import { hideBin } from "yargs/helpers";
+import { BlocksPlugin } from "./BlocksPlugin.js";
+import { getBlocksAssetsEntryPoints } from "./getBlocksAssetsEntryPoints.js";
 const argv = await yargs(hideBin(process.argv))
     .options({
     in: {
@@ -36,6 +38,16 @@ const argv = await yargs(hideBin(process.argv))
         default: false,
         describe: "See a report of the generated bundle once built.",
     },
+    experimentalBlocksSupport: {
+        boolean: true,
+        default: false,
+        describe: "Enable experimental support for WordPress blocks compilation.",
+    },
+    excludeBlocks: {
+        array: true,
+        default: ["__TEMPLATE__"],
+        describe: "A comma separated list of the folder names of blocks to exclude from compilation. Requires experimental blocks support.",
+    },
 })
     .showHelpOnFail(false, "Specify --help for available options")
     .parse();
@@ -91,16 +103,25 @@ const compiler = webpack({
     // Set the environment mode from NODE_ENV.
     mode: MODE,
     entry: await glob([
+        ...(argv.experimentalBlocksSupport
+            ? [`${srcFolder}/blocks/**/block.json.ts`]
+            : []),
         // Parse all direct children of the JS folder, as long as they are JS & TS files
         `${srcFolder}/js/*.{js,ts,jsx,tsx}`,
         // Parse all direct children of the CSS folder, as long as they are CSS files
         `${srcFolder}/css/*.css`,
         // Parse all nested children of the CSS folder, as long as they are non-partial SCSS files
         `${srcFolder}/css/**/[^_]*.s[ac]ss`,
-    ]).then((paths) => {
-        const entryPoints = {};
-        paths.forEach((path) => {
-            const entryName = path.replace(srcFolder, "").replace(extname(path), "");
+    ], {
+        ignore: argv.experimentalBlocksSupport
+            ? argv.excludeBlocks.map((blockName) => `${srcFolder}/blocks/**/${blockName}/block.json.ts`)
+            : [],
+    }).then(async (paths) => {
+        const { restOfPaths, entryPoints } = argv.experimentalBlocksSupport
+            ? await getBlocksAssetsEntryPoints(paths, {}, srcFolder)
+            : { restOfPaths: paths, entryPoints: {} };
+        restOfPaths.forEach((path) => {
+            const entryName = path.replace(srcFolder, "");
             entryPoints[entryName] = {
                 import: path,
                 // Output filenames with content hash for fingerprinting
@@ -123,7 +144,11 @@ const compiler = webpack({
     },
     resolve: {
         // support TSConfig paths as aliases
-        plugins: [new TsconfigPathsPlugin()],
+        plugins: [
+            new TsconfigPathsPlugin({
+                configFile: process.cwd() + "/tsconfig.json",
+            }),
+        ],
         // resolve TS extensions
         extensions: [".tsx", ".ts", ".js", ".jsx"],
     },
@@ -139,16 +164,35 @@ const compiler = webpack({
                     options: {
                         // Set target to match the browserslist config
                         target: browserslistToEsbuild(),
+                        tsconfig: process.cwd() + "/tsconfig.json",
                     },
                 },
-                // Exclude node_modules files from transpilation unless they are vue files and the vue-loader is present
                 exclude: (file) => {
+                    // Exclude all block.json.ts files (handled by a separate loader).
+                    if (argv.experimentalBlocksSupport && file.includes("block.json")) {
+                        return true;
+                    }
+                    // Exclude node_modules files from transpilation unless they are vue files and the vue-loader is present
                     if (vueConfig.loader.length > 0) {
                         return file.includes("node_modules") && !file.includes(".vue.js");
                     }
                     return file.includes("node_modules");
                 },
             },
+            ...(argv.experimentalBlocksSupport
+                ? [
+                    {
+                        test: /block\.json\.ts$/,
+                        type: "asset/resource",
+                        generator: {
+                            filename: (pathData) => relative(srcFolder, pathData.filename ?? "").slice(0, -3),
+                        },
+                        use: {
+                            loader: resolvePath(import.meta.dirname, "./BlocksLoader.js"),
+                        },
+                    },
+                ]
+                : []),
             // Transpile SCSS files and run the result through postcss
             {
                 test: /\.s[ac]ss$/i,
@@ -156,7 +200,7 @@ const compiler = webpack({
                 type: "asset/resource",
                 generator: {
                     binary: false,
-                    filename: "css/[name].[contenthash].css",
+                    filename: (pathData) => relative(srcFolder, pathData.filename ?? "").replace(".scss", ".[contenthash].css"),
                 },
                 use: [
                     {
@@ -183,7 +227,7 @@ const compiler = webpack({
                 type: "asset/resource",
                 generator: {
                     binary: false,
-                    filename: "css/[name].[contenthash].css",
+                    filename: (pathData) => relative(srcFolder, pathData.filename ?? "").replace(".css", ".[contenthash].css"),
                 },
                 use: [
                     {
@@ -207,16 +251,20 @@ const compiler = webpack({
             writeToDisk: true,
             output: `${distFolder}/assets-manifest.json`,
             customize(entry) {
+                if (entry.key === "assets.php" ||
+                    entry.key === "wordpress-assets-info.php" ||
+                    entry.key.startsWith("fonts") ||
+                    entry.key.startsWith("images")) {
+                    return false;
+                }
                 if (entry.key === "spritemap.svg") {
                     return { key: "icons/sprite.svg", value: entry.value };
                 }
                 if (entry.key.startsWith("/")) {
-                    return { key: entry.key.slice(1), value: entry.value };
+                    entry.key = entry.key.slice(1);
                 }
-                if (entry.key === "assets.php" ||
-                    entry.key.startsWith("fonts") ||
-                    entry.key.startsWith("images")) {
-                    return false;
+                if (entry.key.endsWith(".js.js")) {
+                    entry.key = entry.key.slice(0, -3);
                 }
                 return entry;
             },
@@ -259,9 +307,20 @@ const compiler = webpack({
         // Extract wordpress dependencies from js files and output a wordpress assets file for enqueues
         new DependencyExtractionWebpackPlugin({
             combineAssets: true,
+            // Blocks plugin converts this to php, but it must be output as json here.
+            ...(argv.experimentalBlocksSupport
+                ? {
+                    outputFormat: "json",
+                    combinedOutputFile: "wordpress-assets-info.json",
+                }
+                : {
+                    outputFormat: "php",
+                    combinedOutputFile: "wordpress-assets-info.php",
+                }),
         }),
         // Support Vue files if vue-loader is present
         ...vueConfig.plugin,
+        ...(argv.experimentalBlocksSupport ? [new BlocksPlugin(srcFolder)] : []),
     ],
     optimization: {
         minimizer: [

package/dist/utils.d.ts

@@ -0,0 +1,5 @@
+import type { BlockMetaData } from "@atomicsmash/blocks-helpers";
+export type BlockJson = BlockMetaData<never, never>;
+export declare function getBlockJsonScriptFields(blockJson: BlockJson): Partial<Pick<BlockJson, "viewScript" | "script" | "editorScript">> | null;
+export declare function getBlockJsonStyleFields(blockJson: BlockJson): Partial<Pick<BlockJson, "editorStyle" | "style" | "viewStyle">> | null;
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAEjE,MAAM,MAAM,SAAS,GAAG,aAAa,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;AAEpD,wBAAgB,wBAAwB,CAAC,SAAS,EAAE,SAAS,6EAW5D;AAED,wBAAgB,uBAAuB,CAAC,SAAS,EAAE,SAAS,0EAW3D"}

package/dist/utils.js

@@ -0,0 +1,22 @@
+export function getBlockJsonScriptFields(blockJson) {
+    const scriptFields = ["viewScript", "script", "editorScript"];
+    let result = null;
+    for (const field of scriptFields) {
+        if (Object.hasOwn(blockJson, field)) {
+            result ??= {};
+            result[field] = blockJson[field];
+        }
+    }
+    return result;
+}
+export function getBlockJsonStyleFields(blockJson) {
+    const styleFields = ["viewStyle", "style", "editorStyle"];
+    let result = null;
+    for (const field of styleFields) {
+        if (Object.hasOwn(blockJson, field)) {
+            result ??= {};
+            result[field] = blockJson[field];
+        }
+    }
+    return result;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@atomicsmash/compiler",
 	"type": "module",
-	"version": "0.5.1",
+	"version": "0.6.0",
 	"description": "A universal compiler for all Atomic Smash projects.",
 	"keywords": [
 		"cli",
@@ -51,14 +51,16 @@
 		"cssnano": "^7.0.6",
 		"esbuild-loader": "^4.3.0",
 		"fast-glob": "^3.3.2",
+		"json2php": "^0.0.12",
 		"postcss": "^8.4.49",
 		"postcss-loader": "^8.1.1",
-		"postcss-preset-env": "^10.1.3",
+		"postcss-preset-env": "^10.1.5",
 		"sass": "^1.83.1",
 		"sass-loader": "^16.0.4",
 		"style-loader": "^4.0.0",
 		"svg-spritemap-webpack-plugin": "^4.7.0",
 		"tsconfig-paths-webpack-plugin": "^4.2.0",
+		"tsx": "^4.19.3",
 		"webpack": "^5.97.1",
 		"webpack-assets-manifest": "^5.2.1",
 		"webpack-bundle-analyzer": "^4.10.2",