Support for WireViz 0.4. Won't work with 0.3.

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Change Log
 
+## [1.1.0] - ??
+- [new] Supports WireViz 0.4.x. Will not work with 0.3 or prior.
+
 ## [1.0.1] - 2024-03-07
 - [fix] Don't destroy panel when previewing files outside workspace. This should also fix #4
 

README.md

@@ -6,29 +6,29 @@ A simple extension for Visual Studio Code to preview WireViz YAML files.
 
 ## Prerequisites
 - Install extension from the [VSCode Marketplace](https://marketplace.visualstudio.com/items?itemName=NanangP.vscode-wireviz-preview) - or build from source.
-- [WireViz](https://github.com/wireviz/WireViz) 0.3.2 or later; which requires [Python](https://www.python.org/downloads/) 3.7 or later, and [Graphviz](https://graphviz.org/download/)
+- [WireViz](https://github.com/wireviz/WireViz) **0.4.0** or later; which requires [Python](https://www.python.org/downloads/) 3.7 or later, and [Graphviz](https://graphviz.org/download/)
 
 ## Running
 1. Open a WireViz YAML file.
 2. Use the `WireViz: Preview` button on the editor toolbar (right of tabs),
    or using the default <kbd>F8</kbd> shortcut key.
-4. Once the preview is open, it will refresh every time you save the file.  
+4. Once the preview is open, it will refresh every time you save the file.
    This behaviour can be disabled by setting `"wireviz.refreshPreviewOnSave": false`.
 
 ## Configuration
 The first (bolded) of the "Possible values" is the default if unspecified.
 | Config UI | settings.json | Possible values | Description |
 | --------- | ------------- | --------------- | ----------- |
 | Refresh Preview On Save | `wireviz.refreshPreviewOnSave` | **`true`**, `false` | Automatically refreshes preview on document save. |
-| Output Path | `wireviz.outputPath` | **`"output"`**, `null` | When set, generates output files in an `/output` subdirectory. When `null`, output to the same location as the input file. |
+| Output Path | `wireviz.outputPath` | blank, or relative path name | When set, generates output files in the specified path *relative* to the input file. When empty, output to the same path as the input file. |
 | Preview Format | `wireviz.previewFormat` | **`"svg"`**, `"png"` | Selects output file to be displayed in the preview window. |
 
 
-## ⚠ Limitations
-- If you have an external image in your wire harness (i.e. an `image:` node),
-  you need to set:
-  - `"wireviz.previewFormat": "png"` (the WebView in VSCode won't show images on an SVG), and
-  - `"wireviz.outputPath": null` (WireViz v0.3.2 [throws an error](https://github.com/wireviz/WireViz/issues/284) outputting to a path other than the source, if you use images)
+## Troubleshooting
+- Please make sure you're running WireViz 0.4 or above. Their new command line options are incompatible with 0.3 and below.
+- If you are running into issues after upgrading to WireViz 0.4, try running WireViz against your input file from the terminal:
+   - If it works on the terminal but not through the extension, please report it as a new issue here.
+   - If the terminal also throws an error, please downgrade WireViz to `0.3`, and [downgrade this extension](https://code.visualstudio.com/updates/v1_30#_install-previous-versions) to `1.0.x`, and wait until they fix it.
 
 ## Changelog
 See [CHANGELOG.md](CHANGELOG.md)

package.json

@@ -2,7 +2,7 @@
   "name": "vscode-wireviz-preview",
   "displayName": "WireViz Preview",
   "description": "Previewer for WireViz YAML files",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "publisher": "NanangP",
   "icon": "img/icon.png",
   "repository": { "type": "git", "url": "https://github.com/nanangp/vscode-wireviz-preview" },
@@ -44,23 +44,18 @@
           "description": "Refresh WireViz preview on document save. (may be slow for large documents)"
         },
         "wireviz.outputPath" : {
-          "markdownDescription": "Produce output files in the specified subdirectory. \n\n **Warning**: If you have embedded images, this needs to be `Same as input file`, and `#wireviz.previewFormat#` should be set to `png`.",
-          "type": ["string", "null"],
-          "enum": ["output", null],
-          "default": "output",
-          "enumItemLabels": [
-            "./output subdirectory",
-            "Same as input file"
-          ]
+          "markdownDescription": "Produce output files in the specified subdirectory relative to the input file. \n\nLeave blank to output to the same dir as input file.",
+          "type": "string",
+          "default": ""
         },
         "wireviz.previewFormat": {
           "description": "Output format to preview.",
-"type": "string",
+          "type": "string",
           "default": "svg",
           "enum": ["svg", "png"],
           "markdownEnumDescriptions": [
-            "Vector graphics. Zooms nicely, but doesn't show embedded images on VSCode.",
-            "Raster graphics. Doesn't zoom gracefully, but will show embedded images."
+            "Vector graphics.",
+            "Raster graphics."
           ]
         }
       }

src/extension.ts

@@ -9,6 +9,13 @@ enum MsgType {
 	Info = "💬",
 }
 
+// A character representing the desired output format.
+// See `wireviz --help` for complete list.
+const wvOutFormatChars = {
+	"svg": "s",
+	"png": "p",
+};
+
 let wvpanel: vscode.WebviewPanel | undefined;
 
 export function activate(context: vscode.ExtensionContext) {
@@ -50,12 +57,19 @@ function showPreview() {
 
 	show(MsgType.Info, "Generating diagram...");
 
-	const outPath = getConfig("outputPath", null) ?? ".";
-	let outFileNoExt = path
-		.join(path.dirname(doc.fileName), outPath, path.basename(doc.fileName))
-		.replace(path.extname(doc.fileName), "");
+	const outPathRel = getConfig("outputPath", null) ?? ".";
+	const outPath = path.join(path.dirname(doc.fileName), outPathRel);
+
+	const inputFileExt = new RegExp(`${path.extname(doc.fileName)}$`);
+	const outExt = getConfig("previewFormat", "svg");
+	const outFile = path
+		.join(outPath, path.basename(doc.fileName))
+		.replace(inputFileExt, `.${outExt}`);
+
+	const outFormat = wvOutFormatChars[outExt];
 
-	const process = childProcess.spawn("wireviz", [doc.fileName, "-o", outFileNoExt]);
+	// WireViz 0.4 revamped -o and added -f
+	const process = childProcess.spawn("wireviz", [doc.fileName, "-o", outPath, "-f", outFormat]);
 
 	// 'error' is when we can't run wireviz.
 	process.on("error", e => show(MsgType.Err, `
@@ -67,11 +81,9 @@ function showPreview() {
 	process.stderr.on("data", d => errors.push(d));
 	process.stdout.on("data", d => errors.push(d));
 
-	process.on("exit", (code) => {
+	process.on("close", (code) => {
 		if (code === 0) {
-			const imgFormat = getConfig("previewFormat", "svg");
-			const imgFileName = `${outFileNoExt}.${imgFormat}`;
-			showImg(imgFileName);
+			showImg(outFile);
 		} else {
 			const errTxt = errors.join("\n");
 			show(MsgType.Err, errTxt);
@@ -127,10 +139,10 @@ function isFileOutsideWorkspace(doc: TextDocument): boolean {
 }
 
 // Rudimentary check for the minimum required contents of a WV yaml.
-const isWv: RegExp = /connections:|cables:|connectors:/gm;
+const isWvContent: RegExp = /connections:|cables:|connectors:/gm;
 function isWirevizYamlFile(doc: TextDocument) {
 	return doc.languageId === "yaml"
-		&& doc.getText()?.match(isWv)?.length === 3;
+		&& doc.getText()?.match(isWvContent)?.length === 3;
 }
 
 /** Shows message of the specified type on the Webview.