fix(vue): view renderers return the real components so DynamiaViewer draws tables, forms and CRUDs

platform/packages/vue/src/components/Viewer.test.ts

@@ -7,6 +7,8 @@ import { View, ViewRendererRegistry } from '@dynamia-tools/ui-core';
 import type { ViewType } from '@dynamia-tools/ui-core';
 import Viewer from './Viewer.vue';
 import { DYNAMIA_CLIENT_KEY } from '../composables/useDynamiaClient.js';
+import { VueTableRenderer } from '../renderers/VueTableRenderer.js';
+import { VueTableView } from '../views/VueTableView.js';
 
 const TABLE: ViewType = { name: 'table' };
 
@@ -104,3 +106,25 @@ describe('DynamiaViewer', () => {
     expect(wrapper.find('.dynamia-viewer-error').exists()).toBe(true);
   });
 });
+
+describe('DynamiaViewer with the real table renderer', () => {
+  it('draws the table of a plain descriptor, with no app.use(DynamiaVue)', async () => {
+    ViewRendererRegistry.register(TABLE, new VueTableRenderer());
+    ViewRendererRegistry.registerViewFactory(TABLE, (descriptor, metadata) => new VueTableView(descriptor, metadata));
+
+    const wrapper = mount(Viewer, {
+      props: {
+        descriptor: { view: 'table', fields: { name: { label: 'Name' }, total: { label: 'Total', component: 'label', params: { converter: 'converters.Currency' } } } },
+        source: [{ name: 'Ana', total: 1500 }, { name: 'Luis', total: 20 }],
+        readOnly: true,
+      },
+    });
+    await vi.waitFor(() => expect(wrapper.find('.dynamia-table-grid').exists()).toBe(true));
+
+    const text = wrapper.find('.dynamia-table-grid').text();
+    expect(text).toContain('Name');
+    expect(text).toContain('Ana');
+    expect(text).toContain('1,500.00');
+    expect(wrapper.findAll('.dynamia-table-row')).toHaveLength(2);
+  });
+});

platform/packages/vue/src/renderers/VueCrudRenderer.ts

@@ -1,6 +1,7 @@
 // VueCrudRenderer: implements CrudRenderer<Component> for Vue
 
 import type { Component } from 'vue';
+import CrudComponent from '../components/Crud.vue';
 import { ViewTypes } from '@dynamia-tools/ui-core';
 import type { CrudRenderer } from '@dynamia-tools/ui-core';
 import type { CrudView } from '@dynamia-tools/ui-core';
@@ -13,6 +14,6 @@ export class VueCrudRenderer implements CrudRenderer<Component> {
   readonly supportedViewType = ViewTypes.Crud;
 
   render(_view: CrudView): Component {
-    return { name: 'DynamiaCrud' } as Component;
+    return CrudComponent as Component;
   }
 }

platform/packages/vue/src/renderers/VueFormRenderer.ts

@@ -1,6 +1,7 @@
 // VueFormRenderer: implements FormRenderer<Component> for Vue
 
 import type { Component } from 'vue';
+import FormComponent from '../components/Form.vue';
 import { ViewTypes } from '@dynamia-tools/ui-core';
 import type { FormRenderer } from '@dynamia-tools/ui-core';
 import type { FormView } from '@dynamia-tools/ui-core';
@@ -14,6 +15,6 @@ export class VueFormRenderer implements FormRenderer<Component> {
 
   render(_view: FormView): Component {
     // Lazy import to avoid circular dependency at module initialization time
-    return { name: 'DynamiaForm' } as Component;
+    return FormComponent as Component;
   }
 }

platform/packages/vue/src/renderers/VueTableRenderer.ts

@@ -1,6 +1,7 @@
 // VueTableRenderer: implements TableRenderer<Component> for Vue
 
 import type { Component } from 'vue';
+import TableComponent from '../components/Table.vue';
 import { ViewTypes } from '@dynamia-tools/ui-core';
 import type { TableRenderer } from '@dynamia-tools/ui-core';
 import type { TableView } from '@dynamia-tools/ui-core';
@@ -13,6 +14,6 @@ export class VueTableRenderer implements TableRenderer<Component> {
   readonly supportedViewType = ViewTypes.Table;
 
   render(_view: TableView): Component {
-    return { name: 'DynamiaTable' } as Component;
+    return TableComponent as Component;
   }
 }