From 6b04c3fe475286694e3ab159ec15056294f3061d Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Wed, 18 Jun 2025 10:15:57 +0200
Subject: [PATCH] chore: update onClick for button and link with mitosis plugin

---
 packages/components/configs/angular/index.cjs |  9 +++--
 .../configs/angular/mitosis.config.cjs        |  9 ++---
 .../components/configs/mitosis.config.cjs     |  3 ++
 .../components/configs/plugins/on-click.cjs   | 33 +++++++++++++++++++
 packages/components/configs/react/index.cjs   |  4 ++-
 packages/components/configs/stencil/index.cjs |  9 +++--
 packages/components/configs/vue/index.cjs     |  6 ++--
 .../src/components/button/button.lite.tsx     | 19 +----------
 .../src/components/link/link.lite.tsx         | 15 +--------
 9 files changed, 61 insertions(+), 46 deletions(-)
 create mode 100644 packages/components/configs/plugins/on-click.cjs

diff --git a/packages/components/configs/angular/index.cjs b/packages/components/configs/angular/index.cjs
index 6516e9301d10..ef94f53c35e0 100644
--- a/packages/components/configs/angular/index.cjs
+++ b/packages/components/configs/angular/index.cjs
@@ -1,7 +1,12 @@
+const onClickPlugin = require('../plugins/on-click.cjs');
+
+/**
+ * @type {import('@builder.io/mitosis').ToAngularOptions}
+ */
 module.exports = {
-	typescript: true,
 	attributePassing: {
 		customRef: '_ref'
 	},
-	api: 'signals'
+	api: 'signals',
+	plugins: [onClickPlugin]
 };
diff --git a/packages/components/configs/angular/mitosis.config.cjs b/packages/components/configs/angular/mitosis.config.cjs
index 1a6b18bec9a3..ac914db8a382 100644
--- a/packages/components/configs/angular/mitosis.config.cjs
+++ b/packages/components/configs/angular/mitosis.config.cjs
@@ -1,3 +1,4 @@
+const angular = require('./index.cjs');
 /**
  * @type {import('@builder.io/mitosis').MitosisConfig}
  */
@@ -6,12 +7,6 @@ module.exports = {
 	targets: ['angular'],
 	dest: '../../output/tmp',
 	options: {
-		angular: {
-			experimental: {
-				outputs: (_json, propName) => {
-					return propName === 'click' ? 'click' : undefined;
-				}
-			}
-		}
+		angular
 	}
 };
