Compile Time Errors

The html-macro provides compile time errors to help catch mistakes.

Every compile time error is tested in crates/html-macro-ui using the trybuild crate.

If you have an idea for an error that you don't see here open an issue!

Here are a few examples:

Wrong closing tag

You've opened with one tag but are attempting to close with another.

extern crate percy_dom;
use percy_dom::prelude::*;

// Expected a closing div tag, found a closing strong tag
fn main() {
    html! {
        <div> </strong>
    };
}

error: Wrong closing tag. Try changing "strong" into "div"
 --> $DIR/wrong_closing_tag.rs:7:17
  |
7 |         <div> </strong>
  |                 ^^^^^^

Should be self closing tag

The tag that you are trying to use is a self closing tagl

extern crate percy_dom;
use percy_dom::prelude::*;

// We are using open and close tags for a tag that should
// actually be a self closing tag
fn main() {
    html! {
        <br></br>
    };
}

error: br is a self closing tag. Try "<br>" or "<br />"
 --> $DIR/should_be_self_closing_tag.rs:8:15
  |
8 |         <br></br>
  |               ^^

Invalid HTML tag

You're trying to use a tag that isn't in the HTML specification. This might happen if you've made a typo.

//! # To Run
//!
//! cargo test -p html-macro-test --lib ui -- trybuild=invalid_html_tag.rs

extern crate percy_dom;
use percy_dom::prelude::*;

// Used a tag name that does not exist in the HTML spec
fn main() {
    html! {
        <invalidtagname></invalidtagname>
    };
}

error: invalidtagname is not a valid HTML tag.

       If you are trying to use a valid HTML tag, perhaps there's a typo?

       If you are trying to use a custom component, please capitalize the component name.

       custom components: https://chinedufn.github.io/percy/html-macro/custom-components/index.html
  --> src/tests/ui/invalid_html_tag.rs
   |
   |         <invalidtagname></invalidtagname>
   |          ^^^^^^^^^^^^^^

on create element without key

You set the on_create_element but did not set a key.

//! # To Run
//!
//! cargo test -p html-macro-test --lib ui -- trybuild=on_create_element_without_key.rs

extern crate percy_dom;
use percy_dom::prelude::*;

// Used the `on_create_element` attribute without providing a key attribute.
fn main() {
    html! {
        <div on_create_element = ||{} >
        </div>
    };
}

error: Whenever you use the `on_create_element=...` attribute,
       you must also use must use the `key="..."` attribute.

       Documentation:
         -> https://chinedufn.github.io/percy/html-macro/real-elements-and-nodes/on-create-elem/index.html

  --> src/tests/ui/on_create_element_without_key.rs
   |
   |         <div on_create_element = ||{} >
   |              ^^^^^^^^^^^^^^^^^

on remove element without key

You set the on_remove_element but did not set a key.

//! # To Run
//!
//! cargo test -p html-macro-test --lib ui -- trybuild=on_remove_element_without_key.rs

extern crate percy_dom;
use percy_dom::prelude::*;

// Used the `on_remove_element` attribute without providing a key attribute.
fn main() {
    html! {
        <div on_remove_element = ||{} >
        </div>
    };
}

error: Whenever you use the `on_remove_element=...` attribute,
       you must also use must use the `key="..."` attribute.

       Documentation:
         -> https://chinedufn.github.io/percy/html-macro/real-elements-and-nodes/on-remove-elem/index.html

  --> src/tests/ui/on_remove_element_without_key.rs
   |
   |         <div on_remove_element = ||{} >
   |              ^^^^^^^^^^^^^^^^^