Move to <svelte:element> in Render.svelte

I don't know why this causes more whitespace in these snapshot tests but I'm not going to worry about it right now.

src/lib/components/description/description.test.ts

@@ -58,6 +58,7 @@ it("should be possible to use a DescriptionProvider and a single Description, an
       </p>
       
       
+      
        
       <span>
         Contents
@@ -87,6 +88,7 @@ it("should be possible to use a DescriptionProvider and multiple Description com
       </p>
       
       
+      
        
       <span>
         Contents
@@ -99,6 +101,7 @@ it("should be possible to use a DescriptionProvider and multiple Description com
       </p>
       
       
+      
     </div>
   `);
 });
@@ -124,6 +127,7 @@ it("should be possible to use a DescriptionProvider with slot props", async () =
       </p>
       
       
+      
        
       <span>
         Contents

src/lib/components/label/label.test.ts

@@ -64,6 +64,7 @@ it("should be possible to use a LabelProvider and a single Label, and have them
       </label>
       
       
+      
        
       <span>
         Contents
@@ -93,6 +94,7 @@ it("should be possible to use a LabelProvider and multiple Label components, and
       </label>
       
       
+      
        
       <span>
         Contents
@@ -105,6 +107,7 @@ it("should be possible to use a LabelProvider and multiple Label components, and
       </label>
       
       
+      
     </div>
   `);
 });
