refactor: split getRequireString into its own function

Author: Calvin-LL

package-lock.json

@@ -0,0 +1,71 @@
+import { parseQuery } from "loader-utils";
+
+import { FullOptions } from "..";
+
+// look through remaining loaders and add options to resize loader
+export default function getRequireStringWithModifiedResizeLoaderOptions(
+ remainingRequest: string,
+ loaders: {
+ path: string;
+ request: string;
+ options?: Record<string, any> | string;
+ }[],
+ loaderIndex: number,
+ options: { width?: number; scale?: number },
+ resizeLoaderName: string,
+ customOptionsFactory: FullOptions["customOptionsFactory"]
+): string {
+ const resizeLoaderResolvedPath = require.resolve(resizeLoaderName);
+ const resizeLoader = loaders.find(
+ ({ path }, index) =>
+ index > loaderIndex && path === resizeLoaderResolvedPath
+ );
+
+ if (resizeLoader === undefined)
+ throw new Error(`Can't find ${resizeLoaderName} in the list of loaders`);
+
+ const resizeLoaderOptions =
+ typeof resizeLoader.options === "string"
+ ? parseQuery("?" + resizeLoader.options)
+ : resizeLoader.options;
+ const resizeLoaderRequest = resizeLoader.request;
+ const resizeLoaderPath = resizeLoader.path;
+
+ if (customOptionsFactory)
+ return remainingRequest.replace(
+ resizeLoaderRequest,
+ resizeLoaderPath +
+ "?" +
+ escapeJsonStringForLoader(
+ JSON.stringify(
+ customOptionsFactory(
+ options.width,
+ options.scale,
+ resizeLoaderOptions
+ )
+ )
+ )
+ );
+
+ return remainingRequest.replace(
+ resizeLoaderRequest,
+ resizeLoaderPath +
+ "?" +
+ escapeJsonStringForLoader(
+ JSON.stringify({
+ scaleUp: true,
+ ...resizeLoaderOptions,
+ ...options,
+ fileLoaderOptions: {
+ ...resizeLoaderOptions?.fileLoaderOptions,
+ esModule: false, // because we're using require in pitch
+ },
+ })
+ )
+ );
+}
+
+// needed so webpack doesn't mistake "!" for query operator "!"
+function escapeJsonStringForLoader(s: string): string {
+ return s.replace(/!/g, "\\\\x21");
+}

src/helpers/getRequireStringWithModifiedResizeLoaderOptions.ts

@@ -1,4 +1,3 @@
-import { parseQuery } from "loader-utils";
 import { validate } from "schema-utils";
 import { Schema } from "schema-utils/declarations/validate";
 import sharp from "sharp";
@@ -8,24 +7,24 @@ import { getOptions } from "@calvin-l/webpack-loader-util";
 
 import getMaxDensity from "./helpers/getMaxDensity";
 import getOptionFromSize from "./helpers/getOptionFromSize";
+import getRequireString from "./helpers/getRequireStringWithModifiedResizeLoaderOptions";
 import validateSizes from "./helpers/validateSizes";
 import schema from "./options.json";
 
 export interface Options {
- // Waiting for typescript 4.2.0 to fix https://github.com/microsoft/TypeScript/issues/41651
- // readonly sizes?: (`${number}w` | `${number}x` | "original")[];
- readonly sizes?: string[];
+ readonly sizes?: (`${number}w` | `${number}x` | "original")[];
  readonly scaleUp?: boolean;
+ readonly resizeLoader?: string;
  readonly customOptionsFactory?: (
  width: number | undefined,
  scale: number | undefined,
  existingOptions: Record<string, any> | undefined
- ) => string;
+ ) => Record<string, any>;
  readonly esModule?: boolean;
 }
 
 export type FullOptions = Options &
- Required<Pick<Options, "sizes" | "scaleUp" | "esModule">>;
+ Required<Pick<Options, "sizes" | "scaleUp" | "resizeLoader" | "esModule">>;
 
 export const raw = true;
 
