[RFC] Layout modules
Nessuno ha ancora preso questa issue.
Valutazione
- Difficoltà
- 5/5
- Tempo stimato
- Più di una settimana
- Idoneità per principianti
- 25/100
- Tipo di issue
- Funzionalità
- Chiarezza
- Da chiarire
- Stato di attività
- Ferma
- Stack tecnologico
- typescript, vite
Direzione di ricerca
Inizia mappando i concetti esistenti di renderer e moduli di rendering rispetto alle API proposte defineLayout e routes-module, incluso l’uso di RenderRequest. Determina come si integrano la selezione del layout, il rendering HTML, l’idratazione e la configurazione di Vite per route; il lavoro è concluso quando il comportamento del layout e la sostituzione del renderer dell’RFC sono specificati e implementabili.
Scritto dal modello di indicizzazione a partire dal testo della issue.
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
setLayoutcall) - set the layout of a single route (via chained method call, or maybe the route config?)
What do layouts do?
Layouts control…
- the
<html>and<head>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
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 = <div>{req.props.foo}</div>;
// The `nested` flag tells the layout to skip stringification.
return nested ? layout : renderToHtml(layout);
},
};
});
- Lingua principale
- TypeScript
- Stelle
- 38
- Fork
- 1
- Metriche di merge delle PR
- Nessuna PR unita negli ultimi 30g
Guida per i contributori
Nessuna guida per i contributori indicizzata per questo repository
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Altre issue di alloc/saus
-
enhancement
Difficoltà 3/5 1-2 giorni Idoneità per principianti 35/100
-
package idea
Difficoltà 5/5 Più di una settimana Idoneità per principianti 25/100
-
Supertokens plugin Apertahelp wanted package idea
Difficoltà 5/5 Più di una settimana Idoneità per principianti 20/100
-
enhancement plugin:aws saus deploy
Difficoltà 4/5 3-5 giorni Idoneità per principianti 35/100
-
bug saus deploy
Difficoltà 4/5 3-5 giorni Idoneità per principianti 42/100
Issue simili
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 70/100
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 75/100
mksglu/context-mode#1200 ·
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 75/100
jaegertracing/jaeger-ui#4506 ·
-
area:desktop area:ui bug platform:macos
Difficoltà 2/5 1-3 ore Idoneità per principianti 75/100
anthropics/claude-code#96687 ·
-
good first issue
Difficoltà 1/5 Meno di un'ora Idoneità per principianti 95/100
AOSSIE-Org/DebateAI#582 · 2 commenti ·