fix: make @include effective early to parse included markdown text (

#394)

demo/yun/pages/posts/include.md

@@ -0,0 +1,6 @@
+---
+title: "@include 测试"
+categories: Test
+---
+
+<!-- @include: ./markdown.md{9,} -->

packages/valaxy/node/plugins/markdown/markdownToVue.ts

@@ -5,7 +5,7 @@ import type { PageData } from 'valaxy/types'
 import path from 'pathe'
 import type { ResolvedConfig } from 'vite'
 import type { ResolvedValaxyOptions } from '../../options'
-import { createTransformIncludes } from './transform/include'
+import { resolveTransformIncludes } from './transform/include'
 import { createScanDeadLinks } from './transform/dead-links'
 import { createTransformMarkdown } from './transform/markdown'
 import { generatePageData } from './transform/page-data'
@@ -68,7 +68,6 @@ export async function createMarkdownToVueRenderFn(
   // for dead link detection
   options.pages = options.pages.map(p => p.replace(/\.md$/, '').replace(/\/index$/, ''))
 
-  const transformIncludes = createTransformIncludes(options)
   const transformCodeBlock = createTransformCodeBlock(options)
   const transformMarkdown = createTransformMarkdown(options)
 
@@ -107,7 +106,7 @@ export async function createMarkdownToVueRenderFn(
     const pageData = await generatePageData(code, id, options)
 
     code = transformHexoTags(code, id)
-    const data = transformIncludes(code, id)
+    const data = resolveTransformIncludes(code, id)
     const includes = data.includes
     code = data.code
     code = transformCodeBlock(code)

packages/valaxy/node/plugins/markdown/transform/include.ts

@@ -1,35 +1,29 @@
 import path from 'pathe'
-import fs from 'fs-extra'
+import { slash } from '@antfu/utils'
 import type { ResolvedValaxyOptions } from '../../../options'
 import { processIncludes } from '../utils'
 
-const includesRE = /<!--\s*@include:\s*(.*?)\s*-->/g
+const includedRE = /<!--\s*@included:\s*(.*?)\s*-->/g
 
 export function createTransformIncludes(options: ResolvedValaxyOptions) {
   const srcDir = options.userRoot
 
   return (code: string, id: string) => {
     const fileOrig = id
-    // resolve includes
-    const includes: string[] = []
-    const dir = path.dirname(id)
-
-    code = processIncludes(srcDir, code, fileOrig, includes)
-    code = code.replace(includesRE, (m, m1) => {
-      try {
-        const includePath = path.join(dir, m1)
-        const content = fs.readFileSync(includePath, 'utf-8')
-        includes.push(includePath)
-        return content
-      }
-      catch (error) {
-        return m // silently ignore error if file is not present
-      }
-    })
+    return processIncludes(srcDir, code, fileOrig)
+  }
+}
 
-    return {
-      code,
-      includes,
-    }
+export function resolveTransformIncludes(code: string, id: string) {
+  const includes: string[] = []
+  const dir = path.dirname(id)
+  code = code.replace(includedRE, (m, m1) => {
+    const includePath = path.join(dir, m1)
+    includes.push(slash(includePath))
+    return ''
+  })
+  return {
+    code,
+    includes,
   }
 }

packages/valaxy/node/plugins/markdown/transform/index.ts

@@ -5,6 +5,7 @@ import type MarkdownIt from 'markdown-it'
 import type { ResolvedValaxyOptions } from '../../../options'
 import { highlight } from '../plugins/highlight'
 import { defaultCodeTheme, setupMarkdownPlugins } from '../setup'
+import { createTransformIncludes } from './include'
 import { transformMermaid } from './mermaid'
 
 export async function createMarkdownPlugin(
@@ -13,6 +14,8 @@ export async function createMarkdownPlugin(
   const mdOptions = options?.config.markdown || {}
   const theme = mdOptions.theme ?? defaultCodeTheme
 
+  const transformIncludes = createTransformIncludes(options)
+
   return Markdown({
     include: [/\.md$/],
     wrapperClasses: '',
@@ -51,9 +54,10 @@ export async function createMarkdownPlugin(
     },
 
     transforms: {
-      before(code, _id) {
+      before(code, id) {
         // features
         code = transformMermaid(code)
+        code = transformIncludes(code, id)
         // TODO: PlantUML
         // code = transformPlantUml(code, config.plantUmlServer)
 

packages/valaxy/node/plugins/markdown/utils/processInclude.ts

@@ -5,13 +5,11 @@
 
 import path from 'node:path'
 import fs from 'fs-extra'
-import { slash } from '@antfu/utils'
 
 export function processIncludes(
   srcDir: string,
   src: string,
   file: string,
-  includes: string[],
 ): string {
   const includesRE = /<!--\s*@include:\s*(.*?)\s*-->/g
   const rangeRE = /\{(\d*),(\d*)\}$/
@@ -37,9 +35,9 @@ export function processIncludes(
           )
           .join('\n')
       }
-      includes.push(slash(includePath))
+      content = `<!-- @included: ${m1} -->\n${content}`
       // recursively process includes in the content
-      return processIncludes(srcDir, content, includePath, includes)
+      return processIncludes(srcDir, content, includePath)
     }
     catch (error) {
       return m // silently ignore error if file is not present