Fix: svelte event handlers

.changeset/weak-fishes-behave.md

@@ -0,0 +1,6 @@
+---
+'@builder.io/mitosis': patch
+'@builder.io/mitosis-cli': patch
+---
+
+Fix: Qwik methods using computed variables

packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap

@@ -1088,7 +1088,9 @@ exports[`Svelte > jsx > Javascript Test > InputParent 1`] = `
 <FormInputComponent
   name=\\"kingzez\\"
   type=\\"text\\"
-  onChange={(value) => handleChange(value)}
+  onChange={(value) => {
+    handleChange(value);
+  }}
 />"
 `;
 
@@ -3978,7 +3980,9 @@ exports[`Svelte > jsx > Typescript Test > InputParent 1`] = `
 <FormInputComponent
   name=\\"kingzez\\"
   type=\\"text\\"
-  onChange={(value) => handleChange(value)}
+  onChange={(value) => {
+    handleChange(value);
+  }}
 />"
 `;
 

packages/core/src/generators/svelte/blocks.ts

@@ -210,38 +210,31 @@ type BlockToSvelte<T extends BaseNode = MitosisNode> = (props: {
 }) => string;
 
 const stringifyBinding =
-  (node: MitosisNode, options: ToSvelteOptions) =>
+  (node: MitosisNode, options: ToSvelteOptions, tagName: string) =>
   ([key, binding]: [string, Binding | undefined]) => {
     if (key === 'innerHTML' || !binding) {
       return '';
     }
 
     const { code, arguments: cusArgs = ['event'], type } = binding;
-    const isValidHtmlTag = VALID_HTML_TAGS.includes(node.name) || node.name === 'svelte:element';
+    const isValidHtmlTag = VALID_HTML_TAGS.includes(tagName) || tagName === 'svelte:element';
 
     if (type === 'spread') {
       const spreadValue = key === 'props' ? '$$props' : code;
       return ` {...${spreadValue}} `;
-    } else if (key.startsWith('on') && isValidHtmlTag) {
+    } else if (key.startsWith('on')) {
       // handle html native on[event] props
       const event = key.replace('on', '').toLowerCase();
       // TODO: handle quotes in event handler values
 
       const valueWithoutBlock = removeSurroundingBlock(code);
 
-      if (valueWithoutBlock === key) {
-        return ` on:${event}={${valueWithoutBlock}} `;
-      } else {
-        return ` on:${event}="{${cusArgs.join(',')} => {${valueWithoutBlock}}}" `;
-      }
-    } else if (key.startsWith('on')) {
-      // handle on[custom event] props
-      const valueWithoutBlock = removeSurroundingBlock(code);
+      const keyToUse = isValidHtmlTag ? `on:${event}` : key;
 
       if (valueWithoutBlock === key) {
-        return ` ${key}={${valueWithoutBlock}} `;
+        return ` ${keyToUse}={${valueWithoutBlock}} `;
       } else {
-        return ` ${key}={(${cusArgs.join(',')}) => ${valueWithoutBlock}}`;
+        return ` ${keyToUse}="{${cusArgs.join(',')} => {${valueWithoutBlock}}}" `;
       }
     } else if (key === 'ref') {
       return ` bind:this={${code}} `;
@@ -297,7 +290,7 @@ export const blockToSvelte: BlockToSvelte = ({ json, options, parentComponent })
   }
 
   const stringifiedBindings = Object.entries(json.bindings)
-    .map(stringifyBinding(json, options))
+    .map(stringifyBinding(json, options, tagName))
     .join('');
 
   str += stringifiedBindings;