Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Do not set empty classes and support option wrapped class names #1085

Merged
merged 16 commits into from Apr 29, 2020
Merged

Do not set empty classes and support option wrapped class names #1085

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
8f85c19
Prevent setting empty class string in DOM
Apr 16, 2020
41bfbc3
Use the className property for setting classes in DOM
Apr 16, 2020
4bba674
Update documentation of VTag::diff_classes
Apr 16, 2020
c5e555d
Add test cases for checking if the class_name is not set for empty cl…
Apr 17, 2020
3524ab1
Add class to SVG g element in the supports_svg test
Apr 17, 2020
da92aab
Revert "Use the className property for setting classes in DOM"
Apr 17, 2020
9bf93fb
Use patches for the class attribute and remove classes with remove_at…
Apr 19, 2020
5da4389
Merge branch 'master' of https://github.com/yewstack/yew into set-cla…
Apr 25, 2020
cb6b3bb
Set classes directly as class attribute
Apr 26, 2020
ef5617f
Fix markdown example
Apr 26, 2020
c96ce88
Remove set_classes and classes from VTag
Apr 27, 2020
bfbaae7
Remove mut from variable that does not need to be
Apr 28, 2020
34e83a5
Use helper methods for classes in tests
Apr 28, 2020
03fd474
Add test case for Option<&'static str> variable
Apr 28, 2020
391c122
Remove unnecessary map in test
Apr 28, 2020
03531d5
Merge remote-tracking branch 'yewstack/master' into set-class-name
Apr 28, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
38 changes: 25 additions & 13 deletions examples/crm/src/markdown.rs
View file
Open in desktop
@@ -1,9 +1,21 @@
/// Original author of this code is [Nathan Ringo](https://github.com/remexre)
/// Source: https://github.com/acmumn/mentoring/blob/master/web-client/src/view/markdown.rs
use pulldown_cmark::{Alignment, CodeBlockKind, Event, Options, Parser, Tag};
use yew::virtual_dom::{VNode, VTag, VText};
use yew::virtual_dom::{Classes, VNode, VTag, VText};
use yew::{html, Html};

/// Adds a class to the VTag.
/// You can also provide multiple classes separated by ascii whitespaces.
///
/// Note that this has a complexity of O(n),
/// where n is the number of classes already in VTag plus
/// the number of classes to be added.
fn add_class(vtag: &mut VTag, class: &str) {
let mut classes: Classes = vtag.classes().into();
classes.push(class);
vtag.set_classes(classes);
}

