mirror of
https://github.com/leptos-rs/leptos
synced 2024-11-10 06:44:17 +00:00
Use a runtime warning about SVG <a/> instead of a macro warning on all ambiguous tags
This commit is contained in:
parent
f6622448e9
commit
c050456a47
5 changed files with 48 additions and 25 deletions
|
@ -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! {
|
||||
|
|
|
@ -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! {
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue