Update Node and NPM constraints and dependencies

Requied: - Node v20 → v22 - NPM v8 → v10 Changed: - Fixed Node/NPM requirements in README. - Fixed dependency vulenerabilities. - Updated dependencies. - Removed obsolete Node flag `--experimental-json-modules`. - Replaced obsolete import `assert` keyword with `with`.
Remove polyfill.io
2026-01-15 00:55:08 +08:00 · 2024-06-27 14:10:46 -04:00 · 2024-06-25 18:19:00 -04:00 · 2024-04-03 09:29:52 -04:00
10 changed files with 1184 additions and 3100 deletions
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-v20.10
+v22
--- a/README.md
+++ b/README.md
@@ -23,8 +23,8 @@ Learn more about [languages and technologies](docs/technologies.md).

 Make sure you have the following installed:

-* [Node] — at least 17.9, the latest LTS is recommended.
-* [NPM] — at least 8.0, the latest LTS is recommended.
+* [Node] — at least 22, the latest LTS is recommended.
+* [NPM] — at least 10, the latest LTS is recommended.

 > 💡 You can use [NVM] to install and use different versions of Node via the command-line.

--- a/build/helpers/config.js
+++ b/build/helpers/config.js
@@ -2,14 +2,14 @@
 * @file Provides simple user configuration options.
 */

-import loconfig from '../../loconfig.json' assert { type: 'json' };
+import loconfig from '../../loconfig.json' with { type: 'json' };
 import { merge } from '../utils/index.js';

 let usrconfig;

 try {
    usrconfig = await import('../../loconfig.local.json', {
-        assert: { type: 'json' },
+        with: { type: 'json' },
    });
    usrconfig = usrconfig.default;

--- a/build/tasks/svgs.js
+++ b/build/tasks/svgs.js
@@ -1,21 +1,36 @@
 import loconfig from '../helpers/config.js';
+import glob, { supportsGlob } from '../helpers/glob.js';
 import message from '../helpers/message.js';
 import notification from '../helpers/notification.js';
-import resolve from '../helpers/template.js';
+import { resolve as resolveTemplate } from '../helpers/template.js';
 import { merge } from '../utils/index.js';
-import { basename } from 'node:path';
+import {
+    basename,
+    dirname,
+    extname,
+    resolve,
+} from 'node:path';
+import commonPath from 'common-path';
 import mixer from 'svg-mixer';
+import slugify from 'url-slug';
+
+const basePath = loconfig?.paths?.svgs?.src
+    ? resolve(loconfig.paths.svgs.src)
+    : null;

 /**
- * @const {object} defaultMixerOptions     - The default shared Mixer options.
- * @const {object} developmentMixerOptions - The predefined Mixer options for development.
- * @const {object} productionMixerOptions  - The predefined Mixer options for production.
+ * @const {object} defaultMixerOptions - The default shared Mixer options.
 */
 export const defaultMixerOptions = {
    spriteConfig: {
        usages: false,
    },
 };
+
+/**
+ * @const {object} developmentMixerOptions - The predefined Mixer options for development.
+ * @const {object} productionMixerOptions  - The predefined Mixer options for production.
+ */
 export const developmentMixerOptions = Object.assign({}, defaultMixerOptions);
 export const productionMixerOptions  = Object.assign({}, defaultMixerOptions);

@@ -74,10 +89,52 @@ export default async function compileSVGs(mixerOptions = null) {
                includes = [ includes ];
            }

-            includes = resolve(includes);
-            outfile  = resolve(outfile);
+            includes = resolveTemplate(includes);
+            outfile  = resolveTemplate(outfile);

-            const result = await mixer(includes, mixerOptions);
+            if (supportsGlob && basePath) {
+                includes = await glob(includes);
+                includes = [ ...new Set(includes) ];
+
+                const common = commonPath(includes);
+                if (common.commonDir) {
+                    common.commonDir = resolve(common.commonDir);
+                }
+
+                /**
+                 * Generates the `<symbol id>` attribute and prefix any
+                 * SVG files in subdirectories according to the paths
+                 * common base path.
+                 *
+                 * Example for SVG source path `./assets/images/sprite`:
+                 *
+                 * | Path                                 | ID        |
+                 * | ------------------------------------ | --------- |
+                 * | `./assets/images/sprite/foo.svg`     | `foo`     |
+                 * | `./assets/images/sprite/baz/qux.svg` | `baz-qux` |
+                 *
+                 * @param  {string} path       - The absolute path to the file.
+                 * @param  {string} [query=''] - A query string.
+                 * @return {string} The symbol ID.
+                 */
+                mixerOptions.generateSymbolId = (path, query = '') => {
+                    let dirName = dirname(path)
+                        .replace(common.commonDir ?? basePath, '')
+                        .replace(/^\/|\/$/, '')
+                        .replace('/', '-');
+                    if (dirName) {
+                        dirName += '-';
+                    }
+
+                    const fileName = basename(path, extname(path));
+                    const decodedQuery = decodeURIComponent(decodeURIComponent(query));
+                    return `${dirName}${fileName}${slugify(decodedQuery)}`;
+                };
+            }
+
+            const result = await mixer(includes, {
+                ...mixerOptions,
+            });

            await result.write(outfile);

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -6,38 +6,43 @@
    "author": "Locomotive <info@locomotive.ca>",
    "type": "module",
    "engines": {
-        "node": "20.x",
-        "npm": ">=8.0"
+        "node": ">=22",
+        "npm": ">=10"
    },
    "scripts": {
-        "start": "node --experimental-json-modules --no-warnings build/watch.js",
-        "build": "node --experimental-json-modules --no-warnings build/build.js"
+        "start": "node --no-warnings build/watch.js",
+        "build": "node --no-warnings build/build.js"
    },
    "dependencies": {
-        "locomotive-scroll": "^5.0.0-beta.11",
+        "locomotive-scroll": "^5.0.0-beta.13",
        "modujs": "^1.4.2",
        "modularload": "^1.2.6",
        "svg4everybody": "^2.1.9"
    },
    "devDependencies": {
-        "autoprefixer": "^10.4.17",
+        "autoprefixer": "^10.4.19",
        "browser-sync": "^3.0.2",
+        "common-path": "^1.0.1",
        "concat": "^1.0.3",
-        "esbuild": "^0.20.0",
+        "esbuild": "^0.21.5",
        "kleur": "^4.1.5",
        "node-notifier": "^10.0.1",
-        "postcss": "^8.4.21",
-        "purgecss": "^5.0.0",
-        "sass": "^1.70.0",
-        "svg-mixer": "~2.3.14",
+        "postcss": "^8.4.38",
+        "purgecss": "^6.0.0",
+        "sass": "^1.77.6",
+        "svg-mixer": "^2.3.14",
        "tiny-glob": "^0.2.9"
    },
    "overrides": {
        "browser-sync": {
-            "ua-parser-js": "~1.0.33"
+            "ua-parser-js": "^1.0.33"
        },
        "svg-mixer": {
-            "postcss": "^8.4.20"
+            "micromatch": "^4.0.4",
+            "postcss": "^8.4.38"
+        },
+        "svg-mixer-utils": {
+            "anymatch": "^3.1.3"
        }
    }
 }
