element-vir 26.9.1 → 26.10.0
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.
|
@@ -40,9 +40,35 @@ export declare const onResize: (callback: OnResizeCallback) => import("lit-html/
|
|
|
40
40
|
element: Element | undefined;
|
|
41
41
|
readonly resizeObserver: ResizeObserver;
|
|
42
42
|
callback: OnResizeCallback | undefined;
|
|
43
|
-
fireCallback(entries: ResizeObserverEntry[]): void;
|
|
44
43
|
update(partInfo: PartInfo, [callback]: [OnResizeCallback]): undefined;
|
|
45
44
|
render(callback: OnResizeCallback): undefined;
|
|
46
45
|
get _$isConnected(): boolean;
|
|
47
46
|
};
|
|
48
47
|
}>;
|
|
48
|
+
/**
|
|
49
|
+
* A function that attaches a
|
|
50
|
+
* [`ResizeObserver`](https://developer.mozilla.org/docs/Web/API/ResizeObserver) to any given
|
|
51
|
+
* element, so it is very efficient.
|
|
52
|
+
*
|
|
53
|
+
* @category Directives
|
|
54
|
+
* @example
|
|
55
|
+
*
|
|
56
|
+
* ```ts
|
|
57
|
+
* import {html, defineElement, attachOnResize} from 'element-vir';
|
|
58
|
+
*
|
|
59
|
+
* const MyElement = defineElement()({
|
|
60
|
+
* tagName: 'my-element',
|
|
61
|
+
* render({host}) {
|
|
62
|
+
* attachOnResize(host, (size, element) => {
|
|
63
|
+
* console.log('resized!', element, size);
|
|
64
|
+
* });
|
|
65
|
+
*
|
|
66
|
+
* return '';
|
|
67
|
+
* },
|
|
68
|
+
* });
|
|
69
|
+
* ```
|
|
70
|
+
*/
|
|
71
|
+
export declare function attachOnResize(element: Element, callback: OnResizeCallback): {
|
|
72
|
+
resizeObserver: ResizeObserver;
|
|
73
|
+
element: Element;
|
|
74
|
+
};
|
|
@@ -30,22 +30,16 @@ const directiveName = 'onResize';
|
|
|
30
30
|
*/
|
|
31
31
|
export const onResize = directive(class extends Directive {
|
|
32
32
|
element;
|
|
33
|
-
resizeObserver = new ResizeObserver((entries) =>
|
|
33
|
+
resizeObserver = new ResizeObserver((entries) => {
|
|
34
|
+
if (this.element && this.callback) {
|
|
35
|
+
handleOnResizeCallback(this.element, this.callback, entries);
|
|
36
|
+
}
|
|
37
|
+
});
|
|
34
38
|
callback;
|
|
35
39
|
constructor(partInfo) {
|
|
36
40
|
super(partInfo);
|
|
37
41
|
assertIsElementPartInfo(partInfo, directiveName);
|
|
38
42
|
}
|
|
39
|
-
fireCallback(entries) {
|
|
40
|
-
const resizeEntry = entries[0];
|
|
41
|
-
if (!resizeEntry) {
|
|
42
|
-
console.error(entries);
|
|
43
|
-
throw new Error(`${directiveName} observation triggered but the first entry was empty.`);
|
|
44
|
-
}
|
|
45
|
-
void this.callback?.({ target: resizeEntry.target, contentRect: resizeEntry.contentRect },
|
|
46
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
47
|
-
this.element);
|
|
48
|
-
}
|
|
49
43
|
update(partInfo, [callback]) {
|
|
50
44
|
assertIsElementPartInfo(partInfo, directiveName);
|
|
51
45
|
this.callback = callback;
|
|
@@ -66,3 +60,47 @@ export const onResize = directive(class extends Directive {
|
|
|
66
60
|
return undefined;
|
|
67
61
|
}
|
|
68
62
|
});
|
|
63
|
+
function handleOnResizeCallback(element, callback, entries) {
|
|
64
|
+
const resizeEntry = entries[0];
|
|
65
|
+
if (!resizeEntry) {
|
|
66
|
+
console.error(entries);
|
|
67
|
+
throw new Error(`Resize observation triggered but the first entry was empty.`);
|
|
68
|
+
}
|
|
69
|
+
void callback({
|
|
70
|
+
target: resizeEntry.target,
|
|
71
|
+
contentRect: resizeEntry.contentRect,
|
|
72
|
+
}, element);
|
|
73
|
+
}
|
|
74
|
+
/**
|
|
75
|
+
* A function that attaches a
|
|
76
|
+
* [`ResizeObserver`](https://developer.mozilla.org/docs/Web/API/ResizeObserver) to any given
|
|
77
|
+
* element, so it is very efficient.
|
|
78
|
+
*
|
|
79
|
+
* @category Directives
|
|
80
|
+
* @example
|
|
81
|
+
*
|
|
82
|
+
* ```ts
|
|
83
|
+
* import {html, defineElement, attachOnResize} from 'element-vir';
|
|
84
|
+
*
|
|
85
|
+
* const MyElement = defineElement()({
|
|
86
|
+
* tagName: 'my-element',
|
|
87
|
+
* render({host}) {
|
|
88
|
+
* attachOnResize(host, (size, element) => {
|
|
89
|
+
* console.log('resized!', element, size);
|
|
90
|
+
* });
|
|
91
|
+
*
|
|
92
|
+
* return '';
|
|
93
|
+
* },
|
|
94
|
+
* });
|
|
95
|
+
* ```
|
|
96
|
+
*/
|
|
97
|
+
export function attachOnResize(element, callback) {
|
|
98
|
+
const resizeObserver = new ResizeObserver((entries) => {
|
|
99
|
+
handleOnResizeCallback(element, callback, entries);
|
|
100
|
+
});
|
|
101
|
+
resizeObserver.observe(element);
|
|
102
|
+
return {
|
|
103
|
+
resizeObserver,
|
|
104
|
+
element,
|
|
105
|
+
};
|
|
106
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "element-vir",
|
|
3
|
-
"version": "26.
|
|
3
|
+
"version": "26.10.0",
|
|
4
4
|
"keywords": [
|
|
5
5
|
"custom",
|
|
6
6
|
"web",
|
|
@@ -39,19 +39,19 @@
|
|
|
39
39
|
"test:docs": "virmator docs check"
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@augment-vir/assert": "^31.
|
|
43
|
-
"@augment-vir/common": "^31.
|
|
42
|
+
"@augment-vir/assert": "^31.38.0",
|
|
43
|
+
"@augment-vir/common": "^31.38.0",
|
|
44
44
|
"date-vir": "^7.4.2",
|
|
45
45
|
"lit": "^3.3.1",
|
|
46
46
|
"lit-css-vars": "^3.0.11",
|
|
47
47
|
"lit-html": "^3.3.1",
|
|
48
|
-
"object-shape-tester": "^6.
|
|
48
|
+
"object-shape-tester": "^6.5.0",
|
|
49
49
|
"observavir": "^2.1.1",
|
|
50
50
|
"typed-event-target": "^4.1.0"
|
|
51
51
|
},
|
|
52
52
|
"devDependencies": {
|
|
53
|
-
"@augment-vir/test": "^31.
|
|
54
|
-
"@augment-vir/web": "^31.
|
|
53
|
+
"@augment-vir/test": "^31.38.0",
|
|
54
|
+
"@augment-vir/web": "^31.38.0",
|
|
55
55
|
"@web/dev-server-esbuild": "^1.0.4",
|
|
56
56
|
"@web/test-runner": "^0.20.2",
|
|
57
57
|
"@web/test-runner-commands": "^0.9.0",
|
|
@@ -60,10 +60,10 @@
|
|
|
60
60
|
"html-spec-tags": "^2.2.3",
|
|
61
61
|
"istanbul-smart-text-reporter": "^1.1.5",
|
|
62
62
|
"markdown-code-example-inserter": "^3.0.3",
|
|
63
|
-
"type-fest": "^
|
|
64
|
-
"typedoc": "^0.28.
|
|
63
|
+
"type-fest": "^5.0.1",
|
|
64
|
+
"typedoc": "^0.28.13",
|
|
65
65
|
"typescript": "5.9.2",
|
|
66
|
-
"vite": "^7.1.
|
|
66
|
+
"vite": "^7.1.7",
|
|
67
67
|
"vite-tsconfig-paths": "^5.1.4"
|
|
68
68
|
},
|
|
69
69
|
"engines": {
|