Use TypeScript

.eslintrc.json

@@ -0,0 +1,69 @@
+{
+  "root": true,
+  "extends": ["@webdeveric/eslint-config-ts", "plugin:import/recommended", "plugin:import/typescript", "prettier"],
+  "env": {
+    "es6": true,
+    "node": true
+  },
+  "parserOptions": {
+    "project": ["./tsconfig.json"],
+    "EXPERIMENTAL_useProjectService": {
+      "maximumDefaultProjectFileMatchCount_THIS_WILL_SLOW_DOWN_LINTING": 1000
+    }
+  },
+  "settings": {
+    "import/extensions": [".ts", ".mts", ".cts", ".js", ".json"],
+    "import/resolver": {
+      "typescript": {
+        "project": "./tsconfig.json"
+      },
+      "node": {
+        "extensions": [".js", ".ts", ".mts", ".cts"]
+      }
+    },
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".mts", ".cts"]
+    }
+  },
+  "rules": {
+    "import/first": "error",
+    "import/no-absolute-path": "error",
+    "import/no-cycle": "error",
+    "import/no-deprecated": "error",
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": ["./vitest.config.mts", "./lint-staged.config.mjs", "./test/**/*"]
+      }
+    ],
+    "import/no-relative-packages": "error",
+    "import/no-self-import": "error",
+    "import/no-unresolved": "error",
+    "import/no-useless-path-segments": [
+      "error",
+      {
+        "noUselessIndex": false
+      }
+    ],
+    "import/order": [
+      "error",
+      {
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        },
+        "groups": ["builtin", "external", "internal", "parent", ["sibling", "index"], "type"],
+        "newlines-between": "always"
+      }
+    ],
+    "sort-imports": "off"
+  },
+  "overrides": [
+    {
+      "files": ["**/*.test.ts"],
+      "rules": {
+        "@typescript-eslint/no-explicit-any": "off"
+      }
+    }
+  ]
+}

.github/workflows/node.js.yml

@@ -12,31 +12,37 @@ jobs:
     runs-on: ubuntu-22.04
     strategy:
       matrix:
-        node-version: [18.x, 20.x]
-        webpack-version: ["5.2.0", 5]
-        dev-server-version: ["3.6.0", 3]
-        css-loader-version: ["3.5.0", latest]
+        node-version: [20.x, 22.x]
+        webpack-version: ['5.61.0', latest]
+        dev-server-version: [4, latest]
+        css-loader-version: ['3.5.0', latest]
     steps:
-      - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v2
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-          cache: "pnpm"
-      - name: Installing dependencies
+          cache: 'pnpm'
+
+      - name: Install dependencies
         run: pnpm install
-      - name: Installing specific dependency versions
-        run: pnpm install webpack@${{ matrix.webpack-version }} webpack-dev-server@${{ matrix.dev-server-version }} css-loader@${{ matrix.css-loader-version }}
-      - name: Building (if needed)
-        run: pnpm --if-present run build
-      - name: Running tests
-        run: pnpm test
-      - name: Generating coverage report
-        run: pnpm lcov
+
+      - name: Install specific dependency versions
+        run: pnpm install webpack@${{ matrix.webpack-version }} webpack-dev-server@${{ matrix.dev-server-version }} css-loader@${{ matrix.css-loader-version }} --no-lockfile
+
+      - name: Build
+        run: pnpm build
+
+      - name: Test
+        run: pnpm coverage
+
       - name: Upload code coverage
         uses: codecov/codecov-action@v4
         with:
           fail_ci_if_error: true
-          files: ./coverage.lcov
           token: ${{ secrets.CODECOV_TOKEN }}

.gitignore

@@ -1,7 +1,8 @@
 node_modules
-npm-debug.log
-coverage.lcov
-.nyc_output/
+.idea/
+cache/
 coverage/
+dist/
 private/
-.idea/
+*.tsbuildinfo
+npm-debug.log

.husky/commit-msg

@@ -0,0 +1 @@
+npx --no cspell -- --no-summary --no-progress --language-id commit-msg $1

.prettierignore

@@ -10,4 +10,3 @@ pnpm-lock.yaml
 .editorconfig
 .npmrc
 .nvmrc
-.eslintrc*

