diff --git a/packages/assetpack/package.json b/packages/assetpack/package.json index d9846eaa..52347065 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 00000000..736d221d --- /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 00000000..9026b2ab --- /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 00000000..537f4ea1 --- /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 00000000..4f6df8ce --- /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); + }); +});