search

skeletonlabs / skeleton

A complete design system and component solution, built on Tailwind.
https://skeleton.dev
MIT License
4.85k stars 302 forks source link

Svelte v4.0 Compatibility #1689

Closed endigo9740 closed 1 year ago

endigo9740 commented 1 year ago

Svelte v4 launched today: https://svelte.dev/blog/svelte-4

We're currently investigating support and compatibility with Skeleton. When we've identified and resolved all relevant issues we'll make an official announcement to make it clear that we provide full support for v4. Until then, it's recommend you remain on v3.

That said, if you do update to v4 and encounter issues - please report them here. We'll follow up asap. Thanks for your cooperation.

ollema commented 1 year ago

maybe this is already known - when I updated to Svelte 4 I got this:

10:16:08 PM [vite-plugin-svelte] /node_modules/.pnpm/@skeletonlabs+skeleton@1.8.0/node_modules/@skeletonlabs/skeleton/dist/components/AppRail/AppRailTile.svelte:36:1 A11y: <div> with keydown, keyup, keypress handlers must have an ARIA role
10:16:08 PM [vite-plugin-svelte] /node_modules/.pnpm/@skeletonlabs+skeleton@1.8.0/node_modules/@skeletonlabs/skeleton/dist/components/Avatar/Avatar.svelte:24:0 A11y: Non-interactive element <figure> should not be assigned mouse or keyboard event listeners.
10:16:08 PM [vite-plugin-svelte] /node_modules/.pnpm/@skeletonlabs+skeleton@1.8.0/node_modules/@skeletonlabs/skeleton/dist/components/ConicGradient/ConicGradient.svelte:67:4 A11y: Non-interactive element <li> should not be assigned mouse or keyboard event listeners.
10:16:08 PM [vite-plugin-svelte] /node_modules/.pnpm/@skeletonlabs+skeleton@1.8.0/node_modules/@skeletonlabs/skeleton/dist/components/Tab/TabGroup.svelte:31:0 A11y: <div> with click, keypress, keydown, keyup handlers must have an ARIA role
10:16:08 PM [vite-plugin-svelte] /node_modules/.pnpm/@skeletonlabs+skeleton@1.8.0/node_modules/@skeletonlabs/skeleton/dist/components/TableOfContents/TableOfContents.svelte:97:4 A11y: Non-interactive element <li> should not be assigned mouse or keyboard event listeners.
10:16:08 PM [vite-plugin-svelte] /node_modules/.pnpm/@skeletonlabs+skeleton@1.8.0/node_modules/@skeletonlabs/skeleton/dist/utilities/Modal/Modal.svelte:138:2 A11y: <div> with mousedown, mouseup handlers must have an ARIA role
10:16:08 PM [vite-plugin-svelte] /node_modules/.pnpm/@skeletonlabs+skeleton@1.8.0/node_modules/@skeletonlabs/skeleton/dist/utilities/Drawer/Drawer.svelte:127:1 A11y: <div> with mousedown, keypress handlers must have an ARIA role
10:16:08 PM [vite-plugin-svelte] /node_modules/.pnpm/@skeletonlabs+skeleton@1.8.0/node_modules/@skeletonlabs/skeleton/dist/utilities/Toast/Toast.svelte:115:4 A11y: <div> with mouseenter, mouseleave handlers must have an ARIA role
endigo9740 commented 1 year ago

Thanks @ollema - yeah Svelte likes to adjust and change the a11y warnings in their updates. These are just warnings though, so they should not impact your ability to or deploy your application. We will look to resolve these asap though.

gihrig commented 1 year ago

Toast transition no longer functions.

After updating to svelte 4.0.0, toast appears and disappears instantly. Transition works as expected with all dependencies at latest except for svelte at 3.59.1

Possibly related to: breaking change: "This release also makes the Svelte authoring experience more intuitive and consistent. E.g. |local is now the default for transitions to avoid animations blocking page transitions,"

See: breaking: Make transitions local by default to prevent confusion around page navigations (https://github.com/sveltejs/svelte/issues/6686) Fix transitions so that they don't require a style-src 'unsafe-inline' Content Security Policy (CSP) (https://github.com/sveltejs/svelte/issues/6662).

endigo9740 commented 1 year ago

@AdrianGonz97 as discussed on Discord, try and write up a full list of changes so we know what to test. Myself and any other volunteers that wish to join in will then run through and test as we can.

I'll try running these against the standalone projects I'm building at the moment, which should represent some real-world use cases.

mmailaender commented 1 year ago

I've updated to Skeleton 1.9 and getting this A11y Warning

7:01:32 PM [vite-plugin-svelte] /node_modules/.pnpm/@skeletonlabs+skeleton@1.9.0_svelte@4.0.3/node_modules/@skeletonlabs/skeleton/dist/components/Ratings/Ratings.svelte:29:3 A11y: <svelte:element> with click handler must have an ARIA role
7:01:32 PM [vite-plugin-svelte] /node_modules/.pnpm/@skeletonlabs+skeleton@1.9.0_svelte@4.0.3/node_modules/@skeletonlabs/skeleton/dist/components/Ratings/Ratings.svelte:33:3 A11y: <svelte:element> with click handler must have an ARIA role
7:01:32 PM [vite-plugin-svelte] /node_modules/.pnpm/@skeletonlabs+skeleton@1.9.0_svelte@4.0.3/node_modules/@skeletonlabs/skeleton/dist/components/Ratings/Ratings.svelte:37:3 A11y: <svelte:element> with click handler must have an ARIA role
7:01:40 PM [vite-plugin-svelte] /node_modules/.pnpm/@skeletonlabs+skeleton@1.9.0_svelte@4.0.3/node_modules/@skeletonlabs/skeleton/dist/components/Ratings/Ratings.svelte:29:3 A11y: <svelte:element> with click handler must have an ARIA role
7:01:40 PM [vite-plugin-svelte] /node_modules/.pnpm/@skeletonlabs+skeleton@1.9.0_svelte@4.0.3/node_modules/@skeletonlabs/skeleton/dist/components/Ratings/Ratings.svelte:33:3 A11y: <svelte:element> with click handler must have an ARIA role
7:01:40 PM [vite-plugin-svelte] /node_modules/.pnpm/@skeletonlabs+skeleton@1.9.0_svelte@4.0.3/node_modules/@skeletonlabs/skeleton/dist/components/Ratings/Ratings.svelte:37:3 A11y: <svelte:element> with click handler must have an ARIA role
endigo9740 commented 1 year ago

@mmailaender it looks like one of the warnings slipped through - this has been reported here: https://github.com/skeletonlabs/skeleton/issues/1708

We'll aim to address this in the following release. Thanks for the heads up!

FYI it's just a warning, so it's annoying, but it shouldn't harm your ability to use and deploy your application. You can disregard it for the time being.

sakgoyal commented 1 year ago

is skeleton compatible with svelte4? Im trying to install it on my existing project and I noticed skeleton is using cjs files instead of js files. and when I try to follow the instructions in the guide, I get errors in the tailwind config file.

Sarenor commented 1 year ago

Skeleton should be compatible with Svelte 4. Do you want to open up an issue or discussion with your problems? You can also try our support-discord: https://discord.com/channels/1003691521280856084/1048010639219642419 (support's usually a bit slow on weekends as well, just fyi)

endigo9740 commented 1 year ago

@sakgoyal the only .cjs file that I can think of would be for Tailwind. Right now we are focusing support on this, as this is the long standing default for Tailwind, even though they recently added support for other formats. But apples and oranges here.