feat(frontend): ノート・ユーザータイムライン埋め込み

[kakkokari-gtyih]

What

• embed時の起動ロジックの分離
  • アカウントの読み込み回避
  • localStorage, indexedDBをセッションごとに初期化 (safeSessionStorage)
    • 必要なデータは本物のlocalStorageからコピーするように
  • os.popupを回避
    • 代替アクションの実装
  • routerが遷移してしまうのを回避
• postMessageの改良
  • ウィンドウリサイズ機構の実装
  • iframeIdを保持する機構の実装
  • iframeIdを一度設定したら変更できないように
  • parent iframeにメッセージが行かない問題を修正
• 各種埋め込みコンポーネントの作成
  • 個別ノート
  • ユーザーTL
  • クリップのノート一覧
  • ハッシュタグのノート一覧
• 埋め込みコード生成機構の作成
• WebSocketを使わないようにする（Related to No WebSocketモード #12227 ）

Why

Fix #1714
Close #10491

Additional info (optional)

カスタマイズ用 パラメータ

共通

• colorMode: light | dark | auto。カラーモードのオーバーライド。デフォルト: auto
• rounded: true | false。角丸にするかどうか。デフォルト: true
• border: true | false。外周のボーダーをつけるかどうか。デフォルト: true

TL系

• header: true | false。上部にヘッダを設けるかどうか。デフォルト: true
• autoload: true | false。無限スクロールするかどうか。デフォルト: false
• maxHeight: 数値。設定すると、指定した高さ以降はスクロールバーが出る。指定しない場合はどこまでも伸びる（デフォルトで何らかの値を設定した状態のコードを生成する）

埋め込みコード

たぶんミニファイして2行になると思う

<iframe src="http://localhost:5173/embed/notes/9qhdxot24f?" data-misskey-embed-id="v1_8482df8f-5f43-49f4-9c18-f2c6b013f9ba" style="border: none; width: 100%; max-width: 500px; height: 300px; color-scheme: light dark;"></iframe>
<script defer src="http://localhost:5173/embed.js"></script>

その他

/packages/backend/assets/embed.js （親ページ側から読み込むiframe制御用スクリプト）はいろいろ使いまわしやすいようにSPDXをMITライセンスとしている

Checklist

• Read the contribution guide
• Test working in a local environment
• (If needed) Add story of storybook
• (If needed) Update CHANGELOG.md
• (If possible) Add tests

[github-actions]

このPRによるapi.jsonの差分

差分はこちら

Get diff files from Workflow Page

[codecov]

Codecov Report

Attention: Patch coverage is 17.38241% with 808 lines in your changes missing coverage. Please review.

Project coverage is 41.27%. Comparing base (0d0cd73) to head (21e23c0).
Report is 1 commits behind head on develop.

Files with missing lines	Patch %	Lines
...s/frontend/src/components/MkEmbedCodeGenDialog.vue	0.00%	411 Missing and 1 partial ⚠️
packages/frontend/src/scripts/stream-mock.ts	0.00%	80 Missing and 1 partial ⚠️
packages/frontend/src/scripts/get-embed-code.ts	36.78%	55 Missing ⚠️
...ages/backend/src/server/web/ClientServerService.ts	4.87%	39 Missing ⚠️
packages/frontend/src/pages/clip.vue	0.00%	26 Missing ⚠️
packages/frontend/src/router/main.ts	28.57%	20 Missing ⚠️
packages/frontend/src/scripts/get-note-menu.ts	11.11%	16 Missing ⚠️
packages/frontend/src/pages/tag.vue	0.00%	14 Missing ⚠️
packages/frontend/src/boot/main-boot.ts	0.00%	13 Missing ⚠️
packages/frontend/src/scripts/is-link.ts	0.00%	11 Missing and 1 partial ⚠️
... and 56 more

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #13929      +/-   ##
===========================================
- Coverage    41.46%   41.27%   -0.19%     
===========================================
  Files         1551     1543       -8     
  Lines       196719   196679      -40     
  Branches      3618     3549      -69     
===========================================
- Hits         81564    81181     -383     
- Misses      114591   114902     +311     
- Partials       564      596      +32     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[syuilo]

/preview

[syuilo]

特定の操作でログインダイアログ出せるわね

[syuilo]

考えられる対応

• embedではページ遷移禁止
• embedではログインAPI叩くの禁止

[syuilo]

ページ遷移は必ず新しいタブ の方が良いわね

[syuilo]

特定の操作でログインダイアログ出せるわね

• 時間クリックして投稿詳細に遷移する手法
• アバタークリックしてユーザーページに遷移する手法
• 名前クリックしてユーザーページに遷移する手法

[syuilo]

あと何らかの原因で「読み込みに失敗しました」ページが表示されてしまうとそこからいろいろアクセスできてしまいそう

[syuilo]

やっぱり場合によってはこの画面を出すことが可能であることを確認

[syuilo]

あとWebSocketに繋ぐのは無駄そう

[kakkokari-gtyih]

