remark-inline-svg-flex 0.4.1 → 0.5.0

package/.github/workflows/release.yml

@@ -7,6 +7,7 @@ on:
     paths:
       - package.json
       - src/**
+      - .github/workflows/**
 
 jobs:
   release:
@@ -43,7 +44,7 @@ jobs:
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
         run: |
-          npm ci
+          npm i
           npm run tests
           npm run build
           git config user.name "github-actions"

package/README.md

@@ -1,4 +1,4 @@
-> ⚠️ Beta Nearing v1.0.0 — APIs may still change slightly.
+> ⚠️ Beta Nearing v1.0.0 — Still under development! APIs may change.
 
 # remark-inline-svg-flex
 
@@ -17,13 +17,14 @@ Flexible Remark plugin that inlines and optimizes SVGs with SVGO, featuring cust
     - [`assetsDir`](#assetsdir)
     - [`wrapper`](#wrapper)
     - [`svgo`](#svgo)
+  - [Paths supported](#path-supported)
   - [SVGO configuration](#svgo-configuration)
 
 ## Features
 
 ### ✔️ Robust and customizable path resolution
 
-- If the SVG path is absolute, it is used as-is.
+- If the SVG path is absolute, it will use the project directory as root.
 - If the path is relative and `assetsDir` is defined, it is resolved relative to the `assetsDir` directory.
 - Otherwise, the path is resolved relative to the Markdown file’s location.
 
@@ -54,39 +55,49 @@ npm i remark-inline-svg-flex
 Say we have the following file `example.md`:
 
 ```markdown
-# Hello
+# Some Title
 
 This is a test markdown document.
 
-![some svg](some.svg)
+![some svg](./alien.svg)
 ```
 
-And our module `example.js` looks as the one below (it is recommended to pass the markdown directory `path` to `process()` so that the plugin can resolve relative paths correctly).
+And our module `example.js` looks as the one below:
 
 ```js
 import { remark } from 'remark';
-import { readFile } from 'node:fs/promises';
+import remarkParse from 'remark-parse';
 import { remarkInlineSvg } from 'remark-inline-svg-flex';
+import { readFile } from 'node:fs/promises';
+
+const filePath = './tests/fixtures/example.md';
+const markdownString = await readFile(filePath, { encoding: 'utf8' });
 
-const markdown = await readFile(path, { encoding: 'utf8' });
+/**
+ * `filePath` is used as the virtual file path so that relative links
+ * inside the markdown file can be resolved correctly by the plugin.
+ */
+async function myProcess(markdown, filePath) {
+  return await remark()
+    .use(remarkParse)
+    .use(remarkInlineSvg)
+    .process({ value: markdown, path: filePath });
+}
 
-return await remark()
-  .use(remarkParse)
-  .use(remarkInlineSvg)
-  .process({ value: markdown, path: path });
+const result = await myProcess(markdownString, filePath);
+
+console.log(String(result.value));
 ```
 
 Now running `node example.js` yields:
 
 ```markdown
-# Hello
+# Some Title
 
 This is a test markdown document.
 
 <figure class="inline-svg">
