Merge pull request #16 from blorbb/leptos-0.7

Leptos 0.7 support

Author: blorbb

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "leptos-mview"
-version = "0.3.2"
+version = "0.4.0"
 edition = "2021"
 license = "MIT OR Apache-2.0"
 keywords = ["macro", "leptos", "view"]
@@ -11,11 +11,16 @@ readme = "README.md"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-leptos-mview-macro = { path = "leptos-mview-macro", version = "0.3.2" }
+leptos-mview-macro = { path = "leptos-mview-macro", version = "0.4.0" }
 
 [dev-dependencies]
 trybuild = "1"
-leptos = { version = "0.6.12", features = ["nightly", "csr"] }
+# needs to use ssr for some view-to-HTML features to work.
+leptos = { version = "0.7.0", features = ["ssr", "nightly"] }
+leptos-mview = { path = ".", features = ["nightly"] }
+
+[features]
+nightly = ["leptos-mview-macro/nightly"]
 
 [workspace]
 members = ["leptos-mview-core", "leptos-mview-macro"]

README.md

@@ -11,12 +11,12 @@ An alternative `view!` macro for [Leptos](https://github.com/leptos-rs/leptos/tr
 A little preview of the syntax:
 
 ```rust
-use leptos::*;
+use leptos::prelude::*;
 use leptos_mview::mview;
 
 #[component]
 fn MyComponent() -> impl IntoView {
-    let (value, set_value) = create_signal(String::new());
+    let (value, set_value) = signal(String::new());
     let red_input = move || value().len() % 2 == 0;
 
     mview! {
@@ -37,7 +37,7 @@ fn MyComponent() -> impl IntoView {
             fallback=[mview! { "..." }]
         {
             Await
-                future=[fetch_from_db(value())]
+                future={fetch_from_db(value())}
                 blocking
             |db_info| {
                 p { "Things found: " strong { {*db_info} } "!" }
@@ -54,12 +54,12 @@ async fn fetch_from_db(data: String) -> usize { data.len() }
 <summary> Explanation of the example: </summary>
 
 ```rust
-use leptos::*;
+use leptos::prelude::*;
 use leptos_mview::mview;
 
 #[component]
 fn MyComponent() -> impl IntoView {
-    let (value, set_value) = create_signal(String::new());
+    let (value, set_value) = signal(String::new());
     let red_input = move || value().len() % 2 == 0;
 
     mview! {
@@ -85,7 +85,7 @@ fn MyComponent() -> impl IntoView {
             fallback=[mview! { "..." }] // `{move || mview! { "..." }}`
         { // I recommend placing children like this when attributes are multi-line
             Await
-                future=[fetch_from_db(value())]
+                future={fetch_from_db(value())}
                 blocking // expanded to `blocking=true`
             // children take arguments with a 'closure'
             // this is very different to `let:db_info` in Leptos!
@@ -110,10 +110,6 @@ async fn fetch_from_db(data: String) -> usize { data.len() }
 
 The `view!` macros in Leptos is often the largest part of a component, and can get extremely long when writing complex components. This macro aims to be as **concise** as possible, trying to **minimise unnecessary punctuation/words** and **shorten common patterns**.
 
-## Performance note
-
-Currently, the macro expands to the [builder syntax](https://github.com/leptos-rs/leptos/blob/main/docs/book/src/view/builder.md) (ish), but it has some [performance downsides](https://github.com/leptos-rs/leptos/issues/1492#issuecomment-1664675672) in SSR mode. This is expected to be fixed with the new renderer in Leptos `0.7`, so I'm not going to make this implementation.
-
 ## Compatibility
 
 This macro will be compatible with the latest stable release of Leptos. The macro references Leptos items using `::leptos::...`, no items are re-exported from this crate. Therefore, this crate will likely work with any Leptos version if no view-related items are changed.
@@ -125,6 +121,9 @@ The below are the versions with which I have tested it to be working. It is like
 | `0.1`                  | `0.5`                       |
 | `0.2`                  | `0.5`, `0.6`                |
 | `0.3`                  | `0.6`                       |
+| `0.4`                  | `0.7`                       |
+
+This crate also has a feature `"nightly"` that enables better proc-macro diagnostics (simply enables the nightly feature in proc-macro-error2. Necessary while [this pr](https://github.com/GnomedDev/proc-macro-error-2/pull/5) is not yet merged).
 
 ## Syntax details
 
@@ -182,7 +181,7 @@ The name of the parameter in the component function must be the same as the slot
 
 Using the slots defined by the [`SlotIf` example linked](https://github.com/leptos-rs/leptos/blob/main/examples/slots/src/lib.rs):
 ```rust
-use leptos::*;
+use leptos::prelude::*;
 use leptos_mview::mview;
 
 #[component]
@@ -219,7 +218,7 @@ There are (currently) 3 main types of values you can pass in:
         input
             class="main"
             checked=true
-            madeup=3
+            data-index=3
             type={input_type}
             on:input={move |_| handle_input(1)};
     }
@@ -343,60 +342,6 @@ mview! {
 
 Note that the `use:` directive automatically calls `.into()` on its argument, consistent with behaviour from Leptos.
 
-#### Special Attributes
-
-There are a few special attributes you can put on your component to emulate some features only available on HTML elements.
-
-If a component has a `class` attribute, the classes using the selector syntax `.some-class` and dynamic classes `class:thing={signal}` can be passed in!
-
-```rust
-#[component]
-// the `class` parameter should have these attributes and type to work properly
-fn TakesClasses(#[prop(optional, into)] class: TextProp) -> impl IntoView {
-    mview! {
-        // "my-component" will always be present, extra classes passed in will also be added
-        div.my-component class=[class.get()] { "..." }
-    }
-}
-
-// <div class="my-component extra-class">
-mview! {
-    TakesClasses.extra-class;
-};
-```
-
-It is suggested to only pass in static classes (i.e. with selectors or just a plain `class="..."`), as using dynamic classes needs to construct a new string every time any of the signals change; dynamic classes are supported if you want them though.
-
-```rust
-let signal = RwSignal::new(true);
-// <div class="my-component always-has-this special">
-mview! {
-    TakesClasses.always-has-this class:special={signal};
-}
-signal.set(false);
-// becomes <div class="my-component always-has-this">
-```
-
-There is one small difference from the `class:` syntax on HTML elements: the value passed in must be an `Fn() -> bool`, it cannot just be a `bool`.
-
-This is also supported with an `id` attribute to forward `#my-id`, though not reactively.
-```rust
-#[component]
-// the `id` parameter should have these attributes and type to work properly
-fn TakesIds(#[prop(optional)] id: &'static str) -> impl IntoView {
-    mview! {
-        div {id} { "..." }
-    }
-}
-
-// <div id="my-unique-id">
-mview! {
-    TakesIds #my-unique-id;
-};
-```
-
-This is also supported on slots by having a `class` and `id` field with the same attributes and types as the components above.
-
 ### Children
 
 You may have noticed that the `let:data` prop was missing from the previous section on directive attributes!
@@ -405,7 +350,7 @@ This is replaced with a closure right before the children block. This way, you c
 ```rust
 mview! {
     Await
-        future=[async { 3 }]
+        future={async { 3 }}
     |monkeys| {
         p { {*monkeys} " little monkeys, jumping on the bed." }
     }
@@ -425,7 +370,7 @@ mview! {
 
 Summary from the previous section on values in case you missed it: children can be literal strings (not bools or numbers!), blocks with Rust code inside (`{*monkeys}`), or the closure shorthand `[number() + 1]`.
 
-Children with closures are also supported on slots, add a field `children: Callback<T, View>` to use it (`T` is whatever type you want).
+Children with closures are also supported on slots.
 
 ## Extra details
 
@@ -454,7 +399,6 @@ If an attribute shorthand has hyphens:
 
 Note the behaviour from Leptos: setting an HTML attribute to true adds the attribute with no value associated.
 ```rust
-use leptos::view;
 view! { <input type="checkbox" checked=true data-smth=true not-here=false /> }
 ```
 Becomes `<input type="checkbox" checked data-smth />`, NOT `checked="true"` or `data-smth="true"` or `not-here="false"`.

leptos-mview-core/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "leptos-mview-core"
-version = "0.3.2"
+version = "0.4.0"
 edition = "2021"
 license = "MIT OR Apache-2.0"
 description = "Main implementation of leptos-mview"
@@ -13,4 +13,4 @@ readme = "README.md"
 syn = { version = "2", features = [] }
 quote = "1"
 proc-macro2 = "1"
-proc-macro-error = { version = "1", default-features = false }
+proc-macro-error2 = "2"

leptos-mview-core/src/ast/attribute/kv.rs

@@ -1,5 +1,5 @@
 use proc_macro2::Span;
-use syn::{parse::Parse, parse_quote, Token};
+use syn::{parse::Parse, Token};
 
 use crate::{
     ast::{BracedKebabIdent, KebabIdent, Value},
@@ -52,8 +52,7 @@ impl Parse for KvAttr {
                 let value = Value::parse_or_emit_err(input, eq.span);
                 (ident, value)
             } else {
-                // don't span the attribute name to the `true` or it becomes bool-colored
-                let value = Value::Lit(parse_quote!(true));
+                let value = Value::new_true();
                 (ident, value)
             }
         };

leptos-mview-core/src/ast/children.rs

@@ -1,6 +1,6 @@
 use proc_macro2::Span;
-use proc_macro_error::emit_error;
-use quote::ToTokens;
+use proc_macro_error2::emit_error;
+use quote::{quote, ToTokens};
 use syn::{
     ext::IdentExt,
     parse::{Parse, ParseStream},
@@ -25,10 +25,13 @@ pub enum NodeChild {
 
 impl ToTokens for NodeChild {
     fn to_tokens(&self, tokens: &mut proc_macro2::TokenStream) {
-        match self {
-            Self::Value(v) => tokens.extend(v.into_token_stream()),
-            Self::Element(e) => tokens.extend(e.into_token_stream()),
-        }
+        let child_tokens = match self {
+            Self::Value(v) => v.into_token_stream(),
+            Self::Element(e) => e.into_token_stream(),
+        };
+        tokens.extend(quote! {
+            ::leptos::prelude::IntoRender::into_render(#child_tokens)
+        });
     }
 }
 

leptos-mview-core/src/ast/element.rs

@@ -1,5 +1,5 @@
 use proc_macro2::{TokenStream, TokenTree};
-use proc_macro_error::emit_error;
+use proc_macro_error2::emit_error;
 use quote::{ToTokens, TokenStreamExt};
 use syn::{
     parse::{Parse, ParseStream},

leptos-mview-core/src/ast/ident.rs

@@ -1,5 +1,5 @@
 use proc_macro2::{Span, TokenStream};
-use proc_macro_error::emit_error;
+use proc_macro_error2::emit_error;
 use quote::{quote, ToTokens};
 use syn::{
     ext::IdentExt,
@@ -206,6 +206,13 @@ impl KebabIdentOrStr {
             }
         }
     }
+
+    pub fn to_unspanned_string(&self) -> String {
+        match self {
+            Self::KebabIdent(kebab_ident) => kebab_ident.repr().to_string(),
+            Self::Str(lit_str) => lit_str.value(),
+        }
+    }
 }
 
 impl Parse for KebabIdentOrStr {

leptos-mview-core/src/ast/tag.rs

@@ -39,15 +39,24 @@ impl Tag {
     /// Returns the [`Span`] of the tag identifier.
     ///
     /// Component generics are not included in this span.
-    ///
-    /// Use the [`Tag::ident`] function if the identifier itself is required.
     pub fn span(&self) -> Span {
         match self {
             Self::Html(ident) | Self::Svg(ident) | Self::Math(ident) => ident.span(),
             Self::WebComponent(ident) => ident.span(),
             Self::Component(path) => path.span(),
         }
     }
+
+    /// Returns the [`TagKind`] of this tag.
+    pub fn kind(&self) -> TagKind {
+        match self {
+            Tag::Html(_) => TagKind::Html,
+            Tag::Component(_) => TagKind::Component,
+            Tag::Svg(_) => TagKind::Svg,
+            Tag::Math(_) => TagKind::Math,
+            Tag::WebComponent(_) => TagKind::WebComponent,
+        }
+    }
 }
 
 impl Parse for Tag {

leptos-mview-core/src/ast/value.rs

@@ -1,9 +1,10 @@
 use proc_macro2::{Span, TokenStream};
-use proc_macro_error::{emit_error, Diagnostic};
+use proc_macro_error2::{emit_error, Diagnostic};
 use quote::{quote, quote_spanned, ToTokens};
 use syn::{
     ext::IdentExt,
     parse::{Parse, ParseStream},
+    parse_quote,
     spanned::Spanned,
 };
 
@@ -130,7 +131,7 @@ impl Value {
             // incomplete typing; place a MissingValueAfterEq and continue
             let error = Diagnostic::spanned(
                 span,
-                proc_macro_error::Level::Error,
+                proc_macro_error2::Level::Error,
                 "expected value after =".to_string(),
             );
             // if the token after the `=` is an ident, perhaps the user forgot to wrap in
@@ -148,6 +149,9 @@ impl Value {
             }
         }
     }
+
+    /// Constructs self as a literal `true` with no span.
+    pub fn new_true() -> Self { Self::Lit(parse_quote!(true)) }
 }
 
 #[cfg(test)]

leptos-mview-core/src/error_ext.rs

@@ -3,7 +3,7 @@
 //!
 //! A simplified version of the extension traits have been added here.
 
-use proc_macro_error::{abort, emit_error};
+use proc_macro_error2::{abort, emit_error};
 
 pub trait ResultExt {
     type Ok;