あとWebSocketに繋ぐのは無駄そう

将来的にLTL埋め込みとかが入ると使うかもしれない（ただし通常の埋め込みに必要ないのは事実なのでBootOptionsで切れるようにするのがよさそう

[syuilo]

LTL埋め込む場合でもポーリングで事足りそう

[kakkokari-gtyih]

ページ遷移は必ず新しいタブ の方が良いわね

navHookで全部別窓に飛ばすようにした

[kakkokari-gtyih]

やっぱり場合によってはこの画面を出すことが可能であることを確認

これってどこ由来の画面だっけ

[syuilo]

boot.js

[kakkokari-gtyih]

boot.js

embed画面では追加CSS読み込んで単に非表示にするだけでよさそう？（boot.jsをいじるとめんどくさそうなので）

[kakkokari-gtyih]

WebSocketを無効にするのが難しそう

[kakkokari-gtyih]

boot.js

embed画面では追加CSS読み込んで単に非表示にするだけでよさそう？（boot.jsをいじるとめんどくさそうなので）

そうした

[kakkokari-gtyih]

右上にサーバーアイコン出すやつやりたいけど構造的にしんどそう（MkNoteSubとかがあると余計）

[kakkokari-gtyih]

右上にサーバーアイコン出すやつやりたいけど構造的にしんどそう

MkNoteDetailedをこねこねしてなんとかした

[kakkokari-gtyih]

[kakkokari-gtyih]

埋め込みコードジェネレーターのフロントエンド側実装のうち詳細設定（パラメータをGUIで設定してプレビューするやつ）の部分については最悪Misskey Hubにドキュメント置いておくのでもいいかもしれない

あとWebSocketに繋ぐのは無駄そう

No Websocket モード #12227 については私では生半可にいじるとまずいかもしれないので @syuilo さんとかにやっていただきたい気持ち

[kakkokari-gtyih]

埋め込みコードの仕様が変わったときのことを考えてサーバーからサイズ調整用JSを配信するのが良いのかなと思ったりした
Mastodonはそうやってるっぽい

<iframe src="https://mastodon.social/@superdiey/112568890847967947/embed" class="mastodon-embed" style="max-width: 100%; border: 0" width="400" allowfullscreen="allowfullscreen"></iframe>
<script src="https://mastodon.social/embed.js" async="async"></script>

[syuilo]

embed-bootを作った方が良さそう

[kakkokari-gtyih]

embed_boot.tsを作ってエントリーポイントごと分けるということ？それともsub-bootとかの並列で処理を分けたほうがいいということ？

[syuilo]

前者だわね

[kakkokari-gtyih]

done

[kakkokari-gtyih]

エントリーポイント分けたらサーバーサイドdevモードでHMRが効かなくなった

キャッシュ消したらいけた

[kakkokari-gtyih]

だいたいできてきたのでここいらでまわりの人の意見を聞きたい

現時点での懸案事項

① iframeサイズ調整用のscriptをどうするか
将来的にiframe埋め込み時の通信の構造を変更するかもしれないことを考えると、制御用コードを直で置くのではなく、サーバーから親ページ用のコードを読み込ませる方式のほうが良いんじゃないかとも思っている（詳細→ #13929 (comment) ）

② websocketを切る
（やろうとしたけど結構根が深そうだった＋別件でNo Websocketモードが提案されていた）ので @syuilo さんあたりにちゃんとやってもらいたい気持ち

③ 他の埋め込みウィジェット
募集中

[kakkokari-gtyih]

frontend-embedとfrontend-sharedに対してCIがないかも
（たぶんeslintだけでいいとおもう）

[kakkokari-gtyih]

frontend-sharedがそもそもlintできてない・・・

[kakkokari-gtyih]

frontend-sharedがそもそもlintできてない・・・

Error while loading rule '@typescript-eslint/no-unnecessary-condition': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.

[syuilo]

マージするぞ

[kakkokari-gtyih]

frontend-sharedがそもそもlintできてない・・・

Error while loading rule '@typescript-eslint/no-unnecessary-condition': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.

これなおしたいけど謎

[syuilo]

謎

[kakkokari-gtyih]

直った可能性がある

[syuilo]

🙏🏻🙏🏻🙏🏻

[syuilo]

@kakkokari-gtyih 戻した分のPRを作ってもらうことできるかしら

[kakkokari-gtyih]

@kakkokari-gtyih 戻した分のPRを作ってもらうことできるかしら

ちょっと時間かかるかもしれないけどやっておく

[syuilo]

@kakkokari-gtyih 戻した分のPRを作ってもらうことできるかしら

ちょっと時間かかるかもしれないけどやっておく

これもう着手されてるかしら

[kakkokari-gtyih]

@kakkokari-gtyih 戻した分のPRを作ってもらうことできるかしら

ちょっと時間かかるかもしれないけどやっておく

これもう着手されてるかしら

まだかも

[kakkokari-gtyih]

@kakkokari-gtyih 戻した分のPRを作ってもらうことできるかしら

#14546