-  <svg width="800" height="800" fill="none" viewBox="0 0 16 16">
-  ...
-  </svg>
+  <svg width="800" height="800" fill="none" viewBox="0 0 16 16"><path fill="#000" fill-rule="evenodd" d="m8 16-4.458-3.662A6.96 6.96 0 0 1 1 6.96C1 3.116 4.156 0 8 0s7 3.116 7 6.96a6.96 6.96 0 0 1-2.542 5.378zM3 6h2a2 2 0 0 1 2 2v1L3 7.5zm8 0a2 2 0 0 0-2 2v1l4-1.5V6z" clip-rule="evenodd"/></svg>
 </figure>
 ```
 
@@ -122,6 +133,20 @@ Defines the HTML wrapper used around the inlined SVG.
 
 The SVG's are optimized by default. Disable it by setting it to `false`.
 
+## Path supported
+
+Remote URLs `http://`, `https://` and other external URLs are ignored.
+
+Examples of supported paths:
+
+```
+example.svg
+/example.svg
+/tests/assets/example.svg
+./example.svg
+../assets/example.svg
+```
+
 ## SVGO configuration
 
 SVGO is configured to use the [default preset](https://svgo.dev/docs/preset-default/) of plugins and the [removeXMLNS](https://svgo.dev/docs/plugins/removeXMLNS/) plugin.

package/dist/cjs/plugin.js

@@ -21,12 +21,12 @@ const remarkInlineSvg = (consumerOptions = {}) => {
         wrapper: consumerOptions.wrapper ?? '<figure class="inline-svg"></figure>',
         svgo: consumerOptions.svgo ?? true,
     };
-    return function transformer(tree, file) {
+    return function transformer(tree, vFile) {
         (0, unist_util_visit_1.visit)(tree, 'image', (node, i, parent) => {
-            if (!node.url?.endsWith(options.suffix) || !parent)
+            if (!node.url?.endsWith(options.suffix) || !parent || isHttpUrl(node.url))
                 return;
             try {
-                const svgPath = resolvePath(options.assetsDir, node, file.history[0] && node_path_1.default.dirname(file.history[0]));
+                const svgPath = resolvePath(options.assetsDir, node, vFile.history[0] && node_path_1.default.dirname(vFile.history[0]), vFile.cwd);
                 const svgString = processSvg(svgPath, options.svgo);
                 if (typeof i === 'number') {
                     parent.children[i] = {
@@ -65,15 +65,19 @@ function wrap(svgString, htmlWrapper) {
  * 2) `assetsDir` → relative to it
  * 3) fallback → relative to Markdown file directory (if markdown file directory is undefined use absolute URL)
  */
-function resolvePath(assetsDir, node, markdownFileDir) {
+function resolvePath(assetsDir, node, vFileDir, vFileCwd) {
+    const root = vFileCwd ?? process.cwd();
     if (node_path_1.default.isAbsolute(node.url)) {
-        return node_path_1.default.resolve(process.cwd(), node.url);
+        // absolute URL attempting to use the project directory as root (uses `process.cwd()` as fallback)
+        return node_path_1.default.resolve(root, normalizePath(node.url));
     }
     else if (assetsDir) {
-        return node_path_1.default.resolve(process.cwd(), assetsDir, node.url);
+        // relative to assetsDir specified by consumer
+        return node_path_1.default.resolve(root, normalizePath(assetsDir), node.url);
     }
     else {
-        return node_path_1.default.resolve(markdownFileDir ?? process.cwd(), node.url);
+        // relative to Markdown file directory
+        return node_path_1.default.resolve(vFileDir ?? root, node.url);
     }
 }
 /**
@@ -84,3 +88,22 @@ function optimizeSvg(svgString) {
         plugins: ['preset-default', 'removeXMLNS'],
     });
 }
+function normalizePath(path) {
+    let normalizedPath = path;
+    if (path.startsWith('/')) {
+        normalizedPath = normalizedPath.slice(1);
+    }
+    if (!path.endsWith('/')) {
+        normalizedPath = normalizedPath + '/';
+    }
+    return normalizedPath;
+}
+function isHttpUrl(url) {
+    try {
+        const parsed = new URL(url);
+        return parsed.protocol === 'http:' || parsed.protocol === 'https:';
+    }
+    catch {
+        return false;
+    }
+}

package/dist/plugin.js

@@ -19,12 +19,12 @@ const remarkInlineSvg = (consumerOptions = {}) => {
         wrapper: consumerOptions.wrapper ?? '<figure class="inline-svg"></figure>',
         svgo: consumerOptions.svgo ?? true,
     };
-    return function transformer(tree, file) {
+    return function transformer(tree, vFile) {
         visit(tree, 'image', (node, i, parent) => {
-            if (!node.url?.endsWith(options.suffix) || !parent)
+            if (!node.url?.endsWith(options.suffix) || !parent || isHttpUrl(node.url))
                 return;
             try {
-                const svgPath = resolvePath(options.assetsDir, node, file.history[0] && path.dirname(file.history[0]));
+                const svgPath = resolvePath(options.assetsDir, node, vFile.history[0] && path.dirname(vFile.history[0]), vFile.cwd);
                 const svgString = processSvg(svgPath, options.svgo);
                 if (typeof i === 'number') {
                     parent.children[i] = {
@@ -62,15 +62,19 @@ function wrap(svgString, htmlWrapper) {
  * 2) `assetsDir` → relative to it
  * 3) fallback → relative to Markdown file directory (if markdown file directory is undefined use absolute URL)
  */
-function resolvePath(assetsDir, node, markdownFileDir) {
+function resolvePath(assetsDir, node, vFileDir, vFileCwd) {
+    const root = vFileCwd ?? process.cwd();
     if (path.isAbsolute(node.url)) {
-        return path.resolve(process.cwd(), node.url);
+        // absolute URL attempting to use the project directory as root (uses `process.cwd()` as fallback)
+        return path.resolve(root, normalizePath(node.url));
     }
     else if (assetsDir) {
-        return path.resolve(process.cwd(), assetsDir, node.url);
+        // relative to assetsDir specified by consumer
+        return path.resolve(root, normalizePath(assetsDir), node.url);
     }
     else {
-        return path.resolve(markdownFileDir ?? process.cwd(), node.url);
+        // relative to Markdown file directory
+        return path.resolve(vFileDir ?? root, node.url);
     }
 }
 /**
@@ -81,4 +85,23 @@ function optimizeSvg(svgString) {
         plugins: ['preset-default', 'removeXMLNS'],
     });
 }
+function normalizePath(path) {
+    let normalizedPath = path;
+    if (path.startsWith('/')) {
+        normalizedPath = normalizedPath.slice(1);
+    }
+    if (!path.endsWith('/')) {
+        normalizedPath = normalizedPath + '/';
+    }
+    return normalizedPath;
+}
+function isHttpUrl(url) {
+    try {
+        const parsed = new URL(url);
+        return parsed.protocol === 'http:' || parsed.protocol === 'https:';
+    }
+    catch {
+        return false;
+    }
+}
 export { remarkInlineSvg };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remark-inline-svg-flex",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Customizable Remark plugin to inline and optimize SVGs with SVGO, with robust path resolution.",
   "keywords": [
     "remark",
@@ -23,12 +23,12 @@
   "type": "module",
   "main": "./dist/cjs/index.js",
   "module": "./dist/index.js",
-  "types": "./dist/types.d.ts",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/index.js",
       "require": "./dist/cjs/index.js",
-      "types": "./dist/types.d.ts"
+      "types": "./dist/index.d.ts"
     }
   },
   "scripts": {