feat: bind activeElement and pointerLockElement in <svelte:document>

Author: wackbyte

.changeset/lovely-bugs-sneeze.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+feat: bind `activeElement` and `pointerLockElement` in `<svelte:document>`

documentation/docs/02-template-syntax/07-special-elements.md

@@ -268,7 +268,9 @@ As with `<svelte:window>`, this element may only appear the top level of your co
 
 You can also bind to the following properties:
 
+- `activeElement`
 - `fullscreenElement`
+- `pointerLockElement`
 - `visibilityState`
 
 All are readonly.

packages/svelte/elements.d.ts

@@ -1364,7 +1364,9 @@ export interface SvelteMediaTimeRange {
 }
 
 export interface SvelteDocumentAttributes extends HTMLAttributes<Document> {
+	readonly 'bind:activeElement'?: Document['activeElement'] | undefined | null;
 	readonly 'bind:fullscreenElement'?: Document['fullscreenElement'] | undefined | null;
+	readonly 'bind:pointerLockElement'?: Document['pointerLockElement'] | undefined | null;
 	readonly 'bind:visibilityState'?: Document['visibilityState'] | undefined | null;
 }
 

packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js

@@ -2773,6 +2773,11 @@ export const template_visitors = {
 					call_expr = b.call('$.bind_window_size', b.literal(node.name), setter);
 					break;
 
+				// document
+				case 'activeElement':
+					call_expr = b.call('$.bind_active_element', setter);
+					break;
+
 				// media
 				case 'muted':
 					call_expr = b.call(`$.bind_muted`, state.node, getter, setter);

packages/svelte/src/compiler/phases/bindings.js

@@ -86,11 +86,20 @@ export const binding_properties = {
 		omit_in_ssr: true
 	},
 	// document
+	activeElement: {
+		valid_elements: ['svelte:document'],
+		omit_in_ssr: true
+	},
 	fullscreenElement: {
 		valid_elements: ['svelte:document'],
 		event: 'fullscreenchange',
 		omit_in_ssr: true
 	},
+	pointerLockElement: {
+		valid_elements: ['svelte:document'],
+		event: 'pointerlockchange',
+		omit_in_ssr: true
+	},
 	visibilityState: {
 		valid_elements: ['svelte:document'],
 		event: 'visibilitychange',

packages/svelte/src/internal/client/dom/elements/bindings/document.js

@@ -0,0 +1,23 @@
+import { render_effect } from '../../../reactivity/effects.js';
+
+/**
+ * @param {(activeElement: Element | null) => void} update
+ * @returns {void}
+ */
+export function bind_active_element(update) {
+	var handler = () => {
+		update(document.activeElement);
+	};
+
+	handler();
+
+	document.addEventListener('focus', handler, true);
+	document.addEventListener('blur', handler, true);
+
+	render_effect(() => {
+		return () => {
+			document.removeEventListener('focus', handler);
+			document.removeEventListener('blur', handler);
+		};
+	});
+}

packages/svelte/src/internal/client/dom/elements/bindings/shared.js

@@ -4,7 +4,7 @@ import { add_form_reset_listener } from '../misc.js';
 /**
  * Fires the handler once immediately (unless corresponding arg is set to `false`),
  * then listens to the given events until the render effect context is destroyed
- * @param {Element | Window} target
+ * @param {EventTarget} target
  * @param {Array<string>} events
  * @param {() => void} handler
  * @param {any} call_handler_immediately

packages/svelte/src/internal/client/index.js

@@ -36,6 +36,7 @@ export { event, delegate, replay_events } from './dom/elements/events.js';
 export { autofocus, remove_textarea_child } from './dom/elements/misc.js';
 export { set_style } from './dom/elements/style.js';
 export { animation, transition } from './dom/elements/transitions.js';
+export { bind_active_element } from './dom/elements/bindings/document.js';
 export { bind_checked, bind_files, bind_group, bind_value } from './dom/elements/bindings/input.js';
 export {
 	bind_buffered,

packages/svelte/tests/validator/samples/document-binding-invalid-dimensions/errors.json

@@ -1,7 +1,7 @@
 [
 	{
 		"code": "bind_invalid_name",
-		"message": "`bind:clientWidth` is not a valid binding. Possible bindings for <svelte:document> are focused, fullscreenElement, visibilityState, this",
+		"message": "`bind:clientWidth` is not a valid binding. Possible bindings for <svelte:document> are focused, activeElement, fullscreenElement, pointerLockElement, visibilityState, this",
 		"start": {
 			"line": 5,
 			"column": 17