.vscode/settings.json

@@ -51,5 +51,9 @@
   "javascript.preferences.importModuleSpecifierEnding": "js",
   "typescript.preferences.importModuleSpecifier": "non-relative",
   "typescript.preferences.importModuleSpecifierEnding": "js",
-  "typescript.preferences.preferTypeOnlyAutoImports": true
+  "typescript.preferences.preferTypeOnlyAutoImports": true,
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "typescript.referencesCodeLens.enabled": true,
+  "typescript.surveys.enabled": false,
+  "typescript.implementationsCodeLens.enabled": true
 }

cspell.json

@@ -19,15 +19,27 @@
     "instanceof",
     "integrityhashes",
     "lcov",
+    "memfs",
+    "nvmrc",
+    "postbuild",
     "prebuild",
     "prefetch",
     "preload",
     "subpage",
     "subresource",
     "tapable",
+    "Testerson",
+    "tsbuildinfo",
     "typecheck",
+    "vitest",
     "webdeveric"
   ],
   "flagWords": [],
-  "ignorePaths": ["pnpm-lock.yaml", "./.vscode/", "node_modules"]
+  "ignorePaths": ["pnpm-lock.yaml", "./.vscode/", "node_modules"],
+  "languageSettings": [
+    {
+      "languageId": "commit-msg",
+      "ignoreRegExpList": ["/^#.*/gm"]
+    }
+  ]
 }

examples/asset-integrity.js

@@ -1,4 +1,4 @@
-const WebpackAssetsManifest = require('webpack-assets-manifest');
+import { WebpackAssetsManifest } from 'webpack-assets-manifest';
 
 const manifest = new WebpackAssetsManifest({
   output: 'asset-integrity-manifest.json',

examples/asset-size.js

@@ -1,4 +1,4 @@
-const WebpackAssetsManifest = require('webpack-assets-manifest');
+import { WebpackAssetsManifest } from 'webpack-assets-manifest';
 
 const manifest = new WebpackAssetsManifest({
   output: 'asset-size-manifest.json',
@@ -8,7 +8,7 @@ const manifest = new WebpackAssetsManifest({
         value: entry.value,
         // `size()` returns number of bytes
         size: asset.source.size(),
-      }
+      },
     };
   },
 });

examples/aws-s3-data-integrity.js

