2022 update

.babelrc

@@ -1,10 +1,12 @@
 {
-  "presets": [[
-    "env",
-    {
-      "targets": {
-        "node": "4"
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "current"
+        }
       }
-    }
-  ]]
-}
+    ]
+  ]
+}

.prettierrc

@@ -0,0 +1,4 @@
+{
+    "printWidth": 100,
+    "semi": false
+}

index.js

@@ -1,25 +1,24 @@
-'use strict'
+"use strict"
 
-const loaderUtils = require('loader-utils')
-const validateOptions = require('schema-utils')
-const fs = require('fs')
-const path = require('path')
+const { validate } = require("schema-utils")
+const fs = require("fs")
+const path = require("path")
 
 const schema = {
-  type: 'object',
+  type: "object",
   properties: {
     publicDir: {
-      type: 'string'
+      type: "string",
     },
     baseDir: {
-      type: 'string'
-    }
-  }
+      type: "string",
+    },
+  },
 }
 
 function mkDirP(dir) {
   this.addDependency(dir)
-  const baseDir = '/'
+  const baseDir = "/"
   dir.split(path.sep).reduce((parent, child) => {
     const full = path.resolve(baseDir, parent, child)
     if (!fs.existsSync(full)) {
@@ -30,16 +29,21 @@ function mkDirP(dir) {
 }
 
 module.exports = function chromeUrlLoader(contents) {
-  const options = loaderUtils.getOptions(this) || {}
+  const options = this.getOptions() || {}
   const callback = this.async()
-  validateOptions(schema, options, 'Chrome URL Loader')
+  validate(schema, options, {
+    name: "Chrome URL Loader",
+    baseDataPath: "options",
+  })
 
   options.baseDir = options.baseDir || process.cwd()
-  options.baseDir = options.baseDir.endsWith('/') ? options.baseDir.slice(0, -1) : options.baseDir
-  options.publicDir = options.publicDir || ''
-  options.publicDir = options.publicDir.endsWith('/') ? options.publicDir.slice(0, -1) : options.publicDir
+  options.baseDir = options.baseDir.endsWith("/") ? options.baseDir.slice(0, -1) : options.baseDir
+  options.publicDir = options.publicDir || ""
+  options.publicDir = options.publicDir.endsWith("/")
+    ? options.publicDir.slice(0, -1)
+    : options.publicDir
 
-  const relativeFilePath = this.resourcePath.replace(options.baseDir + '/', '')
+  const relativeFilePath = this.resourcePath.replace(options.baseDir + "/", "")
 
   if (relativeFilePath === this.resourcePath) {
     callback(null, `module.exports = '${this.resourcePath}'`)
@@ -55,8 +59,11 @@ module.exports = function chromeUrlLoader(contents) {
 
   this.addDependency(outputDir)
   this.addDependency(outputPath)
-  fs.writeFile(outputPath, contents)
 
-  callback(null, `module.exports = chrome.extension.getURL('${relativeDir}/${fileName}')`)
-  return
+  fs.writeFile(outputPath, contents, (err) => {
+    if (err) {
+      return callback(err)
+    }
+    callback(null, `module.exports = chrome.extension.getURL('${relativeDir}/${fileName}')`)
+  })
 }

package.json

@@ -8,18 +8,17 @@
   "license": "Apache-2.0",
   "private": false,
   "dependencies": {
-    "loader-utils": "^1.1.0",
-    "schema-utils": "^0.4.5"
+    "schema-utils": "^4.0.0"
   },
   "scripts": {
     "test": "jest"
   },
   "devDependencies": {
-    "babel-jest": "^23.0.0-alpha.0",
-    "babel-preset-env": "^1.6.1",
-    "jest": "^23.0.0-alpha.0",
-    "memory-fs": "^0.4.1",
-    "webpack": "^4.1.1"
+    "@babel/preset-env": "^7.16.11",
+    "babel-jest": "^27.5.1",
+    "jest": "^27.5.1",
+    "memfs": "^3.4.1",
+    "webpack": "^5.70.0"
   },
   "jest": {
     "testEnvironment": "node"

test/compiler.js

@@ -1,6 +1,6 @@
-const path = require('path')
-const webpack = require('webpack')
-const memoryfs = require('memory-fs')
+const path = require("path")
+const webpack = require("webpack")
+const { createFsFromVolume, Volume } = require("memfs")
 
 module.exports = (fixture, options = {}) => {
   const compiler = webpack({
@@ -8,26 +8,30 @@ module.exports = (fixture, options = {}) => {
     entry: `./${fixture}`,
     output: {
       path: path.resolve(__dirname),
-      filename: 'bundle.js',
+      filename: "bundle.js",
     },
     module: {
-      rules: [{
-        test: /\.svg$/,
-        use: {
-          loader: path.resolve(__dirname, '../index.js'),
-          options: {
-            publicDir: 'build/static/svg'
-          }
-        }
-      }]
+      rules: [
+        {
+          test: /\.svg$/,
+          use: {
+            loader: path.resolve(__dirname, "../index.js"),
+            options: {
+              publicDir: "build/static/svg",
+            },
+          },
+        },
+      ],
     },
   })
 
-  compiler.outputFileSystem = new memoryfs()
+  compiler.outputFileSystem = createFsFromVolume(new Volume())
+  compiler.outputFileSystem.join = path.join.bind(path)
 
   return new Promise((resolve, reject) => {
     compiler.run((err, stats) => {
       if (err) reject(err)
+      if (stats.hasErrors()) reject(stats.toJson().errors)
 
       resolve(stats)
     })

test/test.js

@@ -1,9 +1,7 @@
-const compiler = require('./compiler.js')
+import compiler from "./compiler.js"
 
-test('Inserts file path to output properly', (done) => {
-  compiler('test.svg').then((stats) => {
-    const output = stats.toJson().modules[0].source
-    expect(output).toBe(`module.exports = chrome.extension.getURL('static/svg/test.svg')`)
-    done()
-  })
+test("Inserts file path to output properly", async () => {
+  const stats = await compiler("test.svg")
+  const output = stats.toJson({ source: true }).modules[0].source
+  expect(output).toBe(`module.exports = chrome.extension.getURL('static/svg/test.svg')`)
 })