archive/rsnext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(loader_tree): propagate metadata to corresponding layout (#56956)

Browse source 
### What?

- fixes test 17553c5e25/test/e2e/app-dir/metadata/metadata.test.ts (L487)

The way next.js collects static metadata is read static metadata, and then read layout metadata to merge multiple metadatas into a single layout path (17553c5e25/packages/next/src/lib/metadata/resolve-metadata.ts (L347-L352))

When turbopack creates LoaderTree for the corresponding directory tree, it extracts `page` but skips metadata  in result there are orphan components that have a metadata doesn't have layout metadata, as well as a component have a layout doesn't have metadata. Latter is being rendered as a page (since it have correct layout), which eventually falls back to the default metadata instead.

PR trickles down the metadata when extracting page (creating a new component with `page`) to consolidates those.

Also PR expands Metadata to have base_page property to capture where it has been originally exists, as we clone down metadata then do `fillMetadataSegment` against the current page where LoaderTree is being created it creates a wrong relative path. For example, currently

```
/icon.svg
 - opengragph/
      - static -> path being `/opengraph/.../icon.svg` instead of `/icon.svg`
```

When recursively traverse directory tree, capture each components with corresponding base_page to calculate instead.

Unfortunately this doesn't make pass all of the metadata tests; there are lot to dig more. Would like to scope PR in a reasonable size.


Closes WEB-1795
This commit is contained in:
OJ Kwon 2023-10-21 14:24:40 -07:00 committed by GitHub
parent 8502d0aab0
commit 3c3744631e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 97 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
packages/next-swc/crates/next-core/src/app_structure.rs
View file

@ -168,6 +168,15 @@ pub struct Metadata {
pub open_graph: Vec<MetadataWithAltItem>,
#[serde(skip_serializing_if = "Option::is_none")]
pub sitemap: Option<MetadataItem>,
// The page indicates where the metadata is defined and captured.
// The steps for capturing metadata (get_directory_tree) and constructing
// LoaderTree (directory_tree_to_entrypoints) is separated,
// and child loader tree can trickle down metadata when clone / merge components calculates
// the actual path incorrectly with fillMetadataSegment.
//
// This is only being used for the static metadata files.
#[serde(skip_serializing_if = "Option::is_none")]
pub base_page: Option<AppPage>,
}
impl Metadata {
@ -178,12 +187,14 @@ impl Metadata {
twitter,
open_graph,
sitemap,
base_page,
} = self;
icon.is_empty()
&& apple.is_empty()
&& twitter.is_empty()
&& open_graph.is_empty()
&& sitemap.is_none()
&& base_page.is_none()
}
fn merge(a: &Self, b: &Self) -> Self {
@ -198,6 +209,7 @@ impl Metadata {
.copied()
.collect(),
sitemap: a.sitemap.or(b.sitemap),
base_page: a.base_page.as_ref().or(b.base_page.as_ref()).cloned(),
}
}
}
@ -709,9 +721,42 @@ async fn directory_tree_to_entrypoints_internal(
let subdirectories = &directory_tree.subdirectories;
let components = directory_tree.components.await?;
// Capture the current page for the metadata to calculate segment relative to
// the corresponding page for the static metadata files.
/*
let metadata = Metadata {
base_page: Some(app_page.clone()),
..components.metadata.clone()
}; */
let components = if components.metadata.base_page.is_some() {
components
} else {
(Components {
metadata: Metadata {
base_page: Some(app_page.clone()),
..components.metadata.clone()
},
..*components
})
.cell()
.await?
};
let current_level_is_parallel_route = is_parallel_route(&directory_name);
if let Some(page) = components.page {
// When resolving metadata with corresponding module
// (https://github.com/vercel/next.js/blob/aa1ee5995cdd92cc9a2236ce4b6aa2b67c9d32b2/packages/next/src/lib/metadata/resolve-metadata.ts#L340)
// layout takes precedence over page (https://github.com/vercel/next.js/blob/aa1ee5995cdd92cc9a2236ce4b6aa2b67c9d32b2/packages/next/src/server/lib/app-dir-module.ts#L22)
// If the component have layout and page both, do not attach same metadata to
// the page.
let metadata = if components.layout.is_some() {
Default::default()
} else {
components.metadata.clone()
};
add_app_page(
app_dir,
&mut result,
@ -723,6 +768,7 @@ async fn directory_tree_to_entrypoints_internal(
parallel_routes: IndexMap::new(),
components: Components {
page: Some(page),
metadata,
..Default::default()
}
.cell(),
@ -740,6 +786,7 @@ async fn directory_tree_to_entrypoints_internal(
parallel_routes: IndexMap::new(),
components: Components {
page: Some(page),
metadata,
..Default::default()
}
.cell(),
@ -816,6 +863,7 @@ async fn directory_tree_to_entrypoints_internal(
twitter,
open_graph,
sitemap,
base_page: _,
} = &components.metadata;
for meta in sitemap

53
packages/next-swc/crates/next-core/src/loader_tree.rs
View file

@ -159,7 +159,7 @@ impl LoaderTreeBuilder {
&mut self,
app_page: &AppPage,
metadata: &Metadata,
global_metadata: &GlobalMetadata,
global_metadata: Option<&GlobalMetadata>,
) -> Result<()> {
if metadata.is_empty() {
return Ok(());
@ -170,14 +170,28 @@ impl LoaderTreeBuilder {
twitter,
open_graph,
sitemap: _,
base_page,
} = metadata;
let GlobalMetadata {
favicon: _,
manifest,
robots: _,
} = global_metadata;
let app_page = base_page.as_ref().unwrap_or(app_page);
self.loader_tree_code += " metadata: {";
// naively convert metadataitem -> metadatawithaltitem to iterate along with
// other icon items
let icon = if let Some(favicon) = global_metadata.and_then(|m| m.favicon) {
let item = match favicon {
MetadataItem::Static { path } => MetadataWithAltItem::Static {
path,
alt_path: None,
},
MetadataItem::Dynamic { path } => MetadataWithAltItem::Dynamic { path },
};
let mut item = vec![item];
item.extend(icon.iter());
item
} else {
icon.clone()
};
self.write_metadata_items(app_page, "icon", icon.iter())
.await?;
self.write_metadata_items(app_page, "apple", apple.iter())
@ -186,7 +200,11 @@ impl LoaderTreeBuilder {
.await?;
self.write_metadata_items(app_page, "openGraph", open_graph.iter())
.await?;
self.write_metadata_manifest(*manifest).await?;
if let Some(global_metadata) = global_metadata {
self.write_metadata_manifest(global_metadata.manifest)
.await?;
}
self.loader_tree_code += " },";
Ok(())
}
@ -347,7 +365,7 @@ impl LoaderTreeBuilder {
}
#[async_recursion]
async fn walk_tree(&mut self, loader_tree: Vc<LoaderTree>) -> Result<()> {
async fn walk_tree(&mut self, loader_tree: Vc<LoaderTree>, root: bool) -> Result<()> {
use std::fmt::Write;
let LoaderTree {
@ -366,7 +384,7 @@ impl LoaderTreeBuilder {
// add parallel_routes
for (key, &parallel_route) in parallel_routes.iter() {
write!(self.loader_tree_code, "{key}: ", key = StringifyJs(key))?;
self.walk_tree(parallel_route).await?;
self.walk_tree(parallel_route, false).await?;
writeln!(self.loader_tree_code, ",")?;
}
writeln!(self.loader_tree_code, "}}, {{")?;
@ -393,14 +411,23 @@ impl LoaderTreeBuilder {
.await?;
self.write_component(ComponentType::NotFound, *not_found)
.await?;
self.write_metadata(app_page, metadata, &*global_metadata.await?)
.await?;
// Ensure global metadata being written only once at the root level
// Otherwise child pages will have redundant metadata
let global_metadata = &*global_metadata.await?;
self.write_metadata(
app_page,
metadata,
if root { Some(global_metadata) } else { None },
)
.await?;
write!(self.loader_tree_code, "}}]")?;
Ok(())
}
async fn build(mut self, loader_tree: Vc<LoaderTree>) -> Result<LoaderTreeModule> {
self.walk_tree(loader_tree).await?;
self.walk_tree(loader_tree, true).await?;
Ok(LoaderTreeModule {
imports: self.imports,
loader_tree_code: self.loader_tree_code,

16
test/e2e/app-dir/metadata/metadata.test.ts
View file

@ -523,7 +523,7 @@ createNextDescribe(
})
// favicon shouldn't be overridden
expect($('link[rel="icon"]').attr('href')).toBe('/favicon.ico')
expect($('link[rel="icon"]').attr('href')).toMatch('/favicon.ico')
})
it('should override file based images when opengraph-image and twitter-image specify images property', async () => {
@ -671,18 +671,20 @@ createNextDescribe(
it('should support root level of favicon.ico', async () => {
let $ = await next.render$('/')
const favIcon = $('link[rel="icon"]')
expect(favIcon.attr('href')).toBe('/favicon.ico')
expect(favIcon.attr('href')).toMatch('/favicon.ico')
expect(favIcon.attr('type')).toBe('image/x-icon')
expect(favIcon.attr('sizes')).toBe('16x16')
// Turbopack renders / emits image differently
expect(['16x16', '48x48']).toContain(favIcon.attr('sizes'))
const iconSvg = $('link[rel="icon"][type="image/svg+xml"]')
expect(iconSvg.attr('href')).toBe('/icon.svg?90699bff34adba1f')
expect(iconSvg.attr('sizes')).toBe('any')
expect(iconSvg.attr('href')).toMatch('/icon.svg?')
// Turbopack renders / emits image differently
expect(['any', '48x48']).toContain(iconSvg.attr('sizes'))
$ = await next.render$('/basic')
const icon = $('link[rel="icon"]')
expect(icon.attr('href')).toBe('/favicon.ico')
expect(icon.attr('sizes')).toBe('16x16')
expect(icon.attr('href')).toMatch('/favicon.ico')
expect(['16x16', '48x48']).toContain(favIcon.attr('sizes'))
if (!isNextDeploy) {
const faviconFileBuffer = await fs.readFile(