Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Environment: ページごとの OGP タグ値の注入ルールを各ルートディレクトリーで定義できるようにする #77

Merged
merged 9 commits into from
Jul 10, 2024
Merged

Environment: ページごとの OGP タグ値の注入ルールを各ルートディレクトリーで定義できるようにする #77

merged 9 commits into from
Jul 10, 2024

Conversation

ThinaticSystem
Copy link
Contributor

@ThinaticSystem ThinaticSystem commented Jun 30, 2024 •
edited
Loading

Why

ページごとの OGP タグの注入ルールの定義をルートディレクトリー (routes/**/)で各々定義できるようにしたい。

これまで目指してきたやり方

Frontend ではリクエストパスによる条件分岐付きの index.html を実装する (ビルド時に index.ejs が生成されるようにする)。

Backend では GET / (/index.html) リクエストを受けた際に
リクエストのパスや投稿情報等を基に frontend のビルド時に出来上がった index.ejs のレンダリングを行いレスポンスする。

こうすることにより HTML (EJS) へ記載する OGP タグ等のルールが責務的に frontend 側で完結されつつ
EJS のレンダリングを行うサーバーが backend のみでよくなる (frontend 用のサーバーが必要なくなる)。

この PR で解決したいこと

とはいえ上記のやり方を愚直にやっていくと index.html (index.ejs のソース) へルーティングを漏れなく記載していく必要があり
ファイルベースルーティングを導入しているのに index.html にもルーティング定義っぽいもの (ページごとのOGP タグ値の注入指示)を記載する必要があり

  • せっかくディレクトリー単位でルートを定義しているのに OGP 等のメタ情報だけは index.html に記載する必要がある
  • 型安全でない (ルーティングを変更した際に index.htmlの変更を忘れるリスクがある)

という運用上の微妙ポイントが残る。

What

TanStack が吐いてくれる routeTree.gen.ts (ルート定義ファイル) を基に index.html を機械的に生成するようにする。
TanStack の各ルート作成時に staticData というプロパティーを持たせることで、ルート情報に固有のオブジェクトを持たせることが可能っぽいためこれを使う。

具体的には
ルートを作成する際に backend に入れてもらいたい OGP の変数等をcreateFileRoute() の staticData オプションに記載するようにし
frontend ビルド前に routeTree.gen.ts を収集し「各ルートのパスにより条件分岐を行って staticData の OGP 値を注入してもらうEJSテンプレート (をコメントアウトによりHTMLセーフにしたもの)」を 生成する。
その後は既存実装の generate-ejs.js により EJS を生成し、backend はランタイムでリクエスト時に EJS をレンダリングしてリクエストされたページに合う OGP タグが埋め込まれた HTML をレスポンスする。

Changes

  • Frontend
    • Environment: privatenumber/tsx を追加
      generate-template-html.js 実行時に TypeScript モジュールを読み込めるようにするため
    • Environment: frontend ビルド前に TanStack のルート定義から OGP 注入分岐付きの index.html を動的生成
    • Ignore: index.html
      generate-template-html.js により動的生成するようになったため
    • Improve: [generate-ejs.js] 改行を含む EJS 構文をサポート
    • Document: 各ページの Open Graph Protocol 値を定義する手順を追記
      またLazy なページであっても createFileRoute() も一緒に実装するよう変更
  • Others
    • Feature: nodejs-mock-loader
      Vite でバンドルされることを前提としているソースを Node.js で実行する際に
      すっぴんの Node.js ではサポートされていない .js 以外のファイル等のインポートがされているとエラーになるため
      代わりに空のファイルを返すようにするローダーを作るための関数を提供するパッケージ

@ThinaticSystem ThinaticSystem marked this pull request as draft June 30, 2024 16:17
@ThinaticSystem ThinaticSystem changed the title Thinatic/generate template html with route definition Environment: ページごとの OGP タグ値の注入ルールを各ルートディレクトリーで定義できるようにする Jun 30, 2024
@ThinaticSystem
Copy link
Contributor Author

lazy じゃないほうの route.tsx も必ず作成するようにしていく必要がある疑惑 (createLazyFileRoute() には staticData オプションがない)

@ThinaticSystem
Copy link
Contributor Author

ThinaticSystem commented Jun 30, 2024 •
edited by marihachi
Loading

フロントエンドのビルド前に TypeScript ビルドしなくちゃいけなくなって最悪になってきた…
これこそプラグイン的なやつでやったほうがいいのでは

@marihachi
Copy link
Member

scriptsはjsで書いてほしい

@marihachi
Copy link
Member

書いてた

@ThinaticSystem ThinaticSystem force-pushed the thinatic/generate-template-html-with-route-definition branch from 23e27d0 to 959417a Compare July 2, 2024 12:44
@ThinaticSystem
Copy link
Contributor Author

JSで書くの不可能そう
routeTree.gen.tsとかがTSなので…

@ThinaticSystem ThinaticSystem force-pushed the thinatic/generate-template-html-with-route-definition branch from 22e20b5 to 3a39e1b Compare July 2, 2024 17:48
@marihachi
Copy link
Member

marihachi commented Jul 2, 2024 •
edited
Loading

tsで書いてts-nodeで動かしても良いかも
scriptsのビルド面倒なため

@ThinaticSystem ThinaticSystem force-pushed the thinatic/generate-template-html-with-route-definition branch 3 times, most recently from e593f88 to 1a4cb19 Compare July 6, 2024 13:13
@ThinaticSystem
Copy link
Contributor Author

実装はできた

@ThinaticSystem
Copy link
Contributor Author

tsで書いてts-nodeで動かしても良いかも scriptsのビルド面倒なため

ts-node っぽいやつ (tsx) で動かすようにした
けど TanStack Router がルート定義を JSON とかで出力してくれるようになったときのために JSDoc ゴリゴリ JavaScript のままにしとく

@ThinaticSystem ThinaticSystem marked this pull request as ready for review July 6, 2024 13:48
@ThinaticSystem ThinaticSystem requested a review from marihachi July 6, 2024 13:50
@ThinaticSystem
Copy link
Contributor Author

@marihachi
依存関係追加してる (privatenumber/TSX)ので一応確認

@ThinaticSystem ThinaticSystem force-pushed the thinatic/generate-template-html-with-route-definition branch 3 times, most recently from 8fb1841 to 0abe10b Compare July 6, 2024 15:32
@marihachi
Copy link
Member

@marihachi 依存関係追加してる (privatenumber/TSX)ので一応確認

OK

marihachi
marihachi reviewed Jul 7, 2024
View reviewed changes
frontend/package.json Outdated Show resolved Hide resolved
@marihachi
Copy link
Member

あとはOK
今出てきた問題だけ直してマージしていこう

@ThinaticSystem ThinaticSystem force-pushed the thinatic/generate-template-html-with-route-definition branch from 0abe10b to 14d79b1 Compare July 10, 2024 11:40
@ThinaticSystem
Copy link
Contributor Author

うおおおおお GitHub だと force push したときのレビューコメント箇所の差分出ないのか

@ThinaticSystem ThinaticSystem merged commit df1d453 into develop Jul 10, 2024
1 check passed
@ThinaticSystem ThinaticSystem deleted the thinatic/generate-template-html-with-route-definition branch July 10, 2024 11:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@marihachi marihachi marihachi left review comments

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@ThinaticSystem @marihachi