Skip to content

bug: Missing 'class' and 'id' props in Svelte 5 component definitions (.d.ts) #4385

@djsambo

Description

@djsambo

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:

  1. Create a Svelte 5 project with TypeScript enabled.
  2. Install framework7-svelte.
  3. Import the Page component (or any other F7 component) in a .svelte file.
  4. Pass a class or id: <Page class="my-page-class" id="main-page">...</Page>.
  5. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions