swaits/dioxus
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: namespaced attributes

Browse Source 
this commit adds namespaced attributes. This lets us support attribute groups, and thus, inline styles.

This namespaced attribute stuff is only available for styles at the moment, though it theoretically could be enabled for any other attributes.
This commit is contained in:
Jonathan Kelley committed 2021-07-06 23:04:33 -04:00
1 parent a4bf3d9862
commit 22e659c2bd
18 files changed
+612 -3129
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/html-namespace/Cargo.toml
+1
View File
@@ -6,6 +6,7 @@ edition = "2018"
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
[dependencies]
dioxus-core = { path="../core" }
[dev-dependencies]
scraper = "0.12.0"
packages/html-namespace/examples/attrlist.html
-2598
View File
File diff suppressed because it is too large. Load diff
packages/html-namespace/examples/namespace.rs
-42
View File
@@ -1,42 +0,0 @@
use scraper::{Html, Selector};
struct AttrClass {
attr_name: String,
attr_doc_link: String,
target_elements: Vec<String>,
docs: String,
}
const contents: &str = "";
// let contents = include_str!("./attrlist.html");
fn main() {
let mut items: Vec<AttrClass> = Vec::new();
let fragment = Html::parse_fragment(contents);
let ul_selector = Selector::parse("tbody").unwrap();
let li_selector = Selector::parse("tr").unwrap();
let ul = fragment.select(&ul_selector).next().unwrap();
for element in ul.select(&li_selector) {
let mut childs = element.children().into_iter();
let attr_field_node = childs.next().unwrap();
let elements_node = childs.next().unwrap();
let description_node = childs.next().unwrap();
// let attr_name = { todo!() };
// let attr_doc_link = { todo!() };
// let target_elements = { todo!() };
// let docs = description_node.text();
// todo!()
// items.push(AttrClass {
// attr_name,
// attr_doc_link,
// target_elements,
// docs,
// })
}
}
packages/html-namespace/examples/poc.rs
-30
View File
@@ -1,30 +0,0 @@
//! POC: Planning the layout of a single element type
//!
//!
//! The ultimate goal with a dedicated namespace is three-fold:
//! - compile-time correct templates preventing misuse of elemnents
//! - deep integration of DSL with IDE
//!
//!
//!
struct NodeFactory {}
struct div<'a>(&NodeFactory);
impl<'a> div<'a> {
fn new(cx: &NodeFactory) -> Self {
div(cx)
}
}
fn main() {}
fn factory(
// this is your mom
cx: &NodeFactory,
) {
div::new(cx);
rsx! {
div {}
}
}
packages/html-namespace/src/lib.rs
+62 -88
View File
@@ -1,37 +1,22 @@
trait DioxusElement {
const TAG_NAME: &'static str;
const NAME_SPACE: Option<&'static str>;
}
//! # Dioxus Namespace for HTML
//!
//! This crate provides a set of compile-time correct HTML elements that can be used with the Rsx and Html macros.
//! This system allows users to easily build new tags, new types, and customize the output of the Rsx and Html macros.
//!
//! An added benefit of this approach is the ability to lend comprehensive documentation on how to use these elements inside
//! of the Rsx and Html macros. Each element comes with a substantial amount of documentation on how to best use it, hopefully
//! making the development cycle quick.
struct myinput {}
struct NodeBuilder {}
impl NodeBuilder {
// fn add_attr()
}
use dioxus_core::prelude::{DioxusElement, NodeFactory};
macro_rules! builder_constructors {
( $(
$(#[$attr:meta])*
$name:ident;
// {
// attrs: [
// $(
// $(#[$attr2:meta])*
// $attr3:ident
// ,
// )*
// ];
// }
)* ) => {
( $( $(#[$attr:meta])* $name:ident; )* ) => {
$(
#[allow(non_camel_case_types)]
$(#[$attr])*
pub struct $name<'a> {
// the we wrap the builder, shielding what can be added
builder: &'a NodeBuilder
}
impl<'a> DioxusElement for $name<'a> {
pub struct $name;
impl DioxusElement for $name {
const TAG_NAME: &'static str = stringify!($name);
const NAME_SPACE: Option<&'static str> = None;
}
@@ -48,6 +33,10 @@ macro_rules! builder_constructors {
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element
//
// Does not include obsolete elements.
// This namespace represents a collection of modern HTML-5 compatiable elements.
//
// This list does not include obsolete, deprecated, experimental, or poorly supported elements.
builder_constructors! {
// Document metadata
@@ -109,18 +98,57 @@ builder_constructors! {
/// element.
header;
/// Build a
/// [`<h1>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h1)
/// element.
///
/// # About
/// - The HTML `<h1>` element is found within the `<body>` tag.
/// - Headings can range from `<h1>` to `<h6>`.
/// - The most important heading is `<h1>` and the least important heading is `<h6>`.
/// - The `<h1>` heading is the first heading in the document.
/// - The `<h1>` heading is usually a large bolded font.
///
/// # Usage
/// ```
/// html!(<h1> A header element </h1>)
/// rsx!(h1 { "A header element" })
/// LazyNodes::new(|f| f.el(h1).children([f.text("A header element")]).finish())
/// ```
h1;
/// Build a
/// [`<h2>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h2)
/// element.
///
/// # About
/// - The HTML `<h2>` element is found within the `<body>` tag.
/// - Headings can range from `<h1>` to `<h6>`.
/// - The most important heading is `<h1>` and the least important heading is `<h6>`.
/// - The `<h2>` heading is the second heading in the document.
/// - The `<h2>` heading is usually a large bolded font.
///
/// # Usage
/// ```
/// html!(<h2> A header element </h2>)
/// rsx!(h2 { "A header element" })
/// LazyNodes::new(|f| f.el(h2).children([f.text("A header element")]).finish())
/// ```
h2;
/// Build a
/// [`<h3>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h3)
/// element.
///
/// # About
/// - The HTML <h1> element is found within the <body> tag.
/// - Headings can range from <h1> to <h6>.
/// - The most important heading is <h1> and the least important heading is <h6>.
/// - The <h1> heading is the first heading in the document.
/// - The <h1> heading is usually a large bolded font.
h3;
/// Build a
/// [`<h4>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h4)
@@ -134,10 +162,7 @@ builder_constructors! {
/// [`<h6>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h6)
/// element.
h6;
/// Build a
/// [`<hgroup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup)
/// element.
hgroup;
/// Build a
/// [`<main>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main)
/// element.
@@ -268,22 +293,17 @@ builder_constructors! {
/// [`<q>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q)
/// element.
q;
/// Build a
/// [`<rb>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rb)
/// element.
rb;
/// Build a
/// [`<rp>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rp)
/// element.
rp;
/// Build a
/// [`<rt>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rt)
/// element.
rt;
/// Build a
/// [`<rtc>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rtc)
/// element.
rtc;
/// Build a
/// [`<ruby>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ruby)
/// element.
@@ -521,18 +541,8 @@ builder_constructors! {
/// [`<details>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details)
/// element.
details;
/// Build a
/// [`<dialog>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog)
/// element.
dialog;
/// Build a
/// [`<menu>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu)
/// element.
menu;
/// Build a
/// [`<menuitem>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menuitem)
/// element.
menuitem;
/// Build a
/// [`<summary>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary)
/// element.
@@ -552,7 +562,6 @@ builder_constructors! {
builder_constructors! {
// SVG components
/// Build a
/// [`<svg>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg)
/// element.
@@ -590,38 +599,3 @@ builder_constructors! {
/// element.
image <> "http://www.w3.org/2000/svg";
}
macro_rules! impl_attrs {
( $(
$(#[$attr:meta])*
$name:ident: [$($f:ident)*];
)* ) => {};
}
impl_attrs! {
/// Indicates whether the user can interact with the element
disabled: [button command fieldset input keygen optgroup option select textarea];
}
mod tests {
use super::*;
fn r#type() {}
struct MyThing {}
impl MyThing {
/// eat my socks
fn r#type(&self) -> &Self {
self
}
fn nothing(&self) -> &Self {
self
}
}
fn test() {
let t = MyThing {};
t.r#type().r#nothing();
// let g = div::TAG_NAME;
}
}