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

Switch from element components to a massive {#if} block

Browse Source 
Obviously this is very ugly but it's far better for bundle size.
This commit is contained in:
Ryan Gossiaux
2022-03-18 11:53:39 -07:00
parent 2dbc93cfe1
commit 8bc5fabdd9
42 changed files with 493 additions and 667 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/lib/components/label/Label.svelte
View File

@@ -30,7 +30,6 @@
if (passive) delete allProps["onClick"];
</script>
<!-- svelte-ignore a11y-label-has-associated-control -->
<Render
{...allProps}
name={"Label"}

22
src/lib/internal/elements/A.svelte
View File

@@ -1,22 +0,0 @@
<script lang="ts">
import type { ActionArray } from "$lib/hooks/use-actions";
import { useActions } from "$lib/hooks/use-actions";
import { get_current_component } from "svelte/internal";
import { forwardEventsBuilder } from "../forwardEventsBuilder";
export let use: ActionArray = [];
export let el: HTMLAnchorElement | null = null;
const forwardEvents = forwardEventsBuilder(get_current_component());
export let href = "javascript:void(0);";
</script>
<a
bind:this={el}
use:useActions={use}
use:forwardEvents
{href}
{...$$restProps}
>
<slot />
</a>

14
src/lib/internal/elements/Address.svelte
View File

@@ -1,14 +0,0 @@
<script lang="ts">
import type { ActionArray } from "$lib/hooks/use-actions";
import { useActions } from "$lib/hooks/use-actions";
import { get_current_component } from "svelte/internal";
import { forwardEventsBuilder } from "../forwardEventsBuilder";
export let use: ActionArray = [];
export let el: HTMLElement | null = null;
const forwardEvents = forwardEventsBuilder(get_current_component());
</script>
<address bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
<slot />
</address>

14
src/lib/internal/elements/Article.svelte
View File

@@ -1,14 +0,0 @@
<script lang="ts">
import type { ActionArray } from "$lib/hooks/use-actions";
import { useActions } from "$lib/hooks/use-actions";
import { get_current_component } from "svelte/internal";
import { forwardEventsBuilder } from "../forwardEventsBuilder";
export let use: ActionArray = [];
export let el: HTMLElement | null = null;
const forwardEvents = forwardEventsBuilder(get_current_component());
</script>
<article bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
<slot />
</article>

14
src/lib/internal/elements/Aside.svelte
View File

@@ -1,14 +0,0 @@
<script lang="ts">
import type { ActionArray } from "$lib/hooks/use-actions";
import { useActions } from "$lib/hooks/use-actions";
import { get_current_component } from "svelte/internal";
import { forwardEventsBuilder } from "../forwardEventsBuilder";
export let use: ActionArray = [];
export let el: HTMLElement | null = null;
const forwardEvents = forwardEventsBuilder(get_current_component());
</script>
<aside bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
<slot />
</aside>

14
src/lib/internal/elements/B.svelte
View File

@@ -1,14 +0,0 @@
<script lang="ts">
import type { ActionArray } from "$lib/hooks/use-actions";
import { useActions } from "$lib/hooks/use-actions";
import { get_current_component } from "svelte/internal";
import { forwardEventsBuilder } from "../forwardEventsBuilder";
export let use: ActionArray = [];
export let el: HTMLElement | null = null;
const forwardEvents = forwardEventsBuilder(get_current_component());
</script>
<b bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
<slot />
</b>

14
src/lib/internal/elements/Bdi.svelte
View File

@@ -1,14 +0,0 @@
<script lang="ts">
import type { ActionArray } from "$lib/hooks/use-actions";
import { useActions } from "$lib/hooks/use-actions";
import { get_current_component } from "svelte/internal";
import { forwardEventsBuilder } from "../forwardEventsBuilder";
export let use: ActionArray = [];
export let el: HTMLElement | null = null;
const forwardEvents = forwardEventsBuilder(get_current_component());
</script>
<bdi bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
<slot />
</bdi>

14
src/lib/internal/elements/Bdo.svelte
View File

@@ -1,14 +0,0 @@
<script lang="ts">
import type { ActionArray } from "$lib/hooks/use-actions";
import { useActions } from "$lib/hooks/use-actions";
import { get_current_component } from "svelte/internal";
import { forwardEventsBuilder } from "../forwardEventsBuilder";
export let use: ActionArray = [];
export let el: HTMLElement | null = null;
const forwardEvents = forwardEventsBuilder(get_current_component());
</script>
<bdo bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
<slot />
</bdo>

19
src/lib/internal/elements/Blockquote.svelte
View File

@@ -1,19 +0,0 @@
<script lang="ts">
import type { ActionArray } from "$lib/hooks/use-actions";
import { useActions } from "$lib/hooks/use-actions";
import { get_current_component } from "svelte/internal";
import { forwardEventsBuilder } from "../forwardEventsBuilder";
export let use: ActionArray = [];
export let el: HTMLElement | null = null;
const forwardEvents = forwardEventsBuilder(get_current_component());
</script>
<blockquote
bind:this={el}
use:useActions={use}
use:forwardEvents
{...$$restProps}
>
<slot />
</blockquote>

14
src/lib/internal/elements/Button.svelte
View File

@@ -1,14 +0,0 @@
<script lang="ts">
import type { ActionArray } from "$lib/hooks/use-actions";
import { useActions } from "$lib/hooks/use-actions";
import { get_current_component } from "svelte/internal";
import { forwardEventsBuilder } from "../forwardEventsBuilder";
export let use: ActionArray = [];
export let el: HTMLButtonElement | null = null;
const forwardEvents = forwardEventsBuilder(get_current_component());
</script>
<button bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
<slot />
</button>

14
src/lib/internal/elements/Cite.svelte
View File

@@ -1,14 +0,0 @@
<script lang="ts">
import type { ActionArray } from "$lib/hooks/use-actions";
import { useActions } from "$lib/hooks/use-actions";
import { get_current_component } from "svelte/internal";
import { forwardEventsBuilder } from "../forwardEventsBuilder";
export let use: ActionArray = [];
export let el: HTMLElement | null = null;
const forwardEvents = forwardEventsBuilder(get_current_component());
</script>
<cite bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
<slot />
</cite>

14
src/lib/internal/elements/Code.svelte
View File

@@ -1,14 +0,0 @@
<script lang="ts">
import type { ActionArray } from "$lib/hooks/use-actions";
import { useActions } from "$lib/hooks/use-actions";
import { get_current_component } from "svelte/internal";
import { forwardEventsBuilder } from "../forwardEventsBuilder";
export let use: ActionArray = [];
export let el: HTMLElement | null = null;
const forwardEvents = forwardEventsBuilder(get_current_component());
</script>
<code bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
<slot />
</code>

14
src/lib/internal/elements/Data.svelte
View File

@@ -1,14 +0,0 @@
<script lang="ts">
import type { ActionArray } from "$lib/hooks/use-actions";
import { useActions } from "$lib/hooks/use-actions";
import { get_current_component } from "svelte/internal";
import { forwardEventsBuilder } from "../forwardEventsBuilder";
export let use: ActionArray = [];
export let el: HTMLDataElement | null = null;
const forwardEvents = forwardEventsBuilder(get_current_component());
</script>
<data bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
<slot />
</data>

19
src/lib/internal/elements/Datalist.svelte
View File

@@ -1,19 +0,0 @@
<script lang="ts">
import type { ActionArray } from "$lib/hooks/use-actions";
import { useActions } from "$lib/hooks/use-actions";
import { get_current_component } from "svelte/internal";
import { forwardEventsBuilder } from "../forwardEventsBuilder";
export let use: ActionArray = [];
export let el: HTMLDataListElement | null = null;
const forwardEvents = forwardEventsBuilder(get_current_component());
</script>
<datalist
bind:this={el}
use:useActions={use}
use:forwardEvents
{...$$restProps}
>
<slot />
</datalist>

14
src/lib/internal/elements/Dd.svelte
View File

@@ -1,14 +0,0 @@
<script lang="ts">
import type { ActionArray } from "$lib/hooks/use-actions";
import { useActions } from "$lib/hooks/use-actions";
import { get_current_component } from "svelte/internal";
import { forwardEventsBuilder } from "../forwardEventsBuilder";
export let use: ActionArray = [];
export let el: HTMLElement | null = null;
const forwardEvents = forwardEventsBuilder(get_current_component());
</script>
<dd bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
<slot />
</dd>

14
src/lib/internal/elements/Div.svelte
View File

@@ -1,14 +0,0 @@
<script lang="ts">
import type { ActionArray } from "$lib/hooks/use-actions";
import { useActions } from "$lib/hooks/use-actions";
import { get_current_component } from "svelte/internal";
import { forwardEventsBuilder } from "../forwardEventsBuilder";
export let use: ActionArray = [];
export let el: HTMLDivElement | null = null;
const forwardEvents = forwardEventsBuilder(get_current_component());
</script>
<div bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
<slot />
</div>

14
src/lib/internal/elements/Dl.svelte
View File

@@ -1,14 +0,0 @@
<script lang="ts">
import type { ActionArray } from "$lib/hooks/use-actions";
import { useActions } from "$lib/hooks/use-actions";
import { get_current_component } from "svelte/internal";
import { forwardEventsBuilder } from "../forwardEventsBuilder";
export let use: ActionArray = [];
export let el: HTMLElement | null = null;
const forwardEvents = forwardEventsBuilder(get_current_component());
</script>
<dl bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
<slot />
</dl>

14
src/lib/internal/elements/Dt.svelte
View File

@@ -1,14 +0,0 @@
<script lang="ts">
import type { ActionArray } from "$lib/hooks/use-actions";
import { useActions } from "$lib/hooks/use-actions";
import { get_current_component } from "svelte/internal";
import { forwardEventsBuilder } from "../forwardEventsBuilder";
export let use: ActionArray = [];
export let el: HTMLElement | null = null;
const forwardEvents = forwardEventsBuilder(get_current_component());
</script>
<dt bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
<slot />
</dt>

14
src/lib/internal/elements/Em.svelte
View File

@@ -1,14 +0,0 @@
<script lang="ts">
import type { ActionArray } from "$lib/hooks/use-actions";
import { useActions } from "$lib/hooks/use-actions";
import { get_current_component } from "svelte/internal";
import { forwardEventsBuilder } from "../forwardEventsBuilder";
export let use: ActionArray = [];
export let el: HTMLElement | null = null;
const forwardEvents = forwardEventsBuilder(get_current_component());
</script>
<em bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
<slot />
</em>

14
src/lib/internal/elements/Footer.svelte
View File

@@ -1,14 +0,0 @@
<script lang="ts">
import type { ActionArray } from "$lib/hooks/use-actions";
import { useActions } from "$lib/hooks/use-actions";
import { get_current_component } from "svelte/internal";
import { forwardEventsBuilder } from "../forwardEventsBuilder";
export let use: ActionArray = [];
export let el: HTMLElement | null = null;
const forwardEvents = forwardEventsBuilder(get_current_component());
</script>
<footer bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
<slot />
</footer>

14
src/lib/internal/elements/Form.svelte
View File

@@ -1,14 +0,0 @@
<script lang="ts">
import type { ActionArray } from "$lib/hooks/use-actions";
import { useActions } from "$lib/hooks/use-actions";
import { get_current_component } from "svelte/internal";
import { forwardEventsBuilder } from "../forwardEventsBuilder";
export let use: ActionArray = [];
export let el: HTMLFormElement | null = null;
const forwardEvents = forwardEventsBuilder(get_current_component());
</script>
<form bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
<slot />
</form>

14
src/lib/internal/elements/H1.svelte
View File

@@ -1,14 +0,0 @@
<script lang="ts">
import type { ActionArray } from "$lib/hooks/use-actions";
import { useActions } from "$lib/hooks/use-actions";
import { get_current_component } from "svelte/internal";
import { forwardEventsBuilder } from "../forwardEventsBuilder";
export let use: ActionArray = [];
export let el: HTMLHeadingElement | null = null;
const forwardEvents = forwardEventsBuilder(get_current_component());
</script>
<h1 bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
<slot />
</h1>

14
src/lib/internal/elements/H2.svelte
View File

@@ -1,14 +0,0 @@
<script lang="ts">
import type { ActionArray } from "$lib/hooks/use-actions";
import { useActions } from "$lib/hooks/use-actions";
import { get_current_component } from "svelte/internal";
import { forwardEventsBuilder } from "../forwardEventsBuilder";
export let use: ActionArray = [];
export let el: HTMLHeadingElement | null = null;
const forwardEvents = forwardEventsBuilder(get_current_component());
</script>
<h2 bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
<slot />
</h2>

14
src/lib/internal/elements/H3.svelte
View File

@@ -1,14 +0,0 @@
<script lang="ts">
import type { ActionArray } from "$lib/hooks/use-actions";
import { useActions } from "$lib/hooks/use-actions";
import { get_current_component } from "svelte/internal";
import { forwardEventsBuilder } from "../forwardEventsBuilder";
export let use: ActionArray = [];
export let el: HTMLHeadingElement | null = null;
const forwardEvents = forwardEventsBuilder(get_current_component());
</script>
<h3 bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
<slot />
</h3>

14
src/lib/internal/elements/H4.svelte
View File

@@ -1,14 +0,0 @@
<script lang="ts">
import type { ActionArray } from "$lib/hooks/use-actions";
import { useActions } from "$lib/hooks/use-actions";
import { get_current_component } from "svelte/internal";
import { forwardEventsBuilder } from "../forwardEventsBuilder";
export let use: ActionArray = [];
export let el: HTMLHeadingElement | null = null;
const forwardEvents = forwardEventsBuilder(get_current_component());
</script>
<h4 bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
<slot />
</h4>

14
src/lib/internal/elements/H5.svelte
View File

@@ -1,14 +0,0 @@
<script lang="ts">
import type { ActionArray } from "$lib/hooks/use-actions";
import { useActions } from "$lib/hooks/use-actions";
import { get_current_component } from "svelte/internal";
import { forwardEventsBuilder } from "../forwardEventsBuilder";
export let use: ActionArray = [];
export let el: HTMLHeadingElement | null = null;
const forwardEvents = forwardEventsBuilder(get_current_component());
</script>
<h5 bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
<slot />
</h5>

14
src/lib/internal/elements/H6.svelte
View File

@@ -1,14 +0,0 @@
<script lang="ts">
import type { ActionArray } from "$lib/hooks/use-actions";
import { useActions } from "$lib/hooks/use-actions";
import { get_current_component } from "svelte/internal";
import { forwardEventsBuilder } from "../forwardEventsBuilder";
export let use: ActionArray = [];
export let el: HTMLHeadingElement | null = null;
const forwardEvents = forwardEventsBuilder(get_current_component());
</script>
<h6 bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
<slot />
</h6>

14
src/lib/internal/elements/Header.svelte
View File

@@ -1,14 +0,0 @@
<script lang="ts">
import type { ActionArray } from "$lib/hooks/use-actions";
import { useActions } from "$lib/hooks/use-actions";
import { get_current_component } from "svelte/internal";
import { forwardEventsBuilder } from "../forwardEventsBuilder";
export let use: ActionArray = [];
export let el: HTMLElement | null = null;
const forwardEvents = forwardEventsBuilder(get_current_component());
</script>
<header bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
<slot />
</header>

14
src/lib/internal/elements/I.svelte
View File

@@ -1,14 +0,0 @@
<script lang="ts">
import type { ActionArray } from "$lib/hooks/use-actions";
import { useActions } from "$lib/hooks/use-actions";
import { get_current_component } from "svelte/internal";
import { forwardEventsBuilder } from "../forwardEventsBuilder";
export let use: ActionArray = [];
export let el: HTMLElement | null = null;
const forwardEvents = forwardEventsBuilder(get_current_component());
</script>
<i bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
<slot />
</i>

13
src/lib/internal/elements/Input.svelte
View File

@@ -1,13 +0,0 @@
<script lang="ts">
import type { ActionArray } from "$lib/hooks/use-actions";
import { useActions } from "$lib/hooks/use-actions";
import { get_current_component } from "svelte/internal";
import { forwardEventsBuilder } from "../forwardEventsBuilder";
export let use: ActionArray = [];
export let el: HTMLInputElement | null = null;
const forwardEvents = forwardEventsBuilder(get_current_component());
</script>
<input bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps} />
<slot />

