perf: lazy-load markdown in Tooltip components (#8143)

* perf: lazy-load markdown in Tooltip to reduce stores2 chunk by 335KB Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: migrate TooltipInner to Svelte 5 runes Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * perf: remove markdown rendering from Tooltip components Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: use HTML tables for date format tooltips to preserve formatting Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
2026-08-19 16:02:14 +00:00 · 2026-02-28 08:52:10 +00:00
parent c424b1a961
commit bd9ff03010
9 changed files with 28 additions and 71 deletions
@@ -3,11 +3,9 @@
 	 * @deprecated Use `$lib/components/meltComponents/Tooltip.svelte` instead.
 	 * This legacy tooltip component will be removed in a future version.
 	 */
-	import Markdown from 'svelte-exmarkdown'
 	import type { PopoverPlacement } from './Popover.model'
 	import Popover from './Popover.svelte'
 	import { InfoIcon } from 'lucide-svelte'
-	import { gfmPlugin } from 'svelte-exmarkdown/gfm'
 	import { getContext, hasContext } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
 	interface Props {
@@ -16,7 +14,6 @@
 		placement?: PopoverPlacement | undefined
 		documentationLink?: string | undefined
 		small?: boolean
-		markdownTooltip?: string | undefined
 		customSize?: string
 		class?: string
 		Icon?: typeof InfoIcon
@@ -29,13 +26,11 @@
 		placement = undefined,
 		documentationLink = undefined,
 		small = false,
-		markdownTooltip = undefined,
 		customSize = '100%',
 		class: classNames = '',
 		Icon = InfoIcon,
 		children
 	}: Props = $props()
-	const plugins = [gfmPlugin()]

 	const disableTooltips = hasContext('disableTooltips')
 		? getContext('disableTooltips') === true
@@ -58,13 +53,7 @@
 			<Icon class="{small ? 'bottom-0' : '-bottom-0.5'} absolute" size={small ? 12 : 14} />
 		</div>
 		{#snippet text()}
-			{#if markdownTooltip}
-				<div class="prose-sm">
-					<Markdown md={markdownTooltip} {plugins} />
-				</div>
-			{:else}
-				{@render children?.()}
-			{/if}
+			{@render children?.()}
 		{/snippet}
 	</Popover>
 {/if}
@@ -1,13 +1,18 @@
 <script lang="ts">
-	import Markdown from 'svelte-exmarkdown'
 	import { ExternalLink } from 'lucide-svelte'
-	import { gfmPlugin } from 'svelte-exmarkdown/gfm'
 	import { twMerge } from 'tailwind-merge'

-	export let documentationLink: string | undefined = undefined
-	export let markdownTooltip: string | undefined = undefined
-	export let customBgClass: string | undefined = undefined
-	const plugins = [gfmPlugin()]
+	interface Props {
+		documentationLink?: string | undefined
+		customBgClass?: string | undefined
+		children?: import('svelte').Snippet
+	}
+
+	let {
+		documentationLink = undefined,
+		customBgClass = undefined,
+		children
+	}: Props = $props()
 </script>

 <div
@@ -16,13 +21,7 @@
 		customBgClass || 'bg-surface-secondary'
 	)}
 >
-	{#if markdownTooltip}
-		<div class="prose-sm">
-			<Markdown md={markdownTooltip} {plugins} />
-		</div>
-	{:else}
-		<slot />
-	{/if}
+	{@render children?.()}

 	{#if documentationLink}
 		<a href={documentationLink} target="_blank">
@@ -366,9 +366,8 @@
 						Full path

 						<Tooltip
-							markdownTooltip="Commands run in the default directory. Run a standalone `cd` to change it. Chained or invalid `cd` commands won’t apply."
 							class="absolute top-0.5"
-						/>
+						>Commands run in the default directory. Run a standalone ‘cd’ to change it. Chained or invalid ‘cd’ commands won’t apply.</Tooltip>
 					</Badge>
 				</div>
 				<input type="text" disabled bind:value={working_directory} />
@@ -3069,18 +3069,7 @@ This is a paragraph.
 					type: 'static',
 					value: 'yyyy-MM-dd',
 					fieldType: 'text',
-					markdownTooltip: `### Output format
-See date-fns format for more information. By default, it is 'yyyy-MM-dd'
-
-| Format      | Result | Description |
-| ----------- | ----------- | ----------- |
-| dd 				| 01, 02, ..., 31 | Day of the month |
-| d 				| 1, 2, ..., 31 | Day of the month |
-| MM 				| 01, 02, ..., 12 | Month |
-| MMM 				| Jan, Feb, ..., Dec | Month |
-| MMMM 				| January, February, ..., December | Month |
-| yyyy 				| 2021, 2022, ... | Year |
-`,
+					tooltip: `<b>Output format</b><br>See date-fns format for more information. Default: <code>yyyy-MM-dd</code><table class="mt-1 text-2xs"><tr><th class="pr-2 text-left">Format</th><th class="pr-2 text-left">Result</th><th class="text-left">Description</th></tr><tr><td><code>dd</code></td><td>01, 02, ..., 31</td><td>Day of the month</td></tr><tr><td><code>d</code></td><td>1, 2, ..., 31</td><td>Day of the month</td></tr><tr><td><code>MM</code></td><td>01, 02, ..., 12</td><td>Month</td></tr><tr><td><code>MMM</code></td><td>Jan, Feb, ..., Dec</td><td>Month</td></tr><tr><td><code>MMMM</code></td><td>January, ..., December</td><td>Month</td></tr><tr><td><code>yyyy</code></td><td>2021, 2022, ...</td><td>Year</td></tr></table>`,

 					documentationLink: 'https://date-fns.org/v2.30.0/docs/format',
 					placeholder: 'yyyy-MM-dd'
@@ -3131,21 +3120,7 @@ See date-fns format for more information. By default, it is 'yyyy-MM-dd'
 					fieldType: 'text',
 					documentationLink: 'https://date-fns.org/v2.30.0/docs/format',
 					placeholder: 'dd.MM.yyyy HH:mm',
-					markdownTooltip: `### Output format
-See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
-
-| Format      | Result | Description |
-| ----------- | ----------- | ----------- |
-| dd 				| 01, 02, ..., 31 | Day of the month |
-| d 				| 1, 2, ..., 31 | Day of the month |
-| MM 				| 01, 02, ..., 12 | Month |
-| MMM 				| Jan, Feb, ..., Dec | Month |
-| MMMM 				| January, February, ..., December | Month |
-| yyyy 				| 2021, 2022, ... | Year |
-| HH 				| 00, 01, ..., 23 | Hours |
-| mm 				| 00, 01, ..., 59 | Minutes |
-| ss 				| 00, 01, ..., 59 | Seconds |
-					`
+					tooltip: `<b>Output format</b><br>See date-fns format for more information. Default: <code>dd.MM.yyyy HH:mm</code><table class="mt-1 text-2xs"><tr><th class="pr-2 text-left">Format</th><th class="pr-2 text-left">Result</th><th class="text-left">Description</th></tr><tr><td><code>dd</code></td><td>01, 02, ..., 31</td><td>Day of the month</td></tr><tr><td><code>d</code></td><td>1, 2, ..., 31</td><td>Day of the month</td></tr><tr><td><code>MM</code></td><td>01, 02, ..., 12</td><td>Month</td></tr><tr><td><code>MMM</code></td><td>Jan, Feb, ..., Dec</td><td>Month</td></tr><tr><td><code>MMMM</code></td><td>January, ..., December</td><td>Month</td></tr><tr><td><code>yyyy</code></td><td>2021, 2022, ...</td><td>Year</td></tr><tr><td><code>HH</code></td><td>00, 01, ..., 23</td><td>Hours</td></tr><tr><td><code>mm</code></td><td>00, 01, ..., 59</td><td>Minutes</td></tr><tr><td><code>ss</code></td><td>00, 01, ..., 59</td><td>Seconds</td></tr></table>`
 				},
 				defaultValue: {
 					type: 'static',
@@ -55,7 +55,6 @@
 		recomputeOnInputChanged?: boolean
 		showOnDemandOnlyToggle?: boolean
 		documentationLink?: string | undefined
-		markdownTooltip?: string | undefined
 		securedContext?: boolean
 		disabled?: boolean
 	}
@@ -86,7 +85,6 @@
 		recomputeOnInputChanged = true,
 		showOnDemandOnlyToggle = true,
 		documentationLink = undefined,
-		markdownTooltip = undefined,
 		securedContext = false
 	}: Props = $props()

@@ -174,9 +172,9 @@
 					{#if loading}
 						<Loader2 size={14} class="animate-spin ml-2" />
 					{/if}
-					{#if tooltip || markdownTooltip}
-						<Tooltip small {documentationLink} {markdownTooltip}>
-							{tooltip}
+					{#if tooltip}
+						<Tooltip small {documentationLink}>
+							{@html tooltip}
 						</Tooltip>
 					{/if}
 				</div>
@@ -95,8 +95,7 @@
 					customTitle={meta?.['customTitle']}
 					loading={meta?.['loading']}
 					documentationLink={meta?.['documentationLink']}
-					markdownTooltip={meta?.['markdownTooltip']}
-					allowTypeChange={meta?.['allowTypeChange']}
+		allowTypeChange={meta?.['allowTypeChange']}
 					{displayType}
 					{recomputeOnInputChanged}
 					{showOnDemandOnlyToggle}
@@ -11,7 +11,6 @@
 	export let placement: Placement | undefined = 'bottom'
 	export let documentationLink: string | undefined = undefined
 	export let small = false
-	export let markdownTooltip: string | undefined = undefined
 	export let disablePopup: boolean = false
 	export let openDelay: number = 300
 	export let closeDelay: number = 0
@@ -48,8 +47,10 @@

 {#if $open && !disablePopup}
 	<div use:melt={$content} transition:fade={{ duration: 100 }} style="z-index: {zIndexes.tooltip}">
-		<TooltipInner {documentationLink} {markdownTooltip} {customBgClass}>
-			<slot name="text" />
+		<TooltipInner {documentationLink} {customBgClass}>
+			{#snippet children()}
+				<slot name="text" />
+			{/snippet}
 		</TooltipInner>
 	</div>
 {/if}
@@ -240,7 +240,6 @@
 										customTitle={meta?.['customTitle']}
 										loading={meta?.['loading']}
 										documentationLink={meta?.['documentationLink']}
-										markdownTooltip={meta?.['markdownTooltip']}
 										allowTypeChange={meta?.['allowTypeChange']}
 										displayType
 									/>
@@ -46,7 +46,6 @@
 		allowTypeChange?: boolean
 		loading?: boolean
 		documentationLink?: string | undefined
-		markdownTooltip?: string | undefined
 	}

 	let {
@@ -65,8 +64,7 @@
 		displayType = false,
 		allowTypeChange = true,
 		loading = false,
-		documentationLink = undefined,
-		markdownTooltip = undefined
+		documentationLink = undefined
 	}: Props = $props()

 	run(() => {
@@ -98,9 +96,9 @@
 					{#if loading}
 						<Loader2 size={14} class="animate-spin ml-2" />
 					{/if}
-					{#if tooltip || markdownTooltip}
-						<Tooltip small {documentationLink} {markdownTooltip}>
-							{tooltip}
+					{#if tooltip}
+						<Tooltip small {documentationLink}>
+							{@html tooltip}
 						</Tooltip>
 					{/if}
 				</div>