diff --git a/.changeset/two-crabs-approve.md b/.changeset/two-crabs-approve.md new file mode 100644 index 0000000000..17a440193e --- /dev/null +++ b/.changeset/two-crabs-approve.md @@ -0,0 +1,5 @@ +--- +'@builder.io/mitosis': patch +--- + +[Angular, Lit, Stencil, HTML] fix: remove mapping onChange to input event diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap index 196256602d..1a8c2cc408 100644 --- a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap @@ -1806,6 +1806,32 @@ exports[`Alpine.js > jsx > Javascript Test > defaultValsWithTypes 1`] = ` " `; +exports[`Alpine.js > jsx > Javascript Test > eventInputAndChange 1`] = ` +" +
+ + + Hello! I can run in React, Vue, Solid, or Liquid! +
+ +" +`; + exports[`Alpine.js > jsx > Javascript Test > expressionState 1`] = ` "
+" +`; + exports[`Alpine.js > jsx > Typescript Test > expressionState 1`] = ` "
+" +`; + exports[`Html > jsx > Javascript Test > expressionState 1`] = ` "
@@ -7701,8 +7769,8 @@ exports[`Html > jsx > Typescript Test > AdvancedRef 1`] = ` el.removeEventListener(\\"blur\\", onInput1Blur); el.addEventListener(\\"blur\\", onInput1Blur); - el.removeEventListener(\\"input\\", onInput1Input); - el.addEventListener(\\"input\\", onInput1Input); + el.removeEventListener(\\"change\\", onInput1Change); + el.addEventListener(\\"change\\", onInput1Change); }); document.querySelectorAll(\\"[data-el='div-1']\\").forEach((el) => { @@ -7721,8 +7789,8 @@ exports[`Html > jsx > Typescript Test > AdvancedRef 1`] = ` state.onBlur(); } - // Event handler for 'input' event on input-1 - function onInput1Input(event) { + // Event handler for 'change' event on input-1 + function onInput1Change(event) { state.name = event.target.value; update(); } @@ -7811,8 +7879,8 @@ exports[`Html > jsx > Typescript Test > Basic 1`] = ` document.querySelectorAll(\\"[data-el='input-1']\\").forEach((el) => { el.value = DEFAULT_VALUES.name || state.name; - el.removeEventListener(\\"input\\", onInput1Input); - el.addEventListener(\\"input\\", onInput1Input); + el.removeEventListener(\\"change\\", onInput1Change); + el.addEventListener(\\"change\\", onInput1Change); }); destroyAnyNodes(); @@ -7820,8 +7888,8 @@ exports[`Html > jsx > Typescript Test > Basic 1`] = ` pendingUpdate = false; } - // Event handler for 'input' event on input-1 - function onInput1Input(myEvent) { + // Event handler for 'change' event on input-1 + function onInput1Change(myEvent) { state.name = myEvent.target.value; update(); } @@ -7884,8 +7952,8 @@ exports[`Html > jsx > Typescript Test > Basic 2`] = ` document.querySelectorAll(\\"[data-el='input-1']\\").forEach((el) => { el.value = state.name; - el.removeEventListener(\\"input\\", onInput1Input); - el.addEventListener(\\"input\\", onInput1Input); + el.removeEventListener(\\"change\\", onInput1Change); + el.addEventListener(\\"change\\", onInput1Change); }); document.querySelectorAll(\\"[data-el='div-1']\\").forEach((el) => { @@ -7898,8 +7966,8 @@ exports[`Html > jsx > Typescript Test > Basic 2`] = ` pendingUpdate = false; } - // Event handler for 'input' event on input-1 - function onInput1Input(event) { + // Event handler for 'change' event on input-1 + function onInput1Change(event) { const person = getScope(event.currentTarget, \\"person\\"); state.name = event.target.value + \\" and \\" + person; @@ -8043,8 +8111,8 @@ exports[`Html > jsx > Typescript Test > Basic Context 1`] = ` }); document.querySelectorAll(\\"[data-el='input-1']\\").forEach((el) => { - el.removeEventListener(\\"input\\", onInput1Input); - el.addEventListener(\\"input\\", onInput1Input); + el.removeEventListener(\\"change\\", onInput1Change); + el.addEventListener(\\"change\\", onInput1Change); }); destroyAnyNodes(); @@ -8052,8 +8120,8 @@ exports[`Html > jsx > Typescript Test > Basic Context 1`] = ` pendingUpdate = false; } - // Event handler for 'input' event on input-1 - function onInput1Input(event) { + // Event handler for 'change' event on input-1 + function onInput1Change(event) { state.onChange; } @@ -8461,8 +8529,8 @@ exports[`Html > jsx > Typescript Test > BasicFor 1`] = ` document.querySelectorAll(\\"[data-el='input-1']\\").forEach((el) => { el.value = state.name; - el.removeEventListener(\\"input\\", onInput1Input); - el.addEventListener(\\"input\\", onInput1Input); + el.removeEventListener(\\"change\\", onInput1Change); + el.addEventListener(\\"change\\", onInput1Change); }); document.querySelectorAll(\\"[data-el='div-1']\\").forEach((el) => { @@ -8475,8 +8543,8 @@ exports[`Html > jsx > Typescript Test > BasicFor 1`] = ` pendingUpdate = false; } - // Event handler for 'input' event on input-1 - function onInput1Input(event) { + // Event handler for 'change' event on input-1 + function onInput1Change(event) { const person = getScope(event.currentTarget, \\"person\\"); state.name = event.target.value + \\" and \\" + person; @@ -8631,8 +8699,8 @@ exports[`Html > jsx > Typescript Test > BasicRef 1`] = ` el.removeEventListener(\\"blur\\", onInput1Blur); el.addEventListener(\\"blur\\", onInput1Blur); - el.removeEventListener(\\"input\\", onInput1Input); - el.addEventListener(\\"input\\", onInput1Input); + el.removeEventListener(\\"change\\", onInput1Change); + el.addEventListener(\\"change\\", onInput1Change); }); document.querySelectorAll(\\"[data-el='div-1']\\").forEach((el) => { @@ -8649,8 +8717,8 @@ exports[`Html > jsx > Typescript Test > BasicRef 1`] = ` state.onBlur(); } - // Event handler for 'input' event on input-1 - function onInput1Input(event) { + // Event handler for 'change' event on input-1 + function onInput1Change(event) { state.name = event.target.value; update(); } @@ -9807,8 +9875,8 @@ exports[`Html > jsx > Typescript Test > Input 1`] = ` el.setAttribute(\\"required\\", props.required); - el.removeEventListener(\\"input\\", onInput1Input); - el.addEventListener(\\"input\\", onInput1Input); + el.removeEventListener(\\"change\\", onInput1Change); + el.addEventListener(\\"change\\", onInput1Change); }); destroyAnyNodes(); @@ -9816,8 +9884,8 @@ exports[`Html > jsx > Typescript Test > Input 1`] = ` pendingUpdate = false; } - // Event handler for 'input' event on input-1 - function onInput1Input(event) { + // Event handler for 'change' event on input-1 + function onInput1Change(event) { props.onChange?.(event.target.value); } @@ -11134,8 +11202,8 @@ exports[`Html > jsx > Typescript Test > basicForwardRef 1`] = ` document.querySelectorAll(\\"[data-el='input-1']\\").forEach((el) => { el.value = state.name; - el.removeEventListener(\\"input\\", onInput1Input); - el.addEventListener(\\"input\\", onInput1Input); + el.removeEventListener(\\"change\\", onInput1Change); + el.addEventListener(\\"change\\", onInput1Change); }); destroyAnyNodes(); @@ -11143,8 +11211,8 @@ exports[`Html > jsx > Typescript Test > basicForwardRef 1`] = ` pendingUpdate = false; } - // Event handler for 'input' event on input-1 - function onInput1Input(event) { + // Event handler for 'change' event on input-1 + function onInput1Change(event) { state.name = event.target.value; update(); } @@ -11196,8 +11264,8 @@ exports[`Html > jsx > Typescript Test > basicForwardRefMetadata 1`] = ` document.querySelectorAll(\\"[data-el='input-1']\\").forEach((el) => { el.value = state.name; - el.removeEventListener(\\"input\\", onInput1Input); - el.addEventListener(\\"input\\", onInput1Input); + el.removeEventListener(\\"change\\", onInput1Change); + el.addEventListener(\\"change\\", onInput1Change); }); destroyAnyNodes(); @@ -11205,8 +11273,8 @@ exports[`Html > jsx > Typescript Test > basicForwardRefMetadata 1`] = ` pendingUpdate = false; } - // Event handler for 'input' event on input-1 - function onInput1Input(event) { + // Event handler for 'change' event on input-1 + function onInput1Change(event) { state.name = event.target.value; update(); } @@ -11842,6 +11910,74 @@ exports[`Html > jsx > Typescript Test > defaultValsWithTypes 1`] = ` " `; +exports[`Html > jsx > Typescript Test > eventInputAndChange 1`] = ` +"
+ + + Hello! I can run in React, Vue, Solid, or Liquid! +
+ + +" +`; + exports[`Html > jsx > Typescript Test > expressionState 1`] = ` "
@@ -14685,8 +14821,8 @@ exports[`Html > svelte > Javascript Test > basic 1`] = ` pendingUpdate = true; document.querySelectorAll(\\"[data-el='input-1']\\").forEach((el) => { - el.removeEventListener(\\"input\\", onInput1Input); - el.addEventListener(\\"input\\", onInput1Input); + el.removeEventListener(\\"change\\", onInput1Change); + el.addEventListener(\\"change\\", onInput1Change); el.value = state.name; }); @@ -14696,8 +14832,8 @@ exports[`Html > svelte > Javascript Test > basic 1`] = ` pendingUpdate = false; } - // Event handler for 'input' event on input-1 - function onInput1Input(event) { + // Event handler for 'change' event on input-1 + function onInput1Change(event) { state.name = event.target.value; update(); } @@ -14790,50 +14926,50 @@ exports[`Html > svelte > Javascript Test > bindGroup 1`] = ` document.querySelectorAll(\\"[data-el='input-1']\\").forEach((el) => { el.setAttribute(\\"checked\\", state.tortilla === \\"Plain\\"); - el.removeEventListener(\\"input\\", onInput1Input); - el.addEventListener(\\"input\\", onInput1Input); + el.removeEventListener(\\"change\\", onInput1Change); + el.addEventListener(\\"change\\", onInput1Change); }); document.querySelectorAll(\\"[data-el='input-3']\\").forEach((el) => { el.setAttribute(\\"checked\\", state.tortilla === \\"Whole wheat\\"); - el.removeEventListener(\\"input\\", onInput3Input); - el.addEventListener(\\"input\\", onInput3Input); + el.removeEventListener(\\"change\\", onInput3Change); + el.addEventListener(\\"change\\", onInput3Change); }); document.querySelectorAll(\\"[data-el='input-5']\\").forEach((el) => { el.setAttribute(\\"checked\\", state.tortilla === \\"Spinach\\"); - el.removeEventListener(\\"input\\", onInput5Input); - el.addEventListener(\\"input\\", onInput5Input); + el.removeEventListener(\\"change\\", onInput5Change); + el.addEventListener(\\"change\\", onInput5Change); }); document.querySelectorAll(\\"[data-el='input-7']\\").forEach((el) => { el.setAttribute(\\"checked\\", state.fillings === \\"Rice\\"); - el.removeEventListener(\\"input\\", onInput7Input); - el.addEventListener(\\"input\\", onInput7Input); + el.removeEventListener(\\"change\\", onInput7Change); + el.addEventListener(\\"change\\", onInput7Change); }); document.querySelectorAll(\\"[data-el='input-9']\\").forEach((el) => { el.setAttribute(\\"checked\\", state.fillings === \\"Beans\\"); - el.removeEventListener(\\"input\\", onInput9Input); - el.addEventListener(\\"input\\", onInput9Input); + el.removeEventListener(\\"change\\", onInput9Change); + el.addEventListener(\\"change\\", onInput9Change); }); document.querySelectorAll(\\"[data-el='input-11']\\").forEach((el) => { el.setAttribute(\\"checked\\", state.fillings === \\"Cheese\\"); - el.removeEventListener(\\"input\\", onInput11Input); - el.addEventListener(\\"input\\", onInput11Input); + el.removeEventListener(\\"change\\", onInput11Change); + el.addEventListener(\\"change\\", onInput11Change); }); document.querySelectorAll(\\"[data-el='input-13']\\").forEach((el) => { el.setAttribute(\\"checked\\", state.fillings === \\"Guac (extra)\\"); - el.removeEventListener(\\"input\\", onInput13Input); - el.addEventListener(\\"input\\", onInput13Input); + el.removeEventListener(\\"change\\", onInput13Change); + el.addEventListener(\\"change\\", onInput13Change); }); document.querySelectorAll(\\"[data-el='div-1']\\").forEach((el) => { @@ -14849,44 +14985,44 @@ exports[`Html > svelte > Javascript Test > bindGroup 1`] = ` pendingUpdate = false; } - // Event handler for 'input' event on input-1 - function onInput1Input(event) { + // Event handler for 'change' event on input-1 + function onInput1Change(event) { state.tortilla = event.target.value; update(); } - // Event handler for 'input' event on input-3 - function onInput3Input(event) { + // Event handler for 'change' event on input-3 + function onInput3Change(event) { state.tortilla = event.target.value; update(); } - // Event handler for 'input' event on input-5 - function onInput5Input(event) { + // Event handler for 'change' event on input-5 + function onInput5Change(event) { state.tortilla = event.target.value; update(); } - // Event handler for 'input' event on input-7 - function onInput7Input(event) { + // Event handler for 'change' event on input-7 + function onInput7Change(event) { state.fillings = event.target.value; update(); } - // Event handler for 'input' event on input-9 - function onInput9Input(event) { + // Event handler for 'change' event on input-9 + function onInput9Change(event) { state.fillings = event.target.value; update(); } - // Event handler for 'input' event on input-11 - function onInput11Input(event) { + // Event handler for 'change' event on input-11 + function onInput11Change(event) { state.fillings = event.target.value; update(); } - // Event handler for 'input' event on input-13 - function onInput13Input(event) { + // Event handler for 'change' event on input-13 + function onInput13Change(event) { state.fillings = event.target.value; update(); } @@ -15539,15 +15675,15 @@ exports[`Html > svelte > Javascript Test > reactiveWithFn 1`] = ` pendingUpdate = true; document.querySelectorAll(\\"[data-el='input-1']\\").forEach((el) => { - el.removeEventListener(\\"input\\", onInput1Input); - el.addEventListener(\\"input\\", onInput1Input); + el.removeEventListener(\\"change\\", onInput1Change); + el.addEventListener(\\"change\\", onInput1Change); el.value = state.a; }); document.querySelectorAll(\\"[data-el='input-3']\\").forEach((el) => { - el.removeEventListener(\\"input\\", onInput3Input); - el.addEventListener(\\"input\\", onInput3Input); + el.removeEventListener(\\"change\\", onInput3Change); + el.addEventListener(\\"change\\", onInput3Change); el.value = state.b; }); @@ -15563,14 +15699,14 @@ exports[`Html > svelte > Javascript Test > reactiveWithFn 1`] = ` pendingUpdate = false; } - // Event handler for 'input' event on input-1 - function onInput1Input(event) { + // Event handler for 'change' event on input-1 + function onInput1Change(event) { state.a = event.target.value; update(); } - // Event handler for 'input' event on input-3 - function onInput3Input(event) { + // Event handler for 'change' event on input-3 + function onInput3Change(event) { state.b = event.target.value; update(); } @@ -15715,8 +15851,8 @@ exports[`Html > svelte > Typescript Test > basic 1`] = ` pendingUpdate = true; document.querySelectorAll(\\"[data-el='input-1']\\").forEach((el) => { - el.removeEventListener(\\"input\\", onInput1Input); - el.addEventListener(\\"input\\", onInput1Input); + el.removeEventListener(\\"change\\", onInput1Change); + el.addEventListener(\\"change\\", onInput1Change); el.value = state.name; }); @@ -15726,8 +15862,8 @@ exports[`Html > svelte > Typescript Test > basic 1`] = ` pendingUpdate = false; } - // Event handler for 'input' event on input-1 - function onInput1Input(event) { + // Event handler for 'change' event on input-1 + function onInput1Change(event) { state.name = event.target.value; update(); } @@ -15820,50 +15956,50 @@ exports[`Html > svelte > Typescript Test > bindGroup 1`] = ` document.querySelectorAll(\\"[data-el='input-1']\\").forEach((el) => { el.setAttribute(\\"checked\\", state.tortilla === \\"Plain\\"); - el.removeEventListener(\\"input\\", onInput1Input); - el.addEventListener(\\"input\\", onInput1Input); + el.removeEventListener(\\"change\\", onInput1Change); + el.addEventListener(\\"change\\", onInput1Change); }); document.querySelectorAll(\\"[data-el='input-3']\\").forEach((el) => { el.setAttribute(\\"checked\\", state.tortilla === \\"Whole wheat\\"); - el.removeEventListener(\\"input\\", onInput3Input); - el.addEventListener(\\"input\\", onInput3Input); + el.removeEventListener(\\"change\\", onInput3Change); + el.addEventListener(\\"change\\", onInput3Change); }); document.querySelectorAll(\\"[data-el='input-5']\\").forEach((el) => { el.setAttribute(\\"checked\\", state.tortilla === \\"Spinach\\"); - el.removeEventListener(\\"input\\", onInput5Input); - el.addEventListener(\\"input\\", onInput5Input); + el.removeEventListener(\\"change\\", onInput5Change); + el.addEventListener(\\"change\\", onInput5Change); }); document.querySelectorAll(\\"[data-el='input-7']\\").forEach((el) => { el.setAttribute(\\"checked\\", state.fillings === \\"Rice\\"); - el.removeEventListener(\\"input\\", onInput7Input); - el.addEventListener(\\"input\\", onInput7Input); + el.removeEventListener(\\"change\\", onInput7Change); + el.addEventListener(\\"change\\", onInput7Change); }); document.querySelectorAll(\\"[data-el='input-9']\\").forEach((el) => { el.setAttribute(\\"checked\\", state.fillings === \\"Beans\\"); - el.removeEventListener(\\"input\\", onInput9Input); - el.addEventListener(\\"input\\", onInput9Input); + el.removeEventListener(\\"change\\", onInput9Change); + el.addEventListener(\\"change\\", onInput9Change); }); document.querySelectorAll(\\"[data-el='input-11']\\").forEach((el) => { el.setAttribute(\\"checked\\", state.fillings === \\"Cheese\\"); - el.removeEventListener(\\"input\\", onInput11Input); - el.addEventListener(\\"input\\", onInput11Input); + el.removeEventListener(\\"change\\", onInput11Change); + el.addEventListener(\\"change\\", onInput11Change); }); document.querySelectorAll(\\"[data-el='input-13']\\").forEach((el) => { el.setAttribute(\\"checked\\", state.fillings === \\"Guac (extra)\\"); - el.removeEventListener(\\"input\\", onInput13Input); - el.addEventListener(\\"input\\", onInput13Input); + el.removeEventListener(\\"change\\", onInput13Change); + el.addEventListener(\\"change\\", onInput13Change); }); document.querySelectorAll(\\"[data-el='div-1']\\").forEach((el) => { @@ -15879,44 +16015,44 @@ exports[`Html > svelte > Typescript Test > bindGroup 1`] = ` pendingUpdate = false; } - // Event handler for 'input' event on input-1 - function onInput1Input(event) { + // Event handler for 'change' event on input-1 + function onInput1Change(event) { state.tortilla = event.target.value; update(); } - // Event handler for 'input' event on input-3 - function onInput3Input(event) { + // Event handler for 'change' event on input-3 + function onInput3Change(event) { state.tortilla = event.target.value; update(); } - // Event handler for 'input' event on input-5 - function onInput5Input(event) { + // Event handler for 'change' event on input-5 + function onInput5Change(event) { state.tortilla = event.target.value; update(); } - // Event handler for 'input' event on input-7 - function onInput7Input(event) { + // Event handler for 'change' event on input-7 + function onInput7Change(event) { state.fillings = event.target.value; update(); } - // Event handler for 'input' event on input-9 - function onInput9Input(event) { + // Event handler for 'change' event on input-9 + function onInput9Change(event) { state.fillings = event.target.value; update(); } - // Event handler for 'input' event on input-11 - function onInput11Input(event) { + // Event handler for 'change' event on input-11 + function onInput11Change(event) { state.fillings = event.target.value; update(); } - // Event handler for 'input' event on input-13 - function onInput13Input(event) { + // Event handler for 'change' event on input-13 + function onInput13Change(event) { state.fillings = event.target.value; update(); } @@ -16569,15 +16705,15 @@ exports[`Html > svelte > Typescript Test > reactiveWithFn 1`] = ` pendingUpdate = true; document.querySelectorAll(\\"[data-el='input-1']\\").forEach((el) => { - el.removeEventListener(\\"input\\", onInput1Input); - el.addEventListener(\\"input\\", onInput1Input); + el.removeEventListener(\\"change\\", onInput1Change); + el.addEventListener(\\"change\\", onInput1Change); el.value = state.a; }); document.querySelectorAll(\\"[data-el='input-3']\\").forEach((el) => { - el.removeEventListener(\\"input\\", onInput3Input); - el.addEventListener(\\"input\\", onInput3Input); + el.removeEventListener(\\"change\\", onInput3Change); + el.addEventListener(\\"change\\", onInput3Change); el.value = state.b; }); @@ -16593,14 +16729,14 @@ exports[`Html > svelte > Typescript Test > reactiveWithFn 1`] = ` pendingUpdate = false; } - // Event handler for 'input' event on input-1 - function onInput1Input(event) { + // Event handler for 'change' event on input-1 + function onInput1Change(event) { state.a = event.target.value; update(); } - // Event handler for 'input' event on input-3 - function onInput3Input(event) { + // Event handler for 'change' event on input-3 + function onInput3Change(event) { state.b = event.target.value; update(); } diff --git a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap index df9fe4cebf..bbb7313910 100644 --- a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap @@ -556,6 +556,20 @@ exports[`Liquid > jsx > Javascript Test > defaultValsWithTypes 1`] = ` " `; +exports[`Liquid > jsx > Javascript Test > eventInputAndChange 1`] = ` +"
+ + + Hello! I can run in React, Vue, Solid, or Liquid! +
+ +" +`; + exports[`Liquid > jsx > Javascript Test > expressionState 1`] = ` "
{{refToUse}}
" @@ -1497,6 +1511,20 @@ exports[`Liquid > jsx > Typescript Test > defaultValsWithTypes 1`] = ` " `; +exports[`Liquid > jsx > Typescript Test > eventInputAndChange 1`] = ` +"
+ + + Hello! I can run in React, Vue, Solid, or Liquid! +
+ +" +`; + exports[`Liquid > jsx > Typescript Test > expressionState 1`] = ` "
{{refToUse}}
" diff --git a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap index 446e9fe009..19d318a016 100644 --- a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap @@ -99,7 +99,7 @@ export default class MyBasicRefComponent extends LitElement { ? html\` this.onBlur()} - @input=\${(event) => (this.name = event.target.value)} /> + @change=\${(event) => (this.name = event.target.value)} /> (this.name = @@ -181,7 +181,7 @@ export default class MyBasicForShowComponent extends LitElement { (person, index) => html\`\${ person === this.name - ? html\` { + ? html\` { this.name = event.target.value + \\" and \\" + person; }} /> Hello \${person} ! I can run in Qwik, Web Component, React, Vue, Solid, or Liquid! \` @@ -227,7 +227,7 @@ export default class MyBasicComponent extends LitElement { \${ myService.method(\\"hello\\") + this.name } Hello! I can run in React, Vue, - Solid, or Liquid! this.onChange} /> + Solid, or Liquid! this.onChange} />
\`; @@ -447,7 +447,7 @@ export default class MyBasicForComponent extends LitElement {
\${this.names?.map( (person, index) => html\` { + > { this.name = event.target.value + \\" and \\" + person; }} /> Hello \${person} ! I can run in Qwik, Web Component, React, Vue, Solid, or Liquid! this.onBlur()} - @input=\${(event) => (this.name = event.target.value)} /> + @change=\${(event) => (this.name = event.target.value)} /> + (this.name = event.target.value)} />
@@ -2198,7 +2198,7 @@ export default class MyBasicForwardRefComponent extends LitElement { }
- + (this.name = event.target.value)} />
@@ -2592,6 +2592,38 @@ export default class ComponentWithTypes extends LitElement { " `; +exports[`Lit > jsx > Javascript Test > eventInputAndChange 1`] = ` +"import { LitElement, html, css } from \\"lit\\"; +import { customElement, property, state, query } from \\"lit/decorators.js\\"; + +@customElement(\\"event-input-and-change\\") +export default class EventInputAndChange extends LitElement { + createRenderRoot() { + return this; + } + + @state() name = \\"Steve\\"; + + render() { + return html\` + +
+ + (this.name = event.target.value)} + @change=\${(event) => + (this.name = event.target.value)} /> Hello! I can run in + React, Vue, Solid, or Liquid! +
+ + \`; + } +} +" +`; + exports[`Lit > jsx > Javascript Test > expressionState 1`] = ` "import { LitElement, html, css } from \\"lit\\"; import { customElement, property, state, query } from \\"lit/decorators.js\\"; @@ -4546,7 +4578,7 @@ export default class MyBasicRefComponent extends LitElement { ? html\` this.onBlur()} - @input=\${(event) => (this.name = event.target.value)} /> + @change=\${(event) => (this.name = event.target.value)} /> (this.name = @@ -4632,7 +4664,7 @@ export default class MyBasicForShowComponent extends LitElement { (person, index) => html\`\${ person === this.name - ? html\` { + ? html\` { this.name = event.target.value + \\" and \\" + person; }} /> Hello \${person} ! I can run in Qwik, Web Component, React, Vue, Solid, or Liquid! \` @@ -4678,7 +4710,7 @@ export default class MyBasicComponent extends LitElement { \${ myService.method(\\"hello\\") + this.name } Hello! I can run in React, Vue, - Solid, or Liquid! this.onChange} /> + Solid, or Liquid! this.onChange} />
\`; @@ -4908,7 +4940,7 @@ export default class MyBasicForComponent extends LitElement {
\${this.names?.map( (person, index) => html\` { + > { this.name = event.target.value + \\" and \\" + person; }} /> Hello \${person} ! I can run in Qwik, Web Component, React, Vue, Solid, or Liquid! this.onBlur()} - @input=\${(event) => (this.name = event.target.value)} /> + @change=\${(event) => (this.name = event.target.value)} /> + (this.name = event.target.value)} />
@@ -6917,7 +6949,7 @@ export default class MyBasicForwardRefComponent extends LitElement { }
- + (this.name = event.target.value)} />
@@ -7348,6 +7380,38 @@ export default class ComponentWithTypes extends LitElement { " `; +exports[`Lit > jsx > Typescript Test > eventInputAndChange 1`] = ` +"import { LitElement, html, css } from \\"lit\\"; +import { customElement, property, state, query } from \\"lit/decorators.js\\"; + +@customElement(\\"event-input-and-change\\") +export default class EventInputAndChange extends LitElement { + createRenderRoot() { + return this; + } + + @state() name = \\"Steve\\"; + + render() { + return html\` + +
+ + (this.name = event.target.value)} + @change=\${(event) => + (this.name = event.target.value)} /> Hello! I can run in + React, Vue, Solid, or Liquid! +
+ + \`; + } +} +" +`; + exports[`Lit > jsx > Typescript Test > expressionState 1`] = ` "import { LitElement, html, css } from \\"lit\\"; import { customElement, property, state, query } from \\"lit/decorators.js\\"; @@ -9329,10 +9393,10 @@ export default class MyComponent extends LitElement { return html\`
- (this.name = event.target.value)} .value=\${ - this.name - } - /> Hello! I can run in React, Vue, Solid, or Liquid! + (this.name = event.target.value)} + .value=\${ + this.name + } /> Hello! I can run in React, Vue, Solid, or Liquid!
\`; @@ -9377,21 +9441,21 @@ export default class MyComponent extends LitElement {
this.tortilla = event.target.value} /> this.tortilla = event.target.value} /> - this.tortilla = event.target.value} /> + @change=\${(event) => this.tortilla = event.target.value} /> this.tortilla = event.target.value} /> this.tortilla = event.target.value} />

this.fillings = event.target.value} /> this.fillings = event.target.value} /> this.fillings = event.target.value} /> this.fillings = event.target.value} /> this.fillings = event.target.value} /> this.fillings = event.target.value} /> this.fillings = event.target.value} /> + (extra)'} @change=\${(event) => this.fillings = event.target.value} />

Tortilla: \${this.tortilla}

Fillings: \${this.fillings}

@@ -9715,9 +9779,9 @@ export default class MyComponent extends LitElement { return html\`
- + (this.a = event.target.value)} - .value=\${this.a} /> + .value=\${this.a} /> (this.b = event.target.value)} .value=\${this.b} /> Result: \${this.result}
@@ -9824,10 +9888,10 @@ export default class MyComponent extends LitElement { return html\`
- (this.name = event.target.value)} .value=\${ - this.name - } - /> Hello! I can run in React, Vue, Solid, or Liquid! + (this.name = event.target.value)} + .value=\${ + this.name + } /> Hello! I can run in React, Vue, Solid, or Liquid!
\`; @@ -9872,21 +9936,21 @@ export default class MyComponent extends LitElement {
this.tortilla = event.target.value} /> this.tortilla = event.target.value} /> - this.tortilla = event.target.value} /> + @change=\${(event) => this.tortilla = event.target.value} /> this.tortilla = event.target.value} /> this.tortilla = event.target.value} />

this.fillings = event.target.value} /> this.fillings = event.target.value} /> this.fillings = event.target.value} /> this.fillings = event.target.value} /> this.fillings = event.target.value} /> this.fillings = event.target.value} /> this.fillings = event.target.value} /> + (extra)'} @change=\${(event) => this.fillings = event.target.value} />

Tortilla: \${this.tortilla}

Fillings: \${this.fillings}

@@ -10210,9 +10274,9 @@ export default class MyComponent extends LitElement { return html\`
- + (this.a = event.target.value)} - .value=\${this.a} /> + .value=\${this.a} /> (this.b = event.target.value)} .value=\${this.b} /> Result: \${this.result}
diff --git a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap index c75a649492..4386722c0a 100644 --- a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap @@ -1677,6 +1677,30 @@ class {}
Hello \${input.name || DEFAULT_VALUES.name}
" `; +exports[`Marko > jsx > Javascript Test > eventInputAndChange 1`] = ` +"class { + onCreate() { + this.state = { name: \\"Steve\\" }; + } +} + +style { + .input-4aba533e { + color: red; + } +} +
+ state.name = event.target.value) + on-input((event) => state.name = event.target.value) + /> + + Hello! I can run in React, Vue, Solid, or Liquid! +
" +`; + exports[`Marko > jsx > Javascript Test > expressionState 1`] = ` "class { onCreate(input) { @@ -4299,6 +4323,30 @@ class {}
Hello \${input.name || DEFAULT_VALUES.name}
" `; +exports[`Marko > jsx > Typescript Test > eventInputAndChange 1`] = ` +"class { + onCreate() { + this.state = { name: \\"Steve\\" }; + } +} + +style { + .input-4aba533e { + color: red; + } +} +
+ state.name = event.target.value) + on-input((event) => state.name = event.target.value) + /> + + Hello! I can run in React, Vue, Solid, or Liquid! +
" +`; + exports[`Marko > jsx > Typescript Test > expressionState 1`] = ` "class { onCreate(input) { diff --git a/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap b/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap index 4388c1fc99..d3d340ddf2 100644 --- a/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap @@ -1834,6 +1834,29 @@ export default function ComponentWithTypes(props) { " `; +exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > eventInputAndChange 1`] = ` +"import { useStore } from \\"@builder.io/mitosis\\"; + +export default function EventInputAndChange(props) { + const state = useStore({ name: \\"Steve\\" }); + + return [ +
+ (state.name = event.target.value)} + onChange={(event) => (state.name = event.target.value)} + /> + Hello! I can run in React, Vue, Solid, or Liquid! +
, + ]; +} +" +`; + exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > expressionState 1`] = ` "import { useStore } from \\"@builder.io/mitosis\\"; @@ -5052,6 +5075,29 @@ export default function ComponentWithTypes(props) { " `; +exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > eventInputAndChange 1`] = ` +"import { useStore } from \\"@builder.io/mitosis\\"; + +export default function EventInputAndChange(props) { + const state = useStore({ name: \\"Steve\\" }); + + return [ +
+ (state.name = event.target.value)} + onChange={(event) => (state.name = event.target.value)} + /> + Hello! I can run in React, Vue, Solid, or Liquid! +
, + ]; +} +" +`; + exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > expressionState 1`] = ` "import { useStore } from \\"@builder.io/mitosis\\"; @@ -8809,6 +8855,29 @@ export default function ComponentWithTypes(props) { " `; +exports[`Mitosis, format: legacy > jsx > Javascript Test > eventInputAndChange 1`] = ` +"import { useStore } from \\"@builder.io/mitosis\\"; + +export default function EventInputAndChange(props) { + const state = useStore({ name: \\"Steve\\" }); + + return ( +
+ (state.name = event.target.value)} + onChange={(event) => (state.name = event.target.value)} + /> + Hello! I can run in React, Vue, Solid, or Liquid! +
+ ); +} +" +`; + exports[`Mitosis, format: legacy > jsx > Javascript Test > expressionState 1`] = ` "import { useStore } from \\"@builder.io/mitosis\\"; @@ -12084,6 +12153,29 @@ export default function ComponentWithTypes(props) { " `; +exports[`Mitosis, format: legacy > jsx > Typescript Test > eventInputAndChange 1`] = ` +"import { useStore } from \\"@builder.io/mitosis\\"; + +export default function EventInputAndChange(props) { + const state = useStore({ name: \\"Steve\\" }); + + return ( +
+ (state.name = event.target.value)} + onChange={(event) => (state.name = event.target.value)} + /> + Hello! I can run in React, Vue, Solid, or Liquid! +
+ ); +} +" +`; + exports[`Mitosis, format: legacy > jsx > Typescript Test > expressionState 1`] = ` "import { useStore } from \\"@builder.io/mitosis\\"; @@ -16165,6 +16257,33 @@ export default ComponentWithTypes; " `; +exports[`Mitosis, format: react > jsx > Javascript Test > eventInputAndChange 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; +import { useState } from \\"react\\"; + +function EventInputAndChange(props) { + const [name, setName] = useState(() => \\"Steve\\"); + + return ( +
+ setName(event.target.value)} + onChange={(event) => setName(event.target.value)} + /> + Hello! I can run in React, Vue, Solid, or Liquid! +
+ ); +} + +export default EventInputAndChange; +" +`; + exports[`Mitosis, format: react > jsx > Javascript Test > expressionState 1`] = ` "\\"use client\\"; import * as React from \\"react\\"; @@ -19733,6 +19852,33 @@ export default ComponentWithTypes; " `; +exports[`Mitosis, format: react > jsx > Typescript Test > eventInputAndChange 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; +import { useState } from \\"react\\"; + +function EventInputAndChange(props) { + const [name, setName] = useState(() => \\"Steve\\"); + + return ( +
+ setName(event.target.value)} + onChange={(event) => setName(event.target.value)} + /> + Hello! I can run in React, Vue, Solid, or Liquid! +
+ ); +} + +export default EventInputAndChange; +" +`; + exports[`Mitosis, format: react > jsx > Typescript Test > expressionState 1`] = ` "\\"use client\\"; import * as React from \\"react\\"; diff --git a/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap b/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap index eb5a1ced5b..424d58cd78 100644 --- a/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap @@ -7170,6 +7170,97 @@ exports[`Parse JSX > Javascript > defaultValsWithTypes 1`] = ` } `; +exports[`Parse JSX > Javascript > eventInputAndChange 1`] = ` +{ + "@type": "@builder.io/mitosis/component", + "children": [ + { + "@type": "@builder.io/mitosis/node", + "bindings": {}, + "children": [ + { + "@type": "@builder.io/mitosis/node", + "bindings": { + "css": { + "bindingType": "expression", + "code": "{ + color: 'red' +}", + "type": "single", + }, + "onChange": { + "arguments": [ + "event", + ], + "bindingType": "function", + "code": "state.name = event.target.value", + "type": "single", + }, + "onInput": { + "arguments": [ + "event", + ], + "bindingType": "function", + "code": "state.name = event.target.value", + "type": "single", + }, + "value": { + "bindingType": "expression", + "code": "state.name", + "type": "single", + }, + }, + "children": [], + "meta": {}, + "name": "input", + "properties": {}, + "scope": {}, + }, + { + "@type": "@builder.io/mitosis/node", + "bindings": {}, + "children": [], + "meta": {}, + "name": "div", + "properties": { + "_text": " + Hello! I can run in React, Vue, Solid, or Liquid! + ", + }, + "scope": {}, + }, + ], + "meta": {}, + "name": "div", + "properties": {}, + "scope": {}, + }, + ], + "context": { + "get": {}, + "set": {}, + }, + "exports": {}, + "hooks": { + "onEvent": [], + "onMount": [], + }, + "imports": [], + "inputs": [], + "meta": {}, + "name": "EventInputAndChange", + "refs": {}, + "state": { + "name": { + "code": "'Steve'", + "propertyType": "normal", + "type": "property", + }, + }, + "subComponents": [], +} +`; + exports[`Parse JSX > Javascript > expressionState 1`] = ` { "@type": "@builder.io/mitosis/component", @@ -19893,6 +19984,97 @@ exports[`Parse JSX > Typescript > defaultValsWithTypes 1`] = ` } `; +exports[`Parse JSX > Typescript > eventInputAndChange 1`] = ` +{ + "@type": "@builder.io/mitosis/component", + "children": [ + { + "@type": "@builder.io/mitosis/node", + "bindings": {}, + "children": [ + { + "@type": "@builder.io/mitosis/node", + "bindings": { + "css": { + "bindingType": "expression", + "code": "{ + color: 'red' +}", + "type": "single", + }, + "onChange": { + "arguments": [ + "event", + ], + "bindingType": "function", + "code": "state.name = event.target.value", + "type": "single", + }, + "onInput": { + "arguments": [ + "event", + ], + "bindingType": "function", + "code": "state.name = event.target.value", + "type": "single", + }, + "value": { + "bindingType": "expression", + "code": "state.name", + "type": "single", + }, + }, + "children": [], + "meta": {}, + "name": "input", + "properties": {}, + "scope": {}, + }, + { + "@type": "@builder.io/mitosis/node", + "bindings": {}, + "children": [], + "meta": {}, + "name": "div", + "properties": { + "_text": " + Hello! I can run in React, Vue, Solid, or Liquid! + ", + }, + "scope": {}, + }, + ], + "meta": {}, + "name": "div", + "properties": {}, + "scope": {}, + }, + ], + "context": { + "get": {}, + "set": {}, + }, + "exports": {}, + "hooks": { + "onEvent": [], + "onMount": [], + }, + "imports": [], + "inputs": [], + "meta": {}, + "name": "EventInputAndChange", + "refs": {}, + "state": { + "name": { + "code": "'Steve'", + "propertyType": "normal", + "type": "property", + }, + }, + "subComponents": [], +} +`; + exports[`Parse JSX > Typescript > expressionState 1`] = ` { "@type": "@builder.io/mitosis/component", diff --git a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap index 1504e2e618..914d385e35 100644 --- a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap @@ -2080,6 +2080,38 @@ export default ComponentWithTypes; " `; +exports[`Preact > jsx > Javascript Test > eventInputAndChange 1`] = ` +"/** @jsx h */ +import { h, Fragment } from \\"preact\\"; +import { useState } from \\"preact/hooks\\"; + +function EventInputAndChange(props) { + const [name, setName] = useState(() => \\"Steve\\"); + + return ( + +
+ setName(event.target.value)} + onChange={(event) => setName(event.target.value)} + /> + Hello! I can run in React, Vue, Solid, or Liquid! +
+ + + ); +} + +export default EventInputAndChange; +" +`; + exports[`Preact > jsx > Javascript Test > expressionState 1`] = ` "/** @jsx h */ import { h, Fragment } from \\"preact\\"; @@ -5975,6 +6007,38 @@ export default ComponentWithTypes; " `; +exports[`Preact > jsx > Typescript Test > eventInputAndChange 1`] = ` +"/** @jsx h */ +import { h, Fragment } from \\"preact\\"; +import { useState } from \\"preact/hooks\\"; + +function EventInputAndChange(props: any) { + const [name, setName] = useState(() => \\"Steve\\"); + + return ( + +
+ setName(event.target.value)} + onChange={(event) => setName(event.target.value)} + /> + Hello! I can run in React, Vue, Solid, or Liquid! +
+ + + ); +} + +export default EventInputAndChange; +" +`; + exports[`Preact > jsx > Typescript Test > expressionState 1`] = ` "/** @jsx h */ import { h, Fragment } from \\"preact\\"; diff --git a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap index eaf96b9dd4..e5072a17f2 100644 --- a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap @@ -3889,6 +3889,44 @@ export default ComponentWithTypes; " `; +exports[`qwik > jsx > Javascript Test > eventInputAndChange 1`] = ` +"import { + $, + Fragment, + component$, + h, + useStore, + useStylesScoped$, +} from \\"@builder.io/qwik\\"; + +export const EventInputAndChange = component$((props) => { + useStylesScoped$(STYLES); + + const state = useStore({ name: \\"Steve\\" }); + + return ( +
+ (state.name = event.target.value))} + onChange$={$((event) => (state.name = event.target.value))} + /> + Hello! I can run in React, Vue, Solid, or Liquid! +
+ ); +}); + +export default EventInputAndChange; + +export const STYLES = \` +.input-EventInputAndChange { + color: red; +} +\`; +" +`; + exports[`qwik > jsx > Javascript Test > expressionState 1`] = ` "import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\"; @@ -7708,6 +7746,44 @@ export default ComponentWithTypes; " `; +exports[`qwik > jsx > Typescript Test > eventInputAndChange 1`] = ` +"import { + $, + Fragment, + component$, + h, + useStore, + useStylesScoped$, +} from \\"@builder.io/qwik\\"; + +export const EventInputAndChange = component$((props: any) => { + useStylesScoped$(STYLES); + + const state = useStore({ name: \\"Steve\\" }); + + return ( +
+ (state.name = event.target.value))} + onChange$={$((event) => (state.name = event.target.value))} + /> + Hello! I can run in React, Vue, Solid, or Liquid! +
+ ); +}); + +export default EventInputAndChange; + +export const STYLES = \` +.input-EventInputAndChange { + color: red; +} +\`; +" +`; + exports[`qwik > jsx > Typescript Test > expressionState 1`] = ` "import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\"; diff --git a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap index d08442e341..a0004ba2dc 100644 --- a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap @@ -2770,6 +2770,45 @@ export default ComponentWithTypes; " `; +exports[`React Native > jsx > Javascript Test > eventInputAndChange 1`] = ` +"import * as React from \\"react\\"; +import { + FlatList, + ScrollView, + View, + StyleSheet, + Image, + Text, + Pressable, + TextInput, + TouchableOpacity, + Button, + Linking, +} from \\"react-native\\"; +import { useState } from \\"react\\"; + +function EventInputAndChange(props) { + const [name, setName] = useState(() => \\"Steve\\"); + + return ( + + setName(event.target.value)} + onChange={(event) => setName(event.target.value)} + style={styles.textInput1} + /> + Hello! I can run in React, Vue, Solid, or Liquid! + + ); +} + +const styles = StyleSheet.create({ textInput1: { color: \\"red\\" } }); + +export default EventInputAndChange; +" +`; + exports[`React Native > jsx > Javascript Test > expressionState 1`] = ` "import * as React from \\"react\\"; import { @@ -8103,6 +8142,45 @@ export default ComponentWithTypes; " `; +exports[`React Native > jsx > Typescript Test > eventInputAndChange 1`] = ` +"import * as React from \\"react\\"; +import { + FlatList, + ScrollView, + View, + StyleSheet, + Image, + Text, + Pressable, + TextInput, + TouchableOpacity, + Button, + Linking, +} from \\"react-native\\"; +import { useState } from \\"react\\"; + +function EventInputAndChange(props: any) { + const [name, setName] = useState(() => \\"Steve\\"); + + return ( + + setName(event.target.value)} + onChange={(event) => setName(event.target.value)} + style={styles.textInput1} + /> + Hello! I can run in React, Vue, Solid, or Liquid! + + ); +} + +const styles = StyleSheet.create({ textInput1: { color: \\"red\\" } }); + +export default EventInputAndChange; +" +`; + exports[`React Native > jsx > Typescript Test > expressionState 1`] = ` "import * as React from \\"react\\"; import { diff --git a/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap index 1a1b0449c3..b7172bba6c 100644 --- a/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap @@ -2107,6 +2107,37 @@ export default ComponentWithTypes; " `; +exports[`React - stateType: builder > jsx > Javascript Test > eventInputAndChange 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; + +function EventInputAndChange(props) { + const state = useBuilderState({ name: \\"Steve\\" }); + + return ( + <> +
+ (state.name = event.target.value)} + onChange={(event) => (state.name = event.target.value)} + /> + Hello! I can run in React, Vue, Solid, or Liquid! +
+ + + ); +} + +export default EventInputAndChange; +" +`; + exports[`React - stateType: builder > jsx > Javascript Test > expressionState 1`] = ` "\\"use client\\"; import * as React from \\"react\\"; @@ -5988,6 +6019,37 @@ export default ComponentWithTypes; " `; +exports[`React - stateType: builder > jsx > Typescript Test > eventInputAndChange 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; + +function EventInputAndChange(props: any) { + const state = useBuilderState({ name: \\"Steve\\" }); + + return ( + <> +
+ (state.name = event.target.value)} + onChange={(event) => (state.name = event.target.value)} + /> + Hello! I can run in React, Vue, Solid, or Liquid! +
+ + + ); +} + +export default EventInputAndChange; +" +`; + exports[`React - stateType: builder > jsx > Typescript Test > expressionState 1`] = ` "\\"use client\\"; import * as React from \\"react\\"; diff --git a/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap index 50a4d8c281..2c8cff924d 100644 --- a/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap @@ -2150,6 +2150,39 @@ export default observedComponentWithTypes; " `; +exports[`React - stateType: mobx > jsx > Javascript Test > eventInputAndChange 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; +import { useLocalObservable, observer } from \\"mobx-react-lite\\"; + +function EventInputAndChange(props) { + const state = useLocalObservable(() => ({ name: \\"Steve\\" })); + + return ( + <> +
+ (state.name = event.target.value)} + onChange={(event) => (state.name = event.target.value)} + /> + Hello! I can run in React, Vue, Solid, or Liquid! +
+ + + ); +} + +const observedEventInputAndChange = observer(EventInputAndChange); +export default observedEventInputAndChange; +" +`; + exports[`React - stateType: mobx > jsx > Javascript Test > expressionState 1`] = ` "\\"use client\\"; import * as React from \\"react\\"; @@ -6057,6 +6090,39 @@ export default observedComponentWithTypes; " `; +exports[`React - stateType: mobx > jsx > Typescript Test > eventInputAndChange 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; +import { useLocalObservable, observer } from \\"mobx-react-lite\\"; + +function EventInputAndChange(props: any) { + const state = useLocalObservable(() => ({ name: \\"Steve\\" })); + + return ( + <> +
+ (state.name = event.target.value)} + onChange={(event) => (state.name = event.target.value)} + /> + Hello! I can run in React, Vue, Solid, or Liquid! +
+ + + ); +} + +const observedEventInputAndChange = observer(EventInputAndChange); +export default observedEventInputAndChange; +" +`; + exports[`React - stateType: mobx > jsx > Typescript Test > expressionState 1`] = ` "\\"use client\\"; import * as React from \\"react\\"; diff --git a/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap index 4f0d7f0fa5..4f991e00a1 100644 --- a/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap @@ -2084,6 +2084,38 @@ export default ComponentWithTypes; " `; +exports[`React - stateType: solid > jsx > Javascript Test > eventInputAndChange 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; +import { useMutable } from \\"react-solid-state\\"; + +function EventInputAndChange(props) { + const state = useMutable({ name: \\"Steve\\" }); + + return ( + <> +
+ (state.name = event.target.value)} + onChange={(event) => (state.name = event.target.value)} + /> + Hello! I can run in React, Vue, Solid, or Liquid! +
+ + + ); +} + +export default EventInputAndChange; +" +`; + exports[`React - stateType: solid > jsx > Javascript Test > expressionState 1`] = ` "\\"use client\\"; import * as React from \\"react\\"; @@ -5873,6 +5905,38 @@ export default ComponentWithTypes; " `; +exports[`React - stateType: solid > jsx > Typescript Test > eventInputAndChange 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; +import { useMutable } from \\"react-solid-state\\"; + +function EventInputAndChange(props: any) { + const state = useMutable({ name: \\"Steve\\" }); + + return ( + <> +
+ (state.name = event.target.value)} + onChange={(event) => (state.name = event.target.value)} + /> + Hello! I can run in React, Vue, Solid, or Liquid! +
+ + + ); +} + +export default EventInputAndChange; +" +`; + exports[`React - stateType: solid > jsx > Typescript Test > expressionState 1`] = ` "\\"use client\\"; import * as React from \\"react\\"; diff --git a/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap index 71f031cab0..fcb771543c 100644 --- a/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap @@ -2087,6 +2087,38 @@ export default ComponentWithTypes; " `; +exports[`React - stateType: valtio > jsx > Javascript Test > eventInputAndChange 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; +import { useLocalProxy } from \\"valtio/utils\\"; + +function EventInputAndChange(props) { + const state = useLocalProxy({ name: \\"Steve\\" }); + + return ( + <> +
+ (state.name = event.target.value)} + onChange={(event) => (state.name = event.target.value)} + /> + Hello! I can run in React, Vue, Solid, or Liquid! +
+ + + ); +} + +export default EventInputAndChange; +" +`; + exports[`React - stateType: valtio > jsx > Javascript Test > expressionState 1`] = ` "\\"use client\\"; import * as React from \\"react\\"; @@ -5879,6 +5911,38 @@ export default ComponentWithTypes; " `; +exports[`React - stateType: valtio > jsx > Typescript Test > eventInputAndChange 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; +import { useLocalProxy } from \\"valtio/utils\\"; + +function EventInputAndChange(props: any) { + const state = useLocalProxy({ name: \\"Steve\\" }); + + return ( + <> +
+ (state.name = event.target.value)} + onChange={(event) => (state.name = event.target.value)} + /> + Hello! I can run in React, Vue, Solid, or Liquid! +
+ + + ); +} + +export default EventInputAndChange; +" +`; + exports[`React - stateType: valtio > jsx > Typescript Test > expressionState 1`] = ` "\\"use client\\"; import * as React from \\"react\\"; diff --git a/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap index e91dca6da7..f44535b561 100644 --- a/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap @@ -1519,6 +1519,37 @@ export default ComponentWithTypes; " `; +exports[`React - stateType: variables > jsx > Javascript Test > eventInputAndChange 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; + +function EventInputAndChange(props) { + const name = \\"Steve\\"; + + return ( + <> +
+ (name = event.target.value)} + onChange={(event) => (name = event.target.value)} + /> + Hello! I can run in React, Vue, Solid, or Liquid! +
+ + + ); +} + +export default EventInputAndChange; +" +`; + exports[`React - stateType: variables > jsx > Javascript Test > expressionState 1`] = ` "\\"use client\\"; import * as React from \\"react\\"; @@ -4413,6 +4444,37 @@ export default ComponentWithTypes; " `; +exports[`React - stateType: variables > jsx > Typescript Test > eventInputAndChange 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; + +function EventInputAndChange(props: any) { + const name = \\"Steve\\"; + + return ( + <> +
+ (name = event.target.value)} + onChange={(event) => (name = event.target.value)} + /> + Hello! I can run in React, Vue, Solid, or Liquid! +
+ + + ); +} + +export default EventInputAndChange; +" +`; + exports[`React - stateType: variables > jsx > Typescript Test > expressionState 1`] = ` "\\"use client\\"; import * as React from \\"react\\"; diff --git a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap index 83ea78ca4d..12e4a119d6 100644 --- a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap @@ -2063,6 +2063,38 @@ export default ComponentWithTypes; " `; +exports[`React - stateType: useState > jsx > Javascript Test > eventInputAndChange 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; +import { useState } from \\"react\\"; + +function EventInputAndChange(props) { + const [name, setName] = useState(() => \\"Steve\\"); + + return ( + <> +
+ setName(event.target.value)} + onChange={(event) => setName(event.target.value)} + /> + Hello! I can run in React, Vue, Solid, or Liquid! +
+ + + ); +} + +export default EventInputAndChange; +" +`; + exports[`React - stateType: useState > jsx > Javascript Test > expressionState 1`] = ` "\\"use client\\"; import * as React from \\"react\\"; @@ -5855,6 +5887,38 @@ export default ComponentWithTypes; " `; +exports[`React - stateType: useState > jsx > Typescript Test > eventInputAndChange 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; +import { useState } from \\"react\\"; + +function EventInputAndChange(props: any) { + const [name, setName] = useState(() => \\"Steve\\"); + + return ( + <> +
+ setName(event.target.value)} + onChange={(event) => setName(event.target.value)} + /> + Hello! I can run in React, Vue, Solid, or Liquid! +
+ + + ); +} + +export default EventInputAndChange; +" +`; + exports[`React - stateType: useState > jsx > Typescript Test > expressionState 1`] = ` "\\"use client\\"; import * as React from \\"react\\"; diff --git a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap index 44efc1e0d1..30048b6bfa 100644 --- a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap @@ -2060,6 +2060,38 @@ export default ComponentWithTypes; " `; +exports[`RSC > jsx > Javascript Test > eventInputAndChange 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; +import { useState } from \\"react\\"; + +function EventInputAndChange(props) { + const [name, setName] = useState(() => \\"Steve\\"); + + return ( + <> +
+ setName(event.target.value)} + onChange={(event) => setName(event.target.value)} + /> + Hello! I can run in React, Vue, Solid, or Liquid! +
+ + + ); +} + +export default EventInputAndChange; +" +`; + exports[`RSC > jsx > Javascript Test > expressionState 1`] = ` "\\"use client\\"; import * as React from \\"react\\"; @@ -5581,6 +5613,38 @@ export default ComponentWithTypes; " `; +exports[`RSC > jsx > Typescript Test > eventInputAndChange 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; +import { useState } from \\"react\\"; + +function EventInputAndChange(props: any) { + const [name, setName] = useState(() => \\"Steve\\"); + + return ( + <> +
+ setName(event.target.value)} + onChange={(event) => setName(event.target.value)} + /> + Hello! I can run in React, Vue, Solid, or Liquid! +
+ + + ); +} + +export default EventInputAndChange; +" +`; + exports[`RSC > jsx > Typescript Test > expressionState 1`] = ` "\\"use client\\"; import * as React from \\"react\\"; diff --git a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap index 021f9e0302..9f64f8eaf9 100644 --- a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap @@ -4560,6 +4560,62 @@ export default ComponentWithTypes; " `; +exports[`Solid > jsx > Javascript Test > eventInputAndChange 1`] = ` +"import { createSignal, createMemo } from \\"solid-js\\"; + +function EventInputAndChange(props) { + const [name, setName] = createSignal(\\"Steve\\"); + + return ( + <> +
+ setName(event.target.value)} + onInput={(event) => setName(event.target.value)} + /> + Hello! I can run in React, Vue, Solid, or Liquid! +
+ + + ); +} + +export default EventInputAndChange; +" +`; + +exports[`Solid > jsx > Javascript Test > eventInputAndChange 2`] = ` +"import { createSignal, createMemo } from \\"solid-js\\"; + +function EventInputAndChange(props) { + const [name, setName] = createSignal(\\"Steve\\"); + + return ( + <> +
+ setName(event.target.value)} + onInput={(event) => setName(event.target.value)} + /> + Hello! I can run in React, Vue, Solid, or Liquid! +
+ + + ); +} + +export default EventInputAndChange; +" +`; + exports[`Solid > jsx > Javascript Test > expressionState 1`] = ` "import { createSignal, createMemo } from \\"solid-js\\"; @@ -12752,6 +12808,62 @@ export default ComponentWithTypes; " `; +exports[`Solid > jsx > Typescript Test > eventInputAndChange 1`] = ` +"import { createSignal, createMemo } from \\"solid-js\\"; + +function EventInputAndChange(props: any) { + const [name, setName] = createSignal(\\"Steve\\"); + + return ( + <> +
+ setName(event.target.value)} + onInput={(event) => setName(event.target.value)} + /> + Hello! I can run in React, Vue, Solid, or Liquid! +
+ + + ); +} + +export default EventInputAndChange; +" +`; + +exports[`Solid > jsx > Typescript Test > eventInputAndChange 2`] = ` +"import { createSignal, createMemo } from \\"solid-js\\"; + +function EventInputAndChange(props: any) { + const [name, setName] = createSignal(\\"Steve\\"); + + return ( + <> +
+ setName(event.target.value)} + onInput={(event) => setName(event.target.value)} + /> + Hello! I can run in React, Vue, Solid, or Liquid! +
+ + + ); +} + +export default EventInputAndChange; +" +`; + exports[`Solid > jsx > Typescript Test > expressionState 1`] = ` "import { createSignal, createMemo } from \\"solid-js\\"; diff --git a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap index 668b1c5eed..ff6e7522fd 100644 --- a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap @@ -109,7 +109,7 @@ export class MyBasicRefComponent { ref={(el) => (this.inputRef = el)} value={this.name} onBlur={(event) => this.onBlur()} - onInput={(event) => (this.name = event.target.value)} + onChange={(event) => (this.name = event.target.value)} />