feat!: add Svelte5 specific types #381

mattdavis90 · 2024-10-12T14:32:28Z

Description

When using the library with Svelte5 I noticed that I was getting errors when importing the icon components. This is because Svelte5 changed the type of components so I couldn't assign the icon components to a Component typed variable in typescript.

This PR updates the type exports to be in line with Svelte5 and removed all issues from my LSP and eslint.

Linked Issues

None that I could find

Additional context

None - happy to discuss further - I didn't open an issue first because it is a pretty trivial change and no real time lost if it isn't accepted. Thanks

stackblitz · 2024-10-12T14:32:31Z

Run & review this pull request in StackBlitz Codeflow.

userquin · 2024-10-20T17:56:38Z

This PR should be breaking, we need to redirect types/svelte.d.ts to types/svelte5.d.ts adding types/svelte5.d.ts to the package.json exports entry, just below types/svelte4.d.ts.

We also need:

add entry in README file about using Svelte 4 (copy/paste entry for "Using Svelte 3" and update with v4).
update examples/vite-svelte and examples/sveltekit to use v4 in the corresponding src/vite-env.d.ts and src/app.d.ts respectively or try to bump both examples to use latest Svelte 5 and SvelteKit.

We don't use that formatting, enable eslint or try running pnpm lint:fix:

svelte5.d.ts

declare module 'virtual:icons/*' {
  import { Component } from 'svelte'
  import type { SvelteHTMLElements } from 'svelte/elements'

  export default Component<SvelteHTMLElements['svg']>
}

declare module '~icons/*' {
  import { Component } from 'svelte'
  import type { SvelteHTMLElements } from 'svelte/elements'

  export default Component<SvelteHTMLElements['svg']>
}

mattdavis90 · 2024-10-20T18:00:06Z

At the point of filing the PR Svelte5 was still in RC so I didn't update the default but happy to make that change now that it is released. Ref linting, sorry thought I'd run eslint but apparently not.

userquin · 2024-10-20T18:01:55Z

Yeah, I just merged Svelte 5 support a few minutes ago in main branch (I mean the PR about adding svelte 5 in supported versions)

mattdavis90 · 2024-10-20T18:12:28Z

I force pushed so that my comment is in line with conventional commit messages. The examples look to be working correctly so remain unchanged

userquin · 2024-10-20T18:15:19Z

Add svelte5.d.ts to packages exports below this https://github.com/unplugin/unplugin-icons/blob/main/package.json#L112-L114

userquin · 2024-10-20T18:16:38Z

The example will require to update Svelte and some other dependencies (SvelteKit for example).

We also need to update examples/vite-svelte dependencies.

userquin · 2024-10-20T18:19:20Z

examples/sveltekit:

                "@sveltejs/kit": "^2.7.2",
		"@sveltejs/vite-plugin-svelte": "^4.0.0",
		"svelte": "^5.0.3",
		"svelte-check": "^4.0.5",

socket-security · 2024-10-20T18:24:08Z

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@sveltejs/[email protected]	environment, eval	`+4`	807 kB	svelte-admin
npm/@sveltejs/[email protected]	None	`+2`	182 kB	svelte-admin

🚮 Removed packages: npm/@sveltejs/[email protected], npm/@sveltejs/[email protected]

View full report↗︎

mattdavis90 · 2024-10-20T18:24:15Z

I think I've got all the dependencies and updated to svelte5 runes in the example. Having a little trouble testing because pnpm isn't playing nice with the example workspaces

userquin · 2024-10-20T18:29:38Z

Yeah, in fact it is using Svelte 4, if you want to check it, just add a console.log below the version import with it and runnes flag:

console.log('Svelte version:', VERSION, 'svelteRunes:', svelteRunes)

userquin · 2024-10-20T18:31:19Z

pnpm lock file is missing in the PR and should be changed, doing weird things...

Maybe we should add empty pnpm-workspace.yaml to both svelte examples and exclude them from the workspaces (pnpm) like we did with nuxt3.

mattdavis90 · 2024-10-20T18:33:10Z

I got the workspace examples working, as you noted it was the missing pnpm-lock - no idea what my pnpm install was doing!

mattdavis90 · 2024-10-20T18:35:03Z

Both examples seem to be working now. I had a bit of a mess with my pnpm install. I cleared out all of the node_modules and they're both working now.

userquin · 2024-10-20T18:35:48Z

I got the workspace examples working, as you noted it was the missing pnpm-lock - no idea what my pnpm install was doing!

pnpm doing the same on my local (lock file unchanged)

userquin · 2024-10-20T18:49:33Z

/cc @dominikg @benmccann can you review this 🙏 when you have some free time?

userquin · 2024-10-20T19:01:07Z

@mattdavis90 can you check svelte compiler? maybe we can also remove the ts-expect-error (eslint should be complaining about that annotation)

mattdavis90 · 2024-10-20T19:12:04Z

