Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

[RFC] Layout modules

Abierto
  • ¿Algo no está bien?
#70 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
5/5
Tiempo estimado
Más de una semana
Aptitud para principiantes
25/100
Tipo de issue
Nueva funcionalidad
Claridad
Necesita aclaración
Estado de actividad
Estancado
Stack tecnológico
typescript, vite
Área
frontend, web-dev

Línea de trabajo

Comienza por relacionar los conceptos existentes de renderizadores y módulos de renderizado con las API propuestas de defineLayout y routes-module, incluido el uso de RenderRequest. Determina cómo encajan la selección del layout, el renderizado de HTML, la hidratación y la configuración de Vite por ruta; se considera terminado cuando el comportamiento del layout y el reemplazo del renderer del RFC estén especificados y sean implementables.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

in progress roadmap

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 <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);
      },
    };
  });
Lenguaje dominante
TypeScript
Estrellas
38
Forks
1
Sin PR fusionados en 30 d

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de alloc/saus

Todos los issues de alloc/saus

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.