feat: Vue Devtools #116
Merged
feat: Vue Devtools #116
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: 4ee0210 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
s8n11c
force-pushed
the
feat/dev-tools
branch
from
95ed876 to
6dc7a52
Compare
logaretm
requested changes
Jan 29, 2025
logaretm
reviewed
Jan 29, 2025
Closed
logaretm
added
🩹 ver-patch
logaretm
requested changes
Feb 1, 2025
packages/core/src/useForm/useForm.ts
Outdated
Comment on lines
303
to
308
| watch( | ||
| () => ({ | ||
| errors: errors.value, | ||
| isValid: isValid.value, | ||
| values: values, | ||
| isSubmitting: isSubmitting.value, | ||
| submitAttemptsCount: submitAttemptsCount.value, | ||
| }), | ||
| refreshInspector, | ||
| { | ||
| deep: true, | ||
| }, |
There was a problem hiding this comment.
Move the watcher inside registerForm
| @@ -36,6 +36,7 @@ export type FormField<TValue> = { | |||
| setTouched: (touched: boolean) => void; | |||
| setErrors: (messages: Arrayable<string>) => void; | |||
| displayError: () => string | undefined; | |||
| form?: FormContext | null; | |||
There was a problem hiding this comment.
rename this to resolvedForm for clarity.
| @@ -191,7 +192,7 @@ export function useFormField<TValue = unknown>(opts?: Partial<FormFieldOptions<T | |||
| form.setFieldDisabled(path, disabled); | |||
| }); | |||
|
|
|||
| return field; | |||
| return { ...field, form }; | |||
There was a problem hiding this comment.
No need to spread, just add the resolvedForm to the FormField type and then you could just set it as a prop here.
packages/dev-tools/src/registery.ts
Outdated
Comment on lines
6
to
43
| export function registerTextFieldWithDevtools(field: Omit<TextField, 'type'>) { | ||
| const vm = initDevTools(); | ||
|
|
||
| const id = field.getPath() ?? field.getName() ?? ''; | ||
| const formId = field.form?.id; | ||
|
|
||
| // if the field is part of a form, we need to register to add the field to the form | ||
| if (formId && DEVTOOLS_FORMS[formId]) { | ||
| DEVTOOLS_FORMS[formId].children = DEVTOOLS_FORMS[formId].children ?? []; | ||
| DEVTOOLS_FORMS[formId].children.push({ | ||
| ...field, | ||
| type: FIELD_TYPES.TextField, | ||
| _vm: vm, | ||
| }); | ||
| } else { | ||
| // if the field is a standalone field, we need to register it | ||
| DEVTOOLS_FIELDS[id] = { ...field, type: FIELD_TYPES.TextField, _vm: vm }; | ||
| } | ||
|
|
||
| watch( | ||
| () => ({ | ||
| errors: field.errorMessage.value, | ||
| isValid: !field.errorMessage.value, | ||
| value: field.fieldValue.value, | ||
| }), | ||
| refreshInspector, | ||
| { | ||
| deep: true, | ||
| }, | ||
| ); | ||
|
|
||
| onUnmounted(() => { | ||
| delete DEVTOOLS_FIELDS[id]; | ||
| refreshInspector(); | ||
| }); | ||
|
|
||
| refreshInspector(); | ||
| } |
There was a problem hiding this comment.
Avoid specific register functions for now, let's just start with registerField and registerForm, no need to have withDevtools as well because it is implied.
Change the function signature to be like this:
function registerField(field: FormField<unknown>, type: string) {
// ....
}
packages/dev-tools/src/types.ts
Outdated
Comment on lines
45
to
58
| export type TextField = ReturnType<typeof useTextField> & | ||
| ReturnType<typeof useFormField<string | undefined>> & { | ||
| type: (typeof FIELD_TYPES)['TextField']; | ||
| }; | ||
|
|
||
| export type CheckboxField = ReturnType<typeof useCheckbox> & | ||
| ReturnType<typeof useFormField<string | undefined>> & { | ||
| type: (typeof FIELD_TYPES)['Checkbox']; | ||
| }; | ||
|
|
||
| export type RadioField = ReturnType<typeof useRadioGroup> & | ||
| ReturnType<typeof useFormField<string | undefined>> & { | ||
| type: (typeof FIELD_TYPES)['Radio']; | ||
| }; |
There was a problem hiding this comment.
Won't need those if you follow my suggestion.
packages/dev-tools/src/types.ts
Outdated
Comment on lines
10
to
28
| export interface PathState<TValue = unknown> { | ||
| touched: boolean; | ||
| dirty: boolean; | ||
| valid: boolean; | ||
| errors: string[]; | ||
| value: TValue; | ||
| } | ||
|
|
||
| // Form state extending base state | ||
| export interface FormState extends PathState { | ||
| id: string; | ||
| } | ||
|
|
||
| // Field state extending base state | ||
| export interface FieldState<TValue = unknown> extends PathState<TValue> { | ||
| path: string; | ||
| name: string; | ||
| formId?: string; | ||
| } |
There was a problem hiding this comment.
Do we need to map types for those?
logaretm
force-pushed
the
feat/dev-tools
branch
from
1c10ccb to
26cecb7
Compare
logaretm
approved these changes
Feb 22, 2025
commit: |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.