feat: getAssetTransformRules

.changeset/eighty-phones-deny.md

@@ -0,0 +1,5 @@
+---
+"@callstack/repack": minor
+---
+
+Added `getAssetTransformRules` utility function to simplify setting up asset transformation rules in both Webpack and Rspack projects.

apps/tester-federation-v2/configs/rspack.host-app.mjs

@@ -31,10 +31,7 @@ export default (env) => {
     module: {
       rules: [
         ...Repack.getJsTransformRules(),
-        {
-          test: Repack.getAssetExtensionsRegExp(),
-          use: '@callstack/repack/assets-loader',
-        },
+        ...Repack.getAssetTransformRules(),
       ],
     },
     plugins: [

apps/tester-federation-v2/configs/rspack.mini-app.mjs

@@ -31,13 +31,7 @@ export default (env) => {
     module: {
       rules: [
         ...Repack.getJsTransformRules(),
-        {
-          test: Repack.getAssetExtensionsRegExp(),
-          use: {
-            loader: '@callstack/repack/assets-loader',
-            options: { inline: true },
-          },
-        },
+        ...Repack.getAssetTransformRules({ inline: true }),
       ],
     },
     plugins: [

apps/tester-federation-v2/configs/webpack.host-app.mjs

@@ -37,10 +37,7 @@ export default (env) => {
           use: 'babel-loader',
           type: 'javascript/auto',
         },
-        {
-          test: Repack.getAssetExtensionsRegExp(),
-          use: '@callstack/repack/assets-loader',
-        },
+        ...Repack.getAssetTransformRules(),
       ],
     },
     plugins: [

apps/tester-federation-v2/configs/webpack.mini-app.mjs

@@ -37,13 +37,7 @@ export default (env) => {
           use: 'babel-loader',
           type: 'javascript/auto',
         },
-        {
-          test: Repack.getAssetExtensionsRegExp(),
-          use: {
-            loader: '@callstack/repack/assets-loader',
-            options: { inline: true },
-          },
-        },
+        ...Repack.getAssetTransformRules({ inline: true }),
       ],
     },
     plugins: [

apps/tester-federation/configs/rspack.host-app.mjs

@@ -33,10 +33,7 @@ export default (env) => {
     module: {
       rules: [
         ...Repack.getJsTransformRules(),
-        {
-          test: Repack.getAssetExtensionsRegExp(),
-          use: '@callstack/repack/assets-loader',
-        },
+        ...Repack.getAssetTransformRules(),
       ],
     },
     plugins: [

apps/tester-federation/configs/rspack.mini-app.mjs

@@ -33,13 +33,7 @@ export default (env) => {
     module: {
       rules: [
         ...Repack.getJsTransformRules(),
-        {
-          test: Repack.getAssetExtensionsRegExp(),
-          use: {
-            loader: '@callstack/repack/assets-loader',
-            options: { inline: true },
-          },
-        },
+        ...Repack.getAssetTransformRules({ inline: true }),
       ],
     },
     plugins: [

apps/tester-federation/configs/webpack.host-app.mjs

@@ -37,10 +37,7 @@ export default (env) => {
           use: 'babel-loader',
           type: 'javascript/auto',
         },
-        {
-          test: Repack.getAssetExtensionsRegExp(),
-          use: '@callstack/repack/assets-loader',
-        },
+        ...Repack.getAssetTransformRules(),
       ],
     },
     plugins: [

apps/tester-federation/configs/webpack.mini-app.mjs

@@ -37,13 +37,7 @@ export default (env) => {
           use: 'babel-loader',
           type: 'javascript/auto',
         },
-        {
-          test: Repack.getAssetExtensionsRegExp(),
-          use: {
-            loader: '@callstack/repack/assets-loader',
-            options: { inline: true },
-          },
-        },
+        ...Repack.getAssetTransformRules({ inline: true }),
       ],
     },
     plugins: [

packages/repack/src/loaders/assetsLoader/options.ts

@@ -1,23 +1,25 @@
 import type { LoaderContext } from '@rspack/core';
 import { validate } from 'schema-utils';
 
+export interface AssetLoaderRemoteOptions {
+  enabled: boolean;
+  assetPath?: (args: {
+    resourcePath: string;
+    resourceFilename: string;
+    resourceDirname: string;
+    resourceExtensionType: string;
+  }) => string;
+  publicPath: string;
+}
+
 // Note: publicPath could be obtained from webpack config in the future
 export interface AssetLoaderOptions {
   platform?: string;
   scalableAssetExtensions?: string[];
   scalableAssetResolutions?: string[];
   inline?: boolean;
   publicPath?: string;
-  remote?: {
-    enabled: boolean;
-    assetPath?: (args: {
-      resourcePath: string;
-      resourceFilename: string;
-      resourceDirname: string;
-      resourceExtensionType: string;
-    }) => string;
-    publicPath: string;
-  };
+  remote?: AssetLoaderRemoteOptions;
 }
 
 export interface AssetLoaderContext extends LoaderContext<AssetLoaderOptions> {}

packages/repack/src/utils/__tests__/__snapshots__/getAssetTransformRules.test.ts.snap

@@ -0,0 +1,111 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`getAssetTransformRules should add SVGR rule when svg="svgr" 1`] = `
+[
+  {
+    "test": /\\\\\\.\\(bmp\\|gif\\|jpg\\|jpeg\\|png\\|psd\\|webp\\|tiff\\|m4v\\|mov\\|mp4\\|mpeg\\|mpg\\|webm\\|aac\\|aiff\\|caf\\|m4a\\|mp3\\|wav\\|html\\|pdf\\|yaml\\|yml\\|otf\\|ttf\\|zip\\|obj\\)\\$/,
+    "use": {
+      "loader": "@callstack/repack/assets-loader",
+      "options": {
+        "inline": undefined,
+        "remote": undefined,
+      },
+    },
+  },
+  {
+    "test": /\\\\\\.svg\\$/,
+    "use": {
+      "loader": "@svgr/webpack",
+      "options": {
+        "native": true,
+      },
+    },
+  },
+]
+`;
+
+exports[`getAssetTransformRules should add URI rule when svg="uri" 1`] = `
+[
+  {
+    "test": /\\\\\\.\\(bmp\\|gif\\|jpg\\|jpeg\\|png\\|psd\\|webp\\|tiff\\|m4v\\|mov\\|mp4\\|mpeg\\|mpg\\|webm\\|aac\\|aiff\\|caf\\|m4a\\|mp3\\|wav\\|html\\|pdf\\|yaml\\|yml\\|otf\\|ttf\\|zip\\|obj\\)\\$/,
+    "use": {
+      "loader": "@callstack/repack/assets-loader",
+      "options": {
+        "inline": undefined,
+        "remote": undefined,
+      },
+    },
+  },
+  {
+    "test": /\\\\\\.svg\\$/,
+    "type": "asset/inline",
+  },
+]
+`;
+
+exports[`getAssetTransformRules should add XML rule when svg="xml" 1`] = `
+[
+  {
+    "test": /\\\\\\.\\(bmp\\|gif\\|jpg\\|jpeg\\|png\\|psd\\|webp\\|tiff\\|m4v\\|mov\\|mp4\\|mpeg\\|mpg\\|webm\\|aac\\|aiff\\|caf\\|m4a\\|mp3\\|wav\\|html\\|pdf\\|yaml\\|yml\\|otf\\|ttf\\|zip\\|obj\\)\\$/,
+    "use": {
+      "loader": "@callstack/repack/assets-loader",
+      "options": {
+        "inline": undefined,
+        "remote": undefined,
+      },
+    },
+  },
+  {
+    "test": /\\\\\\.svg\\$/,
+    "type": "asset/source",
+  },
+]
+`;
+
+exports[`getAssetTransformRules should return default asset transform rules when no options provided 1`] = `
+[
+  {
+    "test": /\\\\\\.\\(bmp\\|gif\\|jpg\\|jpeg\\|png\\|psd\\|svg\\|webp\\|tiff\\|m4v\\|mov\\|mp4\\|mpeg\\|mpg\\|webm\\|aac\\|aiff\\|caf\\|m4a\\|mp3\\|wav\\|html\\|pdf\\|yaml\\|yml\\|otf\\|ttf\\|zip\\|obj\\)\\$/,
+    "use": {
+      "loader": "@callstack/repack/assets-loader",
+      "options": {
+        "inline": undefined,
+        "remote": undefined,
+      },
+    },
+  },
+]
+`;
+
+exports[`getAssetTransformRules should return rules with inline option when provided 1`] = `
+[
+  {
+    "test": /\\\\\\.\\(bmp\\|gif\\|jpg\\|jpeg\\|png\\|psd\\|svg\\|webp\\|tiff\\|m4v\\|mov\\|mp4\\|mpeg\\|mpg\\|webm\\|aac\\|aiff\\|caf\\|m4a\\|mp3\\|wav\\|html\\|pdf\\|yaml\\|yml\\|otf\\|ttf\\|zip\\|obj\\)\\$/,
+    "use": {
+      "loader": "@callstack/repack/assets-loader",
+      "options": {
+        "inline": true,
+        "remote": undefined,
+      },
+    },
+  },
+]
+`;
+
+exports[`getAssetTransformRules should return rules with remote options when provided 1`] = `
+[
+  {
+    "test": /\\\\\\.\\(bmp\\|gif\\|jpg\\|jpeg\\|png\\|psd\\|svg\\|webp\\|tiff\\|m4v\\|mov\\|mp4\\|mpeg\\|mpg\\|webm\\|aac\\|aiff\\|caf\\|m4a\\|mp3\\|wav\\|html\\|pdf\\|yaml\\|yml\\|otf\\|ttf\\|zip\\|obj\\)\\$/,
+    "use": {
+      "loader": "@callstack/repack/assets-loader",
+      "options": {
+        "inline": undefined,
+        "remote": {
+          "enabled": true,
+          "publicPath": "https://example.com/assets",
+        },
+      },
+    },
+  },
+]
+`;

packages/repack/src/utils/__tests__/getAssetTransformRules.test.ts

@@ -0,0 +1,57 @@
+import { getAssetTransformRules } from '../getAssetTransformRules.js';
+
+describe('getAssetTransformRules', () => {
+  it('should return default asset transform rules when no options provided', () => {
+    const rules = getAssetTransformRules();
+    expect(rules).toMatchSnapshot();
+  });
+
+  it('should return rules with inline option when provided', () => {
+    const rules = getAssetTransformRules({ inline: true });
+
+    // @ts-ignore
+    expect(rules[0]?.use?.options?.inline).toEqual(true);
+    expect(rules).toMatchSnapshot();
+  });
+
+  it('should return rules with remote options when provided', () => {
+    const remoteOptions = { publicPath: 'https://example.com/assets' };
+    const rules = getAssetTransformRules({ remote: remoteOptions });
+
+    // @ts-ignore
+    expect(rules[0]?.use?.options?.remote).toHaveProperty('enabled', true);
+    expect(rules).toMatchSnapshot();
+  });
+
+  it('should add SVGR rule when svg="svgr"', () => {
+    const rules = getAssetTransformRules({ svg: 'svgr' });
+
+    expect(rules).toHaveLength(2);
+    expect(rules[1]?.use?.loader).toEqual('@svgr/webpack');
+    expect(rules).toMatchSnapshot();
+  });
+
+  it('should add XML rule when svg="xml"', () => {
+    const rules = getAssetTransformRules({ svg: 'xml' });
+
+    expect(rules).toHaveLength(2);
+    // @ts-ignore
+    expect(rules[1]?.type).toEqual('asset/source');
+    expect(rules).toMatchSnapshot();
+  });
+
+  it('should add URI rule when svg="uri"', () => {
+    const rules = getAssetTransformRules({ svg: 'uri' });
+
+    expect(rules).toHaveLength(2);
+    // @ts-ignore
+    expect(rules[1]?.type).toEqual('asset/inline');
+    expect(rules).toMatchSnapshot();
+  });
+
+  it('should exclude .svg from main asset extensions when svg option is provided', () => {
+    const rules = getAssetTransformRules({ svg: 'uri' });
+    const ruleTest = rules[0]?.test;
+    expect(ruleTest.test('test.svg')).toEqual(false);
+  });
+});