implementation

packages/resize/builds/cdn.js

@@ -0,0 +1,5 @@
+import resize from '../src/index.js'
+
+document.addEventListener('alpine:init', () => {
+    window.Alpine.plugin(resize)
+})

packages/resize/builds/module.js

@@ -0,0 +1,5 @@
+import resize from './../src/index.js'
+
+export default resize
+
+export { resize }

packages/resize/package.json

@@ -0,0 +1,17 @@
+{
+    "name": "@alpinejs/resize",
+    "version": "3.14.1",
+    "description": "Trigger JavaScript when an element is resized on the page",
+    "homepage": "https://alpinejs.dev/plugins/intersect",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/alpinejs/alpine.git",
+        "directory": "packages/resize"
+    },
+    "author": "Caleb Porzio",
+    "license": "MIT",
+    "main": "dist/module.cjs.js",
+    "module": "dist/module.esm.js",
+    "unpkg": "dist/cdn.min.js",
+    "dependencies": {}
+}

packages/resize/src/index.js

@@ -0,0 +1,59 @@
+export default function (Alpine) {
+    Alpine.directive('resize', Alpine.skipDuringClone((el, { value, expression, modifiers }, { evaluateLater, cleanup }) => {
+        let evaluator = evaluateLater(expression)
+
+        let evaluate = (width, height) => {
+            evaluator(() => {}, { scope: { '$width': width, '$height': height }})
+        }
+
+        let off = modifiers.includes('document')
+            ? onDocumentResize(evaluate)
+            : onElResize(el, evaluate)
+
+        cleanup(() => off())
+    }))
+}
+
+function onElResize(el, callback) {
+    let observer = new ResizeObserver((entries) => {
+        let [width, height] = dimensions(entries)
+
+        callback(width, height)
+    })
+
+    observer.observe(el)
+
+    return () => observer.disconnect()
+}
+
+let documentResizeObserver
+let documentResizeObserverCallbacks = new Set
+
+function onDocumentResize(callback) {
+    documentResizeObserverCallbacks.add(callback)
+
+    if (! documentResizeObserver) {
+        documentResizeObserver = new ResizeObserver((entries) => {
+            let [width, height] = dimensions(entries)
+
+            documentResizeObserverCallbacks.forEach(i => i(width, height))
+        })
+
+        documentResizeObserver.observe(document.documentElement)
+    }
+
+    return () => {
+        documentResizeObserverCallbacks.delete(callback)
+    }
+}
+
+function dimensions(entries) {
+    let width, height
+
+    for (let entry of entries) {
+        width = entry.borderBoxSize[0].inlineSize
+        height = entry.borderBoxSize[0].blockSize
+    }
+
+    return [width, height]
+}

scripts/build.js

@@ -9,8 +9,9 @@ let zlib = require('zlib');
     // 'history', - removed because this plugin has been moved to livewire/livewire until it's stable...
     // 'navigate', - remove because this plugin has been moved to livewire/livewire until it's stable...
     'intersect',
-    'persist',
     'collapse',
+    'persist',
+    'resize',
     'anchor',
     'morph',
     'focus',

scripts/release.js

@@ -45,6 +45,9 @@ function writeNewAlpineVersion() {
     writeToPackageDotJson('intersect', 'version', version)
     console.log('Bumping @alpinejs/intersect package.json: '+version)
 
+    writeToPackageDotJson('resize', 'version', version)
+    console.log('Bumping @alpinejs/resize package.json: '+version)
+
     writeToPackageDotJson('persist', 'version', version)
     console.log('Bumping @alpinejs/persist package.json: '+version)
 
@@ -92,6 +95,9 @@ function publish() {
     console.log('Publishing @alpinejs/intersect on NPM...');
     runFromPackage('intersect', 'npm publish --access public')
 
+    console.log('Publishing @alpinejs/resize on NPM...');
+    runFromPackage('resize', 'npm publish --access public')
+
     console.log('Publishing @alpinejs/persist on NPM...');
     runFromPackage('persist', 'npm publish --access public')
 

tests/cypress/integration/plugins/resize.spec.js

@@ -0,0 +1,48 @@
+import { haveText, test, html, notHaveText } from '../../utils'
+
+test('can react to the resizing of an element',
+    [html`
+    <div x-data="{ width: 0, height: 0 }">
+        <h1 x-text="width"></h1>
+        <h2 x-text="height"></h2>
+
+        <div x-ref="target" x-resize="width = $width; height = $height" style="width: 100px; height: 100px; background: red">
+        </div>
+
+        <button id="1" x-on:click="$refs.target.style.width = 50 + 'px'">resize width</button>
+        <button id="2" x-on:click="$refs.target.style.height = 50 + 'px'">resize height</button>
+    </div>
+    `],
+    ({ get }) => {
+        get('h1').should(haveText('100'))
+        get('h2').should(haveText('100'))
+        get('button#1').click()
+        get('h1').should(haveText('50'))
+        get('h2').should(haveText('100'))
+        get('button#2').click()
+        get('h1').should(haveText('50'))
+        get('h2').should(haveText('50'))
+    },
+)
+
+test('can react to the resizing of the document',
+    [html`
+    <div x-data="{ width: 0, height: 0 }">
+        <h1 x-text="width"></h1>
+        <h2 x-text="height"></h2>
+
+        <div x-ref="target" x-resize.document="width = $width; height = $height" style="width: 100px; height: 100px; background: red">
+    </div>
+    `],
+    ({ get }) => {
+        get('h1').should(notHaveText('0'))
+        get('h2').should(notHaveText('0'))
+        get('h1').should(notHaveText('100'))
+        get('h2').should(notHaveText('100'))
+
+        cy.viewport(550, 750)
+
+        get('h1').should(haveText('550'))
+        get('h2').should(haveText('750'))
+    },
+)

tests/cypress/spec.html

@@ -12,6 +12,7 @@
     <script src="/../../packages/intersect/dist/cdn.js"></script>
     <script src="/../../packages/collapse/dist/cdn.js"></script>
     <script src="/../../packages/anchor/dist/cdn.js"></script>
+    <script src="/../../packages/resize/dist/cdn.js"></script>
     <script src="/../../packages/mask/dist/cdn.js"></script>
     <script src="/../../packages/sort/dist/cdn.js"></script>
     <script src="/../../packages/ui/dist/cdn.js"></script>