@stimulus-library/mixins 0.9.11

package/dist/UseEventListener.d.ts

@@ -0,0 +1,19 @@
+import { Controller } from "@hotwired/stimulus";
+export declare function useEventListener(controller: Controller, element: Document | Window | HTMLElement, eventNameOrNames: string | string[], handler: (...args: any[]) => void, opts?: AddEventListenerOptions & {
+    debounce?: number;
+}): {
+    setup: () => void;
+    teardown: () => void;
+};
+export declare function useEventListeners(controller: Controller, element: Document | Window | HTMLElement, eventNameOrNames: string | string[], handler: (...args: any[]) => void, opts?: AddEventListenerOptions & {
+    debounce?: number;
+}): {
+    setup: () => void;
+    teardown: () => void;
+};
+export declare function useCollectionEventListener(controller: Controller, elements: Array<Document | Window | HTMLElement>, eventNameOrNames: string | string[], handler: (...args: any[]) => void, opts?: AddEventListenerOptions & {
+    debounce?: number;
+}): (() => void)[];
+export declare function useCollectionEventListeners(controller: Controller, elements: Array<Document | Window | HTMLElement>, eventNameOrNames: string | string[], handler: (...args: any[]) => void, opts?: AddEventListenerOptions & {
+    debounce?: number;
+}): (() => void)[];

package/dist/UseEventListener.js

@@ -0,0 +1,33 @@
+import { debounce, wrapArray } from "@stimulus-library/utilities";
+import { useMixin } from "./createMixin";
+export function useEventListener(controller, element, eventNameOrNames, handler, opts) {
+    if (opts?.debounce) {
+        handler = debounce(handler.bind(controller), opts.debounce);
+        delete opts.debounce;
+    }
+    else {
+        handler = handler.bind(controller);
+    }
+    let eventNames = wrapArray(eventNameOrNames);
+    let setup = () => eventNames.forEach(eventName => element.addEventListener(eventName, handler, opts));
+    let teardown = () => eventNames.forEach(eventName => element.removeEventListener(eventName, handler));
+    useMixin(controller, setup, teardown);
+    return { setup, teardown };
+}
+export function useEventListeners(controller, element, eventNameOrNames, handler, opts) {
+    return useEventListener(controller, element, eventNameOrNames, handler, opts);
+}
+export function useCollectionEventListener(controller, elements, eventNameOrNames, handler, opts) {
+    let handlers = [];
+    elements.forEach(el => {
+        let { setup, teardown } = useEventListener(controller, el, eventNameOrNames, handler, opts);
+        handlers.push({ setup, teardown });
+    });
+    return [
+        () => handlers.forEach(h => h.setup()),
+        () => handlers.forEach(h => h.teardown()),
+    ];
+}
+export function useCollectionEventListeners(controller, elements, eventNameOrNames, handler, opts) {
+    return useCollectionEventListener(controller, elements, eventNameOrNames, handler, opts);
+}

package/dist/UseFullscreen.d.ts

@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus";
+export declare function useFullscreen(controller: Controller, el?: Element): {
+    isFullscreen: () => boolean;
+    enter: () => Promise<void>;
+    exit: () => Promise<void>;
+    toggle: () => Promise<void>;
+    teardown: () => void;
+};

package/dist/UseFullscreen.js

@@ -0,0 +1,33 @@
+import { useMixin } from "./createMixin";
+export function useFullscreen(controller, el) {
+    let element = el || document.documentElement;
+    let fullscreenOpen = document.fullscreenElement !== null;
+    const updateFullscreenState = () => fullscreenOpen = document.fullscreenElement !== null;
+    const isFullscreen = () => fullscreenOpen;
+    const toggle = async () => fullscreenOpen ? await exit() : await enter();
+    let setup = () => document.addEventListener('fullscreenchange', updateFullscreenState);
+    let teardown = () => document.removeEventListener('fullscreenchange', updateFullscreenState);
+    const exit = async () => {
+        if (document.exitFullscreen) {
+            fullscreenOpen = false;
+            await document.exitFullscreen();
+        }
+    };
+    const enter = async () => {
+        if (fullscreenOpen) {
+            await exit();
+        }
+        if (element.requestFullscreen) {
+            await element.requestFullscreen();
+            fullscreenOpen = true;
+        }
+    };
+    useMixin(controller, setup, teardown);
+    return {
+        isFullscreen,
+        enter,
+        exit,
+        toggle,
+        teardown,
+    };
+}