15
src/lib/internal/elements/Label.svelte
View File

@@ -1,15 +0,0 @@
<script lang="ts">
import type { ActionArray } from "$lib/hooks/use-actions";
import { useActions } from "$lib/hooks/use-actions";
import { get_current_component } from "svelte/internal";
import { forwardEventsBuilder } from "../forwardEventsBuilder";
export let use: ActionArray = [];
export let el: HTMLLabelElement | null = null;
const forwardEvents = forwardEventsBuilder(get_current_component());
</script>
<!-- svelte-ignore a11y-label-has-associated-control -->
<label bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
<slot />
</label>

14
src/lib/internal/elements/Li.svelte
View File

@@ -1,14 +0,0 @@
<script lang="ts">
import type { ActionArray } from "$lib/hooks/use-actions";
import { useActions } from "$lib/hooks/use-actions";
import { get_current_component } from "svelte/internal";
import { forwardEventsBuilder } from "../forwardEventsBuilder";
export let use: ActionArray = [];
export let el: HTMLLIElement | null = null;
const forwardEvents = forwardEventsBuilder(get_current_component());
</script>
<li bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
<slot />
</li>

14
src/lib/internal/elements/Main.svelte
View File

@@ -1,14 +0,0 @@
<script lang="ts">
import type { ActionArray } from "$lib/hooks/use-actions";
import { useActions } from "$lib/hooks/use-actions";
import { get_current_component } from "svelte/internal";
import { forwardEventsBuilder } from "../forwardEventsBuilder";
export let use: ActionArray = [];
export let el: HTMLElement | null = null;
const forwardEvents = forwardEventsBuilder(get_current_component());
</script>
<main bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
<slot />
</main>

