fix: 🚧 Fix some breaking changes of new dependencies.

package.json

@@ -24,6 +24,7 @@
     "type": "git",
     "url": "https://github.com/JS-DevTools/rehype-inline-svg.git"
   },
+  "type": "module",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "files": [
@@ -41,7 +42,7 @@
     "release": "npm run upgrade && npm run clean && npm run build && npm test && npm run bump"
   },
   "engines": {
-    "node": ">=10"
+    "node": "^12.20.0 || >=14.13.1"
   },
   "devDependencies": {
     "@jsdevtools/eslint-config": "^1.1.4",

src/cache.ts

@@ -1,6 +1,7 @@
-import * as SVGO from "svgo";
-import { GroupedImageNodes, ImageNodeGroup } from "./image-node";
-import { readFile } from "./read-file";
+import { optimize as optimizeSvg } from "svgo";
+import type { Config as SvgoConfig } from "svgo";
+import type { GroupedImageNodes, ImageNodeGroup } from "./image-node.js";
+import { readFile } from "./read-file.js";
 
 /**
  * A cache of the contents of of SVG files. This saves us from reading the same files
@@ -23,12 +24,9 @@ export class SvgCache extends Map<string, string> {
    * Reads the contents of any SVG files that aren't already in the cache,
    * and adds them to the cache.
    */
-  public async read(groupedNodes: GroupedImageNodes, optimize: boolean | SVGO.Options): Promise<void> {
-    // Create an SVG Optimizer, if necessary
-    let svgo = optimize && new SVGO(optimize === true ? undefined : optimize);
-
+  public async read(groupedNodes: GroupedImageNodes, optimize: boolean | SvgoConfig): Promise<void> {
     // Queue-up any files that aren't already in the cache
-    let promises = [...groupedNodes].map((group) => this._readFile(group, svgo));
+    let promises = [...groupedNodes].map((group) => this._readFile(group, optimize));
     let queued = this._queue.push(...promises);
 
     // Wait for all queued files to be read
@@ -41,7 +39,7 @@ export class SvgCache extends Map<string, string> {
   /**
    * Reads the specified SVG file and returns its contents
    */
-  private async _readFile(group: ImageNodeGroup, optimizer: SVGO | false): Promise<void> {
+  private async _readFile(group: ImageNodeGroup, optimize: boolean | SvgoConfig): Promise<void> {
     let [path, nodes] = group;
 
     if (this.has(path)) {
@@ -59,8 +57,9 @@ export class SvgCache extends Map<string, string> {
     let content = await readFile(path, "utf8");
 
     // Optimize the contents, if enabled
-    if (optimizer) {
-      let optimized = await optimizer.optimize(content, { path });
+    if (optimize) {
+      const optimizeConfig = typeof optimize === "boolean" ? {} : optimize;
+      let optimized = await optimizeSvg(content, { path, ...optimizeConfig });
       content = optimized.data;
     }
 

src/image-node.ts

@@ -1,4 +1,4 @@
-import { Node } from "unist";
+import type { Node } from "unist";
 
 /**
  * An `<img>` HAST node

src/img-to-svg.ts

@@ -1,10 +1,11 @@
-import * as parse from "rehype-parse";
-import * as unified from "unified";
-import { Processor } from "unified";
-import { Parent } from "unist";
-import * as vFile from "vfile";
-import { SvgCache } from "./cache";
-import { GroupedImageNodes, isSvgNode, SvgNode } from "./image-node";
+import parse from "rehype-parse";
+import { unified } from "unified";
+import type { Processor } from "unified";
+import type { Node, Parent } from "unist";
+import { VFile } from "vfile";
+import { SvgCache } from "./cache.js";
+import { isSvgNode } from "./image-node.js";
+import type { GroupedImageNodes, SvgNode } from "./image-node.js";
 
 /**
  * Converts the given `<img>` nodes to `<svg>` nodes
@@ -36,9 +37,9 @@ export function imgToSVG(groupedNodes: GroupedImageNodes, svgCache: SvgCache): v
 /**
  * Parses the specified SVG image to a HAST tree
  */
-function parseSVG(filePath: string, svgCache: SvgCache, processor: Processor): SvgNode {
-  let file = vFile({
-    contents: svgCache.get(filePath),
+function parseSVG(filePath: string, svgCache: SvgCache, processor: Processor<Node>): SvgNode {
+  let file = new VFile({
+    value: svgCache.get(filePath),
     path: filePath,
   });
 

src/index.ts

@@ -1,13 +1,7 @@
-import { inlineSVG } from "./inline-svg";
+import { inlineSVG } from "./inline-svg.js";
 
-export { CacheEfficiency, Options } from "./options";
+export type { CacheEfficiency, Options } from "./options.js";
 export { inlineSVG };
 
 // Export `inlineSVG` as the default export
 export default inlineSVG;
-
-// CommonJS default export hack
-/* eslint-env commonjs */
-if (typeof module === "object" && typeof module.exports === "object") {
-  module.exports = Object.assign(module.exports.default, module.exports);
-}

src/inline-svg.ts

@@ -1,17 +1,19 @@
 import * as path from "path";
-import { Processor, Transformer } from "unified";
-import { Node, Parent } from "unist";
+import type { Transformer } from "unified";
+import type { Node, Parent } from "unist";
 import { VFile } from "vfile";
-import { SvgCache } from "./cache";
-import { GroupedImageNodes, ImageNode, isImageNode } from "./image-node";
-import { imgToSVG } from "./img-to-svg";
-import { applyDefaults, Options } from "./options";
+import { SvgCache } from "./cache.js";
+import { isImageNode } from "./image-node.js";
+import type { GroupedImageNodes, ImageNode } from "./image-node.js";
+import { imgToSVG } from "./img-to-svg.js";
+import { applyDefaults } from "./options.js";
+import type { Options } from "./options.js";
 
 /**
  * This is a Rehype plugin that finds SVG `<img>` elements and replaces them with inlined `<svg>` elements.
  * It also minimizes the SVG to avoid adding too much size to the page.
  */
-export function inlineSVG(this: Processor, config?: Partial<Options>): Transformer {
+export function inlineSVG(config?: Partial<Options>): Transformer {
   let options = applyDefaults(config);
   let svgCache = new SvgCache();
   let hits = 0, misses = 0;
@@ -49,14 +51,14 @@ export function inlineSVG(this: Processor, config?: Partial<Options>): Transform
 /**
  * Recursively crawls the HAST tree and finds all SVG `<img>` elements
  */
-function findSvgNodes(node: Node): ImageNode[] {
+function findSvgNodes(node: Node | Parent): ImageNode[] {
   let imgNodes: ImageNode[] = [];
 
   if (isImageNode(node) && node.properties.src.endsWith(".svg")) {
     imgNodes.push(node);
   }
 
-  if (node.children) {
+  if ((node as Parent).children) {
     let parent = node as Parent;
     for (let child of parent.children) {
       imgNodes.push(...findSvgNodes(child));

src/options.ts

@@ -1,4 +1,4 @@
-import * as SVGO from "svgo";
+import { type Config as SvgoConfig } from "svgo";
 
 /**
  * Options for the Inline SVG plugin.
@@ -34,7 +34,7 @@ export interface Options {
    *
    * Defaults to `true`.
    */
-  optimize: boolean | SVGO.Options;
+  optimize: boolean | SvgoConfig;
 
   /**
    * A callback function that receives cache efficiency information.

tsconfig.json

@@ -1,12 +1,13 @@
 {
   "compilerOptions": {
-    "target": "esnext",
-    "module": "commonjs",
-    "moduleResolution": "node",
+    "module": "Node16",
+    "target": "es2020",
+    "verbatimModuleSyntax": true,
 
     "outDir": "lib",
     "sourceMap": true,
     "declaration": true,
+    "declarationMap": true,
 
     "newLine": "LF",
     "forceConsistentCasingInFileNames": true,