@@ -129,6 +132,7 @@ it("should be possible to render a Label with an `as` prop", async () => {
       </p>
       
       
+      
        
       <span>
         Contents
@@ -159,6 +163,7 @@ it("should be possible to change the props of a Label", async () => {
       </label>
       
       
+      
        
       <span>
         Contents
@@ -181,6 +186,7 @@ it("should be possible to change the props of a Label", async () => {
       </label>
       
       
+      
        
       <span>
         Contents
@@ -209,6 +215,7 @@ it("should be possible to use a LabelProvider with slot props", async () => {
       </label>
       
       
+      
        
       <span>
         Contents

src/lib/utils/Render.svelte

@@ -74,14 +74,9 @@
 </script>
 
 {#if show}
-  <!-- Here be dragons.
+  {#if typeof as === "string"}
-       This horrible monstrosity is nonetheless much more efficient than
+    <svelte:element
-        wrapping each element in its own component; that adds too much
+      this={as}
-        overhead to bundle size from each component.
-       When <svelte:element> is merged in, this nightmare will be fixed. -->
-  {#if as === "a"}
-    <!-- svelte-ignore a11y-missing-attribute -->
-    <a
       bind:this={el}
       use:useActions={use}
       use:forwardEvents
@@ -90,424 +85,7 @@
       hidden={hidden || undefined}
     >
       <slot />
-    </a>
+    </svelte:element>
-  {:else if as === "address"}
-    <address
-      bind:this={el}
-      use:useActions={use}
-      use:forwardEvents
-      {...$$restProps}
-      {...propsWeControl}
-      hidden={hidden || undefined}
-    >
-      <slot />
-    </address>
-  {:else if as === "article"}
-    <article
-      bind:this={el}
-      use:useActions={use}
-      use:forwardEvents
-      {...$$restProps}
-      {...propsWeControl}
-      hidden={hidden || undefined}
-    >
-      <slot />
-    </article>
-  {:else if as === "aside"}
-    <aside
-      bind:this={el}
-      use:useActions={use}
-      use:forwardEvents
-      {...$$restProps}
-      {...propsWeControl}
-      hidden={hidden || undefined}
-    >
-      <slot />
-    </aside>
-  {:else if as === "b"}
-    <b
-      bind:this={el}
-      use:useActions={use}
-      use:forwardEvents
-      {...$$restProps}
-      {...propsWeControl}
-      hidden={hidden || undefined}
-    >
-      <slot />
-    </b>
-  {:else if as === "bdi"}
-    <bdi
-      bind:this={el}
-      use:useActions={use}
-      use:forwardEvents
-      {...$$restProps}
-      {...propsWeControl}
-      hidden={hidden || undefined}
-    >
-      <slot />
-    </bdi>
-  {:else if as === "bdo"}
-    <bdo
-      bind:this={el}
-      use:useActions={use}
-      use:forwardEvents
-      {...$$restProps}
-      {...propsWeControl}
-      hidden={hidden || undefined}
-    >
-      <slot />
-    </bdo>
-  {:else if as === "blockquote"}
-    <blockquote
-      bind:this={el}
-      use:useActions={use}
-      use:forwardEvents
-      {...$$restProps}
-      {...propsWeControl}
-      hidden={hidden || undefined}
-    >
-      <slot />
-    </blockquote>
-  {:else if as === "button"}
-    <button
-      bind:this={el}
-      use:useActions={use}
-      use:forwardEvents
-      {...$$restProps}
-      {...propsWeControl}
-      hidden={hidden || undefined}
-    >
-      <slot />
-    </button>
-  {:else if as === "cite"}
-    <cite
-      bind:this={el}
-      use:useActions={use}
-      use:forwardEvents
-      {...$$restProps}
-      {...propsWeControl}
-      hidden={hidden || undefined}
-    >
-      <slot />
-    </cite>
-  {:else if as === "code"}
-    <code
-      bind:this={el}
-      use:useActions={use}
-      use:forwardEvents
-      {...$$restProps}
-      {...propsWeControl}
-      hidden={hidden || undefined}
-    >
-      <slot />
-    </code>
-  {:else if as === "data"}
-    <data
-      bind:this={el}
-      use:useActions={use}
-      use:forwardEvents
-      {...$$restProps}
-      {...propsWeControl}
-      hidden={hidden || undefined}
-    >
-      <slot />
-    </data>
-  {:else if as === "datalist"}
-    <datalist
-      bind:this={el}
-      use:useActions={use}
-      use:forwardEvents
-      {...$$restProps}
-      {...propsWeControl}
-      hidden={hidden || undefined}
-    >
-      <slot />
-    </datalist>
-  {:else if as === "dd"}
-    <dd
-      bind:this={el}
-      use:useActions={use}
-      use:forwardEvents
-      {...$$restProps}
-      {...propsWeControl}
-      hidden={hidden || undefined}
-    >
-      <slot />
-    </dd>
-  {:else if as === "dl"}
-    <dl
-      bind:this={el}
-      use:useActions={use}
-      use:forwardEvents
-      {...$$restProps}
-      {...propsWeControl}
-      hidden={hidden || undefined}
-    >
-      <slot />
-    </dl>
-  {:else if as === "dt"}
-    <dt
-      bind:this={el}
-      use:useActions={use}
-      use:forwardEvents
-      {...$$restProps}
-      {...propsWeControl}
-      hidden={hidden || undefined}
-    >
-      <slot />
-    </dt>
-  {:else if as === "div"}
-    <div
-      bind:this={el}
-      use:useActions={use}
-      use:forwardEvents
-      {...$$restProps}
-      {...propsWeControl}
-      hidden={hidden || undefined}
-    >
-      <slot />
-    </div>
-  {:else if as === "em"}
-    <em
-      bind:this={el}
-      use:useActions={use}
-      use:forwardEvents
-      {...$$restProps}
-      {...propsWeControl}
-      hidden={hidden || undefined}
-    >
-      <slot />
-    </em>
-  {:else if as === "footer"}
-    <footer
-      bind:this={el}
-      use:useActions={use}
-      use:forwardEvents
-      {...$$restProps}
-      {...propsWeControl}
-      hidden={hidden || undefined}
-    >
-      <slot />
-    </footer>
-  {:else if as === "form"}
-    <form
-      bind:this={el}
-      use:useActions={use}
-      use:forwardEvents
-      {...$$restProps}
-      {...propsWeControl}
-      hidden={hidden || undefined}
-    >
-      <slot />
-    </form>
-  {:else if as === "h1"}
-    <h1
-      bind:this={el}
-      use:useActions={use}
-      use:forwardEvents
-      {...$$restProps}
-      {...propsWeControl}
-      hidden={hidden || undefined}
-    >
-      <slot />
-    </h1>
-  {:else if as === "h2"}
-    <h2
-      bind:this={el}
-      use:useActions={use}
-      use:forwardEvents
-      {...$$restProps}
-      {...propsWeControl}
-      hidden={hidden || undefined}
-    >
-      <slot />
-    </h2>
-  {:else if as === "h3"}
-    <h3
-      bind:this={el}
-      use:useActions={use}
-      use:forwardEvents
-      {...$$restProps}
-      {...propsWeControl}
-      hidden={hidden || undefined}
-    >
-      <slot />
-    </h3>
-  {:else if as === "h4"}
-    <h4
-      bind:this={el}
-      use:useActions={use}
-      use:forwardEvents
-      {...$$restProps}
-      {...propsWeControl}
-      hidden={hidden || undefined}
-    >
-      <slot />
-    </h4>
-  {:else if as === "h5"}
-    <h5
-      bind:this={el}
-      use:useActions={use}
-      use:forwardEvents
-      {...$$restProps}
-      {...propsWeControl}
-      hidden={hidden || undefined}
-    >
-      <slot />
-    </h5>
-  {:else if as === "h6"}
-    <h6
-      bind:this={el}
-      use:useActions={use}
-      use:forwardEvents
-      {...$$restProps}
-      {...propsWeControl}
-      hidden={hidden || undefined}
-    >
-      <slot />
-    </h6>
-  {:else if as === "header"}
-    <header
-      bind:this={el}
-      use:useActions={use}
-      use:forwardEvents
-      {...$$restProps}
-      {...propsWeControl}
-      hidden={hidden || undefined}
-    >
-      <slot />
-    </header>
-  {:else if as === "i"}
-    <i
-      bind:this={el}
-      use:useActions={use}
-      use:forwardEvents
-      {...$$restProps}
-      {...propsWeControl}
-      hidden={hidden || undefined}
-    >
-      <slot />
-    </i>
-  {:else if as === "input"}
-    <input
-      bind:this={el}
-      use:useActions={use}
-      use:forwardEvents
-      {...$$restProps}
-      {...propsWeControl}
-      hidden={hidden || undefined}
-    />
-  {:else if as === "label"}
-    <!-- svelte-ignore a11y-label-has-associated-control -->
-    <label
-      bind:this={el}
-      use:useActions={use}
-      use:forwardEvents
-      {...$$restProps}
-      {...propsWeControl}
-      hidden={hidden || undefined}
-    >
-      <slot />
-    </label>
-  {:else if as === "li"}
-    <li
-      bind:this={el}
-      use:useActions={use}
-      use:forwardEvents
-      {...$$restProps}
-      {...propsWeControl}
-      hidden={hidden || undefined}
-    >
-      <slot />
-    </li>
-  {:else if as === "main"}
-    <main
-      bind:this={el}
-      use:useActions={use}
-      use:forwardEvents
-      {...$$restProps}
-      {...propsWeControl}
-      hidden={hidden || undefined}
-    >
-      <slot />
-    </main>
-  {:else if as === "nav"}
-    <nav
-      bind:this={el}
-      use:useActions={use}
-      use:forwardEvents
-      {...$$restProps}
-      {...propsWeControl}
-      hidden={hidden || undefined}
-    >
-      <slot />
-    </nav>
-  {:else if as === "ol"}
-    <ol
-      bind:this={el}
-      use:useActions={use}
-      use:forwardEvents
-      {...$$restProps}
-      {...propsWeControl}
-      hidden={hidden || undefined}
-    >
-      <slot />
-    </ol>
-  {:else if as === "p"}
-    <p
-      bind:this={el}
-      use:useActions={use}
-      use:forwardEvents
-      {...$$restProps}
-      {...propsWeControl}
-      hidden={hidden || undefined}
-    >
-      <slot />
-    </p>
-  {:else if as === "section"}
-    <section
-      bind:this={el}
-      use:useActions={use}
-      use:forwardEvents
-      {...$$restProps}
-      {...propsWeControl}
-      hidden={hidden || undefined}
-    >
-      <slot />
-    </section>
-  {:else if as === "span"}
-    <span
-      bind:this={el}
-      use:useActions={use}
-      use:forwardEvents
-      {...$$restProps}
-      {...propsWeControl}
-      hidden={hidden || undefined}
-    >
-      <slot />
-    </span>
-  {:else if as === "strong"}
-    <strong
-      bind:this={el}
-      use:useActions={use}
-      use:forwardEvents
-      {...$$restProps}
-      {...propsWeControl}
-      hidden={hidden || undefined}
-    >
-      <slot />
-    </strong>
-  {:else if as === "ul"}
-    <ul
-      bind:this={el}
-      use:useActions={use}
-      use:forwardEvents
-      {...$$restProps}
-      {...propsWeControl}
-      hidden={hidden || undefined}
-    >
-      <slot />
-    </ul>
   {:else}
     <svelte:component
       this={as}