@atomicsmash/cli 3.0.0 → 3.1.0

package/dist/commands/blocks.d.ts

@@ -0,0 +1,3 @@
+export declare const blocksHelpMessage = "\n  Atomic Smash CLI - Blocks command.\n\n  A command to generate WordPress blocks from a src folder.\n\n  Options:\n    --in         The directory where the WP blocks can be found.\n    --out        The directory where the WP blocks will be output.\n\t\t--watch      Watch the blocks in folder for changes and compile.\n\n  Example usage:\n    $ smash-cli blocks --watch --in src --out build\n";
+export default function blocks(args: string[]): void;
+//# sourceMappingURL=blocks.d.ts.map

package/dist/commands/blocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"blocks.d.ts","sourceRoot":"","sources":["../../src/commands/blocks.ts"],"names":[],"mappings":"AAuBA,eAAO,MAAM,iBAAiB,+YAY7B,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,QA+J5C"}

package/dist/commands/blocks.js

@@ -0,0 +1,223 @@
+import crypto from "node:crypto";
+import { readFileSync, writeFileSync, renameSync } from "node:fs";
+import { readdir } from "node:fs/promises";
+import { resolve as resolvePath, dirname as pathDirname } from "node:path";
+import { fileURLToPath } from "node:url";
+import DependencyExtractionWebpackPlugin from "@wordpress/dependency-extraction-webpack-plugin";
+import defaultConfig from "@wordpress/scripts/config/webpack.config.js";
+import autoprefixer from "autoprefixer";
+import cssnano from "cssnano";
+import glob from "glob-promise";
+import postcss from "postcss";
+import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin";
+import webpack from "webpack";
+import { hasHelpFlag, toCamelCase } from "../utils.js";
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const __filename = fileURLToPath(import.meta.url);
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const __dirname = pathDirname(__filename);
+const isProduction = process.env.NODE_ENV === "production";
+export const blocksHelpMessage = `
+  Atomic Smash CLI - Blocks command.
+
+  A command to generate WordPress blocks from a src folder.
+
+  Options:
+    --in         The directory where the WP blocks can be found.
+    --out        The directory where the WP blocks will be output.
+		--watch      Watch the blocks in folder for changes and compile.
+
+  Example usage:
+    $ smash-cli blocks --watch --in src --out build
+`;
+export default function blocks(args) {
+    if (hasHelpFlag(args)) {
+        console.log(blocksHelpMessage);
+        return;
+    }
+    const inFlag = args[args.findIndex((arg) => arg === "--in") + 1];
+    if (!inFlag || inFlag.startsWith("--")) {
+        throw new Error("You need to provide a value for the --in flag.");
+    }
+    const outFlag = args[args.findIndex((arg) => arg === "--out") + 1];
+    if (!outFlag || outFlag.startsWith("--")) {
+        throw new Error("You need to provide a value for the --out flag.");
+    }
+    const srcFolder = resolvePath(inFlag);
+    const distFolder = resolvePath(outFlag);
+    const compiler = webpack({
+        ...defaultConfig,
+        entry: () => getAllBlocksJSEntryPoints(srcFolder),
+        plugins: [
+            ...(defaultConfig.plugins?.filter((plugin) => plugin.constructor.name !== "DependencyExtractionWebpackPlugin") ?? []),
+            new DependencyExtractionWebpackPlugin({
+                combineAssets: true,
+            }),
+            {
+                apply: (compiler) => {
+                    compiler.hooks.afterEmit.tapPromise("Build CSS and copy to test area", async () => {
+                        const plugins = [autoprefixer];
+                        if (isProduction) {
+                            plugins.push(cssnano({ preset: "default" }));
+                        }
+                        await glob
+                            .promise(`${srcFolder}/blocks/**/*.css`)
+                            .then(async (matches) => {
+                            for (const match of matches) {
+                                const fileName = match.split("/").pop();
+                                if (!fileName) {
+                                    console.error(`Failed to get filename of ${match}`);
+                                    continue;
+                                }
+                                const css = readFileSync(match);
+                                await postcss(plugins)
+                                    .process(css, {
+                                    from: match,
+                                    to: match.replace(srcFolder, distFolder),
+                                })
+                                    .then((result) => {
+                                    writeFileSync(match.replace(srcFolder, distFolder), result.css);
+                                    if (result.map) {
+                                        writeFileSync(`${match.replace(srcFolder, distFolder)}.map`, result.map.toString());
+                                    }
+                                });
+                            }
+                        })
+                            .then(async () => {
+                            if (!isProduction) {
+                                return;
+                            }
+                            return glob
+                                .promise(`${distFolder}/**/*.css`)
+                                .then((matches) => {
+                                for (const match of matches) {
+                                    const fileBuffer = readFileSync(match);
+                                    const contentHash = crypto.createHash("shake256", {
+                                        outputLength: 10,
+                                    });
+                                    contentHash.update(fileBuffer);
+                                    const fileMatchArray = match.split("/");
+                                    const newFileName = fileMatchArray
+                                        .pop()
+                                        ?.replace(".css", `.${contentHash.digest("hex")}.css`);
+                                    if (!newFileName || newFileName === "") {
+                                        throw new Error("Error getting CSS file name.");
+                                    }
+                                    renameSync(match, `${fileMatchArray.join("/")}/${newFileName}`);
+                                }
+                                return;
+                            });
+                        })
+                            .catch((error) => {
+                            console.error(error);
+                            throw error;
+                        });
+                    });
+                },
+            },
+        ],
+        output: {
+            path: distFolder,
+            clean: true,
+        },
+        resolve: {
+            plugins: [new TsconfigPathsPlugin()],
+            extensions: [".ts", ".js", ".tsx", ".jsx"],
+        },
+    });
+    if (args.find((value) => value === "--watch")) {
+        const watching = compiler.watch({
+            // Example
+            aggregateTimeout: 300,
+            poll: undefined,
+        }, (error, stats) => {
+            if (error) {
+                console.error(error);
+                process.exitCode = 1;
+                watching.close((closeError) => {
+                    console.error(closeError);
+                });
+            }
+            if (stats?.hasErrors()) {
+                for (const statError of stats.compilation.errors) {
+                    console.error(statError.message);
+                }
+            }
+        });
+        process.on("SIGINT", function () {
+            watching.close((closeError) => {
+                console.error(closeError);
+            });
+        });
+    }
+    else {
+        compiler.run((error, stats) => {
+            if (error) {
+                console.error(error);
+                process.exitCode = 1;
+            }
+            if (stats?.hasErrors()) {
+                process.exitCode = 1;
+            }
+            compiler.close((closeError) => {
+                if (closeError) {
+                    process.exitCode = 1;
+                }
+            });
+        });
+    }
+}
+async function getAllBlocksJSEntryPoints(srcFolder) {
+    const entryPoints = {
+        helpers: {
+            import: `${__dirname}/helpers.tsx`,
+            filename: `helpers${isProduction ? `.[contenthash]` : ""}.js`,
+        },
+        svgs: {
+            import: `${srcFolder}/svgs.tsx`,
+            filename: `svgs${isProduction ? `.[contenthash]` : ""}.js`,
+        },
+    };
+    const blockFolders = await readdir(`${srcFolder}/blocks`, {
+        withFileTypes: true,
+    }).then((srcDirFiles) => {
+        return srcDirFiles
+            .filter((dirent) => dirent.isDirectory())
+            .map((dirent) => dirent.name);
+    });
+    for (const block of blockFolders) {
+        const blockFiles = await readdir(`${srcFolder}/blocks/${block}`, {
+            withFileTypes: true,
+        }).then((blockDirFiles) => {
+            return blockDirFiles
+                .filter((file) => !file.isDirectory())
+                .map((file) => file.name)
+                .filter((file) => file.endsWith(".js") || file.endsWith(".ts"));
+        });
+        for (const blockJSFile of blockFiles) {
+            let blockBonusScriptNumber = 1;
+            const [filename] = blockJSFile.split(".");
+            let entryName;
+            if (filename === "index") {
+                entryName = block;
+            }
+            else if (filename === "editor") {
+                entryName = `${block}-editor`;
+            }
+            else if (filename === "view") {
+                entryName = `${block}-view`;
+            }
+            else {
+                entryName = `${block}-bonus${blockBonusScriptNumber}`;
+                blockBonusScriptNumber++;
+            }
+            entryPoints[toCamelCase(entryName)] = {
+                import: `${srcFolder}/blocks/${block}/${blockJSFile}`,
+                filename: `blocks/${block}/${filename}${isProduction ? `.[contenthash]` : ""}.js`,
+            };
+        }
+    }
+    // eslint-disable-next-line no-console
+    console.log({ entryPoints });
+    return entryPoints;
+}

