Update to Svelte 4.

This commit is contained in:
Bradley Shellnut 2023-07-18 14:26:41 -07:00
parent b6b9c36466
commit 4905ee152c
16 changed files with 28 additions and 28 deletions

View file

@ -44,14 +44,14 @@
"prettier-plugin-svelte": "^2.10.1", "prettier-plugin-svelte": "^2.10.1",
"prisma": "^4.16.2", "prisma": "^4.16.2",
"sass": "^1.63.6", "sass": "^1.63.6",
"svelte": "^3.59.2", "svelte": "^4.0.0",
"svelte-check": "^2.10.3", "svelte-check": "^3.4.3",
"svelte-preprocess": "^5.0.4", "svelte-preprocess": "^5.0.4",
"sveltekit-superforms": "^1.3.0", "sveltekit-superforms": "^1.3.0",
"tailwindcss": "^3.3.3", "tailwindcss": "^3.3.3",
"ts-node": "^10.9.1", "ts-node": "^10.9.1",
"tslib": "^2.6.0", "tslib": "^2.6.0",
"typescript": "^4.9.5", "typescript": "^5.0.0",
"vite": "^4.4.4", "vite": "^4.4.4",
"vitest": "^0.25.3", "vitest": "^0.25.3",
"zod": "^3.21.4" "zod": "^3.21.4"
@ -92,4 +92,4 @@
"tailwindcss-animate": "^1.0.6", "tailwindcss-animate": "^1.0.6",
"zod-to-json-schema": "^3.21.4" "zod-to-json-schema": "^3.21.4"
} }
} }

View file

@ -28,7 +28,7 @@
}} }}
static static
> --> > -->
<div transition:fade> <div transition:fade|global>
<!-- <DialogOverlay class="dialog-overlay" /> --> <!-- <DialogOverlay class="dialog-overlay" /> -->
<div class="dialog"> <div class="dialog">
<!-- <DialogTitle>Clear collection</DialogTitle> --> <!-- <DialogTitle>Clear collection</DialogTitle> -->

View file

@ -16,7 +16,7 @@
export let passive = false; export let passive = false;
export let primaryButtonText = ''; export let primaryButtonText = '';
export let primaryButtonDisabled = false; export let primaryButtonDisabled = false;
export let primaryButtonIcon: typeof SvelteComponent = undefined; export let primaryButtonIcon: typeof SvelteComponent<any> = undefined;
export let primaryButtonIconDescription = ''; export let primaryButtonIconDescription = '';
export let secondaryButtonText = ''; export let secondaryButtonText = '';
@ -32,7 +32,7 @@
}} }}
static static
> --> > -->
<div transition:fade> <div transition:fade|global>
<!-- <DialogOverlay class="dialog-overlay" /> --> <!-- <DialogOverlay class="dialog-overlay" /> -->
<div class="dialog"> <div class="dialog">
<!-- <DialogTitle>{title}</DialogTitle> --> <!-- <DialogTitle>{title}</DialogTitle> -->

View file

@ -64,7 +64,7 @@
}} }}
static static
> >
<div transition:fade> <div transition:fade|global>
<DialogOverlay class="dialog-overlay" /> <DialogOverlay class="dialog-overlay" />
<div class="dialog"> <div class="dialog">
<DialogTitle>Remove from collection</DialogTitle> <DialogTitle>Remove from collection</DialogTitle>

View file

@ -31,7 +31,7 @@
}} }}
static static
> --> > -->
<div transition:fade> <div transition:fade|global>
<!-- <DialogOverlay class="dialog-overlay" /> --> <!-- <DialogOverlay class="dialog-overlay" /> -->
<div class="dialog"> <div class="dialog">
<!-- <DialogTitle>Remove from wishlist</DialogTitle> --> <!-- <DialogTitle>Remove from wishlist</DialogTitle> -->

View file

@ -85,7 +85,7 @@
$: wishlistText = existsInWishlist ? 'Remove from wishlist' : 'Add to wishlist'; $: wishlistText = existsInWishlist ? 'Remove from wishlist' : 'Add to wishlist';
</script> </script>
<article class="grid grid-template-cols-2 gap-4" transition:fade> <article class="grid grid-template-cols-2 gap-4" transition:fade|global>
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle>{game.game_name}</CardTitle> <CardTitle>{game.game_name}</CardTitle>
@ -141,7 +141,7 @@
</Card> </Card>
</article> </article>
<!-- <article class="game-container" transition:fade> <!-- <article class="game-container" transition:fade|global>
<h2>{game.name}</h2> <h2>{game.name}</h2>
<a <a
class="thumbnail" class="thumbnail"

View file

