Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Svelte 5 legacy: transition not conveyed using $$restProps and svelte:element #12231

Closed
shinokada opened this issue Jun 30, 2024 · 1 comment · Fixed by #12346
Closed

Svelte 5 legacy: transition not conveyed using $$restProps and svelte:element #12231

shinokada opened this issue Jun 30, 2024 · 1 comment · Fixed by #12346
Labels
Milestone

Comments

@shinokada
Copy link

Describe the bug

When I use svelte transition and svelte:element with Svelte 4 works.
But when I try it with Svelte 5 legacy, it doesn't show any transition.

Code

+page.svelte

<script> 
  import Parent from "./Parent.svelte";
  import { blur, fade, slide } from 'svelte/transition';
</script>

<Parent transition={slide} params={{ duration: 700 }}>
  <h1>Page content</h1>
</Parent>

Parent.svelte

<script>
  import Child from "./Child.svelte";
</script>

<div>
<Child  {...$$restProps}>
  <slot />
</Child>
</div>

Child.svelte

<script lang="ts">
  import { type TransitionConfig } from 'svelte/transition';
  type TransitionFunc = (node: HTMLElement, params: any) => TransitionConfig;
	let visible = true;

  export let transition: TransitionFunc | undefined = undefined;
  export let params: object = {};
  export let tag: string = 'div';
</script>

<label>
	<input type="checkbox" bind:checked={visible} />
	visible
</label>

{#if visible && transition}
<svelte:element this={tag} transition:transition={params} >
  <slot />
</svelte:element>
{/if}

Reproduction

I create a simplified repo for this issue.

You can run with Svelte 4 and it works. But when you install svelte@next, the transition doesn't work.

Logs

No response

System Info

System:
    OS: macOS 14.6
    CPU: (10) arm64 Apple M2 Pro
    Memory: 38.78 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.14.0 - ~/.nvm/versions/node/v20.14.0/bin/node
    npm: 10.7.0 - ~/.nvm/versions/node/v20.14.0/bin/npm
    pnpm: 9.4.0 - /opt/homebrew/bin/pnpm
    bun: 1.1.8 - ~/.bun/bin/bun
  Browsers:
    Chrome: 126.0.6478.127
    Edge: 126.0.2592.81
    Safari: 17.6
  npmPackages:
    svelte: 4.2.18 => 4.2.18

Severity

blocking an upgrade

@trueadm trueadm added this to the 5.0 milestone Jul 1, 2024
@trueadm trueadm added the bug label Jul 1, 2024
@webJose
Copy link

webJose commented Jul 4, 2024

Here's a REPL repro of this: REPL

@shinokada shinokada changed the title Svelte 5 legacy: transition not working with svelte:element Svelte 5 legacy: transition not conveyed using $$restProps and svelte:element Jul 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants