stimulus-library 0.7.5 → 0.9.0

package/dist/mixins/use_event_listener.js

@@ -0,0 +1,34 @@
+import debounce from "lodash-es/debounce";
+import { wrapArray } from "../utilities/arrays";
+import { useMixin } from "./create_mixin";
+export function useEventListener(controller, element, eventNameOrNames, handler, opts) {
+    if (opts === null || opts === void 0 ? void 0 : 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/mixins/use_fullscreen.js

@@ -0,0 +1,42 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { useMixin } from "./create_mixin";
+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 = () => __awaiter(this, void 0, void 0, function* () { return fullscreenOpen ? yield exit() : yield enter(); });
+    let setup = () => document.addEventListener('fullscreenchange', updateFullscreenState);
+    let teardown = () => document.removeEventListener('fullscreenchange', updateFullscreenState);
+    const exit = () => __awaiter(this, void 0, void 0, function* () {
+        if (document.exitFullscreen) {
+            fullscreenOpen = false;
+            yield document.exitFullscreen();
+        }
+    });
+    const enter = () => __awaiter(this, void 0, void 0, function* () {
+        if (fullscreenOpen) {
+            yield exit();
+        }
+        if (element.requestFullscreen) {
+            yield element.requestFullscreen();
+            fullscreenOpen = true;
+        }
+    });
+    useMixin(controller, setup, teardown);
+    return {
+        isFullscreen,
+        enter,
+        exit,
+        toggle,
+        teardown,
+    };
+}

package/dist/mixins/use_geolocation.js

@@ -0,0 +1,62 @@
+import { reactive } from "../utilities/reactive";
+import { useMixin } from "./create_mixin";
+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/mixins/use_hover.js

@@ -0,0 +1,29 @@
+import { useEventListener } from "../mixins/use_event_listener";
+import { useMixin } from "./create_mixin";
+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/mixins/use_injected_html.js

@@ -0,0 +1,37 @@
+import { useMixin } from "./create_mixin";
+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/mixins/use_intersection.js

@@ -0,0 +1,45 @@
+import { useMixin } from "./create_mixin";
+export function useIntersectionObserver(controller, handler, options) {
+    handler = handler.bind(controller);
+    let observer = new IntersectionObserver(handler, options);
+    let teardown = () => {
+        observer === null || observer === void 0 ? void 0 : observer.disconnect();
+        observer = null;
+    };
+    let observe = (element) => observer === null || observer === void 0 ? void 0 : observer.observe(element);
+    let unobserve = (element) => observer === null || observer === void 0 ? void 0 : 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 !== null && options !== void 0 ? 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/mixins/use_interval.js

@@ -0,0 +1,13 @@
+import { useMixin } from "./create_mixin";
+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/mixins/use_localstorage.js

@@ -0,0 +1,122 @@
+import { reactive } from "../utilities/reactive";
+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/mixins/use_mutation_observer.js

@@ -0,0 +1,9 @@
+import { useMixin } from "./create_mixin";
+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/mixins/use_temporary_content.js

@@ -0,0 +1,38 @@
+import { useMixin } from "./create_mixin";
+import { useTimeout } from "./use_timeout";
+import { isHTMLInputElement } from "../utilities/elements";
+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/mixins/use_timeout.js

@@ -0,0 +1,20 @@
+import { useMixin } from "./create_mixin";
+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/mixins/use_trix_modifiers.js

@@ -0,0 +1,71 @@
+import { controllerMethod } from "../utilities/stimulus";
+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/dist/polyfills/string.replaceAll.js

@@ -0,0 +1,13 @@
+"use strict";
+// @ts-ignore
+if (!String.prototype.replaceAll) {
+    // @ts-ignore
+    String.prototype.replaceAll = function (str, newStr) {
+        // If a regex pattern
+        if (Object.prototype.toString.call(str).toLowerCase() === '[object regexp]') {
+            return this.replace(str, newStr);
+        }
+        // If a string
+        return this.replace(new RegExp(str, 'g'), newStr);
+    };
+}

package/dist/utilities/arrays.js

@@ -0,0 +1,3 @@
+export function wrapArray(x) {
+    return Array.isArray(x) ? x : [x];
+}

package/dist/utilities/base_controller.js

@@ -0,0 +1,56 @@
+import { Controller } from "@hotwired/stimulus";
+import { log, logProperty } from "./logging";
+import { dispatchEvent } from "./events";
+export class BaseController extends Controller {
+    constructor(context) {
+        super(context);
+        // @ts-ignore
+        if (!this.application.debug) {
+            return this;
+        }
+        return new Proxy(this, {
+            get: (obj, prop) => {
+                let returnVal = Reflect.get(obj, prop);
+                let self = this;
+                if ("logFormattedMessage" in this.application) {
+                    return returnVal;
+                }
+                if (logProperty(prop.toString())) {
+                    if (typeof returnVal == "function") {
+                        return new Proxy(returnVal, {
+                            apply(target, thisArg, argArray) {
+                                log(self, prop.toString(), {
+                                    args: argArray,
+                                });
+                                return Reflect.apply(target, thisArg, argArray);
+                            },
+                        });
+                    }
+                    else {
+                        log(this, prop.toString());
+                    }
+                }
+                return returnVal;
+            },
+        });
+    }
+    get el() {
+        return this.element;
+    }
+    get isTurboPreview() {
+        return document.documentElement.hasAttribute('data-turbo-preview') || document.documentElement.hasAttribute('data-turbolinks-preview');
+    }
+    get isTurbolinksPreview() {
+        return this.isTurboPreview;
+    }
+    get csrfToken() {
+        return this.metaValue('csrf-token');
+    }
+    metaValue(name) {
+        const element = document.head.querySelector(`meta[name="${name}"]`);
+        return (element === null || element === void 0 ? void 0 : element.getAttribute('content')) || null;
+    }
+    dispatchEvent(element, eventName, options = {}) {
+        dispatchEvent(this, element, eventName, options);
+    }
+}