fix: types and type reactivity in devtools

Author: logaretm

packages/core/src/types/controls.ts

@@ -4,7 +4,7 @@ import { StandardSchema } from './forms';
 export interface ControlApi {
   getControlElement(): HTMLElement | undefined;
   getControlId(): string | undefined;
-  getControlType(): typeof BuiltInControlTypes | string | undefined;
+  getControlType(): string | undefined;
 }
 
 export interface ControlProps<TValue = unknown, TInitialValue = TValue> {

packages/core/src/useFormField/useFieldController.ts

@@ -8,7 +8,7 @@ import {
   AriaLabelProps,
   Reactivify,
 } from '../types';
-import { BuiltInControlTypes, ControlApi, ControlProps } from '../types/controls';
+import { ControlApi, ControlProps } from '../types/controls';
 import { normalizeProps } from '../utils/common';
 
 export interface FieldControllerProps {
@@ -39,6 +39,11 @@ export interface FieldController {
    */
   controlId: Ref<string>;
 
+  /**
+   * The type of the control, used for devtools.
+   */
+  controlType: Ref<string>;
+
   /**
    * Props for the label element.
    */
@@ -73,11 +78,6 @@ export interface FieldController {
    * Registers a control interface, used to get the control element and id.
    */
   registerControl: (control: ControlApi) => void;
-
-  /**
-   * The type of the control, used for devtools.
-   */
-  controlType: Ref<typeof BuiltInControlTypes | string>;
 }
 
 export const FieldControllerKey: InjectionKey<FieldController> = Symbol('FieldControllerKey');

packages/core/src/useFormField/useFormField.ts

@@ -12,7 +12,6 @@ import {
   ValidationResult,
 } from '../types';
 import { normalizeProps, warn } from '../utils/common';
-import { Simplify } from 'type-fest';
 import { registerField } from '@formwerk/devtools';
 
 export type FormFieldInit<V = unknown> = Reactivify<FieldControllerProps> & Partial<FieldStateInit<V>>;
@@ -23,19 +22,17 @@ export type FormField<TValue = unknown> = FieldController & {
   state: FieldState<TValue>;
 };
 
-export type WithFieldProps<TControlProps extends object> = Simplify<
-  Omit<TControlProps, '_field'> & {
-    /**
-     * The label of the field.
-     */
-    label: string;
-
-    /**
-     * The description of the field.
-     */
-    description?: string | undefined;
-  }
->;
+export type WithFieldProps<TControlProps extends object> = Omit<TControlProps, '_field'> & {
+  /**
+   * The label of the field.
+   */
+  label: string;
+
+  /**
+   * The description of the field.
+   */
+  description?: string | undefined;
+};
 
 export function useFormField<TValue = unknown>(
   init?: FormFieldInit<TValue>,

packages/devtools/src/helpers.ts

@@ -198,7 +198,7 @@ export function getFieldNodeTags(field: DevtoolsField, valid: boolean) {
       backgroundColor: bgColor,
     },
     {
-      label: field.type,
+      label: toValue(field.type),
       textColor: COLORS.black,
       backgroundColor: COLORS.gray,
     },

packages/devtools/src/init.ts

@@ -2,10 +2,10 @@ import {
   App,
   type ComponentInternalInstance,
   getCurrentInstance,
+  MaybeRefOrGetter,
   nextTick,
   onMounted,
   onUnmounted,
-  Ref,
   watch,
 } from 'vue';
 import { throttle } from '../../../packages/shared/src';
@@ -228,8 +228,7 @@ export function initDevTools() {
   return vm;
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function registerField(field: FieldState<any>, type: Ref<any> | string) {
+export function registerField(field: FieldState<any>, type: MaybeRefOrGetter<string>) {
   onMounted(async () => {
     const vm = initDevTools();
     // Makes sure forms are registered before fields in same component contexts

packages/devtools/src/registry.ts

@@ -1,5 +1,5 @@
 import { FieldState, FormReturns, Maybe } from '@core/index';
-import { ComponentInternalInstance, onUnmounted, Ref, toValue } from 'vue';
+import { ComponentInternalInstance, MaybeRefOrGetter, onUnmounted } from 'vue';
 import { DevtoolsForm, DevtoolsRootForm } from './types';
 import { getRootFormId } from './constants';
 
@@ -46,8 +46,11 @@ export function getAllForms() {
   return Array.from(TREE.values()).filter(node => !('_isRoot' in node)) as DevtoolsForm[];
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function registerField(field: FieldState<any>, type: Ref<any> | string, vm: Maybe<ComponentInternalInstance>) {
+export function registerField(
+  field: FieldState<unknown>,
+  type: MaybeRefOrGetter<string>,
+  vm: Maybe<ComponentInternalInstance>,
+) {
   const id = field.getPath() ?? field.getName() ?? '';
   const formId = field.form?.id ?? getRootFormId();
 
@@ -72,7 +75,7 @@ export function registerField(field: FieldState<any>, type: Ref<any> | string, v
   form.fields.set(id, {
     ...field,
     _vm: vm,
-    type: toValue(type),
+    type,
   });
 
   onUnmounted(() => {

packages/devtools/src/types.ts

@@ -1,5 +1,5 @@
 import type { FieldState as CoreFieldState, FormReturns, IssueCollection } from '@core/index';
-import { ComponentInternalInstance } from 'vue';
+import { ComponentInternalInstance, MaybeRefOrGetter } from 'vue';
 
 interface BaseState<TValue = unknown> {
   touched: boolean;
@@ -37,7 +37,10 @@ export interface FieldState<TValue = unknown> extends BaseState<TValue> {
 export type NodeState = FormState | FieldState | PathState;
 
 // Devtools field type
-export type DevtoolsField = CoreFieldState<unknown> & { type: string; _vm?: ComponentInternalInstance | null };
+export type DevtoolsField = CoreFieldState<unknown> & {
+  type: MaybeRefOrGetter<string>;
+  _vm?: ComponentInternalInstance | null;
+};
 
 // Devtools form type
 export type DevtoolsForm = FormReturns & {