[RFC] Layout modules
まだ誰も着手していません。
評価
- 難易度
- 5/5
- 見積もり時間
- 1週間以上
- 初心者へのやさしさ
- 25/100
- issue の種類
- 機能追加
- 明瞭さ
- 説明が足りない
- 活発さ
- 停滞
- 技術スタック
- typescript, vite
調査の方向性
まず、既存のレンダラーとレンダーモジュールの概念を、RenderRequest の使用方法を含め、提案されている defineLayout および routes-module API と照らし合わせて整理します。レイアウトの選択、HTML レンダリング、ハイドレーション、ルートごとの Vite 設定がどのように組み合わさるかを明らかにします。RFC のレイアウト動作とレンダラーの置き換えが仕様化され、実装可能になれば完了です。
索引モデルが issue の本文から書いたものです。
説明
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);
},
};
});
- 主要言語
- TypeScript
- スター
- 38
- フォーク
- 1
- PR マージ指標
- 30日以内にマージされた PR はありません
環境構築
このプロジェクトには開発コンテナ、Dockerfile、コントリビューションガイドがありません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
alloc/saus のほかの issue
-
enhancement
難易度 3/5 1〜2日 初心者へのやさしさ 35/100
-
package idea
難易度 5/5 1週間以上 初心者へのやさしさ 25/100
-
Supertokens pluginオープンhelp wanted package idea
難易度 5/5 1週間以上 初心者へのやさしさ 20/100
-
enhancement plugin:aws saus deploy
難易度 4/5 3〜5日 初心者へのやさしさ 35/100
-
bug saus deploy
難易度 4/5 3〜5日 初心者へのやさしさ 42/100
似ている issue
-
Add: VIVE TVオープンapproved check:passed streams:add
難易度 1/5 1時間未満 初心者へのやさしさ 72/100
iptv-org/iptv#55293 · コメント 1 件 ·
メンテナーはふだん 1 日以内に返信
-
bug needs-triage
難易度 2/5 1〜3時間 初心者へのやさしさ 62/100
Fission-AI/OpenSpec#2084 ·
メンテナーはふだん 2 日以内に返信
-
Contrib indemnité de départ à la retraite : faire le pont avec le simulateur sur la page génériqueオープンP1
難易度 2/5 1〜3時間 初心者へのやさしさ 62/100
SocialGouv/code-du-travail-numerique#7561 ·
メンテナーはふだん 1 日以内に返信
-
beginner bug
難易度 1/5 1時間未満 初心者へのやさしさ 88/100
hiero-ledger/hiero-sdk-js#4517 ·
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 85/100
kubernetes-sigs/headlamp#7950 ·
メンテナーはふだん 3 日以内に返信