I'm still getting a TS error if I remove that annotation. I haven't added svelte to dependencies, peer, or dev - it is in the lock file though for the examples

userquin · 2024-10-21T07:27:54Z

We need to review svelte 5 dts, seems to be not working, there is no auto completion in vscode, svg attrs should be there.

mattdavis90 · 2024-10-21T18:43:40Z

I can't find a better type for it. Component is the new type for components and expects props as the first generic which SvelteHTMLElements['svg'] provides. Having said that you're totally correct and I also don't see any auto complete in neovim. I hadn't actually checked that - I mostly just wanted to remove the errors around Component vs SvelteComponent. Having tested for the last hour or so I can't get completion working

userquin · 2024-10-21T19:36:27Z

I can't find a better type for it. Component is the new type for components and expects props as the first generic which SvelteHTMLElements['svg'] provides. Having said that you're totally correct and I also don't see any auto complete in neovim. I hadn't actually checked that - I mostly just wanted to remove the errors around Component vs SvelteComponent. Having tested for the last hour or so I can't get completion working

mattdavis90 · 2024-10-21T19:38:51Z

Its now working for you? Did you change something? I still get no completion in nvim

userquin · 2024-10-21T19:39:19Z

declare module 'virtual:icons/*' {
  import { Component } from 'svelte'
  import type { SvelteHTMLElements } from 'svelte/elements'

  type Type<K> = {
    [P in keyof K]: K[P]
  }

  const component: Component<Type<SvelteHTMLElements['svg']>>

  export default component
}

declare module '~icons/*' {
  import { Component } from 'svelte'
  import type { SvelteHTMLElements } from 'svelte/elements'

  type Type<K> = {
    [P in keyof K]: K[P]
  }

  const component: Component<Type<SvelteHTMLElements['svg']>>

  export default component
}

userquin · 2024-10-21T19:41:42Z

Remove the type, just split the component + default export:

declare module 'virtual:icons/*' {
  import { Component } from 'svelte'
  import type { SvelteHTMLElements } from 'svelte/elements'

  const component: Component<SvelteHTMLElements['svg']>

  export default component
}

declare module '~icons/*' {
  import { Component } from 'svelte'
  import type { SvelteHTMLElements } from 'svelte/elements'

  const component: Component<SvelteHTMLElements['svg']>

  export default component
}

mattdavis90 · 2024-10-21T19:41:51Z

Cool - you totally beat me to it - this is what I was experimenting with. I hadn't got the keyof bit quite working yet

declare module "virtual:icons/*" {
  import type { Component } from "svelte";
  import type { SVGAttributes } from "svelte/elements";

  const c: Component<SVGAttributes<SVGSVGElement>>;
  export = c;
}

userquin · 2024-10-21T19:44:06Z

Cool - you totally beat me to it - this is what I was experimenting with. I hadn't got the keyof bit quite working yet

declare module "virtual:icons/*" {
  import type { Component } from "svelte";
  import type { SVGAttributes } from "svelte/elements";

  const c: Component<SVGAttributes<SVGSVGElement>>;
  export = c;
}

This is TS: export { c } should also work => import { c as XXX } from 'virtual:icons/...

mattdavis90 · 2024-10-21T19:44:57Z

Neither of your solutions give me completions in nvim but if they're working in VSCode them I'm happy to put it down to a client issue

userquin · 2024-10-21T19:45:43Z

Change svelte5.d.ts: next time we should check any d.ts at root ;)

userquin · 2024-10-21T19:46:40Z

Neither of your solutions give me completions in nvim but if they're working in VSCode them I'm happy to put it down to a client issue

Did you restarted ts service?

mattdavis90 · 2024-10-21T19:49:28Z

Neither of your solutions give me completions in nvim but if they're working in VSCode them I'm happy to put it down to a client issue

Did you restarted ts service?

Yeh, it works if I do Component<{abc: number}> but no suggestions for Component<SVGAttributes<SVGSVGElement>> or Component<SvelteHTMLElements['svg']> - I'll check the logs and restart nvim

mattdavis90 · 2024-10-21T19:51:49Z

It is working in a new project - looks like it is just broken in my local where I was overriding the types in app.d.ts

userquin · 2024-10-21T19:54:05Z

WebStorm/IntelliJ will require some update to support kit 5 😅

userquin

Thx ❤️

mattdavis90 · 2024-10-21T19:55:39Z

Thanks for the help :)

mattdavis90 · 2024-10-21T19:58:59Z

@mattdavis90 can you check svelte compiler? maybe we can also remove the ts-expect-error (eslint should be complaining about that annotation)

I just noticed in #382 that svelte is added as a peer dependency so maybe you're right and we can drop the ts-expect-error now?

userquin · 2024-10-21T20:05:30Z

@mattdavis90 can you check svelte compiler? maybe we can also remove the ts-expect-error (eslint should be complaining about that annotation)

I just noticed in #382 that svelte is added as a peer dependency so maybe you're right and we can drop the ts-expect-error now?

