-
-
Notifications
You must be signed in to change notification settings - Fork 3.2k
bug: Missing 'class' and 'id' props in Svelte 5 component definitions (.d.ts) #4385
Description
Framework7 version: 9.0.3
Svelte version: 5.55.1
Platform and Target: All (TypeScript development environment)
Live Link: N/A (Type system issue)
Describe the bug
In the current Svelte 5 implementation of framework7-svelte, there is a discrepancy between the component source code and its TypeScript definitions (.d.ts).
While the .svelte files have been updated to use Svelte 5 Runes and correctly destructure the class and id properties from $props(), the corresponding TypeScript definition files do not include these properties in the Props interface.
This causes a strict compilation error in Svelte 5 projects because the compiler no longer allows "unknown" properties on components when using TypeScript.
To Reproduce
Steps to reproduce the behavior:
- Create a Svelte 5 project with TypeScript enabled.
- Install
framework7-svelte. - Import the
Pagecomponent (or any other F7 component) in a.sveltefile. - Pass a class or id:
<Page class="my-page-class" id="main-page">...</Page>. - See the TypeScript error:
Svelte: Object literal may only specify known properties, and "class" does not exist in type PageProps.
Expected behavior
The class and id properties (and other standard HTML attributes) should be defined in the .d.ts files of the components, as they are essential for styling and are already being handled by the component's internal logic.
Actual Behavior
TypeScript throws the following error:
Svelte: Object literal may only specify known properties, and "class" does not exist in type PageProps
This happens because Page.d.ts defines:
interface Props {
name?: string;
withSubnavbar?: boolean;
// ... (missing class, id, style)
}Screenshots
N/A
Additional context
This issue likely affects most components in the library (Navbar, Block, Button, etc.) that were updated to Svelte 5 Runes but didn't have their Type Definitions updated accordingly.
A quick fix would be making the Props interfaces extend HTMLAttributes or explicitly adding class?: string;, id?: string;, and style?: string; to the Props interface in the .d.ts files.