14
src/lib/internal/elements/Nav.svelte
View File

@@ -1,14 +0,0 @@
<script lang="ts">
import type { ActionArray } from "$lib/hooks/use-actions";
import { useActions } from "$lib/hooks/use-actions";
import { get_current_component } from "svelte/internal";
import { forwardEventsBuilder } from "../forwardEventsBuilder";
export let use: ActionArray = [];
export let el: HTMLElement | null = null;
const forwardEvents = forwardEventsBuilder(get_current_component());
</script>
<nav bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
<slot />
</nav>

14
src/lib/internal/elements/Ol.svelte
View File

@@ -1,14 +0,0 @@
<script lang="ts">
import type { ActionArray } from "$lib/hooks/use-actions";
import { useActions } from "$lib/hooks/use-actions";
import { get_current_component } from "svelte/internal";
import { forwardEventsBuilder } from "../forwardEventsBuilder";
export let use: ActionArray = [];
export let el: HTMLOListElement | null = null;
const forwardEvents = forwardEventsBuilder(get_current_component());
</script>
<ol bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
<slot />
</ol>

14
src/lib/internal/elements/P.svelte
View File

@@ -1,14 +0,0 @@
<script lang="ts">
import type { ActionArray } from "$lib/hooks/use-actions";
import { useActions } from "$lib/hooks/use-actions";
import { get_current_component } from "svelte/internal";
import { forwardEventsBuilder } from "../forwardEventsBuilder";
export let use: ActionArray = [];
export let el: HTMLParagraphElement | null = null;
const forwardEvents = forwardEventsBuilder(get_current_component());
</script>
<p bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
<slot />
</p>

