mount-observer 0.1.15 → 0.1.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,131 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.setupRootSizeObserver = setupRootSizeObserver;
4
- var Events_js_1 = require("./Events.js");
5
- function setupRootSizeObserver(init, rootNodeRef, mountedElements, modules, observer, processNode) {
6
- var whereObservedRootSizeMatches = init.whereObservedRootSizeMatches;
7
- if (!whereObservedRootSizeMatches) {
8
- throw new Error('whereObservedRootSizeMatches is required');
9
- }
10
- var rootNode = rootNodeRef.deref();
11
- if (!rootNode) {
12
- throw new Error('Root node has been garbage collected');
13
- }
14
- // Get the element to observe
15
- var rootElement = rootNode instanceof Element
16
- ? rootNode
17
- : rootNode.documentElement;
18
- if (!rootElement) {
19
- throw new Error('Could not determine root element for whereObservedRootSizeMatches');
20
- }
21
- // Parse the container query condition
22
- // Container queries use the same syntax as media queries: (min-width: 700px)
23
- var containerQuery = whereObservedRootSizeMatches;
24
- // Check if condition currently matches
25
- var conditionMatches = evaluateContainerQuery(rootElement, containerQuery);
26
- // Set up ResizeObserver to watch for size changes
27
- var resizeObserver = new ResizeObserver(function (entries) {
28
- for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
29
- var entry = entries_1[_i];
30
- var previousMatches = conditionMatches;
31
- conditionMatches = evaluateContainerQuery(entry.target, containerQuery);
32
- if (conditionMatches && !previousMatches) {
33
- // Condition now matches - process elements
34
- handleConditionMatch();
35
- }
36
- else if (!conditionMatches && previousMatches) {
37
- // Condition no longer matches - dismount all elements
38
- handleConditionUnmatch();
39
- }
40
- }
41
- });
42
- function handleConditionMatch() {
43
- // Process all elements in the observed node
44
- var rootNode = rootNodeRef.deref();
45
- if (rootNode) {
46
- processNode(rootNode);
47
- }
48
- }
49
- function handleConditionUnmatch() {
50
- // Dismount all currently mounted elements
51
- var rootNode = rootNodeRef.deref();
52
- if (!rootNode) {
53
- return;
54
- }
55
- var context = {
56
- modules: modules,
57
- observer: observer,
58
- rootNode: rootNode,
59
- mountConfig: init
60
- };
61
- // Get all mounted elements from the WeakDual setWeak
62
- var mountedElementsList = [];
63
- for (var _i = 0, _a = mountedElements.setWeak; _i < _a.length; _i++) {
64
- var ref = _a[_i];
65
- var element = ref.deref();
66
- if (element) {
67
- mountedElementsList.push(element);
68
- }
69
- }
70
- // Dismount each element
71
- for (var _b = 0, mountedElementsList_1 = mountedElementsList; _b < mountedElementsList_1.length; _b++) {
72
- var element = mountedElementsList_1[_b];
73
- // Remove from both structures
74
- mountedElements.weakSet.delete(element);
75
- for (var _c = 0, _d = mountedElements.setWeak; _c < _d.length; _c++) {
76
- var ref = _d[_c];
77
- if (ref.deref() === element) {
78
- mountedElements.setWeak.delete(ref);
79
- break;
80
- }
81
- }
82
- // Dispatch dismount event with reason
83
- observer.dispatchEvent(new Events_js_1.DismountEvent(element, 'root-size-failed', init));
84
- }
85
- }
86
- // Start observing the root element
87
- resizeObserver.observe(rootElement);
88
- return {
89
- conditionMatches: conditionMatches,
90
- cleanup: function () {
91
- resizeObserver.disconnect();
92
- }
93
- };
94
- }
95
- /**
96
- * Evaluate a container query condition against an element
97
- * Supports: min-width, max-width, min-height, max-height
98
- */
99
- function evaluateContainerQuery(element, query) {
100
- // Parse container query: (min-width: 700px) or (max-height: 500px)
101
- var match = query.match(/\(([^:]+):\s*([^)]+)\)/);
102
- if (!match) {
103
- console.warn("Invalid container query format: ".concat(query));
104
- return false;
105
- }
106
- var property = match[1], valueStr = match[2];
107
- var prop = property.trim();
108
- var value = parseFloat(valueStr);
109
- if (isNaN(value)) {
110
- console.warn("Invalid container query value: ".concat(valueStr));
111
- return false;
112
- }
113
- // Get element dimensions
114
- var rect = element.getBoundingClientRect();
115
- var width = rect.width;
116
- var height = rect.height;
117
- // Evaluate condition
118
- switch (prop) {
119
- case 'min-width':
120
- return width >= value;
121
- case 'max-width':
122
- return width <= value;
123
- case 'min-height':
124
- return height >= value;
125
- case 'max-height':
126
- return height <= value;
127
- default:
128
- console.warn("Unsupported container query property: ".concat(prop));
129
- return false;
130
- }
131
- }
@@ -1,70 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.upShadowSearch = upShadowSearch;
4
- /**
5
- * Searches for an element by ID, traversing up through shadow DOM boundaries.
6
- *
7
- * This function searches for an element with the specified ID starting from the reference
8
- * element's root node and continuing up through shadow DOM boundaries until the element
9
- * is found or the document root is reached.
10
- *
11
- * Registry-aware: Only searches in root nodes that share the same customElementRegistry
12
- * as the reference element. This respects scoped custom element registry boundaries.
13
- *
14
- * Search order:
15
- * 1. Check current root node using getElementById (if same registry)
16
- * 2. If in shadow root, check host element's properties for the ID
17
- * 3. Continue up to parent shadow root or document
18
- * 4. Handle disconnected fragments via targetFragment property
19
- *
20
- * @param ref - The reference element to start searching from
21
- * @param id - The ID of the element to find
22
- * @returns The found element, or null if not found
23
- *
24
- * @example
25
- * ```typescript
26
- * const template = document.querySelector('template[src="#myId"]');
27
- * const source = upShadowSearch(template, 'myId');
28
- * if (source) {
29
- * const clone = source.cloneNode(true);
30
- * }
31
- * ```
32
- */
33
- function upShadowSearch(ref, id) {
34
- var rn = ref.getRootNode();
35
- while (rn) {
36
- // Try getElementById on current root, but only if it shares the same registry
37
- if ('getElementById' in rn && rn.customElementRegistry === ref.customElementRegistry) {
38
- var test = rn.getElementById(id);
39
- if (test)
40
- return test;
41
- }
42
- // If in shadow root, check host element
43
- if ('host' in rn && rn.host) {
44
- // Check if host has a property with this ID
45
- var hostProp = rn.host[id];
46
- if (hostProp instanceof HTMLElement)
47
- return hostProp;
48
- // Move up to host's root
49
- rn = rn.host.getRootNode();
50
- }
51
- else if (rn === document) {
52
- // Reached document root without finding element
53
- return null;
54
- }
55
- else if (!('isConnected' in rn) || !rn.isConnected) {
56
- // Handle disconnected fragments
57
- if (rn.targetFragment) {
58
- rn = rn.targetFragment;
59
- }
60
- else {
61
- rn = document;
62
- }
63
- }
64
- else {
65
- // No more parents to check
66
- return null;
67
- }
68
- }
69
- return null;
70
- }
@@ -1,22 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.withScopePerimeter = withScopePerimeter;
4
- /**
5
- * Check if an element is outside (not inside) any ancestor matching a selector.
6
- * This implements "donut hole" scoping.
7
- *
8
- * @param rootNode - The root node to stop traversal at (not checked against selector)
9
- * @param matchCandidate - The element to check
10
- * @param outside - CSS selector for excluding ancestors
11
- * @returns true if element is outside all matching ancestors, false otherwise
12
- */
13
- function withScopePerimeter(rootNode, matchCandidate, outside) {
14
- var current = matchCandidate.parentElement;
15
- while (current && current !== rootNode) {
16
- if (current.matches(outside)) {
17
- return false; // Found an excluding ancestor
18
- }
19
- current = current.parentElement;
20
- }
21
- return true; // No excluding ancestors found
22
- }