Invalid d.ts files created with @sveltejs/package

jwerre commented 1 week ago

Describe the bug

After packaging a Svelte component library I ran into an issue where I failed my type checking. For example:

<Button>Click here</Button>

npm run check

> svelte-test@0.0.1 check
> svelte-kit sync && svelte-check --tsconfig ./tsconfig.json

====================================
Loading svelte-check in workspace: svelte-test
Getting Svelte diagnostics...

svelte-test/src/routes/+page.svelte:5:7
Error: Type '() => any' is not assignable to type 'never'. (ts)

<Button>Click here</Button>

====================================
svelte-check found 1 error and 0 warnings in 1 file

The issue is with the Button.d.ts file that is created when packaging the svelte components. For example the above Button component produces the following d.ts file:

import { SvelteComponentTyped } from "svelte";
import type { HTMLButtonAttributes } from 'svelte/elements';
export type ButtonMode = 'primary' | 'light' | 'accent' | 'accent-alt1' | 'accent-alt2' | 'accent-alt3' | 'outline' | 'plain';
export type ButtonProps = HTMLButtonAttributes & {
    mode?: ButtonMode;
    loader?: boolean;
    round?: boolean;
    block?: boolean;
    action?: boolean;
    size?: 'small' | 'medium' | 'large';
    onButtonClick?: (event: ComponentEvent<undefined, HTMLButtonElement>) => void;
    children?: Snippet;
};
import type { Snippet } from 'svelte';
import { ComponentEvent } from './';
declare const __propDef: {
    props: Record<string, never>; // <!!! ----------- this should be `ButtonProps` ------------- !!!>
    events: {
        [evt: string]: CustomEvent<any>;
    };
    slots: {};
};
type ButtonProps_ = typeof __propDef.props;
export type ButtonEvents = typeof __propDef.events;
export type ButtonSlots = typeof __propDef.slots;
export default class Button extends SvelteComponentTyped<ButtonProps_, ButtonEvents, ButtonSlots> {
}
export {};

The issue is props: Record<string, never>; should be props: ButtonProps;

When used in a Record, never effectively creates an object type that can't have any properties, because no value can be assigned to a never type. This is why I'm getting: Error: Type '() => any' is not assignable to type 'never'. (ts)

Reproduction

I created a public repo you can install and set up locally:

Initialize a new SvelteKit app with TypeScript

mkdir svelte-test
cd svelte-test
npx sv create #(with the following settings)
• SvelteKit minimal (barebones scaffolding for your new app)
• Yes, using Typescript syntax

Install package

npm install --save github:jwerre/svelte-components

Open src/routes/+page.svelte and add the following


<script lang="ts">
import { Button } from '@jwerre/svelte-components';
</script>


4. Do Types check
```sh
npm run check

After running the type check you should see the above type error...

Logs

❯ npm run check

> svelte-test@0.0.1 check
> svelte-kit sync && svelte-check --tsconfig ./tsconfig.json

====================================
Loading svelte-check in workspace: /Users/jw/Desktop/svelte-test
Getting Svelte diagnostics...

/Users/jw/Desktop/svelte-test/src/routes/+page.svelte:5:7
Error: Type '() => any' is not assignable to type 'never'. (ts)

<Button>Click here</Button>

System Info

System:
    OS: macOS 15.0.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 1.41 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.18.0 - /opt/homebrew/bin/node
    Yarn: 1.22.22 - ~/.npm-global/bin/yarn
    npm: 9.9.3 - node_modules/.bin/npm
  Browsers:
    Chrome: 130.0.6723.92
    Edge: 117.0.2045.40
    Safari: 18.0.1
  npmPackages:
    @sveltejs/adapter-auto: ^3.3.1 => 3.3.1 
    @sveltejs/kit: ^2.7.7 => 2.7.7 
    @sveltejs/package: ^2.3.7 => 2.3.7 
    @sveltejs/vite-plugin-svelte: ^4.0.0 => 4.0.0 
    svelte: ^5.1.11 => 5.1.11 
    vite: ^5.4.10 => 5.4.10 

I'm also using Typescript:
tslib: "^2.8.1",
typescript: "^5.6.3",

Severity

blocking all usage of SvelteKit

Additional Information

No response

jwerre commented 4 days ago

Any headway on this? It's blocking my deployment.

jwerre commented 4 days ago

Adding Svelte 5 as a Peer Dependency resolved this issue:

"peerDependencies": {
  "svelte": "^5.0.0"
},

sveltejs / kit