@nerd-coder/lqip-loader - npm Package Compare versions

Comparing version 0.2.1 to 0.3.0

package.json

 {
   "name": "@nerd-coder/lqip-loader",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Low Quality Image Placeholders (LQIP) loader for webpack",
@@ -5,0 +5,0 @@ "main": "src/loader.js",

src/loader.js

 const sharp = require('sharp')
 const loaderUtils = require('loader-utils')
 
-const SUPPORTED_MIMES = {
-  jpeg: 'image/jpeg',
-  jpg: 'image/jpeg',
-  png: 'image/png',
-}
-
-async function generateLowQualityImage(
-  path,
-  source,
-  {
+module.exports.raw = true
+module.exports = async function(content, map, meta) {
+  this.cacheable()
+  const callback = this.async()
+  const {
     srcKey = 'src',
@@ -18,12 +13,10 @@ previewKey = 'preview',
     resizeOptions = null,
-  }
-) {
-  const img = sharp(path)
-  const meta = await img.metadata()
-  const mimeType = SUPPORTED_MIMES[meta.format]
-  if (!mimeType) throw new Error(`Unsupported format "${meta.format}"`)
+  } = loaderUtils.getOptions(this) || {}
+
+  const img = sharp(this.resourcePath)
+  const imgMeta = await img.metadata()
   const lowImg = await img
     .resize(
-      meta.width < meta.height ? meta.width : null,
-      meta.height < meta.width ? meta.height : null,
+      imgMeta.width < imgMeta.height ? imgMeta.width : null,
+      imgMeta.height < imgMeta.width ? imgMeta.height : null,
       { ...resizeOptions }
@@ -33,35 +26,20 @@ )
 
-  return `module.exports = {
-    ${srcKey}: ${source},
-    ${ratioKey}: ${meta.width / meta.height},
-    ${previewKey}: 'data:${mimeType};base64,${lowImg.toString('base64')}',
-  }`
-}
+  const srcPath = loaderUtils.interpolateName(this, 'img/[hash:7].[ext]', {
+    content: content,
+  })
+  const lowPath = loaderUtils.interpolateName(this, 'img/lqip-[hash:7].[ext]', {
+    content: lowImg,
+  })
 
-module.exports.raw = true
-module.exports = function(contentBuffer) {
-  this.cacheable()
-  const callback = this.async()
-  const options = loaderUtils.getOptions(this) || {}
-  const urlRegex = /^(module\.exports =|export default) "data:(.*)base64,(.*)/
-  const fileRegex = /^(module\.exports =|export default) (.*)/
-  let content = contentBuffer.toString('utf8')
+  this.emitFile(srcPath, content)
+  this.emitFile(lowPath, lowImg)
 
-  const isUrlExport = urlRegex.test(content)
-  const isFileExport = fileRegex.test(content)
-  let source = ''
-
-  if (isUrlExport) {
-    source = content.match(fileRegex)[2]
-  } else {
-    if (!isFileExport) {
-      const fileLoader = require('file-loader')
-      content = fileLoader.call(this, content)
-    }
-    source = content.match(/^(module\.exports =|export default) (.*);/)[2]
+  const result = `module.exports = {
+    ${srcKey}: __webpack_public_path__ + ${JSON.stringify(srcPath)},
+    ${ratioKey}: ${imgMeta.width / imgMeta.height},
+    ${previewKey}: __webpack_public_path__ + ${JSON.stringify(lowPath)},
   }
+  `
 
-  generateLowQualityImage(this.resourcePath, source, options)
-    .then(z => callback(null, z))
-    .catch(callback)
+  callback(null, result, map, meta)
 }

test/loader.test.js

@@ -5,3 +5,5 @@ import compiler from './compiler.js'
   const stats = await compiler('assets/logo.png')
+
   const output = stats.toJson().modules[0].source
+
   expect(output).toMatch(/^module\.exports = \{$/gm)
@@ -11,2 +13,4 @@ expect(output).toMatch(/^ *src: (.*),$/gm)
   expect(output).toMatch(/^ *preview: 'data:(.*)',$/gm)
+
+  console.log('>>>> output', output)
 })

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

25809

decreased by-1.99%

Lines of code

99

decreased by-16.81%

No dependency changes