14
src/lib/internal/elements/Section.svelte
View File

@@ -1,14 +0,0 @@
<script lang="ts">
import type { ActionArray } from "$lib/hooks/use-actions";
import { useActions } from "$lib/hooks/use-actions";
import { get_current_component } from "svelte/internal";
import { forwardEventsBuilder } from "../forwardEventsBuilder";
export let use: ActionArray = [];
export let el: HTMLElement | null = null;
const forwardEvents = forwardEventsBuilder(get_current_component());
</script>
<section bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
<slot />
</section>

14
src/lib/internal/elements/Span.svelte
View File

@@ -1,14 +0,0 @@
<script lang="ts">
import type { ActionArray } from "$lib/hooks/use-actions";
import { useActions } from "$lib/hooks/use-actions";
import { get_current_component } from "svelte/internal";
import { forwardEventsBuilder } from "../forwardEventsBuilder";
export let use: ActionArray = [];
export let el: HTMLSpanElement | null = null;
const forwardEvents = forwardEventsBuilder(get_current_component());
</script>
<span bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
<slot />
</span>

14
src/lib/internal/elements/Strong.svelte
View File

@@ -1,14 +0,0 @@
<script lang="ts">
import type { ActionArray } from "$lib/hooks/use-actions";
import { useActions } from "$lib/hooks/use-actions";
import { get_current_component } from "svelte/internal";
import { forwardEventsBuilder } from "../forwardEventsBuilder";
export let use: ActionArray = [];
export let el: HTMLElement | null = null;
const forwardEvents = forwardEventsBuilder(get_current_component());
</script>
<strong bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
<slot />
</strong>