@ -42,7 +42,7 @@
</svg> </svg>
<!-- </ListboxButton> --> <!-- </ListboxButton> -->
{#if open} {#if open}
<div transition:fade={{ duration: 200 }}> <div transition:fade|global={{ duration: 200 }}>
<!-- <ListboxOptions class="options"> --> <!-- <ListboxOptions class="options"> -->
{#each shows as anime (anime.id)} {#each shows as anime (anime.id)}
<!-- <ListboxOption <!-- <ListboxOption

View file

@ -51,7 +51,7 @@
> --> > -->
<!-- <ListboxButton>{pageSize || 10}</ListboxButton> --> <!-- <ListboxButton>{pageSize || 10}</ListboxButton> -->
<!-- {#if open} --> <!-- {#if open} -->
<div transition:fade={{ duration: 100 }}> <div transition:fade|global={{ duration: 100 }}>
<!-- <ListboxOptions static class="options"> --> <!-- <ListboxOptions static class="options"> -->
{#each pageSizes as size (size)} {#each pageSizes as size (size)}
<!-- <ListboxOption <!-- <ListboxOption

View file

@ -29,7 +29,7 @@
<!-- </PopoverButton> --> <!-- </PopoverButton> -->
{#if open} {#if open}
<div transition:fade={{ duration: 100 }}> <div transition:fade|global={{ duration: 100 }}>
<!-- <PopoverPanel class="popover-panel" static> --> <!-- <PopoverPanel class="popover-panel" static> -->
<div class="preferences"> <div class="preferences">
<svg <svg

View file

@ -85,7 +85,7 @@
<!-- </ListboxButton> --> <!-- </ListboxButton> -->
{#if open} {#if open}
<div transition:fade={{ duration: 100 }}> <div transition:fade|global={{ duration: 100 }}>
<!-- <ListboxOptions class="options" static> --> <!-- <ListboxOptions class="options" static> -->
{#each Object.entries(themes) as [key, theme] (key)} {#each Object.entries(themes) as [key, theme] (key)}
<!-- <ListboxOption value={theme} let:active let:selected> --> <!-- <ListboxOption value={theme} let:active let:selected> -->

View file

@ -181,7 +181,7 @@
<!-- </DisclosureButton> --> <!-- </DisclosureButton> -->
{#if disclosureOpen} {#if disclosureOpen}
<div transition:fade> <div transition:fade|global>
<!-- Using `static`, `DisclosurePanel` is always rendered, <!-- Using `static`, `DisclosurePanel` is always rendered,
and ignores the `open` state --> and ignores the `open` state -->
<!-- <DisclosurePanel static> --> <!-- <DisclosurePanel static> -->

View file

@ -13,8 +13,8 @@
aria-label={toastData.dismissible ? 'Click to dismiss' : `${toastData.message}`} aria-label={toastData.dismissible ? 'Click to dismiss' : `${toastData.message}`}
on:click={() => toastData.dismissible && toast.remove(toastData.id)} on:click={() => toastData.dismissible && toast.remove(toastData.id)}
on:keydown={() => toastData.dismissible && toast.remove(toastData.id)} on:keydown={() => toastData.dismissible && toast.remove(toastData.id)}
in:fly={{ opacity: 0, x: 100 }} in:fly|global={{ opacity: 0, x: 100 }}
out:fade out:fade|global
animate:flip animate:flip
class={`toast ${toastData.type.toLowerCase()}`} class={`toast ${toastData.type.toLowerCase()}`}
> >

View file

@ -14,7 +14,7 @@
{#if transition.type === 'page' && url} {#if transition.type === 'page' && url}
<div class="transition" style="display: grid;"> <div class="transition" style="display: grid;">
{#key url} {#key url}
<div style="grid-row: 1 / -1; grid-column: 1 / -1;" in:fade={{ duration: 400, delay: 400 }} out:fade={{ duration: 400}}> <div style="grid-row: 1 / -1; grid-column: 1 / -1;" in:fade|global={{ duration: 400, delay: 400 }} out:fade|global={{ duration: 400}}>
<slot /> <slot />
</div> </div>
{/key} {/key}

View file

@ -17,7 +17,7 @@ export type CollectionItemWithGame = Prisma.CollectionItemGetPayload<{
export type Dialog = { export type Dialog = {
isOpen: boolean; isOpen: boolean;
content?: typeof SvelteComponent; content?: typeof SvelteComponent<any>;
additionalData?: SavedGameType | GameType; additionalData?: SavedGameType | GameType;
}; };

View file

@ -7,12 +7,12 @@ import { search_schema } from '$lib/zodValidation.js';
// Search a user's collection // Search a user's collection
export const GET = async ({ url, locals, params, request }) => { export const GET = async ({ url, locals, params, request }) => {
try { // try {
z.parse; // z.parse;
} catch (e) { // } catch (e) {
console.error(e); // console.error(e);
return error(500, { message: 'Something went wrong' }); // return error(500, { message: 'Something went wrong' });
} // }
const searchParams = Object.fromEntries(url.searchParams); const searchParams = Object.fromEntries(url.searchParams);
const q = searchParams?.q || ''; const q = searchParams?.q || '';

View file

@ -145,12 +145,12 @@
</section> </section>
{#if game?.description_preview} {#if game?.description_preview}
{#if !seeMore} {#if !seeMore}
<section class="description" style="margin-top: 2rem;" in:fly={{ opacity: 0, x: 100 }} out:fly={{ opacity: 0, x: -100 }}> <section class="description" style="margin-top: 2rem;" in:fly|global={{ opacity: 0, x: 100 }} out:fly|global={{ opacity: 0, x: -100 }}>
{`${game?.description_preview.substring(0, 250)}...`} {`${game?.description_preview.substring(0, 250)}...`}
</section> </section>
{/if} {/if}
{#if seeMore} {#if seeMore}
<div class="overflow-description" in:fly={{ opacity: 0, x: 100 }} out:fade> <div class="overflow-description" in:fly|global={{ opacity: 0, x: 100 }} out:fade|global>
{@html game?.description} {@html game?.description}
</div> </div>
{/if} {/if}