From d21287eace2ff6c6b4a7e5d2ec4db33ca9744817 Mon Sep 17 00:00:00 2001
From: Ryan Gossiaux <ryan.gossiaux@gmail.com>
Date: Wed, 22 Dec 2021 11:55:52 -0800
Subject: [PATCH] Support Features rendering / static/unmount props

Fixes #1
---
 src/lib/components/dialog/Dialog.svelte       | 80 +++++++++----------
 .../disclosure/DisclosurePanel.svelte         | 26 +++---
 .../components/listbox/ListboxOptions.svelte  | 30 +++----
 src/lib/components/menu/MenuItems.svelte      | 30 +++----
 .../components/popover/PopoverOverlay.svelte  | 28 +++----
 .../components/popover/PopoverPanel.svelte    | 30 +++----
 src/lib/components/tabs/TabPanel.svelte       | 22 ++---
 .../transitions/TransitionChild.svelte        |  9 +--
 .../transitions/TransitionRoot.svelte         |  4 +-
 src/lib/utils/Render.svelte                   | 60 +++++++++++---
 10 files changed, 178 insertions(+), 141 deletions(-)

diff --git a/src/lib/components/dialog/Dialog.svelte b/src/lib/components/dialog/Dialog.svelte
index 43bc80c..6a65324 100644
--- a/src/lib/components/dialog/Dialog.svelte
+++ b/src/lib/components/dialog/Dialog.svelte
@@ -59,7 +59,7 @@
   import { get_current_component } from "svelte/internal";
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
-  import Render from "$lib/utils/Render.svelte";
+  import Render, { Features } from "$lib/utils/Render.svelte";
   const forwardEvents = forwardEventsBuilder(get_current_component(), [
     "close",
   ]);
@@ -247,42 +247,42 @@
   on:mousedown={handleWindowMousedown}
   on:keydown={handleWindowKeydown}
 />
-{#if visible}
-  <FocusTrap {containers} {enabled} options={{ initialFocus }} />
-  <StackContextProvider
-    element={internalDialogRef}
-    onUpdate={(message, element) => {
-      return match(message, {
-        [StackMessage.Add]() {
-          containers.add(element);
-        },
-        [StackMessage.Remove]() {
-          containers.delete(element);
-        },
-      });
-    }}
-  >
-    <ForcePortalRootContext force={true}>
-      <Portal>
-        <PortalGroup target={internalDialogRef}>
-          <ForcePortalRootContext force={false}>
-            <DescriptionProvider name={"Dialog.Description"} let:describedby>
-              <Render
-                {...{ ...$$restProps, ...propsWeControl }}
-                {as}
-                {slotProps}
-                use={[...use, forwardEvents]}
-                name={"Dialog"}
-                bind:el={internalDialogRef}
-                aria-describedby={describedby}
-                on:click={handleClick}
-              >
-                <slot {...slotProps} />
-              </Render>
-            </DescriptionProvider>
-          </ForcePortalRootContext>
-        </PortalGroup>
-      </Portal>
-    </ForcePortalRootContext>
-  </StackContextProvider>
-{/if}
+<FocusTrap {containers} {enabled} options={{ initialFocus }} />
+<StackContextProvider
+  element={internalDialogRef}
+  onUpdate={(message, element) => {
+    return match(message, {
+      [StackMessage.Add]() {
+        containers.add(element);
+      },
+      [StackMessage.Remove]() {
+        containers.delete(element);
+      },
+    });
+  }}
+>
+  <ForcePortalRootContext force={true}>
+    <Portal>
+      <PortalGroup target={internalDialogRef}>
+        <ForcePortalRootContext force={false}>
+          <DescriptionProvider name={"Dialog.Description"} let:describedby>
+            <Render
+              {...{ ...$$restProps, ...propsWeControl }}
+              {as}
+              {slotProps}
+              use={[...use, forwardEvents]}
+              name={"Dialog"}
+              bind:el={internalDialogRef}
+              aria-describedby={describedby}
+              on:click={handleClick}
+              {visible}
+              features={Features.RenderStrategy | Features.Static}
+            >
+              <slot {...slotProps} />
+            </Render>
+          </DescriptionProvider>
+        </ForcePortalRootContext>
+      </PortalGroup>
+    </Portal>
+  </ForcePortalRootContext>
+</StackContextProvider>
diff --git a/src/lib/components/disclosure/DisclosurePanel.svelte b/src/lib/components/disclosure/DisclosurePanel.svelte
index 5d0fe0c..06e885a 100644
--- a/src/lib/components/disclosure/DisclosurePanel.svelte
+++ b/src/lib/components/disclosure/DisclosurePanel.svelte
@@ -14,7 +14,7 @@
   import { get_current_component } from "svelte/internal";
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
-  import Render from "$lib/utils/Render.svelte";
+  import Render, { Features } from "$lib/utils/Render.svelte";
   const forwardEvents = forwardEventsBuilder(get_current_component());
 
   export let as: SupportedAs = "div";
@@ -41,15 +41,15 @@
   };
 </script>
 