14
src/lib/internal/elements/Ul.svelte
View File

@@ -1,14 +0,0 @@
<script lang="ts">
import type { ActionArray } from "$lib/hooks/use-actions";
import { useActions } from "$lib/hooks/use-actions";
import { get_current_component } from "svelte/internal";
import { forwardEventsBuilder } from "../forwardEventsBuilder";
export let use: ActionArray = [];
export let el: HTMLUListElement | null = null;
const forwardEvents = forwardEventsBuilder(get_current_component());
</script>
<ul bind:this={el} use:useActions={use} use:forwardEvents {...$$restProps}>
<slot />
</ul>

128
src/lib/internal/elements/index.ts
View File

@@ -1,89 +1,49 @@
import type { SvelteComponent } from "svelte";
import A from "./A.svelte";
import Address from "./Address.svelte";
import Article from "./Article.svelte";
import Aside from "./Aside.svelte";
import B from "./B.svelte";
import Bdi from "./Bdi.svelte";
import Bdo from "./Bdo.svelte";
import Blockquote from "./Blockquote.svelte";
import Button from "./Button.svelte";
import Cite from "./Cite.svelte";
import Code from "./Code.svelte";
import Data from "./Data.svelte";
import Datalist from "./Datalist.svelte";
import Dd from "./Dd.svelte";
import Dl from "./Dl.svelte";
import Dt from "./Dt.svelte";
import Div from "./Div.svelte";
import Em from "./Em.svelte";
import Footer from "./Footer.svelte";
import Form from "./Form.svelte";
import H1 from "./H1.svelte";
import H2 from "./H2.svelte";
import H3 from "./H3.svelte";
import H4 from "./H4.svelte";
import H5 from "./H5.svelte";
import H6 from "./H6.svelte";
import Header from "./Header.svelte";
import I from "./I.svelte";
import Input from "./Input.svelte";
import Label from "./Label.svelte";
import Li from "./Li.svelte";
import Main from "./Main.svelte";
import Nav from "./Nav.svelte";
import Ol from "./Ol.svelte";
import P from "./P.svelte";
import Section from "./Section.svelte";
import Span from "./Span.svelte";
import Strong from "./Strong.svelte";
import Ul from "./Ul.svelte";
const components = [
"a",
"address",
"article",
"aside",
"b",
"bdi",
"bdo",
"blockquote",
"button",
"cite",
"code",
"data",
"datalist",
"dd",
"dl",
"dt",
"div",
"em",
"footer",
"form",
"h1",
"h2",
"h3",
"h4",
"h5",
"h6",
"header",
"i",
"input",
"label",
"li",
"main",
"nav",
"ol",
"p",
"section",
"span",
"strong",
"ul",
] as const;
const components = {
a: A,
address: Address,
article: Article,
aside: Aside,
b: B,
bdi: Bdi,
bdo: Bdo,
blockquote: Blockquote,
button: Button,
cite: Cite,
code: Code,
data: Data,
datalist: Datalist,
dd: Dd,
dl: Dl,
dt: Dt,
div: Div,
em: Em,
footer: Footer,
form: Form,
h1: H1,
h2: H2,
h3: H3,
h4: H4,
h5: H5,
h6: H6,
header: Header,
i: I,
input: Input,
label: Label,
li: Li,
main: Main,
nav: Nav,
ol: Ol,
p: P,
section: Section,
span: Span,
strong: Strong,
ul: Ul,
};
export type SupportedElement = keyof typeof components;
export type SupportedElement = typeof components[number];
export type SupportedAs = SupportedElement | typeof SvelteComponent;
export function getElementComponent(name: SupportedElement) {
return components[name];
export function isValidElement(element: SupportedAs) {
return !(typeof element === "string" && !components.includes(element));
}

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

@@ -1,6 +1,5 @@
<script lang="ts" context="module">
import type { SupportedAs } from "$lib/internal/elements";
import { getElementComponent } from "$lib/internal/elements";
import { isValidElement, type SupportedAs } from "$lib/internal/elements";
import { get_current_component } from "svelte/internal";
export enum RenderStrategy {
@@ -10,9 +9,8 @@
</script>
<script lang="ts">
import type { HTMLActionArray } from "$lib/hooks/use-actions";
import { useActions, type HTMLActionArray } from "$lib/hooks/use-actions";
import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
import type { SvelteComponent } from "svelte";
import { Features, type TRenderProps } from "$lib/types";
const forwardEvents = forwardEventsBuilder(get_current_component());
@@ -45,10 +43,7 @@
throw new Error(`<${name}> did not provide an \`as\` value to <Render>`);
}
// This type is a lie (could also be undefined) but there's a type error if we allow undefined
let element: typeof SvelteComponent =
typeof as === "string" ? getElementComponent(as) : as;
if (!element) {
if (!isValidElement(as)) {
throw new Error(
`<${name}> has an invalid or unsupported \`as\` prop: ${as}`
);
@@ -79,8 +74,443 @@
</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
bind:this={el}
use:useActions={use}
use:forwardEvents
{...$$restProps}
{...propsWeControl}
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>
{:else}
<svelte:component
this={element}
this={as}
bind:el
use={[...use, forwardEvents]}
{...$$restProps}
@@ -89,4 +519,5 @@
>
<slot />
</svelte:component>
{/if}
{/if}