From 9948ebd541715fe4e17ab9695554f514af640ba1 Mon Sep 17 00:00:00 2001 From: michaelmkraus Date: Wed, 11 Jun 2025 13:35:40 +0200 Subject: [PATCH 1/8] fix(button): prevent duplicate click events by stopping propagation --- packages/components/src/components/button/button.lite.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/src/components/button/button.lite.tsx b/packages/components/src/components/button/button.lite.tsx index 73b33c3a9228..06c714940615 100644 --- a/packages/components/src/components/button/button.lite.tsx +++ b/packages/components/src/components/button/button.lite.tsx @@ -23,6 +23,7 @@ export default function DBButton(props: DBButtonProps) { const state = useStore({ handleClick: (event: ClickEvent) => { if (props.onClick) { + event.stopPropagation(); props.onClick(event); } } From a5bbf77b038bc73a90e14ea01b47b5e3381a9a86 Mon Sep 17 00:00:00 2001 From: michaelmkraus Date: Wed, 11 Jun 2025 13:46:07 +0200 Subject: [PATCH 2/8] fix(button): prevent duplicate click events by stopping propagation --- packages/components/src/components/button/button.lite.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/components/button/button.lite.tsx b/packages/components/src/components/button/button.lite.tsx index 06c714940615..399e9558fa11 100644 --- a/packages/components/src/components/button/button.lite.tsx +++ b/packages/components/src/components/button/button.lite.tsx @@ -22,8 +22,8 @@ export default function DBButton(props: DBButtonProps) { // jscpd:ignore-start const state = useStore({ handleClick: (event: ClickEvent) => { + event.stopPropagation(); if (props.onClick) { - event.stopPropagation(); props.onClick(event); } } From 6308cae3f80afc177550ed53ef744b4a288423ed Mon Sep 17 00:00:00 2001 From: michaelmkraus Date: Wed, 11 Jun 2025 15:52:21 +0200 Subject: [PATCH 3/8] fix(button): prevent duplicate click events across frameworks while preserving native behavior --- .../components/configs/angular/mitosis.config.cjs | 9 +++++++-- .../src/components/button/button.lite.tsx | 14 +++++++++----- 2 files changed, 16 insertions(+), 7 deletions(-) diff --git a/packages/components/configs/angular/mitosis.config.cjs b/packages/components/configs/angular/mitosis.config.cjs index ac914db8a382..1a6b18bec9a3 100644 --- a/packages/components/configs/angular/mitosis.config.cjs +++ b/packages/components/configs/angular/mitosis.config.cjs @@ -1,4 +1,3 @@ -const angular = require('./index.cjs'); /** * @type {import('@builder.io/mitosis').MitosisConfig} */ @@ -7,6 +6,12 @@ module.exports = { targets: ['angular'], dest: '../../output/tmp', options: { - angular + angular: { + experimental: { + outputs: (_json, propName) => { + return propName === 'click' ? 'click' : undefined; + } + } + } } }; diff --git a/packages/components/src/components/button/button.lite.tsx b/packages/components/src/components/button/button.lite.tsx index 399e9558fa11..ffa5a3a483b4 100644 --- a/packages/components/src/components/button/button.lite.tsx +++ b/packages/components/src/components/button/button.lite.tsx @@ -3,7 +3,8 @@ import { useDefaultProps, useMetadata, useRef, - useStore + useStore, + useTarget } from '@builder.io/mitosis'; import type { DBButtonProps, DBButtonState } from './model'; import { cls, getBoolean, getBooleanAsString, getHideProp } from '../../utils'; @@ -22,7 +23,6 @@ export default function DBButton(props: DBButtonProps) { // jscpd:ignore-start const state = useStore({ handleClick: (event: ClickEvent) => { - event.stopPropagation(); if (props.onClick) { props.onClick(event); } @@ -52,9 +52,13 @@ export default function DBButton(props: DBButtonProps) { aria-describedby={props.describedbyid} aria-expanded={props.ariaexpanded} aria-pressed={props.ariapressed} - onClick={(event: ClickEvent) => - state.handleClick(event) - }> + {...useTarget({ + vue: { + onClick: (event: ClickEvent) => + state.handleClick(event) + }, + default: {} + })}> {props.text} From 23c91e404a0b8345e3e7316c1b455574269cc929 Mon Sep 17 00:00:00 2001 From: Nicolas Merget <104347736+nmerget@users.noreply.github.com> Date: Wed, 18 Jun 2025 14:19:06 +0200 Subject: [PATCH 4/8] chore: update onClick for button and link with mitosis plugin (#4392) --- 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({}); export default function DBButton(props: DBButtonProps) { const _ref = useRef(null); - // jscpd:ignore-start - const state = useStore({ - handleClick: (event: ClickEvent) => { - if (props.onClick) { - props.onClick(event); - } - } - }); - - // jscpd:ignore-end return (