bootstrap5-rails-extensions 0.2.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e04b08a7e1e9691990f85d877250fbb94a0751b7764a72ab8a6370d5e7dd7968
-  data.tar.gz: '0383ce0e398470e76959a5ae9f279988fb9e215754ffafc1c20c2c391f060d5a'
+  metadata.gz: 30a517635c440866d05eda8f9f78979f717adde81302f6eb1b3b66c22b1af387
+  data.tar.gz: 0d48465a221310005e798f3cde5eb6bd39056f648e2bc7f223006276612dd63d
 SHA512:
-  metadata.gz: 9237559c9d82078e8fc47f1b9594c19b858e724affde377b55701a22ea08b959f5f45c49a401fd9a5c322ccd5d48e8d366c87f92a75e05ed4e926471762c4165
-  data.tar.gz: 123846d9a8dbe4e505e29fe6e8928c8aaeb1ca464b2447e6f7b657f7d805c03956b2534494f60b9e9df93cfd09a4dd4cab9f0ff7a6b30bb273c92587d5c7cf89
+  metadata.gz: 3b34f3cac3a7ad697339af4fd3b26d39d237c5d8bc4773ae541241149aae114b52155efd9fc9a11cc56371785d72f955f741f41f4fbbd40a13c43752971c91b2
+  data.tar.gz: 36dcccba7e84efb6245546fca6f344b42cab12b3203ab8df51c30dda285436661e345dca139d02179cbd9d79f6dfa6e2eda6e8248e31967d58ad5e21d472baf0

data/CHANGELOG.md

@@ -1,8 +1,8 @@
 # CHANGELOG
 
-## 0.2.0 - 2025-10-06
-- Stimulusアプリケーションへコントローラーをまとめて登録する`registerBootstrap5Controllers`を追加しました。
-- バージョン番号を0.2.0に更新しました。
+## 0.3.0 - 2025-10-06
+- StimulusコントローラをGemから切り離し、npmパッケージ`bootstrap5-rails-extensions-js`として提供するようにしました。
+- 利用者は各コントローラを直接`application.register`で登録する構成に変更しました。
 
 ## 0.1.1
 - 初期リリースです。

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    bootstrap5-rails-extensions (0.2.0)
+    bootstrap5-rails-extensions (0.3.0)
       rails (>= 8.0)
 
 GEM

data/README.md

@@ -1,6 +1,6 @@
 # Bootstrap5 Rails Extensions（Rails Engine）
 
-RailsアプリケーションでBootstrap 5をTurbo/Stimulusと併用しやすくするための拡張を提供します。モーダルやオフキャンバス、カード、テーブル、トースト向けのDSLヘルパーと、対応するStimulusコントローラを同梱しています。
+RailsアプリケーションでBootstrap 5をTurbo/Stimulusと併用しやすくするための拡張を提供します。モーダルやオフキャンバス、カード、テーブル、トースト向けのDSLヘルパーと、対応するStimulusコントローラを別途配布するnpmパッケージと連携して利用します。
 
 ## インストール
 
@@ -16,11 +16,12 @@ gem "bootstrap5-rails-extensions"
 
 ### Stimulusコントローラの登録
 
-Importmapをご利用の場合は、エンジンが提供するコントローラ群をpinしてください。
+Stimulusコントローラは npm パッケージ `bootstrap5-rails-extensions-js` から提供します。あらかじめインストールしてください。
 
-```ruby
-# config/importmap.rb
-pin_all_from "bootstrap5_rails_extensions", under: "bootstrap5_rails_extensions"
+```bash
+npm install bootstrap5-rails-extensions-js
+# または
+yarn add bootstrap5-rails-extensions-js
 ```
 
 Stimulusアプリケーションへの登録例です。
@@ -28,14 +29,20 @@ Stimulusアプリケーションへの登録例です。
 ```javascript
 // app/javascript/controllers/index.js
 import { application } from "./application"
