Add event listeners to Svelte known properties

chialab · Jul 16, 2024 · e982307 · e982307
1 parent 2ef631a
commit e982307
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 3 deletions.
diff --git a/.changeset/polite-rockets-beg.md b/.changeset/polite-rockets-beg.md
@@ -0,0 +1,5 @@
+---
+'@chialab/plasma': patch
+---
+
+Add event listeners to Svelte known properties.
diff --git a/src/svelte.ts b/src/svelte.ts
@@ -244,9 +244,11 @@ import { ${declaration.name} as Base${declaration.name} } from '${options.entryp
 import { ${getAttributes(definition.extend ?? definition.name).split('<')[0]} } from 'svelte/elements';
 `;
 
-    const propertiesTypings = filterPublicMemebers(declaration).map(
-        (member) => `${member.name}?: Base${declaration.name}['${member.name}'];`
-    );
+    const propertiesTypings = filterPublicMemebers(declaration)
+        .map((member) => `${member.name}?: Base${declaration.name}['${member.name}'];`)
+        .concat(
+            declaration.events?.map((declaration) => `on${declaration.name}?: (event: CustomEvent) => boolean;`) ?? []
+        );
 
     const eventsTypings = [];
     if (declaration.events) {

diff --git a/test/src/svelte/TestElement.d.ts b/test/src/svelte/TestElement.d.ts
@@ -9,6 +9,7 @@ declare const __propDef: {
         numericProp?: BaseTestElement['numericProp'];
         objectProp?: BaseTestElement['objectProp'];
         defaultValue?: BaseTestElement['defaultValue'];
+        onstringchange?: (event: CustomEvent) => boolean;
     };
     events: {
         'stringchange': CustomEvent;
@@ -23,4 +24,5 @@ export type TestElementProps = typeof __propDef.props;
 export type TestElementEvents = typeof __propDef.events;
 export type TestElementSlots = typeof __propDef.slots;
 export class TestElement extends SvelteComponent<TestElementProps, TestElementEvents, TestElementSlots> {
+    getElement(): BaseTestElement;
 }
diff --git a/test/src/svelte/TestElement.svelte b/test/src/svelte/TestElement.svelte
@@ -17,6 +17,12 @@
         };
     }
 
+    let __element;
+
+    export function getElement() {
+        return __element;
+    }
+
     export let stringProp = undefined;
     export let booleanProp = undefined;
     export let numericProp = undefined;
@@ -26,6 +32,7 @@
 
 <!-- svelte-ignore attribute_avoid_is -->
 <test-element
+    bind:this={__element}
     {...$$restProps}
     use:__sync={{
         stringProp,

diff --git a/test/src/svelte/TestLink.d.ts b/test/src/svelte/TestLink.d.ts
@@ -9,6 +9,7 @@ declare const __propDef: {
         numericProp?: BaseTestLink['numericProp'];
         objectProp?: BaseTestLink['objectProp'];
         defaultValue?: BaseTestLink['defaultValue'];
+        onstringchange?: (event: CustomEvent) => boolean;
     };
     events: {
         'stringchange': CustomEvent;
@@ -23,4 +24,5 @@ export type TestLinkProps = typeof __propDef.props;
 export type TestLinkEvents = typeof __propDef.events;
 export type TestLinkSlots = typeof __propDef.slots;
 export class TestLink extends SvelteComponent<TestLinkProps, TestLinkEvents, TestLinkSlots> {
+    getElement(): BaseTestLink;
 }
diff --git a/test/src/svelte/TestLink.svelte b/test/src/svelte/TestLink.svelte
@@ -17,6 +17,12 @@
         };
     }
 
+    let __element;
+
+    export function getElement() {
+        return __element;
+    }
+
     export let stringProp = undefined;
     export let booleanProp = undefined;
     export let numericProp = undefined;
@@ -26,6 +32,7 @@
 
 <!-- svelte-ignore attribute_avoid_is -->
 <a
+    bind:this={__element}
     is="test-link"
     {...$$restProps}
     use:__sync={{