solid-transition-group - npm Package Compare versions

Comparing version 0.2.2 to 0.2.3

dist/index.js

@@ -7,9 +7,9 @@ // src/common.ts
     return {
-      enterActiveClasses: (props.enterActiveClass || name + "-enter-active").split(" "),
-      enterClasses: (props.enterClass || name + "-enter").split(" "),
-      enterToClasses: (props.enterToClass || name + "-enter-to").split(" "),
-      exitActiveClasses: (props.exitActiveClass || name + "-exit-active").split(" "),
-      exitClasses: (props.exitClass || name + "-exit").split(" "),
-      exitToClasses: (props.exitToClass || name + "-exit-to").split(" "),
-      moveClasses: (props.moveClass || name + "-move").split(" ")
+      enterActive: (props.enterActiveClass || name + "-enter-active").split(" "),
+      enter: (props.enterClass || name + "-enter").split(" "),
+      enterTo: (props.enterToClass || name + "-enter-to").split(" "),
+      exitActive: (props.exitActiveClass || name + "-exit-active").split(" "),
+      exit: (props.exitClass || name + "-exit").split(" "),
+      exitTo: (props.exitToClass || name + "-exit-to").split(" "),
+      move: (props.moveClass || name + "-move").split(" ")
     };
@@ -21,7 +21,7 @@ });
 }
-function enterTransition(classnames, events, el, done) {
-  const { enterClasses, enterActiveClasses, enterToClasses } = classnames, { onBeforeEnter, onEnter, onAfterEnter } = events;
+function enterTransition(classes, events, el, done) {
+  const { onBeforeEnter, onEnter, onAfterEnter } = events;
   onBeforeEnter?.(el);
-  el.classList.add(...enterClasses);
-  el.classList.add(...enterActiveClasses);
+  el.classList.add(...classes.enter);
+  el.classList.add(...classes.enterActive);
   queueMicrotask(() => {
@@ -33,4 +33,4 @@ if (!el.parentNode)
   nextFrame(() => {
-    el.classList.remove(...enterClasses);
-    el.classList.add(...enterToClasses);
+    el.classList.remove(...classes.enter);
+    el.classList.add(...classes.enterTo);
     if (!onEnter || onEnter.length < 2) {
@@ -46,4 +46,4 @@ el.addEventListener("transitionend", endTransition);
       el.removeEventListener("animationend", endTransition);
-      el.classList.remove(...enterActiveClasses);
-      el.classList.remove(...enterToClasses);
+      el.classList.remove(...classes.enterActive);
+      el.classList.remove(...classes.enterTo);
       onAfterEnter?.(el);
@@ -53,13 +53,13 @@ }
 }
-function exitTransition(classnames, events, el, done) {
-  const { exitClasses, exitActiveClasses, exitToClasses } = classnames, { onBeforeExit, onExit, onAfterExit } = events;
+function exitTransition(classes, events, el, done) {
+  const { onBeforeExit, onExit, onAfterExit } = events;
   if (!el.parentNode)
     return done?.();
   onBeforeExit?.(el);
-  el.classList.add(...exitClasses);
-  el.classList.add(...exitActiveClasses);
+  el.classList.add(...classes.exit);
+  el.classList.add(...classes.exitActive);
   onExit?.(el, () => endTransition());
   nextFrame(() => {
-    el.classList.remove(...exitClasses);
-    el.classList.add(...exitToClasses);
+    el.classList.remove(...classes.exit);
+    el.classList.add(...classes.exitTo);
     if (!onExit || onExit.length < 2) {
@@ -75,4 +75,4 @@ el.addEventListener("transitionend", endTransition);
       el.removeEventListener("animationend", endTransition);
-      el.classList.remove(...exitActiveClasses);
-      el.classList.remove(...exitToClasses);
+      el.classList.remove(...classes.exitActive);
+      el.classList.remove(...classes.exitTo);
       onAfterExit?.(el);
@@ -143,7 +143,7 @@ }
               el.removeEventListener("transitionend", endTransition2);
-              el.classList.remove(...classes.moveClasses);
+              el.classList.remove(...classes.move);
             }
           };
           var endTransition = endTransition2;
-          el.classList.add(...classes.moveClasses);
+          el.classList.add(...classes.move);
           el.style.transform = el.style.transitionDuration = "";
@@ -150,0 +150,0 @@ el.addEventListener("transitionend", endTransition2);

package.json

@@ -6,3 +6,3 @@ {
   "license": "MIT",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "homepage": "https://github.com/solidjs/solid-transition-group#readme",
@@ -33,20 +33,20 @@ "repository": {
   "devDependencies": {
-    "@astrojs/solid-js": "^2.1.0",
-    "@release-it/keep-a-changelog": "^3.1.0",
-    "astro": "^2.1.3",
-    "concurrently": "^7.6.0",
-    "jsdom": "^21.1.1",
-    "prettier": "^2.8.4",
-    "release-it": "^15.9.0",
-    "solid-js": "^1.6.15",
-    "tsup": "^6.6.3",
-    "typescript": "^4.9.5",
-    "vite-plugin-solid": "^2.6.1",
-    "vitest": "^0.29.3",
-    "@astrojs/tailwind": "^3.1.1",
-    "tailwindcss": "^3.0.24"
+    "@astrojs/solid-js": "^2.2.0",
+    "@astrojs/tailwind": "^4.0.0",
+    "@release-it/keep-a-changelog": "^4.0.0",
+    "astro": "^2.10.1",
+    "concurrently": "^8.2.0",
+    "jsdom": "^22.1.0",
+    "prettier": "^3.0.1",
+    "release-it": "^16.1.3",
+    "solid-js": "^1.7.9",
+    "tailwindcss": "^3.3.3",
+    "tsup": "^7.2.0",
+    "typescript": "^5.1.6",
+    "vite-plugin-solid": "^2.7.0",
+    "vitest": "^0.34.1"
   },
   "dependencies": {
-    "@solid-primitives/refs": "^1.0.1",
-    "@solid-primitives/transition-group": "^1.0.1"
+    "@solid-primitives/refs": "^1.0.5",
+    "@solid-primitives/transition-group": "^1.0.2"
   },
@@ -56,3 +56,7 @@ "peerDependencies": {
   },
-  "packageManager": "pnpm@7.24.0"
+  "packageManager": "pnpm@8.6.0",
+  "engines": {
+    "node": ">=18.0.0",
+    "pnpm": ">=8.6.0"
+  }
 }

README.md

@@ -36,3 +36,13 @@ <p>
 ```tsx
-<Transition name="slide-fade">{show() && <div>Hello</div>}</Transition>
+import { Transition } from "solid-transition-group"
+
+const [isVisible, setVisible] = createSignal(true)
+
+<Transition name="slide-fade">
+  <Show when={isVisible()}>
+    <div>Hello</div>
+  </Show>
+</Transition>
+
+setVisible(false) // triggers exit transition
 ```
@@ -142,1 +152,3 @@
 - **How to use with Portal?** - [Issue #8](https://github.com/solidjs-community/solid-transition-group/issues/8)
+- **How to use with Outlet?** - [Issue #29](https://github.com/solidjs-community/solid-transition-group/issues/29)
+- **Why elements are not connected in outin mode** - [Issue #34](https://github.com/solidjs-community/solid-transition-group/issues/34)

No alert changes

Improved metrics

Total package byte prevSize

34098

increased by15.74%

Number of package files

7

increased by16.67%

Number of lines in readme file

153

increased by8.51%

Dependency changes

• Updated@solid-primitives/refs@^1.0.5

• Updated@solid-primitives/transition-group@^1.0.2