Skip to content

Commit b1e7efa

Browse files
rodneylabrodneylab
authored
Merge pull request #13 from rodneylab/fix__update_components
fix: 💫 migrate components to Svelte 5
2 parents 6d0e46a + 906f781 commit b1e7efa

26 files changed

+126
-161
lines changed

‎src/lib/components/BannerImage.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { browser } from '$app/environment';
44
import Image from '$lib/components/Image.svelte';
55
6-
export let imageData;
6+
let { imageData } = $props();
77
88
onMount(() => {
99
if (browser) {

‎src/lib/components/BlogPostSummary.svelte

+4-7
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,7 @@
33
import { H_ELLIPSIS_ENTITY } from '$lib/constants/entities';
44
import { goto } from '$app/navigation';
55
6-
export let postTitle;
7-
export let datePublished;
8-
export let seoMetaDescription;
9-
export let slug;
6+
let { postTitle, datePublished, seoMetaDescription, slug } = $props();
107
118
/**
129
* @param event {MouseEvent} - click
@@ -36,9 +33,9 @@
3633
<div
3734
role="presentation"
3835
class="container"
39-
on:mouseenter={handleMouseEnter}
40-
on:mouseleave={handleMouseLeave}
41-
on:mousedown={handleMouseDown}
36+
onmouseenter={handleMouseEnter}
37+
onmouseleave={handleMouseLeave}
38+
onmousedown={handleMouseDown}
4239
>
4340
<div class="content" data-sveltekit-preload-data="hover">
4441
<h3>

‎src/lib/components/BlogRoll.svelte

+4-5
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,11 @@
22
import BlogPostSummary from '$lib/components/BlogPostSummary.svelte';
33
import { H_ELLIPSIS_ENTITY } from '$lib/constants/entities';
44
5-
export let initialPosts = 4;
6-
export let posts;
5+
let { initialPosts = 4, posts } = $props();
76
87
const postCount = posts.length;
9-
$: showPosts = initialPosts;
10-
$: displayPosts = posts.slice(0, showPosts);
8+
let showPosts = $state(initialPosts);
9+
let displayPosts = $derived(posts.slice(0, showPosts));
1110
1211
const handleClick = () => {
1312
showPosts += initialPosts;
@@ -29,6 +28,6 @@
2928
<p>No posts yet!</p>
3029
{/each}
3130
{#if showPosts < postCount}
32-
<button type="submit" on:click={handleClick}>See more {H_ELLIPSIS_ENTITY}</button>
31+
<button type="submit" onclick={handleClick}>See more {H_ELLIPSIS_ENTITY}</button>
3332
{/if}
3433
</section>

‎src/lib/components/Card.svelte

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
<script>
22
import '$lib/styles/index.scss';
3+
4+
let { children } = $props();
35
</script>
46

57
<section class="container">
68
<div class="content">
7-
<slot />
9+
{@render children?.()}
810
</div>
911
</section>
1012

‎src/lib/components/ExternalLink.svelte

+8-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
<script>
2-
export let rel = 'nofollow noopener noreferrer';
3-
export let target = '_blank';
4-
export let href;
5-
export let ariaLabel;
2+
let {
3+
children,
4+
rel = 'nofollow noopener noreferrer',
5+
target = '_blank',
6+
href,
7+
ariaLabel,
8+
} = $props();
69
</script>
710

8-
<a aria-label={ariaLabel} {href} {rel} {target}><slot /></a>
11+
<a aria-label={ariaLabel} {href} {rel} {target}>{@render children?.()}</a>

‎src/lib/components/Icons/Camera.svelte

+1-4
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,7 @@
22
import 'iconify-icon';
33
import { addCollection } from 'iconify-icon';
44
5-
export let label = 'Camera icon';
6-
export let colour = 'inherit';
7-
export let ariaHidden = false;
8-
export let width = 24;
5+
let { label = 'Camera icon', colour = 'inherit', ariaHidden = false, width = 24 } = $props();
96
107
addCollection(
118
{

‎src/lib/components/Icons/Email.svelte

+1-4
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,7 @@
22
import 'iconify-icon';
33
import { addCollection } from 'iconify-icon';
44
5-
export let label = 'Email icon';
6-
export let colour = 'inherit';
7-
export let ariaHidden = false;
8-
export let width = 24;
5+
let { label = 'Email icon', colour = 'inherit', ariaHidden = false, width = 24 } = $props();
96
107
addCollection(
118
{

‎src/lib/components/Icons/Facebook.svelte

+1-4
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,7 @@
22
import 'iconify-icon';
33
import { addCollection } from 'iconify-icon';
44
5-
export let label = 'Facebook icon';
6-
export let colour = 'inherit';
7-
export let ariaHidden = false;
8-
export let width = 24;
5+
let { label = 'Facebook icon', colour = 'inherit', ariaHidden = false, width = 24 } = $props();
96
107
addCollection(
118
{

‎src/lib/components/Icons/GitHub.svelte

+1-4
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,7 @@
22
import 'iconify-icon';
33
import { addCollection } from 'iconify-icon';
44
5-
export let label = 'Git hub icon';
6-
export let colour = 'inherit';
7-
export let ariaHidden = false;
8-
export let width = 24;
5+
let { label = 'Git hub icon', colour = 'inherit', ariaHidden = false, width = 24 } = $props();
96
107
addCollection(
118
{

‎src/lib/components/Icons/LinkedIn.svelte

+1-4
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,7 @@
22
import 'iconify-icon';
33
import { addCollection } from 'iconify-icon';
44
5-
export let label = 'Linked in icon';
6-
export let colour = 'inherit';
7-
export let ariaHidden = false;
8-
export let width = 24;
5+
let { label = 'Linked in icon', colour = 'inherit', ariaHidden = false, width = 24 } = $props();
96
107
addCollection(
118
{

‎src/lib/components/Icons/Telegram.svelte

+6-4
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@
22
import 'iconify-icon';
33
import { addCollection } from 'iconify-icon';
44
5-
export let label = 'Telegram app icon';
6-
export let colour = 'inherit';
7-
export let ariaHidden = false;
8-
export let width = 24;
5+
let {
6+
label = 'Telegram app icon',
7+
colour = 'inherit',
8+
ariaHidden = false,
9+
width = 24,
10+
} = $props();
911
1012
addCollection(
1113
{

‎src/lib/components/Icons/Tiktok.svelte

+1-4
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,7 @@
22
import 'iconify-icon';
33
import { addCollection } from 'iconify-icon';
44
5-
export let label = 'Tik tok icon';
6-
export let colour = 'inherit';
7-
export let ariaHidden = false;
8-
export let width = 24;
5+
let { label = 'Tik tok icon', colour = 'inherit', ariaHidden = false, width = 24 } = $props();
96
107
addCollection(
118
{

‎src/lib/components/Icons/Twitter.svelte

+1-4
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,7 @@
22
import 'iconify-icon';
33
import { addCollection } from 'iconify-icon';
44
5-
export let label = 'Twitter icon';
6-
export let colour = 'inherit';
7-
export let ariaHidden = false;
8-
export let width = 24;
5+
let { label = 'Twitter icon', colour = 'inherit', ariaHidden = false, width = 24 } = $props();
96
107
addCollection(
118
{

‎src/lib/components/Icons/Wire.svelte

+1-4
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,7 @@
22
import 'iconify-icon';
33
import { addCollection } from 'iconify-icon';
44
5-
export let label = 'Wire app icon';
6-
export let colour = 'inherit';
7-
export let ariaHidden = false;
8-
export let width = 24;
5+
let { label = 'Wire app icon', colour = 'inherit', ariaHidden = false, width = 24 } = $props();
96
107
addCollection(
118
{

‎src/lib/components/Image.svelte

+13-11
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
<script>
2-
export let alt;
3-
export let height; // needed to reduce CLS
4-
export let src;
5-
export let sources;
6-
export let placeholder;
7-
export let width; // needed to reduce CLS
8-
export let maxWidth = '1280px';
9-
export let sizes = `(max-width: ${maxWidth}) 100vw, ${maxWidth}}`;
10-
export let importance = undefined;
11-
export let loading = 'lazy';
12-
export let style = '';
2+
let {
3+
alt,
4+
height, // needed to reduce CLS
5+
src,
6+
sources,
7+
placeholder,
8+
width, // needed to reduce CLS
9+
maxWidth = '1280px',
10+
sizes = `(max-width: ${maxWidth}) 100vw, ${maxWidth}}`,
11+
importance = undefined,
12+
loading = 'lazy',
13+
style = '',
14+
} = $props();
1315
</script>
1416

1517
<picture>

‎src/lib/components/Link.svelte

+2-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
<script>
2-
export let rel = '';
3-
export let target = '';
4-
export let href;
5-
export let ariaLabel;
2+
let { children, rel = '', target = '', href, ariaLabel } = $props();
63
</script>
74

8-
<a aria-label={ariaLabel} {href} {rel} {target}><slot /></a>
5+
<a aria-label={ariaLabel} {href} {rel} {target}> {@render children?.()}</a>

‎src/lib/components/SEO/OpenGraph.svelte

+14-12
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
<script>
2-
export let article = false;
3-
export let datePublished;
4-
export let lastUpdated;
5-
export let facebookAuthorPage = '';
6-
export let facebookPage = '';
7-
export let image;
8-
export let squareImage;
9-
export let metadescription;
10-
export let ogLanguage;
11-
export let pageTitle;
12-
export let siteTitle;
13-
export let url;
2+
let {
3+
article = false,
4+
datePublished,
5+
lastUpdated,
6+
facebookAuthorPage = '',
7+
facebookPage = '',
8+
image,
9+
squareImage,
10+
metadescription,
11+
ogLanguage,
12+
pageTitle,
13+
siteTitle,
14+
url,
15+
} = $props();
1416
</script>
1517

1618
<svelte:head>

‎src/lib/components/SEO/SchemaOrg.svelte

+23-29
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,29 @@
11
<script>
22
import hash from 'object-hash';
3-
export let article = false;
4-
export let author;
53
6-
/**
7-
* @type {{ name: string; slug: string }[]}
8-
*/
9-
export let breadcrumbs;
10-
11-
export let datePublished;
12-
export let entity;
13-
export let lastUpdated;
14-
export let featuredImage;
15-
export let metadescription;
16-
export let siteLanguage;
17-
export let siteTitle;
18-
export let siteTitleAlt;
19-
export let siteUrl;
20-
export let title;
21-
export let url;
22-
export let facebookPage;
23-
export let githubPage;
24-
export let linkedinProfile;
25-
export let telegramUsername;
26-
export let tiktokUsername;
27-
export let twitterUsername;
28-
29-
/**
30-
* @type {{ url: string; faviconWidth: number; faviconHeight: number } | null}
31-
*/
32-
export let entityMeta = null;
4+
let {
5+
article = false,
6+
author,
7+
breadcrumbs,
8+
datePublished,
9+
entity,
10+
lastUpdated,
11+
featuredImage,
12+
metadescription,
13+
siteLanguage,
14+
siteTitle,
15+
siteTitleAlt,
16+
siteUrl,
17+
title,
18+
url,
19+
facebookPage,
20+
githubPage,
21+
linkedinProfile,
22+
telegramUsername,
23+
tiktokUsername,
24+
twitterUsername,
25+
entityMeta = null,
26+
} = $props();
3327
3428
const entityHash = hash({ author }, { algorithm: 'md5' });
3529

‎src/lib/components/SEO/Twitter.svelte

+1-5
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
<script>
2-
export let article = false;
3-
export let author;
4-
export let twitterUsername;
5-
export let image;
6-
export let timeToRead = 0;
2+
let { article = false, author, twitterUsername, image, timeToRead = 0 } = $props();
73
84
/*
95
* When there is an equivalent og tag present, Twitter takes that so check OpenGraph before

0 commit comments

Comments
 (0)