public/svelte-headlessui
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Move to <svelte:element> in Render.svelte

Browse Source 
I don't know why this causes more whitespace in these snapshot tests but I'm not going to worry about it right now.
This commit is contained in:
Ryan Gossiaux
2023-06-10 20:07:59 -07:00
parent 9383ee32e3
commit 3be62f04db
3 changed files with 15 additions and 426 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/components/description/description.test.ts vendored
View File

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

7
src/lib/components/label/label.test.ts vendored
View File

@@ -65,6 +65,7 @@ it("should be possible to use a LabelProvider and a single Label, and have them
<span>
Contents
</span>
@@ -94,6 +95,7 @@ it("should be possible to use a LabelProvider and multiple Label components, and
<span>
Contents
</span>
@@ -105,6 +107,7 @@ it("should be possible to use a LabelProvider and multiple Label components, and
</label>
</div>
`);
});
@@ -130,6 +133,7 @@ it("should be possible to render a Label with an `as` prop", async () => {
<span>
Contents
</span>
@@ -160,6 +164,7 @@ it("should be possible to change the props of a Label", async () => {
<span>
Contents
</span>
@@ -182,6 +187,7 @@ it("should be possible to change the props of a Label", async () => {
<span>
Contents
</span>
@@ -210,6 +216,7 @@ it("should be possible to use a LabelProvider with slot props", async () => {
<span>
Contents
</span>

430
src/lib/utils/Render.svelte
View File

@@ -74,14 +74,9 @@
</script>
{#if show}
<!-- Here be dragons.
This horrible monstrosity is nonetheless much more efficient than
wrapping each element in its own component; that adds too much
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
{#if typeof as === "string"}
<svelte:element
this={as}
bind:this={el}
use:useActions={use}
use:forwardEvents
@@ -90,424 +85,7 @@
hidden={hidden || undefined}
>
<slot />
</a>
{: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>
</svelte:element>
{:else}
<svelte:component
this={as}