stimulus-library 0.7.3 → 0.8.0-beta

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();

package/dist/utilities/events.js

@@ -0,0 +1,10 @@
+import { logEvent } from "./logging";
+export function dispatchEvent(controller, element, eventName, options = {}) {
+    let mergedOptions = Object.assign({}, { bubbles: true, cancelable: true, detail: { target: element } }, options);
+    if (!mergedOptions.detail.target) {
+        mergedOptions.detail.target = element;
+    }
+    let event = new CustomEvent(eventName, mergedOptions);
+    logEvent(controller, eventName, event, element);
+    element.dispatchEvent(event);
+}

package/dist/utilities/fetchRetry.js

@@ -0,0 +1,22 @@
+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());
+    });
+};
+export function fetchRetry(n, input, init) {
+    return __awaiter(this, void 0, void 0, function* () {
+        try {
+            return yield fetch(input, init);
+        }
+        catch (err) {
+            if (n === 1) {
+                throw err;
+            }
+            return yield fetchRetry(n - 1, input, init);
+        }
+    });
+}

package/dist/utilities/{index.d.ts → index.js}

@@ -5,4 +5,3 @@ export * from "./turbo";
 export * from "./event_bus";
 export * from "./request_submit";
 export * from "./elements";
-//# sourceMappingURL=index.d.ts.map

package/dist/utilities/logging.js

@@ -0,0 +1,82 @@
+export function logProperty(prop) {
+    switch (prop) {
+        case "application":
+        case "el":
+        case "element":
+        case "constructor":
+        case "initialize":
+        case "log":
+        case "logEvent":
+        case "dispatch":
+        case "data":
+        case "valueDescriptorMap":
+        case "mutate":
+        case "identifier":
+            return false;
+    }
+    if (/^_.*?$/.test(prop)) {
+        return false;
+    }
+    if (/^.*?Target(s)?$/.test(prop)) {
+        return false;
+    }
+    if (/^.*?Value$/.test(prop)) {
+        return false;
+    }
+    if (/^.*?ValueChanged$/.test(prop)) {
+        return false;
+    }
+    if (/^.*?Class$/.test(prop)) {
+        return false;
+    }
+    if (/^.*?Classes$/.test(prop)) {
+        return false;
+    }
+    if (/^.*?ClassesPresent$/.test(prop)) {
+        return false;
+    }
+    return true;
+}
+export function log(controller, functionName, args = {}) {
+    if (!controller.application.debug) {
+        return;
+    }
+    let logger = console;
+    logger.groupCollapsed(...colorize(controller.identifier, "#3B82F6"), `#${functionName}`);
+    logger.log(Object.assign({ element: controller.element, controller: controller }, args));
+    logger.groupEnd();
+}
+export function warn(controller, warning, args = {}) {
+    if (!controller.application.debug) {
+        return;
+    }
+    let logger = console;
+    logger.groupCollapsed(...colorize(controller.identifier, "#F39B1AFF"), `!! ${warning} !!`);
+    logger.warn(Object.assign({ element: controller.element, controller: controller }, args));
+    logger.groupEnd();
+}
+export function logEvent(controller, eventName, event, element) {
+    if (!controller.application.debug) {
+        return;
+    }
+    let logger = console;
+    logger.groupCollapsed(...colorizeMany([
+        { text: controller.identifier, color: "#3B82F6" },
+        { text: eventName, color: "#0be000" },
+    ]), event.detail);
+    logger.log(...colorize("Dispatched on", "#3b82f6"), element);
+    logger.log(...colorize("event", "#3b82f6"), event);
+    logger.log(...colorize("event details", "#3b82f6"), event.detail);
+    logger.groupEnd();
+}
+function colorize(text, color) {
+    return colorizeMany([{ text, color }]);
+}
+function colorizeMany(texts) {
+    let str = "";
+    let colors = texts.flatMap(x => {
+        str += `%c${x.text}%c `;
+        return [`color: ${x.color}`, "color: unset"];
+    });
+    return [str, ...colors];
+}

package/dist/utilities/reactive.js

@@ -0,0 +1,23 @@
+export function reactive(object) {
+    if (object === null || typeof object !== 'object') {
+        return object;
+    }
+    for (const property in object) {
+        if (Object.getOwnPropertyDescriptor(object, property) == undefined) {
+            continue;
+        }
+        // @ts-ignore
+        object[property] = reactive(object[property]);
+    }
+    return new Proxy(object, {
+        get(target, property) {
+            // @ts-ignore
+            return target[property];
+        },
+        set(target, property, value) {
+            // @ts-ignore
+            target[property] = reactive(value);
+            return true;
+        },
+    });
+}

package/dist/utilities/request_submit.js

@@ -0,0 +1,20 @@
+import { insertHiddenButton } from "./elements";
+export function requestSubmit(form) {
+    if (form.requestSubmit) {
+        form.requestSubmit();
+    }
+    else {
+        let button = form.querySelector('button[type="submit"]');
+        if (!button) {
+            button = insertHiddenButton("submit", form, 'beforeend');
+        }
+        button.click();
+    }
+}
+export function requestReset(form) {
+    let button = form.querySelector('button[type="reset"]');
+    if (!button) {
+        button = insertHiddenButton("reset", form, 'beforeend');
+    }
+    button.click();
+}

package/dist/utilities/scroll.js

