Forward svelte custom events

src/svelte.ts

@@ -200,11 +200,27 @@ onMount(() => {
         }
     }
 
+    const events = [];
+    if (declaration.events) {
+        for (const event of declaration.events) {
+            events.push(`on:${event.name}`);
+        }
+    }
+
     const markup = definition.extend
-        ? `<${definition.extend} bind:this={__ref} {...$$restProps} is="${definition.name}">
+        ? `<${definition.extend}
+    bind:this={__ref}
+    is="${definition.name}"
+    {...$$restProps}
+    ${events.join('\n    ')}
+>
     <slot />
 </${definition.extend}>`
-        : `<${definition.name} bind:this={__ref} {...$$restProps}>
+        : `<${definition.name}
+    bind:this={__ref}
+    {...$$restProps}
+    ${events.join('\n    ')}
+>
     <slot />
 </${definition.name}>`;
 
@@ -221,11 +237,11 @@ ${markup}`;
 
 function generateSvelteTypings(entry: Entry) {
     const { packageJson, definition, declaration } = entry;
-    let declContents = `import { SvelteComponent } from 'svelte';
-import { ${declaration.name} as Base${declaration.name} } from '${packageJson.name}';
-`;
+    let imports = `import { SvelteComponent } from 'svelte';
+    import { ${declaration.name} as Base${declaration.name} } from '${packageJson.name}';
+    `;
     if (definition.extend) {
-        declContents += `import { ${getAttributes(definition.extend).split('<')[0]} } from 'svelte/elements';\n`;
+        imports += `import { ${getAttributes(definition.extend).split('<')[0]} } from 'svelte/elements';\n`;
     }
 
     let propertiesTypings = '';
@@ -246,17 +262,31 @@ import { ${declaration.name} as Base${declaration.name} } from '${packageJson.na
         }
     }
 
-    declContents += `
+    let eventsTypings = '';
+    if (declaration.events) {
+        imports += `import { EventHandler } from 'svelte/elements';\n`;
+
+        for (const event of declaration.events) {
+            propertiesTypings += `'on:${event.name}'?: EventHandler<CustomEvent>;\n`;
+            eventsTypings += `'${event.name}': CustomEvent;\n`;
+        }
+    }
+
+    const declContents = `
 declare const __propDef: {
     props: ${definition.extend ? `${getAttributes(definition.extend)} & ` : ''}{
 ${propertiesTypings
     .trim()
     .split('\n')
     .map((line) => `        ${line}`)
     .join('\n')}
-    },
+    };
     events: {
-        [evt: string]: CustomEvent<any>;
+${eventsTypings
+    .trim()
+    .split('\n')
+    .map((line) => `        ${line}`)
+    .join('\n')}
     };
     slots: {};
 };
@@ -266,12 +296,12 @@ export type ${declaration.name}Events = typeof __propDef.events;
 export type ${declaration.name}Slots = typeof __propDef.slots;
 export default class ${declaration.name} extends SvelteComponent<${declaration.name}Props, ${declaration.name}Events, ${
         declaration.name
-    }Slots > {
+    }Slots> {
 }
 export {};
 `;
 
-    return declContents;
+    return `${imports}${declContents}`;
 }
 
 export async function transformSvelte(entry: Entry, options: SvelteTransformOptions) {

test/svelte/cem.config.js

@@ -0,0 +1,7 @@
+import { dnaPlugins } from '@chialab/manifest-analyzer-dna-plugin';
+
+export default {
+    plugins: dnaPlugins(),
+    globs: ['index.ts'],
+    dependencies: false,
+};

test/svelte/custom-elements.json

@@ -4,7 +4,7 @@
   "modules": [
     {
       "kind": "javascript-module",
-      "path": "src/index.ts",
+      "path": "index.ts",
       "declarations": [
         {
           "kind": "class",
@@ -16,34 +16,39 @@
               "name": "stringProp",
               "type": {
                 "text": "string | undefined"
-              },
-              "description": ""
+              }
             },
             {
               "kind": "field",
               "name": "booleanProp",
               "type": {
                 "text": "boolean | undefined"
-              },
-              "description": ""
+              }
             },
             {
               "kind": "field",
               "name": "numericProp",
               "type": {
                 "text": "number | undefined"
-              },
-              "description": ""
+              }
             },
             {
               "kind": "field",
               "name": "objectProp",
               "type": {
                 "text": "object | undefined"
-              },
-              "description": ""
+              }
             }
           ],
+          "events": [
+            {
+              "name": "stringchange"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "package": "@chialab/dna"
+          },
           "tagName": "test-element",
           "customElement": true
         },
@@ -57,34 +62,38 @@
               "name": "stringProp",
               "type": {
                 "text": "string | undefined"
-              },
-              "description": ""
+              }
             },
             {
               "kind": "field",
               "name": "booleanProp",
               "type": {
                 "text": "boolean | undefined"
-              },
-              "description": ""
+              }
             },
             {
               "kind": "field",
               "name": "numericProp",
               "type": {
                 "text": "number | undefined"
-              },
-              "description": ""
+              }
             },
             {
               "kind": "field",
               "name": "objectProp",
               "type": {
                 "text": "object | undefined"
-              },
-              "description": ""
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "stringchange"
             }
           ],
+          "superclass": {
+            "module": "index.ts"
+          },
           "tagName": "test-link",
           "customElement": true
         }
