From 42d792e72cc78e2946eafb5da1ea2ef7818eab88 Mon Sep 17 00:00:00 2001
From: Ryan Gossiaux <ryan.gossiaux@gmail.com>
Date: Tue, 8 Feb 2022 16:01:43 -0800
Subject: [PATCH] Type Transition with $$Props

But getting some cryptic errors
---
 .../transitions/TransitionChild.svelte        | 40 +++++++++++++++----
 .../transitions/TransitionChildWrapper.svelte | 12 +++++-
 .../transitions/TransitionRoot.svelte         | 20 +++++++++-
 src/routes/dialog/index.svelte                |  2 +-
 4 files changed, 63 insertions(+), 11 deletions(-)

diff --git a/src/lib/components/transitions/TransitionChild.svelte b/src/lib/components/transitions/TransitionChild.svelte
index e795f92..ec0ae03 100644
--- a/src/lib/components/transitions/TransitionChild.svelte
+++ b/src/lib/components/transitions/TransitionChild.svelte
@@ -1,3 +1,18 @@
+<script lang="ts" context="module">
+  export type TTransitionChildProps<TAsProp extends SupportedAs> =
+    TPassThroughProps<{}, TAsProp> & {
+      enter?: string;
+      enterFrom?: string;
+      enterTo?: string;
+      entered?: string;
+      leave?: string;
+      leaveFrom?: string;
+      leaveTo?: string;
+      unmount?: boolean;
+      class?: string;
+    };
+</script>
+
 <script lang="ts">
   import { createEventDispatcher, onMount, setContext } from "svelte";
   import { writable } from "svelte/store";
@@ -18,13 +33,15 @@
   import { get_current_component } from "svelte/internal";
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
-  import Render, { Features, RenderStrategy } from "$lib/utils/Render.svelte";
-  const forwardEvents = forwardEventsBuilder(get_current_component(), [
-    "beforeEnter",
-    "beforeLeave",
-    "afterEnter",
-    "afterLeave",
-  ]);
+  import Render, {
+    Features,
+    RenderStrategy,
+    type TPassThroughProps,
+  } from "$lib/utils/Render.svelte";
+
+  /***** Props *****/
+  type TAsProp = $$Generic<SupportedAs>;
+  type $$Props = TTransitionChildProps<TAsProp>;
 
   export let as: SupportedAs = "div";
   export let use: HTMLActionArray = [];
@@ -37,6 +54,7 @@
   export let leaveFrom = "";
   export let leaveTo = "";
 
+  /***** Events *****/
   const dispatch = createEventDispatcher<{
     afterEnter: null;
     afterLeave: null;
@@ -44,6 +62,14 @@
     beforeLeave: null;
   }>();
 
+  const forwardEvents = forwardEventsBuilder(get_current_component(), [
+    "beforeEnter",
+    "beforeLeave",
+    "afterEnter",
+    "afterLeave",
+  ]);
+
+  /***** Component *****/
   let container: HTMLElement | null = null;
 
   let transitionContext = useTransitionContext();
diff --git a/src/lib/components/transitions/TransitionChildWrapper.svelte b/src/lib/components/transitions/TransitionChildWrapper.svelte
index b45f2e6..760b4b8 100644
--- a/src/lib/components/transitions/TransitionChildWrapper.svelte
+++ b/src/lib/components/transitions/TransitionChildWrapper.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
   import { hasOpenClosed } from "$lib/internal/open-closed";
   import TransitionChild from "./TransitionChild.svelte";
-  import TransitionRoot from "./TransitionRoot.svelte";
+  import TransitionRoot, {
+    type TTransitionRootProps,
+  } from "./TransitionRoot.svelte";
   import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
   import { get_current_component } from "svelte/internal";
   import type { SupportedAs } from "$lib/internal/elements";
@@ -14,9 +16,17 @@
     "afterLeave",
   ]);
 
+  /***** Props *****/
+
+  type TAsProp = $$Generic<SupportedAs>;
+  type $$Props = TTransitionRootProps<TAsProp>;
+
   export let as: SupportedAs = "div";
   export let use: HTMLActionArray = [];
 
+  /***** Events *****/
+
+  /***** Component *****/
   let hasTransition = hasTransitionContext();
   let hasOpen = hasOpenClosed();
 </script>
diff --git a/src/lib/components/transitions/TransitionRoot.svelte b/src/lib/components/transitions/TransitionRoot.svelte
index 0e38963..b0b8f65 100644
--- a/src/lib/components/transitions/TransitionRoot.svelte
+++ b/src/lib/components/transitions/TransitionRoot.svelte
@@ -1,9 +1,19 @@
+<script lang="ts" context="module">
+  export type TTransitionRootProps<TAsProp extends SupportedAs> =
+    TTransitionChildProps<TAsProp> & {
+      show?: boolean;
+      appear?: boolean;
+    };
+</script>
+
 <script lang="ts">
   import { onMount, setContext } from "svelte";
   import { writable } from "svelte/store";
   import { match } from "$lib/utils/match";
   import { State, useOpenClosed } from "$lib/internal/open-closed";
-  import TransitionChild from "$lib/components/transitions/TransitionChild.svelte";
+  import TransitionChild, {
+    type TTransitionChildProps,
+  } from "$lib/components/transitions/TransitionChild.svelte";
   import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
   import { get_current_component } from "svelte/internal";
   import type { SupportedAs } from "$lib/internal/elements";
@@ -26,12 +36,18 @@
     "afterLeave",
   ]);
 
+  /***** Props *****/
+  type TAsProp = $$Generic<SupportedAs>;
+  type $$Props = TTransitionRootProps<TAsProp>;
+
   export let as: SupportedAs = "div";
   export let use: HTMLActionArray = [];
-
   export let show: boolean | undefined = undefined;
   export let appear = false;
 
+  /***** Events *****/
+
+  /***** Component *****/
   let openClosedState = useOpenClosed();
 
   function computeShow(
diff --git a/src/routes/dialog/index.svelte b/src/routes/dialog/index.svelte
index 7a4a060..ee94182 100644
--- a/src/routes/dialog/index.svelte
+++ b/src/routes/dialog/index.svelte
@@ -55,7 +55,7 @@
 {#if nested}
   <Nested on:close={() => (nested = false)} />
 {/if}
-<Transition show={isOpen} afterLeave={() => console.log("done")}>
+<Transition show={isOpen} on:afterLeave={() => console.log("done")}>
   <Dialog on:close={() => (isOpen = false)}>
     <div class="fixed z-10 inset-0 overflow-y-auto">
       <div