chore: update onClick for button and link with mitosis plugin (#4392)

Author: nmerget

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]
 };

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
 	}
 };

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,

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;
+		}
+	}
+});

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]
 };

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]
 };

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]
 };

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>

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>