package/dist/UseGeolocation.d.ts

@@ -0,0 +1,18 @@
+import { Controller } from "@hotwired/stimulus";
+export interface GeolocationOptions extends Partial<PositionOptions> {
+}
+export interface GeolocationData {
+    locatedAt: number | null;
+    error: GeolocationPositionError | null;
+    coords: {
+        accuracy: number;
+        latitude: number;
+        longitude: number;
+        altitude: number | null;
+        altitudeAccuracy: number | null;
+        heading: number | null;
+        speed: number | null;
+    };
+    teardown: () => void;
+}
+export declare function useGeolocation(controller: Controller, options?: GeolocationOptions, update?: (...args: any[]) => void, error?: (...args: any[]) => void): GeolocationData;

package/dist/UseGeolocation.js

@@ -0,0 +1,62 @@
+import { reactive } from "@stimulus-library/utilities";
+import { useMixin } from "./createMixin";
+export function useGeolocation(controller, options = {}, update, error) {
+    // Ensure passed functions are bound to the correct controller scope
+    if (update) {
+        update = update.bind(controller);
+    }
+    if (error) {
+        error = error.bind(controller);
+    }
+    // Default options to pass to the navigator.geolocation.watchPosition() method
+    const { enableHighAccuracy = true, maximumAge = 30000, timeout = 27000, } = options;
+    const isSupported = navigator && 'geolocation' in navigator;
+    // Create a reactive object to store the geolocation data
+    const values = reactive({
+        locatedAt: null,
+        error: null,
+        coords: {
+            accuracy: 0,
+            latitude: Infinity,
+            longitude: Infinity,
+            altitude: null,
+            altitudeAccuracy: null,
+            heading: null,
+            speed: null,
+        },
+        teardown: () => {
+            if (watcher) {
+                navigator.geolocation.clearWatch(watcher);
+                watcher = null;
+            }
+        },
+    });
+    let setup = () => {
+        if (isSupported) {
+            watcher = navigator.geolocation.watchPosition((position) => {
+                // Update reactive values
+                values.locatedAt = position.timestamp;
+                values.coords = position.coords;
+                values.error = null;
+                // Fire user callback if provided
+                if (update) {
+                    update(position);
+                }
+            }, (err) => {
+                // Update reactive values
+                values.error = err;
+                // Fire user callback if provided
+                if (error) {
+                    error(err);
+                }
+            }, {
+                enableHighAccuracy,
+                maximumAge,
+                timeout,
+            });
+        }
+    };
+    let watcher = null;
+    useMixin(controller, setup, values.teardown);
+    return values;
+}

package/dist/UseInjectedHtml.d.ts

@@ -0,0 +1,10 @@
+import { Controller } from "@hotwired/stimulus";
+export declare function useInjectedFragment(controller: Controller, targetElement: HTMLElement, insertPosition: InsertPosition, fragment: DocumentFragment, options?: {
+    cleanup?: boolean;
+}): [ChildNode[], () => void];
+export declare function useInjectedHTML(controller: Controller, targetElement: HTMLElement, insertPosition: InsertPosition, html: string, options?: {
+    cleanup?: boolean;
+}): [ChildNode[], () => void];
+export declare function useInjectedElement(controller: Controller, targetElement: HTMLElement, insertPosition: InsertPosition, element: HTMLElement, options?: {
+    cleanup?: boolean;
+}): [ChildNode, () => void];

package/dist/UseInjectedHtml.js

