fix(field): remove the need for wrapper:false in createField (#229)

apps/demo/src/views/NewFormView.vue

@@ -2,9 +2,8 @@
   <div>
     <h1>Form without fields array</h1>
     <p>
-      These forms are defined entirely in the template. The components can be placed anywhere in the template. When
-      <code>wrapper: false</code> is passed when creating the component, you need to manually place the Label and Errors
-      component as well.
+      These forms are defined entirely in the template. The components can be placed anywhere in the template. You can
+      even choose to manually place the Label and Errors components as well.
     </p>
 
     <div class="gap-2 grid grid-cols-2 grid-flow-row mt-4">
@@ -184,6 +183,7 @@ const Email = createField({
   name: 'email',
   label: 'Email',
   component: TTextInput,
+  // This is necessary because there's a global wrapper defined in the form options.
   wrapper: false,
   props: {
     type: 'email',

libs/core/src/utils/createField.spec.ts

@@ -25,7 +25,9 @@ describe('createField', () => {
     const field = createField({name: 'test', ref: ref('value'), component: 'input'});
 
     expect(field).toStrictEqual({
-      Component: expect.any(Object),
+      Component: expect.objectContaining({render: expect.any(Function)}),
+      Errors: expect.objectContaining({__asyncLoader: expect.any(Function)}),
+      Label: expect.objectContaining({__asyncLoader: expect.any(Function)}),
       field: {name: 'test', ref: 'value', component: 'input'},
       ref: 'value',
     });
@@ -35,24 +37,14 @@ describe('createField', () => {
     const field = createField({name: 'test', ref: ref('value2'), component: testComponent});
 
     expect(field).toStrictEqual({
-      Component: expect.any(Object),
+      Component: expect.objectContaining({render: expect.any(Function)}),
+      Errors: expect.objectContaining({__asyncLoader: expect.any(Function)}),
+      Label: expect.objectContaining({__asyncLoader: expect.any(Function)}),
       field: {name: 'test', ref: 'value2', component: testComponent},
       ref: 'value2',
     });
   });
 
-  it('creates a modular field if wrapper is false', () => {
-    const field = createField({name: 'test', ref: ref('value'), component: 'input', wrapper: false});
-
-    expect(field).toStrictEqual({
-      Component: expect.any(Object),
-      Errors: expect.any(Object),
-      Label: expect.any(Object),
-      field: {name: 'test', ref: 'value', component: 'input', wrapper: false},
-      ref: 'value',
-    });
-  });
-
   describe('rendering inside forms', () => {
     afterEach(() => {
       cleanup();
@@ -88,7 +80,6 @@ describe('createField', () => {
         label: 'fieldLabel',
         ref: ref('value2'),
         component: testComponent,
-        wrapper: false,
       });
 
       const wrapper = render(form.Component, {

libs/core/src/utils/createField.ts

@@ -11,6 +11,7 @@ import {
   reactive,
   type ComputedRef,
   type Component,
+  defineAsyncComponent,
 } from 'vue';
 import {isOfType} from '@myparcel/ts-utils';
 import {
@@ -53,8 +54,8 @@ const createMainComponent = <Type = unknown, Props extends ComponentProps = Comp
   });
 };
 
-const createLabelComponent = (field: AnyElementConfiguration): Component =>
-  defineComponent({
+const createLabelComponent = (field: AnyElementConfiguration): Component => {
+  return defineComponent({
     setup() {
       const form = useForm();
       const element = computed(() => field.name && form.getField(field.name));
@@ -70,6 +71,7 @@ const createLabelComponent = (field: AnyElementConfiguration): Component =>
       return this.element && h('label', {for: this.element.attributes.id ?? this.element.name}, [this.element.label]);
     },
   });
+};
 
 const createErrorComponent = (field: AnyElementConfiguration): Component => {
   return defineComponent({
@@ -92,6 +94,10 @@ const createErrorComponent = (field: AnyElementConfiguration): Component => {
   });
 };
 
+const createAsyncComponent = <C extends Component>(cb: () => C) => {
+  return markRaw(defineAsyncComponent(() => Promise.resolve(cb())));
+};
+
 export const createField = <Type = unknown, Props extends ComponentProps = ComponentProps>(
   field: AnyElementConfiguration<Type, Props>,
 ): ModularCreatedElement<Type, Props> => {
@@ -103,10 +109,8 @@ export const createField = <Type = unknown, Props extends ComponentProps = Compo
     ...(isOfType<InteractiveElementConfiguration>(field, 'ref') && {
       ref: (field.ref ?? ref<Type>()) as Type extends undefined ? undefined : Ref<Type>,
 
-      ...(field.wrapper === false && {
-        Label: markRaw(createLabelComponent(field)),
-        Errors: markRaw(createErrorComponent(field)),
-      }),
+      Label: createAsyncComponent(() => createLabelComponent(field)),
+      Errors: createAsyncComponent(() => createErrorComponent(field)),
     }),
   });
 };