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

Comparing version 4.0.0-next.0 to 4.0.0-next.1

dist/index.d.ts

@@ -12,8 +12,11 @@ import { type Many, type MaybeAccessor } from "@solid-primitives/utils";
 };
-export type NullableSize = {
-    width: number;
-    height: number;
-} | {
+export type SizeWithClient = Size & {
+    clientWidth: number;
+    clientHeight: number;
+};
+export type NullableSize = SizeWithClient | {
     width: null;
     height: null;
+    clientWidth: null;
+    clientHeight: null;
 };
@@ -74,17 +77,19 @@ /**
  * @param target html element
- * @returns object with width and height dimensions of provided {@link target} element.
+ * @returns object with width/height (from `getBoundingClientRect`, border-box, affected by CSS transforms)
+ * and clientWidth/clientHeight (padding-box, unaffected by CSS transforms) of the provided {@link target} element.
  */
+export declare function getElementSize(target: Element): SizeWithClient;
 export declare function getElementSize(target: Element | false | undefined | null): NullableSize;
 /**
- * Creates a reactive store-like object of current width and height dimensions of {@link target} element.
+ * Creates a reactive store-like object of current width/height and clientWidth/clientHeight dimensions of {@link target} element.
  * @param target html element to track the size of. Can be a reactive signal.
- * @returns `{ width: number, height: number }`
+ * @returns `{ width: number, height: number, clientWidth: number, clientHeight: number }`
  * @example
  * const size = createElementSize(document.body);
  * createEffect(() => {
- *   console.log(size.width, size.height)
+ *   console.log(size.width, size.height, size.clientWidth, size.clientHeight)
  * })
  */
-export declare function createElementSize(target: Element): Readonly<Size>;
+export declare function createElementSize(target: Element): Readonly<SizeWithClient>;
 export declare function createElementSize(target: Accessor<Element | false | undefined | null>): Readonly<NullableSize>;
 export {};

dist/index.js

@@ -99,7 +99,8 @@ import { makeEventListener } from "@solid-primitives/event-listener";
 /*#__PURE__*/ createHydratableSingletonRoot(createWindowSize);
-const ELEMENT_SIZE_FALLBACK = { width: null, height: null };
-/**
- * @param target html element
- * @returns object with width and height dimensions of provided {@link target} element.
- */
+const ELEMENT_SIZE_FALLBACK = {
+    width: null,
+    height: null,
+    clientWidth: null,
+    clientHeight: null,
+};
 export function getElementSize(target) {
@@ -110,3 +111,3 @@ if (isServer || !target) {
     const { width, height } = target.getBoundingClientRect();
-    return { width, height };
+    return { width, height, clientWidth: target.clientWidth, clientHeight: target.clientHeight };
 }
@@ -113,0 +114,0 @@ export function createElementSize(target) {

package.json

 {
   "name": "@solid-primitives/resize-observer",
-  "version": "4.0.0-next.0",
+  "version": "4.0.0-next.1",
   "description": "Reactive primitives for observing resizing of HTML elements.",
@@ -49,6 +49,6 @@ "author": "Moshe Udimar",
   "dependencies": {
-    "@solid-primitives/event-listener": "^3.0.0-next.0",
+    "@solid-primitives/static-store": "^1.0.0-next.0",
+    "@solid-primitives/utils": "^7.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"
+    "@solid-primitives/event-listener": "^3.0.0-next.0"
   },
@@ -55,0 +55,0 @@ "peerDependencies": {

README.md

@@ -145,5 +145,5 @@ <p>
 
-Creates a reactive store-like object of current width and height dimensions of html element.
+Creates a reactive store-like object of current width/height and clientWidth/clientHeight dimensions of html element.
 
-It uses `ResizeObserver` under the hood—to observe when the element size changes—and `getBoundingClientRect` to get the current size.
+It uses `ResizeObserver` under the hood—to observe when the element size changes. `width`/`height` come from `getBoundingClientRect` (border-box, affected by CSS transforms); `clientWidth`/`clientHeight` come from the element's `clientWidth`/`clientHeight` properties (padding-box, excludes border/scrollbar, unaffected by CSS transforms).
 
@@ -161,2 +161,4 @@ ### How to use it
   size.height; // => number
+  size.clientWidth; // => number
+  size.clientHeight; // => number
 });
@@ -172,2 +174,4 @@
   size.height; // => number | null
+  size.clientWidth; // => number | null
+  size.clientHeight; // => number | null
 });
@@ -174,0 +178,0 @@

No alert changes

Improved metrics

Total package byte prevSize

18288

4.63%

Lines of code

230

2.68%

Number of lines in readme file

190

2.15%

No dependency changes