New Svelte 5 event attributes are missing

[htran-ubed]

New Svelte 5 event attributes, like onionChange, are missing in index.d.ts.

[jwrunge]

I used ionic-svelte with my Svelte 4 app, and moved away from it when I upgraded to Svelte 5. I've just done some fiddling around with Ionic element typing and have a system that mostly works -- not sure if this is the direction that @Tommertom is going with this, but he's welcome to copy the code or I'm happy to submit a PR if this is of interest to him. Otherwise, I'm posting this here in case it helps anyone else bridge the gap, because Ionic sure does make it hard to use unsupported frameworks or vanilla JavaScript...

I have a node script that I run as a postinstall script that looks something like this (you can remove prettier format if you're not using it):

import { readFileSync, writeFileSync } from 'node:fs';
import { join } from 'node:path';

import { format } from 'prettier';

const projectRootDir = [import.meta.dirname, `..`];
const srcPath = join(...projectRootDir, `src`);
const filepath = `ionic-svelte.d.ts`;
// eslint-disable-next-line regexp/match-any
const RxMatchType = /(?<=namespace JSX)[\S\s]*?interface IntrinsicElements[\S\s]*?({([\S\s])*?})/;
const res = RxMatchType.exec(
	readFileSync(join(...projectRootDir, `node_modules`, `@ionic`, `core`, `dist`, `types`, `components.d.ts`), `utf8`)
);
const script = `
	\t/** THIS PORTION OF THE FILE IS AUTOGENERATED BY build-scripts/ionicComponentTypesToSvelte.ts.
	\t/** IT IS RUN AS A POSTINSTALL SCRIPT. DO NOT EDIT. */
	${
		(res?.at(1)?.trim().slice(1, -1) ?? ``)
			.trim()
			.split(`\n`)
			.map(line => {
				const element = line.trim().split(`:`)[0]!;
				return `${element}: CommonAttributes & CorrectedAttributes<IonicJSX.IntrinsicElements[${
					element.replaceAll(`"`, `\``)
				}]>`;
			})
			.join(`;`)
	}
	\t/** END AUTOGENERATED CONTENT. */
`;

try {
	writeFileSync(
		join(srcPath, filepath),
		await format(
			`${readFileSync(join(srcPath, filepath))}`.replace(
				// eslint-disable-next-line regexp/match-any
				/export interface SvelteHTMLElements[\S\s]*?{[\S\s]*?}/,
				`export interface SvelteHTMLElements extends IonicJSX.IntrinsicElements {${script}}`
			),
			{ filepath }
		)
	);

	// eslint-disable-next-line no-console
	console.log(`Wrote ionic-svelte.d.ts file.`);
}
catch (e) {
	// eslint-disable-next-line no-console
	console.error(`Failed to write ionic-svelte.d.ts file.`, e);
}

That all dumps the formatted types into a .d.ts file like this:

import 'svelte/svelte-html.d.ts';

import type { JSX as IonicJSX } from '@stencil/core';

type CommonAttributes = { onkeydown?: (event: KeyboardEvent) => void };

type KebabCase<T extends string> = T extends `${infer Head}${infer Tail}`
	? Tail extends Uncapitalize<Tail> ? `${Head}${KebabCase<Tail>}` : `${Head}-${KebabCase<Lowercase<Tail>>}`
	: T;

type KebabCaseKeys<T> = {
	// eslint-disable-next-line unused-imports/no-unused-vars
	[K in keyof T as K extends `on${infer _}` ? K : KebabCase<K & string>]: T[K]
};

type SvelteStyleEventHooks<T> = {
	[K in keyof T as K extends `on${infer Rest}` ? `on${Uncapitalize<Rest>}` : K]: T[K]
};

type CorrectedAttributes<T> = SvelteStyleEventHooks<KebabCaseKeys<T>>;

declare module 'svelte/elements' {
	export interface SvelteHTMLElements extends IonicJSX.IntrinsicElements {}
}

export {}; // ensure this is not an ambient module

So one of the generated element definitions looks like this: 'ion-item': CommonAttributes & CorrectedAttributes<IonicJSX.IntrinsicElements[ion-item]>

This gives us all our Ionic component types, auto-converts all the camelCase attributes to kebab-case, and changes onIonWhatever to onionWhatever, which is what Svelte expects in order for those event bindings to work. The missing piece here is that, though we've added kebab-case attributes and corrected event attributes, the originals are still there, so I need to figure out how to remove them.

Then you just need to stick your .d.ts file in your tsconfig.json include array, if it isn't already getting pulled in.

Ref: https://svelte.dev/docs/svelte/typescript#Enhancing-built-in-DOM-types

[Tommertom]

Hi @htran-ubed and @jwrunge
Thanks for flagging this. And thx @jwrunge for posting your solution.

I am very hopeful seeing a new maintainer on the project to take this on.

Your solution triggers an interesting thought to have the typescript definitions generated as part of the create scripts, so we don't need to bother anymore updating the core package. We just take the latest version of ionic/core and generate the typescript stuff svelte would need.

These creation scripts need a big overhaul given the latest releases of Svelte - so this is a bit of work.