traPtitech / traPtitech/Checkin

strictTemplates を迂回している v-bind のオブジェクト 8 箇所に、検査の当たらない状態が残っている

Open
#62 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
TypeScript
Stars
0
Forks
0
Avg merge
3d 5h
Merged PRs (30d)
7

Description

現状

apps/web/nuxt.config.tsstrictTemplates: true を設定している。この設定の下では、@nuxt/ui のコンポーネントが prop として宣言していない属性をタグに直接書くと型検査が落ちる。一方、v-bind に渡したオブジェクトの中身は宣言済み prop と照合されないので、同じ属性でも v-bind 経由なら通る。

現在この書き方を使っている箇所が 8 つある。2026-09-18 に git grep -n 'v-bind=' -- 'apps/web' で数えた内訳は次のとおりで、いずれも理由を述べたコメントが直前に付いている。

  • apps/web/app/pages/payouts.vue: alertFallthroughAttrs(中身は { size: 'sm' })を UAlert に渡すものが 3 箇所、{ readonly: true }UInput に渡すものが 1 箇所、{ maxlength: 255 }UTextarea に渡すものが 1 箇所
  • apps/web/app/pages/special-invoice.vue: { readonly: true }{ inputmode: 'numeric' }UInput に渡すものが各 1 箇所
  • apps/web/app/pages/membership.vue: { onClick: ... }UCard に渡すものが 1 箇所

理由は 2 種類に分かれる。readonlyinputmodemaxlength は、UInputUTextareainheritAttrs: false を設定して $attrs を内側の <input> / <textarea> へ束ねるので、コンポーネントの prop ではなく内側の要素の属性として渡す必要がある。onClickUCardclick を emit しないため、根の要素へのフォールスルーとして渡している。

誰が何を誤るか

この 8 箇所では、属性名の綴りを間違えても型検査で出ない。v-bind のオブジェクトは宣言済み prop と照合されないので、readonlyreadOnly と書いても、maxlengthmaxLength と書いても通る。渡した属性が意図した要素に届いているかを確かめる手段も今は無い(.vue の描画をテストする手段がリポジトリに無いため)。

@nuxt/ui を上げたときも同じことが起きる。内側の要素への $attrs の束ね方が変われば属性は届かなくなるが、型検査もテストも失敗しないので、画面を開くまで出ない。

取りうる手

  • @nuxt/uisizeonClick を宣言した版へ上がった時点で、UAlertUCard の 4 箇所をタグへ直接書く形に戻す。readonlyinputmodemaxlength は内側の要素の属性なので、この対象にはならない。なお UAlert の 3 箇所に渡している size は、現在の版では宣言された prop ではないため描画に効いていない(別の issue で扱う)。
  • 描画のテストを用意して、8 箇所が意図した要素に属性を渡していることを検査する。.vue のテスト手段を用意する issue に依存する。

直さずに残した理由

今の版ではタグへ直接書くと型検査が落ちるので、上流の版が変わるまで戻せない。描画の検査は、テスト手段そのものが無いところから始める必要がある。

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with apps/web/nuxt.config.ts and the eight v-bind locations listed in apps/web/app/pages/payouts.vue, special-invoice.vue, and membership.vue. Check the repository’s existing test setup and the current @nuxt/ui behavior before choosing between rendering tests and a later direct-attribute change. Done means the chosen approach verifies that the intended attributes reach the intended elements, or documents the required upstream-version change.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxt, typescript
Domain
frontend, testing
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.