Add `data-on-resize` (#759)

* Add `data-on-resize`

* Add docs and release note

* Revert removals

* Rename element ID

* Fix `package.json` code gen

* Cleanup

CHANGELOG.md

@@ -6,6 +6,10 @@ Each tagged version of Datastar is accompanied by a release note. Read the [rele
 
 ## v1.0.0-beta.10
 
+### Added
+
+- Added the `data-on-resize` attribute that attaches a [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to the element, and executes the expression each time the element’s dimensions change ([#759](https://github.com/starfederation/datastar/issues/759)).
+
 ### Changed
 
 - Updated Idiomorph to version [0.7.3](https://github.com/bigskysoftware/idiomorph/releases/tag/v0.7.3).

README.md

@@ -10,7 +10,7 @@
 
 Datastar helps you build reactive web applications with the simplicity of server-side rendering and the power of a full-stack SPA framework.
 
-Getting started is as easy as adding a single 14.5 KiB script tag to your HTML.
+Getting started is as easy as adding a single 14.6 KiB script tag to your HTML.
 
 ```html
 <script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.9/bundles/datastar.js"></script>

build/consts_datastar_client.qtpl

@@ -85,6 +85,24 @@ export const Default{%s enum.Name.Pascal %} = {%s enum.Name.Pascal %}s.{%s enum.
   ],
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./plugins": {
+      "import": "./dist/plugins/index.js",
+      "types": "./dist/plugins/index.d.ts"
+    },
+    "./types": {
+      "import": "./dist/engine/types.js",
+      "types": "./dist/engine/types.d.ts"
+    },
+    "./bundles/*": {
+      "import": "./dist/bundles/*.js",
+      "types": "./dist/bundles/*.d.ts"
+    }
+  },
   "scripts": {
     "build": "tsc"
   },

library/README.md

@@ -10,7 +10,7 @@
 
 Datastar helps you build reactive web applications with the simplicity of server-side rendering and the power of a full-stack SPA framework.
 
-Getting started is as easy as adding a single 14.5 KiB script tag to your HTML.
+Getting started is as easy as adding a single 14.6 KiB script tag to your HTML.
 
 ```html
 <script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.9/bundles/datastar.js"></script>

library/src/plugins/official/dom/attributes/on.ts

@@ -109,7 +109,23 @@ export const On: AttributePlugin = {
       rafId = requestAnimationFrame(raf)
 
       return () => {
-        if (rafId) cancelAnimationFrame(rafId)
+        if (rafId) {
+          cancelAnimationFrame(rafId)
+        }
+      }
+    }
+
+    if (key === 'resize') {
+      let resizeObserver: ResizeObserver | null = new ResizeObserver(() => {
+        callback()
+      })
+      resizeObserver.observe(el)
+
+      return () => {
+        if (resizeObserver) {
+          resizeObserver.disconnect()
+          resizeObserver = null
+        }
       }
     }
 

sdk/go/consts.go

@@ -7,8 +7,8 @@ import "time"
 const (
     DatastarKey = "datastar"
     Version                   = "1.0.0-beta.9"
-    VersionClientByteSize     = 39967
-    VersionClientByteSizeGzip = 14939
+    VersionClientByteSize     = 40074
+    VersionClientByteSizeGzip = 14973
 
     //region Default durations
 

site/routes_tests.go

@@ -50,6 +50,7 @@ func setupTests(ctx context.Context, router chi.Router) (err error) {
 				{ID: "merge_fragment_whitespace"},
 				{ID: "on_load"},
 				{ID: "on_load_delay"},
+				{ID: "on_resize"},
 				{ID: "radio_value"},
 				{ID: "ref"},
 				{ID: "remove_fragment"},

site/smoketests/on_resize_test.go

@@ -0,0 +1,9 @@
+package smoketests
+
+import (
+	"testing"
+)
+
+func TestUnitOnResize(t *testing.T) {
+	setupPageTestOnDelay(t, "tests/on_resize")
+}

site/static/md/reference/attribute_plugins.md

@@ -215,7 +215,8 @@ Datastar provides a few special events of its own:
 1. `data-on-load` is triggered when an element is loaded into the DOM.
 2. `data-on-interval` is triggered at a regular interval. The interval duration defaults to 1 second and can be modified using the `__duration` modifier.
 3. `data-on-raf` is triggered on every [`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame) event.
-4. `data-on-signals-change` is triggered when any signals change. A key can be provided to only trigger the event when the signal with that key changes (`data-on-signals-change-foo`).
+4. `data-on-resize` is triggered whenever the element's dimensions change.
+5. `data-on-signals-change` is triggered when any signals change. A key can be provided to only trigger the event when the signal with that key changes (`data-on-signals-change-foo`).
 
 Note that the `evt` variable is _not_ available in the expression when using special events.
 

site/static/md/tests/on_resize.md

@@ -0,0 +1,11 @@
+# On Resize
+
+Tests that the on resize event is triggered when an element's dimensions are changed.
+
+<div data-signals-result="0" data-on-load="$result = 0" data-on-load__delay.100ms="testEl.style = 'width: 10px'">
+  <div id="testEl" data-on-resize="$result = 1"></div>
+  Result:
+  <code id="result" data-text="$result">0</code>
+  <hr />
+  Expected result on wait: <code>1</code>
+</div>