Merge pull request #93 from ArthurLobopro/use-svgo-in-browser-side

Use svgo in browser side

Author: ArthurLobopro

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 1.22.1
+
+Feat: Run SVGO on Browser side to improve performance
+
 ## 1.22.0
 
 Feat: New Watermark position input

package.json

@@ -2,7 +2,7 @@
   "name": "easy-codesnap",
   "displayName": "Easy CodeSnap",
   "description": "Take beautiful screenshots of your code 📷",
-  "version": "1.22.0",
+  "version": "1.22.1",
   "l10n": "./l10n",
   "repository": {
     "type": "git",

src/commands/snap/SnapActions.ts

@@ -1,6 +1,5 @@
 import * as vscode from "vscode";
 import { extensionSettingsNames } from "../../constants";
-import { reduceSVG } from "../../reduceSVG";
 import type { ExtensionConfig } from "../../types";
 import { hasOneSelection, t } from "../../util";
 import { savePNG, saveSVG } from "./savers";
@@ -85,6 +84,6 @@ export class SnapActions {
     }
 
     "copy-svg"({ data }: { data: string }) {
-        vscode.env.clipboard.writeText(reduceSVG(data));
+        vscode.env.clipboard.writeText(data);
     }
 }

src/commands/snap/savers.ts

@@ -1,7 +1,6 @@
 import { homedir, platform } from "node:os";
 import path from "node:path";
 import * as vscode from "vscode";
-import { reduceSVG } from "../../reduceSVG";
 import { t, writeFile } from "../../util";
 
 const isWin = platform() === "win32";
@@ -49,9 +48,9 @@ export async function saveSVG(data: string) {
 
     assignLastUsedImageUri(uri);
 
-    const reducedData = reduceSVG(data);
+    //const reducedData = reduceSVG(data);
 
     if (uri) {
-        writeFile(uri.fsPath, reducedData, "utf-8");
+        writeFile(uri.fsPath, data, "utf-8");
     }
 }

src/webview/exporters.ts

@@ -5,6 +5,8 @@ import { elementToSVG } from "dom-to-svg";
 
 import type { WebviewConfig } from "../types";
 import { SessionConfig } from "./SessionConfig";
+//@ts-expect-error
+import { optimize } from "./lib/svgo.browser.js";
 import { cameraFlashAnimation } from "./snap";
 import { $$, vscode } from "./util";
 
@@ -51,8 +53,10 @@ export async function exportSVG(
             "<style>.line-number,#window-title{user-select:none;}</style>",
         );
 
+    const minifiedSvg = optimize(svg, svgoConfig).data;
+
     if (action === "copy") {
-        vscode.postMessage({ type: "copy-svg", data: svg });
+        vscode.postMessage({ type: "copy-svg", data: minifiedSvg });
         cameraFlashAnimation();
         vscode.postMessage({ type: "copied" });
     } else {
@@ -120,3 +124,31 @@ async function toPNGFallback(target: HTMLElement) {
 
     return canvas.toDataURL();
 }
+
+const svgoConfig = {
+    floatPrecision: 8,
+    multipass: true,
+    plugins: [
+        {
+            name: "preset-default",
+            params: {
+                overrides: {
+                    removeViewBox: false,
+                    removeUnknownsAndDefaults: {
+                        defaultAttrs: true,
+                        uselessOverrides: true,
+                        unknownAttrs: true,
+                        keepAriaAttrs: false,
+                        keepDataAttrs: false,
+                    },
+                },
+            },
+        },
+        {
+            name: "removeAttrs",
+            params: {
+                attrs: ["textLength", "text-decoration"],
+            },
+        },
+    ],
+};

src/webview/lib/svgo.browser.js

@@ -9,7 +9,9 @@
 		"sourceMap": true,
 		"rootDir": "src",
 		"strict": true,
-		"noImplicitReturns": true   /* enable all strict type-checking options */
+		"noImplicitReturns": true,
+		"allowJs": true,
+		   /* enable all strict type-checking options */
 		/* Additional Checks */
 		// "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
 		// "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */