stimulus-use - npm Package Compare versions

Comparing version 0.9.4 to 0.10.0

dist/index.d.ts

 export { useIntersection, IntersectionController } from './use-intersection';
 export { useLazyLoad, LazyLoadController } from './use-lazy-load';
 export { useResize, ResizeController } from './use-resize';
+export { useClickOutside, ClickOutsideController } from './use-click-outside';
 export { useApplication, ApplicationController } from './use-application';
 //# sourceMappingURL=index.d.ts.map

dist/index.js

 export { useIntersection, IntersectionController } from './use-intersection';
 export { useLazyLoad, LazyLoadController } from './use-lazy-load';
 export { useResize, ResizeController } from './use-resize';
+export { useClickOutside, ClickOutsideController } from './use-click-outside';
 export { useApplication, ApplicationController } from './use-application';
 //# sourceMappingURL=index.js.map

dist/index.umd.js

@@ -1,2 +0,2 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("stimulus")):"function"==typeof define&&define.amd?define(["exports","stimulus"],n):n((e=e||self).stimulusUse={},e.stimulus)}(this,function(e,n){var t=function(e,n){var t=function(n){var t=e[n];if("function"==typeof t)return t;throw new Error('undefined method "'+n+'"')},o=e.disconnect;Object.assign(e,{isVisible:!1,observer:new IntersectionObserver(function(n){var o=n[0];o.isIntersecting?function(n){e.isVisible=!0,e.appear&&t("appear").call(e,n)}(o):e.isVisible&&function(n){e.isVisible=!1,e.disappear&&t("disappear").call(e,n)}(o)},n),observe:function(){this.observer.observe(e.element)},unObserve:function(){this.observer.unobserve(e.element)},disconnect:function(){e.unObserve(),o()}}),e.observe()};function o(e,n){e.prototype=Object.create(n.prototype),e.prototype.constructor=e,e.__proto__=n}function r(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}var i=function(e){function n(n){var o;return(o=e.call(this,n)||this).isVisible=!1,o.options={},requestAnimationFrame(function(){t(r(o),o.options)}),o}o(n,e);var i=n.prototype;return i.observe=function(){},i.unObserve=function(){},i.appear=function(e){},i.disappear=function(e){},n}(n.Controller),s=function(e,n){var t=function(n){var t=e[n];if("function"==typeof t)return t;throw new Error('undefined method "'+n+'"')},o=e.disconnect;Object.assign(e,{isVisible:!1,observer:new IntersectionObserver(function(n){n[0].isIntersecting&&!e.isLoaded&&function(n){var o=e.data.get("src");if(o){var r=e.element;e.isLoading=!0,e.loading&&t("loading").call(e,o),r.onload=function(){!function(n){e.isLoading=!1,e.isLoaded=!0,e.loading&&t("loaded").call(e,n)}(o)},r.src=o}}()},n),observe:function(){this.observer.observe(e.element)},unObserve:function(){this.observer.unobserve(e.element)},disconnect:function(){e.unObserve(),o()}}),e.observe()},u=function(e){function n(n){var t;return(t=e.call(this,n)||this).isLoading=!1,t.isLoaded=!1,t.options={rootMargin:"10%"},requestAnimationFrame(function(){s(r(t),t.options)}),t}o(n,e);var t=n.prototype;return t.observe=function(){},t.unObserve=function(){},t.loading=function(e){},t.loaded=function(e){},n}(n.Controller),c=function(e){var n=e.disconnect;Object.assign(e,{observer:new ResizeObserver(function(n){var t=n[0];e.resize&&function(n){var t=e.resize;if("function"==typeof t)return t;throw new Error('undefined method "resize"')}().call(e,t.contentRect)}),observe:function(){this.observer.observe(e.element)},unObserve:function(){this.observer.unobserve(e.element)},disconnect:function(){e.unObserve(),n()}}),e.observe()},a=function(e){function n(n){var t;return t=e.call(this,n)||this,requestAnimationFrame(function(){c(r(t))}),t}o(n,e);var t=n.prototype;return t.observe=function(){},t.unObserve=function(){},t.resize=function(e){},n}(n.Controller),f=function(e){Object.defineProperty(e,"isPreview",{get:function(){return document.documentElement.hasAttribute("data-turbolinks-preview")}}),Object.defineProperty(e,"csrfToken",{get:function(){return this.metaValue("csrf-token")}}),Object.assign(e,{dispatch:function(n,t){var o=void 0===t?{}:t,r=o.target,i=void 0===r?e.element:r,s=o.detail,u=void 0===s?{}:s,c=o.bubbles,a=void 0===c||c,f=o.cancelable,l=void 0===f||f;Object.assign(u,{controller:e});var v=new CustomEvent(e.identifier+":"+n,{detail:u,bubbles:a,cancelable:l});return i.dispatchEvent(v),v},metaValue:function(e){var n=document.head.querySelector('meta[name="'+e+'"]');return n&&n.getAttribute("content")}})};e.ApplicationController=function(e){function n(n){var t;return(t=e.call(this,n)||this).isPreview=!1,t.csrfToken="",f(r(t)),t}o(n,e);var t=n.prototype;return t.dispatch=function(e,n){},t.metaValue=function(e){return""},n}(n.Controller),e.IntersectionController=i,e.LazyLoadController=u,e.ResizeController=a,e.useApplication=f,e.useIntersection=t,e.useLazyLoad=s,e.useResize=c});
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("stimulus")):"function"==typeof define&&define.amd?define(["exports","stimulus"],n):n((e=e||self).stimulusUse={},e.stimulus)}(this,function(e,n){var t=function(e,n){var t=e[n];if("function"==typeof t)return t;throw new Error('undefined method "'+n+'"')},i=function(e,n,t){var i=e;return!0===t?i=n.identifier+":"+e:"string"==typeof t&&(i=t+":"+e),i},o=function(e,n,t){var i=n||{bubbles:!0,cancelable:!0,composed:!0},o=i.bubbles,r=i.cancelable,s=i.composed;return n&&Object.assign(t,{originalEvent:n}),new CustomEvent(e,{bubbles:o,cancelable:r,composed:s,detail:t})},r={dispatchEvent:!0,eventPrefix:!0},s=function(e,n){var s;void 0===n&&(n={});var c=Object.assign(r,n),u=c.dispatchEvent,a=c.eventPrefix,l=(null==(s=n)?void 0:s.element)||e.element,v=e.disconnect;Object.assign(e,{isVisible:!1,observer:new IntersectionObserver(function(n){var r=n[0];r.isIntersecting?function(n){if(e.isVisible=!0,e.appear&&t(e,"appear").call(e,n),u){var r=i("appear",e,a),s=o(r,null,{controller:e,entry:n});l.dispatchEvent(s)}}(r):e.isVisible&&function(n){if(e.isVisible=!1,e.disappear&&t(e,"disappear").call(e,n),u){var r=i("disappear",e,a),s=o(r,null,{controller:e,entry:n});l.dispatchEvent(s)}}(r)},n),observe:function(){this.observer.observe(l)},unObserve:function(){this.observer.unobserve(l)},disconnect:function(){e.unObserve(),v()}}),e.observe()};function c(e,n){e.prototype=Object.create(n.prototype),e.prototype.constructor=e,e.__proto__=n}function u(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}var a=function(e){function n(n){var t;return(t=e.call(this,n)||this).isVisible=!1,t.options={},requestAnimationFrame(function(){s(u(t),t.options)}),t}c(n,e);var t=n.prototype;return t.observe=function(){},t.unObserve=function(){},t.appear=function(e){},t.disappear=function(e){},n}(n.Controller),l=function(e,n){var i=e.disconnect;Object.assign(e,{isVisible:!1,observer:new IntersectionObserver(function(n){n[0].isIntersecting&&!e.isLoaded&&function(n){var i=e.data.get("src");if(i){var o=e.element;e.isLoading=!0,e.loading&&t(e,"loading").call(e,i),o.onload=function(){!function(n){e.isLoading=!1,e.isLoaded=!0,e.loading&&t(e,"loaded").call(e,n)}(i)},o.src=i}}()},n),observe:function(){this.observer.observe(e.element)},unObserve:function(){this.observer.unobserve(e.element)},disconnect:function(){e.unObserve(),i()}}),e.observe()},v=function(e){function n(n){var t;return(t=e.call(this,n)||this).isLoading=!1,t.isLoaded=!1,t.options={rootMargin:"10%"},requestAnimationFrame(function(){l(u(t),t.options)}),t}c(n,e);var t=n.prototype;return t.observe=function(){},t.unObserve=function(){},t.loading=function(e){},t.loaded=function(e){},n}(n.Controller),d={dispatchEvent:!0,eventPrefix:!0},f=function(e,n){var r;void 0===n&&(n={});var s=Object.assign(d,n),c=s.dispatchEvent,u=s.eventPrefix,a=(null==(r=n)?void 0:r.element)||e.element,l=e.disconnect;Object.assign(e,{observer:new ResizeObserver(function(n){var r=n[0];if(e.resize&&t(e,"resize").call(e,r.contentRect),c){var s=i("resize",e,u),l=o(s,null,{controller:e,entry:r});a.dispatchEvent(l)}}),observe:function(){this.observer.observe(a)},unObserve:function(){this.observer.unobserve(a)},disconnect:function(){e.unObserve(),l()}}),e.observe()},b=function(e){function n(n){var t;return(t=e.call(this,n)||this).options={},requestAnimationFrame(function(){f(u(t),t.options)}),t}c(n,e);var t=n.prototype;return t.observe=function(){},t.unObserve=function(){},t.resize=function(e){},n}(n.Controller),p={events:["click","touchend"],onlyVisible:!0,dispatchEvent:!0,eventPrefix:!0},h=function(e,n){void 0===n&&(n={});var r=Object.assign(p,n),s=r.onlyVisible,c=r.dispatchEvent,u=r.events,a=r.eventPrefix,l=function(r){var u,l,v=(null==(u=n)?void 0:u.element)||e.element;if(!v.contains(r.target)&&((l=v.getBoundingClientRect()).top>=0&&l.left>=0&&l.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&l.right<=(window.innerWidth||document.documentElement.clientWidth)||!s)&&(e.clickOutside&&t(e,"clickOutside").call(e,r),c)){var d=i("click:outside",e,a),f=o(d,r,{controller:e});v.dispatchEvent(f)}};null==u||u.forEach(function(e){window.addEventListener(e,l,!1)});var v=e.disconnect;Object.assign(e,{disconnect:function(){null==u||u.forEach(function(e){window.removeEventListener(e,l,!1)}),v()}})},m=function(e){function n(n){var t;return(t=e.call(this,n)||this).options={},requestAnimationFrame(function(){h(u(t),t.options)}),t}return c(n,e),n.prototype.clickOutside=function(e){},n}(n.Controller),g=function(e){Object.defineProperty(e,"isPreview",{get:function(){return document.documentElement.hasAttribute("data-turbolinks-preview")}}),Object.defineProperty(e,"csrfToken",{get:function(){return this.metaValue("csrf-token")}}),Object.assign(e,{dispatch:function(n,t){var i=void 0===t?{}:t,o=i.target,r=void 0===o?e.element:o,s=i.detail,c=void 0===s?{}:s,u=i.bubbles,a=void 0===u||u,l=i.cancelable,v=void 0===l||l;Object.assign(c,{controller:e});var d=new CustomEvent(e.identifier+":"+n,{detail:c,bubbles:a,cancelable:v});return r.dispatchEvent(d),d},metaValue:function(e){var n=document.head.querySelector('meta[name="'+e+'"]');return n&&n.getAttribute("content")}})};e.ApplicationController=function(e){function n(n){var t;return(t=e.call(this,n)||this).isPreview=!1,t.csrfToken="",g(u(t)),t}c(n,e);var t=n.prototype;return t.dispatch=function(e,n){},t.metaValue=function(e){return""},n}(n.Controller),e.ClickOutsideController=m,e.IntersectionController=a,e.LazyLoadController=v,e.ResizeController=b,e.useApplication=g,e.useClickOutside=h,e.useIntersection=s,e.useLazyLoad=l,e.useResize=f});
 //# sourceMappingURL=index.umd.js.map

