Merge pull request #33 from UrbanInstitute/add-resize-action

add resizeObserver action

CHANGELOG.md

@@ -5,6 +5,8 @@
 
 - Updates Github action versions
 
+- Add resizeObserver action
+
 ## 0.4.0
 
 - Add SectionBreak component

package.json

@@ -30,6 +30,10 @@
     "./stores": {
       "types": "./dist/stores/index.d.ts",
       "svelte": "./dist/stores/index.js"
+    },
+    "./actions": {
+      "types": "./dist/actions/index.d.ts",
+      "svelte": "./dist/actions/index.js"
     }
   },
   "files": [

src/lib/actions/index.js

@@ -0,0 +1 @@
+export { default as resizeObserver } from './resizeObserver';

src/lib/actions/resizeObserver.js

@@ -0,0 +1,34 @@
+// Shamelessly stolen from https://github.com/reuters-graphics/graphics-components/blob/e81349ae7dcd6509c79dae42e6f287a29652c4ac/src/actions/resizeObserver/index.js#L8
+// Which was, in turn, shamelessly stolen from https://github.com/sveltejs/svelte/issues/7583#issue-1260717165
+
+/** @type {ResizeObserver} */
+let observer;
+/** @type {WeakMap<Element, (element: Element) => void>} */
+let callbacks;
+
+/**
+ * @param {Element} element
+ * @param {(element: Element) => any} onResize
+ * @returns {{ destroy: () => void }}
+ */
+export default (element, onResize) => {
+  if (!observer) {
+    callbacks = new WeakMap();
+    observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const onResize = callbacks.get(entry.target);
+        if (onResize) onResize(entry.target);
+      }
+    });
+  }
+
+  callbacks.set(element, onResize);
+  observer.observe(element);
+
+  return {
+    destroy: () => {
+      callbacks.delete(element);
+      observer.unobserve(element);
+    }
+  };
+};

src/stories/resizeObserver.mdx

@@ -0,0 +1,22 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="actions/resizeObserver" />
+
+# resizeObserver action
+
+An action you can use to easily to check when a DOM element's dimensions change using the Resize Observer API. Sometimes is more efficient and less bug prone than Svelte's built-in `bind:clientWidth` approach. This may change when [Svelte 5 switches to using resize observer instead of iframes under the hood](https://github.com/sveltejs/svelte/issues/7583#issuecomment-1905763916).
+
+## Usage
+
+```js
+<script>
+  import { resizeObserver } from '@urbaninstitute/dataviz-components/actions';
+
+  let width = 0;
+</script>
+
+<div use:resizeObserver="{(el) => (width = el.clientWidth)}">
+  My width is: {width}
+</div>
+```
+