@@ -0,0 +1,37 @@
+import { useMixin } from "./createMixin";
+export function useInjectedFragment(controller, targetElement, insertPosition, fragment, options = {}) {
+    let nodes = Array.from(fragment.childNodes);
+    let setup = () => {
+        let parent = targetElement.parentElement;
+        if (["beforebegin", "afterend"].includes(insertPosition) && parent == null) {
+            throw new Error("Cannot insert beforebegin into a node with no parent");
+        }
+        switch (insertPosition) {
+            case 'beforeend':
+                targetElement.append(fragment);
+                break;
+            case "afterbegin":
+                targetElement.prepend(fragment);
+                break;
+            case "beforebegin":
+                parent.insertBefore(fragment, targetElement);
+                break;
+            case "afterend":
+                parent.insertBefore(fragment, targetElement);
+                break;
+        }
+    };
+    let teardown = options.cleanup ? () => nodes.forEach(node => node.remove()) : () => void 0;
+    useMixin(controller, setup, teardown);
+    return [nodes, teardown];
+}
+export function useInjectedHTML(controller, targetElement, insertPosition, html, options = {}) {
+    const fragment = document.createRange().createContextualFragment(html);
+    return useInjectedFragment(controller, targetElement, insertPosition, fragment, options);
+}
+export function useInjectedElement(controller, targetElement, insertPosition, element, options = {}) {
+    const fragment = new DocumentFragment();
+    fragment.append(element);
+    let [nodes, teardown] = useInjectedFragment(controller, targetElement, insertPosition, fragment, options);
+    return [nodes[0], teardown];
+}

package/dist/UseIntersection.d.ts

@@ -0,0 +1,13 @@
+import { Controller } from "@hotwired/stimulus";
+export declare function useIntersectionObserver(controller: Controller, handler: IntersectionObserverCallback, options?: IntersectionObserverInit): {
+    observer: IntersectionObserver;
+    teardown: () => void;
+    observe: (element: HTMLElement) => void | undefined;
+    unobserve: (element: HTMLElement) => void | undefined;
+};
+export declare function useIntersection(controller: Controller, element: HTMLElement, appear?: null | ((entry: IntersectionObserverEntry) => void), disappear?: null | ((entry: IntersectionObserverEntry) => void), options?: IntersectionObserverInit): {
+    observer: IntersectionObserver;
+    observe: () => void | undefined;
+    unobserve: () => void | undefined;
+    teardown: () => void;
+};

package/dist/UseIntersection.js

@@ -0,0 +1,45 @@
+import { useMixin } from "./createMixin";
+export function useIntersectionObserver(controller, handler, options) {
+    handler = handler.bind(controller);
+    let observer = new IntersectionObserver(handler, options);
+    let teardown = () => {
+        observer?.disconnect();
+        observer = null;
+    };
+    let observe = (element) => observer?.observe(element);
+    let unobserve = (element) => observer?.unobserve(element);
+    return {
+        observer,
+        teardown,
+        observe,
+        unobserve,
+    };
+}
+export function useIntersection(controller, element, appear, disappear, options) {
+    if (appear) {
+        appear = appear.bind(controller);
+    }
+    if (disappear) {
+        disappear = disappear.bind(controller);
+    }
+    let opts = options ?? {};
+    let processEntries = (entries) => {
+        entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+                appear && appear(entry);
+            }
+            else {
+                disappear && disappear(entry);
+            }
+        });
+    };
+    let { observer, observe, unobserve, teardown } = useIntersectionObserver(controller, processEntries, opts);
+    let setup = () => observe(element);
+    useMixin(controller, setup, teardown);
+    return {
+        observer,
+        observe: () => observe(element),
+        unobserve: () => unobserve(element),
+        teardown,
+    };
+}

package/dist/UseInterval.d.ts

@@ -0,0 +1,2 @@
+import { Controller } from "@hotwired/stimulus";
+export declare function useInterval(controller: Controller, handler: (...args: any[]) => void, interval: number): () => void;

package/dist/UseInterval.js

@@ -0,0 +1,13 @@
+import { useMixin } from "./createMixin";
+export function useInterval(controller, handler, interval) {
+    handler = handler.bind(controller);
+    let intervalHandle = null;
+    let setup = () => intervalHandle = setInterval(handler, interval);
+    let teardown = () => {
+        if (intervalHandle !== null) {
+            clearInterval(intervalHandle);
+        }
+    };
+    useMixin(controller, setup, teardown);
+    return teardown;
+}

