Skip to content

Commit c71094d

Browse files
nolimits4webnolimits4web
committed
feat: svelte v5 typings
1 parent 8cb0312 commit c71094d

10 files changed

Lines changed: 71 additions & 25 deletions

File tree

‎scripts/build-svelte-typings.js‎

Lines changed: 39 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -8,27 +8,32 @@ const fs = require('./utils/fs-extra.js');
88
const { COLOR_PROPS, ICON_PROPS, ROUTER_PROPS, ACTIONS_PROPS } = require('./ts-extend-props.js');
99

1010
const TEMPLATE = `
11-
import { SvelteComponent } from 'svelte';
11+
import { SvelteComponent, Snippet } from 'svelte';
1212
import { HTMLAttributes } from 'svelte/elements';
1313
{{IMPORTS}}
1414
15-
interface {{componentName}}Props {
15+
interface Props {
1616
{{PROPS}}
1717
}
1818
19+
interface {{componentName}}Props {}
20+
interface {{componentName}}Props extends Props {}
1921
{{EXTENDS}}
22+
interface {{componentName}}Events extends Record<'',{}>{}
23+
24+
2025
2126
declare class {{componentName}} extends SvelteComponent<
22-
{{componentName}}Props & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof {{componentName}}Props>,
23-
{ {{EVENTS}} },
24-
{ {{SLOTS}} }
27+
{{componentName}}Props,
28+
{{componentName}}Events,
29+
{ }
2530
> {}
2631
2732
export { {{componentName}}Props };
2833
export default {{componentName}};
2934
`;
3035