That's why I was asking you ;)

We can even dispatch click events:

/cc @dominikg @benmccann

sspilleman · 2024-10-29T10:29:30Z

Is this stuck now?

userquin · 2024-10-29T11:12:14Z

@mattdavis90 can you run again pnpm install from root and push lock file again? You don't allow change code to mantainers.

On my local I have this entry modified:

mattdavis90 · 2024-10-29T19:37:47Z

Lock file fixed and I've enabled edit from maintainers - apologies

midirhee12 · 2024-12-15T17:26:35Z

So what is the idiomatic type? Is it Component<SvelteHTMLElements["svg"]>?

mattdavis90 · 2024-12-15T17:57:53Z

Yes, but you should be able to follow the README and put the following in src/vite-env.d.ts for svelte

/// <reference types="svelte" />
/// <reference types="vite/client" />
/// <reference types="unplugin-icons/types/svelte" />

or the following in src/app.d.ts for Sveltekit

import 'unplugin-icons/types/svelte'

niemyjski approved these changes Oct 20, 2024

View reviewed changes

userquin mentioned this pull request Oct 20, 2024

fix: Svelte runes detection not working correctly in monorepos #382

Merged

feat: add typing for svelte5

deb1908

mattdavis90 force-pushed the svelte5-types branch from 14f77ab to deb1908 Compare October 20, 2024 18:10

fix: update svelte in example

2440d4f

fix: missing svelte5 export

f56b326

userquin changed the title ~~Add Svelte5 specific types~~ feat!: add Svelte5 specific types Oct 20, 2024

mattdavis90 added 2 commits October 20, 2024 19:21

fix: update vite-svelte example to svelte5

c1b72e9

fix: update all svelte deps to latest

e2612d9

fix: update vite-svelte example to use new style App

f91d65f

fix: svelte5 d.ts

cf21140

userquin approved these changes Oct 21, 2024

View reviewed changes

mattdavis90 added 2 commits October 21, 2024 20:59

Merge branch 'unplugin:main' into svelte5-types

a3331d6

chore: remove unused ts-expect-error

48fc810

chore: fix pnpm lock file

b69bf5f

userquin merged commit 996c78c into unplugin:main Oct 30, 2024
2 checks passed

userquin mentioned this pull request Oct 31, 2024

feat: update unplugin icons PuruVJ/macos-web#86

Open

feat!: add Svelte5 specific types #381

feat!: add Svelte5 specific types #381

Conversation

mattdavis90 commented Oct 12, 2024

Description

Linked Issues

Additional context

stackblitz bot commented Oct 12, 2024

userquin commented Oct 20, 2024 • edited Loading

mattdavis90 commented Oct 20, 2024

userquin commented Oct 20, 2024 • edited Loading

mattdavis90 commented Oct 20, 2024

userquin commented Oct 20, 2024

userquin commented Oct 20, 2024 • edited Loading

userquin commented Oct 20, 2024

socket-security bot commented Oct 20, 2024 • edited Loading

mattdavis90 commented Oct 20, 2024

userquin commented Oct 20, 2024

userquin commented Oct 20, 2024 • edited Loading

mattdavis90 commented Oct 20, 2024

mattdavis90 commented Oct 20, 2024

userquin commented Oct 20, 2024

userquin commented Oct 20, 2024

userquin commented Oct 20, 2024 • edited Loading

mattdavis90 commented Oct 20, 2024

userquin commented Oct 21, 2024 • edited Loading

mattdavis90 commented Oct 21, 2024

userquin commented Oct 21, 2024

mattdavis90 commented Oct 21, 2024

userquin commented Oct 21, 2024

userquin commented Oct 21, 2024

mattdavis90 commented Oct 21, 2024

userquin commented Oct 21, 2024 • edited Loading

mattdavis90 commented Oct 21, 2024

userquin commented Oct 21, 2024

userquin commented Oct 21, 2024

mattdavis90 commented Oct 21, 2024

mattdavis90 commented Oct 21, 2024

userquin commented Oct 21, 2024

userquin left a comment

Choose a reason for hiding this comment

mattdavis90 commented Oct 21, 2024

mattdavis90 commented Oct 21, 2024

userquin commented Oct 21, 2024

sspilleman commented Oct 29, 2024

userquin commented Oct 29, 2024

mattdavis90 commented Oct 29, 2024

midirhee12 commented Dec 15, 2024

mattdavis90 commented Dec 15, 2024

userquin commented Oct 20, 2024 •

edited

Loading

userquin commented Oct 20, 2024 •

edited

Loading

userquin commented Oct 20, 2024 •

edited

Loading

socket-security bot commented Oct 20, 2024 •

edited

Loading

userquin commented Oct 20, 2024 •

edited

Loading

userquin commented Oct 20, 2024 •

edited

Loading

userquin commented Oct 21, 2024 •

edited

Loading

userquin commented Oct 21, 2024 •

edited

Loading