[RFC] Layout modules
- Lenguaje dominante
- TypeScript
- Estrellas
- 38
- Forks
- 1
- Métricas de merge de PR
- Sin PR fusionados en 30 d
Descripción
Frontend developers are familiar with the concept of layouts, so let's align with that. This feature would replace the concept of "renderers" and the render module would be no more. At the same time, we'll remove support for having multiple renderers/layouts in one file (which is what the render module encouraged). That feature requires complex parsing of the render module to determine which statements are used by which renderers. It'll be nice to remove that complexity.
### How are layouts defined?
Layouts are defined with the `defineLayout` function and typically exported with `export default`. Layouts can optionally wrap the `defineLayout` call with an arrow function so the layout can be customized by the developer for specific routes.
From the routes module, the developer can…
- set the default layout for all routes or a set of routes (via `setLayout` call)
- set the layout of a single route (via chained method call, or maybe the route config?)
### What do layouts do?
Layouts control…
- the `` and `` elements (via object or string)
- how the route module is rendered to HTML
- how the page is hydrated (if at all)
- the Vite config for each route
Layouts can use the `RenderRequest` object to influence any of its behavior. Access of route props (via `req.props`) within the layout's `render` method is tracked, so only the props needed for hydration are sent to the client. If the layout has no `hydrator`, then route props are never sent to the client.
## Example layout module
```ts
export default (options) =>
defineLayout((req) => {
return {
// Can be a string or object.
head: {
title: "",
language: "",
description: "",
viewport: {},
meta: [{ property: "og:title", content: "" }],
styles: [{ media: "", innerText: "" }],
scripts: [{ src: "", async: true }, { innerText: "" }],
links: [{ rel: "icon", href: "/favicon.svg" }],
},
// Provide a Vite config.
config: async () => (await import("./config")).default(options),
// Provide a client hydration function.
hydrator: () => import("./hydrator"),
// Render a route module.
render(module, { nested }) {
// Prop access is observed, so only props needed for hydration are sent to the client.
const layout =
// The `nested` flag tells the layout to skip stringification.
return nested ? layout : renderToHtml(layout);
},
};
});
```
Guía de contribución
No hay ninguna guía de contribución indexada para este repositorio
Evaluación
Este issue todavía no se ha evaluado.