corvu - npm Package Compare versions

Comparing version 0.4.7 to 0.4.8

dist/primitives/drawer/index.js

@@ -7,3 +7,4 @@ import { Close_default, Description_default, Label_default, Trigger_default, useDialogContext, Portal_default, Root_default, useInternalDialogContext, Content_default, Overlay_default } from '../../chunk/URDTOASL.js';
 import { createContext, useContext, mergeProps as mergeProps$1, splitProps, createSignal, createMemo, createEffect, untrack, batch, onCleanup } from 'solid-js';
-import { afterPaint, access } from '@corvu/utils';
+import { afterPaint } from '@corvu/utils';
+import createTransitionSize from 'solid-transition-size';
 import { createWritableMemo } from '@solid-primitives/memo';
@@ -90,106 +91,2 @@ import { getScrollAtLocation } from '@corvu/utils/scroll';
 };
-function createTransitionSize(props) {
-  const defaultedProps = mergeProps$1(
-    {
-      enabled: true,
-      property: "both"
-    },
-    props
-  );
-  const [transitioning, setTransitioning] = createSignal(false);
-  const [transitionSize, setTransitionSize] = createSignal(null);
-  let startSize = null;
-  createEffect(() => {
-    const element = access(defaultedProps.element);
-    const enabled = access(defaultedProps.enabled);
-    if (!element || !enabled)
-      return;
-    const observer = new ResizeObserver(resizeObserverCallback);
-    observer.observe(element);
-    element.addEventListener("transitionend", reset);
-    onCleanup(() => {
-      observer.disconnect();
-      element.removeEventListener("transitionend", reset);
-      reset();
-    });
-  });
-  const resizeObserverCallback = (entries) => {
-    if (transitioning())
-      return;
-    for (const entry of entries) {
-      const target = entry.target;
-      if (target !== access(defaultedProps.element))
-        continue;
-      const currentSize = [
-        target.offsetWidth,
-        target.offsetHeight
-      ];
-      const property = access(defaultedProps.property);
-      if (property === "both") {
-        if (!startSize) {
-          startSize = currentSize;
-        } else if (startSize[0] !== currentSize[0] && startSize[1] !== currentSize[1]) {
-          batch(() => {
-            setTransitionSize(startSize);
-            setTransitioning(true);
-          });
-          afterPaint(() => {
-            setTransitionSize(currentSize);
-            const transitionDuration = parseFloat(
-              getComputedStyle(entry.target).transitionDuration
-            );
-            if (transitionDuration === 0) {
-              reset();
-            }
-          });
-        }
-      } else {
-        if (!startSize) {
-          startSize = currentSize;
-        } else if (getSizeProperty(property, startSize) !== getSizeProperty(property, currentSize)) {
-          batch(() => {
-            setTransitionSize(getSizeProperty(property, startSize));
-            setTransitioning(true);
-          });
-          afterPaint(() => {
-            setTransitionSize(getSizeProperty(property, currentSize));
-            const transitionDuration = parseFloat(
-              getComputedStyle(entry.target).transitionDuration
-            );
-            if (transitionDuration === 0) {
-              reset();
-            }
-          });
-        }
-      }
-    }
-  };
-  const reset = () => {
-    if (!transitioning())
-      return;
-    const element = access(defaultedProps.element);
-    if (element) {
-      startSize = [element.offsetWidth, element.offsetHeight];
-    } else {
-      startSize = null;
-    }
-    batch(() => {
-      setTransitioning(false);
-      setTransitionSize(null);
-    });
-  };
-  return {
-    transitioning: () => transitioning() === true,
-    transitionSize
-  };
-}
-var getSizeProperty = (property, size) => {
-  switch (property) {
-    case "width":
-      return size[0];
-    case "height":
-      return size[1];
-  }
-};
-var transitionSize_default = createTransitionSize;
 
@@ -307,6 +204,6 @@ // src/primitives/drawer/lib.ts
     transitionSize
