feat: add data tags

packages/assetpack/src/core/Asset.ts

@@ -32,6 +32,7 @@ export class Asset
     inheritedMetaData: Record<string, any> = {};
     allMetaData: Record<string, any> = {};
     transformData: Record<string, any> = {};
+    manifestData: Record<string, any> = {};
 
     settings?: Record<string, any>;
 
@@ -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];
+            }
+        }
+    }
 }
 

packages/assetpack/src/core/pipes/AssetPipe.ts

@@ -17,7 +17,7 @@ export type DeepRequired<T> = T extends Primitive
     };
 export interface PluginOptions {}
 
-export interface AssetPipe<OPTIONS=Record<string, any>, TAGS extends string = string>
+export interface AssetPipe<OPTIONS=Record<string, any>, 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<OPTIONS=Record<string, any>, TAGS extends string = st
     /** Tags that can be used to control the plugin */
     tags?: Record<TAGS, string>;
 
+    /**
+     * Any tags here will be placed in the manifests `data` object
+     * This can be used to pass data to loaders more easily
+     */
+    dataTags?: Record<DATA_TAGS, string>;
+
     /**
      * Called once at the start.
      * @param asser - the root asset

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);
 

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
         });
     }

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<SDFFontOptions, 'font' | 'nc' | 'fix'>
+): AssetPipe<SDFFontOptions, 'font' | 'nc' | 'fix', 'family'>
 {
     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,

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<any, 'wf'>
+export function webfont(): AssetPipe<any, 'wf', 'family'>
 {
     return {
         folder: false,
@@ -12,6 +12,9 @@ export function webfont(): AssetPipe<any, 'wf'>
         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<any, 'wf'>
 
             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];
         }
     };

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,
-                        }
+                        },
                     }
                 },
             ],

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.

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.                                    |