Support Features rendering / static/unmount props

Fixes #1

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,7 +247,6 @@
   on:mousedown={handleWindowMousedown}
   on:keydown={handleWindowKeydown}
 />
-{#if visible}
 <FocusTrap {containers} {enabled} options={{ initialFocus }} />
 <StackContextProvider
   element={internalDialogRef}
@@ -276,6 +275,8 @@
               bind:el={internalDialogRef}
               aria-describedby={describedby}
               on:click={handleClick}
+              {visible}
+              features={Features.RenderStrategy | Features.Static}
             >
               <slot {...slotProps} />
             </Render>
@@ -285,4 +286,3 @@
     </Portal>
   </ForcePortalRootContext>
 </StackContextProvider>
-{/if}

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,7 +41,6 @@
   };
 </script>
 
-{#if visible}
 <Render
   {...{ ...$$restProps, ...propsWeControl }}
   {as}
@@ -49,7 +48,8 @@
   use={[...use, forwardEvents]}
   name={"DisclosurePanel"}
   bind:el={$panelStore}
+  {visible}
+  features={Features.RenderStrategy | Features.Static}
 >
   <slot {...slotProps} />
 </Render>
-{/if}

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,7 +120,6 @@
   $: slotProps = { open: $api.listboxState === ListboxStates.Open };
 </script>
 
-{#if visible}
 <Render
   {...$$restProps}
   {...propsWeControl}
@@ -130,7 +129,8 @@
   name={"ListboxOptions"}
   bind:el={$optionsRef}
   on:keydown={handleKeyDown}
+  {visible}
+  features={Features.RenderStrategy | Features.Static}
 >
   <slot {...slotProps} />
 </Render>
-{/if}

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,7 +138,6 @@
   $: slotProps = { open: $api.menuState === MenuStates.Open };
 </script>
 
-{#if visible}
 <Render
   {...{ ...$$restProps, ...propsWeControl }}
   {as}
@@ -148,7 +147,8 @@
   name={"MenuItems"}
   on:keydown={handleKeyDown}
   on:keyup={handleKeyUp}
+  {visible}
+  features={Features.RenderStrategy | Features.Static}
 >
   <slot {...slotProps} />
 </Render>
-{/if}

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,7 +27,6 @@
   $: slotProps = { open: $api.popoverState === PopoverStates.Open };
 </script>
 
-{#if visible}
 <Render
   {...$$restProps}
   {as}
@@ -36,7 +35,8 @@
   name={"PopoverOverlay"}
   on:click={handleClick}
   aria-hidden
+  {visible}
+  features={Features.RenderStrategy | Features.Static}
 >
   <slot {...slotProps} />
 </Render>
-{/if}

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,7 +135,6 @@
   on:keydown={handleWindowKeydown}
   on:focus|capture={handleFocus}
 />
-{#if visible}
 <Render
   {...$$restProps}
   id={$api.panelId}
@@ -145,7 +144,8 @@
   name={"PopoverPanel"}
   bind:el={$panelStore}
   on:keydown={handleKeydown}
+  {visible}
+  features={Features.RenderStrategy | Features.Static}
 >
   <slot {...slotProps} />
 </Render>
-{/if}

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"}
+  visible={selected}
+  features={Features.RenderStrategy | Features.Static}
 >
   <slot />
 </Render>
-{/if}

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}
 </Render>

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

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>
 
+{#if show}
   <svelte:component
     this={element}
     bind:el
     use={[...use, forwardEvents]}
     {...$$restProps}
-  class={typeof classStyle === "function" ? classStyle(slotProps) : classStyle}
+    class={typeof classStyle === "function"
+      ? classStyle(slotProps)
+      : classStyle}
+    style={hidden ? "display: none" : $$props.style}
+    hidden={hidden || undefined}
   >
     <slot />
   </svelte:component>
+{/if}