From bd9ff03010f75557dcc315d10e9208b4e9cafece Mon Sep 17 00:00:00 2001 From: Ruben Fiszel Date: Sat, 28 Feb 2026 08:52:10 +0000 Subject: [PATCH] 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 * refactor: migrate TooltipInner to Svelte 5 runes Co-Authored-By: Claude Opus 4.6 * perf: remove markdown rendering from Tooltip components Co-Authored-By: Claude Opus 4.6 * fix: use HTML tables for date format tooltips to preserve formatting Co-Authored-By: Claude Opus 4.6 --------- Co-authored-by: Claude Opus 4.6 --- frontend/src/lib/components/Tooltip.svelte | 13 +-------- .../src/lib/components/TooltipInner.svelte | 25 ++++++++-------- frontend/src/lib/components/WorkerRepl.svelte | 3 +- .../apps/editor/component/components.ts | 29 ++----------------- .../settingsPanel/InputsSpecEditor.svelte | 8 ++--- .../settingsPanel/InputsSpecsEditor.svelte | 3 +- .../components/meltComponents/Tooltip.svelte | 7 +++-- .../RawAppInlineScriptRunnable.svelte | 1 - .../raw_apps/RawAppInputsSpecEditor.svelte | 10 +++---- 9 files changed, 28 insertions(+), 71 deletions(-) diff --git a/frontend/src/lib/components/Tooltip.svelte b/frontend/src/lib/components/Tooltip.svelte index d9ded1f249..ad4db757eb 100644 --- a/frontend/src/lib/components/Tooltip.svelte +++ b/frontend/src/lib/components/Tooltip.svelte @@ -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 @@ {#snippet text()} - {#if markdownTooltip} -
- -
- {:else} - {@render children?.()} - {/if} + {@render children?.()} {/snippet} {/if} diff --git a/frontend/src/lib/components/TooltipInner.svelte b/frontend/src/lib/components/TooltipInner.svelte index 437fbc1c02..c21204b2b0 100644 --- a/frontend/src/lib/components/TooltipInner.svelte +++ b/frontend/src/lib/components/TooltipInner.svelte @@ -1,13 +1,18 @@ diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts index 7e5b08c0fc..df6d1b2a0e 100644 --- a/frontend/src/lib/components/apps/editor/component/components.ts +++ b/frontend/src/lib/components/apps/editor/component/components.ts @@ -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: `Output format
See date-fns format for more information. Default: yyyy-MM-dd
FormatResultDescription
dd01, 02, ..., 31Day of the month
d1, 2, ..., 31Day of the month
MM01, 02, ..., 12Month
MMMJan, Feb, ..., DecMonth
MMMMJanuary, ..., DecemberMonth
yyyy2021, 2022, ...Year
`, 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: `Output format
See date-fns format for more information. Default: dd.MM.yyyy HH:mm
FormatResultDescription
dd01, 02, ..., 31Day of the month
d1, 2, ..., 31Day of the month
MM01, 02, ..., 12Month
MMMJan, Feb, ..., DecMonth
MMMMJanuary, ..., DecemberMonth
yyyy2021, 2022, ...Year
HH00, 01, ..., 23Hours
mm00, 01, ..., 59Minutes
ss00, 01, ..., 59Seconds
` }, defaultValue: { type: 'static', diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte index 7992159fc1..6a6d820582 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte @@ -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} {/if} - {#if tooltip || markdownTooltip} - - {tooltip} + {#if tooltip} + + {@html tooltip} {/if} diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte index 19dd309bec..a1ccd35849 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte @@ -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} diff --git a/frontend/src/lib/components/meltComponents/Tooltip.svelte b/frontend/src/lib/components/meltComponents/Tooltip.svelte index ea464fa123..3bf7482fbd 100644 --- a/frontend/src/lib/components/meltComponents/Tooltip.svelte +++ b/frontend/src/lib/components/meltComponents/Tooltip.svelte @@ -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}
- - + + {#snippet children()} + + {/snippet}
{/if} diff --git a/frontend/src/lib/components/raw_apps/RawAppInlineScriptRunnable.svelte b/frontend/src/lib/components/raw_apps/RawAppInlineScriptRunnable.svelte index 3f8b6b2ffc..f942e1a719 100644 --- a/frontend/src/lib/components/raw_apps/RawAppInlineScriptRunnable.svelte +++ b/frontend/src/lib/components/raw_apps/RawAppInlineScriptRunnable.svelte @@ -240,7 +240,6 @@ customTitle={meta?.['customTitle']} loading={meta?.['loading']} documentationLink={meta?.['documentationLink']} - markdownTooltip={meta?.['markdownTooltip']} allowTypeChange={meta?.['allowTypeChange']} displayType /> diff --git a/frontend/src/lib/components/raw_apps/RawAppInputsSpecEditor.svelte b/frontend/src/lib/components/raw_apps/RawAppInputsSpecEditor.svelte index 5e1e154114..5aa5adc935 100644 --- a/frontend/src/lib/components/raw_apps/RawAppInputsSpecEditor.svelte +++ b/frontend/src/lib/components/raw_apps/RawAppInputsSpecEditor.svelte @@ -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} {/if} - {#if tooltip || markdownTooltip} - - {tooltip} + {#if tooltip} + + {@html tooltip} {/if}