Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update to Svelte 5 #233

Merged
merged 3 commits into from
Nov 4, 2024
Merged

Update to Svelte 5 #233

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
768881a
Update to Svelte 5
oeb25 Nov 3, 2024
88f0a5d
Fix CI errors
mikkeldenker Nov 4, 2024
7216285
change selfclosing tags from <tag /> to <tag></tag>
mikkeldenker Nov 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,519 changes: 878 additions & 641 deletions frontend/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

20 changes: 10 additions & 10 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,12 @@
"devDependencies": {
"@iconify-json/heroicons": "^1.1.16",
"@iconify-json/simple-icons": "^1.1.84",
"@iconify/svelte": "^3.1.6",
"@iconify/svelte": "4.0.2",
"@playwright/test": "^1.40.1",
"@sveltejs/adapter-auto": "^3.0.0",
"@sveltejs/adapter-node": "^4.0.0",
"@sveltejs/kit": "^2.0.1",
"@sveltejs/vite-plugin-svelte": "^3.0.1",
"@sveltejs/adapter-node": "5.2.9",
"@sveltejs/kit": "2.7.4",
"@sveltejs/vite-plugin-svelte": "4.0.0",
"@tailwindcss/forms": "^0.5.7",
"@tailwindcss/line-clamp": "^0.4.4",
"@tailwindcss/typography": "^0.5.10",
Expand All @@ -37,23 +37,23 @@
"autoprefixer": "^10.4.16",
"eslint": "^8.56.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-svelte": "^2.35.1",
"eslint-plugin-svelte": "^2.45.1",
"marked": "^11.1.0",
"openapi-typescript": "^6.7.3",
"postcss": "^8.4.32",
"postcss-load-config": "^5.0.2",
"prettier": "^3.1.1",
"prettier-plugin-svelte": "^3.1.2",
"prettier-plugin-svelte": "^3.2.6",
"prettier-plugin-tailwindcss": "^0.5.9",
"rollup-plugin-copy": "^3.5.0",
"svelte": "^4.2.8",
"svelte-check": "^3.6.2",
"svelte": "5.1.9",
"svelte-check": "4.0.5",
"svelte-highlight": "^7.4.6",
"tailwindcss": "^3.3.6",
"tslib": "^2.6.2",
"typescript": "^5.3.3",
"typescript": "^5.5.0",
"unplugin-icons": "^0.18.1",
"vite": "^5.1.4",
"vite": "^5.4.4",
"vite-plugin-top-level-await": "^1.4.1",
"vite-plugin-wasm": "^3.3.0",
"vitest": "^1.0.4"
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/lib/components/Callout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
<span>
{title}
</span>
<div class="m-0 flex-1" />
<div class="m-0 flex-1"></div>
<slot name="top-right" />
</div>
</slot>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/lib/components/Header.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,6 @@
{#if showDivider}
<div
class="absolute inset-x-0 -bottom-0 h-px bg-gradient-to-r from-primary via-primary-focus to-primary"
/>
></div>
{/if}
</nav>
6 changes: 4 additions & 2 deletions frontend/src/lib/components/Searchbar.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,13 +142,15 @@
</div>

{#if suggestions.length > 0}
<div class="absolute inset-x-5 bottom-px hidden h-px bg-base-300 group-focus-within:block" />
<div
class="absolute inset-x-5 bottom-px hidden h-px bg-base-300 group-focus-within:block"
></div>
<div
class={twJoin(
'absolute inset-x-5 bottom-px h-px bg-base-300',
hasFocus ? 'block' : 'hidden',
)}
/>
></div>
<div
class={twJoin(
'absolute -inset-x-px bottom-0 translate-y-full flex-col overflow-hidden rounded-3xl rounded-t-none border border-t-0 border-base-400 bg-base-100 shadow',
Expand Down
5 changes: 2 additions & 3 deletions frontend/src/lib/components/Site.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,8 @@
>
<slot />
</a>
<span
class="noscript:hidden my-2 w-px bg-primary-content transition group-hover:bg-transparent"
/>
<span class="noscript:hidden my-2 w-px bg-primary-content transition group-hover:bg-transparent"
></span>
<button
class={twMerge(
'cursor-pointer text-sm',
Expand Down
66 changes: 33 additions & 33 deletions frontend/src/routes/components/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,9 @@
</span>
</span>
<div class="flex overflow-hidden rounded border [&>*]:aspect-square [&>*]:w-10">
<div class="bg-primary" />
<div class="bg-secondary" />
<div class="bg-accent" />
<div class="bg-primary"></div>
<div class="bg-secondary"></div>
<div class="bg-accent"></div>
</div>
</button>
{/each}
Expand Down Expand Up @@ -112,81 +112,81 @@
<div class="color-sample">
<h2>primary</h2>
<div>
<div class="bg-primary" />
<div class="bg-primary-focus" />
<div class="bg-primary-content" />
<div class="bg-primary"></div>
<div class="bg-primary-focus"></div>
<div class="bg-primary-content"></div>
</div>
</div>
<div class="color-sample">
<h2>secondary</h2>
<div>
<div class="bg-secondary" />
<div class="bg-secondary-focus" />
<div class="bg-secondary-content" />
<div class="bg-secondary"></div>
<div class="bg-secondary-focus"></div>
<div class="bg-secondary-content"></div>
</div>
</div>
<div class="color-sample">
<h2>accent</h2>
<div>
<div class="bg-accent" />
<div class="bg-accent-focus" />
<div class="bg-accent-content" />
<div class="bg-accent"></div>
<div class="bg-accent-focus"></div>
<div class="bg-accent-content"></div>
</div>
</div>
<div class="color-sample">
<h2>neutral</h2>
<div>
<div class="bg-neutral" />
<div class="bg-neutral-focus" />
<div class="bg-neutral-content" />
<div class="bg-neutral"></div>
<div class="bg-neutral-focus"></div>
<div class="bg-neutral-content"></div>
</div>
</div>
<div class="color-sample">
<h2>base</h2>
<div>
<div class="bg-base-100" />
<div class="bg-base-200" />
<div class="bg-base-300" />
<div class="bg-base-content" />
<div class="bg-base-100"></div>
<div class="bg-base-200"></div>
<div class="bg-base-300"></div>
<div class="bg-base-content"></div>
</div>
</div>
<div class="color-sample">
<h2>info</h2>
<div>
<div class="bg-info" />
<div class="bg-info-focus" />
<div class="bg-info-content" />
<div class="bg-info"></div>
<div class="bg-info-focus"></div>
<div class="bg-info-content"></div>
</div>
</div>
<div class="color-sample">
<h2>success</h2>
<div>
<div class="bg-success" />
<div class="bg-success-focus" />
<div class="bg-success-content" />
<div class="bg-success"></div>
<div class="bg-success-focus"></div>
<div class="bg-success-content"></div>
</div>
</div>
<div class="color-sample">
<h2>warning</h2>
<div>
<div class="bg-warning" />
<div class="bg-warning-focus" />
<div class="bg-warning-content" />
<div class="bg-warning"></div>
<div class="bg-warning-focus"></div>
<div class="bg-warning-content"></div>
</div>
</div>
<div class="color-sample">
<h2>error</h2>
<div>
<div class="bg-error" />
<div class="bg-error-focus" />
<div class="bg-error-content" />
<div class="bg-error"></div>
<div class="bg-error-focus"></div>
<div class="bg-error-content"></div>
</div>
</div>
<div class="color-sample">
<h2>link</h2>
<div>
<div class="bg-link" />
<div class="bg-link-visited" />
<div class="bg-link"></div>
<div class="bg-link-visited"></div>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/routes/explore/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,7 @@
title="Limit number of similar sites shown"
/>
</div>
<div />
<div></div>
<Button _class="noscript:hidden" on:click={exportAsOptic}>Export as optic</Button>
</div>
<table class="w-full border-separate border-spacing-y-1">
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/routes/search/Result.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,8 +97,8 @@
answers={webpage.richSnippet.answers}
/>
{:else}
<div class="line-clamp-4 md:line-clamp-3">
<div class="inline">
<span class="line-clamp-4 md:line-clamp-3">
<span class="inline">
<span id="snippet-text" class="snippet-text">
{#if webpage.likelyHasAds && $markPagesWithAdsStore && webpage.likelyHasPaywall && $markPagesWithPaywallStore}
<span
Expand Down Expand Up @@ -131,8 +131,8 @@
<TextSnippet snippet={webpage.snippet.text} />
</span>
</span>
</div>
</div>
</span>
</span>
{/if}
</p>
</div>
Expand Down
36 changes: 15 additions & 21 deletions frontend/src/routes/search/ThesaurusWidget.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,27 +8,21 @@
export let widget: ThesaurusWidget;

// convert meanings into a list of either pos or meanings
enum MeaningType {
pos,
meaning,
}
interface Pos {
type: MeaningType.pos;
pos: PartOfSpeech;
}

interface Meaning {
type: MeaningType.meaning;
meaning: WordMeaning;
}

type MeaningOrPos = Pos | Meaning;
type MeaningOrPos =
| {
type: 'pos';
pos: PartOfSpeech;
}
| {
type: 'meaning';
meaning: WordMeaning;
};

$: meanings = widget.meanings.flatMap((meaning) => {
return [
{ type: MeaningType.pos, pos: meaning.pos },
{ type: 'pos', pos: meaning.pos },
...(meaning.meanings.map((meaning) => ({
type: MeaningType.meaning,
type: 'meaning',
meaning: meaning,
})) as MeaningOrPos[]),
];
Expand Down Expand Up @@ -60,22 +54,22 @@
<h2 class="text-2xl font-bold">{widget.term}</h2>
<div class="flex flex-col space-y-3 transition">
{#each nonExpandedMeanings as m}
{#if m.type == MeaningType.pos}
{#if m.type == 'pos'}
<div class="text-sm italic">
{posName(m.pos)}
</div>
{:else if m.type == MeaningType.meaning}
{:else if m.type == 'meaning'}
<ThesaurusWidgetMeaning meaning={m.meaning} />
{/if}
{/each}
{#if expanded}
<div transition:slide={{ duration: 200 }} class="space-y-3">
{#each expandedMeanings as m}
{#if m.type == MeaningType.pos}
{#if m.type == 'pos'}
<div class="text-sm italic">
{posName(m.pos)}
</div>
{:else if m.type == MeaningType.meaning}
{:else if m.type == 'meaning'}
<ThesaurusWidgetMeaning meaning={m.meaning} />
{/if}
{/each}
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/routes/settings/optics/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,8 +138,8 @@
{/if}
<div class="mt-5">
<div class="grid w-full grid-cols-[auto_auto_1fr_2fr_auto] gap-5" id="optics-list">
<span />
<span />
<span></span>
<span></span>
<div class="flex-1 font-medium">Name</div>
<div class="flex-1 font-medium">Description</div>
<div class="flex-1 font-medium">Link</div>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/routes/settings/sites/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
// Called when the user selects an optic file for import
const importOpticFile = (e: Event) => {
// Get an array of the uploaded files
let files: File[] = [...((<HTMLInputElement>e.target)?.files ?? new FileList())];
let files: File[] = [...((e.target as HTMLInputElement)?.files ?? new FileList())];

// Iterate through all files, attempt to get the contents & parse the optic
files.forEach((file) => {
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/routes/sorry/Patch.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<label
for={'patch_' + id}
class="h-full w-full hover:cursor-pointer hover:bg-white/30 peer-checked:bg-black/75"
/>
></label>
<Check
class="pointer-events-none invisible absolute left-1/2 top-1/2 m-0 h-10 w-10 translate-x-[-50%] translate-y-[-50%] text-white peer-checked:visible"
/>
Expand Down
Loading