feat: introduce BuiltInControlTypes for consistent control type

Author: genu

packages/core/src/types/controls.ts

@@ -4,6 +4,7 @@ import { StandardSchema } from './forms';
 export interface ControlApi {
   getControlElement(): HTMLElement | undefined;
   getControlId(): string | undefined;
+  getControlType(): typeof BuiltInControlTypes | string | undefined;
 }
 
 export interface ControlProps<TValue = unknown, TInitialValue = TValue> {
@@ -42,3 +43,23 @@ export interface ControlProps<TValue = unknown, TInitialValue = TValue> {
    */
   required?: boolean;
 }
+
+export const BuiltInControlTypes = {
+  Text: 'Text',
+  Calendar: 'Calendar',
+  Date: 'Date',
+  Time: 'Time',
+  File: 'File',
+  Select: 'Select',
+  Number: 'Number',
+  OTP: 'OTP',
+  Slider: 'Slider',
+  Switch: 'Switch',
+  Checkbox: 'Checkbox',
+  CheckboxGroup: 'CheckboxGroup',
+  RadioGroup: 'RadioGroup',
+  ComboBox: 'ComboBox',
+  Hidden: 'Hidden',
+  Search: 'Search',
+  Custom: 'Custom',
+} as const;

packages/core/src/useCalendar/useCalendarControl.ts

@@ -1,7 +1,7 @@
 import { computed, inject, nextTick, provide, Ref, shallowRef, toValue, watch } from 'vue';
 import { CalendarContext, CalendarViewType } from './types';
 import { hasKeyCode, normalizeProps, useCaptureProps, useUniqId } from '../utils/common';
-import { ControlProps, Maybe, Reactivify } from '../types';
+import { BuiltInControlTypes, ControlProps, Maybe, Reactivify } from '../types';
 import { useLocale } from '../i18n';
 import { FieldTypePrefixes } from '../constants';
 import { blockEvent } from '../utils/events';
@@ -17,7 +17,6 @@ import { createDisabledContext } from '../helpers/createDisabledContext';
 import { useVModelProxy } from '../reactivity/useVModelProxy';
 import { useConstraintsValidator, useInputValidity } from '../validation';
 import { useFieldControllerContext } from '../useFormField/useFieldController';
-import { registerField } from '@formwerk/devtools';
 
 export interface CalendarControlProps extends ControlProps<Date | undefined> {
   /**
@@ -128,6 +127,7 @@ export function useCalendarControl(_props: Reactivify<CalendarControlProps, 'fie
     controller?.registerControl({
       getControlId: () => calendarId,
       getControlElement: () => calendarEl.value,
+      getControlType: () => BuiltInControlTypes.Calendar,
     });
   }
 
@@ -338,13 +338,6 @@ export function useCalendarControl(_props: Reactivify<CalendarControlProps, 'fie
     };
   }, gridEl);
 
-  if (__DEV__) {
-    // If it is its own field, we should register it with devtools.
-    if (!props.field) {
-      registerField(field, 'Calendar');
-    }
-  }
-
   return {
     /**
      * The id of the calendar element.

packages/core/src/useCheckbox/useCheckbox.ts

@@ -1,5 +1,4 @@
 import { computed, inject, nextTick, toValue, shallowRef } from 'vue';
-import { registerField } from '@formwerk/devtools';
 import { hasKeyCode, isEqual, isInputElement, normalizeProps, useUniqId, useCaptureProps } from '../utils/common';
 import {
   AriaLabelableProps,
@@ -274,10 +273,6 @@ export function useCheckbox<TValue = string>(_props: Reactivify<CheckboxProps<TV
 
   const isGrouped = !!group;
 
-  if (__DEV__) {
-    registerField(field.state, 'Checkbox');
-  }
-
   return exposeField(
     {
       /**

packages/core/src/useCheckbox/useCheckboxGroup.ts

@@ -9,6 +9,7 @@ import {
   Arrayable,
   StandardSchema,
   ControlProps,
+  BuiltInControlTypes,
 } from '../types';
 import {
   useUniqId,
@@ -119,6 +120,7 @@ export function useCheckboxGroup<TCheckbox>(_props: Reactivify<CheckboxGroupProp
   field.registerControl({
     getControlId: () => groupId,
     getControlElement: () => undefined,
+    getControlType: () => BuiltInControlTypes.CheckboxGroup,
   });
 
   const { fieldValue, setValue, isTouched, setTouched, isDisabled } = field.state;

packages/core/src/useComboBox/useComboBoxControl.ts

@@ -1,5 +1,5 @@
 import { ref, toValue, watch, shallowRef, computed } from 'vue';
-import { ControlProps, InputEvents, Maybe, Reactivify } from '../types';
+import { BuiltInControlTypes, ControlProps, InputEvents, Maybe, Reactivify } from '../types';
 import { Orientation } from '../types';
 import {
   debounce,
@@ -19,7 +19,6 @@ import { useControlButtonProps } from '../helpers/useControlButtonProps';
 import { TransparentWrapper } from '../types';
 import { useVModelProxy } from '../reactivity/useVModelProxy';
 import { useFieldControllerContext } from '../useFormField/useFieldController';
-import { registerField } from '@formwerk/devtools';
 
 export interface ComboBoxControlProps<TOption, TValue = TOption> extends ControlProps<TValue> {
   /**
@@ -80,6 +79,7 @@ export function useComboBoxControl<TOption, TValue = TOption>(
   controller?.registerControl({
     getControlElement: () => inputEl.value,
     getControlId: () => inputId,
+    getControlType: () => BuiltInControlTypes.ComboBox,
   });
 
   const {
@@ -319,10 +319,6 @@ export function useComboBoxControl<TOption, TValue = TOption>(
     watch(inputValue, debounce(filter.debounceMs, updateHiddenState));
   }
 
-  if (__DEV__) {
-    registerField(field, 'ComboBox');
-  }
-
   return {
     /**
      * The id of the input element.

packages/core/src/useCustomField/useCustomControl.ts

@@ -32,6 +32,7 @@ export function useCustomControl<TValue = unknown>(
   controller?.registerControl({
     getControlElement: () => controlEl.value,
     getControlId: () => controlId,
+    getControlType: () => props.controlType ?? 'Custom',
   });
 
   const controlProps = useCaptureProps(() => {

packages/core/src/useDateTime/useDateControl.ts

@@ -1,4 +1,4 @@
-import { ControlProps, Reactivify } from '../types';
+import { BuiltInControlTypes, ControlProps, Reactivify } from '../types';
 import type { CalendarProps } from '../useCalendar';
 import { normalizeProps, useUniqId, useCaptureProps } from '../utils/common';
 import { computed, shallowRef, toValue } from 'vue';
@@ -12,7 +12,6 @@ import { useInputValidity } from '../validation';
 import { useConstraintsValidator } from '../validation/useConstraintsValidator';
 import { useVModelProxy } from '../reactivity/useVModelProxy';
 import { useFieldControllerContext } from '../useFormField/useFieldController';
-import { registerField } from '@formwerk/devtools';
 
 export interface DateControlProps extends ControlProps<Date | undefined> {
   /**
@@ -84,6 +83,7 @@ export function useDateControl(_props: Reactivify<DateControlProps, '_field' | '
   controller?.registerControl({
     getControlElement: () => controlEl.value,
     getControlId: () => controlId,
+    getControlType: () => BuiltInControlTypes.Date,
   });
 
   const min = computed(() => fromDateToCalendarZonedDateTime(toValue(props.min), calendar.value, timeZone.value));
@@ -146,10 +146,6 @@ export function useDateControl(_props: Reactivify<DateControlProps, '_field' | '
     };
   }, controlEl);
 
-  if (__DEV__) {
-    registerField(field, 'Date');
-  }
-
   return {
     /**
      * The id of the control element.

packages/core/src/useDateTime/useTimeControl.ts

@@ -1,4 +1,4 @@
-import { ControlProps, Maybe, Reactivify } from '../types';
+import { BuiltInControlTypes, ControlProps, Maybe, Reactivify } from '../types';
 import { isNullOrUndefined, normalizeProps, useUniqId, useCaptureProps } from '../utils/common';
 import { computed, shallowRef, toValue } from 'vue';
 import { resolveFieldState } from '../useFormField';
@@ -14,7 +14,6 @@ import { merge } from '../../../shared/src';
 import { Simplify } from 'type-fest';
 import { useVModelProxy } from '../reactivity/useVModelProxy';
 import { useFieldControllerContext } from '../useFormField/useFieldController';
-import { registerField } from '@formwerk/devtools';
 
 export type TimeFormatOptions = Simplify<
   Pick<Intl.DateTimeFormatOptions, 'hour' | 'minute' | 'second' | 'dayPeriod' | 'timeZone' | 'hour12'>
@@ -88,6 +87,7 @@ export function useTimeControl(_props: Reactivify<TimeControlProps, '_field' | '
   controller?.registerControl({
     getControlElement: () => controlEl.value,
     getControlId: () => controlId,
+    getControlType: () => BuiltInControlTypes.Time,
   });
 
   const temporalValue = useTemporalStore({
@@ -128,10 +128,6 @@ export function useTimeControl(_props: Reactivify<TimeControlProps, '_field' | '
     };
   }, controlEl);
 
-  if (__DEV__) {
-    registerField(field, 'Time');
-  }
-
   return {
     /**
      * The id of the control element.

packages/core/src/useFileField/useFileControl.ts

@@ -1,5 +1,5 @@
 import { computed, markRaw, nextTick, provide, readonly, ref, toValue, shallowRef } from 'vue';
-import { Arrayable, ControlProps, Reactivify } from '../types';
+import { Arrayable, BuiltInControlTypes, ControlProps, Reactivify } from '../types';
 import {
   isNullOrUndefined,
   normalizeArrayable,
@@ -18,7 +18,6 @@ import { FileEntryCollectionKey, FilePickerOptions } from './types';
 import { useControlButtonProps } from '../helpers/useControlButtonProps';
 import { useVModelProxy } from '../reactivity/useVModelProxy';
 import { useFieldControllerContext } from '../useFormField/useFieldController';
-import { registerField } from '@formwerk/devtools';
 
 export interface FileUploadContext {
   /**
@@ -91,6 +90,7 @@ export function useFileControl(_props: Reactivify<FileControlProps, 'onUpload' |
   controller?.registerControl({
     getControlElement: () => inputEl.value,
     getControlId: () => inputId,
+    getControlType: () => BuiltInControlTypes.File,
   });
 
   function isMultiple() {
@@ -339,10 +339,6 @@ export function useFileControl(_props: Reactivify<FileControlProps, 'onUpload' |
     getRemoveButtonLabel: () => toValue(props.removeButtonLabel) ?? 'Remove file',
   });
 
-  if (__DEV__) {
-    registerField(field, 'File');
-  }
-
   return {
     /**
      * The id of the input element.

packages/core/src/useFormField/useFieldController.ts

@@ -8,7 +8,7 @@ import {
   AriaLabelProps,
   Reactivify,
 } from '../types';
-import { ControlApi, ControlProps } from '../types/controls';
+import { BuiltInControlTypes, ControlApi, ControlProps } from '../types/controls';
 import { normalizeProps } from '../utils/common';
 
 export interface FieldControllerProps {
@@ -73,6 +73,11 @@ 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');
@@ -82,6 +87,7 @@ export function useFieldController(_props: Reactivify<FieldControllerProps>): Fi
   const props = normalizeProps(_props);
   const getControlId = () => control.value?.getControlId() ?? '';
   const getControlElement = () => control.value?.getControlElement();
+  const getControlType = () => control.value?.getControlType() ?? 'Field';
 
   const { descriptionProps, describedByProps } = useDescription({
     inputId: getControlId,
@@ -104,11 +110,13 @@ export function useFieldController(_props: Reactivify<FieldControllerProps>): Fi
   }
 
   const controlId = computed(() => getControlId());
+  const controlType = computed(() => getControlType());
 
   const controller = {
     label: computed(() => toValue(props.label) ?? ''),
     labelProps,
     controlId,
+    controlType,
     labelledByProps,
     descriptionProps,
     describedByProps,