package/dist/UseLocalstorage.d.ts

@@ -0,0 +1,20 @@
+import { Controller } from "@hotwired/stimulus";
+export type Serializer<T> = {
+    deserialize(raw: string): T;
+    serialize(value: T): string;
+    isEmpty(value: T): boolean;
+};
+export interface LocalStorageProxy<T> {
+    get value(): T;
+    set value(value: T);
+    read(): T;
+    write(value: T): void;
+    clear(): void;
+    isEmpty(): boolean;
+}
+export declare const StorageSerializers: Record<'boolean' | 'object' | 'number' | 'any' | 'string' | 'map' | 'set', Serializer<any>> & {
+    [idx: string]: Serializer<any>;
+};
+export declare function useLocalStorage<T>(controller: Controller, key: string, defaultValue: T, opts?: {
+    writeDefaults: boolean;
+}): LocalStorageProxy<T>;

package/dist/UseLocalstorage.js

@@ -0,0 +1,122 @@
+import { reactive } from "@stimulus-library/utilities";
+export const StorageSerializers = {
+    boolean: {
+        deserialize: (v) => v === 'true',
+        serialize: (v) => String(v),
+        isEmpty: (v) => v === '' || v === null,
+    },
+    object: {
+        deserialize: (v) => JSON.parse(v),
+        serialize: (v) => JSON.stringify(v),
+        isEmpty: (v) => {
+            const values = Object.values(JSON.parse(v));
+            return values.length === 0 || values.every(v => v === '' || v === null);
+        },
+    },
+    number: {
+        deserialize: (v) => Number.parseFloat(v),
+        serialize: (v) => String(v),
+        isEmpty: (v) => v === '' || v === null,
+    },
+    any: {
+        deserialize: (v) => v,
+        serialize: (v) => String(v),
+        isEmpty: (v) => v === '' || v === null,
+    },
+    string: {
+        deserialize: (v) => v,
+        serialize: (v) => String(v),
+        isEmpty: (v) => v === '' || v === null,
+    },
+    map: {
+        deserialize: (v) => new Map(JSON.parse(v)),
+        serialize: (v) => JSON.stringify(Array.from(v.entries())),
+        isEmpty: (v) => {
+            const values = Array.from(v.values());
+            return values.length === 0 || values.every(v => v === '' || v === null);
+        },
+    },
+    set: {
+        deserialize: (v) => new Set(JSON.parse(v)),
+        serialize: (v) => JSON.stringify(Array.from(v.entries())),
+        isEmpty: (v) => {
+            const values = Array.from(v.values());
+            return values.length === 0 || values.every(v => v === '' || v === null);
+        },
+    },
+};
+export function useLocalStorage(controller, key, defaultValue, opts = { writeDefaults: true }) {
+    let type;
+    let { writeDefaults } = opts;
+    if (defaultValue == null) {
+        type = 'any';
+    }
+    else if (defaultValue instanceof Set) {
+        type = 'set';
+    }
+    else if (defaultValue instanceof Map) {
+        type = 'map';
+    }
+    else if (typeof defaultValue === 'boolean') {
+        type = 'boolean';
+    }
+    else if (typeof defaultValue === 'string') {
+        type = 'string';
+    }
+    else if (typeof defaultValue === 'object') {
+        type = 'object';
+    }
+    else if (Array.isArray(defaultValue)) {
+        type = 'object';
+    }
+    else if (!Number.isNaN(defaultValue)) {
+        type = 'number';
+    }
+    else {
+        type = 'any';
+    }
+    let data = reactive({
+        value: defaultValue,
+    });
+    let storage = localStorage;
+    const serializer = StorageSerializers[type];
+    const read = () => {
+        const rawValue = storage.getItem(key);
+        if (rawValue == null) {
+            data.value = defaultValue;
+            if (writeDefaults && defaultValue !== null) {
+                storage.setItem(key, serializer.serialize(defaultValue));
+            }
+        }
+        else {
+            data.value = serializer.deserialize(rawValue);
+        }
+        return data.value;
+    };
+    const write = (value) => {
+        storage.setItem(key, serializer.serialize(value));
+        data.value = value;
+    };
+    const clear = () => {
+        storage.removeItem(key);
+        data.value = defaultValue;
+        return data.value;
+    };
+    const isEmpty = () => {
+        let rawValue = storage.getItem(key);
+        return serializer.isEmpty(rawValue);
+    };
+    read();
+    return {
+        get value() {
+            return read();
+        },
+        set value(value) {
+            write(value);
+        },
+        read,
+        clear,
+        write,
+        isEmpty,
+    };
+}

