Why &self works inside #[component] ?

The macro #[component] just rewrites function into a struct which implements mount method. This method accepts self which is instantly destructured into variables in accordance to the original function arguments.

The below example shows the same component wrapped with component macro and in an expanded version:

    use vertigo::{component, dom};

    #[component]
    fn MyComponent(age: i32) {
        dom! {
            <p>"Age: " {self.age}</p>
        }
    }

    // The same component implemented manually:
    struct MyComponentExpanded {
        pub age: i32,
    }

    impl MyComponentExpanded {
        pub fn into_component(self) -> Self {
            self
        }
        pub fn mount(self) -> vertigo::DomNode {
            let age = self.age;
            {
                dom! {
                    <p>"Age: " {self.age}</p>
                }
            }
        }
    }

    dom! {
        <div>
            <MyComponentExpanded age=21 />
            <MyComponent age=24 />
        </div>
    }

Why .into_component method? This is to allow components with dynamic/optional attributes:

    use vertigo::{component, dom, AttrGroup};

    #[component]
    fn MyComponent(age: i32, inner: AttrGroup) {
        dom! {
            <p {..inner}>"Age: " {self.age}</p>
        }
    }

    // The same component expanded:
    struct MyComponentExpanded {
        pub age: i32,
    }

    struct MyComponentExpandedComponent__ {
        pub age: i32,
        pub inner: AttrGroup,
    }

    impl MyComponentExpanded {
        pub fn into_component(self) -> MyComponentExpandedComponent__ {
            MyComponentExpandedComponent__ {
                age: self.age,
                inner: Default::default(),
            }
        }
    }

    impl MyComponentExpandedComponent__ {
        pub fn group_inner_push(mut self, key: String, value: vertigo::AttrGroupValue) -> Self {
            self.inner.insert(key, value);
            self
        }

        pub fn mount(self) -> vertigo::DomNode {
            let age = self.age;
            let inner = self.inner;
            dom! {
                <p {..inner}>"Age: " {self.age}</p>
            }
        }
    }

    dom! {
        <div>
            <MyComponentExpanded age=21 />
            <MyComponent age=24 />
        </div>
    }