fix(shared): avoid regeneration of markdown or mdx

Avoid regeneration of Markdown or MDX if non-relevant fields have changed

.changeset/thirty-eels-cough.md

@@ -0,0 +1,6 @@
+---
+"@content-collections/markdown": patch
+"@content-collections/mdx": patch
+---
+
+Avoid regeneration of markdown or mdx if non relevant fields have changed

packages/markdown/src/index.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vitest } from "vitest";
 import { compileMarkdown } from ".";
 import { Context, Meta } from "@content-collections/core";
 
@@ -112,4 +112,25 @@ describe("markdown", () => {
 
     expect(html).toBe("<h1>Hello <strong>World</strong>!</h1>");
   });
+
+  it("should only use required props for caching", async () => {
+    const cacheFn = vitest.fn();
+
+    const doc = {
+      title: "Hello World",
+      content: "# hello world",
+      _meta: sampleMeta,
+    };
+
+    await compileMarkdown({ cache: cacheFn }, doc);
+
+    const call = cacheFn.mock.calls[0];
+    if (!call) {
+      throw new Error("cache function was not called");
+    }
+
+    const [input] = call;
+
+    expect(Object.keys(input)).toEqual(["content", "_meta"]);
+  });
 });

packages/markdown/src/index.ts

@@ -44,10 +44,19 @@ async function compile(document: Document, options?: Options) {
   return String(html);
 }
 
+// Remove all unnecessary keys from the document
+// and return a new object containing only the keys
+// that should trigger a regeneration if changed.
+function createCacheKey(document: Document): Document {
+  const { content, _meta } = document;
+  return { content, _meta };
+}
+
 export function compileMarkdown(
   { cache }: Pick<Context, "cache">,
   document: Document,
   options?: Options
 ) {
-  return cache(document, (doc) => compile(doc, options));
+  const cacheKey = createCacheKey(document);
+  return cache(cacheKey, (doc) => compile(doc, options));
 }

packages/mdx/src/index.test.tsx

@@ -1,8 +1,11 @@
-import { describe, expect, it, beforeEach } from "vitest";
+import { describe, expect, it, beforeEach, vitest } from "vitest";
 import { Options, compileMDX } from ".";
 import { Context, Meta } from "@content-collections/core";
 import { MDXContent, useMDXComponent } from "./react/server";
-import { useMDXComponent as useClientMDXComponent, MDXContent as MDXClientContent } from "./react/client";
+import {
+  useMDXComponent as useClientMDXComponent,
+  MDXContent as MDXClientContent,
+} from "./react/client";
 import { cleanup, render, renderHook, screen } from "@testing-library/react";
 import { Pluggable, Transformer } from "unified";
 import { Node, Parent } from "mdast";
@@ -29,7 +32,7 @@ describe("MDX tests", () => {
       { cache },
       {
         content,
-        _meta: sampleMeta
+        _meta: sampleMeta,
       },
       options
     );
@@ -155,7 +158,7 @@ describe("MDX tests", () => {
       { cache },
       {
         content: "<HelloWorld />",
-        _meta: sampleMeta
+        _meta: sampleMeta,
       }
     );
 
@@ -213,4 +216,25 @@ describe("/react (client)", () => {
 
     expect(screen.getByRole("heading")).toHaveTextContent("Hello World!");
   });
+
+  it("should only use required props for caching", async () => {
+    const cacheFn = vitest.fn();
+
+    const doc = {
+      title: "Hello World",
+      content: "# hello world",
+      _meta: sampleMeta,
+    };
+
+    await compileMDX({ cache: cacheFn }, doc);
+
+    const call = cacheFn.mock.calls[0];
+    if (!call) {
+      throw new Error("cache function was not called");
+    }
+
+    const [input] = call;
+
+    expect(Object.keys(input)).toEqual(["content", "_meta"]);
+  });
 });

packages/mdx/src/index.ts

@@ -10,7 +10,7 @@ type Document = {
   content: string;
 };
 
-type FileAppender = ReturnType<typeof createFileAppender>
+type FileAppender = ReturnType<typeof createFileAppender>;
 
 export type Options = {
   cwd?: string;
@@ -19,11 +19,19 @@ export type Options = {
   rehypePlugins?: Pluggable[];
 };
 
-async function appendFile(files: Record<string, string>, importPath: string, filePath: string) {
+async function appendFile(
+  files: Record<string, string>,
+  importPath: string,
+  filePath: string
+) {
   files[importPath] = await fs.readFile(filePath, "utf-8");
 }
 
-async function appendDirectory(files: Record<string, string>, importPathPrefix: string, directoryPath: string) {
+async function appendDirectory(
+  files: Record<string, string>,
+  importPathPrefix: string,
+  directoryPath: string
+) {
   if (!existsSync(directoryPath)) {
     return;
   }
@@ -35,7 +43,10 @@ async function appendDirectory(files: Record<string, string>, importPathPrefix:
   }
 }
 
-function createFileAppender(tasks: Promise<void>[], files: Record<string, string>) {
+function createFileAppender(
+  tasks: Promise<void>[],
+  files: Record<string, string>
+) {
   return {
     content: (importPath: string, content: string) => {
       files[importPath] = content;
@@ -82,9 +93,7 @@ async function compile(document: Document, options: Options = {}) {
       return options;
     },
     mdxOptions(mdxOptions) {
-      mdxOptions.rehypePlugins = [
-        ...(options.rehypePlugins ?? []),
-      ];
+      mdxOptions.rehypePlugins = [...(options.rehypePlugins ?? [])];
 
       mdxOptions.remarkPlugins = [
         addMetaToVFile(document._meta),
@@ -97,10 +106,19 @@ async function compile(document: Document, options: Options = {}) {
   return code;
 }
 
+// Remove all unnecessary keys from the document
+// and return a new object containing only the keys
+// that should trigger a regeneration if changed.
+function createCacheKey(document: Document): Document {
+  const { content, _meta } = document;
+  return { content, _meta };
+}
+
 export function compileMDX(
   { cache }: Pick<Context, "cache">,
   document: Document,
   options?: Options
 ) {
-  return cache(document, (doc) => compile(doc, options));
+  const cacheKey = createCacheKey(document);
+  return cache(cacheKey, (doc) => compile(doc, options));
 }