add support for globally providing mdx components to turbopack

vercel · May 15, 2023 · cd6c132 · cd6c132
1 parent 138a795
commit cd6c132
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 14 deletions.
diff --git a/packages/next-swc/crates/next-core/src/fallback.rs b/packages/next-swc/crates/next-core/src/fallback.rs
@@ -57,7 +57,13 @@ pub async fn get_fallback_page(
     let entries = get_client_runtime_entries(project_path, env, ty, next_config, execution_context);
 
     let mut import_map = ImportMap::empty();
-    insert_next_shared_aliases(&mut import_map, project_path, execution_context).await?;
+    insert_next_shared_aliases(
+        &mut import_map,
+        project_path,
+        execution_context,
+        next_config,
+    )
+    .await?;
 
     let context: AssetContextVc = ModuleAssetContextVc::new(
         TransitionsByNameVc::cell(HashMap::new()),

diff --git a/packages/next-swc/crates/next-core/src/next_client/context.rs b/packages/next-swc/crates/next-core/src/next_client/context.rs
@@ -50,7 +50,7 @@ use crate::{
     next_config::NextConfigVc,
     next_import_map::{
         get_next_client_fallback_import_map, get_next_client_import_map,
-        get_next_client_resolved_map,
+        get_next_client_resolved_map, mdx_import_source_file,
     },
     next_shared::{
         resolve::UnsupportedModulesResolvePluginVc, transforms::get_relay_transform_plugin,
@@ -177,7 +177,8 @@ pub async fn get_client_module_options_context(
 
     let tsconfig = get_typescript_transform_options(project_path);
     let decorators_options = get_decorators_transform_options(project_path);
-    let mdx_rs_options = *next_config.mdx_rs().await?;
+    let enable_mdx_rs = *next_config.mdx_rs().await?;
+    let mdx_provider_import_source = enable_mdx_rs.then(mdx_import_source_file);
     let jsx_runtime_options = get_jsx_transform_options(project_path);
     let enable_webpack_loaders = {
         let options = &*next_config.webpack_loaders_options().await?;
@@ -246,7 +247,8 @@ pub async fn get_client_module_options_context(
         enable_postcss_transform: postcss_transform_options,
         enable_webpack_loaders,
         enable_typescript_transform: Some(tsconfig),
-        enable_mdx_rs: mdx_rs_options,
+        enable_mdx_rs,
+        mdx_provider_import_source,
         decorators: Some(decorators_options),
         rules: vec![
             (

diff --git a/packages/next-swc/crates/next-core/src/next_import_map.rs b/packages/next-swc/crates/next-core/src/next_import_map.rs
@@ -43,7 +43,13 @@ pub async fn get_next_client_import_map(
 ) -> Result<ImportMapVc> {
     let mut import_map = ImportMap::empty();
 
-    insert_next_shared_aliases(&mut import_map, project_path, execution_context).await?;
+    insert_next_shared_aliases(
+        &mut import_map,
+        project_path,
+        execution_context,
+        next_config,
+    )
+    .await?;
 
     insert_alias_option(
         &mut import_map,
@@ -187,7 +193,13 @@ pub async fn get_next_server_import_map(
 ) -> Result<ImportMapVc> {
     let mut import_map = ImportMap::empty();
 
-    insert_next_shared_aliases(&mut import_map, project_path, execution_context).await?;
+    insert_next_shared_aliases(
+        &mut import_map,
+        project_path,
+        execution_context,
+        next_config,
+    )
+    .await?;
 
     insert_alias_option(
         &mut import_map,
@@ -251,7 +263,13 @@ pub async fn get_next_edge_import_map(
 ) -> Result<ImportMapVc> {
     let mut import_map = ImportMap::empty();
 
-    insert_next_shared_aliases(&mut import_map, project_path, execution_context).await?;
+    insert_next_shared_aliases(
+        &mut import_map,
+        project_path,
+        execution_context,
+        next_config,
+    )
+    .await?;
 
     insert_alias_option(
         &mut import_map,
@@ -398,13 +416,30 @@ pub async fn insert_next_server_special_aliases(
     Ok(())
 }
 
+pub fn mdx_import_source_file() -> String {
+    format!("{VIRTUAL_PACKAGE_NAME}/mdx-import-source")
+}
+
 pub async fn insert_next_shared_aliases(
     import_map: &mut ImportMap,
     project_path: FileSystemPathVc,
     execution_context: ExecutionContextVc,
+    next_config: NextConfigVc,
 ) -> Result<()> {
     let package_root = next_js_fs().root();
 
+    if *next_config.mdx_rs().await? {
+        insert_alias_to_alternatives(
+            import_map,
+            mdx_import_source_file(),
+            vec![
+                request_to_import_mapping(project_path, "./mdx-components"),
+                request_to_import_mapping(project_path, "./src/mdx-components"),
+                external_request_to_import_mapping("@mdx-js/react"),
+            ],
+        );
+    }
+
     // we use the next.js hydration code, so we replace the error overlay with our
     // own
     import_map.insert_exact_alias(

diff --git a/packages/next-swc/crates/next-core/src/next_server/context.rs b/packages/next-swc/crates/next-core/src/next_server/context.rs
@@ -41,7 +41,7 @@ use crate::{
     embed_js::next_js_fs,
     next_build::{get_external_next_compiled_package_mapping, get_postcss_package_mapping},
     next_config::NextConfigVc,
-    next_import_map::get_next_server_import_map,
+    next_import_map::{get_next_server_import_map, mdx_import_source_file},
     next_server::resolve::ExternalPredicate,
     next_shared::{
         resolve::UnsupportedModulesResolvePluginVc, transforms::get_relay_transform_plugin,
@@ -293,7 +293,8 @@ pub async fn get_server_module_options_context(
 
     let tsconfig = get_typescript_transform_options(project_path);
     let decorators_options = get_decorators_transform_options(project_path);
-    let mdx_rs_options = *next_config.mdx_rs().await?;
+    let enable_mdx_rs = *next_config.mdx_rs().await?;
+    let mdx_provider_import_source = enable_mdx_rs.then(mdx_import_source_file);
     let jsx_runtime_options = get_jsx_transform_options(project_path);
     let enable_emotion = *get_emotion_compiler_config(next_config).await?;
     let enable_styled_components = *get_styled_components_compiler_config(next_config).await?;
@@ -332,7 +333,8 @@ pub async fn get_server_module_options_context(
                 enable_postcss_transform,
                 enable_webpack_loaders,
                 enable_typescript_transform: Some(tsconfig),
-                enable_mdx_rs: mdx_rs_options,
+                enable_mdx_rs,
+                mdx_provider_import_source,
                 decorators: Some(decorators_options),
                 rules: vec![
                     (
@@ -390,7 +392,8 @@ pub async fn get_server_module_options_context(
                 enable_postcss_transform,
                 enable_webpack_loaders,
                 enable_typescript_transform: Some(tsconfig),
-                enable_mdx_rs: mdx_rs_options,
+                enable_mdx_rs,
+                mdx_provider_import_source,
                 decorators: Some(decorators_options),
                 rules: vec![
                     (
@@ -448,7 +451,8 @@ pub async fn get_server_module_options_context(
                 enable_postcss_transform,
                 enable_webpack_loaders,
                 enable_typescript_transform: Some(tsconfig),
-                enable_mdx_rs: mdx_rs_options,
+                enable_mdx_rs,
+                mdx_provider_import_source,
                 decorators: Some(decorators_options),
                 rules: vec![
                     (
@@ -478,7 +482,8 @@ pub async fn get_server_module_options_context(
                 enable_postcss_transform,
                 enable_webpack_loaders,
                 enable_typescript_transform: Some(tsconfig),
-                enable_mdx_rs: mdx_rs_options,
+                enable_mdx_rs,
+                mdx_provider_import_source,
                 decorators: Some(decorators_options),
                 rules: vec![
                     (
@@ -512,7 +517,8 @@ pub async fn get_server_module_options_context(
                 enable_postcss_transform,
                 enable_webpack_loaders,
                 enable_typescript_transform: Some(tsconfig),
-                enable_mdx_rs: mdx_rs_options,
+                enable_mdx_rs,
+                mdx_provider_import_source,
                 decorators: Some(decorators_options),
                 rules: vec![
                     (

diff --git a/test/integration/plugin-mdx-rs/components/marker.js b/test/integration/plugin-mdx-rs/components/marker.js
@@ -0,0 +1,3 @@
+export function Marker() {
+  return <span>Marker was rendered!</span>
+}
diff --git a/test/integration/plugin-mdx-rs/mdx-components.js b/test/integration/plugin-mdx-rs/mdx-components.js
@@ -0,0 +1,8 @@
+import { Marker } from './components/marker'
+
+export function useMDXComponents(components) {
+  return {
+    ...components,
+    Marker,
+  }
+}
diff --git a/test/integration/plugin-mdx-rs/pages/provider.mdx b/test/integration/plugin-mdx-rs/pages/provider.mdx
@@ -0,0 +1,3 @@
+# MDX with globally provided component
+
+<Marker />
diff --git a/test/integration/plugin-mdx-rs/test/index.test.js b/test/integration/plugin-mdx-rs/test/index.test.js
@@ -24,5 +24,11 @@ describe('Configuration', () => {
         /Look, a button!/
       )
     })
+
+    it('should render an MDX page with globally provided components (from `mdx-components.js`) correctly', async () => {
+      expect(await renderViaHTTP(context.appPort, '/provider')).toMatch(
+        /Marker was rendered!/
+      )
+    })
   })
 })