Comments (2)
I will close this in favour of #1344 and #1852. This is a limitation of the slot props inferring. Complex slot props are hard to infer. It may seem like it works where the <slot >
is. However, the type inference is done at a much higher level with some hacked-generated code. A simplified example of a similar typescript code for each block is:
function hi() {
for (const a of list) {
const node = anotherComponent(a).slots.a;
}
return {
slots: {
node: anotherComponent(inferArrayItem(list)).slots.a
}
}
}
But with svelte:self
and generic slot props, It'll need to be something like this:
function hi<T>(items: T) {
{
const node = hi<T>(items: T)
}
return {
slots: {
node: hi(items).slots.node
}
}
}
Even if both #1344 and #1852 are done, which is unlikely, This is still a recursive infer which Typescript will just show an error. This is where you'll need to type the slot props on your own with the $$Slot
https://github.com/dummdidumm/rfcs/blob/ts-typedefs-within-svelte-components/text/ts-typing-props-slots-events.md#typing-slots or use Snippet in svelte 5.
from language-tools.
Thanks, @jasonlyu123 for the information provided. Indeed, the use of $$Slots
put things in order. I am adding the finalized demo here for others to benefit. One last thing, though: Is this "Snippet" thing documented somewhere now? While I am in Svelte v4 without any intention to move yet, I would like to have a peek, in all honesty. Thanks in advance.
Finalized Workaround
This is the BaseHierarchy
component:
<script lang="ts" context="module">
export type NodeItem<T extends NodeItem<T>> = {
id: number;
text: string;
nodes?: T[];
};
</script>
<script lang="ts" generics="TItem extends NodeItem<TItem>">
interface $$Slots {
default: {
node: TItem;
};
}
export let nodes: TItem[];
$: console.log("Nodes: %o", nodes);
$: console.log("Slots: %o", $$slots);
</script>
<ul>
{#each nodes as node (node.id)}
<li>
<slot {node}>
<span>{node.text}</span>
</slot>
{#if (node?.nodes?.length ?? 0) > 0}
<svelte:self nodes={node.nodes} let:node={subNode}>
<slot node={subNode}>
<span>{subNode.text}</span>
</slot>
</svelte:self>
{/if}
</li>
{/each}
</ul>
This is a derived component called DerivedHierarchy
:
<script lang="ts" context="module">
export interface DerNodeItem<T extends DerNodeItem<T>> extends NodeItem<T> {
href: string;
};
</script>
<script lang="ts" generics="TItem extends DerNodeItem<TItem>">
import BaseHierarchy, { type NodeItem } from "./BaseHierarchy.svelte";
interface $$Slots {
default: {
node: TItem
}
};
export let items: TItem[];
</script>
<BaseHierarchy nodes={items} let:node>
<slot {node}>
<a href={node.href}>{node.text}</a>
</slot>
</BaseHierarchy>
Now, to use either, one must type the array. I think it is because not typing would make TypeScript type the leaf nodes in the data without the nodes
property, which makes it fail the required extends
constraint. Example data that can be used:
interface TestData extends NodeItem<TestData> {}
interface UrlData extends DerNodeItem<UrlData> {
title?: string;
}
const hData: TestData[] = [
{
id: 1,
text: "Item 1",
nodes: [
{
id: 101,
text: "Item 1.1",
},
],
},
];
const urlData: UrlData[] = [
{
id: 1,
text: "Item 1",
href: "/item1",
nodes: [
{
id: 101,
text: "Item 1.1",
href: "/item1_1",
},
],
},
];
Using urlData
in, say, DerivedHierarchy
would look like this:
<DerivedHierarchy items={urlData} let:node>
<a href={node.href} title={node.title}><strong>{node.text}</strong></a>
</DerivedHierarchy>
This would work with full Intellisense.
from language-tools.
Related Issues (20)
- can not use Action type with async handler HOT 1
- LSP messaging - Neovim - Organize Imports Code Action HOT 2
- Snippet props are unusable in Svelte 69 HOT 5
- False "Missing Property" Highlighting on some URLSearchParams methods HOT 7
- Volar hybrid mode compatibility with typescript-svelte-plugin
- svelte-check: No preprocess config found but lang tag exists HOT 5
- Svelte autocomplete is not working in version 108.3.1 of the vscode extension HOT 3
- TS named like "MyButton.svelte.d.ts" breaks "@component" in "MyButton.svelte" HOT 4
- Typescript imports from modules are not re-evaluated when they change HOT 2
- Error in svelte.config.js Error [ERR_MODULE_NOT_FOUND]: Cannot find package ... @ampproject/remapping HOT 1
- TypeScript 5.4 aggressive union type narrowing breaks svelte-check HOT 4
- Svelte 5: support for arbitrary call expressions in render tags missing
- `enhanced:img` tag not recognised as `img` HOT 9
- Support for syntax highlighting in .mdx files HOT 2
- cannot recognize scss variables file added with vitepreprocess HOT 2
- Handles custom variables incorrectly
- Svelte for VSCode auto-generates types for in-app .svelte components, but not imported library components. HOT 4
- LSP Diagnostics error "... is an illegal variable name" on Neovim HOT 3
- "getCompletion" from TypeScript LSP scans the entire project for each file. HOT 25
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 language-tools.