-{#if visible}
-  <Render
-    {...{ ...$$restProps, ...propsWeControl }}
-    {as}
-    {slotProps}
-    use={[...use, forwardEvents]}
-    name={"DisclosurePanel"}
-    bind:el={$panelStore}
-  >
-    <slot {...slotProps} />
-  </Render>
-{/if}
+<Render
+  {...{ ...$$restProps, ...propsWeControl }}
+  {as}
+  {slotProps}
+  use={[...use, forwardEvents]}
+  name={"DisclosurePanel"}
+  bind:el={$panelStore}
+  {visible}
+  features={Features.RenderStrategy | Features.Static}
+>
+  <slot {...slotProps} />
+</Render>
diff --git a/src/lib/components/listbox/ListboxOptions.svelte b/src/lib/components/listbox/ListboxOptions.svelte
index 5839a85..f3b04a2 100644
--- a/src/lib/components/listbox/ListboxOptions.svelte
+++ b/src/lib/components/listbox/ListboxOptions.svelte
@@ -6,7 +6,7 @@
   import { Keys } from "$lib/utils/keyboard";
   import { Focus } from "$lib/utils/calculate-active-index";
   import { State, useOpenClosed } from "$lib/internal/open-closed";
-  import Render from "$lib/utils/Render.svelte";
+  import Render, { Features } from "$lib/utils/Render.svelte";
   import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
@@ -120,17 +120,17 @@
   $: slotProps = { open: $api.listboxState === ListboxStates.Open };
 </script>
 
-{#if visible}
-  <Render
-    {...$$restProps}
-    {...propsWeControl}
-    {as}
-    {slotProps}
-    use={[...use, forwardEvents]}
-    name={"ListboxOptions"}
-    bind:el={$optionsRef}
-    on:keydown={handleKeyDown}
-  >
-    <slot {...slotProps} />
-  </Render>
-{/if}
+<Render
+  {...$$restProps}
+  {...propsWeControl}
+  {as}
+  {slotProps}
+  use={[...use, forwardEvents]}
+  name={"ListboxOptions"}
+  bind:el={$optionsRef}
+  on:keydown={handleKeyDown}
+  {visible}
+  features={Features.RenderStrategy | Features.Static}
+>
+  <slot {...slotProps} />
+</Render>
diff --git a/src/lib/components/menu/MenuItems.svelte b/src/lib/components/menu/MenuItems.svelte
index f9a4432..d4cfe5d 100644
--- a/src/lib/components/menu/MenuItems.svelte
+++ b/src/lib/components/menu/MenuItems.svelte
@@ -8,7 +8,7 @@
   import { tick } from "svelte";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
   import type { SupportedAs } from "$lib/internal/elements";
-  import Render from "$lib/utils/Render.svelte";
+  import Render, { Features } from "$lib/utils/Render.svelte";
   import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
   import { get_current_component } from "svelte/internal";
 
@@ -138,17 +138,17 @@
   $: slotProps = { open: $api.menuState === MenuStates.Open };
 </script>
 
-{#if visible}
-  <Render
-    {...{ ...$$restProps, ...propsWeControl }}
-    {as}
-    {slotProps}
-    use={[...use, forwardEvents]}
-    bind:el={$itemsStore}
-    name={"MenuItems"}
-    on:keydown={handleKeyDown}
-    on:keyup={handleKeyUp}
-  >
-    <slot {...slotProps} />
-  </Render>
-{/if}
+<Render
+  {...{ ...$$restProps, ...propsWeControl }}
+  {as}
+  {slotProps}
+  use={[...use, forwardEvents]}
+  bind:el={$itemsStore}
+  name={"MenuItems"}
+  on:keydown={handleKeyDown}
+  on:keyup={handleKeyUp}
+  {visible}
+  features={Features.RenderStrategy | Features.Static}
+>
+  <slot {...slotProps} />
+</Render>
diff --git a/src/lib/components/popover/PopoverOverlay.svelte b/src/lib/components/popover/PopoverOverlay.svelte
index d1eabfe..17b55d2 100644
--- a/src/lib/components/popover/PopoverOverlay.svelte
+++ b/src/lib/components/popover/PopoverOverlay.svelte
@@ -5,7 +5,7 @@
   import { get_current_component } from "svelte/internal";
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
-  import Render from "$lib/utils/Render.svelte";
+  import Render, { Features } from "$lib/utils/Render.svelte";
   const forwardEvents = forwardEventsBuilder(get_current_component());
 
   export let as: SupportedAs = "div";
@@ -27,16 +27,16 @@
   $: slotProps = { open: $api.popoverState === PopoverStates.Open };
 </script>
 
-{#if visible}
-  <Render
-    {...$$restProps}
-    {as}
-    {slotProps}
-    use={[...use, forwardEvents]}
-    name={"PopoverOverlay"}
-    on:click={handleClick}
-    aria-hidden
-  >
-    <slot {...slotProps} />
-  </Render>
-{/if}
+<Render
+  {...$$restProps}
+  {as}
+  {slotProps}
+  use={[...use, forwardEvents]}
+  name={"PopoverOverlay"}
+  on:click={handleClick}
+  aria-hidden
+  {visible}
+  features={Features.RenderStrategy | Features.Static}
+>
+  <slot {...slotProps} />
+</Render>
diff --git a/src/lib/components/popover/PopoverPanel.svelte b/src/lib/components/popover/PopoverPanel.svelte
index 89668f1..4cfa723 100644
--- a/src/lib/components/popover/PopoverPanel.svelte
+++ b/src/lib/components/popover/PopoverPanel.svelte
@@ -28,7 +28,7 @@
   import { get_current_component } from "svelte/internal";
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
-  import Render from "$lib/utils/Render.svelte";
+  import Render, { Features } from "$lib/utils/Render.svelte";
   const forwardEvents = forwardEventsBuilder(get_current_component());
 
   export let as: SupportedAs = "div";
@@ -135,17 +135,17 @@
   on:keydown={handleWindowKeydown}
   on:focus|capture={handleFocus}
 />
-{#if visible}
-  <Render
-    {...$$restProps}
-    id={$api.panelId}
-    {as}
-    {slotProps}
-    use={[...use, forwardEvents]}
-    name={"PopoverPanel"}
-    bind:el={$panelStore}
-    on:keydown={handleKeydown}
-  >
-    <slot {...slotProps} />
-  </Render>
-{/if}
+<Render
+  {...$$restProps}
+  id={$api.panelId}
+  {as}
+  {slotProps}
+  use={[...use, forwardEvents]}
+  name={"PopoverPanel"}
+  bind:el={$panelStore}
+  on:keydown={handleKeydown}
+  {visible}
+  features={Features.RenderStrategy | Features.Static}
+>
+  <slot {...slotProps} />
+</Render>
diff --git a/src/lib/components/tabs/TabPanel.svelte b/src/lib/components/tabs/TabPanel.svelte
index 27bc861..7cec664 100644
--- a/src/lib/components/tabs/TabPanel.svelte
+++ b/src/lib/components/tabs/TabPanel.svelte
@@ -6,7 +6,7 @@
   import { get_current_component } from "svelte/internal";
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
-  import Render from "$lib/utils/Render.svelte";
+  import Render, { Features } from "$lib/utils/Render.svelte";
   const forwardEvents = forwardEventsBuilder(get_current_component());
 
   export let as: SupportedAs = "div";
@@ -31,13 +31,13 @@
   };
 </script>
 
-{#if selected}
-  <Render
-    {...{ ...$$restProps, ...propsWeControl }}
-    {as}
-    use={[...use, forwardEvents]}
-    name={"TabPanel"}
-  >
-    <slot />
-  </Render>
-{/if}
+<Render
+  {...{ ...$$restProps, ...propsWeControl }}
+  {as}
+  use={[...use, forwardEvents]}
+  name={"TabPanel"}
+  visible={selected}
+  features={Features.RenderStrategy | Features.Static}
+>
+  <slot />
+</Render>
diff --git a/src/lib/components/transitions/TransitionChild.svelte b/src/lib/components/transitions/TransitionChild.svelte
index ae42cd8..9138b90 100644
--- a/src/lib/components/transitions/TransitionChild.svelte
+++ b/src/lib/components/transitions/TransitionChild.svelte
@@ -18,7 +18,7 @@
   import { get_current_component } from "svelte/internal";
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
-  import Render from "$lib/utils/Render.svelte";
+  import Render, { Features, RenderStrategy } from "$lib/utils/Render.svelte";
   const forwardEvents = forwardEventsBuilder(get_current_component(), [
     "beforeEnter",
     "beforeLeave",
@@ -29,7 +29,6 @@
   export let as: SupportedAs = "div";
   export let use: HTMLActionArray = [];
 
-  export let unmount = true;
   export let enter = "";
   export let enterFrom = "";
   export let enterTo = "";
@@ -186,8 +185,8 @@
   name={"TransitionChild"}
   bind:el={container}
   class={classes}
+  visible={state === TreeStates.Visible}
+  features={Features.RenderStrategy}
 >
-  {#if state === TreeStates.Visible}
-    <slot />
-  {/if}
+  <slot />
 </Render>
diff --git a/src/lib/components/transitions/TransitionRoot.svelte b/src/lib/components/transitions/TransitionRoot.svelte
index 823a67e..992e399 100644
--- a/src/lib/components/transitions/TransitionRoot.svelte
+++ b/src/lib/components/transitions/TransitionRoot.svelte
@@ -126,7 +126,6 @@
   export let use: HTMLActionArray = [];
 
   export let show: boolean | undefined = undefined;
-  export let unmount = true;
   export let appear = false;
 
   let openClosedState = useOpenClosed();
@@ -191,12 +190,11 @@
   setContext(TRANSITION_CONTEXT_NAME, transitionBag);
 </script>
 
-{#if state === TreeStates.Visible}
+{#if state === TreeStates.Visible || $$props.unmount === false}
   <TransitionChild
     {...$$restProps}
     {as}
     use={[...use, forwardEvents]}
-    {unmount}
     on:afterEnter
     on:afterLeave
     on:beforeEnter
diff --git a/src/lib/utils/Render.svelte b/src/lib/utils/Render.svelte
index d3507d3..c8949b6 100644
--- a/src/lib/utils/Render.svelte
+++ b/src/lib/utils/Render.svelte
@@ -5,6 +5,26 @@
   } from "$lib/internal/elements";
   import { get_current_component, SvelteComponent } from "svelte/internal";
 
+  export enum Features {
+    /** No features at all */
+    None = 0,
+
+    /**
+     * When used, this will allow us to use one of the render strategies.
+     *
+     * **The render strategies are:**
+     *    - **Unmount**   _(Will unmount the component.)_
+     *    - **Hidden**    _(Will hide the component using the [hidden] attribute.)_
+     */
+    RenderStrategy = 1,
+
+    /**
+     * When used, this will allow the user of our component to be in control. This can be used when
+     * you want to transition based on some state.
+     */
+    Static = 2,
+  }
+
   export enum RenderStrategy {
     Unmount,
     Hidden,
@@ -14,13 +34,17 @@
 <script lang="ts">
   import type { ActionArray } from "$lib/hooks/use-actions";
   import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
+  const forwardEvents = forwardEventsBuilder(get_current_component());
 
   export let name: string;
   export let as: SvelteComponent | SupportedElement;
   export let el: HTMLElement | null = null;
   export let use: ActionArray = [];
   export let slotProps: unknown = {};
-  const forwardEvents = forwardEventsBuilder(get_current_component());
+  export let visible = true;
+  export let features: Features = Features.None;
+  // The static and unmount props are only used in conjunction with the render strategies
+  export let unmount = true;
 
   if (!as) {
     throw new Error(`<${name}> did not provide an \`as\` value to <Render>`);
@@ -34,14 +58,30 @@
   }
 
   $: classStyle = $$props.class;
+
+  $: show =
+    visible ||
+    (features & Features.Static && $$props.static) ||
+    !(features & Features.RenderStrategy && unmount);
+  $: hidden =
+    !visible &&
+    !(features & Features.Static && $$props.static) &&
+    features & Features.RenderStrategy &&
+    !unmount;
 </script>
 
-<svelte:component
-  this={element}
-  bind:el
-  use={[...use, forwardEvents]}
-  {...$$restProps}
-  class={typeof classStyle === "function" ? classStyle(slotProps) : classStyle}
->
-  <slot />
-</svelte:component>
+{#if show}
+  <svelte:component
+    this={element}
+    bind:el
+    use={[...use, forwardEvents]}
+    {...$$restProps}
+    class={typeof classStyle === "function"
+      ? classStyle(slotProps)
+      : classStyle}
+    style={hidden ? "display: none" : $$props.style}
+    hidden={hidden || undefined}
+  >
+    <slot />
+  </svelte:component>
+{/if}