diff --git a/packages/assetpack/src/core/Asset.ts b/packages/assetpack/src/core/Asset.ts index 9c5888e..57dcd3e 100644 --- a/packages/assetpack/src/core/Asset.ts +++ b/packages/assetpack/src/core/Asset.ts @@ -32,6 +32,7 @@ export class Asset inheritedMetaData: Record = {}; allMetaData: Record = {}; transformData: Record = {}; + manifestData: Record = {}; settings?: Record; @@ -251,5 +252,22 @@ export class Asset this.children[i].releaseChildrenBuffers(); } } + + /** + * Update the manifest data with certain keys from the metaData + * @param keys - keys to apply from the metaData to the manifestData + */ + applyManifestData(keys: string[]) + { + for (let i = 0; i < keys.length; i++) + { + const key = keys[i]; + + if (this.metaData[key] !== undefined) + { + this.manifestData[key] = this.metaData[key]; + } + } + } } diff --git a/packages/assetpack/src/core/pipes/AssetPipe.ts b/packages/assetpack/src/core/pipes/AssetPipe.ts index 6a2feb6..26e203d 100644 --- a/packages/assetpack/src/core/pipes/AssetPipe.ts +++ b/packages/assetpack/src/core/pipes/AssetPipe.ts @@ -17,7 +17,7 @@ export type DeepRequired = T extends Primitive }; export interface PluginOptions {} -export interface AssetPipe, TAGS extends string = string> +export interface AssetPipe, TAGS extends string = string, DATA_TAGS extends string = string> { /** Whether the process runs on a folder */ folder?: boolean; @@ -31,6 +31,12 @@ export interface AssetPipe, TAGS extends string = st /** Tags that can be used to control the plugin */ tags?: Record; + /** + * Any tags here will be placed in the manifests `data` object + * This can be used to pass data to loaders more easily + */ + dataTags?: Record; + /** * Called once at the start. * @param asser - the root asset diff --git a/packages/assetpack/src/core/pipes/PipeSystem.ts b/packages/assetpack/src/core/pipes/PipeSystem.ts index 39b528c..470e61e 100644 --- a/packages/assetpack/src/core/pipes/PipeSystem.ts +++ b/packages/assetpack/src/core/pipes/PipeSystem.ts @@ -88,6 +88,8 @@ export class PipeSystem { asset.transformName = pipe.name; asset.transformChildren = []; + // apply the dataTags of the pipe to the asset so it can be used by pixi and other loaders + asset.applyManifestData(Object.values(pipe.dataTags ?? {})); const assets = await pipe.transform(asset, options, this); diff --git a/packages/assetpack/src/manifest/pixiManifest.ts b/packages/assetpack/src/manifest/pixiManifest.ts index 127525f..6eed7e6 100644 --- a/packages/assetpack/src/manifest/pixiManifest.ts +++ b/packages/assetpack/src/manifest/pixiManifest.ts @@ -143,7 +143,8 @@ function collectAssets( .map((finalAsset) => path.relative(outputPath, finalAsset.path)) .sort((a, b) => b.localeCompare(a)), data: options.includeMetaData ? { - tags: asset.allMetaData + tags: asset.allMetaData, + ...asset.manifestData } : undefined }); } diff --git a/packages/assetpack/src/webfont/sdf.ts b/packages/assetpack/src/webfont/sdf.ts index 9b16132..8bfc490 100644 --- a/packages/assetpack/src/webfont/sdf.ts +++ b/packages/assetpack/src/webfont/sdf.ts @@ -1,6 +1,6 @@ import fs from 'fs-extra'; import generateBMFont from 'msdf-bmfont-xml'; -import { checkExt, createNewAssetAt, stripTags } from '../core/index.js'; +import { checkExt, createNewAssetAt, path, stripTags } from '../core/index.js'; import type { BitmapFontOptions } from 'msdf-bmfont-xml'; import type { Asset, AssetPipe, PluginOptions } from '../core/index.js'; @@ -14,7 +14,7 @@ export interface SDFFontOptions extends PluginOptions function signedFont( defaultOptions: SDFFontOptions -): AssetPipe +): AssetPipe { return { folder: false, @@ -25,6 +25,9 @@ function signedFont( nc: 'nc', fix: 'fix', }, + dataTags: { + family: 'family', + }, test(asset: Asset) { return asset.allMetaData[this.tags!.font] && checkExt(asset.path, '.ttf'); @@ -33,6 +36,8 @@ function signedFont( { const newFileName = stripTags(asset.filename.replace(/\.(ttf)$/i, '')); + // set the family name to the filename if it doesn't exist + asset.manifestData.family = asset.metaData.family ?? path.trimExt(asset.filename); const { font, textures } = await GenerateFont(asset.path, { ...options.font, filename: newFileName, diff --git a/packages/assetpack/src/webfont/webfont.ts b/packages/assetpack/src/webfont/webfont.ts index 9ec7481..1fcd451 100644 --- a/packages/assetpack/src/webfont/webfont.ts +++ b/packages/assetpack/src/webfont/webfont.ts @@ -3,7 +3,7 @@ import { fonts } from './fonts.js'; import type { Asset, AssetPipe } from '../core/index.js'; -export function webfont(): AssetPipe +export function webfont(): AssetPipe { return { folder: false, @@ -12,6 +12,9 @@ export function webfont(): AssetPipe tags: { wf: 'wf', }, + dataTags: { + family: 'family', + }, test(asset: Asset) { return asset.allMetaData[this.tags!.wf] && checkExt(asset.path, '.otf', '.ttf', '.svg'); @@ -44,6 +47,9 @@ export function webfont(): AssetPipe newAsset.buffer = buffer; + // set the family name to the filename if it doesn't exist + asset.manifestData.family = asset.metaData.family ?? path.trimExt(asset.filename); + return [newAsset]; } }; diff --git a/packages/assetpack/test/webfont/Webfont.test.ts b/packages/assetpack/test/webfont/Webfont.test.ts index b924fc9..1593a7c 100644 --- a/packages/assetpack/test/webfont/Webfont.test.ts +++ b/packages/assetpack/test/webfont/Webfont.test.ts @@ -309,36 +309,40 @@ describe('Webfont', () => alias: ['defaultFolder/ttf.ttf'], src: ['defaultFolder/ttf.woff2'], data: { + family: 'ttf', tags: { wf: true, - } + }, } }, { alias: ['msdfFolder/ttf.ttf'], src: ['msdfFolder/ttf.fnt'], data: { + family: 'ttf', tags: { msdf: true, - } + }, } }, { alias: ['sdfFolder/ttf.ttf'], src: ['sdfFolder/ttf.fnt'], data: { + family: 'ttf', tags: { sdf: true, - } + }, } }, { alias: ['svgFolder/svg.svg'], src: ['svgFolder/svg.woff2'], data: { + family: 'svg', tags: { wf: true, - } + }, } }, ], diff --git a/packages/docs/docs/guide/pipes/overview.mdx b/packages/docs/docs/guide/pipes/overview.mdx index be273fc..5c5d6dd 100644 --- a/packages/docs/docs/guide/pipes/overview.mdx +++ b/packages/docs/docs/guide/pipes/overview.mdx @@ -57,5 +57,12 @@ Each plugin has its own set of tags, so be sure to check the documentation for t ### Other Tag Examples - You can also add multiple tags to a single asset, like this `asset{tag1}{tag2}`. -- Tags can have data appended to them, like this `asset{tag1:myData}`. -- Tags can have multiple data values, like this `asset{tag1:100,200}`. +- Tags can have data appended to them, like this `asset{tag1=myData}`. +- Tags can have multiple data values, like this `asset{tag1=100&200}`. + +### Data Tags + +Data tags are a special type of tag that a plugin can specify to allow for the value of that tag to be passed to the manifest. +This can be useful for PixiJS as in the manifest you can specify certain properties for each asset. + +For example, the webfont plugin has a `family` tag that can be used to specify the font family name of the font file. diff --git a/packages/docs/docs/guide/pipes/webfont.mdx b/packages/docs/docs/guide/pipes/webfont.mdx index 0bd9bad..3907127 100644 --- a/packages/docs/docs/guide/pipes/webfont.mdx +++ b/packages/docs/docs/guide/pipes/webfont.mdx @@ -30,9 +30,10 @@ export default { ### Tags -| Tag | Folder/File | Description | -| ---- | ----------- | -------------------------------------------------------------- | -| `wf` | `both` | If present the file(s) will be converted to a webfont (woff2). | +| Tag | Folder/File | Description | +| -------- | ----------- | -------------------------------------------------------------- | +| `wf` | `both` | If present the file(s) will be converted to a webfont (woff2). | +| `family` | `file` | The font family name. | --- @@ -80,7 +81,8 @@ export default { ### Tags -| Tag | Folder/File | Description | -| ------ | ----------- | -------------------------------------------------------- | -| `sdf` | `both` | If present the file(s) will be converted to a SDF font. | -| `msdf` | `both` | If present the file(s) will be converted to a MSDF font. | +| Tag | Folder/File | Description | +| -------- | ----------- | -------------------------------------------------------- | +| `sdf` | `both` | If present the file(s) will be converted to a SDF font. | +| `msdf` | `both` | If present the file(s) will be converted to a MSDF font. | +| `family` | `file` | The font family name. |