Component Mounting

For a component's JavaScript and state logic to be included in the final web bundle, it must be explicitly mounted within an #html block.

Mounting Syntax

Components are mounted using standard JSX-like tags within an #html macro. This tells the compiler to:

1. Generate the static HTML for the component.
2. Inject the necessary framework scripts (React, Solid, etc.).
3. Add the hydration logic to the client-side bundle.

#react Greeting(name : *char) {

    return <h1>Hello, {name}!</h1>

}



public func home(page : &mut HtmlPage) {

    #html {

        <div>

            <Greeting name="Alice" />

        </div>

    }

}

IMPORTANT

If you define a component but never "use" it via the <Component /> tag in an #html block, its JavaScript code will not be present in the final page bundle.

The Hydration Model

Chemical follows a "Static-by-Default" approach similar to Astro.

• Content outside of components is static HTML.
• Components allow you to add interactivity (state, effects) to specific parts of the page.
• The #js macro can be used for simple, framework-less client-side logic.

Layouts and Slots

You can pass children to components or use them within layouts to structure your site.

#html {

    <Layout title="Home">

        <Greeting name="Admin" />

    </Layout>

}