Use Commander.js for CLI (#47)

* Adopt Commander.js library for CLI and add optional --width and --height options

---------

Co-authored-by: David Liu <[email protected]>

CHANGELOG.md

@@ -18,6 +18,7 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 ### ✨ Enhancements
 
 -   Created a CLI for MemoryViz.
+-   Added `--height` and `--width` options to MemoryViz CLI.
 
 ### 🐛 Bug fixes
 
@@ -42,6 +43,7 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 -   Removed unused imports in `demo_C.js`.
 -   Added type interfaces and type annotations to `style.ts`.
 -   Added `DrawnEntity` type annotations to source code files.
+-   Adopted Commander.js library for the MemoryViz CLI.
 -   Added `autofix.ci` to the CI workflow.
 
 ## [0.1.0] - 2024-04-16

docs/docs/06-cli.md

@@ -16,6 +16,8 @@ $ npx memory-viz <path-to-file>
 
 replacing `<path-to-file>` with the path to a file containing MemoryViz-compatible JSON. If the file content is not compatible with MemoryViz, an error will be thrown.
 
+Optional arguments `--height` and `--width` can be used to specify the height and width of the generated SVG.
+
 ## Output
 
 The output is an SVG image generated by MemoryViz and the image is saved in the current working directory. The name of the SVG will be the same as that of the inputted file (i.e., if the inputted file is `david-is-cool.json`, the output will be `david-is-cool.svg`).

memory-viz/bin/cli.js

@@ -3,15 +3,22 @@
 const fs = require("fs");
 const path = require("path");
 const { draw } = require("memory-viz");
+const { program } = require("commander");
 
-// Check for correct number of arguments
-if (process.argv.length !== 3) {
-    console.error(
-        "Error: wrong number of arguments.\nUsage: memory-viz <path-to-file>"
-    );
-    process.exit(1);
-}
-const filePath = process.argv[2];
+program
+    .description(
+        "Command line interface for generating memory model diagrams with MemoryViz"
+    )
+    .argument(
+        "<filepath>",
+        "path to a file containing MemoryViz-compatible JSON"
+    )
+    .option("--width <value>", "width of generated SVG", "1300")
+    .option("--height <value>", "height of generated SVG");
+
+program.parse();
+
+const filePath = program.args[0];
 const absolutePath = path.resolve(process.cwd(), filePath);
 
 // Checks if absolutePath exists and that it is a JSON file
@@ -33,9 +40,10 @@ try {
 
 let m;
 try {
-    // TODO: Replace width and seed with command-line arguments
+    // TODO: Replace seed with command-line arguments
     m = draw(data, true, {
-        width: 1300,
+        width: program.opts().width,
+        height: program.opts().height,
         roughjs_config: { options: { seed: 12345 } },
     });
 } catch (err) {

memory-viz/package.json

@@ -42,6 +42,7 @@
     },
     "dependencies": {
         "@xmldom/xmldom": "^0.8.6",
+        "commander": "^12.1.0",
         "deepmerge": "^4.3.1",
         "roughjs": "^4.5.0"
     },
@@ -54,6 +55,7 @@
         "babel-loader": "^9.1.0",
         "husky": "^8.0.3",
         "jest": "^29.7.0",
+        "tmp": "^0.2.3",
         "ts-loader": "^9.5.1",
         "ts-node": "^10.9.2",
         "typescript": "^5.3.3",

memory-viz/src/tests/cli.spec.tsx

@@ -5,22 +5,22 @@ const tmp = require("tmp");
 
 tmp.setGracefulCleanup();
 
+const tmpFile = tmp.fileSync({ postfix: ".json" });
+const filePath = tmpFile.name;
+const input = JSON.stringify(
+    [
+        {
+            type: "str",
+            id: 19,
+            value: "David is cool!",
+            style: ["highlight"],
+        },
+    ],
+    null
+);
+
 describe("memory-viz cli", () => {
     it("should produce an svg that matches snapshot", (done) => {
-        const tmpFile = tmp.fileSync({ postfix: ".json" });
-        const filePath = tmpFile.name;
-        const input = JSON.stringify(
-            [
-                {
-                    type: "str",
-                    id: 19,
-                    value: "David is cool!",
-                    style: ["highlight"],
-                },
-            ],
-            null
-        );
-
         fs.writeFileSync(filePath, input);
 
         exec(`memory-viz ${filePath}`, (err) => {
@@ -35,16 +35,61 @@ describe("memory-viz cli", () => {
             done();
         });
     });
+
+    it("produces consistent svg when provided width option", (done) => {
+        fs.writeFileSync(filePath, input);
+
+        exec(`memory-viz ${filePath} --width=700`, (err) => {
+            if (err) throw err;
+            const svgFilePath = path.resolve(
+                process.cwd(),
+                path.basename(filePath.replace(".json", ".svg"))
+            );
+            const fileContent = fs.readFileSync(svgFilePath, "utf8");
+            expect(fileContent).toMatchSnapshot();
+            fs.unlinkSync(svgFilePath);
+            done();
+        });
+    });
+
+    it("produces consistent svg when provided height option", (done) => {
+        fs.writeFileSync(filePath, input);
+
+        exec(`memory-viz ${filePath} --height=700`, (err) => {
+            if (err) throw err;
+            const svgFilePath = path.resolve(
+                process.cwd(),
+                path.basename(filePath.replace(".json", ".svg"))
+            );
+            const fileContent = fs.readFileSync(svgFilePath, "utf8");
+            expect(fileContent).toMatchSnapshot();
+            fs.unlinkSync(svgFilePath);
+            done();
+        });
+    });
+
+    it("produces consistent svg when provided height and width options", (done) => {
+        fs.writeFileSync(filePath, input);
+
+        exec(`memory-viz ${filePath} --height=700 width=1200`, (err) => {
+            if (err) throw err;
+            const svgFilePath = path.resolve(
+                process.cwd(),
+                path.basename(filePath.replace(".json", ".svg"))
+            );
+            const fileContent = fs.readFileSync(svgFilePath, "utf8");
+            expect(fileContent).toMatchSnapshot();
+            fs.unlinkSync(svgFilePath);
+            done();
+        });
+    });
 });
 
 describe.each([
     {
         errorType: "invalid arguments",
         command: "memory-viz",
-        expectedErrorMessage:
-            `Command failed: memory-viz\n` +
-            `Error: wrong number of arguments.\n` +
-            `Usage: memory-viz <path-to-file>\n`,
+        expectedErrorMessage: "error: missing required argument 'filepath'",
     },
     {
         errorType: "non-existent file",

package.json

@@ -12,8 +12,7 @@
     "devDependencies": {
         "husky": "^8.0.3",
         "lint-staged": "^14.0.1",
-        "prettier": "2.8.1",
-        "tmp": "^0.2.3"
+        "prettier": "2.8.1"
     },
     "lint-staged": {
         "**/*": "prettier --write --ignore-unknown"