Skip to content

Commit da0a362

Browse files
FrontendlandFrontendland
committed
⬆️ Migrate Svelte components to 5.x syntax
1 parent 05354a4 commit da0a362

File tree

113 files changed

+1530
-802
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

113 files changed

+1530
-802
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
# build output
22
dist
33
build
4+
astro.config.mjs.timestamp*
45

56
# generated types
67
.astro/

‎eslint.config.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -219,7 +219,10 @@ export default [
219219
},
220220
rules: {
221221
'svelte/no-at-html-tags': 'off',
222-
'no-undef': 'off'
222+
'no-undef': 'off',
223+
'prefer-const': ['error', {
224+
destructuring: 'all' // Revert after https://github.com/sveltejs/eslint-plugin-svelte/issues/889
225+
}]
223226
}
224227
},
225228
{

‎package-lock.json‎

Lines changed: 489 additions & 126 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,10 @@
2121
"@astrojs/check": "0.9.4",
2222
"@astrojs/node": "9.0.0",
2323
"@astrojs/react": "3.6.2",
24-
"@astrojs/svelte": "7.0.1",
24+
"@astrojs/svelte": "7.0.2",
2525
"@eslint/js": "9.16.0",
2626
"@typescript-eslint/parser": "8.18.0",
27-
"astro": "5.0.5",
27+
"astro": "5.1.1",
2828
"astro-eslint-parser": "1.1.0",
2929
"eslint": "9.9.1",
3030
"eslint-plugin-astro": "1.3.1",
@@ -38,7 +38,7 @@
3838
"react-dom": "18.3.1",
3939
"sass": "1.82.0",
4040
"sass-true": "8.1.0",
41-
"svelte": "5.12.0",
41+
"svelte": "5.16.0",
4242
"svelte-eslint-parser": "0.41.0",
4343
"typescript": "5.7.2",
4444
"typescript-eslint": "8.18.0",

‎scripts/buildTypes.js‎

Lines changed: 27 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,26 @@ import { utilityTypes } from './utilityTypes.js'
33

44
import fs from 'fs'
55

6+
const getTypeName = (component, framework) => {
7+
const componentsWithoutFrameworkSpecificTypes = [
8+
'Accordion',
9+
'Avatar',
10+
'BottomNavigation',
11+
'Breadcrumb',
12+
'Icon',
13+
'Rating',
14+
'Skeleton',
15+
'Spinner',
16+
'Stepper',
17+
'Table',
18+
'Progress'
19+
]
20+
21+
return componentsWithoutFrameworkSpecificTypes.includes(component)
22+
? `${component}Props`
23+
: `${framework}${component}Props`
24+
}
25+
626
const format = template => template.trim().replace(new RegExp('^[ \\t]{12}', 'gm'), '')
727

828
const buildTypes = type => {
@@ -31,44 +51,21 @@ const buildTypes = type => {
3151
}
3252

3353
if (type === 'svelte') {
34-
const getTypeName = component => {
35-
const componentsWithSvelteSpecificTypes = [
36-
'Badge',
37-
'Button',
38-
'Carousel',
39-
'Checkbox',
40-
'DataTable',
41-
'Input',
42-
'List',
43-
'Masonry',
44-
'Pagination',
45-
'Radio',
46-
'Select',
47-
'Slider',
48-
'Switch',
49-
'Textarea'
50-
]
51-
52-
return componentsWithSvelteSpecificTypes.includes(component)
53-
? `Svelte${component}Props`
54-
: `${component}Props`
55-
}
56-
5754
return format(`
58-
import type { SvelteComponent } from 'svelte'
55+
import type { Component } from 'svelte'
5956
${components.map(component => {
60-
return `import type { ${getTypeName(component)} as W${getTypeName(component)} } from './components/${component}/${component.toLowerCase()}'`
57+
return `import type { ${getTypeName(component, 'Svelte')} as W${getTypeName(component, 'Svelte')} } from './components/${component}/${component.toLowerCase()}'`
6158
}).join('\n')}
6259
6360
${getAdditionalTypeImports()}
6461
6562
declare module 'webcoreui/${type}' {
6663
${components.map(component => {
67-
return `export class ${component} extends SvelteComponent<W${getTypeName(component)}> {}`
64+
return `export const ${component}: Component<W${getTypeName(component, 'Svelte')}>`
6865
}).join('\n\t')}
6966
7067
${components.map(component => {
71-
return `export type ${component}Props = W${getTypeName(component)}`
68+
return `export type ${component}Props = W${getTypeName(component, 'Svelte')}`
7269
}).join('\n\t')}
7370
7471
${getAdditionalTypeExports()}
@@ -77,40 +74,21 @@ const buildTypes = type => {
7774
}
7875

7976
if (type === 'react') {
80-
const getTypeName = component => {
81-
const componentsWithoutReactSpecificTypes = [
82-
'Accordion',
83-
'Avatar',
84-
'Breadcrumb',
85-
'Icon',
86-
'Rating',
87-
'Skeleton',
88-
'Spinner',
89-
'Stepper',
90-
'Table',
91-
'Progress'
92-
]
93-
94-
return componentsWithoutReactSpecificTypes.includes(component)
95-
? `${component}Props`
96-
: `React${component}Props`
97-
}
98-
9977
return format(`
10078
import { FC } from 'react'
10179
${components.map(component => {
102-
return `import type { ${getTypeName(component)} as W${getTypeName(component)} } from './components/${component}/${component.toLowerCase()}'`
80+
return `import type { ${getTypeName(component, 'React')} as W${getTypeName(component, 'React')} } from './components/${component}/${component.toLowerCase()}'`
10381
}).join('\n')}
10482
10583
${getAdditionalTypeImports()}
10684
10785
declare module 'webcoreui/${type}' {
10886
${components.map(component => {
109-
return `export const ${component}: FC<W${getTypeName(component)}>`
87+
return `export const ${component}: FC<W${getTypeName(component, 'React')}>`
11088
}).join('\n\t')}
11189
11290
${components.map(component => {
113-
return `export type ${component}Props = W${getTypeName(component)}`
91+
return `export type ${component}Props = W${getTypeName(component, 'React')}`
11492
}).join('\n\t')}
11593
11694
${getAdditionalTypeExports()}

‎scripts/createComponent.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,9 @@ const templates = {
4747
4848
import styles from './${lowerCaseComponent}.module.scss'
4949
50-
export let className: ${component}Props['className'] = ''
50+
const {
51+
className
52+
}: ${component}Props = $props()
5153
5254
const classes = classNames([
5355
styles.${lowerCaseComponent},

‎src/blocks/BlogCard/BlogCard.svelte‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,21 @@
88
import type { BlogCardProps } from './blogCard'
99
import styles from './blog-card.module.scss'
1010
11-
const defaultImg = { src: '', alt: '', width: 0, height: 0 }
12-
13-
export let href: BlogCardProps['href'] = ''
14-
export let target: BlogCardProps['target'] = ''
15-
export let img: BlogCardProps['img'] = defaultImg
16-
export let title: BlogCardProps['title'] = ''
17-
export let text: BlogCardProps['text'] = ''
18-
export let secondary: BlogCardProps['secondary'] = false
19-
export let className: BlogCardProps['className'] = ''
11+
const {
12+
href,
13+
target,
14+
img,
15+
title,
16+
text,
17+
secondary,
18+
className,
19+
...rest
20+
}: BlogCardProps = $props()
2021
</script>
2122

2223
<a href={href} target={target} class={classNames([styles.link, className])}>
2324
<Card
24-
{...$$restProps}
25+
{...rest}
2526
className={styles.card}
2627
bodyClassName={classNames([styles.body, secondary && styles.secondary])}
2728
secondary={true}

‎src/blocks/BlogCard/blogCard.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { ButtonProps } from 'webcoreui/astro'
1+
import type { ButtonProps, CardProps } from 'webcoreui/astro'
22

33
export type BlogCardProps = {
44
href: string
@@ -14,4 +14,5 @@ export type BlogCardProps = {
1414
text?: string
1515
secondary?: boolean
1616
className?: string
17-
}
17+
[key: string]: any
18+
} & CardProps

‎src/blocks/ComponentMap/ComponentMap.svelte‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts">
2-
import type { SvelteComponent } from 'svelte'
2+
import type { Component, SvelteComponent } from 'svelte'
33
import { classNames } from 'webcoreui'
44
import {
55
Accordion,
@@ -63,11 +63,13 @@
6363
User
6464
} from '@blocks/svelte'
6565
66-
export let element: ComponentMapProps['element'] = 'div'
67-
export let gap: ComponentMapProps['gap'] = 'default'
68-
export let components: ComponentMapProps['components'] = []
66+
const {
67+
element = 'div',
68+
gap = 'default',
69+
components = []
70+
}: ComponentMapProps = $props()
6971
70-
const blockMap: Record<string, typeof SvelteComponent<any>> = {
72+
const blockMap: Record<string, Component<any>> = {
7173
BlogCard,
7274
ErrorPage,
7375
FAQ,
@@ -138,18 +140,17 @@
138140
Component <code>{component.type}</code> not found at index {index}.
139141
</div>
140142
{:else}
141-
<svelte:component this={map[component.type]} {...component.props}>
143+
{@const SvelteComponent = map[component.type]}
144+
<SvelteComponent {...component.props}>
142145
{#if map[component.props?.children?.type]}
143-
<svelte:component
144-
this={map[component.props?.children?.type]}
145-
{...component.props?.children?.props}
146-
/>
146+
{@const ChildComponent = map[component.props?.children?.type]}
147+
<ChildComponent {...component.props?.children?.props} />
147148
{/if}
148149

149150
{#if typeof component.props?.children === 'string'}
150151
{@html component.props?.children}
151152
{/if}
152-
</svelte:component>
153+
</SvelteComponent>
153154
{/if}
154155
{/each}
155156
</svelte:element>

‎src/blocks/Deployments/Deployments.svelte‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script>
22
import { onMount } from 'svelte'
3-
import { closeModal,modal } from 'webcoreui'
3+
import { closeModal, modal } from 'webcoreui'
44
import {
55
Alert,
66
Button,
@@ -21,7 +21,9 @@
2121
</script>
2222

2323
<Alert title="Deployments">
24-
<Icon type="github" slot="icon" />
24+
{#snippet icon()}
25+
<Icon type="github" />
26+
{/snippet}
2527
<span>Connect your project to GitHub to start running automatic deployments.</span>
2628
<br />
2729
<Button className={styles.connect} onClick={connect}>Connect</Button>

0 commit comments

Comments
 (0)