@@ -95,23 +104,23 @@
           "name": "TestElement",
           "declaration": {
             "name": "TestElement",
-            "module": "src/index.ts"
+            "module": "index.ts"
           }
         },
         {
           "kind": "custom-element-definition",
           "name": "test-element",
           "declaration": {
             "name": "TestElement",
-            "module": "src/index.ts"
+            "module": "index.ts"
           }
         },
         {
           "kind": "js",
           "name": "TestLink",
           "declaration": {
             "name": "TestLink",
-            "module": "src/index.ts"
+            "module": "index.ts"
           }
         },
         {
@@ -120,7 +129,7 @@
           "extend": "a",
           "declaration": {
             "name": "TestLink",
-            "module": "src/index.ts"
+            "module": "index.ts"
           }
         }
       ]

test/svelte/element.test.ts

@@ -1,4 +1,5 @@
-import { afterEach, describe, expect, test } from 'vitest';
+import { tick } from 'svelte';
+import { afterEach, describe, expect, test, vi } from 'vitest';
 import TestElement from './components/TestElement.svelte';
 
 let host: HTMLElement;
@@ -9,6 +10,7 @@ describe('Element', () => {
     });
 
     test('mount component', async () => {
+        const spy = vi.fn();
         host = document.createElement('div');
         host.setAttribute('id', 'host');
         document.body.appendChild(host);
@@ -21,7 +23,14 @@ describe('Element', () => {
                 objectProp: { test: true },
             },
         });
+        instance.$on('stringchange', spy);
         expect(instance).toBeTruthy();
         expect(host.innerHTML).toMatchSnapshot();
+        expect(spy).not.toHaveBeenCalled();
+        instance.$$set({
+            stringProp: 'changed',
+        });
+        await tick();
+        expect(spy).toHaveBeenCalled();
     });
 });

test/svelte/index.ts

@@ -1,20 +1,20 @@
-import { Component, customElement, HTML, html } from '@chialab/dna';
+import { Component, customElement, HTML, html, property } from '@chialab/dna';
 
+/**
+ * @fires stringchange
+ */
 @customElement('test-element')
 export class TestElement extends Component {
-    static get properties() {
-        return {
-            stringProp: String,
-            booleanProp: Boolean,
-            numericProp: Number,
-            objectProp: Object,
-        };
-    }
-
-    declare stringProp?: string;
-    declare booleanProp?: boolean;
-    declare numericProp?: number;
-    declare objectProp?: object;
+    @property({
+        event: 'stringchange',
+    })
+    stringProp?: string;
+    @property()
+    booleanProp?: boolean;
+    @property()
+    numericProp?: number;
+    @property()
+    objectProp?: object;
 
     render() {
         return html`
@@ -26,23 +26,23 @@ export class TestElement extends Component {
     }
 }
 
+/**
+ * @fires stringchange
+ */
 @customElement('test-link', {
     extends: 'a',
 })
 export class TestLink extends HTML.Anchor {
-    static get properties() {
-        return {
-            stringProp: String,
-            booleanProp: Boolean,
-            numericProp: Number,
-            objectProp: Object,
-        };
-    }
-
-    declare stringProp?: string;
-    declare booleanProp?: boolean;
-    declare numericProp?: number;
-    declare objectProp?: object;
+    @property({
+        event: 'stringchange',
+    })
+    stringProp?: string;
+    @property()
+    booleanProp?: boolean;
+    @property()
+    numericProp?: number;
+    @property()
+    objectProp?: object;
 
     render() {
         return html`

test/svelte/link.test.ts

@@ -1,4 +1,5 @@
-import { afterEach, describe, expect, test } from 'vitest';
+import { tick } from 'svelte';
+import { afterEach, describe, expect, test, vi } from 'vitest';
 import TestLink from './components/TestLink.svelte';
 
 let host: HTMLElement;
@@ -9,6 +10,7 @@ describe('Link', () => {
     });
 
     test('mount component', async () => {
+        const spy = vi.fn();
         host = document.createElement('div');
         host.setAttribute('id', 'host');
         document.body.appendChild(host);
@@ -21,7 +23,14 @@ describe('Link', () => {
                 objectProp: { test: true },
             },
         });
+        instance.$on('stringchange', spy);
         expect(instance).toBeTruthy();
         expect(host.innerHTML).toMatchSnapshot();
+        expect(spy).not.toHaveBeenCalled();
+        instance.$$set({
+            stringProp: 'changed',
+        });
+        await tick();
+        expect(spy).toHaveBeenCalled();
     });
 });

test/svelte/package.json

@@ -5,12 +5,16 @@
   "private": true,
   "main": "index.ts",
   "scripts": {
-    "prepare": "rimraf 'components' && plasma --framework svelte --outdir components -y",
+    "manifest": "custom-elements-manifest analyze --config cem.config.js",
+    "generate": "plasma --framework svelte --outdir components -y",
+    "prepare": "rimraf 'components' && yarn manifest && yarn generate",
     "test": "vitest"
   },
   "devDependencies": {
     "@chialab/dna": "^4.0.0-alpha.0",
-    "@chialab/plasma": "file:./../..",
+    "@chialab/manifest-analyzer-dna-plugin": "^3.0.1-alpha.0",
+    "@chialab/plasma": "file:../..",
+    "@custom-elements-manifest/analyzer": "^0.9.0",
     "@sveltejs/vite-plugin-svelte": "^3.0.1",
     "jsdom": "^23.0.0",
     "rimraf": "^5.0.5",