Reimplement Turbo support using MutationObserver

src/components/accordion/index.ts

@@ -3,6 +3,7 @@ import type { AccordionItem, AccordionOptions } from './types';
 import type { InstanceOptions } from '../../dom/types';
 import { AccordionInterface } from './interface';
 import instances from '../../dom/instances';
+import { inclusiveQuerySelectorAll } from '../../dom/query';
 
 const Default: AccordionOptions = {
     alwaysOpen: false,
@@ -173,8 +174,8 @@ class Accordion implements AccordionInterface {
     }
 }
 
-export function initAccordions() {
-    document.querySelectorAll('[data-accordion]').forEach(($accordionEl) => {
+export function initAccordionsFrom(subtree: Document | Element) {
+    inclusiveQuerySelectorAll(subtree, '[data-accordion]').forEach(($accordionEl) => {
         const alwaysOpen = $accordionEl.getAttribute('data-accordion');
         const activeClasses = $accordionEl.getAttribute('data-active-classes');
         const inactiveClasses = $accordionEl.getAttribute(
@@ -218,6 +219,10 @@ export function initAccordions() {
     });
 }
 
+export function initAccordions() {
+    initAccordionsFrom(document);
+}
+
 if (typeof window !== 'undefined') {
     window.Accordion = Accordion;
     window.initAccordions = initAccordions;

src/components/carousel/index.ts

@@ -8,6 +8,7 @@ import type {
 import type { InstanceOptions } from '../../dom/types';
 import { CarouselInterface } from './interface';
 import instances from '../../dom/instances';
+import { inclusiveQuerySelectorAll } from '../../dom/query';
 
 const Default: CarouselOptions = {
     defaultPosition: 0,
@@ -296,8 +297,8 @@ class Carousel implements CarouselInterface {
     }
 }
 
-export function initCarousels() {
-    document.querySelectorAll('[data-carousel]').forEach(($carouselEl) => {
+export function initCarouselsFrom(subtree: Document | Element) {
+    inclusiveQuerySelectorAll(subtree, '[data-carousel]').forEach(($carouselEl) => {
         const interval = $carouselEl.getAttribute('data-carousel-interval');
         const slide =
             $carouselEl.getAttribute('data-carousel') === 'slide'
@@ -372,6 +373,10 @@ export function initCarousels() {
     });
 }
 
+export function initCarousels() {
+    initCarouselsFrom(document);
+}
+
 if (typeof window !== 'undefined') {
     window.Carousel = Carousel;
     window.initCarousels = initCarousels;

src/components/clipboard/index.ts

@@ -3,6 +3,7 @@ import type { CopyClipboardOptions } from './types';
 import type { InstanceOptions } from '../../dom/types';
 import { CopyClipboardInterface } from './interface';
 import instances from '../../dom/instances';
+import { inclusiveQuerySelectorAll } from '../../dom/query';
 
 const Default: CopyClipboardOptions = {
     htmlEntities: false,
@@ -140,9 +141,8 @@ class CopyClipboard implements CopyClipboardInterface {
     }
 }
 
-export function initCopyClipboards() {
-    document
-        .querySelectorAll('[data-copy-to-clipboard-target]')
+export function initCopyClipboardsFrom(subtree: Document | Element) {
+    inclusiveQuerySelectorAll(subtree, '[data-copy-to-clipboard-target]')
         .forEach(($triggerEl) => {
             const targetId = $triggerEl.getAttribute(
                 'data-copy-to-clipboard-target'
@@ -185,6 +185,10 @@ export function initCopyClipboards() {
         });
 }
 
+export function initCopyClipboards() {
+    initCopyClipboardsFrom(document);
+}
+
 if (typeof window !== 'undefined') {
     window.CopyClipboard = CopyClipboard;
     window.initClipboards = initCopyClipboards;

src/components/collapse/index.ts

@@ -3,6 +3,7 @@ import type { CollapseOptions } from './types';
 import type { InstanceOptions } from '../../dom/types';
 import { CollapseInterface } from './interface';
 import instances from '../../dom/instances';
+import { inclusiveQuerySelectorAll } from '../../dom/query';
 
 const Default: CollapseOptions = {
     onCollapse: () => {},
@@ -115,9 +116,8 @@ class Collapse implements CollapseInterface {
     }
 }
 
-export function initCollapses() {
-    document
-        .querySelectorAll('[data-collapse-toggle]')
+export function initCollapsesFrom(subtree: Document | Element) {
+    inclusiveQuerySelectorAll(subtree, '[data-collapse-toggle]')
         .forEach(($triggerEl) => {
             const targetId = $triggerEl.getAttribute('data-collapse-toggle');
             const $targetEl = document.getElementById(targetId);
@@ -156,6 +156,10 @@ export function initCollapses() {
         });
 }
 
+export function initCollapses() {
+    initCollapsesFrom(document);
+}
+
 if (typeof window !== 'undefined') {
     window.Collapse = Collapse;
     window.initCollapses = initCollapses;

src/components/dial/index.ts

@@ -3,6 +3,7 @@ import type { DialOptions, DialTriggerType } from './types';
 import type { InstanceOptions } from '../../dom/types';
 import { DialInterface } from './interface';
 import instances from '../../dom/instances';
+import { inclusiveQuerySelectorAll } from '../../dom/query';
 
 const Default: DialOptions = {
     triggerType: 'hover',
@@ -172,8 +173,8 @@ class Dial implements DialInterface {
     }
 }
 
-export function initDials() {
-    document.querySelectorAll('[data-dial-init]').forEach(($parentEl) => {
+export function initDialsFrom(subtree: Document | Element) {
+    inclusiveQuerySelectorAll(subtree, '[data-dial-init]').forEach(($parentEl) => {
         const $triggerEl = $parentEl.querySelector('[data-dial-toggle]');
 
         if ($triggerEl) {
@@ -206,6 +207,10 @@ export function initDials() {
     });
 }
 
+export function initDials() {
+    initDialsFrom(document);
+}
+
 if (typeof window !== 'undefined') {
     window.Dial = Dial;
     window.initDials = initDials;

src/components/dismiss/index.ts

@@ -3,6 +3,7 @@ import type { DismissOptions } from './types';
 import type { InstanceOptions } from '../../dom/types';
 import { DismissInterface } from './interface';
 import instances from '../../dom/instances';
+import { inclusiveQuerySelectorAll } from '../../dom/query';
 
 const Default: DismissOptions = {
     transition: 'transition-opacity',
@@ -88,8 +89,8 @@ class Dismiss implements DismissInterface {
     }
 }
 
-export function initDismisses() {
-    document.querySelectorAll('[data-dismiss-target]').forEach(($triggerEl) => {
+export function initDismissesFrom(subtree: Document | Element) {
+    inclusiveQuerySelectorAll(subtree, '[data-dismiss-target]').forEach(($triggerEl) => {
         const targetId = $triggerEl.getAttribute('data-dismiss-target');
         const $dismissEl = document.querySelector(targetId);
 
@@ -103,6 +104,10 @@ export function initDismisses() {
     });
 }
 
+export function initDismisses() {
+    initDismissesFrom(document);
+}
+
 if (typeof window !== 'undefined') {
     window.Dismiss = Dismiss;
     window.initDismisses = initDismisses;

src/components/drawer/index.ts

@@ -3,6 +3,7 @@ import type { DrawerOptions, PlacementClasses } from './types';
 import type { InstanceOptions, EventListenerInstance } from '../../dom/types';
 import { DrawerInterface } from './interface';
 import instances from '../../dom/instances';
+import { inclusiveQuerySelectorAll } from '../../dom/query';
 
 const Default: DrawerOptions = {
     placement: 'left',
@@ -313,8 +314,8 @@ class Drawer implements DrawerInterface {
     }
 }
 
-export function initDrawers() {
-    document.querySelectorAll('[data-drawer-target]').forEach(($triggerEl) => {
+export function initDrawersFrom(subtree: Document | Element) {
+    inclusiveQuerySelectorAll(subtree, '[data-drawer-target]').forEach(($triggerEl) => {
         // mandatory
         const drawerId = $triggerEl.getAttribute('data-drawer-target');
         const $drawerEl = document.getElementById(drawerId);
@@ -453,6 +454,10 @@ export function initDrawers() {
     });
 }
 
+export function initDrawers() {
+    initDrawersFrom(document);
+}
+
 if (typeof window !== 'undefined') {
     window.Drawer = Drawer;
     window.initDrawers = initDrawers;

src/components/dropdown/index.ts

@@ -8,6 +8,7 @@ import type { DropdownOptions } from './types';
 import type { InstanceOptions } from '../../dom/types';
 import { DropdownInterface } from './interface';
 import instances from '../../dom/instances';
+import { inclusiveQuerySelectorAll } from '../../dom/query';
 
 const Default: DropdownOptions = {
     placement: 'bottom',
@@ -319,9 +320,8 @@ class Dropdown implements DropdownInterface {
     }
 }
 
-export function initDropdowns() {
-    document
-        .querySelectorAll('[data-dropdown-toggle]')
+export function initDropdownsFrom(subtree: Document | Element) {
+    inclusiveQuerySelectorAll(subtree, '[data-dropdown-toggle]')
         .forEach(($triggerEl) => {
             const dropdownId = $triggerEl.getAttribute('data-dropdown-toggle');
             const $dropdownEl = document.getElementById(dropdownId);
@@ -372,6 +372,10 @@ export function initDropdowns() {
         });
 }
 
+export function initDropdowns() {
+    initDropdownsFrom(document);
+}
+
 if (typeof window !== 'undefined') {
     window.Dropdown = Dropdown;
     window.initDropdowns = initDropdowns;

src/components/index.ts

@@ -1,16 +1,34 @@
-import { initAccordions } from './accordion';
-import { initCarousels } from './carousel';
-import { initCopyClipboards } from './clipboard';
-import { initCollapses } from './collapse';
-import { initDials } from './dial';
-import { initDismisses } from './dismiss';
-import { initDrawers } from './drawer';
-import { initDropdowns } from './dropdown';
-import { initInputCounters } from './input-counter';
-import { initModals } from './modal';
-import { initPopovers } from './popover';
-import { initTabs } from './tabs';
-import { initTooltips } from './tooltip';
+import { initAccordions, initAccordionsFrom } from './accordion';
+import { initCarousels, initCarouselsFrom } from './carousel';
+import { initCopyClipboards, initCopyClipboardsFrom } from './clipboard';
+import { initCollapses, initCollapsesFrom } from './collapse';
+import { initDials, initDialsFrom } from './dial';
+import { initDismisses, initDismissesFrom } from './dismiss';
+import { initDrawers, initDrawersFrom } from './drawer';
+import { initDropdowns, initDropdownsFrom } from './dropdown';
+import { initInputCounters, initInputCountersFrom } from './input-counter';
+import { initModals, initModalsFrom } from './modal';
+import { initPopovers, initPopoversFrom } from './popover';
+import { initTabs, initTabsFrom } from './tabs';
+import { initTooltips, initTooltipsFrom } from './tooltip';
+import { observeFlowbite } from '../dom/observer';
+
+
+export function initFlowbiteFrom(subtree: Document | Element) {
+    initAccordionsFrom(subtree);
+    initCollapsesFrom(subtree);
+    initCarouselsFrom(subtree);
+    initDismissesFrom(subtree);
+    initDropdownsFrom(subtree);
+    initModalsFrom(subtree);
+    initDrawersFrom(subtree);
+    initTabsFrom(subtree);
+    initTooltipsFrom(subtree);
+    initPopoversFrom(subtree);
+    initDialsFrom(subtree);
+    initInputCountersFrom(subtree);
+    initCopyClipboardsFrom(subtree);
+}
 
 export function initFlowbite() {
     initAccordions();
@@ -28,6 +46,11 @@ export function initFlowbite() {
     initCopyClipboards();
 }
 
+export function initAndObserveFlowbite() {
+    initFlowbite()
+    observeFlowbite()
+}
+
 if (typeof window !== 'undefined') {
     window.initFlowbite = initFlowbite;
 }

src/components/input-counter/index.ts

@@ -3,6 +3,7 @@ import type { InputCounterOptions } from './types';
 import type { InstanceOptions } from '../../dom/types';
 import { InputCounterInterface } from './interface';
 import instances from '../../dom/instances';
+import { inclusiveQuerySelectorAll } from '../../dom/query';
 
 const Default: InputCounterOptions = {
     minValue: null,
@@ -172,8 +173,8 @@ class InputCounter implements InputCounterInterface {
     }
 }
 
-export function initInputCounters() {
-    document.querySelectorAll('[data-input-counter]').forEach(($targetEl) => {
+export function initInputCountersFrom(subtree: Document | Element) {
+    inclusiveQuerySelectorAll(subtree, '[data-input-counter]').forEach(($targetEl) => {
         const targetId = $targetEl.id;
 
         const $incrementEl = document.querySelector(
@@ -213,6 +214,10 @@ export function initInputCounters() {
     });
 }
 
+export function initInputCounters() {
+    initInputCountersFrom(document);
+}
+
 if (typeof window !== 'undefined') {
     window.InputCounter = InputCounter;
     window.initInputCounters = initInputCounters;

src/components/modal/index.ts

@@ -3,6 +3,7 @@ import type { ModalOptions } from './types';
 import type { InstanceOptions, EventListenerInstance } from '../../dom/types';
 import { ModalInterface } from './interface';
 import instances from '../../dom/instances';
+import { inclusiveQuerySelectorAll } from '../../dom/query';
 
 const Default: ModalOptions = {
     placement: 'center',
@@ -266,9 +267,9 @@ class Modal implements ModalInterface {
     }
 }
 
-export function initModals() {
+export function initModalsFrom(subtree: Document | Element) {
     // initiate modal based on data-modal-target
-    document.querySelectorAll('[data-modal-target]').forEach(($triggerEl) => {
+    inclusiveQuerySelectorAll(subtree, '[data-modal-target]').forEach(($triggerEl) => {
         const modalId = $triggerEl.getAttribute('data-modal-target');
         const $modalEl = document.getElementById(modalId);
 
@@ -290,7 +291,7 @@ export function initModals() {
     });
 
     // toggle modal visibility
-    document.querySelectorAll('[data-modal-toggle]').forEach(($triggerEl) => {
+    inclusiveQuerySelectorAll(subtree, '[data-modal-toggle]').forEach(($triggerEl) => {
         const modalId = $triggerEl.getAttribute('data-modal-toggle');
         const $modalEl = document.getElementById(modalId);
 
@@ -323,7 +324,7 @@ export function initModals() {
     });
 
     // show modal on click if exists based on id
-    document.querySelectorAll('[data-modal-show]').forEach(($triggerEl) => {
+    inclusiveQuerySelectorAll(subtree, '[data-modal-show]').forEach(($triggerEl) => {
         const modalId = $triggerEl.getAttribute('data-modal-show');
         const $modalEl = document.getElementById(modalId);
 
@@ -356,7 +357,7 @@ export function initModals() {
     });
 
     // hide modal on click if exists based on id
-    document.querySelectorAll('[data-modal-hide]').forEach(($triggerEl) => {
+    inclusiveQuerySelectorAll(subtree, '[data-modal-hide]').forEach(($triggerEl) => {
         const modalId = $triggerEl.getAttribute('data-modal-hide');
         const $modalEl = document.getElementById(modalId);
 
@@ -389,6 +390,10 @@ export function initModals() {
     });
 }
 
+export function initModals() {
+    initModalsFrom(document);
+}
+
 if (typeof window !== 'undefined') {
     window.Modal = Modal;
     window.initModals = initModals;