From 2cfd84f8bcf6e7c241aab3e24cde97e7e85afbc5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Roma=C5=84czyk?= Date: Thu, 13 Feb 2025 18:35:06 +0100 Subject: [PATCH] feat: make `platform` optional for `assetsLoader` (#985) * feat: make platform optional for assetsLoader * chore: update templates * chore: simplify configs * chore: changeset * chore: simplify configs even more * chore: cleanup --- .changeset/gorgeous-jeans-complain.md | 5 +++++ apps/tester-app/rspack.config.mjs | 13 +++---------- apps/tester-app/webpack.config.mjs | 13 +++---------- .../configs/rspack.host-app.mjs | 7 ++----- .../configs/rspack.mini-app.mjs | 4 ++-- .../configs/webpack.host-app.mjs | 7 ++----- .../configs/webpack.mini-app.mjs | 4 ++-- .../configs/rspack.host-app.mjs | 7 ++----- .../configs/rspack.mini-app.mjs | 4 ++-- .../configs/webpack.host-app.mjs | 7 ++----- .../configs/webpack.mini-app.mjs | 4 ++-- .../src/loaders/assetsLoader/assetsLoader.ts | 17 +++++++---------- .../repack/src/loaders/assetsLoader/options.ts | 3 +-- templates_v5/rspack.config.cjs | 17 ++--------------- templates_v5/rspack.config.mjs | 17 ++--------------- templates_v5/webpack.config.cjs | 17 ++--------------- templates_v5/webpack.config.mjs | 17 ++--------------- 17 files changed, 43 insertions(+), 120 deletions(-) create mode 100644 .changeset/gorgeous-jeans-complain.md diff --git a/.changeset/gorgeous-jeans-complain.md b/.changeset/gorgeous-jeans-complain.md new file mode 100644 index 000000000..5a4969bf5 --- /dev/null +++ b/.changeset/gorgeous-jeans-complain.md @@ -0,0 +1,5 @@ +--- +"@callstack/repack": minor +--- + +Assets loader can now be called without specyifing platform explicitly - the platform is now inferred automatically from configuration diff --git a/apps/tester-app/rspack.config.mjs b/apps/tester-app/rspack.config.mjs index 3bd75d326..6970021b6 100644 --- a/apps/tester-app/rspack.config.mjs +++ b/apps/tester-app/rspack.config.mjs @@ -73,10 +73,7 @@ export default (env) => { path.join(context, 'src/assetsTest/inlineAssets'), path.join(context, 'src/assetsTest/remoteAssets'), ], - use: { - loader: '@callstack/repack/assets-loader', - options: { platform }, - }, + use: '@callstack/repack/assets-loader', }, { test: /\.svg$/, @@ -95,10 +92,7 @@ export default (env) => { Repack.ASSET_EXTENSIONS.filter((ext) => ext !== 'svg') ), include: [path.join(context, 'src/assetsTest/localAssets')], - use: { - loader: '@callstack/repack/assets-loader', - options: { platform }, - }, + use: '@callstack/repack/assets-loader', }, { test: Repack.getAssetExtensionsRegExp( @@ -107,7 +101,7 @@ export default (env) => { include: [path.join(context, 'src/assetsTest/inlineAssets')], use: { loader: '@callstack/repack/assets-loader', - options: { platform, inline: true }, + options: { inline: true }, }, }, { @@ -118,7 +112,6 @@ export default (env) => { use: { loader: '@callstack/repack/assets-loader', options: { - platform, remote: { enabled: true, publicPath: 'http://localhost:9999/remote-assets', diff --git a/apps/tester-app/webpack.config.mjs b/apps/tester-app/webpack.config.mjs index d4d394999..644200aea 100644 --- a/apps/tester-app/webpack.config.mjs +++ b/apps/tester-app/webpack.config.mjs @@ -66,10 +66,7 @@ export default (env) => { path.join(context, 'src/assetsTest/inlineAssets'), path.join(context, 'src/assetsTest/remoteAssets'), ], - use: { - loader: '@callstack/repack/assets-loader', - options: { platform }, - }, + use: '@callstack/repack/assets-loader', }, { test: /\.svg$/, @@ -88,10 +85,7 @@ export default (env) => { Repack.ASSET_EXTENSIONS.filter((ext) => ext !== 'svg') ), include: [path.join(context, 'src/assetsTest/localAssets')], - use: { - loader: '@callstack/repack/assets-loader', - options: { platform }, - }, + use: '@callstack/repack/assets-loader', }, { test: Repack.getAssetExtensionsRegExp( @@ -100,7 +94,7 @@ export default (env) => { include: [path.join(context, 'src/assetsTest/inlineAssets')], use: { loader: '@callstack/repack/assets-loader', - options: { platform, inline: true }, + options: { inline: true }, }, }, { @@ -111,7 +105,6 @@ export default (env) => { use: { loader: '@callstack/repack/assets-loader', options: { - platform, remote: { enabled: true, publicPath: 'http://localhost:9999/remote-assets', diff --git a/apps/tester-federation-v2/configs/rspack.host-app.mjs b/apps/tester-federation-v2/configs/rspack.host-app.mjs index dcaf12144..b04d7b1c5 100644 --- a/apps/tester-federation-v2/configs/rspack.host-app.mjs +++ b/apps/tester-federation-v2/configs/rspack.host-app.mjs @@ -62,11 +62,8 @@ export default (env) => { }, }, { - test: Repack.getAssetExtensionsRegExp(Repack.ASSET_EXTENSIONS), - use: { - loader: '@callstack/repack/assets-loader', - options: { platform }, - }, + test: Repack.getAssetExtensionsRegExp(), + use: '@callstack/repack/assets-loader', }, ], }, diff --git a/apps/tester-federation-v2/configs/rspack.mini-app.mjs b/apps/tester-federation-v2/configs/rspack.mini-app.mjs index 4bcaf5a0d..4a9eaf73d 100644 --- a/apps/tester-federation-v2/configs/rspack.mini-app.mjs +++ b/apps/tester-federation-v2/configs/rspack.mini-app.mjs @@ -59,10 +59,10 @@ export default (env) => { }, }, { - test: Repack.getAssetExtensionsRegExp(Repack.ASSET_EXTENSIONS), + test: Repack.getAssetExtensionsRegExp(), use: { loader: '@callstack/repack/assets-loader', - options: { platform, inline: true }, + options: { inline: true }, }, }, ], diff --git a/apps/tester-federation-v2/configs/webpack.host-app.mjs b/apps/tester-federation-v2/configs/webpack.host-app.mjs index ccc38b962..603d4fad8 100644 --- a/apps/tester-federation-v2/configs/webpack.host-app.mjs +++ b/apps/tester-federation-v2/configs/webpack.host-app.mjs @@ -41,11 +41,8 @@ export default (env) => { type: 'javascript/auto', }, { - test: Repack.getAssetExtensionsRegExp(Repack.ASSET_EXTENSIONS), - use: { - loader: '@callstack/repack/assets-loader', - options: { platform }, - }, + test: Repack.getAssetExtensionsRegExp(), + use: '@callstack/repack/assets-loader', }, ], }, diff --git a/apps/tester-federation-v2/configs/webpack.mini-app.mjs b/apps/tester-federation-v2/configs/webpack.mini-app.mjs index 9dd03c5e7..6036fb448 100644 --- a/apps/tester-federation-v2/configs/webpack.mini-app.mjs +++ b/apps/tester-federation-v2/configs/webpack.mini-app.mjs @@ -38,10 +38,10 @@ export default (env) => { type: 'javascript/auto', }, { - test: Repack.getAssetExtensionsRegExp(Repack.ASSET_EXTENSIONS), + test: Repack.getAssetExtensionsRegExp(), use: { loader: '@callstack/repack/assets-loader', - options: { platform, inline: true }, + options: { inline: true }, }, }, ], diff --git a/apps/tester-federation/configs/rspack.host-app.mjs b/apps/tester-federation/configs/rspack.host-app.mjs index 8b314d445..a9067231d 100644 --- a/apps/tester-federation/configs/rspack.host-app.mjs +++ b/apps/tester-federation/configs/rspack.host-app.mjs @@ -64,11 +64,8 @@ export default (env) => { }, }, { - test: Repack.getAssetExtensionsRegExp(Repack.ASSET_EXTENSIONS), - use: { - loader: '@callstack/repack/assets-loader', - options: { platform }, - }, + test: Repack.getAssetExtensionsRegExp(), + use: '@callstack/repack/assets-loader', }, ], }, diff --git a/apps/tester-federation/configs/rspack.mini-app.mjs b/apps/tester-federation/configs/rspack.mini-app.mjs index 649490ef9..40211e6e8 100644 --- a/apps/tester-federation/configs/rspack.mini-app.mjs +++ b/apps/tester-federation/configs/rspack.mini-app.mjs @@ -61,10 +61,10 @@ export default (env) => { }, }, { - test: Repack.getAssetExtensionsRegExp(Repack.ASSET_EXTENSIONS), + test: Repack.getAssetExtensionsRegExp(), use: { loader: '@callstack/repack/assets-loader', - options: { platform, inline: true }, + options: { inline: true }, }, }, ], diff --git a/apps/tester-federation/configs/webpack.host-app.mjs b/apps/tester-federation/configs/webpack.host-app.mjs index 0f6c2b87e..4be3952e1 100644 --- a/apps/tester-federation/configs/webpack.host-app.mjs +++ b/apps/tester-federation/configs/webpack.host-app.mjs @@ -41,11 +41,8 @@ export default (env) => { type: 'javascript/auto', }, { - test: Repack.getAssetExtensionsRegExp(Repack.ASSET_EXTENSIONS), - use: { - loader: '@callstack/repack/assets-loader', - options: { platform }, - }, + test: Repack.getAssetExtensionsRegExp(), + use: '@callstack/repack/assets-loader', }, ], }, diff --git a/apps/tester-federation/configs/webpack.mini-app.mjs b/apps/tester-federation/configs/webpack.mini-app.mjs index a4c24a72c..3648fec17 100644 --- a/apps/tester-federation/configs/webpack.mini-app.mjs +++ b/apps/tester-federation/configs/webpack.mini-app.mjs @@ -38,10 +38,10 @@ export default (env) => { type: 'javascript/auto', }, { - test: Repack.getAssetExtensionsRegExp(Repack.ASSET_EXTENSIONS), + test: Repack.getAssetExtensionsRegExp(), use: { loader: '@callstack/repack/assets-loader', - options: { platform, inline: true }, + options: { inline: true }, }, }, ], diff --git a/packages/repack/src/loaders/assetsLoader/assetsLoader.ts b/packages/repack/src/loaders/assetsLoader/assetsLoader.ts index 75f320026..919ddf87e 100644 --- a/packages/repack/src/loaders/assetsLoader/assetsLoader.ts +++ b/packages/repack/src/loaders/assetsLoader/assetsLoader.ts @@ -25,7 +25,10 @@ export default async function repackAssetsLoader( this.cacheable(); const callback = this.async(); const logger = this.getLogger('repackAssetsLoader'); + const options = getOptions(this); + const isDev = !!this._compiler.options.devServer; + const platform = options.platform ?? (this._compiler.options.name as string); const readDirAsync: AsyncFS['readdir'] = util.promisify(this.fs.readdir); const readFileAsync: AsyncFS['readFile'] = util.promisify(this.fs.readFile); @@ -33,8 +36,6 @@ export default async function repackAssetsLoader( logger.debug(`Processing asset ${this.resourcePath}`); try { - const options = getOptions(this); - // defaults const scalableAssetExtensions = options.scalableAssetExtensions ?? SCALABLE_ASSETS; @@ -58,7 +59,7 @@ export default async function repackAssetsLoader( .relative(this.rootContext, resourceAbsoluteDirname) .replace(new RegExp(`^[\\.\\${path.sep}]+`), ''); const resourceExtensionType = path.extname(resourcePath).replace(/^\./, ''); - const suffixPattern = `(@\\d+(\\.\\d+)?x)?(\\.(${options.platform}|native))?\\.${resourceExtensionType}$`; + const suffixPattern = `(@\\d+(\\.\\d+)?x)?(\\.(${platform}|native))?\\.${resourceExtensionType}$`; const resourceFilename = path .basename(resourcePath) .replace(new RegExp(suffixPattern), ''); @@ -82,7 +83,7 @@ export default async function repackAssetsLoader( resourceExtensionType, scalableAssetExtensions, scalableAssetResolutions, - options.platform, + platform, readDirAsync ); @@ -125,11 +126,7 @@ export default async function repackAssetsLoader( let destination: string; - if ( - !isDev && - !options.remote?.enabled && - options.platform === 'android' - ) { + if (!isDev && !options.remote?.enabled && platform === 'android') { // found font family if ( testXml.test(resourceNormalizedFilename) && @@ -210,7 +207,7 @@ export default async function repackAssetsLoader( logger.debug( `Resolved request ${this.resourcePath}`, JSON.stringify({ - platform: options.platform, + platform, rootContext: this.rootContext, resourceNormalizedFilename, resourceFilename, diff --git a/packages/repack/src/loaders/assetsLoader/options.ts b/packages/repack/src/loaders/assetsLoader/options.ts index be579ab0f..a00446435 100644 --- a/packages/repack/src/loaders/assetsLoader/options.ts +++ b/packages/repack/src/loaders/assetsLoader/options.ts @@ -3,7 +3,7 @@ import { validate } from 'schema-utils'; // Note: publicPath could be obtained from webpack config in the future export interface AssetLoaderOptions { - platform: string; + platform?: string; scalableAssetExtensions?: string[]; scalableAssetResolutions?: string[]; inline?: boolean; @@ -26,7 +26,6 @@ type Schema = Parameters[0]; export const optionsSchema: Schema = { type: 'object', - required: ['platform'], properties: { platform: { type: 'string', diff --git a/templates_v5/rspack.config.cjs b/templates_v5/rspack.config.cjs index 587f28398..cd840a26c 100644 --- a/templates_v5/rspack.config.cjs +++ b/templates_v5/rspack.config.cjs @@ -81,22 +81,9 @@ module.exports = (env) => { }, }, }, - /** - * This loader handles all static assets (images, video, audio and others), so that you can - * use (reference) them inside your application. - * - * If you want to handle specific asset type manually, filter out the extension - * from `ASSET_EXTENSIONS`, for example: - * ``` - * Repack.ASSET_EXTENSIONS.filter((ext) => ext !== 'svg') - * ``` - */ { - test: Repack.getAssetExtensionsRegExp(Repack.ASSET_EXTENSIONS), - use: { - loader: '@callstack/repack/assets-loader', - options: { platform }, - }, + test: Repack.getAssetExtensionsRegExp(), + use: '@callstack/repack/assets-loader', }, ], }, diff --git a/templates_v5/rspack.config.mjs b/templates_v5/rspack.config.mjs index 3bc4feaa4..63d62fe80 100644 --- a/templates_v5/rspack.config.mjs +++ b/templates_v5/rspack.config.mjs @@ -78,22 +78,9 @@ export default (env) => { }, }, }, - /** - * This loader handles all static assets (images, video, audio and others), so that you can - * use (reference) them inside your application. - * - * If you want to handle specific asset type manually, filter out the extension - * from `ASSET_EXTENSIONS`, for example: - * ``` - * Repack.ASSET_EXTENSIONS.filter((ext) => ext !== 'svg') - * ``` - */ { - test: Repack.getAssetExtensionsRegExp(Repack.ASSET_EXTENSIONS), - use: { - loader: '@callstack/repack/assets-loader', - options: { platform }, - }, + test: Repack.getAssetExtensionsRegExp(), + use: '@callstack/repack/assets-loader', }, ], }, diff --git a/templates_v5/webpack.config.cjs b/templates_v5/webpack.config.cjs index 7814fa09e..c6ae110dc 100644 --- a/templates_v5/webpack.config.cjs +++ b/templates_v5/webpack.config.cjs @@ -105,22 +105,9 @@ module.exports = (env) => { exclude: /node_modules/, use: 'babel-loader', }, - /** - * This loader handles all static assets (images, video, audio and others), so that you can - * use (reference) them inside your application. - * - * If you want to handle specific asset type manually, filter out the extension - * from `ASSET_EXTENSIONS`, for example: - * ``` - * Repack.ASSET_EXTENSIONS.filter((ext) => ext !== 'svg') - * ``` - */ { - test: Repack.getAssetExtensionsRegExp(Repack.ASSET_EXTENSIONS), - use: { - loader: '@callstack/repack/assets-loader', - options: { platform }, - }, + test: Repack.getAssetExtensionsRegExp(), + use: '@callstack/repack/assets-loader', }, ], }, diff --git a/templates_v5/webpack.config.mjs b/templates_v5/webpack.config.mjs index 532c16429..c201ac879 100644 --- a/templates_v5/webpack.config.mjs +++ b/templates_v5/webpack.config.mjs @@ -109,22 +109,9 @@ export default (env) => { exclude: /node_modules/, use: 'babel-loader', }, - /** - * This loader handles all static assets (images, video, audio and others), so that you can - * use (reference) them inside your application. - * - * If you want to handle specific asset type manually, filter out the extension - * from `ASSET_EXTENSIONS`, for example: - * ``` - * Repack.ASSET_EXTENSIONS.filter((ext) => ext !== 'svg') - * ``` - */ { - test: Repack.getAssetExtensionsRegExp(Repack.ASSET_EXTENSIONS), - use: { - loader: '@callstack/repack/assets-loader', - options: { platform }, - }, + test: Repack.getAssetExtensionsRegExp(), + use: '@callstack/repack/assets-loader', }, ], },