A preview of v0.1.0

🎄 Merry Christmas!

I thought I'd offer this alpha release of the upcoming 0.1.0 so you can get a taste for some of what we've been working on. Shout out to @jquesada2016 for driving the work on the rewritten renderer that got us here, as well as huge improvements to the #[component] macro and many other details of the framework.

You can track the current state of this work in PR #119. You can download the alpha from crates.io.

There are a few known issues still (see below) but this release should be more or less usable, and the APIs are pretty much final. You can expect something closer to a final release in the next few weeks, but here's what to look forward to in the meantime.

Features

More flexible rendering

You can now easily mix and match different types of node in a Fragment, which previously needed to be a Vec of all the same types (like a Vec<Fragment>).

view! { cx,
  <>
    "This is some text."
    <p>"Here's an element."</p>
    <ComponentA/>
  </>
}

Typed HTML elements

HTML elements generated by the view! macro are now typed, and implement Deref to give a correctly-typed web_sys element.

// returns `HtmlElement<Input>`
// derefs to a `web_sys::HtmlInputElement`
view! { cx, <input type="text"/> }

Massively improved Rust Analyzer support

DX with this new system is much better. You'll see hugely improved language-server integration for the view! macro, including features like doc comments for HTML elements, autocompletion for component properties, clicking to go to the definition of a component, type hints for component arguments, etc.

Inline documentation in the #[component] macro

You can now document components and their properties directly in the #[component] macro like this:

/// A simple counter component.
/// 
/// You can use doc comments like this to document your component.
#[component]
pub fn SimpleCounter(
  cx: Scope,
  /// The starting value for the counter
  #[prop(optional)]
  initial_value: i32,
  /// The change that should be applied each time the button is clicked.
  step: i32
) -> impl IntoView {
  // ...
}

The macro will automatically generate docs for the components and for each of its props.

#[prop] attributes for component props

You can use the #[prop] attribute macro to mark component props in several ways:

• #[prop(optional)]: this property is not required, and will default to Default::default() if you don't provide it in the view
• #[prop(into)]: .into() will be called to convert the arguments provided in the view you can specify, to save you adding .into() in your views

And much more!

• Comments that mark component boundaries for easier debugging, when in debug mode
• Removing the need to wrap things that <Router/> in a <div> for no obvious reason
• and all sorts of things I'm forgetting!

Breaking Changes

Here are a few things to watch out for as you migrate:

• All component functions should now return -> impl IntoView
• The <For/> component now takes a view property, instead of you passing the view function as the child of the component
• Likewise, the <Route/> component takes a view property instead of element for consistency
• children properties are now typed Box<dyn Fn(Scope) -> Fragment>
• The view! macro returns distinct structures, which are all different types. In other words, this code no longer compiles

// this won't work
if some_condition {
  view! { cx, <p>"P if true"</p> }
} else {
  view! { cx, <span>"SPAN if false"</span> }
}

because the first branch now returns HtmlElement<P> while the second returns HtmlElement<Span>.

In this case, simply add .into_any() to each to return HtmlElement<AnyElement> from both. In general, you can always call .into_view(cx) to return a wrapping View type instead.

// this works
if some_condition {
  view! { cx, <p>"P if true"</p> }.into_any()
} else if something_else {
  view! { cx, <span>"SPAN if false"</span> }.into_any()
}

Outstanding Issues (in progress)

• The <Transition/> component doesn't quite work properly yet.
• SSR + hydration is slightly broken if you use create_resource and read it without using <Suspense/>
• There may be some bugs in SSR + hydration in release mode, as this has not been fully tested yet
• SSR is temporarily slower than the current version, as I haven't implemented the fast-path in the view! macro yet
• Merge over stable support for leptos_router and leptos_meta