Comments (7)
I have discovered that setCurrentNode.fn()
returns the slot variable contents (what is expected to get directly in setCurrentNode
). So I suppose some internal structure is being leaked here, for some reason unknown to me.
from svelte.
I logged the other slot variables coming from the base component's slot:
I guess it is no surprise, but they are all the same "proxy" object. To obtain the slot variable's correct value, the .fn
property must be evaluated.
from svelte.
So, after the investigation, the menu toolbar component can go back to working state by adding .fn()
to every slot variable being used:
on:click={(ev) => {
if (hasNodes.fn()) {
(setCurrentNode.fn())(node.fn());
}
}}
from svelte.
Can you provide a minimal reproduction in the repl?
from svelte.
Hello. I've tried to reproduce in the REPL but so far I've been unable to. I'll try with Sveltekit.
from svelte.
Ok, I finally replicated it! Damn. This was hard.
I don't know how much this can be simplified, but at least this reproduces the issue in a Sveltekit project with this package.json:
{
"name": "svelte5bug",
"version": "0.0.1",
"scripts": {
"dev": "vite dev",
"build": "vite build && npm run package",
"preview": "vite preview",
"package": "svelte-kit sync && svelte-package && publint",
"prepublishOnly": "npm run package",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"test": "vitest"
},
"exports": {
".": {
"types": "./dist/index.d.ts",
"svelte": "./dist/index.js"
}
},
"files": [
"dist",
"!dist/**/*.test.*",
"!dist/**/*.spec.*"
],
"peerDependencies": {
"svelte": "^5.0.0-next.166"
},
"devDependencies": {
"@sveltejs/adapter-auto": "^3.0.0",
"@sveltejs/kit": "^2.0.0",
"@sveltejs/package": "^2.0.0",
"@sveltejs/vite-plugin-svelte": "^3.0.0",
"publint": "^0.1.9",
"svelte": "^5.0.0-next.166",
"svelte-check": "^3.6.0",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"vite": "^5.0.11",
"vitest": "^1.2.0"
},
"svelte": "./dist/index.js",
"types": "./dist/index.d.ts",
"type": "module"
}
Components
Base Component
<script lang="ts" context="module">
export type CNode<T extends CNode<T>> = {
text: string;
nodes?: CNode<T>[];
}
</script>
<script lang="ts" generics="TNode extends CNode<TNode>">
export let nodes: TNode[];
function setNode(item: TNode, parent: TNode) {
console.log('item: %o, parent: %o', item, parent);
}
</script>
<ul>
{#each nodes as item}
{@const hasNodes = (item.nodes?.length ?? 0) > 0}
{#if item.nodes?.length}
<slot name="sometimes">
Some content
</slot>
{/if}
<li>
<slot name="item" {hasNodes} {item} theFn={(n: TNode) => setNode(n, item)}>
{item.text}
</slot>
</li>
{/each}
</ul>
Derived Component
<script lang="ts">
import Base, { type CNode } from "./Base.svelte";
import DefaultItem from "./DefaultItem.svelte";
interface Data extends CNode<Data> {
id: number;
};
const nodes: Data[] = [
{
id: 1,
text: 'A'
},
{
id: 2,
text: 'B'
},
];
function logSlotVars(...vars: any) {
console.log(...vars);
return null;
}
</script>
<Base {nodes}>
<DefaultItem
slot="item"
let:item
let:theFn
let:hasNodes
on:click={() => logSlotVars(item, theFn, hasNodes)}
>
<slot {item} {theFn} {hasNodes}>
{item.text} ({item.id})
</slot>
</DefaultItem>
</Base>
DefaultItem Component
<script lang="ts">
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher<{
click: MouseEvent
}>();
function handleClick(ev: MouseEvent) {
dispatch('click', ev);
}
</script>
<button on:click={handleClick}>
<slot />
</button>
These are all Svelte v4 components, only running under Svelte v5.
Now render <Derived />
in +page.svelte. Click one of the buttons, and go watch the logged slot variables in the console.
How to "Fix"
Well, in Derived.svelte, I can do the following and the problem goes away:
- <DefaultItem
+ <svelte:fragment
slot="item"
let:item
let:theFn
let:hasNodes
- on:click={() => logSlotVars(item, theFn, hasNodes)}
>
+ <DefaultItem
+ on:click={() => logSlotVars(item, theFn, hasNodes)}
>
<slot {item} {theFn} {hasNodes}>
{item.text} ({item.id})
</slot>
</DefaultItem>
+ </svelte:fragment>
In plain English: If the DefaultItem component is the root of the slot content, the problem appears.
from svelte.
This continues to happen with version next.181. I just tested it.
from svelte.
Related Issues (20)
- Parametric compile options HOT 5
- My +page.server.ts load doesn't acknowledge the types but the +layout.server.ts does.
- Svelte 5: HMR breaks with conditional rendering within {#if} blocks HOT 2
- Production build failure of [email protected] -> [email protected] HOT 5
- Svelte 5: next 182 breaks Threlte apps HOT 2
- Svelte 5: Regression since 5.0.0-next.171 HOT 4
- Rerendering bug in table with sticky first column HOT 2
- Svelte 5: Usage of `$effect.active` in `.svelte.js` files gives incorrect error in runtime HOT 2
- Svelte 5: Rune to Store and vice versa HOT 3
- Svelte 5: decide on behaviour of `$state.frozen` HOT 20
- Reactivity regression since 5.0.0-next.177 HOT 6
- Error on mounting to detached element with `css: injected` HOT 2
- Animation is not applied inside nested global css selector HOT 5
- svelte 5 : structural clone failed HOT 2
- `list` is not reactive, but `list.length` is HOT 11
- Svelte 5: Portal'd content and multiple elements in same conditional HOT 3
- `SvelteDate.now()` as a live updating source HOT 6
- `<svelte:component>` wrong error message on component creation HOT 2
- Children duplication of list items rendered within components after v `5.0.0-next.179`
- Svelte 5: cannot change nested objects if not binded HOT 29
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svelte.