@@ -38,6 +37,7 @@ export function pitch(
  // @ts-expect-error setting sizes as undefined and let validate throw error if it doesn't exist
  sizes: undefined,
  scaleUp: false,
+ resizeLoader: "webpack-image-resize-loader",
  esModule: true,
  };
  const options: FullOptions = {
@@ -77,6 +77,7 @@ export default function (this: loader.LoaderContext, source: Buffer): Buffer {
  return source;
 }
 
+// return require('-!some-loader?{...}!resize-loader?{...}!file.png')
 async function generateSrcSetString(
  remainingRequest: string,
  loaders: any[],
@@ -95,12 +96,14 @@ async function generateSrcSetString(
  const requireEnd = "')}";
 
  for (const size of sizes) {
+ // no need for options.scale or options.width if size === "orignal"
  if (size === "original") {
- result += `${requireStart}${addOptionsToResizeLoader(
+ result += `${requireStart}${getRequireString(
  remainingRequest,
  loaders,
  loaderIndex,
  {},
+ options.resizeLoader,
  options.customOptionsFactory
  )}${requireEnd}${separator}`;
 
@@ -118,11 +121,12 @@ async function generateSrcSetString(
  if (width !== undefined && resizeLoaderOption.width > width) continue;
  }
 
- result += `${requireStart}${addOptionsToResizeLoader(
+ result += `${requireStart}${getRequireString(
  remainingRequest,
  loaders,
  loaderIndex,
  resizeLoaderOption,
+ options.resizeLoader,
  options.customOptionsFactory
  )}${requireEnd} ${size}${separator}`;
  }
@@ -131,58 +135,3 @@ async function generateSrcSetString(
 
  return result;
 }
-
-function addOptionsToResizeLoader(
- remainingRequest: string,
- loaders: any[],
- loaderIndex: number,
- options: { width?: number; scale?: number },
- customOptionsFactory: FullOptions["customOptionsFactory"]
-): string {
- const nextLoader = loaders[loaderIndex + 1];
-
- const resizeLoaderOptions =
- typeof nextLoader.options === "string"
- ? parseQuery("?" + nextLoader.options)
- : nextLoader.options;
- const resizeLoaderRequest = nextLoader.request;
- const resizeLoaderPath = nextLoader.path;
-
- if (customOptionsFactory)
- return remainingRequest.replace(
- resizeLoaderRequest,
- resizeLoaderPath +
- "?" +
- escapeJsonStringForLoader(
- JSON.stringify(
- customOptionsFactory(
- options.width,
- options.scale,
- resizeLoaderOptions
- )
- )
- )
- );
-
- return remainingRequest.replace(
- resizeLoaderRequest,
- resizeLoaderPath +
- "?" +
- escapeJsonStringForLoader(
- JSON.stringify({
- scaleUp: true,
- ...resizeLoaderOptions,
- ...options,
- fileLoaderOptions: {
- ...resizeLoaderOptions?.fileLoaderOptions,
- esModule: false, // because we're using require in pitch
- },
- })
- )
- );
-}
-
-// needed so webpack doesn't mistake "!" for query operator "!"
-function escapeJsonStringForLoader(s: string): string {
- return s.replace(/!/g, "\\\\x21");
-}

src/index.ts

@@ -14,6 +14,10 @@
  "description": "Whether or not to scale up the image when the desired size is larger than the image size. Default to false.",
  "type": "boolean"
  },
+ "resizeLoader": {
+ "description": "Name of resize loader. Default to \"webpack-image-resize-loader\".",
+ "type": "string"
+ },
  "customOptionsFactory": {
  "description": "A function that returns the option to be passed on to the next loader.",
  "instanceof": "Function"

src/options.json

@@ -4,7 +4,11 @@ describe.each([4, 5] as const)(
  'v%d "customOptionsFactory" option',
  (webpackVersion) => {
  it("should work with a function", async () => {
- const mockCustomOptionsFactory = jest.fn().mockReturnValue({
+ const mockCustomOptionsFactory: (
+ width: number | undefined,
+ scale: number | undefined,
+ existingOptions: Record<string, any>
+ ) => Record<string, any> = jest.fn().mockReturnValue({
  fileLoaderOptions: {
  esModule: false,
  },
@@ -17,7 +21,7 @@ describe.each([4, 5] as const)(
  customOptionsFactory: (
  width: number | undefined,
  scale: number | undefined,
- existingOptions: Record<string, unknown>
+ existingOptions: Record<string, any>
  ) => mockCustomOptionsFactory(width, scale, existingOptions),
  },
  });