swal_rails 0.4.0 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e6239904a339f87b38a7e7c4b0430976d4517ad7595d79d1859e584a688205ff
-  data.tar.gz: 951fb3d414a9f73f55384e2a5e59238e1c01ee31d3d5fe1a50e7237e17d278e1
+  metadata.gz: 958168a17777ae58b1ce198ab3de6df9945942a5065c7311201fc05bd4ee8714
+  data.tar.gz: 756c79ba6c1bf50bf288a934b807ddda9e09a49eb221097092c72ac3f2981c8b
 SHA512:
-  metadata.gz: 10c4ecceed3749e4d1da256ef7a03ea13b3b912af04b146d192d0a56bf2b57bc883190bb114720488c171ad836b70361cddea8e0a575e6afabe9f562a245fcac
-  data.tar.gz: 6cb939e34ca060fd5fd6266acdfee8e18061051ccab4cec66d26d048afd57837a31b5783f467d8a72eae67f0461ff8b4daa76f1c831707e98bbb001ad9eb5f20
+  metadata.gz: aa8b8b60bb0e2c37cd2669d5dbaaa1e14ccbd3c342f97496679b2829294a050be7250ef131bc2d94cb9d469a51daf3f71bd838edc949beefb2040cbb086b13b5
+  data.tar.gz: bf4db27a6c234df8aec4e881c99c67578cf575a3c6fdd53092f7f1e827ce01354c2334d677919159cf31a09e2ecc821193cf78f7438409bb89fdcd1e8c71544b

data/CHANGELOG.md