31-
function generateComponentProps(propsContent) {
36+
function generateComponentProps(propsContent, slots, events) {
3237
// eslint-disable-next-line
3338
const props = {};
3439
propsContent
@@ -42,7 +47,7 @@ function generateComponentProps(propsContent) {
4247
.map((line) => line.trim())
4348
.filter((line) => !!line)
4449
.forEach((line) => {
45-
const propName = line.split(':')[0].replace('?', '');
50+
const propName = line.split(':')[0].replace('?', '').trim();
4651
let propValue = line.split(':').slice(1).join(':');
4752
if (propValue.charAt(propValue.length - 1) === ';') {
4853
propValue = propValue.substr(0, propValue.length - 1);
@@ -53,6 +58,21 @@ function generateComponentProps(propsContent) {
5358
['id', 'style', 'className', 'ref', 'slot', 'children'].forEach((key) => {
5459
delete props[key];
5560
});
61+
Object.keys(props).forEach((propName) => {
62+
if (slots.includes(propName)) {
63+
props[propName] = `${props[propName]} | Snippet`;
64+
}
65+
});
66+
slots.forEach((slotName) => {
67+
if (!Object.keys(props).includes(slotName)) {
68+
props[slotName] = `Snippet`;
69+
}
70+
});
71+
events.forEach((eventName) => {
72+
if (!Object.keys(props).includes(eventName)) {
73+
props[eventName] = `() => void`;
74+
}
75+
});
5676
const content = Object.keys(props)
5777
.map((propName) => `${propName}?: ${props[propName]};`)
5878
.join('\n ');
@@ -74,29 +94,28 @@ function generateComponentTypings(componentName, fileContent, reactFileContent)
7494
propsExtends = reactFileContent.split('/* dts-extends')[1].split('*/')[0] || '';
7595
}
7696
const slots = [];
77-
fileContent.replace(/<slot ([^>]*)\/>/g, (str, name) => {
78-
if (!name.trim()) name = 'default';
79-
name = name.match(/name="([a-z-]*)"/);
80-
if (name) name = name[1];
81-
else name = 'default';
97+
fileContent.replace(/{@render ([a-zA-Z]*)/g, (str, name) => {
98+
if (!name.trim()) name = 'children';
8299
if (!slots.includes(name)) slots.push(name);
83100
});
84-
if (fileContent.includes('<slot') && !slots.includes('default')) slots.push('default');
85-
const slotsContent = slots.map((slot) => ` '${slot}' : {};`).join(' ');
101+
fileContent.replace(/<SnippetRender content={([a-zA-Z]*)/g, (str, name) => {
102+
if (!name.trim()) name = 'children';
103+
if (!slots.includes(name)) slots.push(name);
104+
});
105+
if (componentName === 'Navbar') {
106+
slots.push(...['title', 'subtitle']);
107+
}
86108

87109
const events = [];
88-
fileContent.replace(/emit\('([a-zA-Z]*)'/g, (str, name) => {
89-
if (!events.includes(name)) events.push(name);
110+
fileContent.replace(/restProps.on([a-zA-Z]*)/g, (str, name) => {
111+
if (!events.includes(`on${name}`)) events.push(`on${name}`);
90112
});
91-
const eventsContent = events.map((event) => `${event}: CustomEvent<void>;`).join(' ');
92113

93114
// prettier-ignore
94115
return TEMPLATE
95116
.replace('{{IMPORTS}}', imports)
96117
.replace('{{EXTENDS}}', propsExtends ? ` interface ${componentName}Props extends ${propsExtends.trim()} {}` : '')
97-
.replace('{{PROPS}}', generateComponentProps(props))
98-
.replace('{{EVENTS}}', eventsContent)
99-
.replace('{{SLOTS}}', slotsContent)
118+
.replace('{{PROPS}}', generateComponentProps(props, slots, events))
100119
.replace(/{{componentName}}/g, componentName)
101120
}
102121

‎src/svelte/components/accordion-item.svelte‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,26 +21,32 @@
2121
2222
function onBeforeOpen(accEl, prevent) {
2323
if (accEl !== el) return;
24+
restProps.onaccordionbeforeopen?.(prevent);
2425
restProps.onAccordionBeforeOpen?.(prevent);
2526
}
2627
function onOpen(accEl) {
2728
if (accEl !== el) return;
29+
restProps.onaccordionopen?.();
2830
restProps.onAccordionOpen?.();
2931
}
3032
function onOpened(accEl) {
3133
if (accEl !== el) return;
34+
restProps.onaccordionopened?.();
3235
restProps.onAccordionOpened?.();
3336
}
3437
function onBeforeClose(accEl, prevent) {
3538
if (accEl !== el) return;
39+
restProps.onaccordionbeforeclose?.(prevent);
3640
restProps.onAccordionBeforeClose?.(prevent);
3741
}
3842
function onClose(accEl) {
3943
if (accEl !== el) return;
44+
restProps.onaccordionclose?.();
4045
restProps.onAccordionClose?.();
4146
}
4247
function onClosed(accEl) {
4348
if (accEl !== el) return;
49+
restProps.onaccordionclosed?.();
4450
restProps.onAccordionClosed?.();
4551
}
4652

‎src/svelte/components/actions.svelte‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,19 +48,23 @@
4848
function onOpen(instance) {
4949
isOpened = true;
5050
isClosing = false;
51+
restProps.onactionsopen?.(instance);
5152
restProps.onActionsOpen?.(instance);
5253
opened = true;
5354
}
5455
function onOpened(instance) {
56+
restProps.onactionsopened?.(instance);
5557
restProps.onActionsOpened?.(instance);
5658
}
5759
function onClose(instance) {
5860
isOpened = false;
5961
isClosing = true;
62+
restProps.onactionsclose?.(instance);
6063
restProps.onActionsClose?.(instance);
6164
}
6265
function onClosed(instance) {
6366
isClosing = false;
67+
restProps.onactionsclosed?.(instance);
6468
restProps.onActionsClosed?.(instance);
6569
opened = false;
6670
}

‎src/svelte/components/card.svelte‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,23 +82,28 @@
8282
8383
function onBeforeOpen(cardEl, prevent) {
8484
if (cardEl !== el) return;
85+
restProps.oncardbeforeopen?.(el, prevent);
8586
restProps.onCardBeforeOpen?.(el, prevent);
8687
}
8788
function onOpen(cardEl) {
8889
if (cardEl !== el) return;
90+
restProps.oncardopen?.(el);
8991
restProps.onCardOpen?.(el);
9092
expandableOpened = true;
9193
}
9294
function onOpened(cardEl, pageEl) {
9395
if (cardEl !== el) return;
96+
restProps.oncardopened?.(el, pageEl);
9497
restProps.onCardOpened?.(el, pageEl);
9598
}
9699
function onClose(cardEl) {
97100
if (cardEl !== el) return;
101+
restProps.oncardclose?.(el);
98102
restProps.onCardClose?.(el);
99103
}
100104
function onClosed(cardEl, pageEl) {
101105
if (cardEl !== el) return;
106+
restProps.oncardclosed?.(el, pageEl);
102107
restProps.onCardClosed?.(el, pageEl);
103108
expandableOpened = false;
104109
}

‎src/svelte/components/checkbox.svelte‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
function onChange(event) {
3232
checked = event.target.checked;
3333
restProps.onchange?.(event);
34+
restProps.onChange?.(event);
3435
}
3536
3637
onMount(() => {

‎src/svelte/components/chip.svelte‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
4646
function onDeleteClick(e) {
4747
restProps.onDelete?.(e);
48+
restProps.ondelete?.(e);
4849
}
4950
</script>
5051

‎src/svelte/components/fab.svelte‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,10 @@
6262
<div class={classes} data-morph-to={morphTo} bind:this={el} data-f7-slot={f7Slot} {...restProps}>
6363
<a
6464
bind:this={linkEl}
65-
onclick={restProps.onclick?.()}
65+
onclick={(e) => {
66+
restProps.onclick?.(e);
67+
restProps.onclick?.(e);
68+
}}
6669
{target}
6770
href={hrefComputed}
6871
use:useTooltip={{ tooltip, tooltipTrigger }}

‎src/svelte/components/input.svelte‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -168,19 +168,23 @@
168168
);
169169
170170
function onTextareaResize(event) {
171+
restProps.ontextarearesize?.(event);
171172
restProps.onTextareaResize?.(event);
172173
}
173174
174175
function onInputNotEmpty(event) {
175176
restProps.onInputNotEmpty?.(event);
177+
restProps.oninputnotempty?.(event);
176178
}
177179
178180
function onInputEmpty(event) {
179181
restProps.onInputEmpty?.(event);
182+
restProps.oninputempty?.(event);
180183
}
181184
182185
function onInputClear(event) {
183186
restProps.onInputClear?.(event);
187+
restProps.oninputclear?.(event);
184188
}
185189
186190
function onInput(...args) {
@@ -217,6 +221,7 @@
217221
restProps.onchange?.(...args);
218222
219223
if (type === 'texteditor') {
224+
restProps.ontexteditorchange?.(args[1]);
220225
restProps.onTextEditorChange?.(args[1]);
221226
value = args[1];
222227
}
@@ -243,6 +248,7 @@
243248
on: {
244249
change(calendar, calendarValue) {
245250
restProps.onCalendarChange?.(calendarValue);
251+
restProps.oncalendarchange?.(calendarValue);
246252
value = calendarValue;
247253
},
248254
},
@@ -256,7 +262,7 @@
256262
on: {
257263
change(colorPicker, colorPickerValue) {
258264
restProps.onColorPickerChange?.(colorPickerValue);
259-
restProps.onColorpickerChange?.(colorPickerValue);
265+
restProps.oncolorpickerchange?.(colorPickerValue);
260266
value = colorPickerValue;
261267
},
262268
},

‎src/svelte/components/list-item.svelte‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -494,7 +494,8 @@
494494
{/if}
495495
<SnippetRender content={innerEnd} />
496496
</div>
497-
<SnippetRender {content} />
497+
<!-- prettier-ignore -->
498+
<SnippetRender content={content} />
498499
<SnippetRender content={contentEnd} />
499500
</div>
500501
<!-- Item content end -->

‎src/svelte/components/list.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -136,12 +136,12 @@
136136
137137
function onSubmit(event) {
138138
restProps.onSubmit?.(event);
139-
restProps.onSubmit?.(event);
139+
restProps.onsubmit?.(event);
140140
}
141141
function onSortableEnable(sortableEl) {
142142
if (sortableEl !== el) return;
143143
restProps.onSortableEnable?.(sortableEl);
144-
restProps.onSortableEnable?.(sortableEl);
144+
restProps.onsortableenable?.(sortableEl);
145145
}
146146
function onSortableDisable(sortableEl) {
147147
if (sortableEl !== el) return;

0 commit comments

Comments
 (0)