OSS活動記 #4 - herb - デバッグモードのoverlay label表示を良しなにする

OSS活動記

対象リポジトリ

github.com

作成したPR（2つ）

キリ番 999 と 1000 をゲットした。やったぜ

github.com

github.com

起きていた問題

reactionviewのデバッグモードで出力するoverlay labelというものがある。

DOMツリーに動的に要素を追加してくれるのだけど少しイケていない感じだったので修正した。

まずoverlay labelを position: absolute で追加するために親要素を位置基準要素にする必要がある。既存の実装では position: relative を設定しているが、

parent.style.position = 'relative';

これだと元々のposition値として absolute , fixed , sticky が設定されているとレイアウト崩れが発生してしまう。 relative であればそもそも設定する必要がないので getComputedStyle() で取得した値が static の時だけ relative 設定すればいいという判断をした。

Window: getComputedStyle() メソッド - Web API | MDN

おそらくこれは実装選択肢の余地がないので気に入らなかったらrejectしてもらうしかないかなって感じでPRをまとめた。

次に、reactionviewのデバッグモードなんだけど実はちゃんと layouts/application.html.erb にもoverlay labelを出力しているがviewportからはみ出していることに気づいた。

Chrome DevToolsでスタイルを弄ったものが右

overlay labelを追加しているならちゃんとviewportに納めたいよねってことでもう一つPRを作成した。ただしこちらに関しては「そもそもCSSでスタイル定義しているのにスクリプトで条件分岐してスタイル上書きするのが実装として散らかってるな〜」と感じている。既存実装にならって条件分岐したがあまり好ましい実装とは思えないのでその部分を質問しつつPRを作成した。

余談: ローカルでの動作検証が面倒くさい

さて、このherbにあるJavaScript部分はテストが用意されていない。Rubyが出力するdebug情報とも密結合しているのでなかなかテストも書きづらいのだろうと勝手に納得しつつ、ローカルでの動作検証が最初どうやればいいか分からなかった。合っているかどうかは分からないけどとりあえず出来た方法を書き残しておく。

$ pwd
/Users/kozy4324/work/reactionview/javascript/packages/dev-tools/src

$ ls -l
total 8
lrwxr-xr-x@ 1 kozy4324  staff    60 12 21 10:27 dev-tools -> /Users/kozy4324/work/herb/javascript/packages/dev-tools/dist
-rw-r--r--@ 1 kozy4324  staff  3493 12 21 10:28 index.ts
  • reactionviewにあるTypeScriptでモジュール読み込み先を変更
$ git diff -- index.ts
diff --git a/javascript/packages/dev-tools/src/index.ts b/javascript/packages/dev-tools/src/index.ts
index 7adf7b7..1f4f558 100644
--- a/javascript/packages/dev-tools/src/index.ts
+++ b/javascript/packages/dev-tools/src/index.ts
@@ -1,4 +1,4 @@
-import { initHerbDevTools, HerbOverlay, type HerbDevToolsOptions } from "@herb-tools/dev-tools"
+import { initHerbDevTools, HerbOverlay, type HerbDevToolsOptions } from "./dev-tools/herb-dev-tools.esm"
 
 export interface ReActionViewDevToolsOptions extends HerbDevToolsOptions {
   projectPath?: string
  • reactionviewで yarn build
  • RailsアプリケーションのGemfile修正して bundle install
$ git diff -- Gemfile
diff --git a/Gemfile b/Gemfile
index 6052a88..02334ee 100644
--- a/Gemfile
+++ b/Gemfile
@@ -66,7 +66,7 @@ group :test do
 end
 
 
-gem "reactionview", "~> 0.2.0"
+gem "reactionview", path: "/Users/kozy4324/work/reactionview"
 
 gem "tailwindcss-rails", "~> 4.3"

とやることで解決した。どう考えても面倒くさすぎる。ここら辺の正しいやり方を確認しておきたい。