Hacktoberfest 2026:メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

💡 Stretch sizing (fill the cross axis)

オープン
#71 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
58/100
issue の種類
機能追加
明瞭さ
おおむね明確
活発さ
静か
技術スタック
c, typescript
領域
frontend

調査の方向性

test/stretch-sizing.test.ts と参照されている diff から始め、src/clayterm.c の decode_axis と、ops.ts の sizing ヘルパーおよび packAxis のケースを追ってください。cross-axis の sizing が適用される layout pass を追ってください; stretch() がサポートされ、利用可能な cross axis を埋める child に対して失敗している stretch-sizing テストがパスすれば完了です。

索引モデルが issue の本文から書いたものです。

説明

enhancement

Is your feature request related to a problem?

There's no sizing mode that fills the cross axis. grow() expands a child along the container's main axis, but on the cross axis a child only ever sizes to its content (fit) unless you hardcode a fixed(). In a top-to-bottom container 12 cells wide, a fit-content child holding X computes width: 1—there's no way to say "fill the container's width" so it spans all 12.

Describe the solution you'd like

A stretch() sizing axis, sibling to grow() / fit() / fixed(), that expands the element to fill the available cross-axis space:

open("child", {
  layout: {
    width: stretch(),
    height: fixed(3),
  },
});

The name is stretch (not grow, which is main-axis flex-grow, nor fill)—it's the cross-axis analog, matching the CSS width: stretch sizing keyword. Flexbox also expresses the same fill behavior as align-self: stretch, so this is the sizing-side counterpart to per-child align-self (#70). A stretch width in a ttb container makes the child span the full container width.

Describe alternatives you've considered

Setting width: fixed(containerWidth) works only when the container size is known and static—it hardcodes the dimension, breaks on resize, and can't follow a grow/fit parent. The renderer already knows the cross-axis extent at layout time; stretch just opts the child into it.

Additional context

Failing test case on nm/repro/stretch-sizing (test · diff).

decode_axis (src/clayterm.c:365) handles only FIT / GROW / PERCENT / FIXED; this needs a new stretch axis type there, a stretch() helper and packAxis case in ops.ts, and the cross-axis grow applied in the layout pass.

主要言語
TypeScript
スター
42
フォーク
2
平均マージ
2日 5時間
マージ済み PR(30日)
12

コントリビューションガイド

このリポジトリのコントリビューションガイドは索引されていません

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

bombshell-dev/tty のほかの issue

bombshell-dev/tty の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。