--- a/www/form.html
+++ b/www/form.html
@@ -97,7 +97,6 @@
        </div>

        <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js" crossorigin="anonymous"></script>
-        <script nomodule src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.remove%2CElement.prototype.append%2Cfetch%2CCustomEvent%2CElement.prototype.matches%2CNodeList.prototype.forEach%2CAbortController" crossorigin="anonymous"></script>

        <script src="assets/scripts/vendors.js" defer></script>
        <script src="assets/scripts/app.js" defer></script>
--- a/www/grid.html
+++ b/www/grid.html
@@ -85,9 +85,6 @@

    <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js"
        crossorigin="anonymous"></script>
-    <script nomodule
-        src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.remove%2CElement.prototype.append%2Cfetch%2CCustomEvent%2CElement.prototype.matches%2CNodeList.prototype.forEach%2CAbortController"
-        crossorigin="anonymous"></script>

    <script src="assets/scripts/vendors.js" defer></script>
    <script src="assets/scripts/app.js" defer></script>
--- a/www/images.html
+++ b/www/images.html
@@ -123,7 +123,6 @@
        </div>

        <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js" crossorigin="anonymous"></script>
-        <script nomodule src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.remove%2CElement.prototype.append%2Cfetch%2CCustomEvent%2CElement.prototype.matches%2CNodeList.prototype.forEach%2CAbortController" crossorigin="anonymous"></script>

        <script src="assets/scripts/vendors.js" defer></script>
        <script src="assets/scripts/app.js" defer></script>
--- a/www/index.html
+++ b/www/index.html
@@ -71,9 +71,6 @@

    <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js"
        crossorigin="anonymous"></script>
-    <script nomodule
-        src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.remove%2CElement.prototype.append%2Cfetch%2CCustomEvent%2CElement.prototype.matches%2CNodeList.prototype.forEach%2CAbortController"
-        crossorigin="anonymous"></script>

    <script src="assets/scripts/vendors.js" defer></script>
    <script src="assets/scripts/app.js" defer></script>