package/dist/index.js

@@ -19,6 +19,7 @@ switch (commandArg) {
         console.log(packageJson.version);
         break;
     case "svg":
+    case "blocks":
         try {
             await import(`./commands/${commandArg}.js`).then((module) => module.default(process.argv.slice(3)));
         }

package/dist/test-setup.js

@@ -23,7 +23,7 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = pathDirname(__filename);
 export async function setup() {
     console.log("Packing a test version...");
-    await execute(`cd ${resolvePath(__dirname, "../")} && npm pack --pack-destination ${__dirname}/tests/artifacts`);
+    await execute(`cd ${resolvePath(__dirname, "../")} && ls && npm pack --pack-destination ${__dirname}/tests/artifacts`);
     console.log(`Install test package...`);
     writeFile(`${__dirname}/tests/package.json`, "{}", (err) => {
         if (err) {

package/dist/utils.d.ts

@@ -10,4 +10,5 @@ export declare function execute(command: string): Promise<{
     stdout: string;
     stderr: string;
 }>;
+export declare function toCamelCase(text: string): string;
 //# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAY7C,eAAO,MAAM,WAAW,aAA4C,CAAC;AAIrE,eAAO,MAAM,WAAW,QAAkC,CAAC;AAC3D,eAAO,MAAM,WAAW,QAAwD,CAAC;AAIjF,eAAO,MAAM,cAAc,QAAsB,CAAC;AAElD,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,WAEzC;AAED,wBAAsB,OAAO,CAAC,OAAO,EAAE,MAAM;WAEpC,aAAa,GAAG,IAAI;YACnB,MAAM;YACN,MAAM;GASf"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAY7C,eAAO,MAAM,WAAW,aAA4C,CAAC;AAIrE,eAAO,MAAM,WAAW,QAAkC,CAAC;AAC3D,eAAO,MAAM,WAAW,QAAwD,CAAC;AAIjF,eAAO,MAAM,cAAc,QAAsB,CAAC;AAElD,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,WAEzC;AAED,wBAAsB,OAAO,CAAC,OAAO,EAAE,MAAM;WAEpC,aAAa,GAAG,IAAI;YACnB,MAAM;YACN,MAAM;GAUf;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,UAQvC"}

package/dist/utils.js

@@ -24,9 +24,17 @@ export async function execute(command) {
     return new Promise((resolve, reject) => {
         exec(command, (error, stdout, stderr) => {
             if (error) {
+                console.error({ error, stdout, stderr });
                 reject({ error, stdout, stderr });
             }
             resolve({ error, stdout, stderr });
         });
     });
 }
+export function toCamelCase(text) {
+    return text.replace(/^([A-Z])|[\s-_](\w)/g, function (match, p1, p2) {
+        if (p2)
+            return p2.toUpperCase();
+        return p1.toLowerCase();
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atomicsmash/cli",
-	"version": "3.0.0",
+	"version": "3.1.0",
 	"description": "A collection of CLI tools by Atomic Smash.",
 	"keywords": [],
 	"homepage": "https://www.atomicsmash.co.uk/",
@@ -40,16 +40,26 @@
 		"lint:types": "tsc -b"
 	},
 	"dependencies": {
+		"@wordpress/dependency-extraction-webpack-plugin": "^4.12.0",
+		"@wordpress/scripts": "^26.0.0",
+		"autoprefixer": "^10.4.14",
+		"cssnano": "^5.1.15",
 		"glob": "^8.0.3",
 		"glob-promise": "^6.0.2",
 		"path": "^0.12.7",
+		"postcss": "^8.4.21",
 		"svg-sprite": "^2.0.2",
-		"vinyl": "^3.0.0"
+		"tsconfig-paths": "^4.1.2",
+		"tsconfig-paths-webpack-plugin": "^4.0.1",
+		"vinyl": "^3.0.0",
+		"webpack": "^5.76.3"
 	},
 	"devDependencies": {
 		"@types/glob": "^8.0.0",
+		"@types/node": "^18.15.5",
 		"@types/svg-sprite": "^0.0.34",
 		"@types/vinyl": "^2.0.6",
+		"@types/webpack": "^5.28.0",
 		"type-fest": "^3.0.0"
 	}
 }