/// Renders a string of Markdown to HTML with the default options (footnotes
/// disabled, tables enabled).
pub fn render_markdown(src: &str) -> Html {
Expand Down Expand Up @@ -42,9 +54,9 @@ pub fn render_markdown(src: &str) -> Html {
if let VNode::VTag(ref mut vtag) = c {
match aligns[i] {
Alignment::None => {}
Alignment::Left => vtag.add_class("text-left"),
Alignment::Center => vtag.add_class("text-center"),
Alignment::Right => vtag.add_class("text-right"),
Alignment::Left => add_class(vtag, "text-left"),
Alignment::Center => add_class(vtag, "text-center"),
Alignment::Right => add_class(vtag, "text-right"),
}
}
}
Expand Down Expand Up @@ -92,7 +104,7 @@ fn make_tag(t: Tag) -> VTag {
}
Tag::BlockQuote => {
let mut el = VTag::new("blockquote");
el.add_class("blockquote");
el.set_classes("blockquote");
el
}
Tag::CodeBlock(code_block_kind) => {
Expand All @@ -104,10 +116,10 @@ fn make_tag(t: Tag) -> VTag {
// highlighting support by locating the language classes and applying dom transforms
// on their contents.
match lang.as_ref() {
"html" => el.add_class("html-language"),
"rust" => el.add_class("rust-language"),
"java" => el.add_class("java-language"),
"c" => el.add_class("c-language"),
"html" => el.set_classes("html-language"),
"rust" => el.set_classes("rust-language"),
"java" => el.set_classes("java-language"),
"c" => el.set_classes("c-language"),
_ => {} // Add your own language highlighting support
};
}
Expand All @@ -124,20 +136,20 @@ fn make_tag(t: Tag) -> VTag {
Tag::Item => VTag::new("li"),
Tag::Table(_) => {
let mut el = VTag::new("table");
el.add_class("table");
el.set_classes("table");
el
}
Tag::TableHead => VTag::new("th"),
Tag::TableRow => VTag::new("tr"),
Tag::TableCell => VTag::new("td"),
Tag::Emphasis => {
let mut el = VTag::new("span");
el.add_class("font-italic");
el.set_classes("font-italic");
el
}
Tag::Strong => {
let mut el = VTag::new("span");
el.add_class("font-weight-bold");
el.set_classes("font-weight-bold");
el
}
Tag::Link(_link_type, ref href, ref title) => {
Expand All @@ -161,7 +173,7 @@ fn make_tag(t: Tag) -> VTag {
Tag::FootnoteDefinition(ref _footnote_id) => VTag::new("span"), // Footnotes are not rendered as anything special
Tag::Strikethrough => {
let mut el = VTag::new("span");
el.add_class("text-decoration-strikethrough");
el.set_classes("text-decoration-strikethrough");
el
}
}
Expand Down
2 changes: 1 addition & 1 deletion yew-macro/src/html_tree/html_tag/mod.rs
View file
Open in desktop
Expand Up @@ -132,7 +132,7 @@ impl ToTokens for HtmlTag {
});
let set_classes = classes.iter().map(|classes_form| match classes_form {
ClassesForm::Tuple(classes) => quote! {
#vtag.add_classes(vec![#(&(#classes)),*]);
#vtag.set_classes(<::yew::virtual_dom::Classes as ::std::convert::From::<Vec<&str>>>::from(vec![#(&(#classes)),*]));
jstarry marked this conversation as resolved.
Show resolved Hide resolved
},
ClassesForm::Single(classes) => quote! {
#vtag.set_classes(#classes);
Expand Down
36 changes: 24 additions & 12 deletions yew-router/examples/guide/src/markdown.rs
View file
Open in desktop
Expand Up @@ -3,10 +3,22 @@
use pulldown_cmark::{Alignment, Event, Options, Parser, Tag};
use yew::{
html,
virtual_dom::{VNode, VTag, VText},
virtual_dom::{Classes, VNode, VTag, VText},
Html,
};

/// Adds a class to the VTag.
/// You can also provide multiple classes separated by ascii whitespaces.
///
/// Note that this has a complexity of O(n),
/// where n is the number of classes already in VTag plus
/// the number of classes to be added.
fn add_class(vtag: &mut VTag, class: &str) {
let mut classes: Classes = vtag.classes().into();
classes.push(class);
vtag.set_classes(classes);
}

/// Renders a string of Markdown to HTML with the default options (footnotes
/// disabled, tables enabled).
pub fn render_markdown(src: &str) -> Html {
Expand Down Expand Up @@ -44,9 +56,9 @@ pub fn render_markdown(src: &str) -> Html {
if let VNode::VTag(ref mut vtag) = *c {
match aligns[i] {
Alignment::None => {}
Alignment::Left => vtag.add_class("text-left"),
Alignment::Center => vtag.add_class("text-center"),
Alignment::Right => vtag.add_class("text-right"),
Alignment::Left => add_class(vtag, "text-left"),
Alignment::Center => add_class(vtag, "text-center"),
Alignment::Right => add_class(vtag, "text-right"),
}
}
}
Expand Down Expand Up @@ -93,7 +105,7 @@ fn make_tag(t: Tag) -> VTag {
Tag::Paragraph => VTag::new("p"),
Tag::BlockQuote => {
let mut el = VTag::new("blockquote");
el.add_class("blockquote");
el.set_classes("blockquote");
el
}
Tag::CodeBlock(lang) => {
Expand All @@ -103,10 +115,10 @@ fn make_tag(t: Tag) -> VTag {
// actually provide the highlighting support by locating the language
// classes and applying dom transforms on their contents.
match lang.as_ref() {
"html" => el.add_class("html-language"),
"rust" => el.add_class("rust-language"),
"java" => el.add_class("java-language"),
"c" => el.add_class("c-language"),
"html" => el.set_classes("html-language"),
"rust" => el.set_classes("rust-language"),
"java" => el.set_classes("java-language"),
"c" => el.set_classes("c-language"),
_ => {} // Add your own language highlighting support
};
el
Expand All @@ -121,20 +133,20 @@ fn make_tag(t: Tag) -> VTag {
Tag::Item => VTag::new("li"),
Tag::Table(_) => {
let mut el = VTag::new("table");
el.add_class("table");
el.set_classes("table");
el
}
Tag::TableHead => VTag::new("tr"),
Tag::TableRow => VTag::new("tr"),
Tag::TableCell => VTag::new("td"),
Tag::Emphasis => {
let mut el = VTag::new("span");
el.add_class("font-italic");
el.set_classes("font-italic");
el
}
Tag::Strong => {
let mut el = VTag::new("span");
el.add_class("font-weight-bold");
el.set_classes("font-weight-bold");
el
}
Tag::Link(_lt, ref href, ref title) => {
Expand Down
1 change: 1 addition & 0 deletions yew/src/virtual_dom/mod.rs
View file
Open in desktop
Expand Up @@ -162,6 +162,7 @@ impl PartialEq for Classes {
}

/// Patch for DOM node modification.
#[derive(Debug, PartialEq)]
enum Patch<ID, T> {
Add(ID, T),
Replace(ID, T),
Expand Down