Rename the Transition events to match the Svelte names

See #57

Author: rgossiaux

src/lib/components/transitions/TransitionChild.svelte

@@ -76,17 +76,17 @@
 
   /***** Events *****/
   const dispatch = createEventDispatcher<{
-    afterEnter: null;
-    afterLeave: null;
-    beforeEnter: null;
-    beforeLeave: null;
+    introstart: null;
+    introend: null;
+    outrostart: null;
+    outroend: null;
   }>();
 
   const forwardEvents = forwardEventsBuilder(get_current_component(), [
-    "beforeEnter",
-    "beforeLeave",
-    "afterEnter",
-    "afterLeave",
+    "introstart",
+    "introend",
+    "outrostart",
+    "outroend",
   ]);
 
   /***** Component *****/
@@ -112,7 +112,7 @@
       if (!isTransitioning) {
         state = TreeStates.Hidden;
         $nestingContext.unregister(id);
-        dispatch("afterLeave");
+        dispatch("outroend");
       }
     })
   );
@@ -167,8 +167,8 @@
 
     isTransitioning = true;
 
-    if (show) dispatch("beforeEnter");
-    if (!show) dispatch("beforeLeave");
+    if (show) dispatch("introstart");
+    if (!show) dispatch("outrostart");
 
     return show
       ? transition(
@@ -179,7 +179,7 @@
           enteredClasses,
           (reason) => {
             isTransitioning = false;
-            if (reason === Reason.Finished) dispatch("afterEnter");
+            if (reason === Reason.Finished) dispatch("introend");
           }
         )
       : transition(
@@ -198,7 +198,7 @@
             if (!hasChildren($nesting)) {
               state = TreeStates.Hidden;
               $nestingContext.unregister(id);
-              dispatch("afterLeave");
+              dispatch("outroend");
             }
           }
         );

src/lib/components/transitions/TransitionChildWrapper.svelte

@@ -10,10 +10,10 @@
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
   import { hasTransitionContext } from "./common.svelte";
   const forwardEvents = forwardEventsBuilder(get_current_component(), [
-    "beforeEnter",
-    "beforeLeave",
-    "afterEnter",
-    "afterLeave",
+    "introstart",
+    "introend",
+    "outrostart",
+    "outroend",
   ]);
 
   /***** Props *****/
@@ -35,10 +35,10 @@
     {...$$props}
     {as}
     use={[...use, forwardEvents]}
-    on:afterEnter
-    on:afterLeave
-    on:beforeEnter
-    on:beforeLeave
+    on:introstart
+    on:introend
+    on:outrostart
+    on:outroend
   >
     <slot />
   </TransitionRoot>
@@ -47,10 +47,10 @@
     {...$$props}
     {as}
     use={[...use, forwardEvents]}
-    on:afterEnter
-    on:afterLeave
-    on:beforeEnter
-    on:beforeLeave
+    on:introstart
+    on:introend
+    on:outrostart
+    on:outroend
   >
     <slot />
   </TransitionChild>

src/lib/components/transitions/TransitionRoot.svelte

@@ -33,10 +33,10 @@
   } from "./common.svelte";
   import type { TRestProps } from "$lib/types";
   const forwardEvents = forwardEventsBuilder(get_current_component(), [
-    "beforeEnter",
-    "beforeLeave",
-    "afterEnter",
-    "afterLeave",
+    "introstart",
+    "introend",
+    "outrostart",
+    "outroend",
   ]);
 
   /***** Props *****/
@@ -121,10 +121,10 @@
     {...$$restProps}
     {as}
     use={[...use, forwardEvents]}
-    on:afterEnter
-    on:afterLeave
-    on:beforeEnter
-    on:beforeLeave
+    on:introstart
+    on:introend
+    on:outrostart
+    on:outroend
   >
     <slot />
   </TransitionChild>

src/routes/dialog/index.svelte

@@ -55,7 +55,7 @@
 {#if nested}
   <Nested on:close={() => (nested = false)} />
 {/if}
-<Transition show={isOpen} on:afterLeave={() => console.log("done")}>
+<Transition show={isOpen} on:outroend={() => console.log("done")}>
   <Dialog on:close={() => (isOpen = false)}>
     <div class="fixed z-10 inset-0 overflow-y-auto">
       <div

src/routes/docs/latest/transition.svx

@@ -215,10 +215,12 @@ This component also dispatches the following custom events, which are listened t
 
 | Event name    | Type of event `.detail` | Description                                     |
 | ------------- | ----------------------- | ----------------------------------------------- |
-| `beforeEnter` | `null`                  | Dispatched before we start the enter transition |
-| `afterEnter`  | `null`                  | Dispatched after we finish the enter transition |
-| `beforeLeave` | `null`                  | Dispatched before we start the leave transition |
-| `afterLeave`  | `null`                  | Dispatched after we finish the leave transition |
+| `introstart` | `null`                  | Dispatched before we start the enter transition |
+| `introend`  | `null`                  | Dispatched after we finish the enter transition |
+| `outrostart` | `null`                  | Dispatched before we start the leave transition |
+| `outroend`  | `null`                  | Dispatched after we finish the leave transition |
+
+These event names have been changed to match the names that Svelte uses for transitions, starting in version 2.0 of this library.
 
 ### TransitionChild
 

src/routes/transitions/component-examples/modal.svelte

@@ -42,19 +42,19 @@
   <Transition
     show={isOpen}
     class="fixed inset-0 z-10 overflow-y-auto"
-    on:beforeEnter={() => {
+    on:introstart={() => {
       addEvent("Before enter");
     }}
-    on:afterEnter={() => {
+    on:introend={() => {
       inputRef?.focus();
       addEvent("After enter");
     }}
-    on:beforeLeave={() => {
+    on:outrostart={() => {
       addEvent("Before leave (before confirm)");
       window.confirm("Are you sure?");
       addEvent("Before leave (after confirm)");
     }}
-    on:afterLeave={(event) => {
+    on:outroend={(event) => {
       addEvent(`After leave (before alert)`);
       window.alert("Consider it done!");
       addEvent(`After leave (after alert)`);