ParcelJS plugin to bundle resources defined in data-* attributes
Switch branches/tags
Nothing to show
Clone or download
Latest commit 6221d47 Dec 3, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore Ignore node_modules directory Dec 2, 2018
html-asset.js Override getAttrDepHandler to resolve data-srcset dependencies Dec 2, 2018
index.js Fix invalid arg to addAssetType calls Dec 2, 2018
license Initial commit Dec 2, 2018
package-lock.json 1.0.1 Dec 3, 2018
package.json 1.0.1 Dec 3, 2018
readme.md Add examples section in readme file Dec 3, 2018

readme.md

parcel-plugin-data-src

ParcelJS plugin to bundle resources defined in data-src and data-srcset attributes.

This is particularly useful when doing lazyloading of images, which doesn't directly place the image path in the src attribute.

Installation

$ npm install --save-dev parcel-plugin-data-src

Example

<picture>
  <source
    data-srcset="
      ./images/image-lg.webp 1000w,
      ./images/image-md.webp 500w,
      ./images/image-sm.webp 250w"
    sizes="100vw"
    type="image/webp"
  >
  <img
    data-srcset="
      ./images/image-lg.jpg 1000w,
      ./images/image-md.jpg 500w,
      ./images/image-sm.jpg 250w"
    sizes="100vw"
    data-src="./images/image-lg.jpg"
    src="./images/image-placeholder.jpg"
  >
</picture>

By default, Parcel will only bundle ./images/image-placeholder.jpg since it's defined in the src attribute.

Using this plugin, the following resosurces that are defined in data-srcset and data-src will also be bundled.

  • ./images/image-lg.webp
  • ./images/image-md.webp
  • ./images/image-sm.webp
  • ./images/image-lg.jpg
  • ./images/image-md.jpg
  • ./images/image-sm.jpg

License

MIT License