dioxus_document/elements/

link.rs

use super::*;
use crate::document;
use dioxus_core::{VNode, use_hook};

#[non_exhaustive]
#[derive(Clone, Props, PartialEq)]
pub struct OtherLinkProps {
    pub rel: String,
    #[props(extends = link, extends = GlobalAttributes)]
    pub additional_attributes: Vec<Attribute>,
}

#[non_exhaustive]
#[derive(Clone, Props, PartialEq)]
pub struct LinkProps {
    pub rel: Option<String>,
    pub media: Option<String>,
    pub title: Option<String>,
    pub disabled: Option<bool>,
    pub r#as: Option<String>,
    pub sizes: Option<String>,
    /// Links are deduplicated by their href and rel attributes
    pub href: Option<String>,
    pub crossorigin: Option<String>,
    pub referrerpolicy: Option<String>,
    pub fetchpriority: Option<String>,
    pub hreflang: Option<String>,
    pub integrity: Option<String>,
    pub r#type: Option<String>,
    pub blocking: Option<String>,
    #[props(extends = link, extends = GlobalAttributes)]
    pub additional_attributes: Vec<Attribute>,
    pub onload: Option<String>,
}

impl LinkProps {
    /// Create link props for a stylesheet.
    pub fn stylesheet(href: impl Into<String>) -> Self {
        Self {
            rel: Some("stylesheet".to_string()),
            media: None,
            title: None,
            disabled: None,
            r#as: None,
            sizes: None,
            href: Some(href.into()),
            crossorigin: None,
            referrerpolicy: None,
            fetchpriority: None,
            hreflang: None,
            integrity: None,
            r#type: None,
            blocking: None,
            additional_attributes: Vec::new(),
            onload: None,
        }
    }

    /// Get all the attributes for the link tag
    pub fn attributes(&self) -> Vec<(&'static str, String)> {
        let mut attributes = Vec::new();
        extend_attributes(&mut attributes, &self.additional_attributes);
        if let Some(rel) = &self.rel {
            attributes.push(("rel", rel.clone()));
        }
        if let Some(media) = &self.media {
            attributes.push(("media", media.clone()));
        }
        if let Some(title) = &self.title {
            attributes.push(("title", title.clone()));
        }
        if let Some(disabled) = &self.disabled {
            attributes.push(("disabled", disabled.to_string()));
        }
        if let Some(r#as) = &self.r#as {
            attributes.push(("as", r#as.clone()));
        }
        if let Some(sizes) = &self.sizes {
            attributes.push(("sizes", sizes.clone()));
        }
        if let Some(href) = &self.href {
            attributes.push(("href", href.clone()));
        }
        if let Some(crossorigin) = &self.crossorigin {
            attributes.push(("crossOrigin", crossorigin.clone()));
        }
        if let Some(referrerpolicy) = &self.referrerpolicy {
            attributes.push(("referrerPolicy", referrerpolicy.clone()));
        }
        if let Some(fetchpriority) = &self.fetchpriority {
            attributes.push(("fetchPriority", fetchpriority.clone()));
        }
        if let Some(hreflang) = &self.hreflang {
            attributes.push(("hrefLang", hreflang.clone()));
        }
        if let Some(integrity) = &self.integrity {
            attributes.push(("integrity", integrity.clone()));
        }
        if let Some(r#type) = &self.r#type {
            attributes.push(("type", r#type.clone()));
        }
        if let Some(blocking) = &self.blocking {
            attributes.push(("blocking", blocking.clone()));
        }
        if let Some(onload) = &self.onload {
            attributes.push(("onload", onload.clone()));
        }
        attributes
    }
}

/// Render a [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/link) tag into the head of the page.
///
/// > The [Link](https://docs.rs/dioxus-router/latest/dioxus_router/components/fn.Link.html) component in dioxus router and this component are completely different.
/// > This component links resources in the head of the page, while the router component creates clickable links in the body of the page.
///
/// # Example
/// ```rust, no_run
/// # use dioxus::prelude::*;
/// fn RedBackground() -> Element {
///     rsx! {
///         // You can use the meta component to render a meta tag into the head of the page
///         // This meta tag will redirect the user to the dioxuslabs homepage in 10 seconds
///         document::Link {
///             href: asset!("/assets/style.css"),
///             rel: "stylesheet",
///         }
///     }
/// }
/// ```
///
/// <div class="warning">
///
/// Any updates to the props after the first render will not be reflected in the head.
///
/// </div>
#[doc(alias = "<link>")]
#[component]
pub fn Link(props: LinkProps) -> Element {
    use_update_warning(&props, "Link {}");

    use_hook(|| {
        let document = document();
        let mut insert_link = document.create_head_component();
        if let Some(href) = &props.href
            && !should_insert_link(href, props.rel.as_deref())
        {
            insert_link = false;
        }

        if !insert_link {
            return;
        }

        document.create_link(props);
    });

    VNode::empty()
}

/// Insert a stylesheet `<link>` element into the head of the current document.
///
/// The stylesheet is deduplicated within each document: calling this multiple times with the
/// same href (or rendering a [`Link`] component with the same href and `rel="stylesheet"`)
/// only inserts the link once per document.
pub fn insert_stylesheet(href: &str) {
    // Deduplicate before creating the head component so that repeated calls with the same
    // href (e.g. on every render) don't create or consume extra hydration entries.
    if !should_insert_link(href, Some("stylesheet")) {
        return;
    }

    let document = document();
    if !document.create_head_component() {
        return;
    }

    document.create_link(LinkProps::stylesheet(href.to_string()));
}

#[derive(Default, Clone)]
struct LinkContext(DeduplicationContext);

fn should_insert_link(href: &str, rel: Option<&str>) -> bool {
    // Include rel in the deduplication key so that the same href can be used
    // with different rel values (e.g., rel="preload" and rel="stylesheet")
    let key = match rel {
        Some(rel) => format!("{href}|{rel}"),
        None => href.to_string(),
    };
    get_or_insert_root_context::<LinkContext>()
        .0
        .should_insert(&key)
}