package/dist/UseMutationObserver.d.ts

@@ -0,0 +1,2 @@
+import { Controller } from "@hotwired/stimulus";
+export declare function useMutationObserver(controller: Controller, element: HTMLElement, handler: (entries: MutationRecord[]) => void, options: MutationObserverInit): () => void;

package/dist/UseMutationObserver.js

@@ -0,0 +1,9 @@
+import { useMixin } from "./createMixin";
+export function useMutationObserver(controller, element, handler, options) {
+    handler = handler.bind(controller);
+    let observer = new MutationObserver(handler);
+    let setup = () => observer.observe(element, options);
+    let teardown = () => observer.disconnect();
+    useMixin(controller, setup, teardown);
+    return teardown;
+}

package/dist/UseResizeObserver.d.ts

@@ -0,0 +1,2 @@
+import { Controller } from "@hotwired/stimulus";
+export declare function useResizeObserver(controller: Controller, element: HTMLElement, handler: (entries: ResizeObserverEntry[]) => void, options: ResizeObserverOptions): () => void;

package/dist/UseResizeObserver.js

@@ -0,0 +1,9 @@
+import { useMixin } from "./createMixin";
+export function useResizeObserver(controller, element, handler, options) {
+    handler = handler.bind(controller);
+    let observer = new ResizeObserver(handler);
+    let setup = () => observer.observe(element, options);
+    let teardown = () => observer.disconnect();
+    useMixin(controller, setup, teardown);
+    return teardown;
+}

package/dist/UseTemporaryContent.d.ts

@@ -0,0 +1,5 @@
+import { Controller } from "@hotwired/stimulus";
+export declare function useTemporaryContent(controller: Controller, target: HTMLElement, content: string, timeout?: number, teardownCallback?: () => void): {
+    teardown: () => void;
+    update(newContent: string): void;
+};

package/dist/UseTemporaryContent.js

@@ -0,0 +1,38 @@
+import { useMixin } from "./createMixin";
+import { useTimeout } from "./useTimeout";
+import { isHTMLInputElement } from "@stimulus-library/utilities";
+export function useTemporaryContent(controller, target, content, timeout, teardownCallback) {
+    const setContent = (element, text) => {
+        if (isHTMLInputElement(element)) {
+            element.value = text;
+        }
+        else {
+            element.textContent = text;
+        }
+    };
+    const getContent = (element) => {
+        return isHTMLInputElement(element) ? element.value : element.innerHTML;
+    };
+    let cleanupTimeout = () => void 0;
+    let originalText = getContent(target);
+    const teardown = () => {
+        setContent(target, originalText);
+        cleanupTimeout();
+        if (teardownCallback) {
+            teardownCallback.call(controller);
+        }
+    };
+    const setup = () => {
+        setContent(target, content);
+        if (timeout !== undefined) {
+            cleanupTimeout = useTimeout(controller, teardown, timeout);
+        }
+    };
+    useMixin(controller, setup, teardown);
+    return {
+        teardown,
+        update(newContent) {
+            setContent(target, newContent);
+        },
+    };
+}

package/dist/createMixin.d.ts

@@ -0,0 +1,2 @@
+import { Controller } from "@hotwired/stimulus";
+export declare function useMixin(controller: Controller, setup: () => void, teardown: () => void): () => void;

package/dist/createMixin.js

