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
callstack · Feb 13, 2025 · 2cfd84f · 2cfd84f
1 parent 1f470a1
commit 2cfd84f
Show file tree

Hide file tree

Showing 17 changed files with 43 additions and 120 deletions.
diff --git a/.changeset/gorgeous-jeans-complain.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -25,16 +25,17 @@ 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);
 
   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
@@ -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<typeof validate>[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
@@ -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
@@ -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
@@ -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
@@ -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',
         },
       ],
     },