Use a runtime warning about SVG <a/> instead of a macro warning on all ambiguous tags

This commit is contained in:
Greg Johnston 2023-01-09 20:31:51 -05:00
parent f6622448e9
commit c050456a47
5 changed files with 48 additions and 25 deletions

View file

@ -48,12 +48,12 @@ pub fn Stories(cx: Scope) -> impl IntoView {
{move || if page() > 1 {
view! {
cx,
<html::a class="page-link"
<a class="page-link"
href=move || format!("/{}?page={}", story_type(), page() - 1)
attr:aria_label="Previous Page"
>
"< prev"
</html::a>
</a>
}.into_any()
} else {
view! {

View file

@ -48,12 +48,12 @@ pub fn Stories(cx: Scope) -> impl IntoView {
{move || if page() > 1 {
view! {
cx,
<html::a class="page-link"
<a class="page-link"
href=move || format!("/{}?page={}", story_type(), page() - 1)
attr:aria_label="Previous Page"
>
"< prev"
</html::a>
</a>
}.into_any()
} else {
view! {

View file

@ -43,7 +43,7 @@ fn view_fn(cx: Scope) -> impl IntoView {
let (is_a, set_is_a) = create_signal(cx, true);
let handle_toggle = move |_| {
trace!("toggling");
trace!("toggling");
if is_a() {
set_b(a());
@ -55,11 +55,14 @@ fn view_fn(cx: Scope) -> impl IntoView {
}
};
let a_tag = view! { cx, <svg::a/> };
view! { cx,
<>
<div>
<button on:click=handle_toggle>"Toggle"</button>
</div>
<svg>{a_tag}</svg>
<Example/>
<A child=Signal::from(a) />
<A child=Signal::from(b) />
@ -74,23 +77,23 @@ fn A(cx: Scope, child: Signal<View>) -> impl IntoView {
#[component]
fn Example(cx: Scope) -> impl IntoView {
trace!("rendering <Example/>");
let (value, set_value) = create_signal(cx, 10);
trace!("rendering <Example/>");
let memo = create_memo(cx, move |_| value() * 2);
let derived = Signal::derive(cx, move || {
value() * 3
});
let (value, set_value) = create_signal(cx, 10);
create_effect(cx, move |_| {
trace!("logging value of derived..., {}", derived.get());
});
let memo = create_memo(cx, move |_| value() * 2);
let derived = Signal::derive(cx, move || value() * 3);
create_effect(cx, move |_| {
trace!("logging value of derived..., {}", derived.get());
});
set_timeout(move || { set_value.update(|v| *v += 1)}, std::time::Duration::from_millis(50));
set_timeout(
move || set_value.update(|v| *v += 1),
std::time::Duration::from_millis(50),
);
view! { cx,
view! { cx,
<h1>"Example"</h1>
<button on:click=move |_| set_value.update(|value| *value += 1)>
"Click me"

View file

@ -632,6 +632,10 @@ impl<El: ElementDescriptor + 'static> HtmlElement<El> {
#[cfg(all(target_arch = "wasm32", feature = "web"))]
{
if !HydrationCtx::is_hydrating() {
// add a debug-only, run-time warning for the SVG <a> element
#[cfg(debug_assertions)]
warn_on_ambiguous_a(self.element.as_ref(), &child);
mount_child(MountKind::Append(self.element.as_ref()), &child);
}
@ -915,6 +919,23 @@ macro_rules! generate_html_tags {
}
}
#[cfg(all(debug_assertions, target_arch = "wasm32", feature = "web"))]
fn warn_on_ambiguous_a(parent: &web_sys::Element, child: &View) {
if let View::Element(el) = &child {
if el.name == "a" {
if parent.namespace_uri() != el.element.namespace_uri() {
crate::warn!(
"Warning: you are appending an SVG <a/> to an HTML element, or an \
HTML <a/> to an SVG. Typically, this occurs when you create an \
<a/> with the `view` macro and append it to an SVG, but the \
framework assumed it was HTML when you created it. To specify that \
it is an SVG <a/>, use <svg::a/> in the view macro."
)
}
}
}
}
generate_html_tags![
// ==========================
// Main root

View file

@ -409,14 +409,12 @@ fn set_class_attribute_ssr(
.filter_map(|a| {
if let Node::Attribute(a) = a {
if a.key.to_string() == "class" {
if a.value.as_ref().and_then(value_to_string).is_some() {
if a.value.as_ref().and_then(value_to_string).is_some()
|| fancy_class_name(&a.key.to_string(), cx, a).is_some()
{
None
} else {
if fancy_class_name(&a.key.to_string(), cx, a).is_some() {
None
} else {
Some((a.key.span(), &a.value))
}
Some((a.key.span(), &a.value))
}
} else {
None
@ -569,8 +567,9 @@ fn element_to_tokens(cx: &Ident, node: &NodeElement, mut parent_type: TagType) -
let name = &node.name;
match parent_type {
TagType::Unknown => {
proc_macro_error::emit_warning!(name.span(), "The view macro is assuming this is an HTML element, \
but it is ambiguous; if it is an SVG or MathML element, prefix with svg:: or math::");
// We decided this warning was too aggressive, but I'll leave it here in case we want it later
/* proc_macro_error::emit_warning!(name.span(), "The view macro is assuming this is an HTML element, \
but it is ambiguous; if it is an SVG or MathML element, prefix with svg:: or math::"); */
quote! {
leptos::leptos_dom::#name(#cx)
}