remark-inline-svg-flex 0.4.2 → 1.0.0

package/README.md

@@ -1,5 +1,3 @@
-> ⚠️ Beta Nearing v1.0.0 — APIs may still change slightly.
-
 # remark-inline-svg-flex
 
 [![Downloads](https://img.shields.io/npm/dm/remark-inline-svg-flex.svg?style=flat-square)](https://www.npmjs.com/package/remark-inline-svg-flex)
@@ -17,13 +15,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 +53,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 markdown = await readFile(path, { encoding: 'utf8' });
+const filePath = './tests/fixtures/example.md';
+const markdownString = await readFile(filePath, { encoding: 'utf8' });
 
-return await remark()
-  .use(remarkParse)
-  .use(remarkInlineSvg)
-  .process({ value: markdown, path: path });
+/**
+ * `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 });
+}
+
+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 +131,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.2",
+  "version": "1.0.0",
   "description": "Customizable Remark plugin to inline and optimize SVGs with SVGO, with robust path resolution.",
   "keywords": [
     "remark",
@@ -52,4 +52,4 @@
     "svgo": "^4.0.1",
     "unist-util-visit": "^5.1.0"
   }
-}
+}

package/.github/workflows/release.yml

@@ -1,62 +0,0 @@
-name: Release
-
-on:
-  push:
-    branches:
-      - main
-    paths:
-      - package.json
-      - src/**
-
-jobs:
-  release:
-    runs-on: ubuntu-latest
-
-    permissions:
-      contents: write
-
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: get version
-        run: echo "VERSION=$(jq -r .version package.json)" >> $GITHUB_ENV
-
-      - name: check if tag exists
-        id: tagcheck
-        run: |
-          if git rev-parse "v$VERSION" >/dev/null 2>&1; then
-            echo "exists=true" >> $GITHUB_OUTPUT
-          else
-            echo "exists=false" >> $GITHUB_OUTPUT
-          fi
-
-      - uses: actions/setup-node@v4
-        if: steps.tagcheck.outputs.exists == 'false'
-        with:
-          node-version: 24
-          registry-url: https://registry.npmjs.org/
-
-      - name: test, build, publish and release
-        if: steps.tagcheck.outputs.exists == 'false'
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-        run: |
-          npm ci
-          npm run tests
-          npm run build
-          git config user.name "github-actions"
-          git config user.email "github-actions@github.com"
-          git tag "v$VERSION"
-          git push origin "v$VERSION"
-          npm publish
-
-      - name: create Github release
-        if: steps.tagcheck.outputs.exists == 'false'
-        uses: softprops/action-gh-release@v2
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        with:
-          tag_name: v${{ env.VERSION }}
-          name: Release v${{ env.VERSION }}