hoist dynamic imports

remix-run · Apr 19, 2023 · 9e26775 · 9e26775
1 parent 5c58c18
commit 9e26775
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 15 deletions.
diff --git a/packages/remix-dev/compiler/assets/plugins/routes_unstable.ts b/packages/remix-dev/compiler/assets/plugins/routes_unstable.ts
@@ -78,6 +78,11 @@ export function browserRouteModulesPlugin(
   return {
     name: "browser-route-modules",
     async setup(build) {
+      let [xdm, { default: remarkFrontmatter }] = await Promise.all([
+        import("xdm"),
+        import("remark-frontmatter") as any,
+      ]);
+
       build.onResolve({ filter: /.*/ }, (args) => {
         // We have to map all imports from route modules back to the virtual
         // module in the graph otherwise we will be duplicating portions of
@@ -101,7 +106,13 @@ export function browserRouteModulesPlugin(
           let routeFile = path.resolve(config.appDirectory, file);
 
           if (/\.mdx?$/.test(file)) {
-            let mdxResult = await processMDX(config, args.path, routeFile);
+            let mdxResult = await processMDX(
+              xdm,
+              remarkFrontmatter,
+              config,
+              args.path,
+              routeFile
+            );
             if (!mdxResult.contents || mdxResult.errors?.length) {
               return mdxResult;
             }

diff --git a/packages/remix-dev/compiler/plugins/mdx.ts b/packages/remix-dev/compiler/plugins/mdx.ts
@@ -11,6 +11,11 @@ export function mdxPlugin({ config }: Pick<Context, "config">): esbuild.Plugin {
   return {
     name: "remix-mdx",
     async setup(build) {
+      let [xdm, { default: remarkFrontmatter }] = await Promise.all([
+        import("xdm"),
+        import("remark-frontmatter") as any,
+      ]);
+
       build.onResolve({ filter: /\.mdx?$/ }, (args) => {
         let matchPath = createMatchPath(config.tsconfigPath);
         // Resolve paths according to tsconfig paths property
@@ -41,24 +46,33 @@ export function mdxPlugin({ config }: Pick<Context, "config">): esbuild.Plugin {
 
       build.onLoad({ filter: /\.mdx?$/ }, async (args) => {
         let absolutePath = path.join(config.appDirectory, args.path);
-
-        return processMDX(config, args.path, absolutePath);
+
+        return processMDX(
+          xdm,
+          remarkFrontmatter,
+          config,
+          args.path,
+          absolutePath
+        );
       });
     },
   };
 }
 
-export async function processMDX(config: Pick<Context, "config">["config"], argsPath: string, absolutePath: string) {
+export async function processMDX(
+  // eslint-disable-next-line @typescript-eslint/consistent-type-imports
+  xdm: typeof import("xdm"),
+  // eslint-disable-next-line @typescript-eslint/consistent-type-imports
+  remarkFrontmatter: typeof import("remark-frontmatter")["default"],
+  config: Pick<Context, "config">["config"],
+  argsPath: string,
+  absolutePath: string
+) {
   try {
-    let [xdm, { default: remarkFrontmatter }] = await Promise.all([
-      import("xdm"),
-      import("remark-frontmatter") as any,
-    ]);
-
     let fileContents = await fsp.readFile(absolutePath, "utf-8");
 
     let rehypePlugins = [];
-    let remarkPlugins = [
+    let remarkPlugins: any[] = [
       remarkFrontmatter,
       [remarkMdxFrontmatter, { name: "attributes" }],
     ];
@@ -108,14 +122,11 @@ ${remixExports}`;
                     ? message.column
                     : undefined,
                 line:
-                  typeof message.line === "number"
-                    ? message.line
-                    : undefined,
+                  typeof message.line === "number" ? message.line : undefined,
               }
             : undefined,
         text: message.message,
-        detail:
-          typeof message.note === "string" ? message.note : undefined,
+        detail: typeof message.note === "string" ? message.note : undefined,
       });
     });