Skip to content

feat(rspeedy/core): support function in output.filename.* #1449

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 8, 2025
Merged

feat(rspeedy/core): support function in output.filename.* #1449

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/bumpy-cameras-make.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@lynx-js/rspeedy": patch
---

Add `output.filename.wasm` and `output.filename.assets` options.
5 changes: 5 additions & 0 deletions .changeset/tasty-ends-report.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@lynx-js/rspeedy": patch
---

Support using function in `output.filename.*`.
14 changes: 8 additions & 6 deletions packages/rspeedy/core/etc/rspeedy.api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,15 +182,17 @@ export interface ExposedAPI {

// @public
export interface Filename {
assets?: Rspack.AssetModuleFilename;
bundle?: string | undefined;
css?: string | undefined;
font?: string | undefined;
image?: string | undefined;
js?: string | undefined;
media?: string | undefined;
svg?: string | undefined;
css?: Rspack.CssFilename | undefined;
font?: Rspack.AssetModuleFilename | undefined;
image?: Rspack.AssetModuleFilename | undefined;
js?: Rspack.Filename | undefined;
media?: Rspack.AssetModuleFilename | undefined;
svg?: Rspack.AssetModuleFilename | undefined;
// @deprecated
template?: string | undefined;
wasm?: Rspack.WebassemblyModuleFilename;
}

// @public
Expand Down
82 changes: 76 additions & 6 deletions packages/rspeedy/core/src/config/output/filename.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
// Licensed under the Apache License Version 2.0 that can be found in the
// LICENSE file in the root directory of this source tree.

import type { Rspack } from '@rsbuild/core'

/**
* {@inheritdoc Output.filename}
*
Expand Down Expand Up @@ -118,8 +120,31 @@ export interface Filename {
*
* - Development: `'[name].js'`
* - Production: `'[name].[contenthash:8].js'`
*
* @example
*
* - Using a function to dynamically set the filename based on the file information:
*
* ```js
* import { defineConfig } from '@lynx-js/rspeedy'
*
* export default defineConfig({
* output: {
* filename: {
* js: (pathData, assetInfo) => {
* console.log(pathData); // You can check the contents of pathData here
*
* if (pathData.chunk?.name === 'index') {
* return isProd ? '[name].[contenthash:8].js' : '[name].js';
* }
* return '/some-path/[name].js';
* },
* },
* },
* })
* ```
*/
js?: string | undefined
js?: Rspack.Filename | undefined

/**
* The name of the CSS files.
Expand All @@ -129,8 +154,31 @@ export interface Filename {
* Default values:
*
* - `'[name].css'`
*
* @example
*
* - Using a function to dynamically set the filename based on the file information:
*
* ```js
* import { defineConfig } from '@lynx-js/rspeedy'
*
* export default defineConfig({
* output: {
* filename: {
* css: (pathData, assetInfo) => {
* console.log(pathData); // You can check the contents of pathData here
*
* if (pathData.chunk?.name === 'index') {
* return isProd ? '[name].[contenthash:8].css' : '[name].css';
* }
* return '/some-path/[name].css';
* },
* },
* },
* })
* ```
*/
css?: string | undefined
css?: Rspack.CssFilename | undefined

/**
* The name of the SVG images.
Expand All @@ -141,7 +189,7 @@ export interface Filename {
*
* - `'[name].[contenthash:8].svg'`
*/
svg?: string | undefined
svg?: Rspack.AssetModuleFilename | undefined

/**
* The name of the font files.
Expand All @@ -152,7 +200,7 @@ export interface Filename {
*
* - `'[name].[contenthash:8][ext]'`
*/
font?: string | undefined
font?: Rspack.AssetModuleFilename | undefined

/**
* The name of non-SVG images.
Expand All @@ -163,7 +211,7 @@ export interface Filename {
*
* - `'[name].[contenthash:8][ext]'`
*/
image?: string | undefined
image?: Rspack.AssetModuleFilename | undefined

/**
* The name of media assets, such as video.
Expand All @@ -174,5 +222,27 @@ export interface Filename {
*
* - `'[name].[contenthash:8][ext]'`
*/
media?: string | undefined
media?: Rspack.AssetModuleFilename | undefined

/**
* The name of WebAssembly files.
*
* @remarks
*
* Default values:
*
* - `'[hash].module.wasm'`
*/
wasm?: Rspack.WebassemblyModuleFilename

/**
* The name of other assets, except for above (image, svg, font, html, wasm...)
*
* @remarks
*
* Default values:
*
* - `'[name].[contenthash:8][ext]'`
*/
assets?: Rspack.AssetModuleFilename
}
133 changes: 133 additions & 0 deletions packages/rspeedy/core/test/config/output.test-d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
// Copyright 2024 The Lynx Authors. All rights reserved.
// Licensed under the Apache License Version 2.0 that can be found in the
// LICENSE file in the root directory of this source tree.
import type { Rspack } from '@rsbuild/core'
import { assertType, describe, test } from 'vitest'