@@ -0,0 +1,11 @@
+export function useMixin(controller, setup, teardown) {
+    const controllerDisconnect = controller.disconnect.bind(controller);
+    setup();
+    Object.assign(controller, {
+        disconnect() {
+            teardown();
+            controllerDisconnect();
+        },
+    });
+    return controllerDisconnect;
+}

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+export * from './installClassMethods';
+export * from './useClickOutside';
+export * from './useEventBus';
+export * from './useEventListener';
+export * from './useFullscreen';
+export * from './useGeolocation';
+export * from './useHover';
+export * from './useInjectedHtml';
+export * from './useIntersection';
+export * from './useInterval';
+export * from './useLocalstorage';
+export * from './useMutationObserver';
+export * from './useResizeObserver';
+export * from './useTemporaryContent';
+export * from './useTimeout';
+export * from './useTrixModifiers';

package/dist/index.js

@@ -0,0 +1,16 @@
+export * from './installClassMethods';
+export * from './useClickOutside';
+export * from './useEventBus';
+export * from './useEventListener';
+export * from './useFullscreen';
+export * from './useGeolocation';
+export * from './useHover';
+export * from './useInjectedHtml';
+export * from './useIntersection';
+export * from './useInterval';
+export * from './useLocalstorage';
+export * from './useMutationObserver';
+export * from './useResizeObserver';
+export * from './useTemporaryContent';
+export * from './useTimeout';
+export * from './useTrixModifiers';

package/dist/installClassMethods.d.ts

@@ -0,0 +1,5 @@
+import { Controller } from "@hotwired/stimulus";
+export declare class InstallClassMethodComposableController extends Controller {
+    [index: string]: any;
+}
+export declare function installClassMethods(controller: InstallClassMethodComposableController): void;

package/dist/installClassMethods.js

@@ -0,0 +1,27 @@
+import { Controller } from "@hotwired/stimulus";
+import { controllerMethod, pascalCase } from "@stimulus-library/utilities";
+export class InstallClassMethodComposableController extends Controller {
+}
+function addMethodsForClassDefinition(controller, name) {
+    let defaultElement = controller.element;
+    let hasClass = () => controller[`has${pascalCase(name)}Class`] == true;
+    let classes = () => controller[`${name}Classes`];
+    let defaultClasses = () => controllerMethod(controller, `default${pascalCase(name)}Classes`).call(controller) || [];
+    let classOrDefault = () => hasClass() ? classes() : defaultClasses();
+    if (controller[`${name}Classes`] == undefined) {
+        Object.defineProperty(controller, `${name}Classes`, {
+            get: () => hasClass() ? controller[`${name}Class`].split(' ') : defaultClasses(),
+        });
+    }
+    let methods = {
+        [`add${pascalCase(name)}Classes`]: (element = defaultElement) => element.classList.add(...classOrDefault()),
+        [`remove${pascalCase(name)}Classes`]: (element = defaultElement) => element.classList.remove(...classOrDefault()),
+        [`${name}ClassesPresent`]: (element = defaultElement) => classOrDefault().every((klass) => element.classList.contains(klass)),
+    };
+    Object.assign(controller, methods);
+}
+export function installClassMethods(controller) {
+    // @ts-ignore
+    let classes = controller.constructor.classes || [];
+    classes.forEach((classDefinition) => addMethodsForClassDefinition(controller, classDefinition));
+}

package/dist/useClickOutside.d.ts

@@ -0,0 +1,4 @@
+import { Controller } from "@hotwired/stimulus";
+export declare function useClickOutside(controller: Controller, element: HTMLElement, callback: (event: Event) => void): {
+    teardown: () => void;
+};

package/dist/useClickOutside.js

@@ -0,0 +1,17 @@
+import { isElementInViewport } from "@stimulus-library/utilities";
+import { useEventListener } from "./useEventListener";
+import { useMixin } from "./createMixin";
+export function useClickOutside(controller, element, callback) {
+    callback = callback.bind(controller);
+    const handler = (event) => {
+        if (element.contains(event.target) || (!isElementInViewport(element))) {
+            return;
+        }
+        callback(event);
+    };
+    let { teardown } = useEventListener(controller, window, ["click", "touchend"], handler);
+    useMixin(controller, () => void 0, teardown);
+    return {
+        teardown,
+    };
+}

