fix: mdxComponents not being auto-detected at build time (close ElMas…

…simo#245)
TechAkayy · Apr 7, 2023 · bec22ad · bec22ad
1 parent c0a3482
commit bec22ad
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/packages/iles/src/node/plugin/markdown.ts b/packages/iles/src/node/plugin/markdown.ts
@@ -5,7 +5,7 @@ import type { AppConfig } from '../shared'
 let originalTags: string[]
 
 // Internal: Detects markdown components overriden in the app.
-export function detectMDXComponents (code: string, config: AppConfig, server: ViteDevServer | undefined) {
+export function detectMDXComponents (code: string, config: AppConfig, server?: ViteDevServer | undefined) {
   const mdxComponents = code.match(/\bmdxComponents\b(?:.*?){(.*?)}/s)?.[1]
   if (!mdxComponents) return
 

diff --git a/packages/iles/src/node/plugin/plugin.ts b/packages/iles/src/node/plugin/plugin.ts
@@ -31,6 +31,12 @@ function isVueScript (path: string, query: Record<string, any>) {
   return path.endsWith('.vue') && (!query.type || query.type === 'script')
 }
 
+async function transformUserFile (path: string) {
+  return await exists(path)
+    ? await transformWithEsbuild(await fs.readFile(path, 'utf-8'), path, { sourcemap: false })
+    : { code: 'export default {}' }
+}
+
 const templateLayoutRegex = /<template.*?\slayout=\s*['"](\w+)['"].*?>/
 
 // Public: Configures MDX, Vue, Components, and Islands plugins.
@@ -57,14 +63,18 @@ export default function IslandsPlugins (appConfig: AppConfig): PluginOption[] {
     {
       name: 'iles',
       enforce: 'pre',
-      configResolved (config) {
+      async configResolved (config) {
         if (base) return
         base = config.base
         root = config.root
         isBuild = config.command === 'build'
         appConfig.resolvePath = config.createResolver()
 
         writeComposablesDTS(root)
+
+        // Detect mdxComponents in app.ts to ensure MDX files are compiled accordingly.
+        const result = await transformUserFile(appPath)
+        detectMDXComponents(result.code, appConfig, undefined)
       },
       async resolveId (id) {
         if (id === ILES_APP_ENTRY)
@@ -90,9 +100,7 @@ export default function IslandsPlugins (appConfig: AppConfig): PluginOption[] {
           || (id === USER_SITE_REQUEST_PATH && sitePath)
         if (userFilename) {
           this.addWatchFile(userFilename)
-          const result = await exists(userFilename)
-            ? await transformWithEsbuild(await fs.readFile(userFilename, 'utf-8'), userFilename, { sourcemap: false })
-            : { code: 'export default {}' }
+          const result = await transformUserFile(userFilename)
 
           if (id === USER_APP_REQUEST_PATH)
             detectMDXComponents(result.code, appConfig, server)