feat: add data-turbo-cache="false" to prevent snapshot

php-flasher · Nov 20, 2022 · 607c82c · 607c82c
1 parent c809d9a
commit 607c82c
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 12 deletions.
diff --git a/packages/flasher/src/flasher.ts b/packages/flasher/src/flasher.ts
@@ -160,7 +160,7 @@ export default class Flasher {
     tag.setAttribute('type', 'text/javascript');
     tag.onload = () => this.addScripts(urls.slice(1), callback);
 
-    document.body.appendChild(tag);
+    document.head.appendChild(tag);
   }
 
   renderEnvelopes(envelopes: Envelope[], context: ResponseContext): void {

diff --git a/packages/flasher/src/flasherFactory.ts b/packages/flasher/src/flasherFactory.ts
@@ -108,12 +108,14 @@ export default class FlasherFactory implements NotificationFactoryInterface {
     const containerSelector = `.fl-main-container[data-position="${options.position}"]`;
     let container = document.querySelector(containerSelector) as HTMLDivElement;
     if (container) {
+      container.dataset.turboCache = 'false';
       return container;
     }
 
     container = document.createElement('div');
     container.classList.add('fl-main-container');
     container.dataset.position = options.position;
+    container.dataset.turboCache = 'false';
 
     Object.keys(options.style).forEach((key: string) => {
       container?.style.setProperty(key, options.style[key as keyof Properties] as string);
@@ -200,7 +202,7 @@ export default class FlasherFactory implements NotificationFactoryInterface {
   }
 
   applyDarkMode(): void {
-    if (document.body.classList.contains('fl-dark-mode')) {
+    if (document.body.classList.contains('fl-dark-mode') || document.querySelector('style.flasher-js')) {
       return;
     }
 
@@ -213,6 +215,7 @@ export default class FlasherFactory implements NotificationFactoryInterface {
 
     const style = document.createElement('style');
     style.type = 'text/css';
+    style.classList.add('flasher-js');
     style.appendChild(document.createTextNode(css));
     document.head.appendChild(style);
 

diff --git a/packages/noty/src/noty.ts b/packages/noty/src/noty.ts
@@ -43,7 +43,10 @@ export default class NotyFactory implements NotificationFactoryInterface {
       ...notification.options,
     } as Noty.Options;
 
-    new Noty(options).show();
+    const noty = new Noty(options);
+    noty.show();
+    // @ts-ignore
+    noty.layoutDom.dataset.turboCache = 'false';
   }
 
   createNotification(

diff --git a/packages/notyf/src/notyf.ts b/packages/notyf/src/notyf.ts
@@ -75,6 +75,11 @@ export default class NotyfFactory implements NotificationFactoryInterface {
 
     this.notyf = this.notyf || new Notyf();
     this.notyf.open(options);
+
+    // @ts-ignore
+    this.notyf.view.container.dataset.turboCache = 'false';
+    // @ts-ignore
+    this.notyf.view.a11yContainer.dataset.turboCache = 'false';
   }
 
   renderOptions(options: FlasherOptions): void {
@@ -88,7 +93,7 @@ export default class NotyfFactory implements NotificationFactoryInterface {
     nOptions.types.push({
       type: 'info',
       className: 'notyf__toast--info',
-      backgroundColor: '#5784E5',
+      background: '#5784E5',
       icon: {
         className: 'notyf__icon--info',
         tagName: 'i',
@@ -98,7 +103,7 @@ export default class NotyfFactory implements NotificationFactoryInterface {
     nOptions.types.push({
       type: 'warning',
       className: 'notyf__toast--warning',
-      backgroundColor: '#E3A008',
+      background: '#E3A008',
       icon: {
         className: 'notyf__icon--warning',
         tagName: 'i',

diff --git a/packages/pnotify/src/pnotify.ts b/packages/pnotify/src/pnotify.ts
@@ -5,7 +5,16 @@ import {
   NotificationFactoryInterface,
 } from '@flasher/flasher';
 
-import { notice, alert, info, success, error, Options, defaults } from '@pnotify/core';
+import {
+  notice,
+  alert,
+  info,
+  success,
+  error,
+  Options,
+  defaults,
+  Notice
+} from '@pnotify/core';
 import '@pnotify/core/dist/PNotify.css';
 import '@pnotify/core/dist/BrightTheme.css';
 
@@ -80,21 +89,26 @@ export default class PnotifyFactory implements NotificationFactoryInterface {
       text: (options?.text || notification.message) as string,
     };
 
+    let pnotify: Notice;
     switch (notification.type) {
       case 'success':
-        success(options as Options);
+        pnotify = success(options as Options);
         break;
       case 'alert':
-        alert(options as Options);
+        pnotify = alert(options as Options);
         break;
       case 'info':
-        info(options as Options);
+        pnotify = info(options as Options);
         break;
       case 'error':
-        error(options as Options);
+        pnotify = error(options as Options);
         break;
       default:
-        notice(options as Options);
+        pnotify = notice(options as Options);
+    }
+
+    if (pnotify.refs.container) {
+        pnotify.refs.container.dataset.turboCache = 'false';
     }
   }
 

diff --git a/packages/sweetalert/src/sweetalert.ts b/packages/sweetalert/src/sweetalert.ts
@@ -99,6 +99,13 @@ export default class SweetAlertFactory implements NotificationFactoryInterface,
       timerProgressBar: (options.timerProgressBar || true) as any,
       ...options,
     } as SweetAlertOptions);
+
+    document.addEventListener('turbo:before-cache', function () {
+      if (Swal.isVisible()) {
+        Swal.getPopup()?.style.setProperty('animation-duration', '0ms');
+        Swal.close();
+      }
+    });
   }
 
   addEnvelope(envelope: Envelope): void {

diff --git a/packages/toastr/src/toastr.ts b/packages/toastr/src/toastr.ts
@@ -69,7 +69,8 @@ export default class ToastrFactory implements NotificationFactoryInterface {
     const { message, title, options } = notification;
     let type = notification.type || 'info';
 
-    toastr[type as ToastrType](message, title, options as ToastrOptions);
+    const instance = toastr[type as ToastrType](message, title, options as ToastrOptions);
+    instance.parent().attr('data-turbo-cache', 'false');
   }
 
   renderOptions(options: FlasherOptions): void {