-import { registerBootstrap5Controllers } from "bootstrap5_rails_extensions"
-
-registerBootstrap5Controllers(application)
+import {
+  ModalController,
+  OffcanvasController,
+  ToastController,
+} from "bootstrap5-rails-extensions-js"
+
+application.register("modal", ModalController)
+application.register("offcanvas", OffcanvasController)
+application.register("toast", ToastController)
 ```
 
-オプションで`registerBootstrap5Controllers`の第2引数に`{ modal: CustomModalController }`のようなハッシュを渡すと、任意のコントローラーで上書きを行えます。ESBuildやViteなどのバンドラをご利用の場合も同様に読み込んでください。
+必要なコントローラーのみを選択的にインポートし、任意の識別子で`application.register`を呼び出すことも可能です。
 
-個別に登録したい場合は、従来どおり各コントローラーをインポートした上で`application.register`を呼び出してください。
+Importmapをご利用の場合は、`./bin/importmap pin bootstrap5-rails-extensions-js` を実行した上で同様に読み込んでください。
 
 ### トースト用コンテナの設置
 

data/lib/bootstrap5_rails_extensions/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Bootstrap5RailsExtensions
-  VERSION = "0.2.0"
+  VERSION = "0.3.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: bootstrap5-rails-extensions
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.3.0
 platform: ruby
 authors:
 - Dreaw Inc.
@@ -44,10 +44,6 @@ files:
 - app/helpers/bootstrap5_rails_extensions/offcanvas_helper.rb
 - app/helpers/bootstrap5_rails_extensions/table_helper.rb
 - app/helpers/bootstrap5_rails_extensions/toast_helper.rb
-- app/javascript/bootstrap5_rails_extensions/index.js
-- app/javascript/bootstrap5_rails_extensions/modal_controller.js
-- app/javascript/bootstrap5_rails_extensions/offcanvas_controller.js
-- app/javascript/bootstrap5_rails_extensions/toast_controller.js
 - app/views/bootstrap5_rails_extensions/_modal.html.erb
 - app/views/bootstrap5_rails_extensions/_offcanvas.html.erb
 - app/views/bootstrap5_rails_extensions/_toast.html.erb

data/app/javascript/bootstrap5_rails_extensions/index.js

@@ -1,27 +0,0 @@
-import ModalController from "./modal_controller"
-import OffcanvasController from "./offcanvas_controller"
-import ToastController from "./toast_controller"
-
-const defaultControllers = {
-  modal: ModalController,
-  offcanvas: OffcanvasController,
-  toast: ToastController,
-}
-
-// Stimulusアプリケーションへ本Gemのコントローラーをまとめて登録する
-export function registerBootstrap5Controllers(application, controllers = {}) {
-  if (!application) {
-    throw new Error("Stimulusアプリケーションが未指定です。")
-  }
-
-  const registrationMap = { ...defaultControllers, ...controllers }
-
-  Object.entries(registrationMap).forEach(([identifier, controller]) => {
-    const alreadyRegistered = application.router?.modulesByIdentifier?.has?.(identifier)
-    if (alreadyRegistered) return
-
-    application.register(identifier, controller)
-  })
-}
-
-export { ModalController, OffcanvasController, ToastController }

data/app/javascript/bootstrap5_rails_extensions/modal_controller.js

@@ -1,88 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-import { Modal } from "bootstrap"
-
-// Stimulusコントローラー（Bootstrap.Modalの薄いラッパー）
-//
-// 目的:
-// - 画面上の任意のトリガーで、モーダルのオープンとTurbo Frameの読み込みを同時に制御する
-// 契約:
-// - トリガー属性：
-//     data-modal-target="#modalId"         // 開きたいモーダルのセレクタ（必須）
-//     data-turbo-frame="frameId"           // Turbo FrameのID（指定時はTurboに任せて読み込み）
-//     href                                 // 読み込むURL（任意。未指定ならフレーム読み込みはスキップ）
-// 備考:
-// - Bootstrapのdata APIと競合させないため、documentのcapture段階で先取りして手動でshow()する
-export default class extends Controller {
-  static targets = ["form"]
-
-  connect() {
-    // この要素自身のモーダルインスタンスを確保
-    this.modal = Modal.getOrCreateInstance(this.element)
-
-    // 委譲クリックでモーダルを開き、必要ならFrameへ読み込み
-    // data-modal-target が付いた要素のクリックをフック
-    this.handleDelegatedClick = (event) => {
-      const trigger = event.target?.closest?.('[data-modal-target]')
-      if (!trigger) return
-
-      // 修飾クリックや既に処理済みはスキップ
-      if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return
-
-      const targetSelector = trigger.getAttribute('data-modal-target')
-      if (!targetSelector) return
-
-      const targetEl = document.querySelector(targetSelector)
-      if (!targetEl) return
-      // 自身が対象モーダルでなければ無視（複数モーダルが同時に存在する場合の重複実行を防止）
-      if (targetEl !== this.element) return
-
-      // モーダルをプログラムで開く
-      this.modal.show()
-    }
-    // captureでBootstrapのdata APIより先に処理する
-    document.addEventListener('click', this.handleDelegatedClick, true)
-
-  }
-
-  disconnect() {
-    document.removeEventListener('click', this.handleDelegatedClick, true)
-    if (this.modal) {
-      this.modal.hide()
-      this.modal.dispose()
-      this.modal = null
-    }
-  }
-
-  // 手動制御用のアクション
-  open() { this.modal?.show() }
-  hide(event) {
-    // Turboイベント以外（クリックなど detail が number）のケースはそのまま閉じる
-    if (!event?.detail || typeof event.detail === 'number') {
-      this.modal?.hide()
-      return
-    }
-
-    // Turbo submit で失敗 (422) した場合のみ閉じない
-    if (event.detail.success === false) return
-
-    this.modal?.hide()
-  }
-  toggle() { this.modal?.toggle() }
-
-  formSubmit(event) {
-    event?.preventDefault()
-
-    const form = this.hasFormTarget ? this.formTarget : this.element.querySelector("form")
-
-    if (!form) {
-      console.warn("[modal] フォームが見つかりませんでした。")
-      return
-    }
-
-    if (typeof form.requestSubmit === "function") {
-      form.requestSubmit()
-    } else {
-      form.submit()
-    }
-  }
-}

data/app/javascript/bootstrap5_rails_extensions/offcanvas_controller.js

@@ -1,62 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-import { Offcanvas } from "bootstrap"
-
-// Stimulusコントローラー（Bootstrap.Offcanvasの薄いラッパー）
-//
-// 目的:
-// - 任意のトリガークリックで「オフキャンバスを開く + Turbo FrameへURLを読み込む」を同時に行う
-// 契約:
-// - トリガー属性：
-//     data-offcanvas-target="#offcanvasId"  // 開きたいOffcanvasのセレクタ（必須）
-//     data-turbo-frame="frameId"            // Turbo FrameのID（指定時はTurboに任せて読み込み）
-//     href                                   // 読み込むURL（任意。未指定ならフレーム読み込みはスキップ）
-// 備考:
-// - Bootstrapのdata APIと競合させないため、documentのcapture段階で先取りして手動でshow()する
-
-export default class extends Controller {
-
-  connect() {
-    this.offcanvas = Offcanvas.getOrCreateInstance(this.element)
-
-    // 委譲クリックでオープン＋Frame読み込み
-    this.handleDelegatedClick = (event) => {
-      const trigger = event.target?.closest?.('[data-offcanvas-target]')
-      if (!trigger) return
-
-      // 修飾クリック等はスキップ
-      if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return
-
-      const targetSelector = trigger.getAttribute('data-offcanvas-target')
-      if (!targetSelector) return
-
-      const targetEl = document.querySelector(targetSelector)
-      if (!targetEl) return
-      // 自分のOffcanvas以外宛は無視
-      if (targetEl !== this.element) return
-
-      // 開く
-      this.offcanvas.show()
-    }
-    document.addEventListener('click', this.handleDelegatedClick, true)
-
-  }
-
-  disconnect() {
-    document.removeEventListener('click', this.handleDelegatedClick, true)
-    if (this.offcanvas) {
-      this.offcanvas.hide()
-      this.offcanvas.dispose()
-      this.offcanvas = null
-    }
-  }
-
-  open() { this.offcanvas?.show() }
-  hide(event) { 
-    // Turboイベント以外（クリックなど detail が number）のケースはそのまま閉じる
-    if (!event?.detail || typeof event.detail === 'number') {
-      this.modal?.hide()
-      return
-    }
-  }
-  toggle() { this.offcanvas?.toggle() }
-}

data/app/javascript/bootstrap5_rails_extensions/toast_controller.js

@@ -1,31 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-import { Toast } from "bootstrap"
-
-// 単一トースト要素用のシンプルなコントローラー
-// 要素自体（.toast）がターゲット。接続時に即showする。
-export default class extends Controller {
-  static values = {
-    delay: { type: Number, default: 4000 },
-    autohide: { type: Boolean, default: true },
-  }
-
-  connect() {
-    this.toast = Toast.getOrCreateInstance(this.element, {
-      autohide: this.autohideValue,
-      delay: this.delayValue,
-    })
-    this.toast.show()
-
-    // Turboキャッシュ前に破棄
-    this.beforeCache = () => {
-      try { this.toast?.hide(); this.toast?.dispose() } catch (_) {}
-    }
-    document.addEventListener("turbo:before-cache", this.beforeCache)
-  }
-
-  disconnect() {
-    document.removeEventListener("turbo:before-cache", this.beforeCache)
-    try { this.toast?.hide(); this.toast?.dispose() } catch (_) {}
-    this.toast = null
-  }
-}