@@ -1,9 +1,9 @@
-const WebpackAssetsManifest = require('webpack-assets-manifest');
+import { WebpackAssetsManifest } from 'webpack-assets-manifest';
 
 const manifest = new WebpackAssetsManifest({
   output: 'aws-s3-data-integrity-manifest.json',
   integrity: true,
-  integrityHashes: [ 'md5' ],
+  integrityHashes: ['md5'],
   integrityPropertyName: 'md5',
   publicPath: 's3://some-bucket/some-folder/',
   customize(entry, original, manifest, asset) {

examples/custom-cdn.js

@@ -1,11 +1,14 @@
-const WebpackAssetsManifest = require('webpack-assets-manifest');
+import { WebpackAssetsManifest } from 'webpack-assets-manifest';
 
 const manifest = new WebpackAssetsManifest({
   output: 'custom-cdn-manifest.json',
-  publicPath(filename, manifest)
-  {
-    switch ( manifest.getExtension( filename ).substr(1).toLowerCase() ) {
-      case 'jpg': case 'jpeg': case 'gif': case 'png': case 'svg':
+  publicPath(filename, manifest) {
+    switch (manifest.getExtension(filename).substring(1).toLowerCase()) {
+      case 'jpg':
+      case 'jpeg':
+      case 'gif':
+      case 'png':
+      case 'svg':
         return `https://img.cdn.example.com/${filename}`;
       case 'css':
         return `https://css.cdn.example.com/${filename}`;

examples/customized.js

@@ -1,27 +1,29 @@
-const WebpackAssetsManifest = require('webpack-assets-manifest');
+import { WebpackAssetsManifest } from 'webpack-assets-manifest';
 
 const manifest = new WebpackAssetsManifest({
   output: 'customized-manifest.json',
   // This will allow you to customize each individual entry in the manifest.
   customize(entry, original, manifest, asset) {
-    if ( manifest.isMerging ) {
+    if (manifest.isMerging) {
       // Do something
     }
 
-    // You can prevent adding items to the manifest by returning false.
-    if ( entry.key.toLowerCase().endsWith('.map') ) {
-      return false;
-    }
+    if (manifest.utils.isKeyValuePair(entry)) {
+      // You can prevent adding items to the manifest by returning false.
+      if (entry.key.toLowerCase().endsWith('.map')) {
+        return false;
+      }
 
-    // You can directly modify key/value on the `entry` argument
-    // or you can return a new object that has key and/or value properties.
-    // If either the key or value is missing, the defaults will be used.
-    //
-    // The key should be a string and the value can be anything that can be JSON stringified.
-    // If something else (or nothing) is returned, the manifest will add the entry normally.
-    return {
-      key: `src/${entry.key}`,
-      value: `dist/${entry.value}`,
-    };
+      // You can directly modify key/value on the `entry` argument
+      // or you can return a new object that has key and/or value properties.
+      // If either the key or value is missing, the defaults will be used.
+      //
+      // The key should be a string and the value can be anything that can be JSON stringified.
+      // If something else (or nothing) is returned, the manifest will add the entry normally.
+      return {
+        key: `src/${entry.key}`,
+        value: `dist/${entry.value}`,
+      };
+    }
   },
 });

examples/merged.js

@@ -1,10 +1,10 @@
-const WebpackAssetsManifest = require('webpack-assets-manifest');
+import { WebpackAssetsManifest } from 'webpack-assets-manifest';
 
 const manifest = new WebpackAssetsManifest({
   output: 'merged-manifest.json',
   merge: true,
   customize(entry, original, manifest, asset) {
-    if ( manifest.isMerging ) {
+    if (manifest.isMerging) {
       // Do something
     }
   },

examples/sorted.js

@@ -1,4 +1,4 @@
-const WebpackAssetsManifest = require('webpack-assets-manifest');
+import { WebpackAssetsManifest } from 'webpack-assets-manifest';
 
 const manifest = new WebpackAssetsManifest({
   output: 'sorted-manifest.json',
@@ -7,11 +7,11 @@ const manifest = new WebpackAssetsManifest({
     const extA = this.getExtension(a);
     const extB = this.getExtension(b);
 
-    if ( extA > extB ) {
+    if (extA > extB) {
       return 1;
     }
 
-    if ( extA < extB ) {
+    if (extA < extB) {
       return -1;
     }
 

examples/transformed.js

@@ -1,13 +1,12 @@
-const WebpackAssetsManifest = require('webpack-assets-manifest');
+import { WebpackAssetsManifest } from 'webpack-assets-manifest';
+
+import { name, version } from 'webpack-assets-manifest/package.json';
 
 const manifest = new WebpackAssetsManifest({
   output: 'transformed-manifest.json',
   transform(assets, manifest) {
     // Attach new properties to `assets` or return something else.
     // Just be sure it can be JSON stringified.
-
-    const { name, version } = require('./package.json');
-
     assets.package = {
       name,
       version,
@@ -19,6 +18,6 @@ const manifest = new WebpackAssetsManifest({
       value: 'YourValue',
     });
 
-    assets[ key ] = value;
+    assets[key] = value;
   },
 });

lint-staged.config.mjs

@@ -0,0 +1,27 @@
+import { relative } from 'node:path';
+import { cwd } from 'node:process';
+
+/**
+ * @type {(filenames: string[]) => string[]>}
+ */
+const relativeFilenames = (filenames) => {
+  const root = cwd();
+
+  return filenames.map((file) => relative(root, file));
+};
+
+/**
+ * @type {Record<string, string | (filenames: string[]) => string | string[] | Promise<string | string[]>}
+ */
+export default {
+  '*.{js,cjs,mjs,ts,cts,mts}': ['eslint --fix', 'prettier --write'],
+  '*.{json,md}': 'prettier --write',
+  '*': (filenames) => {
+    const files = relativeFilenames(filenames);
+
+    return [
+      `cspell lint --no-progress --no-summary --no-must-find-files ${files.join(' ')}`,
+      `sh -c 'echo "${files.join('\n')}" | cspell --show-context stdin'`, // Spell check file names.
+    ];
+  },
+};