@@ -0,0 +1,89 @@
+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 smoothScroll from 'smoothscroll-polyfill';
+export function scrollToElement(element, { behavior = "smooth", block = "start", inline = "nearest" } = {}) {
+    return __awaiter(this, void 0, void 0, function* () {
+        smoothScroll.polyfill();
+        element.scrollIntoView({ behavior, block, inline });
+    });
+}
+export function scrollAbsoluteTop(element, { behavior = "smooth" } = {}) {
+    return __awaiter(this, void 0, void 0, function* () {
+        smoothScroll.polyfill();
+        element.scrollTo({ top: 0, left: 0, behavior });
+    });
+}
+export function scrollAbsoluteBottom(element, { behavior = "smooth" } = {}) {
+    return __awaiter(this, void 0, void 0, function* () {
+        smoothScroll.polyfill();
+        if (element == window) {
+            element.scrollTo({ top: document.body.scrollHeight, left: 0, behavior });
+        }
+        else {
+            element.scrollTo({ top: element.scrollHeight, left: 0, behavior });
+        }
+    });
+}
+export function scrollAbsoluteLeft(element, { behavior = "smooth" } = {}) {
+    return __awaiter(this, void 0, void 0, function* () {
+        smoothScroll.polyfill();
+        element.scrollTo({ left: 0, behavior });
+    });
+}
+export function scrollAbsoluteRight(element, { behavior = "smooth" } = {}) {
+    return __awaiter(this, void 0, void 0, function* () {
+        smoothScroll.polyfill();
+        if (element == window) {
+            element.scrollTo({ left: document.body.scrollWidth, behavior });
+        }
+        else {
+            element.scrollTo({ left: element.scrollWidth, behavior });
+        }
+    });
+}
+export function scrollUp(element, amount, { behavior = "smooth" } = {}) {
+    return __awaiter(this, void 0, void 0, function* () {
+        smoothScroll.polyfill();
+        element.scrollBy({ top: -amount, left: 0, behavior });
+    });
+}
+export function scrollDown(element, amount, { behavior = "smooth" } = {}) {
+    return __awaiter(this, void 0, void 0, function* () {
+        smoothScroll.polyfill();
+        element.scrollBy({ top: amount, left: 0, behavior });
+    });
+}
+export function scrollLeft(element, amount, { behavior = "smooth" } = {}) {
+    return __awaiter(this, void 0, void 0, function* () {
+        smoothScroll.polyfill();
+        element.scrollBy({ top: 0, left: -amount, behavior });
+    });
+}
+export function scrollRight(element, amount, { behavior = "smooth" } = {}) {
+    return __awaiter(this, void 0, void 0, function* () {
+        smoothScroll.polyfill();
+        element.scrollBy({ top: 0, left: amount, behavior });
+    });
+}
+export function getScrollParent(node) {
+    smoothScroll.polyfill();
+    if (!node) {
+        return null;
+    }
+    if (node == document.body) {
+        return window;
+    }
+    const overflowY = getComputedStyle(node).overflowY;
+    const isScrollable = overflowY !== "visible" && overflowY !== "hidden";
+    if (isScrollable && node.scrollHeight >= node.clientHeight) {
+        return node;
+    }
+    return getScrollParent(node.parentElement) || document.body;
+}

package/dist/utilities/stimulus.js

@@ -0,0 +1,13 @@
+export function controllerMethod(controller, methodName) {
+    // @ts-ignore
+    const method = controller[methodName];
+    if (typeof method == 'function') {
+        return method;
+    }
+    else if (method != undefined) {
+        return () => method;
+    }
+    else {
+        return () => void 0;
+    }
+}

package/dist/utilities/strings.js

@@ -0,0 +1,5 @@
+import camelCase from "lodash-es/camelCase";
+import upperFirst from "lodash-es/upperFirst";
+export function pascalCase(str) {
+    return upperFirst(camelCase(str));
+}

package/dist/utilities/turbo.js

@@ -0,0 +1,3 @@
+export function isTurboFrame(element) {
+    return element.nodeName == "TURBO-FRAME";
+}

package/package.json

@@ -9,7 +9,7 @@
     "ruby on rails",
     "ruby-on-rails"
   ],
-  "version": "0.7.3",
+  "version": "0.8.0-beta",
   "license": "MIT",
   "author": {
     "name": "Sub-Xaero",
@@ -23,43 +23,33 @@
   "files": [
     "dist"
   ],
-  "source": "src/index.ts",
-  "main": "dist/stimulus-library.umd.js",
-  "module": "dist/stimulus-library.es.js",
+  "module": "dist/index.js",
   "types": "dist/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/stimulus-library.es.js",
-      "require": "./dist/stimulus-library.umd.js"
-    }
-  },
   "scripts": {
-    "build": "vite build && tsc --emitDeclarationOnly",
-    "dev": "vite build --watch",
-    "dev:types": "tsc --emitDeclarationOnly --watch",
+    "build": "tsc",
+    "dev": "tsc --watch",
     "prepack": "yarn build",
     "release": "standard-version",
     "test": "cypress run",
-    "test:treeshake": "agadoo dist stimulus-library.js"
+    "test:treeshake": "agadoo dist"
   },
   "dependencies": {
+    "@babel/runtime": "^7.17.9",
+    "@hotwired/stimulus": "^3.0.1",
     "date-fns": "^2.28.0",
     "dialog-polyfill": "^0.5.6",
     "lodash-es": "^4.17.21",
     "mitt": "^3.0.0",
     "smoothscroll-polyfill": "^0.4.4"
   },
-  "peerDependencies": {
-    "stimulus": "^3.0.0 || ^2.0.0"
-  },
   "devDependencies": {
     "@types/lodash-es": "^4.17.6",
     "@types/smoothscroll-polyfill": "^0.3.1",
     "agadoo": "^2.0.0",
     "cypress": "^9.4.1",
+    "fast-glob": "^3.2.11",
     "rimraf": "^3.0.2",
     "standard-version": "^9.3.2",
-    "stimulus": "^3.0.1",
     "typescript": "^4.5.5",
     "vite": "^2.7.13"
   }