import type { Config } from '../../src/index.js'
Expand Down Expand Up @@ -149,6 +150,138 @@ describe('Config - Output', () => {
assertType<Output>({
filename: '[id].js',
})

assertType<Output>({
filename: {
js: '[id].js',
},
})

assertType<Output>({
filename: {
js: (pathData, assetInfo) => {
assertType<string | undefined>(pathData.filename)
assertType<string | undefined>(pathData.hash)
assertType<Rspack.AssetInfo | undefined>(assetInfo)
return pathData.filename + '.js'
},
},
})

assertType<Output>({
filename: {
css: '[id].css',
},
})

assertType<Output>({
filename: {
css: (pathData, assetInfo) => {
assertType<string | undefined>(pathData.filename)
assertType<string | undefined>(pathData.hash)
assertType<Rspack.AssetInfo | undefined>(assetInfo)
return pathData.filename + '.css'
},
},
})

assertType<Output>({
filename: {
svg: '[id].svg',
},
})

assertType<Output>({
filename: {
svg: (pathData, assetInfo) => {
assertType<string | undefined>(pathData.filename)
assertType<string | undefined>(pathData.hash)
assertType<Rspack.AssetInfo | undefined>(assetInfo)
return pathData.filename + '.svg'
},
},
})

assertType<Output>({
filename: {
font: '[id].font.ttf',
},
})

assertType<Output>({
filename: {
font: (pathData, assetInfo) => {
assertType<string | undefined>(pathData.filename)
assertType<string | undefined>(pathData.hash)
assertType<Rspack.AssetInfo | undefined>(assetInfo)
return pathData.filename + '.font.ttf'
},
},
})

assertType<Output>({
filename: {
image: '[id].image[ext]',
},
})

assertType<Output>({
filename: {
image: (pathData, assetInfo) => {
assertType<string | undefined>(pathData.filename)
assertType<string | undefined>(pathData.hash)
assertType<Rspack.AssetInfo | undefined>(assetInfo)
return pathData.filename + '.image[ext]'
},
},
})

assertType<Output>({
filename: {
media: '[id].media[ext]',
},
})

assertType<Output>({
filename: {
media: (pathData, assetInfo) => {
assertType<string | undefined>(pathData.filename)
assertType<string | undefined>(pathData.hash)
assertType<Rspack.AssetInfo | undefined>(assetInfo)
return pathData.filename + '.media[ext]'
},
},
})

assertType<Output>({
filename: {
wasm: '[id].wasm',
},
})

assertType<Output>({
filename: {
// @ts-expect-error wasm does not support function
wasm: () => 'foo',
},
})

assertType<Output>({
filename: {
assets: '[id].assets[ext]',
},
})

assertType<Output>({
filename: {
assets: (pathData, assetInfo) => {
assertType<string | undefined>(pathData.filename)
assertType<string | undefined>(pathData.hash)
assertType<Rspack.AssetInfo | undefined>(assetInfo)
return pathData.filename + '.assets[ext]'
},
},
})
})

test('output.filenameHash', () => {
Expand Down
Loading