alloc / alloc/saus

[RFC] Layout modules

Aperta
#70 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub
in progress roadmap
Lingua principale
TypeScript
Stelle
38
Fork
1
Metriche di merge delle PR
Nessuna PR unita negli ultimi 30g

Descrizione

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 =

{req.props.foo}
;

// The `nested` flag tells the layout to skip stringification.
return nested ? layout : renderToHtml(layout);
},
};
});
```

Guida per i contributori

Nessuna guida per i contributori indicizzata per questo repository

Valutazione

Questa issue non è ancora stata valutata.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.