@solid-primitives/resize-observer - npm Package Compare versions

Comparing version 2.1.5 to 4.0.0-next.0

dist/index.js

@@ -6,3 +6,3 @@ import { makeEventListener } from "@solid-primitives/event-listener";
 import { createEffect, onCleanup, sharedConfig } from "solid-js";
-import { isServer } from "solid-js/web";
+import { isServer } from "@solidjs/web";
 /**
@@ -53,7 +53,7 @@ * Instantiate a new ResizeObserver that automatically get's disposed on cleanup.
     }, options);
-    createEffect((prev) => {
-        const refs = filterNonNullable(asArray(access(targets)));
+    let prev = [];
+    createEffect(() => filterNonNullable(asArray(access(targets))), (refs) => {
         handleDiffArray(refs, prev, observe, unobserve);
-        return refs;
-    }, []);
+        prev = refs;
+    });
 }
@@ -118,13 +118,15 @@ const WINDOW_SIZE_FALLBACK = { width: 0, height: 0 };
     const isFn = typeof target === "function";
-    const [size, setSize] = createStaticStore(sharedConfig.context || isFn ? ELEMENT_SIZE_FALLBACK : getElementSize(target));
+    const [size, setSize] = createStaticStore(sharedConfig.hydrating || isFn ? ELEMENT_SIZE_FALLBACK : getElementSize(target));
     const ro = new ResizeObserver(([e]) => setSize(getElementSize(e.target)));
     onCleanup(() => ro.disconnect());
     if (isFn) {
-        createEffect(() => {
-            const el = target();
+        createEffect(() => target(), (el) => {
             if (el) {
                 setSize(getElementSize(el));
                 ro.observe(el);
-                onCleanup(() => ro.unobserve(el));
+                return () => ro.unobserve(el);
             }
+            else {
+                setSize(ELEMENT_SIZE_FALLBACK);
+            }
         });
@@ -131,0 +133,0 @@ }

package.json

 {
   "name": "@solid-primitives/resize-observer",
-  "version": "2.1.5",
+  "version": "4.0.0-next.0",
   "description": "Reactive primitives for observing resizing of HTML elements.",
@@ -23,3 +23,4 @@ "author": "Moshe Udimar",
     ],
-    "category": "Display & Media"
+    "category": "Display & Media",
+    "gzip": 1461
   },
@@ -49,13 +50,15 @@ "files": [
   "dependencies": {
-    "@solid-primitives/rootless": "^1.5.3",
-    "@solid-primitives/static-store": "^0.1.3",
-    "@solid-primitives/event-listener": "^2.4.5",
-    "@solid-primitives/utils": "^6.4.0"
+    "@solid-primitives/event-listener": "^3.0.0-next.0",
+    "@solid-primitives/rootless": "^2.0.0-next.0",
+    "@solid-primitives/static-store": "^1.0.0-next.0",
+    "@solid-primitives/utils": "^7.0.0-next.0"
   },
   "peerDependencies": {
-    "solid-js": "^1.6.12"
+    "@solidjs/web": "^2.0.0-beta.15",
+    "solid-js": "^2.0.0-beta.15"
   },
   "typesVersions": {},
   "devDependencies": {
-    "solid-js": "^1.9.7"
+    "@solidjs/web": "2.0.0-beta.15",
+    "solid-js": "2.0.0-beta.15"
   },
@@ -62,0 +65,0 @@ "scripts": {

README.md

@@ -7,5 +7,6 @@ <p>
 
-[![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/resize-observer?style=for-the-badge)](https://bundlephobia.com/package/@solid-primitives/resize-observer)
+[![size](https://img.shields.io/badge/size-1.46_kB-blue?style=for-the-badge)](https://bundlephobia.com/package/@solid-primitives/resize-observer)
 [![size](https://img.shields.io/npm/v/@solid-primitives/resize-observer?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/resize-observer)
 [![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-3.json)](https://github.com/solidjs-community/solid-primitives#contribution-process)
+[![tested with vitest](https://img.shields.io/badge/tested_with-vitest-6E9F18?style=for-the-badge&logo=vitest)](https://vitest.dev)
 
@@ -79,4 +80,4 @@ Reactive primitives for observing resizing of HTML elements.
 
-// can in onMount if the target variable isn't yet populated
-onMount(() => {
+// can use onSettled if the target variable isn't yet populated
+onSettled(() => {
   createResizeObserver(ref, ({ width, height }, el) => {
@@ -100,6 +101,6 @@ if (el === ref) console.log(width, height);
 
-// createResizeObserver supports top-lever store arrays too
+// createResizeObserver supports top-level store arrays too
 const [targets, setTargets] = createStore([document.body]);
 createResizeObserver(targets, ({ width, height }, el) => {});
-setTargets(targets.length, element);
+setTargets(prev => [...prev, element]);
 ```
@@ -106,0 +107,0 @@

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Improved metrics

Total package byte prevSize

17478

1.84%

Lines of code

224

0.9%

Number of lines in readme file

186

0.54%

Worsened metrics

Dependency count

6

20%

Dev dependency count

2

100%

Number of low quality alerts

1

Infinity%

Dependency changes

• + Added

  @solid-primitives/event-listener@3.0.0-next.1
  (transitive)

• + Added

  @solid-primitives/rootless@2.0.0-next.0
  (transitive)

• + Added

  @solid-primitives/static-store@1.0.0-next.0
  (transitive)

• + Added

  @solid-primitives/utils@7.0.0-next.1
  (transitive)

• + Added

  @solidjs/signals@0.11.3
  (transitive)

• + Added

  @solidjs/web@2.0.0-experimental.16
  (transitive)

• + Added

  solid-js@2.0.0-experimental.16
  (transitive)

• - Removed

  @solid-primitives/event-listener@2.4.6
  (transitive)

• - Removed

  @solid-primitives/rootless@1.5.4
  (transitive)

• - Removed

  @solid-primitives/static-store@0.1.4
  (transitive)

• - Removed

  @solid-primitives/utils@6.4.1
  (transitive)

• - Removed

  solid-js@1.9.14
  (transitive)

• Updated

  @solid-primitives/event-listener@^3.0.0-next.0

• Updated

  @solid-primitives/rootless@^2.0.0-next.0

• Updated

  @solid-primitives/static-store@^1.0.0-next.0

• Updated

  @solid-primitives/utils@^7.0.0-next.0