package/dist/useEventBus.d.ts

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus";
+export declare function useEventBus(controller: Controller, eventNameOrNames: string | string[], handler: (...args: any[]) => void, opts?: {
+    debounce?: number;
+}): {
+    setup: () => void;
+    teardown: () => void;
+};

package/dist/useEventBus.js

@@ -0,0 +1,17 @@
+import { debounce, EventBus, wrapArray } from "@stimulus-library/utilities";
+import { useMixin } from "./createMixin";
+export function useEventBus(controller, eventNameOrNames, handler, opts) {
+    let options = opts;
+    if (options?.debounce) {
+        handler = debounce(handler.bind(controller), options.debounce);
+        delete options.debounce;
+    }
+    else {
+        handler = handler.bind(controller);
+    }
+    let eventNames = wrapArray(eventNameOrNames);
+    let setup = () => eventNames.forEach(eventName => EventBus.on(eventName, handler));
+    let teardown = () => eventNames.forEach(eventName => EventBus.off(eventName, handler));
+    useMixin(controller, setup, teardown);
+    return { setup, teardown };
+}

package/dist/useHover.d.ts

@@ -0,0 +1,4 @@
+import { Controller } from "@hotwired/stimulus";
+export declare function useHover(controller: Controller, element: HTMLElement, enter?: ((event: Event) => void) | null, leave?: ((event: Event) => void) | null): {
+    teardown: () => void;
+};

package/dist/useHover.js

@@ -0,0 +1,29 @@
+import { useEventListener } from "./useEventListener";
+import { useMixin } from "./createMixin";
+export function useHover(controller, element, enter, leave) {
+    let teardownEnter = null;
+    let teardownLeave = null;
+    if (enter) {
+        enter = enter.bind(controller);
+        let { teardown: _teardownEnter } = useEventListener(controller, element, "mouseenter", enter);
+        teardownEnter = _teardownEnter;
+    }
+    if (leave) {
+        leave = leave.bind(controller);
+        let { teardown: _teardownLeave } = useEventListener(controller, element, "mouseleave", leave);
+        teardownLeave = _teardownLeave;
+    }
+    let setup = () => void 0;
+    let teardown = () => {
+        if (teardownEnter) {
+            teardownEnter();
+        }
+        if (teardownLeave) {
+            teardownLeave();
+        }
+    };
+    useMixin(controller, setup, teardown);
+    return {
+        teardown,
+    };
+}

package/dist/useTimeout.d.ts

@@ -0,0 +1,2 @@
+import { Controller } from "@hotwired/stimulus";
+export declare function useTimeout(controller: Controller, handler: (...args: any[]) => void, timeout: number): () => void;

package/dist/useTimeout.js

@@ -0,0 +1,20 @@
+import { useMixin } from "./createMixin";
+export function useTimeout(controller, handler, timeout) {
+    let controllerDisconnect;
+    let timeoutHandle = null;
+    handler = handler.bind(controller);
+    let newHandler = () => {
+        handler();
+        timeoutHandle = null;
+        Object.assign(controller, { disconnect: controllerDisconnect });
+    };
+    let setup = () => timeoutHandle = setTimeout(newHandler, timeout);
+    let teardown = () => {
+        if (timeoutHandle !== null) {
+            clearTimeout(timeoutHandle);
+            timeoutHandle = null;
+        }
+    };
+    controllerDisconnect = useMixin(controller, setup, teardown);
+    return teardown;
+}

package/dist/useTrixModifiers.d.ts

@@ -0,0 +1,10 @@
+import { Controller } from "@hotwired/stimulus";
+export interface TrixElementsPayload {
+    toolbar: HTMLElement;
+    editor: HTMLElement;
+}
+export declare class TrixComposableController extends Controller {
+    install?: (elements: TrixElementsPayload) => void;
+    uninstall?: (elements: TrixElementsPayload) => void;
+}
+export declare function useTrixModifiers(controller: TrixComposableController): void;

package/dist/useTrixModifiers.js

