Adding support for parsing data-src attribute in HTML for V2

[moritzlaube]

Hi everybody,

I am trying to write a simple plugin that supports parsing the image URLs in the data-src attribute to support lazy loading images. Right now Parcel V" is ignoring those URLs. But the Parcel V2 API is overwhelming me and I don't no where to start. Is there a more seasoned developer out there who could push me in the right direction? I already figured that I should somehow extend the already existing html-transformer. But that's about it.

Thanks for your help.

[mischnic]

Your transformer would look something like this (I haven't tested this):

// @flow

import {Transformer} from '@parcel/plugin';
import parse from 'posthtml-parser';
import nullthrows from 'nullthrows';
import render from 'posthtml-render';
import semver from 'semver';
import PostHTML from 'posthtml';

export default (new Transformer({
  canReuseAST({ast}) {
    return ast.type === 'posthtml' && semver.satisfies(ast.version, '^0.4.0');
  },

  async parse({asset}) {
    return {
      type: 'posthtml',
      version: '0.4.1',
      program: parse(await asset.getCode(), {
        lowerCaseAttributeNames: true,
      }),
    };
  },

  async transform({asset}) {
    let ast = nullthrows(await asset.getAST());

    let isDirty;
    PostHTML().walk.call(ast.program, node => {
      let {tag, attrs} = node;
      if (!attrs) {
        return node;
      }

      if (tag === 'img' && attrs['data-src'] != null) {
        attrs['data-src'] = asset.addURLDependency(attrs['data-src'], {});
        isDirty = true;
      }

      return node;
    });

    if (isDirty) {
      asset.setAST(ast);
    }

    return [asset];
  },

  generate({ast}) {
    return {
      content: render(ast.program),
    };
  },
}): Transformer);

The config in your project:

{
    "extends": "@parcel/config-default",
    "transformers": {
        "*.html": ["parcel-transformer-html-datasrc", "..."]
    }
}

An example custom plugin: https://github.com/mischnic/parcel-resolver-root

[moritzlaube]

Thanks for your quick reply! I will try to make sense of it and do my best.. :) Thanks so much.

[moritzlaube]

Hi @mischnic, once again, thanks for your support. I managed to write that plugin. I know want to write a test for it and then publish it on npm. I am using the Parcel API programmatically using the code from the docs that should ouput to the in memory file system. The code is picking up my plugin through the .parcelrc. I can see that when I am console.logging from within my plugin code. But other than that nothing is written to the console... Are you or anyone else able to spot the mistake? Thanks again for your support.

const path = require('path')

/* eslint-disable node/no-extraneous-require -- these are all installed as part of `parcel` */

const { NodeFS, MemoryFS } = require('@parcel/fs')
// const defaultConfig = require('@parcel/config-default').default
const defaultConfigFilePath = require.resolve('@parcel/config-default')
const Parcel = require('@parcel/core').default
const { createWorkerFarm } = require('@parcel/core')

/* eslint-enable node/no-extraneous-require */

const DIST_DIR = './dist'

;(async () => {
  const workerFarm = createWorkerFarm()
  const inputFS = new NodeFS()
  const outputFS = new MemoryFS(workerFarm)
  await outputFS.mkdirp(DIST_DIR)
  let bundler = new Parcel({
    entries: [path.join(__dirname, 'index.html')],
    defaultConfig: defaultConfigFilePath,
    defaultTargetOptions: {
      engines: {
        browsers: ['last 1 Chrome version'],
        node: '10',
      },
      distDir: DIST_DIR,
    },
    inputFS,
    outputFS,
    workerFarm,
    patchConsole: false,
    mode: 'production',
  })
  await bundler.run()
  console.log(await outputFS.readdir(DIST_DIR))
  for (const file of await outputFS.readdir(DIST_DIR)) {
    console.log('test')
    console.log('---------', file, '---------')
    console.log(await outputFS.readFile(path.join(DIST_DIR, file), 'utf8'))
  }
  await workerFarm.end()
})()

My package.json looks like that

{
  "name": "parcel-transformer-html-datasrc",
  "version": "1.0.0",
  "description": "A Parcel 2.x Plugin to parse data-src and data-srcset attributes on html image-tags",
  "main": "index.js",
  "targets": {
    "main": false
  },
  "engines": {
    "node": ">= 12.0.0",
    "parcel": "2.0.0-beta.3.1"
  },
  "scripts": {
    "lint": "lint-staged",
    "prepare": "husky install"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint"
    }
  },
  "lint-staged": {
    "./**/*.js": [
      "prettier --write",
      "eslint --fix"
    ]
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/moritzlaube/parcel-transformer-html-datasrc.git"
  },
  "keywords": [
    "parcel 2",
    "plugin",
    "parceljs 2",
    "data-src",
    "data-srcset"
  ],
  "bugs": {
    "url": "https://github.com/moritzlaube/parcel-transformer-html-datasrc/issues"
  },
  "homepage": "https://github.com/moritzlaube/parcel-transformer-html-datasrc#readme",
  "devDependencies": {
    "eslint": "^7.28.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.23.4",
    "husky": "^6.0.0",
    "lint-staged": "^11.0.0",
    "parcel": "^2.0.0-beta.3.1",
    "parcel-transformer-html-datasrc": "file:",
    "prettier": "^2.3.1"
  },
  "dependencies": {
    "@parcel/plugin": "^2.0.0-alpha.3",
    "nullthrows": "^1.1.1",
    "posthtml": "^0.16.1",
    "posthtml-parser": "^0.9.0",
    "posthtml-render": "^2.0.3",
    "semver": "^7.3.5"
  }
}```

[mischnic]

It should be shouldPatchConsole: false instead.

[moritzlaube]

One last question: I am almost ready to publish the package. In my package.json I am specifying the parcel version. Right now, I am specifically targeting the version I am using:

  "engines": {
    "node": ">= 12.0.0",
    "parcel": "2.0.0-beta.3.1"
  },

Is there a way to target Parcel 2.X? I tried >= 2.0.0, ^2.0, 2.xetc. But nothing worked. Thanks!

[mischnic]

I wouldn't recommend targeting Parcel 2 stable, because there are already breaking changes in master compared to beta.3.

So I would either do "parcel": "2.0.0-beta.3.1" (but then the nightlies won't work), or "parcel": "^2.0.0-beta.3.1" which really means "v2 stable or prerelease" so that it doesn't fail immediately if another prerelease Parcel version is used (but the plugin user will have to ensure themselves that your plugin and Parcel itself are compatible).

2.0.0 is compatible with the range ^2.0.0-beta.3.1.: https://jubianchi.github.io/semver-check/#/%3E%3D2.0.0-beta.3.1/2.0.0

[moritzlaube]

With a lot of help of @mischnic I've been able to publish the parcel-transformer-html-datasrcplugin on npm. Hope it will come in handy for some devs working with lazy loading images: https://www.npmjs.com/package/parcel-transformer-html-datasrc