Switch from element components to a massive {#if} block
Obviously this is very ugly but it's far better for bundle size.
This commit is contained in:
Ryan Gossiaux
@@ -30,7 +30,6 @@
|
|||||||
if (passive) delete allProps["onClick"];
|
if (passive) delete allProps["onClick"];
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- svelte-ignore a11y-label-has-associated-control -->
|
|
||||||
<Render
|
<Render
|
||||||
{...allProps}
|
{...allProps}
|
||||||
name={"Label"}
|
name={"Label"}
|
||||||
|
|||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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 />
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -1,89 +1,49 @@
|
|||||||
import type { SvelteComponent } from "svelte";
|
import type { SvelteComponent } from "svelte";
|
||||||
import A from "./A.svelte";
|
const components = [
|
||||||
import Address from "./Address.svelte";
|
"a",
|
||||||
import Article from "./Article.svelte";
|
"address",
|
||||||
import Aside from "./Aside.svelte";
|
"article",
|
||||||
import B from "./B.svelte";
|
"aside",
|
||||||
import Bdi from "./Bdi.svelte";
|
"b",
|
||||||
import Bdo from "./Bdo.svelte";
|
"bdi",
|
||||||
import Blockquote from "./Blockquote.svelte";
|
"bdo",
|
||||||
import Button from "./Button.svelte";
|
"blockquote",
|
||||||
import Cite from "./Cite.svelte";
|
"button",
|
||||||
import Code from "./Code.svelte";
|
"cite",
|
||||||
import Data from "./Data.svelte";
|
"code",
|
||||||
import Datalist from "./Datalist.svelte";
|
"data",
|
||||||
import Dd from "./Dd.svelte";
|
"datalist",
|
||||||
import Dl from "./Dl.svelte";
|
"dd",
|
||||||
import Dt from "./Dt.svelte";
|
"dl",
|
||||||
import Div from "./Div.svelte";
|
"dt",
|
||||||
import Em from "./Em.svelte";
|
"div",
|
||||||
import Footer from "./Footer.svelte";
|
"em",
|
||||||
import Form from "./Form.svelte";
|
"footer",
|
||||||
import H1 from "./H1.svelte";
|
"form",
|
||||||
import H2 from "./H2.svelte";
|
"h1",
|
||||||
import H3 from "./H3.svelte";
|
"h2",
|
||||||
import H4 from "./H4.svelte";
|
"h3",
|
||||||
import H5 from "./H5.svelte";
|
"h4",
|
||||||
import H6 from "./H6.svelte";
|
"h5",
|
||||||
import Header from "./Header.svelte";
|
"h6",
|
||||||
import I from "./I.svelte";
|
"header",
|
||||||
import Input from "./Input.svelte";
|
"i",
|
||||||
import Label from "./Label.svelte";
|
"input",
|
||||||
import Li from "./Li.svelte";
|
"label",
|
||||||
import Main from "./Main.svelte";
|
"li",
|
||||||
import Nav from "./Nav.svelte";
|
"main",
|
||||||
import Ol from "./Ol.svelte";
|
"nav",
|
||||||
import P from "./P.svelte";
|
"ol",
|
||||||
import Section from "./Section.svelte";
|
"p",
|
||||||
import Span from "./Span.svelte";
|
"section",
|
||||||
import Strong from "./Strong.svelte";
|
"span",
|
||||||
import Ul from "./Ul.svelte";
|
"strong",
|
||||||
|
"ul",
|
||||||
|
] as const;
|
||||||
|
|
||||||
const components = {
|
export type SupportedElement = typeof components[number];
|
||||||
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 SupportedAs = SupportedElement | typeof SvelteComponent;
|
export type SupportedAs = SupportedElement | typeof SvelteComponent;
|
||||||
|
|
||||||
export function getElementComponent(name: SupportedElement) {
|
export function isValidElement(element: SupportedAs) {
|
||||||
return components[name];
|
return !(typeof element === "string" && !components.includes(element));
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
<script lang="ts" context="module">
|
<script lang="ts" context="module">
|
||||||
import type { SupportedAs } from "$lib/internal/elements";
|
import { isValidElement, type SupportedAs } from "$lib/internal/elements";
|
||||||
import { getElementComponent } from "$lib/internal/elements";
|
|
||||||
import { get_current_component } from "svelte/internal";
|
import { get_current_component } from "svelte/internal";
|
||||||
|
|
||||||
export enum RenderStrategy {
|
export enum RenderStrategy {
|
||||||
@@ -10,9 +9,8 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script lang="ts">
|
<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 { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
|
||||||
import type { SvelteComponent } from "svelte";
|
|
||||||
import { Features, type TRenderProps } from "$lib/types";
|
import { Features, type TRenderProps } from "$lib/types";
|
||||||
const forwardEvents = forwardEventsBuilder(get_current_component());
|
const forwardEvents = forwardEventsBuilder(get_current_component());
|
||||||
|
|
||||||
@@ -45,10 +43,7 @@
|
|||||||
throw new Error(`<${name}> did not provide an \`as\` value to <Render>`);
|
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
|
if (!isValidElement(as)) {
|
||||||
let element: typeof SvelteComponent =
|
|
||||||
typeof as === "string" ? getElementComponent(as) : as;
|
|
||||||
if (!element) {
|
|
||||||
throw new Error(
|
throw new Error(
|
||||||
`<${name}> has an invalid or unsupported \`as\` prop: ${as}`
|
`<${name}> has an invalid or unsupported \`as\` prop: ${as}`
|
||||||
);
|
);
|
||||||
@@ -79,8 +74,443 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if show}
|
{#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
|
<svelte:component
|
||||||
this={element}
|
this={as}
|
||||||
bind:el
|
bind:el
|
||||||
use={[...use, forwardEvents]}
|
use={[...use, forwardEvents]}
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
@@ -90,3 +520,4 @@
|
|||||||
<slot />
|
<slot />
|
||||||
</svelte:component>
|
</svelte:component>
|
||||||
{/if}
|
{/if}
|
||||||
|
{/if}
|
||||||
|
|||||||
Reference in New Issue
Block a user