mirror of https://github.com/sveltejs/svelte
Puru Vijay
3 years ago
commit
5a36085e76
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,69 @@
|
||||
import { globals } from './globals';
|
||||
|
||||
/**
|
||||
* Resize observer singleton.
|
||||
* One listener per element only!
|
||||
* https://groups.google.com/a/chromium.org/g/blink-dev/c/z6ienONUb5A/m/F5-VcUZtBAAJ
|
||||
*/
|
||||
export class ResizeObserverSingleton {
|
||||
constructor(readonly options?: ResizeObserverOptions) {}
|
||||
|
||||
observe(element: Element, listener: Listener) {
|
||||
this._listeners.set(element, listener);
|
||||
this._getObserver().observe(element, this.options);
|
||||
return () => {
|
||||
this._listeners.delete(element);
|
||||
this._observer.unobserve(element); // this line can probably be removed
|
||||
};
|
||||
}
|
||||
|
||||
private readonly _listeners: WeakMap<Element, Listener> = 'WeakMap' in globals ? new WeakMap() : undefined;
|
||||
private _observer?: ResizeObserver;
|
||||
private _getObserver() {
|
||||
return this._observer ?? (this._observer = new ResizeObserver((entries) => {
|
||||
for (const entry of entries) {
|
||||
(ResizeObserverSingleton as any).entries.set(entry.target, entry);
|
||||
this._listeners.get(entry.target)?.(entry);
|
||||
}
|
||||
}));
|
||||
}
|
||||
}
|
||||
// Needs to be written like this to pass the tree-shake-test
|
||||
(ResizeObserverSingleton as any).entries = 'WeakMap' in globals ? new WeakMap() : undefined;
|
||||
|
||||
type Listener = (entry: ResizeObserverEntry)=>any;
|
||||
|
||||
// TODO: Remove this
|
||||
interface ResizeObserverSize {
|
||||
readonly blockSize: number;
|
||||
readonly inlineSize: number;
|
||||
}
|
||||
|
||||
interface ResizeObserverEntry {
|
||||
readonly borderBoxSize: readonly ResizeObserverSize[];
|
||||
readonly contentBoxSize: readonly ResizeObserverSize[];
|
||||
readonly contentRect: DOMRectReadOnly;
|
||||
readonly devicePixelContentBoxSize: readonly ResizeObserverSize[];
|
||||
readonly target: Element;
|
||||
}
|
||||
|
||||
type ResizeObserverBoxOptions = 'border-box' | 'content-box' | 'device-pixel-content-box';
|
||||
|
||||
interface ResizeObserverOptions {
|
||||
box?: ResizeObserverBoxOptions;
|
||||
}
|
||||
|
||||
interface ResizeObserver {
|
||||
disconnect(): void;
|
||||
observe(target: Element, options?: ResizeObserverOptions): void;
|
||||
unobserve(target: Element): void;
|
||||
}
|
||||
|
||||
interface ResizeObserverCallback {
|
||||
(entries: ResizeObserverEntry[], observer: ResizeObserver): void;
|
||||
}
|
||||
|
||||
declare let ResizeObserver: {
|
||||
prototype: ResizeObserver;
|
||||
new(callback: ResizeObserverCallback): ResizeObserver;
|
||||
};
|
||||
@ -0,0 +1,4 @@
|
||||
export default {
|
||||
// https://github.com/sveltejs/svelte/issues/6752
|
||||
html: '<img height="100%" width="100%" alt="" />'
|
||||
};
|
||||
@ -0,0 +1 @@
|
||||
<img height="100%" width="100%" alt="" {...$$restProps} />
|
||||
Loading…
Reference in new issue