stimulus-library 0.7.5 → 0.8.0-beta

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);
+    }
+}

package/dist/utilities/elements.js

@@ -0,0 +1,102 @@
+export function isHTMLLinkElement(element) {
+    return element.nodeName == "LINK";
+}
+export function isHTMLAnchorElement(element) {
+    return element.nodeName == "A";
+}
+export function isHTMLFormElement(element) {
+    return element.nodeName == "FORM";
+}
+export function isHTMLInputElement(element) {
+    return element.nodeName == "INPUT";
+}
+export function isHTMLLabelElement(element) {
+    return element.nodeName == "LABEL";
+}
+export function isHTMLTextAreaElement(element) {
+    return element.nodeName == "TEXTAREA";
+}
+export function isHTMLButtonElement(element) {
+    return element.nodeName == "BUTTON";
+}
+export function isHTMLSelectElement(element) {
+    return element.nodeName == "SELECT";
+}
+export function isHTMLImageElement(element) {
+    return element.nodeName == "IMG";
+}
+export function isHTMLButtonInputElement(element) {
+    return element.nodeName == "INPUT" && element.type == "button";
+}
+export function isHTMLSubmitInputElement(element) {
+    return element.nodeName == "INPUT" && element.type == "submit";
+}
+export function isHTMLResetInputElement(element) {
+    return element.nodeName == "INPUT" && element.type == "reset";
+}
+export function isHTMLButtonButtonElement(element) {
+    return element.nodeName == "BUTTON" && element.type == "button";
+}
+export function isHTMLSubmitButtonElement(element) {
+    return element.nodeName == "BUTTON" && element.type == "submit";
+}
+export function isHTMLResetButtonElement(element) {
+    return element.nodeName == "BUTTON" && element.type == "reset";
+}
+export function isTypeOfResetButtonElement(element) {
+    return isHTMLResetButtonElement(element) || isHTMLResetInputElement(element);
+}
+export function isTypeOfSubmitButtonElement(element) {
+    return isHTMLSubmitButtonElement(element) || isHTMLSubmitInputElement(element);
+}
+export function isTypeOfButtonableElement(element) {
+    return isTypeOfResetButtonElement(element) || isTypeOfSubmitButtonElement(element) || isHTMLButtonButtonElement(element);
+}
+export function isElementCheckable(element) {
+    return isHTMLInputElement(element) && (element.type === "radio" || element.type === "checkbox");
+}
+export function isTypeOfFormInputElement(element) {
+    return isHTMLInputElement(element) || isHTMLSelectElement(element) || isHTMLTextAreaElement(element);
+}
+export function createHiddenButton(type) {
+    let button = document.createElement('button');
+    button.type = type;
+    button.style.display = 'none';
+    button.dataset.sythentic = 'true';
+    return button;
+}
+export function createHiddenInput(name, value) {
+    let input = document.createElement('input');
+    input.type = 'hidden';
+    input.name = name;
+    input.value = value;
+    return input;
+}
+export function insertElement(targetElement, insertPosition, element) {
+    let createdElement = targetElement.insertAdjacentElement(insertPosition, element);
+    if (!createdElement) {
+        throw new Error(`Failed to insert element ${element.nodeName} into ${targetElement.nodeName}`);
+    }
+    return createdElement;
+}
+export function insertHiddenInput(name, value, targetElement, insertPosition) {
+    return insertElement(targetElement, insertPosition, createHiddenInput(name, value));
+}
+export function insertHiddenButton(type, targetElement, insertPosition) {
+    return insertElement(targetElement, insertPosition, createHiddenButton(type));
+}
+export function getAllRadiosInGroup(radio) {
+    let parent = radio.form || document;
+    return Array.from(parent.querySelectorAll(`input[type="radio"][name="${radio.name}"]`));
+}
+export function getOtherRadiosInGroup(radio) {
+    return getAllRadiosInGroup(radio).filter((r) => r !== radio);
+}
+export function isElementInViewport(el) {
+    const rect = el.getBoundingClientRect();
+    const windowHeight = window.innerHeight || document.documentElement.clientHeight;
+    const windowWidth = window.innerWidth || document.documentElement.clientWidth;
+    const vertInView = rect.top <= windowHeight && rect.top + rect.height >= 0;
+    const horInView = rect.left <= windowWidth && rect.left + rect.width >= 0;
+    return vertInView && horInView;
+}

package/dist/utilities/ephemeral_controller.js

@@ -0,0 +1,42 @@
+import camelCase from "lodash-es/camelCase";
+import { BaseController } from "./base_controller";
+import '../polyfills/string.replaceAll';
+export class EphemeralController extends BaseController {
+    _cleanupSelf() {
+        this.cleanup(this.el);
+    }
+    cleanup(element) {
+        var _a, _b, _c;
+        // @ts-ignore
+        element.dataset.controller = ((_a = element.dataset.controller) === null || _a === void 0 ? void 0 : _a.replaceAll(new RegExp(`(\\s|^)${this.identifier}(\\s|$)`, "g"), "")) || "";
+        if (element.dataset.controller == "") {
+            // If there are no controllers left, remove the attribute
+            delete element.dataset.controller;
+        }
+        let substringIdentifierValueRegex = new RegExp(`(\\s|^)${this.identifier}\\..+?(\\s|$)`, "g");
+        // @ts-ignore
+        element.dataset.target = ((_b = element.dataset.target) === null || _b === void 0 ? void 0 : _b.replaceAll(substringIdentifierValueRegex, "")) || "";
+        delete element.dataset[camelCase(`${this.identifier}-target`)];
+        if (element.dataset.target == "") {
+            // If there are no targets left, remove the attribute
+            delete element.dataset.target;
+        }
+        // @ts-ignore
+        element.dataset.action = ((_c = element.dataset.target) === null || _c === void 0 ? void 0 : _c.replaceAll(substringIdentifierValueRegex, "")) || "";
+        delete element.dataset[camelCase(`${this.identifier}-action`)];
+        if (element.dataset.action == "") {
+            // If there are no actions left, remove the attribute
+            delete element.dataset.action;
+        }
+        // @ts-ignore
+        let values = this.constructor.values;
+        if (values) {
+            Object.keys(values).forEach(val => delete element.dataset[camelCase(`${this.identifier}-${val}-value`)]);
+        }
+        // @ts-ignore
+        let classes = this.constructor.classes;
+        if (classes) {
+            Object.keys(classes).forEach(val => delete element.dataset[camelCase(`${this.identifier}-${val}-class`)]);
+        }
+    }
+}

package/dist/utilities/event_bus.js

@@ -0,0 +1,2 @@
+import mitt from 'mitt';
+export const EventBus = mitt();