Components

Introducing server-side rendered frontend components. The idea is pretty simple: use composition like in React to build UIs, except the components are type-checked and rendered by the backend.

The base component can render any other component, including just strings. To make a Sailfish template into a component, just call component! on the struct, e.g: component!(MyTemplateStruct). MyTemplateStruct must be derived from sailfish::TemplateOnce.

CLI

To help with building components, we've created a cargo command that bundles CSS and JS into their respective bundles and can also generate components.

To install the CLI:

cargo install cargo-pgml-components
npm install -g rollup
npm install -g sass

Bundling

Run this after changing Sass or JS code: cargo pgml-components bundle.

Creating new components

cargo pgml-components add component_name

This will automatically generate:

1. A Rust struct derived from sailfish::TemplaceOnce
2. An HTML template file
3. A Stimulus controller.

Misc

1. Upgrade Sailfish to 0.8.
2. Add a /playground page where we should test and render components. Analogous to how Material UI does it: https://mui.com/material-ui/react-autocomplete/
3. Fix search modal in dashboard being small.