@mmstack/primitives 19.2.2 → 20.0.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.
- package/README.md +5 -3
- package/fesm2022/mmstack-primitives.mjs +4 -3
- package/fesm2022/mmstack-primitives.mjs.map +1 -1
- package/index.d.ts +1306 -11
- package/package.json +4 -4
- package/lib/debounced.d.ts +0 -97
- package/lib/derived.d.ts +0 -139
- package/lib/element-visibility.d.ts +0 -66
- package/lib/get-signal-equality.d.ts +0 -5
- package/lib/map-array.d.ts +0 -61
- package/lib/mutable.d.ts +0 -95
- package/lib/sensors/index.d.ts +0 -7
- package/lib/sensors/media-query.d.ts +0 -94
- package/lib/sensors/mouse-position.d.ts +0 -80
- package/lib/sensors/network-status.d.ts +0 -20
- package/lib/sensors/page-visibility.d.ts +0 -38
- package/lib/sensors/scroll-position.d.ts +0 -84
- package/lib/sensors/sensor.d.ts +0 -76
- package/lib/sensors/window-size.d.ts +0 -75
- package/lib/stored.d.ts +0 -136
- package/lib/throttled.d.ts +0 -75
- package/lib/to-writable.d.ts +0 -30
- package/lib/until.d.ts +0 -51
- package/lib/with-history.d.ts +0 -94
package/README.md
CHANGED
|
@@ -592,7 +592,7 @@ import { elementVisibility } from '@mmstack/primitives';
|
|
|
592
592
|
standalone: true,
|
|
593
593
|
template: `
|
|
594
594
|
<div #itemToObserve style="height: 300px; margin-top: 100vh; border: 2px solid green;">
|
|
595
|
-
@if (intersectionEntry.
|
|
595
|
+
@if (intersectionEntry.visible()) {
|
|
596
596
|
<p>This content was lazy-loaded because it became visible!</p>
|
|
597
597
|
} @else {
|
|
598
598
|
<p>Item is off-screen. Scroll down to load it.</p>
|
|
@@ -601,14 +601,16 @@ import { elementVisibility } from '@mmstack/primitives';
|
|
|
601
601
|
`,
|
|
602
602
|
})
|
|
603
603
|
export class LazyLoadItemComponent {
|
|
604
|
-
readonly itemRef = viewChild.required<ElementRef<HTMLDivElement>>('itemToObserve'
|
|
604
|
+
readonly itemRef = viewChild.required<ElementRef<HTMLDivElement>>('itemToObserve', {
|
|
605
|
+
read: ElementRef,
|
|
606
|
+
});
|
|
605
607
|
|
|
606
608
|
// Observe the element, get the full IntersectionObserverEntry
|
|
607
609
|
readonly intersectionEntry = elementVisibility(this.itemRef);
|
|
608
610
|
|
|
609
611
|
constructor() {
|
|
610
612
|
effect(() => {
|
|
611
|
-
if (this.
|
|
613
|
+
if (this.intersectionEntry.visible()) {
|
|
612
614
|
console.log('Item is now visible!', this.intersectionEntry());
|
|
613
615
|
} else {
|
|
614
616
|
console.log('Item is no longer visible or not yet visible.');
|
|
@@ -257,7 +257,7 @@ function observerSupported() {
|
|
|
257
257
|
* }
|
|
258
258
|
* ```
|
|
259
259
|
*/
|
|
260
|
-
function elementVisibility(target, opt) {
|
|
260
|
+
function elementVisibility(target = inject(ElementRef), opt) {
|
|
261
261
|
if (isPlatformServer(inject(PLATFORM_ID)) || !observerSupported()) {
|
|
262
262
|
const base = computed(() => undefined, {
|
|
263
263
|
debugName: opt?.debugName,
|
|
@@ -1128,15 +1128,16 @@ function stored(fallback, { key, store: providedStore, serialize = JSON.stringif
|
|
|
1128
1128
|
else {
|
|
1129
1129
|
effect(() => {
|
|
1130
1130
|
const k = keySig();
|
|
1131
|
+
const internalValue = internal();
|
|
1131
1132
|
if (k === prevKey) {
|
|
1132
|
-
return storeValue(k,
|
|
1133
|
+
return storeValue(k, internalValue); // normal operation
|
|
1133
1134
|
}
|
|
1134
1135
|
else {
|
|
1135
1136
|
if (cleanupOldKey)
|
|
1136
1137
|
store.removeItem(prevKey);
|
|
1137
1138
|
const value = getValue(k);
|
|
1138
|
-
internal.set(value); // load new value
|
|
1139
1139
|
prevKey = k;
|
|
1140
|
+
internal.set(value); // load new value
|
|
1140
1141
|
}
|
|
1141
1142
|
});
|
|
1142
1143
|
}
|