Bootstrap5のPopoversが微妙なので少し頑張った

Popovers (ポップオーバー) · Bootstrap v5.0 https://getbootstrap.jp/docs/5.0/components/popovers/

を使おうとしていたのですが、期待する動作にならずに少し困っていました。 

具体的には

data-bs-trigger というオプションが用意されていて、 click、hover、foucs 時にpopoverが発動するようになっています。

やりたいこと

  • リンクのhoverとclick時にpopoverを表示
  • popoverに表示された内容をコピペできる
  • popover以外をクリックするとpopoverを非表示にする

上記なのですが、デフォルトのoptionでは対応できないようでした。

問題点

hoverは欲しいので、これは入れる前提で、他のoptionを組み合わせてみると、以下の問題が発生していました。

data-bs-trigger 問題点
hover focus popoverをコピペしようとするとpopoverが消えてしまう
hover click popoverのコピペはできるけど、popoverを消すために、リンクを再度クリックしないといけない

対応方法

hover clickを採用しつつ、mouseup時のtargetの要素を見て、popoverの外側をクリックしていたらpopoverを消すという対応を入れました。

document.addEventListener("mouseup", (event) => {
  const popoverElm = document.getElementsByClassName("popover")[0]
  if (popoverElm) {
    const target = event.target
    const isPopoverInsideClicked = target.closest(".popover")
    if (!isPopoverInsideClicked) {
      bootstrap.Popover.getInstance(popoverElm).hide()
    }
  }
});

jsfiddle

改良版はコメント外すと動きます。

vscodeのsnippetでrubyのクラスをファイル名を元に自動でセットする

確かatomではrubyのsnippetを使ってクラスを書くときに、ファイル名から自動で生成してくれたと思うのですが、 vscoderuby snippetではクラス名は ClassName 固定でセットされています。
これが煩わしいので、独自のsnippetsを書いて対応しました。

やり方

vscodeのコマンドパレットで snippets と打ち、次に言語選択でrubyを指定すると、 ~/Library/Application Support/Code/User/snippets/ruby.json が生成されます。

   "Class definition from filename": {
        "prefix": "class",
        "body": [
            "class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}",
            "\t$0",
            "end"
        ],

こんな感じのsnippetを定義すればokです。  

foo_bar_baz.rb ファイルでcla と打つと(classと打たなくても、途中まででsuggestionされる) 以下が自動で入力されます。

class FooBarBaz
  
end

メデタシ、メデタシ。

少し解説

参考) vscode-rubyの定義
vscode-ruby/ruby.json at main · rubyide/vscode-ruby

ファイル名

公式ドキュメントに利用可能な変数定義が記載されています。
拡張子は不要なので、 TM_FILENAME_BASE を利用します。
Variables

passcalcase

passcalcaseへの変換ですが、非常にわかりにくいのですが、公式ドキュメントにEBNFで使えると書いています。 要は正規表現にマッチする値に対して、各種変換処理が利用できるとのことです。
Grammar#

おまけ:既存のsnippetsを非表示にする方法

ドキュメントを読んでいて気づいたのですが、不要なsnippetsを非表示にする方法の記載がありました。 Can I remove snippets from IntelliSense?

やり方は、コマンドパレットから Insert Snippetを選んで、 非表示にしたいsnippet名を入力し、非表示アイコンを押すだけ。
 

この情報がどの設定ファイルに書き込まれているのかは不明。 syncの対象になっているかなどは気になるところ。

さよならWebpacker

Rails7で importmap-railsjsbundling-rails という新しいフロントエンドの仕組みが取り入れられました。
 
ここでは詳細は省きますが、以下の3つの技術的な背景があり、これまで利用してきたWebpackerを利用する必要がなくなっていました。

  • ES6 : IEのサポートが終了。ES6が主要ブラウザでサポートされるようになり、トランスパイルが不要。
  • HTTP2 : 多数のファイルをブラウザで受信してもパフォーマンスへの影響は大きくなった。そのため、JSをバンドルする必要がない。
  • import maps : importするモジュールの名前解決する仕組みが策定。chrome系でサポートされ、他のブラウザもshimで利用できる。

突然のさよなら

その日は近い将来やってくるだろうと思っていましたが、

rails commit log流し読み(2022/01/21) - なるようになるブログ を見ていると、

Adds webpacker retired note to the webpacker guide [ci skip]

rails guideのWebpackerの修正です。

guideの先頭にWebpackerは開発終了になった旨説明を追加しています。

との記述が。

github

githubを見ると

ホットモジュールリロードやコードスプリットがなくても大丈夫な場合は、
jsbundling-railsへの切り替えを検討してください

Webpacker5からjsbundling-railsへの移行ガイド が作成されています。

RailsコアチームはWebpackerのv6をリリースしない予定
このリポジトリにある未発表のv6作品をベースにしたShakapackerという新しいgemでその開発ラインを継続中

v6がいつ出るのかと待っていたのですが、結局リリースされずに shakapacker という別gemになるようです。

今までたくさん苦しめられたWebpackerですが、お役御免となり引退となりました。
さよならWebpacker。