dist/use-intersection/intersection-controller.d.ts

 import { Controller, Context } from 'stimulus';
+import { IntersectionOptions } from './use-intersection';
 export declare class IntersectionController extends Controller {
     isVisible: boolean;
-    options: IntersectionObserverInit;
+    options: IntersectionOptions;
     observer: IntersectionObserver;
@@ -6,0 +7,0 @@ constructor(context: Context);

dist/use-intersection/use-intersection.d.ts

 import { IntersectionController } from './intersection-controller';
-export declare const useIntersection: (controller: IntersectionController, options?: IntersectionObserverInit | undefined) => void;
+export interface IntersectionOptions extends IntersectionObserverInit {
+    element?: Element;
+    dispatchEvent?: boolean;
+    eventPrefix?: boolean | string;
+}
+export declare const useIntersection: (controller: IntersectionController, options?: IntersectionOptions) => void;
 //# sourceMappingURL=use-intersection.d.ts.map

dist/use-intersection/use-intersection.js

@@ -0,9 +1,10 @@
+import { method, extendedEvent, composeEventName } from '../support';
+var defaultOptions = {
+    dispatchEvent: true,
+    eventPrefix: true,
+};
 export var useIntersection = function (controller, options) {
-    var method = function (methodName) {
-        var method = controller[methodName];
-        if (typeof method == 'function') {
-            return method;
-        }
-        throw new Error("undefined method \"" + methodName + "\"");
-    };
+    if (options === void 0) { options = {}; }
+    var _a = Object.assign(defaultOptions, options), dispatchEvent = _a.dispatchEvent, eventPrefix = _a.eventPrefix;
+    var targetElement = (options === null || options === void 0 ? void 0 : options.element) || controller.element;
     var callback = function (entries) {
@@ -20,9 +21,22 @@ var entry = entries[0];
         controller.isVisible = true;
-        controller.appear && method('appear').call(controller, entry);
+        controller.appear && method(controller, 'appear').call(controller, entry);
+        // emit a custom "appear" event
+        if (dispatchEvent) {
+            var eventName = composeEventName('appear', controller, eventPrefix);
+            var appearEvent = extendedEvent(eventName, null, { controller: controller, entry: entry });
+            targetElement.dispatchEvent(appearEvent);
+        }
     };
     var dispatchDisappear = function (entry) {
         controller.isVisible = false;
-        controller.disappear && method('disappear').call(controller, entry);
+        controller.disappear && method(controller, 'disappear').call(controller, entry);
+        // emit a custom "disappear" event
+        if (dispatchEvent) {
+            var eventName = composeEventName('disappear', controller, eventPrefix);
+            var disappearEvent = extendedEvent(eventName, null, { controller: controller, entry: entry });
+            targetElement.dispatchEvent(disappearEvent);
+        }
     };
-    // keep a copy of the current disconnect() function of the controller to not override it
+    // keep a copy of the current disconnect() function of the controller
+    // to support composing several behaviors
     var controllerDisconnect = controller.disconnect;
@@ -33,6 +47,6 @@ Object.assign(controller, {
         observe: function () {
-            this.observer.observe(controller.element);
+            this.observer.observe(targetElement);
         },
         unObserve: function () {
-            this.observer.unobserve(controller.element);
+            this.observer.unobserve(targetElement);
         },
@@ -39,0 +53,0 @@ disconnect: function () {

dist/use-lazy-load/useLazyLoad.js

@@ -1,10 +0,3 @@
-// import { useIntersection, IntersectionController } from '../'
+import { method } from '../support';
 export var useLazyLoad = function (controller, options) {
-    var method = function (methodName) {
-        var method = controller[methodName];
-        if (typeof method == 'function') {
-            return method;
-        }
-        throw new Error("undefined method \"" + methodName + "\"");
-    };
     var callback = function (entries) {
@@ -22,3 +15,3 @@ var entry = entries[0];
         controller.isLoading = true;
-        controller.loading && method('loading').call(controller, src);
+        controller.loading && method(controller, 'loading').call(controller, src);
         imageElement.onload = function () {
@@ -32,3 +25,3 @@ handleLoaded(src);
         controller.isLoaded = true;
-        controller.loading && method('loaded').call(controller, src);
+        controller.loading && method(controller, 'loaded').call(controller, src);
     };
@@ -35,0 +28,0 @@ // keep a copy of the current disconnect() function of the controller to not override it

dist/use-resize/resize-controller.d.ts

 import { Controller, Context } from 'stimulus';
+import { ResizeOptions } from './use-resize';
 export declare class ResizeController extends Controller {
     observer: ResizeObserver;
+    options: ResizeOptions;
     constructor(context: Context);
@@ -5,0 +7,0 @@ observe(): void;

dist/use-resize/resize-controller.js

@@ -20,4 +20,5 @@ var __extends = (this && this.__extends) || (function () {
         var _this = _super.call(this, context) || this;
+        _this.options = {};
         requestAnimationFrame(function () {
-            useResize(_this);
+            useResize(_this, _this.options);
         });
@@ -24,0 +25,0 @@ return _this;

dist/use-resize/use-resize.d.ts

 import { ResizeController } from './resize-controller';
-export declare const useResize: (controller: ResizeController) => void;
+export interface ResizeOptions {
+    element?: Element;
+    dispatchEvent?: boolean;
+    eventPrefix?: boolean | string;
+}
+export declare const useResize: (controller: ResizeController, options?: ResizeOptions) => void;
 //# sourceMappingURL=use-resize.d.ts.map

dist/use-resize/use-resize.js

@@ -1,12 +0,22 @@
-export var useResize = function (controller) {
-    var method = function (methodName) {
-        var method = controller[methodName];
-        if (typeof method == 'function') {
-            return method;
-        }
-        throw new Error("undefined method \"" + methodName + "\"");
-    };
+import { method, extendedEvent, composeEventName } from '../support';
+var defaultOptions = {
+    dispatchEvent: true,
+    eventPrefix: true,
+};
+export var useResize = function (controller, options) {
+    if (options === void 0) { options = {}; }
+    var _a = Object.assign(defaultOptions, options), dispatchEvent = _a.dispatchEvent, eventPrefix = _a.eventPrefix;
+    var targetElement = (options === null || options === void 0 ? void 0 : options.element) || controller.element;
     var callback = function (entries) {
         var entry = entries[0];
-        controller.resize && method('resize').call(controller, entry.contentRect);
+        controller.resize && method(controller, 'resize').call(controller, entry.contentRect);
+        // emit a custom "controllerIdentifier:resize" event
+        if (dispatchEvent) {
+            var eventName = composeEventName('resize', controller, eventPrefix);
+            var appearEvent = extendedEvent(eventName, null, {
+                controller: controller,
+                entry: entry,
+            });
+            targetElement.dispatchEvent(appearEvent);
+        }
     };
@@ -17,6 +27,6 @@ var controllerDisconnect = controller.disconnect;
         observe: function () {
-            this.observer.observe(controller.element);
+            this.observer.observe(targetElement);
         },
         unObserve: function () {
-            this.observer.unobserve(controller.element);
+            this.observer.unobserve(targetElement);
         },
@@ -23,0 +33,0 @@ disconnect: function () {

package.json

 {
   "name": "stimulus-use",
-  "version": "0.9.4",
+  "version": "0.10.0",
   "description": "A collection of standard controllers and utilities for Stimulus",
@@ -5,0 +5,0 @@ "main": "dist/index.umd.js",

README.md

@@ -47,2 +47,3 @@ <p align="center">
   |[`useResize`](./docs/use-resize.md) </br>`ResizeController`|Tracks the element's size and adds a new lifecyle callback **resize**.|`resize`|
+  |[`useClickOutside`](./docs/use-click-outside.md) </br>`ClickOutsideController`|Tracks the clicks outside of the element and adds a new lifecyle callback **clickOutside**.|`clickOutside`|
 
@@ -136,2 +137,3 @@ - **Application**
     <td align="center"><a href="https://marcoroth.dev"><img src="https://avatars2.githubusercontent.com/u/6411752?v=4" width="100px;" alt=""/><br /><sub><b>Marco Roth</b></sub></a><br /><a href="#infra-marcoroth" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
+    <td align="center"><a href="http://philippdaun.net"><img src="https://avatars3.githubusercontent.com/u/22225348?v=4" width="100px;" alt=""/><br /><sub><b>Philipp Daun</b></sub></a><br /><a href="https://github.com/stimulus-use/stimulus-use/issues?q=author%3Adaun" title="Bug reports">🐛</a></td>
   </tr>
@@ -138,0 +140,0 @@ </table>

src/index.ts

 export { useIntersection, IntersectionController } from './use-intersection'
 export { useLazyLoad, LazyLoadController } from './use-lazy-load'
 export { useResize, ResizeController } from './use-resize'
+export { useClickOutside, ClickOutsideController } from './use-click-outside'
 export { useApplication, ApplicationController } from './use-application'

src/use-intersection/intersection-controller.ts

 import { Controller, Context } from 'stimulus'
-import { useIntersection } from './use-intersection'
+import { useIntersection, IntersectionOptions } from './use-intersection'
 
 export class IntersectionController extends Controller {
   isVisible: boolean = false
-  options: IntersectionObserverInit = {}
+  options: IntersectionOptions = {}
   observer!: IntersectionObserver
@@ -8,0 +8,0 @@

src/use-intersection/use-intersection.ts

 import { IntersectionController } from './intersection-controller'
+import { method, extendedEvent, composeEventName } from '../support'
 
-export const useIntersection = (controller: IntersectionController, options?: IntersectionObserverInit) => {
-  const method = (methodName: string): Function => {
-    const method = (controller as any)[methodName]
-    if (typeof method == 'function') {
-      return method
-    }
-    throw new Error(`undefined method "${methodName}"`)
-  }
+export interface IntersectionOptions extends IntersectionObserverInit {
+  element?: Element
+  dispatchEvent?: boolean
+  eventPrefix?: boolean | string
+}
 
+const defaultOptions = {
+  dispatchEvent: true,
+  eventPrefix: true,
+}
+
+export const useIntersection = (controller: IntersectionController, options: IntersectionOptions = {}) => {
+  const { dispatchEvent, eventPrefix } = Object.assign(defaultOptions, options)
+  const targetElement: Element = options?.element || controller.element
+
   const callback = (entries: IntersectionObserverEntry[]) => {
@@ -23,3 +30,11 @@ const [entry] = entries
     controller.isVisible = true
-    controller.appear && method('appear').call(controller, entry)
+    controller.appear && method(controller, 'appear').call(controller, entry)
+
+    // emit a custom "appear" event
+    if (dispatchEvent) {
+      const eventName = composeEventName('appear', controller, eventPrefix)
+
+      const appearEvent = extendedEvent(eventName, null, { controller, entry })
+      targetElement.dispatchEvent(appearEvent)
+    }
   }
@@ -29,6 +44,15 @@
     controller.isVisible = false
-    controller.disappear && method('disappear').call(controller, entry)
+    controller.disappear && method(controller, 'disappear').call(controller, entry)
+
+    // emit a custom "disappear" event
+    if (dispatchEvent) {
+      const eventName = composeEventName('disappear', controller, eventPrefix)
+
+      const disappearEvent = extendedEvent(eventName, null, { controller, entry })
+      targetElement.dispatchEvent(disappearEvent)
+    }
   }
 
-  // keep a copy of the current disconnect() function of the controller to not override it
+  // keep a copy of the current disconnect() function of the controller
+  // to support composing several behaviors
   const controllerDisconnect = controller.disconnect
@@ -40,6 +64,6 @@
     observe() {
-      this.observer.observe(controller.element)
+      this.observer.observe(targetElement)
     },
     unObserve() {
-      this.observer.unobserve(controller.element)
+      this.observer.unobserve(targetElement)
     },
@@ -46,0 +70,0 @@ disconnect() {

src/use-lazy-load/useLazyLoad.ts

 import { LazyLoadController } from './lazy-load-controller'
-// import { useIntersection, IntersectionController } from '../'
+import { method } from '../support'
 
 export const useLazyLoad = (controller: LazyLoadController, options?: IntersectionObserverInit) => {
-  const method = (methodName: string): Function => {
-    const method = (controller as any)[methodName]
-    if (typeof method == 'function') {
-      return method
-    }
-    throw new Error(`undefined method "${methodName}"`)
-  }
-
   const callback = (entries: IntersectionObserverEntry[]) => {
@@ -26,3 +18,3 @@ const [entry] = entries
     controller.isLoading = true
-    controller.loading && method('loading').call(controller, src)
+    controller.loading && method(controller, 'loading').call(controller, src)
     imageElement.onload = () => {
@@ -38,3 +30,3 @@ handleLoaded(src)
     controller.isLoaded = true
-    controller.loading && method('loaded').call(controller, src)
+    controller.loading && method(controller, 'loaded').call(controller, src)
   }
@@ -41,0 +33,0 @@

src/use-resize/resize-controller.ts

 import { Controller, Context } from 'stimulus'
-import { useResize } from './use-resize'
+import { useResize, ResizeOptions } from './use-resize'
 
 export class ResizeController extends Controller {
   observer!: ResizeObserver
+  options: ResizeOptions = {}
 
@@ -10,3 +11,3 @@ constructor(context: Context) {
     requestAnimationFrame(() => {
-      useResize(this)
+      useResize(this, this.options)
     })
@@ -13,0 +14,0 @@ }

src/use-resize/use-resize.ts

 import { ResizeController } from './resize-controller'
+import { method, extendedEvent, composeEventName } from '../support'
 
-export const useResize = (controller: ResizeController) => {
-  const method = (methodName: string): Function => {
-    const method = (controller as any)[methodName]
-    if (typeof method == 'function') {
-      return method
-    }
-    throw new Error(`undefined method "${methodName}"`)
-  }
+export interface ResizeOptions {
+  element?: Element
+  dispatchEvent?: boolean
+  eventPrefix?: boolean | string
+}
 
+const defaultOptions = {
+  dispatchEvent: true,
+  eventPrefix: true,
+}
+
+export const useResize = (controller: ResizeController, options: ResizeOptions = {}) => {
+  const { dispatchEvent, eventPrefix } = Object.assign(defaultOptions, options)
+  const targetElement: Element = options?.element || controller.element
+
   const callback = (entries: ResizeObserverEntry[]) => {
     const [entry] = entries
-    controller.resize && method('resize').call(controller, entry.contentRect)
+    controller.resize && method(controller, 'resize').call(controller, entry.contentRect)
+
+    // emit a custom "controllerIdentifier:resize" event
+    if (dispatchEvent) {
+      const eventName = composeEventName('resize', controller, eventPrefix)
+      const appearEvent = extendedEvent(eventName, null, {
+        controller,
+        entry,
+      })
+      targetElement.dispatchEvent(appearEvent)
+    }
   }
@@ -22,6 +39,6 @@
     observe() {
-      this.observer.observe(controller.element)
+      this.observer.observe(targetElement)
     },
     unObserve() {
-      this.observer.unobserve(controller.element)
+      this.observer.unobserve(targetElement)
     },
@@ -28,0 +45,0 @@ disconnect() {

No alert changes

Improved metrics

Total package byte prevSize

99768

increased by41.52%

Number of package files

91

increased by28.17%

Lines of code

1140

increased by35.23%

Number of lines in readme file

145

increased by1.4%

No dependency changes