Skip to content

Commit dc39048

Browse files
mfranzkemfranzke
committed
refactor: fix reacts (controlled components) and vues (v-model) inputs
1 parent e8a3603 commit dc39048

File tree

8 files changed

+14
-59
lines changed

8 files changed

+14
-59
lines changed

‎packages/components/scripts/post-build/components.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,10 +51,7 @@ const getComponents = () => [
5151
},
5252
config: {
5353
vue: {
54-
vModel: [
55-
{ modelValue: 'checked', binding: ':checked' },
56-
{ modelValue: 'indeterminate', binding: ':indeterminate' }
57-
]
54+
vModel: [{ modelValue: 'checked', binding: ':checked' }]
5855
}
5956
}
6057
},

‎packages/components/scripts/post-build/vue.js‎

Lines changed: 1 addition & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -32,14 +32,6 @@ const updateNestedComponents = (input, rootComponentName) => {
3232
const updateVModelBindings = (input, bindings) => {
3333
let fileContent = input;
3434

35-
// Replace internal underscore value
36-
bindings.forEach((bin) => {
37-
fileContent = fileContent.replace(
38-
`${bin.binding}="_${bin.modelValue}"`,
39-
`${bin.binding}="${bin.modelValue}"`
40-
);
41-
});
42-
4335
// Add emits to component config
4436

4537
fileContent = fileContent.replace(
@@ -52,19 +44,8 @@ const updateVModelBindings = (input, bindings) => {
5244
return fileContent
5345
.split('\n')
5446
.map((line) => {
55-
const foundBinding = bindings.find(
56-
(bin) =>
57-
line.includes(`this._${bin.modelValue} =`) &&
58-
!line.includes(
59-
`this._${bin.modelValue} = this.${bin.modelValue}`
60-
)
61-
);
62-
if (foundBinding) {
63-
const emitFunction = `this.$emit("update:${foundBinding.modelValue}", this._${foundBinding.modelValue});`;
64-
return `${line}\n${emitFunction}`;
65-
}
6647

67-
return line;
48+
return line.replace('// VUE:', '');
6849
})
6950
.join('\n');
7051
};

‎packages/components/src/components/checkbox/checkbox.lite.tsx‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,6 @@ export default function DBCheckbox(props: DBCheckboxProps) {
2727
initialized: false,
2828
_id: DEFAULT_ID,
2929
_isValid: undefined,
30-
_value: '',
31-
_checked: false,
32-
_indeterminate: false,
3330

3431
handleChange: (event: any) => {
3532
if (props.onChange) {
@@ -40,15 +37,15 @@ export default function DBCheckbox(props: DBCheckboxProps) {
4037
props.change(event);
4138
}
4239

43-
state._checked = event.target?.checked;
44-
state._indeterminate = event.target?.indeterminate;
45-
4640
if (event.target?.validity?.valid != state._isValid) {
4741
state._isValid = event.target?.validity?.valid;
4842
if (props.validityChange) {
4943
props.validityChange(!!event.target?.validity?.valid);
5044
}
5145
}
46+
47+
// TODO: Replace this with the solution out of https://github.com/BuilderIO/mitosis/issues/833 after this has been "solved"
48+
// VUE:this.$emit("update:checked", event.target.checked);
5249
},
5350
handleBlur: (event: any) => {
5451
if (props.onBlur) {
@@ -77,10 +74,6 @@ export default function DBCheckbox(props: DBCheckboxProps) {
7774
state.initialized = true;
7875
state._id = props.id ? props.id : 'checkbox-' + uuid();
7976

80-
if (props.value) {
81-
state._value = props.value;
82-
}
83-
8477
if (props.stylePath) {
8578
state.stylePath = props.stylePath;
8679
}
@@ -122,7 +115,7 @@ export default function DBCheckbox(props: DBCheckboxProps) {
122115
name={props.name}
123116
checked={props.checked}
124117
disabled={props.disabled}
125-
value={state._value}
118+
value={props.value}
126119
aria-describedby={props.describedbyid}
127120
aria-invalid={props.invalid}
128121
data-size={props.size}

‎packages/components/src/components/checkbox/model.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@ import {
99
GlobalState,
1010
FormProps,
1111
FormState,
12-
FormCheckProps,
13-
FormCheckState
12+
FormCheckProps
1413
} from '../../shared/model';
1514

1615
export interface DBCheckboxDefaultProps {
@@ -43,5 +42,4 @@ export type DBCheckboxState = DBCheckboxDefaultState &
4342
GlobalState &
4443
ChangeEventState &
4544
FocusEventState &
46-
FormState &
47-
FormCheckState;
45+
FormState;

‎packages/components/src/components/input/input.lite.tsx‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,6 @@ export default function DBInput(props: DBInputProps) {
4848
_id: DEFAULT_ID,
4949
_isValid: undefined,
5050
_dataListId: DEFAULT_ID,
51-
_value: '',
5251
iconVisible: (icon?: string) => {
5352
return Boolean(icon && icon !== '_' && icon !== 'none');
5453
},
@@ -68,15 +67,15 @@ export default function DBInput(props: DBInputProps) {
6867
props.change(event);
6968
}
7069

71-
// using controlled components for react forces us to using state for value
72-
state._value = event.target.value;
73-
7470
if (event.target?.validity?.valid != state._isValid) {
7571
state._isValid = event.target?.validity?.valid;
7672
if (props.validityChange) {
7773
props.validityChange(!!event.target?.validity?.valid);
7874
}
7975
}
76+
77+
// TODO: Replace this with the solution out of https://github.com/BuilderIO/mitosis/issues/833 after this has been "solved"
78+
// VUE:this.$emit("update:value", event.target.value);
8079
},
8180
handleBlur: (event: any) => {
8281
if (props.onBlur) {
@@ -107,10 +106,6 @@ export default function DBInput(props: DBInputProps) {
107106
? props.dataListId
108107
: `datalist-${state._id}`;
109108

110-
if (props.value) {
111-
state._value = props.value;
112-
}
113-
114109
if (props.stylePath) {
115110
state.stylePath = props.stylePath;
116111
}
@@ -137,7 +132,7 @@ export default function DBInput(props: DBInputProps) {
137132
disabled={props.disabled}
138133
required={props.required}
139134
defaultValue={props.defaultValue}
140-
value={state._value}
135+
value={props.value}
141136
aria-invalid={props.invalid}
142137
maxLength={props.maxLength}
143138
minLength={props.minLength}

‎packages/components/src/components/radio/model.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@ import {
99
GlobalState,
1010
FormProps,
1111
FormState,
12-
FormCheckProps,
13-
FormCheckState
12+
FormCheckProps
1413
} from '../../shared/model';
1514

1615
export interface DBRadioDefaultProps {
@@ -35,5 +34,4 @@ export type DBRadioState = DBRadioDefaultState &
3534
GlobalState &
3635
ChangeEventState &
3736
FocusEventState &
38-
FormState &
39-
FormCheckState;
37+
FormState;

‎packages/components/src/components/radio/radio.lite.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ export default function DBRadio(props: DBRadioProps) {
2626
const state = useStore<DBRadioState>({
2727
initialized: false,
2828
_id: DEFAULT_ID,
29-
_checked: false,
3029
_isValid: undefined,
3130

3231
handleChange: (event: any) => {
@@ -38,8 +37,6 @@ export default function DBRadio(props: DBRadioProps) {
3837
props.change(event);
3938
}
4039

41-
state._checked = event.target?.checked;
42-
4340
if (event.target?.validity?.valid != state._isValid) {
4441
state._isValid = event.target?.validity?.valid;
4542
if (props.validityChange) {

‎packages/components/src/shared/model.ts‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -121,10 +121,6 @@ export type FormState = {
121121
_value?: any;
122122
};
123123

124-
export type FormCheckState = {
125-
_checked: boolean;
126-
};
127-
128124
export type GlobalTextProps = {
129125
placeholder?: string;
130126
maxLength?: number;

0 commit comments

Comments
 (0)