DEV: Add user-field-components value transformer

app/assets/javascripts/discourse/app/components/user-field.gjs

@@ -1,25 +1,29 @@
+import Component from "@glimmer/component";
 import { get } from "@ember/helper";
+import { applyValueTransformer } from "../lib/transformer";
 import UserFieldConfirm from "./user-fields/confirm";
 import UserFieldDropdown from "./user-fields/dropdown";
 import UserFieldMultiselect from "./user-fields/multiselect";
 import UserFieldText from "./user-fields/text";
 
-const COMPONENTS = {
-  confirm: UserFieldConfirm,
-  dropdown: UserFieldDropdown,
-  multiselect: UserFieldMultiselect,
-  text: UserFieldText,
-};
+export default class UserField extends Component {
+  get components() {
+    return applyValueTransformer("user-field-components", {
+      confirm: UserFieldConfirm,
+      dropdown: UserFieldDropdown,
+      multiselect: UserFieldMultiselect,
+      text: UserFieldText,
+    });
+  }
 
-const UserField = <template>
-  {{#let (get COMPONENTS @field.field_type) as |Component|}}
-    <Component
-      @field={{@field}}
-      @value={{@value}}
-      @validation={{@validation}}
-      ...attributes
-    />
-  {{/let}}
-</template>;
-
-export default UserField;
+  <template>
+    {{#let (get this.components @field.field_type) as |UserFieldComponent|}}
+      <UserFieldComponent
+        @field={{@field}}
+        @value={{@value}}
+        @validation={{@validation}}
+        ...attributes
+      />
+    {{/let}}
+  </template>
+}

app/assets/javascripts/discourse/app/lib/transformer/registry.js

@@ -32,4 +32,5 @@ export const VALUE_TRANSFORMERS = Object.freeze([
   "topic-list-item-expand-pinned",
   "topic-list-item-mobile-layout",
   "topic-list-item-style",
+  "user-field-components",
 ]);