feat webpack 5

Author: dazuaz

package-lock.json

@@ -9,7 +9,7 @@
   "scripts": {
     "build": "tsc && cp ./src/cjs.js ./lib",
     "lint": "eslint",
-    "test:clean": "find -E test/**/build/ -regex '.*/*.(avif|jpg|webp|png|js)' -delete",
+    "test:clean": "find -E test/**/build/ -regex '.*/*.(avif|jpg|jpeg|webp|png|js)' -delete",
     "test": "npm run build && npm run test:clean && webpack --config=./test/jimp/webpack.config.js && webpack --config=./test/sharp/webpack.config.js && webpack --config=./test/cache/webpack.config.js && jest"
   },
   "files": [
@@ -37,7 +37,7 @@
   },
   "homepage": "https://github.com/dazuaz/responsive-loader",
   "peerDependencies": {
-    "webpack": "^4.0.0 || ^5.0.0"
+    "webpack": "^5.37.0"
   },
   "peerDependenciesMeta": {
     "jimp": {
@@ -49,18 +49,17 @@
   },
   "dependencies": {
     "find-cache-dir": "^3.3.1",
-    "loader-utils": "^2.0.0",
+    "json5": "^2.2.0",
     "schema-utils": "^3.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
     "@babel/preset-env": "^7.12.11",
     "@types/find-cache-dir": "^3.2.0",
     "@types/json-schema": "^7.0.6",
-    "@types/loader-utils": "^2.0.1",
     "@types/node": "^14.14.20",
-    "@types/sharp": "^0.27.0",
-    "@types/webpack": "^4.41.25",
+    "@types/sharp": "^0.28.1",
+    "@types/webpack": "^5.28.0",
     "@typescript-eslint/eslint-plugin": "^4.12.0",
     "@typescript-eslint/parser": "^4.12.0",
     "babel-jest": "^26.6.3",
@@ -69,10 +68,10 @@
     "jimp": "^0.16.1",
     "prettier": "^2.2.1",
     "prettier-eslint": "^12.0.0",
-    "sharp": "^0.27.0",
+    "sharp": "^0.28.2",
     "typescript": "^4.1.3",
-    "webpack": "^4.44.2",
-    "webpack-cli": "^4.3.1"
+    "webpack": "5.37.0",
+    "webpack-cli": "^4.7.0"
   },
   "jest": {
     "testEnvironment": "node"

package.json

@@ -1,8 +1,8 @@
-import * as sharp from "sharp"
+import * as sharp from 'sharp'
 
 type ResizeProps = {
   width: number
-  mime: "image/jpeg" | "image/png" | "image/webp" | "image/avif"
+  mime: 'image/jpeg' | 'image/png' | 'image/webp' | 'image/avif'
   options: {
     background?: string
     rotate: number
@@ -13,7 +13,7 @@ type ResizeProps = {
 
 class SharpAdapter {
   image: sharp.Sharp
-  constructor(imagePath: string | Buffer) {
+  constructor(imagePath: string) {
     this.image = sharp(imagePath)
   }
   metadata(): Promise<sharp.Metadata> {
@@ -34,18 +34,18 @@ class SharpAdapter {
         })
       }
 
-      if (mime === "image/jpeg") {
+      if (mime === 'image/jpeg') {
         resized = resized.jpeg({
           quality: options.quality,
           progressive: options.progressive,
         })
       }
-      if (mime === "image/webp") {
+      if (mime === 'image/webp') {
         resized = resized.webp({
           quality: options.quality,
         })
       }
-      if (mime === "image/avif") {
+      if (mime === 'image/avif') {
         // @ts-ignore
         resized = resized.avif({
           quality: options.quality,
@@ -55,7 +55,6 @@ class SharpAdapter {
       if (options.rotate && options.rotate !== 0) {
         resized = resized.rotate(options.rotate)
       }
-
       resized.toBuffer((err, data, { height }) => {
         if (err) {
           reject(err)
@@ -71,6 +70,6 @@ class SharpAdapter {
   }
 }
 // export default SharpAdapter
-module.exports = (imagePath: string | Buffer): SharpAdapter => {
+module.exports = (imagePath: string): SharpAdapter => {
   return new SharpAdapter(imagePath)
 }

src/adapters/sharp.ts

@@ -1,4 +1,4 @@
-const loader = require("./index")
+const loader = require('./index')
 
 module.exports = loader.default
 module.exports.raw = loader.raw

src/cjs.js

@@ -1,19 +1,22 @@
-import { parseQuery, getOptions, interpolateName } from 'loader-utils'
 import { validate } from 'schema-utils'
 import * as schema from './schema.json'
 import { parseOptions, getOutputAndPublicPath, createPlaceholder } from './utils'
 import { cache } from './cache'
+import type { LoaderContext } from 'webpack'
+
+import { interpolateName } from './interpolateName'
+import { parseQuery } from './parseQuery'
 
 import type {
   Adapter,
   Options,
   CacheOptions,
-  LoaderContext,
   AdapterImplementation,
   MimeType,
   AdapterResizeResponse,
   TransformParams,
 } from './types'
+import { JSONSchema7 } from 'schema-utils/declarations/ValidationError'
 
 const DEFAULTS = {
   quality: 85,
@@ -39,37 +42,30 @@ const DEFAULTS = {
  *
  * @return {loaderCallback} loaderCallback Result
  */
-export default function loader(this: LoaderContext, content: Buffer): void {
+export default function loader(this: LoaderContext<any>, content: string): void {
   const loaderCallback = this.async()
   if (typeof loaderCallback == 'undefined') {
     new Error('Responsive loader callback error')
     return
   }
 
-  // Object representation of the query string
   const parsedResourceQuery = this.resourceQuery ? parseQuery(this.resourceQuery) : {}
-
   // Combines defaults, webpack options and query options,
   // later sources' properties overwrite earlier ones.
-  const options: Options = Object.assign({}, DEFAULTS, getOptions(this), parsedResourceQuery)
+  const options: Options = Object.assign({}, DEFAULTS, this.getOptions(), parsedResourceQuery)
+  // // Object representation of the query string
 
-  // @ts-ignore
-  validate(schema, options, { name: 'Responsive Loader' })
+  // // Combines defaults, webpack options and query options,
+  // // later sources' properties overwrite earlier ones.
+  // const options: Options = Object.assign({}, DEFAULTS, getOptions(this), parsedResourceQuery)
+
+  validate(schema as JSONSchema7, options, { name: 'Responsive Loader' })
 
   /**
    * Parses options and set defaults options
    */
-  const {
-    outputContext,
-    mime,
-    ext,
-    name,
-    sizes,
-    outputPlaceholder,
-    placeholderSize,
-    imageOptions,
-    cacheOptions,
-  } = parseOptions(this, options)
+  const { outputContext, mime, ext, name, sizes, outputPlaceholder, placeholderSize, imageOptions, cacheOptions } =
+    parseOptions(this, options)
 
   if (!mime) {
     loaderCallback(new Error('No mime type for file with extension ' + ext + ' supported'))
@@ -90,7 +86,7 @@ export default function loader(this: LoaderContext, content: Buffer): void {
     })
 
     if (options.emitFile) {
-      this.emitFile(outputPath, data, null)
+      this.emitFile(outputPath, data)
     }
 
     return {

src/index.ts

@@ -0,0 +1,92 @@
+'use strict'
+import type { LoaderContext } from 'webpack'
+import { util } from 'webpack'
+import * as path from 'path'
+
+type Options = {
+  context: string
+  content: string
+}
+
+function interpolateName(loaderContext: LoaderContext<any>, name: string, options: Options): string {
+  const filename = name || '[hash].[ext]'
+
+  const context = options.context
+  const content = options.content
+
+  let ext = 'bin'
+  let basename = 'file'
+  let directory = ''
+  let folder = ''
+  let query = ''
+
+  if (loaderContext.resourcePath) {
+    const parsed = path.parse(loaderContext.resourcePath)
+    let resourcePath = loaderContext.resourcePath
+
+    if (parsed.ext) {
+      ext = parsed.ext.substr(1)
+    }
+
+    if (parsed.dir) {
+      basename = parsed.name
+      resourcePath = parsed.dir + path.sep
+    }
+
+    if (typeof context !== 'undefined') {
+      directory = path
+        .relative(context, resourcePath + '_')
+        .replace(/\\/g, '/')
+        .replace(/\.\.(\/)?/g, '_$1')
+      directory = directory.substr(0, directory.length - 1)
+    } else {
+      directory = resourcePath.replace(/\\/g, '/').replace(/\.\.(\/)?/g, '_$1')
+    }
+
+    if (directory.length === 1) {
+      directory = ''
+    } else if (directory.length > 1) {
+      folder = path.basename(directory)
+    }
+  }
+
+  if (loaderContext.resourceQuery && loaderContext.resourceQuery.length > 1) {
+    query = loaderContext.resourceQuery
+
+    const hashIdx = query.indexOf('#')
+
+    if (hashIdx >= 0) {
+      query = query.substr(0, hashIdx)
+    }
+  }
+
+  let url = filename
+
+  if (content) {
+    const hash = util.createHash('md4')
+    hash.update(content)
+    // Match hash template
+    url = url
+      // `hash` and `contenthash` are same in `loader-utils` context
+      // let's keep `hash` for backward compatibility
+      .replace(/\[(?:([^:\]]+):)?(?:hash|contenthash)(?::([a-z]+\d*))?(?::(\d+))?\]/gi, `${hash.digest('hex')}`)
+  }
+
+  url = url
+    .replace(/\[ext\]/gi, () => ext)
+    .replace(/\[name\]/gi, () => basename)
+    .replace(/\[path\]/gi, () => directory)
+    .replace(/\[folder\]/gi, () => folder)
+    .replace(/\[query\]/gi, () => query)
+
+  // if (
+  //   typeof loaderContext.getOptions() === 'object' &&
+  //   typeof loaderContext.getOptions().customInterpolateName === 'function'
+  // ) {
+  //   url = loaderContext.getOptions().customInterpolateName.call(loaderContext, url, name, options)
+  // }
+
+  return url
+}
+
+export { interpolateName }

src/interpolateName.ts

@@ -0,0 +1,70 @@
+'use strict'
+
+import * as JSON5 from 'json5'
+
+interface LooseObject {
+  [key: string]: any
+}
+
+const specialValues: LooseObject = {
+  null: null,
+  true: true,
+  false: false,
+}
+
+function parseQuery(query: string): LooseObject {
+  if (query.substr(0, 1) !== '?') {
+    throw new Error("A valid query string passed to parseQuery should begin with '?'")
+  }
+
+  query = query.substr(1)
+
+  if (!query) {
+    return {}
+  }
+
+  if (query.substr(0, 1) === '{' && query.substr(-1) === '}') {
+    return JSON5.parse(query)
+  }
+
+  const queryArgs = query.split(/[,&]/g)
+  const result: LooseObject = {}
+
+  queryArgs.forEach((arg) => {
+    const idx = arg.indexOf('=')
+
+    if (idx >= 0) {
+      let name = arg.substr(0, idx)
+      let value = decodeURIComponent(arg.substr(idx + 1))
+      // const specialValues: LooseObject = {}
+
+      // eslint-disable-next-line no-prototype-builtins
+      if (specialValues.hasOwnProperty(value)) {
+        value = specialValues[value]
+      }
+      if (name.substr(-2) === '[]') {
+        name = decodeURIComponent(name.substr(0, name.length - 2))
+
+        if (!Array.isArray(result[name])) {
+          result[name] = []
+        }
+
+        result[name].push(value)
+      } else {
+        name = decodeURIComponent(name)
+        result[name] = value
+      }
+    } else {
+      if (arg.substr(0, 1) === '-') {
+        result[decodeURIComponent(arg.substr(1))] = false
+      } else if (arg.substr(0, 1) === '+') {
+        result[decodeURIComponent(arg.substr(1))] = true
+      } else {
+        result[decodeURIComponent(arg)] = true
+      }
+    }
+  })
+
+  return result
+}
+export { parseQuery }