@serwist/next 9.0.0-preview.0 → 9.0.0-preview.10

package/dist/index.js

@@ -1,23 +1,15 @@
+import fs from 'node:fs';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { validateNextInjectManifestOptions } from '@serwist/build/next';
 import { InjectManifest } from '@serwist/webpack-plugin';
 import { ChildCompilationPlugin, relativeToOutputPath } from '@serwist/webpack-plugin/internal';
-import { CleanWebpackPlugin } from 'clean-webpack-plugin';
-import fg from 'fast-glob';
+import { globSync } from 'glob';
 import crypto from 'node:crypto';
-import fs from 'node:fs';
 import { createRequire } from 'node:module';
-import process from 'node:process';
-import os from 'node:os';
-import tty from 'node:tty';
+import chalk from 'chalk';
 
-/**
- * Find the first truthy value in an array.
- * @param arr
- * @param fn
- * @returns
- */ const findFirstTruthy = (arr, fn)=>{
+const findFirstTruthy = (arr, fn)=>{
     for (const i of arr){
         const resolved = fn(i);
         if (resolved) {
@@ -40,7 +32,6 @@ createRequire(import.meta.url);
 
 const loadTSConfig = (baseDir, relativeTSConfigPath)=>{
     try {
-        // Find tsconfig.json file
         const tsConfigPath = findFirstTruthy([
             relativeTSConfigPath ?? "tsconfig.json",
             "jsconfig.json"
@@ -51,7 +42,6 @@ const loadTSConfig = (baseDir, relativeTSConfigPath)=>{
         if (!tsConfigPath) {
             return undefined;
         }
-        // Read tsconfig.json file
         const tsConfigFile = JSON.parse(fs.readFileSync(tsConfigPath, "utf-8"));
         return tsConfigFile;
     } catch  {
@@ -59,668 +49,6 @@ const loadTSConfig = (baseDir, relativeTSConfigPath)=>{
     }
 };
 
-const ANSI_BACKGROUND_OFFSET = 10;
-const wrapAnsi16 = (offset = 0)=>(code)=>`\u001B[${code + offset}m`;
-const wrapAnsi256 = (offset = 0)=>(code)=>`\u001B[${38 + offset};5;${code}m`;
-const wrapAnsi16m = (offset = 0)=>(red, green, blue)=>`\u001B[${38 + offset};2;${red};${green};${blue}m`;
-const styles$1 = {
-    modifier: {
-        reset: [
-            0,
-            0
-        ],
-        // 21 isn't widely supported and 22 does the same thing
-        bold: [
-            1,
-            22
-        ],
-        dim: [
-            2,
-            22
-        ],
-        italic: [
-            3,
-            23
-        ],
-        underline: [
-            4,
-            24
-        ],
-        overline: [
-            53,
-            55
-        ],
-        inverse: [
-            7,
-            27
-        ],
-        hidden: [
-            8,
-            28
-        ],
-        strikethrough: [
-            9,
-            29
-        ]
-    },
-    color: {
-        black: [
-            30,
-            39
-        ],
-        red: [
-            31,
-            39
-        ],
-        green: [
-            32,
-            39
-        ],
-        yellow: [
-            33,
-            39
-        ],
-        blue: [
-            34,
-            39
-        ],
-        magenta: [
-            35,
-            39
-        ],
-        cyan: [
-            36,
-            39
-        ],
-        white: [
-            37,
-            39
-        ],
-        // Bright color
-        blackBright: [
-            90,
-            39
-        ],
-        gray: [
-            90,
-            39
-        ],
-        grey: [
-            90,
-            39
-        ],
-        redBright: [
-            91,
-            39
-        ],
-        greenBright: [
-            92,
-            39
-        ],
-        yellowBright: [
-            93,
-            39
-        ],
-        blueBright: [
-            94,
-            39
-        ],
-        magentaBright: [
-            95,
-            39
-        ],
-        cyanBright: [
-            96,
-            39
-        ],
-        whiteBright: [
-            97,
-            39
-        ]
-    },
-    bgColor: {
-        bgBlack: [
-            40,
-            49
-        ],
-        bgRed: [
-            41,
-            49
-        ],
-        bgGreen: [
-            42,
-            49
-        ],
-        bgYellow: [
-            43,
-            49
-        ],
-        bgBlue: [
-            44,
-            49
-        ],
-        bgMagenta: [
-            45,
-            49
-        ],
-        bgCyan: [
-            46,
-            49
-        ],
-        bgWhite: [
-            47,
-            49
-        ],
-        // Bright color
-        bgBlackBright: [
-            100,
-            49
-        ],
-        bgGray: [
-            100,
-            49
-        ],
-        bgGrey: [
-            100,
-            49
-        ],
-        bgRedBright: [
-            101,
-            49
-        ],
-        bgGreenBright: [
-            102,
-            49
-        ],
-        bgYellowBright: [
-            103,
-            49
-        ],
-        bgBlueBright: [
-            104,
-            49
-        ],
-        bgMagentaBright: [
-            105,
-            49
-        ],
-        bgCyanBright: [
-            106,
-            49
-        ],
-        bgWhiteBright: [
-            107,
-            49
-        ]
-    }
-};
-Object.keys(styles$1.modifier);
-const foregroundColorNames = Object.keys(styles$1.color);
-const backgroundColorNames = Object.keys(styles$1.bgColor);
-[
-    ...foregroundColorNames,
-    ...backgroundColorNames
-];
-function assembleStyles() {
-    const codes = new Map();
-    for (const [groupName, group] of Object.entries(styles$1)){
-        for (const [styleName, style] of Object.entries(group)){
-            styles$1[styleName] = {
-                open: `\u001B[${style[0]}m`,
-                close: `\u001B[${style[1]}m`
-            };
-            group[styleName] = styles$1[styleName];
-            codes.set(style[0], style[1]);
-        }
-        Object.defineProperty(styles$1, groupName, {
-            value: group,
-            enumerable: false
-        });
-    }
-    Object.defineProperty(styles$1, 'codes', {
-        value: codes,
-        enumerable: false
-    });
-    styles$1.color.close = '\u001B[39m';
-    styles$1.bgColor.close = '\u001B[49m';
-    styles$1.color.ansi = wrapAnsi16();
-    styles$1.color.ansi256 = wrapAnsi256();
-    styles$1.color.ansi16m = wrapAnsi16m();
-    styles$1.bgColor.ansi = wrapAnsi16(ANSI_BACKGROUND_OFFSET);
-    styles$1.bgColor.ansi256 = wrapAnsi256(ANSI_BACKGROUND_OFFSET);
-    styles$1.bgColor.ansi16m = wrapAnsi16m(ANSI_BACKGROUND_OFFSET);
-    // From https://github.com/Qix-/color-convert/blob/3f0e0d4e92e235796ccb17f6e85c72094a651f49/conversions.js
-    Object.defineProperties(styles$1, {
-        rgbToAnsi256: {
-            value (red, green, blue) {
-                // We use the extended greyscale palette here, with the exception of
-                // black and white. normal palette only has 4 greyscale shades.
-                if (red === green && green === blue) {
-                    if (red < 8) {
-                        return 16;
-                    }
-                    if (red > 248) {
-                        return 231;
-                    }
-                    return Math.round((red - 8) / 247 * 24) + 232;
-                }
-                return 16 + 36 * Math.round(red / 255 * 5) + 6 * Math.round(green / 255 * 5) + Math.round(blue / 255 * 5);
-            },
-            enumerable: false
-        },
-        hexToRgb: {
-            value (hex) {
-                const matches = /[a-f\d]{6}|[a-f\d]{3}/i.exec(hex.toString(16));
-                if (!matches) {
-                    return [
-                        0,
-                        0,
-                        0
-                    ];
-                }
-                let [colorString] = matches;
-                if (colorString.length === 3) {
-                    colorString = [
-                        ...colorString
-                    ].map((character)=>character + character).join('');
-                }
-                const integer = Number.parseInt(colorString, 16);
-                return [
-                    /* eslint-disable no-bitwise */ integer >> 16 & 0xFF,
-                    integer >> 8 & 0xFF,
-                    integer & 0xFF
-                ];
-            },
-            enumerable: false
-        },
-        hexToAnsi256: {
-            value: (hex)=>styles$1.rgbToAnsi256(...styles$1.hexToRgb(hex)),
-            enumerable: false
-        },
-        ansi256ToAnsi: {
-            value (code) {
-                if (code < 8) {
-                    return 30 + code;
-                }
-                if (code < 16) {
-                    return 90 + (code - 8);
-                }
-                let red;
-                let green;
-                let blue;
-                if (code >= 232) {
-                    red = ((code - 232) * 10 + 8) / 255;
-                    green = red;
-                    blue = red;
-                } else {
-                    code -= 16;
-                    const remainder = code % 36;
-                    red = Math.floor(code / 36) / 5;
-                    green = Math.floor(remainder / 6) / 5;
-                    blue = remainder % 6 / 5;
-                }
-                const value = Math.max(red, green, blue) * 2;
-                if (value === 0) {
-                    return 30;
-                }
-                // eslint-disable-next-line no-bitwise
-                let result = 30 + (Math.round(blue) << 2 | Math.round(green) << 1 | Math.round(red));
-                if (value === 2) {
-                    result += 60;
-                }
-                return result;
-            },
-            enumerable: false
-        },
-        rgbToAnsi: {
-            value: (red, green, blue)=>styles$1.ansi256ToAnsi(styles$1.rgbToAnsi256(red, green, blue)),
-            enumerable: false
-        },
-        hexToAnsi: {
-            value: (hex)=>styles$1.ansi256ToAnsi(styles$1.hexToAnsi256(hex)),
-            enumerable: false
-        }
-    });
-    return styles$1;
-}
-const ansiStyles = assembleStyles();
-
-// From: https://github.com/sindresorhus/has-flag/blob/main/index.js
-/// function hasFlag(flag, argv = globalThis.Deno?.args ?? process.argv) {
-function hasFlag(flag, argv = globalThis.Deno ? globalThis.Deno.args : process.argv) {
-    const prefix = flag.startsWith('-') ? '' : flag.length === 1 ? '-' : '--';
-    const position = argv.indexOf(prefix + flag);
-    const terminatorPosition = argv.indexOf('--');
-    return position !== -1 && (terminatorPosition === -1 || position < terminatorPosition);
-}
-const { env } = process;
-let flagForceColor;
-if (hasFlag('no-color') || hasFlag('no-colors') || hasFlag('color=false') || hasFlag('color=never')) {
-    flagForceColor = 0;
-} else if (hasFlag('color') || hasFlag('colors') || hasFlag('color=true') || hasFlag('color=always')) {
-    flagForceColor = 1;
-}
-function envForceColor() {
-    if ('FORCE_COLOR' in env) {
-        if (env.FORCE_COLOR === 'true') {
-            return 1;
-        }
-        if (env.FORCE_COLOR === 'false') {
-            return 0;
-        }
-        return env.FORCE_COLOR.length === 0 ? 1 : Math.min(Number.parseInt(env.FORCE_COLOR, 10), 3);
-    }
-}
-function translateLevel(level) {
-    if (level === 0) {
-        return false;
-    }
-    return {
-        level,
-        hasBasic: true,
-        has256: level >= 2,
-        has16m: level >= 3
-    };
-}
-function _supportsColor(haveStream, { streamIsTTY, sniffFlags = true } = {}) {
-    const noFlagForceColor = envForceColor();
-    if (noFlagForceColor !== undefined) {
-        flagForceColor = noFlagForceColor;
-    }
-    const forceColor = sniffFlags ? flagForceColor : noFlagForceColor;
-    if (forceColor === 0) {
-        return 0;
-    }
-    if (sniffFlags) {
-        if (hasFlag('color=16m') || hasFlag('color=full') || hasFlag('color=truecolor')) {
-            return 3;
-        }
-        if (hasFlag('color=256')) {
-            return 2;
-        }
-    }
-    // Check for Azure DevOps pipelines.
-    // Has to be above the `!streamIsTTY` check.
-    if ('TF_BUILD' in env && 'AGENT_NAME' in env) {
-        return 1;
-    }
-    if (haveStream && !streamIsTTY && forceColor === undefined) {
-        return 0;
-    }
-    const min = forceColor || 0;
-    if (env.TERM === 'dumb') {
-        return min;
-    }
-    if (process.platform === 'win32') {
-        // Windows 10 build 10586 is the first Windows release that supports 256 colors.
-        // Windows 10 build 14931 is the first release that supports 16m/TrueColor.
-        const osRelease = os.release().split('.');
-        if (Number(osRelease[0]) >= 10 && Number(osRelease[2]) >= 10_586) {
-            return Number(osRelease[2]) >= 14_931 ? 3 : 2;
-        }
-        return 1;
-    }
-    if ('CI' in env) {
-        if ('GITHUB_ACTIONS' in env || 'GITEA_ACTIONS' in env) {
-            return 3;
-        }
-        if ([
-            'TRAVIS',
-            'CIRCLECI',
-            'APPVEYOR',
-            'GITLAB_CI',
-            'BUILDKITE',
-            'DRONE'
-        ].some((sign)=>sign in env) || env.CI_NAME === 'codeship') {
-            return 1;
-        }
-        return min;
-    }
-    if ('TEAMCITY_VERSION' in env) {
-        return /^(9\.(0*[1-9]\d*)\.|\d{2,}\.)/.test(env.TEAMCITY_VERSION) ? 1 : 0;
-    }
-    if (env.COLORTERM === 'truecolor') {
-        return 3;
-    }
-    if (env.TERM === 'xterm-kitty') {
-        return 3;
-    }
-    if ('TERM_PROGRAM' in env) {
-        const version = Number.parseInt((env.TERM_PROGRAM_VERSION || '').split('.')[0], 10);
-        switch(env.TERM_PROGRAM){
-            case 'iTerm.app':
-                {
-                    return version >= 3 ? 3 : 2;
-                }
-            case 'Apple_Terminal':
-                {
-                    return 2;
-                }
-        }
-    }
-    if (/-256(color)?$/i.test(env.TERM)) {
-        return 2;
-    }
-    if (/^screen|^xterm|^vt100|^vt220|^rxvt|color|ansi|cygwin|linux/i.test(env.TERM)) {
-        return 1;
-    }
-    if ('COLORTERM' in env) {
-        return 1;
-    }
-    return min;
-}
-function createSupportsColor(stream, options = {}) {
-    const level = _supportsColor(stream, {
-        streamIsTTY: stream && stream.isTTY,
-        ...options
-    });
-    return translateLevel(level);
-}
-const supportsColor = {
-    stdout: createSupportsColor({
-        isTTY: tty.isatty(1)
-    }),
-    stderr: createSupportsColor({
-        isTTY: tty.isatty(2)
-    })
-};
-
-// TODO: When targeting Node.js 16, use `String.prototype.replaceAll`.
-function stringReplaceAll(string, substring, replacer) {
-    let index = string.indexOf(substring);
-    if (index === -1) {
-        return string;
-    }
-    const substringLength = substring.length;
-    let endIndex = 0;
-    let returnValue = '';
-    do {
-        returnValue += string.slice(endIndex, index) + substring + replacer;
-        endIndex = index + substringLength;
-        index = string.indexOf(substring, endIndex);
-    }while (index !== -1)
-    returnValue += string.slice(endIndex);
-    return returnValue;
-}
-function stringEncaseCRLFWithFirstIndex(string, prefix, postfix, index) {
-    let endIndex = 0;
-    let returnValue = '';
-    do {
-        const gotCR = string[index - 1] === '\r';
-        returnValue += string.slice(endIndex, gotCR ? index - 1 : index) + prefix + (gotCR ? '\r\n' : '\n') + postfix;
-        endIndex = index + 1;
-        index = string.indexOf('\n', endIndex);
-    }while (index !== -1)
-    returnValue += string.slice(endIndex);
-    return returnValue;
-}
-
-const { stdout: stdoutColor, stderr: stderrColor } = supportsColor;
-const GENERATOR = Symbol('GENERATOR');
-const STYLER = Symbol('STYLER');
-const IS_EMPTY = Symbol('IS_EMPTY');
-// `supportsColor.level` → `ansiStyles.color[name]` mapping
-const levelMapping = [
-    'ansi',
-    'ansi',
-    'ansi256',
-    'ansi16m'
-];
-const styles = Object.create(null);
-const applyOptions = (object, options = {})=>{
-    if (options.level && !(Number.isInteger(options.level) && options.level >= 0 && options.level <= 3)) {
-        throw new Error('The `level` option should be an integer from 0 to 3');
-    }
-    // Detect level if not set manually
-    const colorLevel = stdoutColor ? stdoutColor.level : 0;
-    object.level = options.level === undefined ? colorLevel : options.level;
-};
-const chalkFactory = (options)=>{
-    const chalk = (...strings)=>strings.join(' ');
-    applyOptions(chalk, options);
-    Object.setPrototypeOf(chalk, createChalk.prototype);
-    return chalk;
-};
-function createChalk(options) {
-    return chalkFactory(options);
-}
-Object.setPrototypeOf(createChalk.prototype, Function.prototype);
-for (const [styleName, style] of Object.entries(ansiStyles)){
-    styles[styleName] = {
-        get () {
-            const builder = createBuilder(this, createStyler(style.open, style.close, this[STYLER]), this[IS_EMPTY]);
-            Object.defineProperty(this, styleName, {
-                value: builder
-            });
-            return builder;
-        }
-    };
-}
-styles.visible = {
-    get () {
-        const builder = createBuilder(this, this[STYLER], true);
-        Object.defineProperty(this, 'visible', {
-            value: builder
-        });
-        return builder;
-    }
-};
-const getModelAnsi = (model, level, type, ...arguments_)=>{
-    if (model === 'rgb') {
-        if (level === 'ansi16m') {
-            return ansiStyles[type].ansi16m(...arguments_);
-        }
-        if (level === 'ansi256') {
-            return ansiStyles[type].ansi256(ansiStyles.rgbToAnsi256(...arguments_));
-        }
-        return ansiStyles[type].ansi(ansiStyles.rgbToAnsi(...arguments_));
-    }
-    if (model === 'hex') {
-        return getModelAnsi('rgb', level, type, ...ansiStyles.hexToRgb(...arguments_));
-    }
-    return ansiStyles[type][model](...arguments_);
-};
-const usedModels = [
-    'rgb',
-    'hex',
-    'ansi256'
-];
-for (const model of usedModels){
-    styles[model] = {
-        get () {
-            const { level } = this;
-            return function(...arguments_) {
-                const styler = createStyler(getModelAnsi(model, levelMapping[level], 'color', ...arguments_), ansiStyles.color.close, this[STYLER]);
-                return createBuilder(this, styler, this[IS_EMPTY]);
-            };
-        }
-    };
-    const bgModel = 'bg' + model[0].toUpperCase() + model.slice(1);
-    styles[bgModel] = {
-        get () {
-            const { level } = this;
-            return function(...arguments_) {
-                const styler = createStyler(getModelAnsi(model, levelMapping[level], 'bgColor', ...arguments_), ansiStyles.bgColor.close, this[STYLER]);
-                return createBuilder(this, styler, this[IS_EMPTY]);
-            };
-        }
-    };
-}
-const proto = Object.defineProperties(()=>{}, {
-    ...styles,
-    level: {
-        enumerable: true,
-        get () {
-            return this[GENERATOR].level;
-        },
-        set (level) {
-            this[GENERATOR].level = level;
-        }
-    }
-});
-const createStyler = (open, close, parent)=>{
-    let openAll;
-    let closeAll;
-    if (parent === undefined) {
-        openAll = open;
-        closeAll = close;
-    } else {
-        openAll = parent.openAll + open;
-        closeAll = close + parent.closeAll;
-    }
-    return {
-        open,
-        close,
-        openAll,
-        closeAll,
-        parent
-    };
-};
-const createBuilder = (self, _styler, _isEmpty)=>{
-    // Single argument is hot path, implicit coercion is faster than anything
-    // eslint-disable-next-line no-implicit-coercion
-    const builder = (...arguments_)=>applyStyle(builder, arguments_.length === 1 ? '' + arguments_[0] : arguments_.join(' '));
-    // We alter the prototype because we must return a function, but there is
-    // no way to create a function with a different prototype
-    Object.setPrototypeOf(builder, proto);
-    builder[GENERATOR] = self;
-    builder[STYLER] = _styler;
-    builder[IS_EMPTY] = _isEmpty;
-    return builder;
-};
-const applyStyle = (self, string)=>{
-    if (self.level <= 0 || !string) {
-        return self[IS_EMPTY] ? '' : string;
-    }
-    let styler = self[STYLER];
-    if (styler === undefined) {
-        return string;
-    }
-    const { openAll, closeAll } = styler;
-    if (string.includes('\u001B')) {
-        while(styler !== undefined){
-            // Replace any instances already present with a re-opening code
-            // otherwise only the part of the string until said closing code
-            // will be colored, and the rest will simply be 'plain'.
-            string = stringReplaceAll(string, styler.close, styler.open);
-            styler = styler.parent;
-        }
-    }
-    // We can move both next actions out of loop, because remaining actions in loop won't have
-    // any/visible effect on parts we add here. Close the styling before a linebreak and reopen
-    // after next line to fix a bleed issue on macOS: https://github.com/chalk/chalk/pull/92
-    const lfIndex = string.indexOf('\n');
-    if (lfIndex !== -1) {
-        string = stringEncaseCRLFWithFirstIndex(string, closeAll, openAll, lfIndex);
-    }
-    return openAll + string + closeAll;
-};
-Object.defineProperties(createChalk.prototype, styles);
-const chalk = createChalk();
-createChalk({
-    level: stderrColor ? stderrColor.level : 0
-});
-
 const mapLoggingMethodToConsole = {
     wait: "log",
     error: "error",
@@ -741,7 +69,6 @@ const prefixedLog = (prefixType, ...message)=>{
     if ((message[0] === "" || message[0] === undefined) && message.length === 1) {
         message.shift();
     }
-    // If there's no message, don't print the prefix but a new line
     if (message.length === 0) {
         console[consoleMethod]("");
     } else {
@@ -764,7 +91,7 @@ const withSerwistInit = (pluginOptions)=>{
                 const { dev } = options;
                 const basePath = options.config.basePath || "/";
                 const tsConfigJson = loadTSConfig(options.dir, nextConfig?.typescript?.tsconfigPath);
-                const { cacheOnFrontEndNav, disable, scope = basePath, swUrl, register, reloadOnOnline, globPublicPatterns, ...buildOptions } = validateNextInjectManifestOptions(pluginOptions);
+                const { cacheOnNavigation, disable, scope = basePath, swUrl, register, reloadOnOnline, globPublicPatterns, ...buildOptions } = validateNextInjectManifestOptions(pluginOptions);
                 if (typeof nextConfig.webpack === "function") {
                     config = nextConfig.webpack(config, options);
                 }
@@ -781,7 +108,7 @@ const withSerwistInit = (pluginOptions)=>{
                 config.plugins.push(new webpack.DefinePlugin({
                     "self.__SERWIST_SW_ENTRY.sw": `'${_sw}'`,
                     "self.__SERWIST_SW_ENTRY.scope": `'${_scope}'`,
-                    "self.__SERWIST_SW_ENTRY.cacheOnFrontEndNav": `${cacheOnFrontEndNav}`,
+                    "self.__SERWIST_SW_ENTRY.cacheOnNavigation": `${cacheOnNavigation}`,
                     "self.__SERWIST_SW_ENTRY.register": `${register}`,
                     "self.__SERWIST_SW_ENTRY.reloadOnOnline": `${reloadOnOnline}`
                 }));
@@ -819,12 +146,9 @@ const withSerwistInit = (pluginOptions)=>{
                             info("You may also want to add @serwist/next/typings to compilerOptions.types in your tsconfig.json/jsconfig.json.");
                         }
                     }
-                    const { swSrc: providedSwSrc, swDest: providedSwDest, additionalPrecacheEntries, exclude = [], manifestTransforms = [], ...otherBuildOptions } = buildOptions;
-                    let swSrc = providedSwSrc;
-                    let swDest = providedSwDest;
-                    // If these two paths are not absolute, they will be resolved from `compilation.options.output.path`,
-                    // which is `${options.dir}/${nextConfig.destDir}` for Next.js apps, rather than `${options.dir}`
-                    // as an user would expect.
+                    const { swSrc: userSwSrc, swDest: userSwDest, additionalPrecacheEntries, exclude, manifestTransforms = [], ...otherBuildOptions } = buildOptions;
+                    let swSrc = userSwSrc;
+                    let swDest = userSwDest;
                     if (!path.isAbsolute(swSrc)) {
                         swSrc = path.join(options.dir, swSrc);
                     }
@@ -832,8 +156,25 @@ const withSerwistInit = (pluginOptions)=>{
                         swDest = path.join(options.dir, swDest);
                     }
                     const publicDir = path.resolve(options.dir, "public");
-                    const destDir = path.dirname(swDest);
-                    const shouldBuildSWEntryWorker = cacheOnFrontEndNav;
+                    const { dir: destDir, base: destBase } = path.parse(swDest);
+                    const cleanUpList = globSync([
+                        "swe-worker-*.js",
+                        "swe-worker-*.js.map",
+                        destBase,
+                        `${destBase}.map`
+                    ], {
+                        absolute: true,
+                        nodir: true,
+                        cwd: destDir
+                    });
+                    for (const file of cleanUpList){
+                        fs.rm(file, {
+                            force: true
+                        }, (err)=>{
+                            if (err) throw err;
+                        });
+                    }
+                    const shouldBuildSWEntryWorker = cacheOnNavigation;
                     let swEntryPublicPath = undefined;
                     let swEntryWorkerDest = undefined;
                     if (shouldBuildSWEntryWorker) {
@@ -852,30 +193,21 @@ const withSerwistInit = (pluginOptions)=>{
                     info(`Service worker: ${swDest}`);
                     info(`  URL: ${_sw}`);
                     info(`  Scope: ${_scope}`);
-                    config.plugins.push(new CleanWebpackPlugin({
-                        cleanOnceBeforeBuildPatterns: [
-                            path.join(destDir, "swe-worker-*.js"),
-                            path.join(destDir, "swe-worker-*.js.map"),
-                            swDest
-                        ]
-                    }));
-                    // Precache files in public folder
                     let resolvedManifestEntries = additionalPrecacheEntries;
                     if (!resolvedManifestEntries) {
-                        const swDestFileName = path.basename(swDest);
                         const userPublicGlob = typeof globPublicPatterns === "string" ? [
                             globPublicPatterns
                         ] : globPublicPatterns ?? [
                             "**/*"
                         ];
-                        const publicScan = fg.sync([
+                        const publicScan = globSync([
                             ...userPublicGlob,
-                            // Forcibly include these in case the user outputs these files to `public`.
                             "!swe-worker-*.js",
                             "!swe-worker-*.js.map",
-                            `!${swDestFileName.replace(/^\/+/, "")}`,
-                            `!${swDestFileName.replace(/^\/+/, "")}.map`
+                            `!${destBase}`,
+                            `!${destBase}.map`
                         ], {
+                            nodir: true,
                             cwd: publicDir
                         });
                         resolvedManifestEntries = publicScan.map((f)=>({
@@ -892,27 +224,18 @@ const withSerwistInit = (pluginOptions)=>{
                         exclude: [
                             ...exclude,
                             ({ asset, compilation })=>{
-                                // Same as how `@serwist/webpack-plugin` does it. It is always
-                                // `relativeToOutputPath(compilation, originalSwDest)`.
                                 const swDestRelativeOutput = relativeToOutputPath(compilation, swDest);
                                 const swAsset = compilation.getAsset(swDestRelativeOutput);
-                                return(// We don't need the service worker to be cached.
-                                asset.name === swAsset?.name || asset.name.startsWith("server/") || /^((app-|^)build-manifest\.json|react-loadable-manifest\.json)$/.test(asset.name) || dev && !asset.name.startsWith("static/runtime/"));
+                                return asset.name === swAsset?.name || asset.name.startsWith("server/") || /^((app-|^)build-manifest\.json|react-loadable-manifest\.json)$/.test(asset.name) || dev && !asset.name.startsWith("static/runtime/");
                             }
                         ],
                         manifestTransforms: [
                             ...manifestTransforms,
                             async (manifestEntries, compilation)=>{
-                                // This path always uses forward slashes, so it is safe to use it in the following string replace.
                                 const publicDirRelativeOutput = relativeToOutputPath(compilation, publicDir);
-                                // `publicPath` is always `${assetPrefix}/_next/` for Next.js apps.
                                 const publicFilesPrefix = `${publicPath}${publicDirRelativeOutput}`;
                                 const manifest = manifestEntries.map((m)=>{
                                     m.url = m.url.replace("/_next//static/image", "/_next/static/image").replace("/_next//static/media", "/_next/static/media");
-                                    // We remove `${publicPath}/${publicDirRelativeOutput}` because `assetPrefix`
-                                    // is not intended for files that are in the public directory and we also want
-                                    // to remove `/_next/${publicDirRelativeOutput}` from the URL, since that is not how
-                                    // we resolve files in the public directory.
                                     if (m.url.startsWith(publicFilesPrefix)) {
                                         m.url = path.posix.join(basePath, m.url.replace(publicFilesPrefix, ""));
                                     }