patchedDependencies in Docmost, an open-source alternative to Confluence and Notion.

In this article, we review how patchedDependencies in Docmost is implemented. I saw a folder named “patches” right at the root level.

When I opened this folder, I saw a file named react-arborist@3.4.0.patch

Then I searched for “react-arborist” across the codebase and found the results shown below:

If you scroll past these first two items, you will find a match in a file, package.json.

This below code is picked from docmost/package.json.

"packageManager": "pnpm@10.4.0",
  "pnpm": {
    "patchedDependencies": {
      "react-arborist@3.4.0": "patches/react-arborist@3.4.0.patch"
    },
    "overrides": {
      "jsdom": "25.0.1"
    },
    "neverBuiltDependencies": []
  }

I honestly don’t know what this “patchedDependencies” is so I read the pnpm patch documentation.

pnpm patch <pkg>

Prepare a package for patching (inspired by a similar command in Yarn).

This command will cause a package to be extracted in a temporary directory intended to be editable at will.

Once you’re done with your changes, run pnpm patch-commit <path> (with <path> being the temporary directory you received) to generate a patchfile and register it into your top-level manifest via the patchedDependencies field.

Usage:

pnpm patch <pkg name>@<version>

I picked this pnpm patch info from pnpm official docs.

Now it makes sense why there is patches folder at the root level and why this is registered in package.json. Author at Docmost wrote a patch to react-arborist. Why? let’s see what the patch file looks like, this will show us the list of changes:

diff --git a/dist/module/components/default-container.js b/dist/module/components/default-container.js
index 47724f59b482454fe3144dbb98bd16d3df6a9c17..2285e35ea0073a773b7b74e22758056fd3514c1a 100644
--- a/dist/module/components/default-container.js
+++ b/dist/module/components/default-container.js
@@ -34,28 +34,6 @@ export function DefaultContainer() {
                 return;
             }
             if (e.key === "Backspace") {
-                if (!tree.props.onDelete)
-                    return;
-                const ids = Array.from(tree.selectedIds);
-                if (ids.length > 1) {
-                    let nextFocus = tree.mostRecentNode;
-                    while (nextFocus && nextFocus.isSelected) {
-                        nextFocus = nextFocus.nextSibling;
-                    }
-                    if (!nextFocus)
-                        nextFocus = tree.lastNode;
-                    tree.focus(nextFocus, { scroll: false });
-                    tree.delete(Array.from(ids));
-                }
-                else {
-                    const node = tree.focusedNode;
-                    if (node) {
-                        const sib = node.nextSibling;
-                        const parent = node.parent;
-                        tree.focus(sib || parent, { scroll: false });
-                        tree.delete(node);
-                    }
-                }
                 return;
             }
             if (e.key === "Tab" && !e.shiftKey) {

This above diff is picked from docmost/patches/react-arborist. So judging by the diff, the patch applied here is around how “backspace” keydown is handled. The patch made it so that nothing happens instead just returns. “-” in red indicates that lines have been removed. I really do not know why this patch has been made, but it is interesting to learn that you can patch dependencies this way in pnpm.

About me:

Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.

I am open to work on interesting projects. Send me an email at ramu.narasinga@gmail.com

My Github — https://github.com/ramu-narasinga

My website — https://ramunarasinga.com

My Youtube channel — https://www.youtube.com/@ramu-narasinga

Learning platform — https://thinkthroo.com

Codebase Architecture — https://app.thinkthroo.com/architecture

Best practices — https://app.thinkthroo.com/best-practices

Production-grade projects — https://app.thinkthroo.com/production-grade-projects

References:

1. https://github.com/docmost/docmost/blob/de57d051998d39780b0cb8e1a755d7c8b256549e/patches/react-arborist%403.4.0.patch#L4

2. https://github.com/docmost/docmost/blob/de57d051998d39780b0cb8e1a755d7c8b256549e/package.json#L93

3. https://github.com/search?q=repo%3Adocmost%2Fdocmost%20react-arborist&type=code