Core: [Remark Image] Support relative imports

fuma-nama · fuma-nama · commit 7dabbc16f53d · 2024-08-31T15:54:30.000+08:00
diff --git a/.changeset/big-seals-grow.md b/.changeset/big-seals-grow.md
@@ -0,0 +1,5 @@
+---
+'fumadocs-core': patch
+---
+
+Remark Image: Support relative imports
diff --git a/apps/docs/next.config.js b/apps/docs/next.config.js
@@ -31,15 +31,6 @@ const config = {
   },
 };
 
-const withMDX = createMDX({
-  buildSearchIndex: {
-    filter: (v) => {
-      return !v.match(/.+\.model\.mdx/) && !v.startsWith('blog');
-    },
-  },
-  mdxOptions: {
-    lastModifiedTime: 'git',
-  },
-});
+const withMDX = createMDX();
 
 export default withAnalyzer(withMDX(config));
diff --git a/apps/docs/scripts/post-build.mts b/apps/docs/scripts/post-build.mts
@@ -1,16 +1,16 @@
 import env from '@next/env';
 import { updateSearchIndexes } from './update-index.mjs';
 import { readFile } from 'node:fs/promises';
-import type { SearchIndex } from 'fumadocs-mdx';
+import type { Manifest } from 'fumadocs-mdx';
 
 env.loadEnvConfig(process.cwd());
 
 async function main() {
-  const indexes = JSON.parse(
-    (await readFile('.next/server/chunks/fumadocs_search.json')).toString(),
-  ) as SearchIndex[];
+  const manifest = JSON.parse(
+    (await readFile('.source/manifest.json')).toString(),
+  ) as Manifest;
 
-  await Promise.all([updateSearchIndexes(indexes)]);
+  await updateSearchIndexes(manifest);
 }
 
 await main().catch((e) => {
diff --git a/apps/docs/scripts/update-index.mts b/apps/docs/scripts/update-index.mts
@@ -1,10 +1,10 @@
 import algosearch from 'algoliasearch';
 import { sync } from 'fumadocs-core/search-algolia/server';
-import type { SearchIndex } from 'fumadocs-mdx';
+import type { Manifest } from 'fumadocs-mdx';
+import { createGetUrl, getSlugs, parseFilePath } from 'fumadocs-core/source';
+import path from 'node:path';
 
-export async function updateSearchIndexes(
-  indexes: SearchIndex[],
-): Promise<void> {
+export async function updateSearchIndexes(manifest: Manifest): Promise<void> {
   if (!process.env.ALGOLIA_API_KEY) {
     console.warn('Algolia API Key not found, skip updating search index.');
     return;
@@ -27,16 +27,29 @@ export async function updateSearchIndexes(
     },
   );
 
+  const getUrl = createGetUrl('/docs');
+
   await sync(client, {
     document: process.env.NEXT_PUBLIC_ALGOLIA_INDEX ?? 'document',
-    documents: indexes.map((docs) => ({
-      _id: docs.id,
-      title: docs.title,
-      description: docs.description,
-      url: docs.url,
-      structured: docs.structuredData,
-      tag: docs.url.split('/')[2],
-    })),
+    documents: manifest.files
+      .filter((file) => file.collection === 'docs')
+      .map((docs) => {
+        const url = getUrl(
+          getSlugs(parseFilePath(path.relative('content/docs', docs.path))),
+        );
+
+        if (!docs.data.structuredData)
+          throw new Error('`structuredData` is required');
+
+        return {
+          _id: docs.path,
+          title: docs.data.frontmatter.title as string,
+          description: docs.data.frontmatter.description as string,
+          url,
+          structured: docs.data.structuredData,
+          tag: url.split('/')[2],
+        };
+      }),
   });
 
   console.log('search updated');
diff --git a/apps/docs/source.config.ts b/apps/docs/source.config.ts
@@ -41,6 +41,7 @@ export const blog = defineCollections({
 
 export default defineConfig({
   generateManifest: true,
+  lastModifiedTime: 'git',
   mdxOptions: {
     rehypeCodeOptions: {
       themes: {
diff --git a/packages/core/src/mdx-plugins/remark-image.ts b/packages/core/src/mdx-plugins/remark-image.ts
@@ -56,10 +56,25 @@ export function remarkImage({
   useImport = true,
   publicDir = path.join(process.cwd(), 'public'),
 }: RemarkImageOptions = {}): Transformer<Root, Root> {
-  return async (tree) => {
+  return async (tree, file) => {
     const importsToInject: { variableName: string; importPath: string }[] = [];
     const promises: Promise<void>[] = [];
 
+    function getImportPath(src: string): string {
+      if (!src.startsWith('/')) return src;
+
+      if (file.path) {
+        const relative = path.relative(
+          path.dirname(file.path),
+          path.join(publicDir, src),
+        );
+
+        return relative.startsWith('./') ? relative : `./${relative}`;
+      }
+
+      return path.join(publicDir, src);
+    }
+
     visit(tree, 'image', (node) => {
       const src = decodeURI(node.url);
       if (!src) return;
@@ -107,10 +122,7 @@ export function remarkImage({
 
         importsToInject.push({
           variableName,
-          importPath: slash(
-            // with imports, relative paths don't have to be absolute
-            src.startsWith('/') ? path.join(publicDir, src) : src,
-          ),
+          importPath: slash(getImportPath(src)),
         });
 
         Object.assign(node, {
diff --git a/packages/core/test/fixtures/remark-image.output.json b/packages/core/test/fixtures/remark-image.output.json
@@ -0,0 +1,169 @@
+{
+  "children": [
+    {
+      "data": {
+        "estree": {
+          "body": [
+            {
+              "source": {
+                "type": "Literal",
+                "value": "./test.png",
+              },
+              "specifiers": [
+                {
+                  "local": {
+                    "name": "__img0",
+                    "type": "Identifier",
+                  },
+                  "type": "ImportDefaultSpecifier",
+                },
+              ],
+              "type": "ImportDeclaration",
+            },
+          ],
+        },
+      },
+      "type": "mdxjsEsm",
+    },
+    {
+      "children": [
+        {
+          "alt": "Test",
+          "attributes": [
+            {
+              "name": "alt",
+              "type": "mdxJsxAttribute",
+              "value": "Test",
+            },
+            {
+              "name": "placeholder",
+              "type": "mdxJsxAttribute",
+              "value": "blur",
+            },
+            {
+              "name": "src",
+              "type": "mdxJsxAttribute",
+              "value": {
+                "data": {
+                  "estree": {
+                    "body": [
+                      {
+                        "expression": {
+                          "name": "__img0",
+                          "type": "Identifier",
+                        },
+                        "type": "ExpressionStatement",
+                      },
+                    ],
+                  },
+                },
+                "type": "mdxJsxAttributeValueExpression",
+                "value": "__img0",
+              },
+            },
+          ],
+          "name": "img",
+          "position": {
+            "end": {
+              "column": 20,
+              "line": 1,
+              "offset": 19,
+            },
+            "start": {
+              "column": 1,
+              "line": 1,
+              "offset": 0,
+            },
+          },
+          "title": null,
+          "type": "mdxJsxFlowElement",
+          "url": "./test.png",
+        },
+      ],
+      "position": {
+        "end": {
+          "column": 20,
+          "line": 1,
+          "offset": 19,
+        },
+        "start": {
+          "column": 1,
+          "line": 1,
+          "offset": 0,
+        },
+      },
+      "type": "paragraph",
+    },
+    {
+      "children": [
+        {
+          "alt": "External",
+          "attributes": [
+            {
+              "name": "alt",
+              "type": "mdxJsxAttribute",
+              "value": "External",
+            },
+            {
+              "name": "src",
+              "type": "mdxJsxAttribute",
+              "value": "https://picsum.photos/id/237/200/300",
+            },
+            {
+              "name": "width",
+              "type": "mdxJsxAttribute",
+              "value": "200",
+            },
+            {
+              "name": "height",
+              "type": "mdxJsxAttribute",
+              "value": "300",
+            },
+          ],
+          "name": "img",
+          "position": {
+            "end": {
+              "column": 50,
+              "line": 3,
+              "offset": 70,
+            },
+            "start": {
+              "column": 1,
+              "line": 3,
+              "offset": 21,
+            },
+          },
+          "title": null,
+          "type": "mdxJsxFlowElement",
+          "url": "https://picsum.photos/id/237/200/300",
+        },
+      ],
+      "position": {
+        "end": {
+          "column": 50,
+          "line": 3,
+          "offset": 70,
+        },
+        "start": {
+          "column": 1,
+          "line": 3,
+          "offset": 21,
+        },
+      },
+      "type": "paragraph",
+    },
+  ],
+  "position": {
+    "end": {
+      "column": 1,
+      "line": 4,
+      "offset": 71,
+    },
+    "start": {
+      "column": 1,
+      "line": 1,
+      "offset": 0,
+    },
+  },
+  "type": "root",
+}
diff --git a/packages/core/test/fixtures/remark-image.output.mdx b/packages/core/test/fixtures/remark-image.output.mdx
diff --git a/packages/core/test/mdx-plugins.test.ts b/packages/core/test/mdx-plugins.test.ts
@@ -55,13 +55,14 @@ test('Remark Admonition', async () => {
 
 test('Remark Image', async () => {
   const content = readFileSync(path.resolve(cwd, './fixtures/remark-image.md'));
-  const result = await remark()
+  const processor = remark()
     .use(remarkImage, { publicDir: path.resolve(cwd, './fixtures') })
-    .use(remarkMdx)
-    .process(content);
+    .use(remarkMdx);
 
-  expect(result.value).toMatchFileSnapshot(
-    path.resolve(cwd, './fixtures/remark-image.output.mdx'),
+  const result = await processor.run(processor.parse(content));
+
+  expect(result).toMatchFileSnapshot(
+    path.resolve(cwd, './fixtures/remark-image.output.json'),
   );
 });
 
diff --git a/packages/create-app/versions.json b/packages/create-app/versions.json
@@ -1 +1 @@
-{"fumadocs-core":"13.3.2","fumadocs-ui":"13.3.2","fumadocs-mdx":"9.0.2","@fumadocs/content-collections":"1.1.2"}
+{"fumadocs-core":"13.4.0","fumadocs-ui":"13.4.0","fumadocs-mdx":"9.0.3","@fumadocs/content-collections":"1.1.3"}
diff --git a/packages/mdx/src/loader-mdx.ts b/packages/mdx/src/loader-mdx.ts
@@ -5,7 +5,7 @@ import grayMatter from 'gray-matter';
 import { type LoaderContext } from 'webpack';
 import { type StructuredData } from 'fumadocs-core/mdx-plugins';
 import { findCollection } from '@/utils/find-collection';
-import { loadConfigCached } from '@/config/cached';
+import { getConfigHash, loadConfigCached } from '@/config/cached';
 import { buildMDX } from '@/utils/build-mdx';
 import { getDefaultMDXOptions, type TransformContext } from '@/config';
 import { getKey } from '@/map/manifest';
@@ -75,7 +75,7 @@ export default async function loader(
   const config = await loadConfigCached(
     _ctx.configPath,
     // if no hash provided, always load a new config
-    hash ?? Date.now().toString(),
+    hash ?? (await getConfigHash(_ctx.configPath)),
   );
   const collection =
     collectionId !== undefined
diff --git a/packages/mdx/src/map/index.ts b/packages/mdx/src/map/index.ts
@@ -60,7 +60,7 @@ export async function start(
   fs.writeFileSync(typeOut, generateTypes(configPath, config, typeOut));
   console.log('[MDX] initialized map file');
 
-  if (config.global?.generateManifest) {
+  if (config.global?.generateManifest && !dev) {
     process.on('exit', () => {
       console.log('[MDX] writing manifest');
       writeManifest(manifestPath, config);
diff --git a/packages/mdx/src/runtime/create.ts b/packages/mdx/src/runtime/create.ts
@@ -30,7 +30,7 @@ export function toRuntime(
   }
 
   return {
-    ...file,
+    ...(file.default as object),
     _file: info,
   };
 }

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'fumadocs-core': patch
 +---
++
 +Remark Image: Support relative imports
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-{"fumadocs-core":"13.3.2","fumadocs-ui":"13.3.2","fumadocs-mdx":"9.0.2","@fumadocs/content-collections":"1.1.2"}`
	`1`	`+{"fumadocs-core":"13.4.0","fumadocs-ui":"13.4.0","fumadocs-mdx":"9.0.3","@fumadocs/content-collections":"1.1.3"}`