From 754fa4a50cfa31fecc4986047187bfea29307754 Mon Sep 17 00:00:00 2001 From: Kenos Date: Mon, 22 Jul 2024 13:01:00 -0600 Subject: [PATCH] feat: resvg pipe --- packages/assetpack/package.json | 1 + packages/assetpack/src/resvg/index.ts | 33 +++++++++++++ .../vectors/pixijs-logo-full-dark.svg | 1 + .../vectors/pixijs-logo-transparent-light.svg | 1 + packages/assetpack/test/resvg/Resvg.test.ts | 46 +++++++++++++++++++ 5 files changed, 82 insertions(+) create mode 100644 packages/assetpack/src/resvg/index.ts create mode 100644 packages/assetpack/test/resources/vectors/pixijs-logo-full-dark.svg create mode 100644 packages/assetpack/test/resources/vectors/pixijs-logo-transparent-light.svg create mode 100644 packages/assetpack/test/resvg/Resvg.test.ts diff --git a/packages/assetpack/package.json b/packages/assetpack/package.json index d9846ea..5234706 100644 --- a/packages/assetpack/package.json +++ b/packages/assetpack/package.json @@ -54,6 +54,7 @@ "@napi-rs/woff-build": "^0.2.0", "@node-rs/crc32": "^1.10.3", "@pixi/runner": "^7.4.2", + "@resvg/resvg-js": "^2.6.2", "@types/cli-progress": "3.11.5", "@types/clone": "^2.1.4", "@types/fluent-ffmpeg": "^2.1.24", diff --git a/packages/assetpack/src/resvg/index.ts b/packages/assetpack/src/resvg/index.ts new file mode 100644 index 0000000..736d221 --- /dev/null +++ b/packages/assetpack/src/resvg/index.ts @@ -0,0 +1,33 @@ +import { AssetPipe, checkExt, createNewAssetAt, Logger, PluginOptions } from "../core/index.js"; +import { Resvg, ResvgRenderOptions } from "@resvg/resvg-js"; + +export interface ResvgOptions extends PluginOptions { + resvg?: Partial +} + +export function resvg(_options: ResvgOptions = {}): AssetPipe +{ + return { + name: "resvg", + tags: { + nrs: 'nrs' + }, + defaultOptions: { + resvg: { + fitTo: { + mode: "original" + } + } + }, + test(asset, options) + { + return !asset.metaData[this.tags!.nrs] && checkExt(asset.path); + }, + async transform(asset, options) + { + const transformedAsset = createNewAssetAt(asset, asset.filename.replace(/\.svg$/, ".png")); + transformedAsset.buffer = new Resvg(asset.buffer, options.resvg).render().asPng(); + return [transformedAsset]; + }, + } +} diff --git a/packages/assetpack/test/resources/vectors/pixijs-logo-full-dark.svg b/packages/assetpack/test/resources/vectors/pixijs-logo-full-dark.svg new file mode 100644 index 0000000..9026b2a --- /dev/null +++ b/packages/assetpack/test/resources/vectors/pixijs-logo-full-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/assetpack/test/resources/vectors/pixijs-logo-transparent-light.svg b/packages/assetpack/test/resources/vectors/pixijs-logo-transparent-light.svg new file mode 100644 index 0000000..537f4ea --- /dev/null +++ b/packages/assetpack/test/resources/vectors/pixijs-logo-transparent-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/assetpack/test/resvg/Resvg.test.ts b/packages/assetpack/test/resvg/Resvg.test.ts new file mode 100644 index 0000000..4f6df8c --- /dev/null +++ b/packages/assetpack/test/resvg/Resvg.test.ts @@ -0,0 +1,46 @@ +import { assetPath, createFolder, getInputDir, getOutputDir } from '../utils/index.js'; +import { describe, expect, it } from 'vitest'; +import { resvg } from '../../src/resvg/index.js'; +import { AssetPack } from '../../src/core/index.js'; +import { existsSync } from 'fs-extra'; + +const pkg = 'resvg'; + +describe('Resvg', () => { + it("should create png formatted files", async () => { + const testName = 'svg-convert'; + const inputDir = getInputDir(pkg, testName); + const outputDir = getOutputDir(pkg, testName); + + createFolder( + pkg, + { + name: testName, + files: [ + { + name: "pixijs-logo-full-dark.svg", + content: assetPath("vectors/pixijs-logo-full-dark.svg") + }, + { + name: "pixijs-logo-transparent-light.svg", + content: assetPath("vectors/pixijs-logo-transparent-light.svg") + } + ], + folders: [] + }); + + const assetpack = new AssetPack({ + entry: inputDir, + output: outputDir, + cache: false, + pipes: [ + resvg() + ] + }) + + await assetpack.run(); + + expect(existsSync(`${outputDir}/pixijs-logo-full-dark.png`)).toBe(true); + expect(existsSync(`${outputDir}/pixijs-logo-transparent-light.png`)).toBe(true); + }); +});