feat: add ESM support

Author: ruanyf

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
+index.js
 package-lock.json
 

README.md

@@ -8,6 +8,20 @@ $ npm install markdown-it-image-lazy-loading
 
 ## Usage
 
+Load it in ES module.
+
+```javascript
+import markdownit from 'markdown-it';
+import lazy_loading from 'markdown-it-lazy-loading';
+
+const md = markdownit();
+md.use(lazy_loading);
+md.render(`![](example.png "image title")`);
+// <p><img src="example.png" alt="" title="image title" loading="lazy"></p>\n
+```
+
+Or load it in CommonJS module.
+
 ```javascript
 const md = require('markdown-it')();
 const lazy_loading = require('markdown-it-image-lazy-loading');

index.js renamed to index.mjs

@@ -1,6 +1,7 @@
-'use strict';
+import imageSize from 'image-size';
+import path from 'node:path';
 
-module.exports = function lazy_loading_plugin(md, mdOptions) {
+function lazy_loading_plugin(md, mdOptions) {
   var defaultImageRenderer = md.renderer.rules.image;
 
   md.renderer.rules.image = function (tokens, idx, options, env, self) {
@@ -12,12 +13,9 @@ module.exports = function lazy_loading_plugin(md, mdOptions) {
     }
 
     if (mdOptions && mdOptions.base_path && mdOptions.image_size === true) {
-      const sizeOf = require('image-size');
-      const path = require('path');
-
       const imgSrc = token.attrGet('src');
       const imgPath = path.join(mdOptions.base_path, imgSrc);
-      const dimensions = sizeOf(imgPath);
+      const dimensions = imageSize(imgPath);
 
       token.attrSet('width', dimensions.width);
       token.attrSet('height', dimensions.height);
@@ -26,3 +24,6 @@ module.exports = function lazy_loading_plugin(md, mdOptions) {
     return defaultImageRenderer(tokens, idx, options, env, self);
   };
 };
+
+export default lazy_loading_plugin;
+

package.json

@@ -3,8 +3,16 @@
   "version": "1.2.0",
   "description": "a markdown-it plugin supporting Chrome 75's native image lazy-loading",
   "main": "index.js",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
+  },
   "scripts": {
-    "test": "npx tape test/*.js"
+    "build": "rollup --config rollup.config.mjs",
+    "test": "npm run build && npx tape test/*.js",
+    "prepublishOnly": "npm run build"
   },
   "keywords": [
     "markdown-it-plugin",
@@ -19,7 +27,8 @@
     "image-size": "^1.0.0"
   },
   "devDependencies": {
-    "markdown-it": "^12.3.0",
+    "markdown-it": "^14.0.0",
+    "rollup": "^4.9.1",
     "tape": "^5.3.2"
   }
 }

rollup.config.mjs

@@ -0,0 +1,8 @@
+export default {
+	input: 'index.mjs',
+	output: {
+		file: 'index.js',
+		format: 'cjs'
+	},
+	external: ['image-size', 'node:path']
+};

test.mjs

@@ -0,0 +1,8 @@
+import markdownit from 'markdown-it';
+import lazy_loading from './index.mjs';
+
+const md = markdownit();
+
+md.use(lazy_loading);
+console.log(md.render(`![](example.png "image title")`));
+// <p><img src="example.png" alt="" title="image title" loading="lazy"></p>\n

test/basic.js

@@ -13,4 +13,3 @@ test('lazy loading test', function (t) {
   );
 
 });
-