rename hideOnSSR

This commit is contained in:
peterkogo
2025-06-11 12:41:39 +02:00
parent f178453c17
commit ca4bb64648
5 changed files with 17 additions and 13 deletions

View File

@@ -1,2 +1,2 @@
export { portal } from './portal.svelte';
export { hideDuringSSR } from './utils.svelte';
export { hideOnSSR } from './utils.svelte';

View File

@@ -1,17 +1,17 @@
export function hideDuringSSR(): { display: 'none' | undefined } {
let display = $state(typeof window === 'undefined' ? ('none' as const) : undefined);
if (display) {
export function hideOnSSR(): { value: boolean } {
let hide = $state(typeof window === 'undefined');
if (hide) {
const destroyEffect = $effect.root(() => {
$effect(() => {
display = undefined;
hide = false;
destroyEffect?.();
});
});
}
return {
get display() {
return display;
get value() {
return hide;
}
};
}

View File

@@ -1,6 +1,6 @@
<script lang="ts">
import { getContext } from 'svelte';
import { hideDuringSSR, portal } from '$lib/actions/portal';
import { hideOnSSR, portal } from '$lib/actions/portal';
import { useStore } from '$lib/store';
import type { EdgeLabelProps } from './types';
@@ -29,7 +29,7 @@
<div
use:portal={'edge-labels'}
style:display={hideDuringSSR().display}
style:display={hideOnSSR().value ? 'none' : undefined}
class={['svelte-flow__edge-label', { transparent }, className]}
style:cursor={selectEdgeOnClick ? 'pointer' : undefined}
style:transform="translate(-50%, -50%) translate({x}px,{y}px)"

View File

@@ -1,10 +1,14 @@
<script lang="ts">
import { hideDuringSSR, portal } from '$lib/actions/portal';
import { hideOnSSR, portal } from '$lib/actions/portal';
import type { ViewportPortalProps } from './types';
let { target = 'front', children, ...rest }: ViewportPortalProps = $props();
</script>
<div use:portal={`viewport-${target}`} style:display={hideDuringSSR().display} {...rest}>
<div
use:portal={`viewport-${target}`}
style:display={hideOnSSR().value ? 'none' : undefined}
{...rest}
>
{@render children?.()}
</div>

View File

@@ -2,7 +2,7 @@
import { getContext } from 'svelte';
import { Position, getNodeToolbarTransform } from '@xyflow/system';
import { hideDuringSSR, portal } from '$lib/actions/portal';
import { hideOnSSR, portal } from '$lib/actions/portal';
import { useStore } from '$lib/store';
import { useSvelteFlow } from '$lib/hooks/useSvelteFlow.svelte';
@@ -68,7 +68,7 @@
{#if store.domNode && isActive && toolbarNodes}
<div
use:portal={'root'}
style:display={hideDuringSSR().display}
style:display={hideOnSSR().value ? 'none' : undefined}
class="svelte-flow__node-toolbar"
data-id={toolbarNodes.reduce((acc, node) => `${acc}${node.id} `, '').trim()}
style:position="absolute"