-  } = transitionSize_default({
+  } = createTransitionSize({
     element: () => dialogContext()?.contentRef() ?? null,
     enabled: () => open() && localProps.transitionResize,
-    property: () => {
+    dimension: () => {
       switch (localProps.side) {
@@ -313,0 +210,0 @@ case "top":

dist/primitives/drawer/index.jsx

@@ -115,128 +115,13 @@ import {
 import {
-  batch as batch2,
-  createEffect as createEffect2,
-  createMemo,
-  createSignal as createSignal2,
-  mergeProps as mergeProps2,
-  onCleanup as onCleanup2,
-  splitProps,
-  untrack
-} from "solid-js";
-import { afterPaint as afterPaint2 } from "@corvu/utils";
-
-// src/lib/create/transitionSize.ts
-import { access, afterPaint } from "@corvu/utils";
-import {
   batch,
   createEffect,
+  createMemo,
   createSignal,
   mergeProps,
-  onCleanup
+  onCleanup,
+  splitProps,
+  untrack
 } from "solid-js";
-function createTransitionSize(props) {
-  const defaultedProps = mergeProps(
-    {
-      enabled: true,
-      property: "both"
-    },
-    props
-  );
-  const [transitioning, setTransitioning] = createSignal(false);
-  const [transitionSize, setTransitionSize] = createSignal(null);
-  let startSize = null;
-  createEffect(() => {
-    const element = access(defaultedProps.element);
-    const enabled = access(defaultedProps.enabled);
-    if (!element || !enabled)
-      return;
-    const observer = new ResizeObserver(resizeObserverCallback);
-    observer.observe(element);
-    element.addEventListener("transitionend", reset);
-    onCleanup(() => {
-      observer.disconnect();
-      element.removeEventListener("transitionend", reset);
-      reset();
-    });
-  });
-  const resizeObserverCallback = (entries) => {
-    if (transitioning())
-      return;
-    for (const entry of entries) {
-      const target = entry.target;
-      if (target !== access(defaultedProps.element))
-        continue;
-      const currentSize = [
-        target.offsetWidth,
-        target.offsetHeight
-      ];
-      const property = access(defaultedProps.property);
-      if (property === "both") {
-        if (!startSize) {
-          startSize = currentSize;
-        } else if (startSize[0] !== currentSize[0] && startSize[1] !== currentSize[1]) {
-          batch(() => {
-            setTransitionSize(startSize);
-            setTransitioning(true);
-          });
-          afterPaint(() => {
-            setTransitionSize(currentSize);
-            const transitionDuration = parseFloat(
-              getComputedStyle(entry.target).transitionDuration
-            );
-            if (transitionDuration === 0) {
-              reset();
-            }
-          });
-        }
-      } else {
-        if (!startSize) {
-          startSize = currentSize;
-        } else if (getSizeProperty(property, startSize) !== getSizeProperty(property, currentSize)) {
-          batch(() => {
-            setTransitionSize(getSizeProperty(property, startSize));
-            setTransitioning(true);
-          });
-          afterPaint(() => {
-            setTransitionSize(getSizeProperty(property, currentSize));
-            const transitionDuration = parseFloat(
-              getComputedStyle(entry.target).transitionDuration
-            );
-            if (transitionDuration === 0) {
-              reset();
-            }
-          });
-        }
-      }
-    }
-  };
-  const reset = () => {
-    if (!transitioning())
-      return;
-    const element = access(defaultedProps.element);
-    if (element) {
-      startSize = [element.offsetWidth, element.offsetHeight];
-    } else {
-      startSize = null;
-    }
-    batch(() => {
-      setTransitioning(false);
-      setTransitionSize(null);
-    });
-  };
-  return {
-    transitioning: () => transitioning() === true,
-    transitionSize
-  };
-}
-var getSizeProperty = (property, size) => {
-  switch (property) {
-    case "width":
-      return size[0];
-    case "height":
-      return size[1];
-  }
-};
-var transitionSize_default = createTransitionSize;
-
-// src/primitives/drawer/Root.tsx
+import { afterPaint } from "@corvu/utils";
+import createTransitionSize from "solid-transition-size";
 import { createWritableMemo } from "@solid-primitives/memo";
@@ -322,3 +207,3 @@
 var DrawerRoot = (props) => {
-  const defaultedProps = mergeProps2(
+  const defaultedProps = mergeProps(
     {
@@ -374,7 +259,7 @@ initialOpen: false,
   });
-  const [dialogContext, setDialogContext] = createSignal2();
-  const { transitioning: sizeTransitioning, transitionSize } = transitionSize_default({
+  const [dialogContext, setDialogContext] = createSignal();
+  const { transitioning: sizeTransitioning, transitionSize } = createTransitionSize({
     element: () => dialogContext()?.contentRef() ?? null,
     enabled: () => open() && localProps.transitionResize,
-    property: () => {
+    dimension: () => {
       switch (localProps.side) {
@@ -390,3 +275,3 @@ case "top":
   });
-  const [isDragging, setIsDragging] = createSignal2(false);
+  const [isDragging, setIsDragging] = createSignal(false);
   const [transitionState, setTransitionState] = createWritableMemo(() => {
@@ -403,4 +288,4 @@ if (sizeTransitioning())
   });
-  const [transitionAwareOpen, setTransitionAwareOpen] = createSignal2(false);
-  createEffect2(() => {
+  const [transitionAwareOpen, setTransitionAwareOpen] = createSignal(false);
+  createEffect(() => {
     const _open = open();
@@ -413,4 +298,4 @@ untrack(() => {
         setTransitionAwareOpen(true);
-        afterPaint2(() => {
-          batch2(() => {
+        afterPaint(() => {
+          batch(() => {
             setTransitionState("opening");
@@ -427,7 +312,7 @@ setActiveSnapPoint(localProps.defaultSnapPoint);
       } else {
-        batch2(() => {
+        batch(() => {
           setTransitionState("closing");
           setActiveSnapPoint(0);
         });
-        afterPaint2(() => {
+        afterPaint(() => {
           const transitionDuration = parseFloat(
@@ -444,3 +329,3 @@ drawerStyles().transitionDuration
   const closeDrawer = () => {
-    batch2(() => {
+    batch(() => {
       setTransitionAwareOpen(false);
@@ -450,4 +335,4 @@ setTransitionState(null);
   };
-  const [drawerSize, setDrawerSize] = createSignal2(0);
-  createEffect2(() => {
+  const [drawerSize, setDrawerSize] = createSignal(0);
+  createEffect(() => {
     const element = dialogContext()?.contentRef();
@@ -459,3 +344,3 @@ if (!element)
     observer.observe(element);
-    onCleanup2(() => {
+    onCleanup(() => {
       observer.disconnect();
@@ -549,3 +434,3 @@ });
     if (isFunction(children)) {
-      const mergedProps = mergeProps2(dialogChildrenProps, childrenProps);
+      const mergedProps = mergeProps(dialogChildrenProps, childrenProps);
       return children(mergedProps);
@@ -620,6 +505,6 @@ }
 import {
-  batch as batch3,
-  createEffect as createEffect3,
+  batch as batch2,
+  createEffect as createEffect2,
   createMemo as createMemo2,
-  onCleanup as onCleanup3,
+  onCleanup as onCleanup2,
   splitProps as splitProps2
@@ -685,3 +570,3 @@ } from "solid-js";
   });
-  createEffect3(() => {
+  createEffect2(() => {
     if (!dialogContext().open())
@@ -693,3 +578,3 @@ return;
     document.addEventListener("touchend", onPointerUp);
-    onCleanup3(() => {
+    onCleanup2(() => {
       document.removeEventListener("pointermove", onPointerMove);
@@ -765,3 +650,3 @@ document.removeEventListener("touchmove", onTouchMove);
       cachedTranslate = drawerContext().translate();
-      batch3(() => {
+      batch2(() => {
         drawerContext().setIsDragging(true);
@@ -812,7 +697,7 @@ drawerContext().setTransitionState(null);
     );
-    batch3(() => {
+    batch2(() => {
       drawerContext().setTransitionState("snapping");
       drawerContext().setIsDragging(false);
     });
-    batch3(() => {
+    batch2(() => {
       drawerContext().setActiveSnapPoint(closestSnapPoint.value);
@@ -843,3 +728,3 @@ if (closestSnapPoint.offset === drawerContext().drawerSize()) {
     onTransitionEnd={() => {
-      batch3(() => {
+      batch2(() => {
         if (drawerContext().transitionState() === "closing") {
@@ -846,0 +731,0 @@ drawerContext().closeDrawer();

package.json

 {
   "name": "corvu",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "private": false,
@@ -73,6 +73,7 @@ "description": "Unstyled, accessible and customizable UI primitives for SolidJS",
     "@floating-ui/dom": "^1.6.3",
-    "@solid-primitives/memo": "^1.3.6",
+    "@solid-primitives/memo": "^1.3.7",
     "solid-focus-trap": "~0.1",
     "solid-presence": "~0.1",
-    "solid-prevent-scroll": "~0.1"
+    "solid-prevent-scroll": "~0.1",
+    "solid-transition-size": "~0.1"
   },
@@ -84,3 +85,2 @@ "devDependencies": {
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-solid": "^0.13.1",
@@ -87,0 +87,0 @@ "prettier": "^3.2.5",

No alert changes

Improved metrics

Dev dependency count

10

-9.09%

Worsened metrics

Total package byte prevSize

333928

-1.86%

Dependency count

8

14.29%

Lines of code

9350

-2.26%

Dependency changes

• + Added

  solid-transition-size@~0.1

• + Added

  @corvu/utils@0.3.2
  (transitive)

• + Added

  solid-transition-size@0.1.4
  (transitive)

• Updated

  @solid-primitives/memo@^1.3.7