@@ -6,6 +6,43 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.5.0] - 2026-05-27
+
+### Added
+- **npm companion package** (`swal_rails` on npm). The install generator now runs
+  `yarn add swal_rails@<version>` (or `npm install`) in jsbundling mode, placing
+  the gem's JS runtime in `node_modules/swal_rails` so esbuild / webpack / vite
+  can resolve `import "swal_rails"` as a bare specifier — with no bundler
+  config required. All sub-paths (`swal_rails/confirm`, `/flash`, `/chain`,
+  `/controllers/swal_controller`) are covered via the package `exports` map.
+  Closes [#24](https://github.com/Metalzoid/swal_rails/issues/24).
+- **`rake npm:sync`** — copies JS files from `app/assets/javascripts/swal_rails/`
+  into `npm/` and bumps `npm/package.json` version to match `SwalRails::VERSION`.
+  Run before any npm publish.
+- **`rake npm:publish`** — runs `npm:sync` then `npm publish --access public`.
+- **`_persistent` flash option** — adding `_persistent: true` to a flash entry
+  (via `swal_flash :key, msg, _persistent: true` or directly in `flash_map`)
+  removes the auto-close timer and forces a visible close button, requiring
+  manual dismissal.
+
+### Fixed
+- **Stacked flash clone timing** — `didRender` replaced by `willOpen` + `didOpen`
+  for cloning SA2 popups into the stack container. The previous `timer: 1` could
+  race the `setTimeout(0)` SA2 uses to schedule `didOpen`, leaving slots empty.
+  Timer raised to 50 ms; the original popup is hidden via `willOpen` (opacity 0,
+  pointer-events none) so the clone is the only visible element.
+- **Stacked toast CSS scope** — SA2 scopes element rules under
+  `div:where(.swal2-container)` (zero-specificity `:where()`). Clones rendered
+  outside that container lost color, border-radius, and the close-button layout.
+  Added explicit `div.swal2-popup`, `div.swal2-html-container`, and
+  `button.swal2-close` rules in `index.css` that apply regardless of scope.
+- **`install_jsbundling` generator** — previously only installed `sweetalert2`;
+  now also installs `swal_rails` from the npm registry.
+
+### Changed
+- Release workflow (`.github/workflows/release.yml`) auto-publishes the npm
+  package after every gem push via the `NPM_TOKEN` repository secret.
+
 ## [0.4.0] - 2026-05-03
 
 ### Added

data/README.md

@@ -285,6 +285,19 @@ Signature: `swal_flash(key, messages, mode: nil, delay: nil, now: false, **optio
 `_stackDelay` meta-keys, extracted by the JS runtime before the options are
 handed to `Swal.fire` — they never leak into SA2.
 
+#### Persistent (non-auto-closing) entries
+
+Pass `_persistent: true` to any `swal_flash` call — or add it directly to a
+`flash_map` entry — to remove the auto-close timer and force a visible close
+button, requiring the user to dismiss manually:
+
+```ruby
+swal_flash :alert, "Your session will expire soon.", _persistent: true
+```
+
+The runtime strips `_persistent` before calling `Swal.fire`, then deletes
+`timer` / `timerProgressBar` and sets `showCloseButton: true` on the item.
+
 Behind the scenes, the engine serializes the flash into a meta tag
 (`<meta name="swal-flash" content="...">`) and the JS runtime reads it and
 calls `Swal.fire(...)` with your per-key options.
@@ -765,7 +778,7 @@ Flash entries are `{ key: "notice", options: { text: "..." } }` for string value
 Per-mode side effects:
 
 - **importmap**: appends `pin "sweetalert2", to: "sweetalert2.esm.all.js"` and `pin "swal_rails", to: "swal_rails/index.js"` to `config/importmap.rb`; appends `import "swal_rails"` to `app/javascript/application.js`.
-- **jsbundling**: runs `yarn add sweetalert2@<pinned>` or `npm install sweetalert2@<pinned>` (based on the lockfile present); appends `import "swal_rails"` to `app/javascript/application.js`.
+- **jsbundling**: runs `yarn add sweetalert2@<pinned> swal_rails@<version>` or `npm install sweetalert2@<pinned> swal_rails@<version>` (based on the lockfile present); appends `import "swal_rails"` to `app/javascript/application.js`. The `swal_rails` npm package ships the same JS runtime as the gem, making the bare specifier `import "swal_rails"` resolvable by any bundler (esbuild, webpack, vite, rollup) without additional configuration.
 - **sprockets**: appends `//= link sweetalert2.js` and `//= link sweetalert2.css` to `app/assets/config/manifest.js`.
 
 All append operations are idempotent — running the generator twice is safe.
@@ -948,7 +961,7 @@ right template automatically.
 └──────────────────────────────────────────────────────────────────────┘
 
 ┌─ jsbundling (esbuild / vite / rollup) ───────────────────────────────┐
-│   package.json  →  "sweetalert2": "^11"  (your bundler resolves it)  │
+│   package.json  →  "sweetalert2": "^11", "swal_rails": "^0.5"        │
 │   app/javascript/application.js                                      │
 │     import "swal_rails"                                              │
 └──────────────────────────────────────────────────────────────────────┘

data/Rakefile

@@ -10,3 +10,42 @@ require "rubocop/rake_task"
 RuboCop::RakeTask.new
 
 task default: %i[spec rubocop]
+
+# ---------------------------------------------------------------------------
+# npm companion package tasks
+# ---------------------------------------------------------------------------
+require "fileutils"
+require "json"
+
+NPM_JS_SRC  = "app/assets/javascripts/swal_rails"
+NPM_JS_DEST = "npm"
+
+def npm_sync_files
+  require_relative "lib/swal_rails/version"
+
+  Dir.glob("#{NPM_JS_SRC}/**/*.js").each do |src|
+    rel  = src.sub("#{NPM_JS_SRC}/", "")
+    dest = "#{NPM_JS_DEST}/#{rel}"
+    FileUtils.mkdir_p(File.dirname(dest))
+    FileUtils.cp(src, dest)
+    puts "  synced #{rel}"
+  end
+
+  pkg_path = "#{NPM_JS_DEST}/package.json"
+  pkg = JSON.parse(File.read(pkg_path))
+  pkg["version"] = SwalRails::VERSION
+  File.write(pkg_path, "#{JSON.pretty_generate(pkg)}\n")
+  puts "  version → #{SwalRails::VERSION}"
+end
+
+namespace :npm do
+  desc "Sync JS files from #{NPM_JS_SRC}/ → #{NPM_JS_DEST}/ and bump version in package.json"
+  task(:sync) { npm_sync_files }
+
+  desc "Publish npm package to registry (runs npm:sync first)"
+  task publish: :sync do
+    Dir.chdir(NPM_JS_DEST) do
+      system("npm publish --access public") || abort("npm publish failed")
+    end
+  end
+end

data/app/assets/javascripts/swal_rails/flash.js

@@ -29,6 +29,18 @@ const extractMeta = (queue) => {
   return { mode, delay };
 };
 
+// Per-item: _persistent removes the auto-close timer and ensures the user
+// must dismiss manually via the close button.
+const applyPersistent = (queue) => {
+  for (const item of queue) {
+    if (!item._persistent) continue;
+    delete item._persistent;
+    delete item.timer;
+    delete item.timerProgressBar;
+    item.showCloseButton = true;
+  }
+};
+
 const STACK_ID = "swal-rails-stack";
 
 const ensureStackContainer = () => {
@@ -85,42 +97,36 @@ const fireStacked = async (Swal, queue, delay) => {
       Swal.fire({
         ...opts,
         toast: true,
-        // Close the SA2 original immediately; the clone in `slot` persists.
-        // Animations disabled on the decoy so the clone captures the popup
-        // in its normal "shown" state (no opacity-0 from close transition).
-        timer: 1,
         timerProgressBar: false,
         showClass: { popup: "", backdrop: "", icon: "" },
         hideClass: { popup: "", backdrop: "", icon: "" },
-        didRender: (popup) => {
+        // timer:1 races with the setTimeout(0) SA2 uses to schedule didOpen
+        // when animations are disabled — didOpen can lose that race and never
+        // fire, leaving the slot empty. 50 ms gives the event loop a safe
+        // margin while remaining imperceptible to the user.
+        timer: 50,
+        // Suppress the SA2 original so only our clone in the stack is visible.
+        willOpen: (popup) => {
+          popup.style.opacity = "0";
+          popup.style.pointerEvents = "none";
+        },
+        // Clone at didOpen: SA2 has applied all inline styles at this point
+        // (display:grid, icon classes, close-button grid placement, etc.),
+        // so the clone requires no manual fixups.
+        didOpen: (popup) => {
           const clone = popup.cloneNode(true);
+          // willOpen set opacity:0 on the original; clear it on the clone.
           clone.style.opacity = "";
-          // SA2 only flips `popup.style.display` to `grid` at didOpen. We
-          // clone at didRender — earlier in the lifecycle — so the inline
-          // display is missing. Outside SA2's `.swal2-container` the toast
-          // therefore falls back to `display: block`, which collapses the
-          // grid layout (`.swal2-toast { grid-template-columns: … }`) and
-          // ends up rendering icon/title/content stacked vertically — the
-          // "vachement haute" symptom of stacked flashes.
-          clone.style.display = "grid";
           clone
             .querySelectorAll(".swal2-timer-progress-bar-container")
             .forEach((e) => e.remove());
-          // SA2 adds `.swal2-icon-show` only after didOpen, but we clone
-          // earlier (in didRender) to beat the close animation. Apply it
-          // manually so the icon's SVG is visibly drawn in the clone.
-          clone
-            .querySelectorAll(".swal2-icon")
-            .forEach((icon) => icon.classList.add("swal2-icon-show"));
           slot.appendChild(clone);
           const dismiss = () => {
             if (slot.isConnected) slot.remove();
             if (stack.isConnected && stack.children.length === 0)
               stack.remove();
           };
-          clone
-            .querySelector(".swal2-close")
-            ?.addEventListener("click", dismiss);
+          clone.querySelector(".swal2-close")?.addEventListener("click", dismiss);
           if (timerMs) setTimeout(dismiss, timerMs);
         },
         didClose: () => resolve(),
@@ -151,6 +157,7 @@ export const installFlash = (Swal, config) => {
   });
 
   const meta = extractMeta(queue);
+  applyPersistent(queue);
   const mode = meta.mode || config.flashArrayMode || "sequential";
   const delay =
     meta.delay != null

data/app/assets/stylesheets/swal_rails/index.css

@@ -3,3 +3,51 @@
  * Imports the vendored SweetAlert2 CSS; override variables in your own stylesheet.
  */
 @import "sweetalert2.css";
+
+/*
+ * SA2 scopes all element styles under `div:where(.swal2-container)` for CSS
+ * isolation (zero-specificity :where() = easy to override, but only inside the
+ * container). This breaks stacked-toast clones that live outside that scope.
+ *
+ * Fix: re-declare the affected rules without the container ancestor. Our
+ * selectors have higher specificity than SA2's :where()-based ones, so they
+ * win everywhere — values are identical for native popups, so no regression.
+ * Risk of page pollution is near-zero: .swal2-* class names are distinctive.
+ */
+div.swal2-popup {
+  color: var(--swal2-color);
+  font-size: 1rem;
+  border-radius: var(--swal2-border-radius);
+  container-name: swal2-popup;
+}
+div.swal2-html-container {
+  color: inherit;
+  font-weight: normal;
+  line-height: normal;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  cursor: initial;
+}
+button.swal2-close {
+  z-index: 2;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  overflow: hidden;
+  transition: var(--swal2-close-button-transition);
+  border: none;
+  border-radius: var(--swal2-border-radius);
+  outline: var(--swal2-close-button-outline);
+  background: transparent;
+  color: var(--swal2-close-button-color);
+  font-family: monospace;
+  cursor: pointer;
+}
+button.swal2-close:hover {
+  background: transparent;
+  color: #f27474;
+}
+button.swal2-close:focus-visible {
+  outline: none;
+  box-shadow: var(--swal2-close-button-focus-box-shadow);
+}

data/lib/generators/swal_rails/install/install_generator.rb

@@ -99,8 +99,13 @@ module SwalRails
 
       def install_jsbundling
         if file_exists?("package.json")
-          run "yarn add sweetalert2@#{SwalRails::SWEETALERT2_VERSION}" if file_exists?("yarn.lock")
-          run "npm install sweetalert2@#{SwalRails::SWEETALERT2_VERSION}" if file_exists?("package-lock.json") && !file_exists?("yarn.lock")
+          if file_exists?("yarn.lock")
+            run "yarn add sweetalert2@#{SwalRails::SWEETALERT2_VERSION}"
+            run "yarn add swal_rails@#{SwalRails::VERSION}"
+          elsif file_exists?("package-lock.json")
+            run "npm install sweetalert2@#{SwalRails::SWEETALERT2_VERSION}"
+            run "npm install swal_rails@#{SwalRails::VERSION}"
+          end
         else
           say_status(:warn, "package.json not found", :yellow)
         end

data/lib/swal_rails/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module SwalRails
-  VERSION = "0.4.0"
+  VERSION = "0.5.0"
   SWEETALERT2_VERSION = "11.26.24"
 end

data/npm/chain.js

@@ -0,0 +1,60 @@
+// Runs a sequence of SweetAlert2 modals, advancing only on confirm.
+//
+// Semantics (per step):
+//   - isDismissed → abort the chain, return false
+//   - isConfirmed → run onConfirmed sub-chain if present, else continue
+//   - isDenied    → run onDenied sub-chain if present, else abort
+//
+// A chain resolves to `true` iff it ran to completion along a path without
+// abort. That boolean is the contract expected by Turbo.setConfirmMethod
+// and by the data-attribute re-dispatch logic in confirm.js.
+export const CHAIN_DEFAULTS = {
+  showCancelButton: true,
+  focusCancel: true,
+  icon: "warning"
+}
+
+// JSON-delivered steps cannot ship functions (e.g. inputValidator).
+// `inputExpected` provides a declarative guard for typed confirmations.
+const normalizeStep = (step) => {
+  const {
+    onConfirmed,
+    onDenied,
+    inputExpected,
+    inputExpectedError,
+    ...sa2Options
+  } = step || {}
+
+  if (typeof inputExpected === "string") {
+    const expected = inputExpected
+    const error = inputExpectedError || `Type "${expected}" to continue`
+    sa2Options.inputValidator = (value) => (
+      (value || "").trim() === expected ? undefined : error
+    )
+  }
+
+  return { onConfirmed, onDenied, sa2Options }
+}
+
+export const chainDialogs = async (Swal, steps) => {
+  if (!Array.isArray(steps) || steps.length === 0) return true
+
+  for (const step of steps) {
+    // Strip our own control keys — SA2 ignores unknown options, but leaking
+    // `onConfirmed`/`onDenied` into the popup options keeps the serialized
+    // payload noisy and invites confusion.
+    const { onConfirmed, onDenied, sa2Options } = normalizeStep(step)
+    const result = await Swal.fire({ ...CHAIN_DEFAULTS, ...sa2Options })
+
+    if (result.isDismissed) return false
+    if (result.isConfirmed) {
+      if (Array.isArray(onConfirmed)) return chainDialogs(Swal, onConfirmed)
+      continue
+    }
+    if (result.isDenied) {
+      if (Array.isArray(onDenied)) return chainDialogs(Swal, onDenied)
+      return false
+    }
+  }
+  return true
+}

data/npm/confirm.js

@@ -0,0 +1,103 @@
+import { chainDialogs } from "swal_rails/chain"
+
+const parseJSON = (value) => {
+  if (!value) return null
+  try { return JSON.parse(value) } catch { return null }
+}
+
+// When Rails serializes `data: { turbo_confirm: { icon: "error" } }`, the
+// attribute value is a JSON string. Detect that, and accept both Object
+// (single-step options) and Array (multi-step chain) shapes.
+const messagePayload = (message) => {
+  if (typeof message !== "string") return null
+  const trimmed = message.trim()
+  if (trimmed[0] !== "{" && trimmed[0] !== "[") return null
+  const parsed = parseJSON(trimmed)
+  if (Array.isArray(parsed)) return parsed
+  if (parsed && typeof parsed === "object") return parsed
+  return null
+}
+
+const confirmDialog = (Swal, message, element) => {
+  const dataset = element?.dataset || {}
+  const payload = messagePayload(message)
+  const fromMessage = payload && !Array.isArray(payload) ? payload : null
+  const text = fromMessage ? undefined : message
+
+  const options = {
+    title: dataset.swalTitle || text || "Are you sure?",
+    text: dataset.swalText || (dataset.swalTitle ? text : undefined),
+    icon: dataset.swalIcon || "warning",
+    showCancelButton: true,
+    focusCancel: true
+  }
+  if (dataset.swalConfirmText) options.confirmButtonText = dataset.swalConfirmText
+  if (dataset.swalCancelText) options.cancelButtonText = dataset.swalCancelText
+
+  // Merge order (later wins): defaults → data-swal-* shortcuts → JSON message
+  // (turbo_confirm: {}) → data-swal-options (most specific).
+  const extras = parseJSON(dataset.swalOptions) || {}
+  return Swal.fire({ ...options, ...(fromMessage || {}), ...extras }).then((result) => result.isConfirmed)
+}
+
+// Dispatches to either a multi-step chain or a single-step confirm. Called
+// from both the Turbo override and the data-attribute listener so both
+// paths behave identically.
+const confirmFlow = (Swal, message, element) => {
+  const fromDataset = parseJSON(element?.dataset?.swalSteps)
+  if (Array.isArray(fromDataset) && fromDataset.length) return chainDialogs(Swal, fromDataset)
+
+  const payload = messagePayload(message)
+  if (Array.isArray(payload) && payload.length) return chainDialogs(Swal, payload)
+
+  return confirmDialog(Swal, message, element)
+}
+
+const installTurboOverride = (Swal) => {
+  if (typeof window.Turbo === "undefined") return false
+  const handler = (message, element) => confirmFlow(Swal, message, element)
+  // Turbo 8.1+ renamed the API to `Turbo.config.forms.confirm`. The legacy
+  // `setConfirmMethod` still works but emits a deprecation warning. Prefer
+  // the new path, fall back to the old one for older Turbo versions.
+  if (window.Turbo.config?.forms) {
+    window.Turbo.config.forms.confirm = handler
+    return true
+  }
+  if (typeof window.Turbo.setConfirmMethod === "function") {
+    window.Turbo.setConfirmMethod(handler)
+    return true
+  }
+  return false
+}
+
+const installDataAttribute = (Swal) => {
+  const handler = (event) => {
+    const el = event.target.closest("[data-swal-confirm], [data-swal-steps]")
+    if (!el) return
+    const message = el.getAttribute("data-swal-confirm")
+    event.preventDefault()
+    event.stopPropagation()
+    confirmFlow(Swal, message, el).then((confirmed) => {
+      if (!confirmed) return
+      el.removeAttribute("data-swal-confirm")
+      el.removeAttribute("data-swal-steps")
+      if (typeof el.click === "function" && event.type === "click") {
+        el.click()
+      } else if (el.tagName === "FORM") {
+        // requestSubmit() fires the 'submit' event, so Turbo and any UJS
+        // handlers stay in the loop — unlike the raw .submit() which skips them.
+        if (typeof el.requestSubmit === "function") el.requestSubmit()
+        else el.submit()
+      }
+    })
+  }
+  document.addEventListener("click", handler, true)
+  document.addEventListener("submit", handler, true)
+}
+
+export const installConfirm = (Swal, config) => {
+  const mode = config.confirmMode || "data_attribute"
+  if (mode === "off") return
+  if (mode === "turbo_override" || mode === "both") installTurboOverride(Swal)
+  if (mode === "data_attribute" || mode === "both") installDataAttribute(Swal)
+}

data/npm/controllers/swal_controller.js

@@ -0,0 +1,54 @@
+import { Controller } from "@hotwired/stimulus"
+import Swal from "sweetalert2"
+import { chainDialogs } from "swal_rails/chain"
+
+// Fire a Swal modal/toast or a multi-step chain from markup.
+//
+// <button data-controller="swal"
+//         data-action="click->swal#fire"
+//         data-swal-options-value='{"title":"Hi","icon":"info"}'>
+//   Ping
+// </button>
+//
+// <button data-controller="swal"
+//         data-action="click->swal#chain"
+//         data-swal-steps-value='[{"title":"Sure?"},{"title":"Really?"}]'>
+//   Ping
+// </button>
+export default class extends Controller {
+  static values = {
+    options: { type: Object, default: {} },
+    steps: { type: Array, default: [] }
+  }
+
+  fire(event) {
+    if (this.element.tagName === "A" || this.element.tagName === "BUTTON") {
+      event?.preventDefault?.()
+    }
+    return Swal.fire(this.optionsValue)
+  }
+
+  confirm(event) {
+    event?.preventDefault?.()
+    const form = event?.target?.closest?.("form") || this.element
+    Swal.fire({
+      showCancelButton: true,
+      focusCancel: true,
+      ...this.optionsValue
+    }).then((result) => {
+      if (result.isConfirmed && form?.tagName === "FORM") {
+        typeof form.requestSubmit === "function" ? form.requestSubmit() : form.submit()
+      }
+    })
+  }
+
+  async chain(event) {
+    event?.preventDefault?.()
+    const form = event?.target?.closest?.("form") || this.element
+    const ok = await chainDialogs(window.Swal || Swal, this.stepsValue)
+    if (ok && form?.tagName === "FORM") {
+      typeof form.requestSubmit === "function" ? form.requestSubmit() : form.submit()
+    }
+    return ok
+  }
+}

data/npm/flash.js

@@ -0,0 +1,174 @@
+// Read the meta tag exactly once per page load. Boot() fires on both
+// DOMContentLoaded and turbo:load, so without this guard an array flash
+// would have its fireNext chain launched twice, racing and cascading via
+// Swal.fire's replace-current-popup behavior — only the last message wins.
+const readFlash = () => {
+  const el = document.querySelector('meta[name="swal-flash"]');
+  if (!el || el.dataset.swalConsumed === "1") return [];
+  el.dataset.swalConsumed = "1";
+  try {
+    return JSON.parse(el.getAttribute("content")) || [];
+  } catch {
+    return [];
+  }
+};
+
+// Keys attached by `swal_flash` helper for per-request mode / delay override.
+// Stripped from the options before being passed to Swal.fire so they never
+// leak into SA2.
+const META_KEYS = ["_arrayMode", "_stackDelay"];
+
+const extractMeta = (queue) => {
+  let mode = null;
+  let delay = null;
+  for (const item of queue) {
+    if (mode === null && item._arrayMode) mode = item._arrayMode;
+    if (delay === null && item._stackDelay != null) delay = item._stackDelay;
+    for (const k of META_KEYS) delete item[k];
+  }
+  return { mode, delay };
+};
+
+// Per-item: _persistent removes the auto-close timer and ensures the user
+// must dismiss manually via the close button.
+const applyPersistent = (queue) => {
+  for (const item of queue) {
+    if (!item._persistent) continue;
+    delete item._persistent;
+    delete item.timer;
+    delete item.timerProgressBar;
+    item.showCloseButton = true;
+  }
+};
+
+const STACK_ID = "swal-rails-stack";
+
+const ensureStackContainer = () => {
+  let el = document.getElementById(STACK_ID);
+  if (!el) {
+    el = document.createElement("div");
+    el.id = STACK_ID;
+    // 360px matches SA2's `body.swal2-toast-shown .swal2-container` width;
+    // without it the cloned popups inherit `width: 100%` from SA2 and
+    // visually span the whole screen.
+    el.style.cssText = [
+      "position:fixed",
+      "top:1rem",
+      "right:1rem",
+      "width:360px",
+      "max-width:calc(100vw - 2rem)",
+      "display:flex",
+      "flex-direction:column",
+      "gap:.5rem",
+      "z-index:10000",
+      "pointer-events:none",
+    ].join(";");
+    document.body.appendChild(el);
+  }
+  return el;
+};
+
+const fireSequential = (Swal, queue) => {
+  const fireNext = () => {
+    const opts = queue.shift();
+    if (!opts) return;
+    Swal.fire(opts).then(fireNext);
+  };
+  fireNext();
+};
+
+// SA2 is singleton — two concurrent Swal.fire calls collapse into one
+// popup (the second replaces the first). To stack multiple toasts we let
+// SA2 render each popup, clone it into its own slot, then close the
+// original fast so the next fire is unblocked. The clones live on in our
+// stack with their own timer and click-to-dismiss handlers. Empiler des
+// modales bloquantes n'a pas de sens — on force toast: true.
+const fireStacked = async (Swal, queue, delay) => {
+  const stack = ensureStackContainer();
+  for (let i = 0; i < queue.length; i++) {
+    const opts = queue[i];
+    const slot = document.createElement("div");
+    slot.className = "swal-rails-stack-slot";
+    slot.style.cssText = "width:100%;pointer-events:auto;";
+    stack.appendChild(slot);
+
+    const timerMs = opts.timer;
+    await new Promise((resolve) => {
+      Swal.fire({
+        ...opts,
+        toast: true,
+        timerProgressBar: false,
+        showClass: { popup: "", backdrop: "", icon: "" },
+        hideClass: { popup: "", backdrop: "", icon: "" },
+        // timer:1 races with the setTimeout(0) SA2 uses to schedule didOpen
+        // when animations are disabled — didOpen can lose that race and never
+        // fire, leaving the slot empty. 50 ms gives the event loop a safe
+        // margin while remaining imperceptible to the user.
+        timer: 50,
+        // Suppress the SA2 original so only our clone in the stack is visible.
+        willOpen: (popup) => {
+          popup.style.opacity = "0";
+          popup.style.pointerEvents = "none";
+        },
+        // Clone at didOpen: SA2 has applied all inline styles at this point
+        // (display:grid, icon classes, close-button grid placement, etc.),
+        // so the clone requires no manual fixups.
+        didOpen: (popup) => {
+          const clone = popup.cloneNode(true);
+          // willOpen set opacity:0 on the original; clear it on the clone.
+          clone.style.opacity = "";
+          clone
+            .querySelectorAll(".swal2-timer-progress-bar-container")
+            .forEach((e) => e.remove());
+          slot.appendChild(clone);
+          const dismiss = () => {
+            if (slot.isConnected) slot.remove();
+            if (stack.isConnected && stack.children.length === 0)
+              stack.remove();
+          };
+          clone.querySelector(".swal2-close")?.addEventListener("click", dismiss);
+          if (timerMs) setTimeout(dismiss, timerMs);
+        },
+        didClose: () => resolve(),
+      });
+    });
+
+    if (i < queue.length - 1 && delay > 0) {
+      await new Promise((r) => setTimeout(r, delay));
+    }
+  }
+};
+
+export const installFlash = (Swal, config) => {
+  const flashes = readFlash();
+  if (!flashes.length) return;
+
+  const map = config.flashMap || {};
+  const queue = flashes.map((flash) => {
+    const spec = map[flash.key] ||
+      map[flash.key.toLowerCase()] || {
+        icon: "info",
+        toast: true,
+        position: "top-end",
+        timer: 3000,
+      };
+    // Per-request options win over the per-key defaults from flash_map.
+    return { ...spec, ...(flash.options || {}) };
+  });
+
+  const meta = extractMeta(queue);
+  applyPersistent(queue);
+  const mode = meta.mode || config.flashArrayMode || "sequential";
+  const delay =
+    meta.delay != null
+      ? meta.delay
+      : config.flashStackDelay != null
+        ? config.flashStackDelay
+        : 500;
+
+  if (mode === "stacked" && queue.length > 1) {
+    fireStacked(Swal, queue, delay);
+  } else {
+    fireSequential(Swal, queue);
+  }
+};

data/npm/index.js

@@ -0,0 +1,69 @@
+import Swal from "sweetalert2"
+import { installConfirm } from "swal_rails/confirm"
+import { installFlash } from "swal_rails/flash"
+
+const readMeta = (name) => {
+  const el = document.querySelector(`meta[name="${name}"]`)
+  if (!el) return null
+  try { return JSON.parse(el.getAttribute("content")) } catch { return null }
+}
+
+const prefersReducedMotion = () =>
+  window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches
+
+const buildMixin = (config) => {
+  const base = { ...(config.defaultOptions || {}) }
+  if (config.respectReducedMotion && prefersReducedMotion()) {
+    base.showClass = { popup: "" }
+    base.hideClass = { popup: "" }
+  }
+  if (config.i18n?.confirm_button_text) base.confirmButtonText = config.i18n.confirm_button_text
+  if (config.i18n?.cancel_button_text) base.cancelButtonText = config.i18n.cancel_button_text
+  if (config.i18n?.deny_button_text) base.denyButtonText = config.i18n.deny_button_text
+  if (config.i18n?.close_button_aria_label) base.closeButtonAriaLabel = config.i18n.close_button_aria_label
+  return base
+}
+
+// Module-scoped so repeated calls to boot() (DOMContentLoaded + every
+// turbo:load) don't stack a new click/submit listener per navigation.
+let booted = null
+
+const boot = () => {
+  if (!booted) {
+    const config = readMeta("swal-config") || {}
+    const Mixin = Swal.mixin(buildMixin(config))
+
+    if (config.exposeWindowSwal !== false) {
+      window.Swal = Mixin
+    }
+
+    installConfirm(Mixin, config)
+    booted = { Swal: Mixin, config }
+    document.dispatchEvent(new CustomEvent("swal-rails:ready", { detail: booted }))
+  }
+
+  // Flash meta is re-rendered per request, so read and fire on every page.
+  installFlash(booted.Swal, booted.config)
+  return booted.Swal
+}
+
+const ready = (fn) => {
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", fn, { once: true })
+  } else {
+    fn()
+  }
+}
+
+ready(boot)
+// `turbo:load` covers full Turbo Drive navigations + initial page loads.
+// `turbo:render` additionally covers form submissions that render with
+// a non-redirect status (e.g. 422 unprocessable_entity for `flash.now`)
+// — Turbo replaces the body but does NOT fire turbo:load in that path.
+// The `data-swal-consumed` guard on the meta tag dedupes the double-fire
+// on full navigations where both events run.
+document.addEventListener("turbo:load", boot)
+document.addEventListener("turbo:render", boot)
+
+export { Swal }
+export default Swal

data/npm/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "swal_rails",
+  "version": "0.5.0",
+  "description": "SweetAlert2 for Rails 7+ — batteries included (jsbundling companion)",
+  "type": "module",
+  "main": "index.js",
+  "module": "index.js",
+  "exports": {
+    ".": "./index.js",
+    "./confirm": "./confirm.js",
+    "./flash": "./flash.js",
+    "./chain": "./chain.js",
+    "./controllers/swal_controller": "./controllers/swal_controller.js"
+  },
+  "files": [
+    "*.js",
+    "controllers/"
+  ],
+  "peerDependencies": {
+    "sweetalert2": ">=11.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Metalzoid/swal_rails"
+  },
+  "homepage": "https://github.com/Metalzoid/swal_rails",
+  "bugs": {
+    "url": "https://github.com/Metalzoid/swal_rails/issues"
+  },
+  "license": "MIT",
+  "author": "Florian Gagnaire <gagnaire.flo@gmail.com>",
+  "keywords": [
+    "rails",
+    "sweetalert2",
+    "flash",
+    "confirm",
+    "jsbundling",
+    "esbuild",
+    "webpack",
+    "vite"
+  ]
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: swal_rails
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 0.5.0
 platform: ruby
 authors:
 - Florian Gagnaire
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2026-05-08 00:00:00.000000000 Z
+date: 2026-05-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
@@ -76,6 +76,12 @@ files:
 - lib/swal_rails/helpers.rb
 - lib/swal_rails/initializer_version_check.rb
 - lib/swal_rails/version.rb
+- npm/chain.js
+- npm/confirm.js
+- npm/controllers/swal_controller.js
+- npm/flash.js
+- npm/index.js
+- npm/package.json
 - vendor/javascript/sweetalert2/LICENSE
 - vendor/javascript/sweetalert2/sweetalert2.all.js
 - vendor/javascript/sweetalert2/sweetalert2.all.min.js