diff --git a/packages/components/configs/mitosis.config.cjs b/packages/components/configs/mitosis.config.cjs
index 169449862dcf..76263b2e2c81 100644
--- a/packages/components/configs/mitosis.config.cjs
+++ b/packages/components/configs/mitosis.config.cjs
@@ -10,6 +10,9 @@ module.exports = {
 	files: 'src/**',
 	targets: ['angular', 'vue', 'react', 'stencil'],
 	dest: '../../output',
+	commonOptions: {
+		typescript: true
+	},
 	options: {
 		react,
 		angular,
diff --git a/packages/components/configs/plugins/on-click.cjs b/packages/components/configs/plugins/on-click.cjs
new file mode 100644
index 000000000000..513bba9ac9c6
--- /dev/null
+++ b/packages/components/configs/plugins/on-click.cjs
@@ -0,0 +1,33 @@
+/**
+ * @type {import('@builder.io/mitosis').MitosisPlugin}
+ */
+module.exports = () => ({
+	json: {
+		pre: (json) => {
+			console.log(json.name);
+			if (['DBButton', 'DBLink'].includes(json.name)) {
+				if (json.pluginData.target === 'vue') {
+					console.log(json.state);
+					json.children[0].bindings.onClick = {
+						code: 'state.handleClick(event)',
+						bindingType: 'expression',
+						type: 'single'
+					};
+
+					json.state = {
+						...json.state,
+						handleClick: {
+							code: `function handleClick(event){if (props.onClick){props.onClick(event);}}`,
+							type: 'method'
+						}
+					};
+				} else {
+					delete json.props.onClick;
+					delete json.props.click;
+				}
+			}
+
+			return json;
+		}
+	}
+});
diff --git a/packages/components/configs/react/index.cjs b/packages/components/configs/react/index.cjs
index 73f69d4498cb..4869579d4538 100644
--- a/packages/components/configs/react/index.cjs
+++ b/packages/components/configs/react/index.cjs
@@ -1,6 +1,8 @@
+const onClickPlugin = require('../plugins/on-click.cjs');
+
 /**
  * @type {import('@builder.io/mitosis').ToReactOptions}
  */
 module.exports = {
-	typescript: true
+	plugins: [onClickPlugin]
 };
diff --git a/packages/components/configs/stencil/index.cjs b/packages/components/configs/stencil/index.cjs
index 887ae5e87ba8..e4a2a042a5c4 100644
--- a/packages/components/configs/stencil/index.cjs
+++ b/packages/components/configs/stencil/index.cjs
@@ -1,7 +1,12 @@
+const onClickPlugin = require('../plugins/on-click.cjs');
+
+/**
+ * @type {import('@builder.io/mitosis').ToStencilOptions}
+ */
 module.exports = {
-	typescript: true,
 	attributePassing: {
 		enabled: true,
 		customRef: '_ref'
-	}
+	},
+	plugins: [onClickPlugin]
 };
diff --git a/packages/components/configs/vue/index.cjs b/packages/components/configs/vue/index.cjs
index d419028226ff..3f6ebdbc02ad 100644
--- a/packages/components/configs/vue/index.cjs
+++ b/packages/components/configs/vue/index.cjs
@@ -1,7 +1,9 @@
+const onClickPlugin = require('../plugins/on-click.cjs');
+
 /**
  * @type {import('@builder.io/mitosis').ToVueOptions}
  */
 module.exports = {
-	typescript: true,
-	api: 'composition'
+	api: 'composition',
+	plugins: [onClickPlugin]
 };
diff --git a/packages/components/src/components/button/button.lite.tsx b/packages/components/src/components/button/button.lite.tsx
index ffa5a3a483b4..017fec6ded50 100644
--- a/packages/components/src/components/button/button.lite.tsx
+++ b/packages/components/src/components/button/button.lite.tsx
@@ -20,16 +20,6 @@ useDefaultProps<DBButtonProps>({});
 
 export default function DBButton(props: DBButtonProps) {
 	const _ref = useRef<HTMLButtonElement | any>(null);
-	// jscpd:ignore-start
-	const state = useStore<DBButtonState>({
-		handleClick: (event: ClickEvent<HTMLButtonElement>) => {
-			if (props.onClick) {
-				props.onClick(event);
-			}
-		}
-	});
-
-	// jscpd:ignore-end
 
 	return (
 		<button
@@ -51,14 +41,7 @@ export default function DBButton(props: DBButtonProps) {
 			value={props.value}
 			aria-describedby={props.describedbyid}
 			aria-expanded={props.ariaexpanded}
-			aria-pressed={props.ariapressed}
-			{...useTarget({
-				vue: {
-					onClick: (event: ClickEvent<HTMLButtonElement>) =>
-						state.handleClick(event)
-				},
-				default: {}
-			})}>
+			aria-pressed={props.ariapressed}>
 			<Show when={props.text} else={props.children}>
 				{props.text}
 			</Show>
diff --git a/packages/components/src/components/link/link.lite.tsx b/packages/components/src/components/link/link.lite.tsx
index 8120d19fca0d..c86ee88c0a02 100644
--- a/packages/components/src/components/link/link.lite.tsx
+++ b/packages/components/src/components/link/link.lite.tsx
@@ -15,16 +15,6 @@ useDefaultProps<DBLinkProps>({});
 
 export default function DBLink(props: DBLinkProps) {
 	const _ref = useRef<HTMLAnchorElement | any>(null);
-	// jscpd:ignore-start
-	const state = useStore<DBLinkState>({
-		handleClick: (event: ClickEvent<HTMLAnchorElement>) => {
-			if (props.onClick) {
-				props.onClick(event);
-			}
-		}
-	});
-
-	// jscpd:ignore-end
 
 	return (
 		<a
@@ -44,10 +34,7 @@ export default function DBLink(props: DBLinkProps) {
 			data-size={props.size}
 			data-hide-icon-after={getHideProp(props.showIcon ?? true)}
 			data-variant={props.variant}
-			data-content={props.content || 'internal'}
-			onClick={(event: ClickEvent<HTMLAnchorElement>) =>
-				state.handleClick(event)
-			}>
+			data-content={props.content || 'internal'}>
 			<Show when={props.text} else={props.children}>
 				{props.text}
 			</Show>