@@ -0,0 +1,71 @@
+import { controllerMethod } from "@stimulus-library/utilities";
+import { Controller } from "@hotwired/stimulus";
+export class TrixComposableController extends Controller {
+}
+export function useTrixModifiers(controller) {
+    // keep a copy of the lifecycle function of the controller
+    const controllerDisconnect = controller.disconnect.bind(controller);
+    let observing = false;
+    let observerCallback = (entries, observer) => {
+        entries.forEach(mutation => {
+            if (mutation.type === 'childList' && Array.from(mutation.addedNodes).some((el) => el.tagName === 'TRIX-TOOLBAR')) {
+                attemptSetup();
+                observer.disconnect();
+            }
+        });
+    };
+    let pasteHandler = (event) => controllerMethod(controller, 'pasteEvent').call(controller, event);
+    let observer = new MutationObserver(observerCallback);
+    let attemptSetup = () => {
+        if (controller.element.tagName !== 'TRIX-EDITOR') {
+            throw new Error('Expected controller to be mounted on an instance of <trix-editor>');
+        }
+        let editor = controller.element;
+        let editorParent = controller.element.parentElement;
+        if (editorParent == null) {
+            throw new Error('Could not traverse DOM tree from <trix-editor>');
+        }
+        editor.addEventListener('trix-paste', pasteHandler);
+        let toolbar = editorParent.querySelector('trix-toolbar');
+        if (!observing && !toolbar) {
+            // toolbar is not in the DOM yet, wait for it to arrive before running setup
+            observing = true;
+            observer.observe(editorParent, { childList: true });
+            return;
+        }
+        else if (!toolbar) {
+            // Fallback, in case this runs twice, or mutation observer logic fails
+            throw new Error('Could not find an instance of <trix-toolbar> that is a sibling of this <trix-editor>');
+        }
+        else {
+            // Do not need MutationObserver, all elements are present and correct
+            observer.disconnect();
+        }
+        controllerMethod(controller, 'install').call(controller, { toolbar, editor });
+    };
+    let teardown = () => {
+        if (controller.element.tagName !== 'TRIX-EDITOR') {
+            throw new Error('Expected controller to be mounted on an instance of <trix-editor>');
+        }
+        let editor = controller.element;
+        let editorParent = controller.element.parentElement;
+        if (editorParent == null) {
+            throw new Error('Could not traverse DOM tree from <trix-editor>');
+        }
+        editor.removeEventListener('trix-paste', pasteHandler);
+        let toolbar = editorParent.querySelector('trix-toolbar');
+        if (!toolbar) {
+            throw new Error('Could not find <trix-toolbar> that is a sibling of this <trix-editor> element');
+        }
+        controllerMethod(controller, 'uninstall').call(controller, { toolbar, editor });
+    };
+    attemptSetup();
+    Object.assign(controller, {
+        disconnect() {
+            observer.disconnect();
+            teardown();
+            controllerMethod(controller, 'uninstall').call({ toolbar, editor: controller.element });
+            controllerDisconnect();
+        },
+    });
+}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@stimulus-library/mixins",
+  "description": "A library of useful controllers for Stimulus",
+  "keywords": [
+    "stimulusjs",
+    "stimulus-js",
+    "stimulus library",
+    "stimulus controller",
+    "ruby on rails",
+    "ruby-on-rails"
+  ],
+  "version": "0.9.11",
+  "license": "MIT",
+  "author": {
+    "name": "Sub-Xaero",
+    "url": "https://github.com/Sub-Xaero/"
+  },
+  "homepage": "https://sub-xaero.github.io/stimulus-library/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Sub-Xaero/stimulus-library"
+  },
+  "files": [
+    "dist"
+  ],
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "prepack": "npm run build",
+    "release": "standard-version",
+    "test": "cypress run",
+    "test:treeshake": "agadoo dist"
+  },
+  "dependencies": {
+    "@hotwired/stimulus": "^3.0.0",
+    "@stimulus-library/utilities": "*"
+  },
+  "devDependencies": {
+    "agadoo": "^3.0.0",
+    "cypress": "^12.5.1",
+    "fast-glob": "^3.2.12",
+    "lerna": "^6.5.1",
+    "rimraf": "^4.1.2",
+    "standard-version": "^9.5.0",
+    "typescript": "^4.9.5",
+    "vite": "^4.1.1"
+  }
+}