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,9 +247,8 @@
   on:mousedown={handleWindowMousedown}
   on:keydown={handleWindowKeydown}
 />
-{#if visible}
+<FocusTrap {containers} {enabled} options={{ initialFocus }} />
-  <FocusTrap {containers} {enabled} options={{ initialFocus }} />
+<StackContextProvider
-  <StackContextProvider
   element={internalDialogRef}
   onUpdate={(message, element) => {
     return match(message, {
@@ -261,7 +260,7 @@
       },
     });
   }}
-  >
+>
   <ForcePortalRootContext force={true}>
     <Portal>
       <PortalGroup target={internalDialogRef}>
@@ -276,6 +275,8 @@
               bind:el={internalDialogRef}
               aria-describedby={describedby}
               on:click={handleClick}
+              {visible}
+              features={Features.RenderStrategy | Features.Static}
             >
               <slot {...slotProps} />
             </Render>
@@ -284,5 +285,4 @@
       </PortalGroup>
     </Portal>
   </ForcePortalRootContext>
-  </StackContextProvider>
+</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,15 +41,15 @@
   };
 </script>
 
-{#if visible}
+<Render
-  <Render
   {...{ ...$$restProps, ...propsWeControl }}
   {as}
   {slotProps}
   use={[...use, forwardEvents]}
   name={"DisclosurePanel"}
   bind:el={$panelStore}
-  >
+  {visible}
+  features={Features.RenderStrategy | Features.Static}
+>
   <slot {...slotProps} />
-  </Render>
+</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,8 +120,7 @@
   $: slotProps = { open: $api.listboxState === ListboxStates.Open };
 </script>
 
-{#if visible}
+<Render
-  <Render
   {...$$restProps}
   {...propsWeControl}
   {as}
@@ -130,7 +129,8 @@
   name={"ListboxOptions"}
   bind:el={$optionsRef}
   on:keydown={handleKeyDown}
-  >
+  {visible}
+  features={Features.RenderStrategy | Features.Static}
+>
   <slot {...slotProps} />
-  </Render>
+</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,8 +138,7 @@
   $: slotProps = { open: $api.menuState === MenuStates.Open };
 </script>
 
-{#if visible}
+<Render
-  <Render
   {...{ ...$$restProps, ...propsWeControl }}
   {as}
   {slotProps}
@@ -148,7 +147,8 @@
   name={"MenuItems"}
   on:keydown={handleKeyDown}
   on:keyup={handleKeyUp}
-  >
+  {visible}
+  features={Features.RenderStrategy | Features.Static}
+>
   <slot {...slotProps} />
-  </Render>
+</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,8 +27,7 @@
   $: slotProps = { open: $api.popoverState === PopoverStates.Open };
 </script>
 
-{#if visible}
+<Render
-  <Render
   {...$$restProps}
   {as}
   {slotProps}
@@ -36,7 +35,8 @@
   name={"PopoverOverlay"}
   on:click={handleClick}
   aria-hidden
-  >
+  {visible}
+  features={Features.RenderStrategy | Features.Static}
+>
   <slot {...slotProps} />
-  </Render>
+</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,8 +135,7 @@
   on:keydown={handleWindowKeydown}
   on:focus|capture={handleFocus}
 />
-{#if visible}
+<Render
-  <Render
   {...$$restProps}
   id={$api.panelId}
   {as}
@@ -145,7 +144,8 @@
   name={"PopoverPanel"}
   bind:el={$panelStore}
   on:keydown={handleKeydown}
-  >
+  {visible}
+  features={Features.RenderStrategy | Features.Static}
+>
   <slot {...slotProps} />
-  </Render>
+</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
-  <Render
   {...{ ...$$restProps, ...propsWeControl }}
   {as}
   use={[...use, forwardEvents]}
   name={"TabPanel"}
-  >
+  visible={selected}
+  features={Features.RenderStrategy | Features.Static}
+>
   <slot />
-  </Render>
+</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>
 
-<svelte:component
+{#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>
+  </svelte:component>
+{/if}