vue-vuetify: Extract control entries and fix usage instructions

fix #2378

The registry entries for the renderers were configured in the same files
as the renderers. This lead to the entries being removed due to tree shaking
during production builds using esbuild (as used by Vite).

This extracts all entries to separate files and improves the README to no
longer import the renderers asynchronously .

Author: lucas-koehler

packages/vue-vuetify/README.md

@@ -36,10 +36,9 @@ Use the `json-forms` component for each form you want to render and hand over th
 ```vue
 <script>
 import { JsonForms } from '@jsonforms/vue';
+import { extendedVuetifyRenderers } from '@jsonforms/vue-vuetify';
 import { markRaw } from 'vue';
 
-const { extendedVuetifyRenderers } = await import('@jsonforms/vue-vuetify');
-
 const renderers = markRaw([
   ...extendedVuetifyRenderers,
   // here you can add custom renderers

packages/vue-vuetify/src/additional/LabelRenderer.entry.ts

@@ -0,0 +1,11 @@
+import {
+  rankWith,
+  uiTypeIs,
+  type JsonFormsRendererRegistryEntry,
+} from '@jsonforms/core';
+import labelRenderer from './LabelRenderer.vue';
+
+export const entry: JsonFormsRendererRegistryEntry = {
+  renderer: labelRenderer,
+  tester: rankWith(1, uiTypeIs('Label')),
+};

packages/vue-vuetify/src/additional/LabelRenderer.vue

@@ -9,12 +9,7 @@
 </template>
 
 <script lang="ts">
-import {
-  rankWith,
-  uiTypeIs,
-  type JsonFormsRendererRegistryEntry,
-  type LabelElement,
-} from '@jsonforms/core';
+import { type LabelElement } from '@jsonforms/core';
 import {
   rendererProps,
   useJsonFormsLabel,
@@ -38,9 +33,4 @@ const labelRenderer = defineComponent({
 });
 
 export default labelRenderer;
-
-export const entry: JsonFormsRendererRegistryEntry = {
-  renderer: labelRenderer,
-  tester: rankWith(1, uiTypeIs('Label')),
-};
 </script>

packages/vue-vuetify/src/additional/ListWithDetailRenderer.entry.ts

@@ -0,0 +1,13 @@
+import {
+  and,
+  isObjectArray,
+  rankWith,
+  uiTypeIs,
+  type JsonFormsRendererRegistryEntry,
+} from '@jsonforms/core';
+import controlRenderer from './ListWithDetailRenderer.vue';
+
+export const entry: JsonFormsRendererRegistryEntry = {
+  renderer: controlRenderer,
+  tester: rankWith(4, and(uiTypeIs('ListWithDetail'), isObjectArray)),
+};

packages/vue-vuetify/src/additional/ListWithDetailRenderer.vue

@@ -318,11 +318,6 @@ const controlRenderer = defineComponent({
 });
 
 export default controlRenderer;
-
-export const entry: JsonFormsRendererRegistryEntry = {
-  renderer: controlRenderer,
-  tester: rankWith(4, and(uiTypeIs('ListWithDetail'), isObjectArray)),
-};
 </script>
 
 <style scoped>

packages/vue-vuetify/src/additional/index.ts

@@ -1,8 +1,8 @@
 export { default as LabelRenderer } from './LabelRenderer.vue';
 export { default as ListWithDetailRenderer } from './ListWithDetailRenderer.vue';
 
-import { entry as labelRendererEntry } from './LabelRenderer.vue';
-import { entry as listWithDetailRendererEntry } from './ListWithDetailRenderer.vue';
+import { entry as labelRendererEntry } from './LabelRenderer.entry';
+import { entry as listWithDetailRendererEntry } from './ListWithDetailRenderer.entry';
 
 export const additionalRenderers = [
   labelRendererEntry,

packages/vue-vuetify/src/complex/AllOfRenderer.entry.ts

@@ -0,0 +1,11 @@
+import {
+  isAllOfControl,
+  rankWith,
+  type JsonFormsRendererRegistryEntry,
+} from '@jsonforms/core';
+import controlRenderer from './AllOfRenderer.vue';
+
+export const entry: JsonFormsRendererRegistryEntry = {
+  renderer: controlRenderer,
+  tester: rankWith(3, isAllOfControl),
+};

packages/vue-vuetify/src/complex/AllOfRenderer.vue

@@ -36,11 +36,8 @@
 import {
   createCombinatorRenderInfos,
   findMatchingUISchema,
-  isAllOfControl,
-  rankWith,
   type CombinatorSubSchemaRenderInfo,
   type ControlElement,
-  type JsonFormsRendererRegistryEntry,
   type UISchemaElement,
 } from '@jsonforms/core';
 import {
@@ -90,9 +87,4 @@ const controlRenderer = defineComponent({
 });
 
 export default controlRenderer;
-
-export const entry: JsonFormsRendererRegistryEntry = {
-  renderer: controlRenderer,
-  tester: rankWith(3, isAllOfControl),
-};
 </script>

packages/vue-vuetify/src/complex/AnyOfRenderer.entry.ts

@@ -0,0 +1,11 @@
+import {
+  isAnyOfControl,
+  rankWith,
+  type JsonFormsRendererRegistryEntry,
+} from '@jsonforms/core';
+import controlRenderer from './AnyOfRenderer.vue';
+
+export const entry: JsonFormsRendererRegistryEntry = {
+  renderer: controlRenderer,
+  tester: rankWith(3, isAnyOfControl),
+};

packages/vue-vuetify/src/complex/AnyOfRenderer.vue

@@ -39,9 +39,6 @@ import {
   type CombinatorSubSchemaRenderInfo,
   type ControlElement,
   createCombinatorRenderInfos,
-  isAnyOfControl,
-  type JsonFormsRendererRegistryEntry,
-  rankWith,
 } from '@jsonforms/core';
 import {
   DispatchRenderer,
@@ -94,9 +91,4 @@ const controlRenderer = defineComponent({
 });
 
 export default controlRenderer;
-
-export const entry: JsonFormsRendererRegistryEntry = {
-  renderer: controlRenderer,
-  tester: rankWith(3, isAnyOfControl),
-};
 </script>

packages/vue-vuetify/src/complex/ArrayControlRenderer.entry.ts

@@ -0,0 +1,13 @@
+import {
+  isObjectArrayControl,
+  isPrimitiveArrayControl,
+  or,
+  rankWith,
+  type JsonFormsRendererRegistryEntry,
+} from '@jsonforms/core';
+import controlRenderer from './ArrayControlRenderer.vue';
+
+export const entry: JsonFormsRendererRegistryEntry = {
+  renderer: controlRenderer,
+  tester: rankWith(3, or(isObjectArrayControl, isPrimitiveArrayControl)),
+};

packages/vue-vuetify/src/complex/ArrayControlRenderer.vue

@@ -181,12 +181,7 @@ import {
   Resolve,
   composePaths,
   createDefaultValue,
-  isObjectArrayControl,
-  isPrimitiveArrayControl,
-  or,
-  rankWith,
   type ControlElement,
-  type JsonFormsRendererRegistryEntry,
   type JsonSchema,
 } from '@jsonforms/core';
 import {
@@ -303,11 +298,6 @@ const controlRenderer = defineComponent({
 });
 
 export default controlRenderer;
-
-export const entry: JsonFormsRendererRegistryEntry = {
-  renderer: controlRenderer,
-  tester: rankWith(3, or(isObjectArrayControl, isPrimitiveArrayControl)),
-};
 </script>
 
 <style scoped>

packages/vue-vuetify/src/complex/EnumArrayRenderer.entry.ts

@@ -0,0 +1,42 @@
+import {
+  and,
+  hasType,
+  rankWith,
+  schemaMatches,
+  schemaSubPathMatches,
+  uiTypeIs,
+  type JsonFormsRendererRegistryEntry,
+  type JsonSchema,
+} from '@jsonforms/core';
+import controlRenderer from './EnumArrayRenderer.vue';
+
+export const entry: JsonFormsRendererRegistryEntry = {
+  renderer: controlRenderer,
+  tester: rankWith(
+    5,
+    and(
+      uiTypeIs('Control'),
+      and(
+        schemaMatches(
+          (schema) =>
+            hasType(schema, 'array') &&
+            !Array.isArray(schema.items) &&
+            schema.uniqueItems === true,
+        ),
+        schemaSubPathMatches('items', (schema) => {
+          return hasOneOfItems(schema) || hasEnumItems(schema);
+        }),
+      ),
+    ),
+  ),
+};
+
+const hasOneOfItems = (schema: JsonSchema): boolean =>
+  schema.oneOf !== undefined &&
+  schema.oneOf.length > 0 &&
+  (schema.oneOf as JsonSchema[]).every((entry: JsonSchema) => {
+    return entry.const !== undefined;
+  });
+
+const hasEnumItems = (schema: JsonSchema): boolean =>
+  schema.type === 'string' && schema.enum !== undefined;

packages/vue-vuetify/src/complex/EnumArrayRenderer.vue

@@ -19,18 +19,7 @@
 </template>
 
 <script lang="ts">
-import {
-  and,
-  type ControlElement,
-  hasType,
-  type JsonFormsRendererRegistryEntry,
-  type JsonSchema,
-  rankWith,
-  schemaMatches,
-  schemaSubPathMatches,
-  uiTypeIs,
-  composePaths,
-} from '@jsonforms/core';
+import { type ControlElement, composePaths } from '@jsonforms/core';
 import { VCheckbox, VContainer, VRow, VCol } from 'vuetify/components';
 import {
   rendererProps,
@@ -71,35 +60,4 @@ const controlRenderer = defineComponent({
 });
 
 export default controlRenderer;
-
-const hasOneOfItems = (schema: JsonSchema): boolean =>
-  schema.oneOf !== undefined &&
-  schema.oneOf.length > 0 &&
-  (schema.oneOf as JsonSchema[]).every((entry: JsonSchema) => {
-    return entry.const !== undefined;
-  });
-
-const hasEnumItems = (schema: JsonSchema): boolean =>
-  schema.type === 'string' && schema.enum !== undefined;
-
-export const entry: JsonFormsRendererRegistryEntry = {
-  renderer: controlRenderer,
-  tester: rankWith(
-    5,
-    and(
-      uiTypeIs('Control'),
-      and(
-        schemaMatches(
-          (schema) =>
-            hasType(schema, 'array') &&
-            !Array.isArray(schema.items) &&
-            schema.uniqueItems === true,
-        ),
-        schemaSubPathMatches('items', (schema) => {
-          return hasOneOfItems(schema) || hasEnumItems(schema);
-        }),
-      ),
-    ),
-  ),
-};
 </script>

packages/vue-vuetify/src/complex/ObjectRenderer.entry.ts

@@ -0,0 +1,11 @@
+import {
+  isObjectControl,
+  rankWith,
+  type JsonFormsRendererRegistryEntry,
+} from '@jsonforms/core';
+import controlRenderer from './ObjectRenderer.vue';
+
+export const entry: JsonFormsRendererRegistryEntry = {
+  renderer: controlRenderer,
+  tester: rankWith(2, isObjectControl),
+};

packages/vue-vuetify/src/complex/ObjectRenderer.vue

@@ -111,9 +111,4 @@ const controlRenderer = defineComponent({
 });
 
 export default controlRenderer;
-
-export const entry: JsonFormsRendererRegistryEntry = {
-  renderer: controlRenderer,
-  tester: rankWith(2, isObjectControl),
-};
 </script>

packages/vue-vuetify/src/complex/OneOfRenderer.entry.ts

@@ -0,0 +1,11 @@
+import {
+  isOneOfControl,
+  rankWith,
+  type JsonFormsRendererRegistryEntry,
+} from '@jsonforms/core';
+import controlRenderer from './OneOfRenderer.vue';
+
+export const entry: JsonFormsRendererRegistryEntry = {
+  renderer: controlRenderer,
+  tester: rankWith(3, isOneOfControl),
+};

packages/vue-vuetify/src/complex/OneOfRenderer.vue

@@ -80,9 +80,6 @@ import {
   type ControlElement,
   createCombinatorRenderInfos,
   createDefaultValue,
-  isOneOfControl,
-  type JsonFormsRendererRegistryEntry,
-  rankWith,
 } from '@jsonforms/core';
 import {
   DispatchRenderer,
@@ -213,9 +210,4 @@ const controlRenderer = defineComponent({
 });
 
 export default controlRenderer;
-
-export const entry: JsonFormsRendererRegistryEntry = {
-  renderer: controlRenderer,
-  tester: rankWith(3, isOneOfControl),
-};
 </script>

packages/vue-vuetify/src/complex/OneOfTabRenderer.entry.ts

@@ -0,0 +1,13 @@
+import {
+  and,
+  isOneOfControl,
+  optionIs,
+  rankWith,
+  type JsonFormsRendererRegistryEntry,
+} from '@jsonforms/core';
+import controlRenderer from './OneOfTabRenderer.vue';
+
+export const entry: JsonFormsRendererRegistryEntry = {
+  renderer: controlRenderer,
+  tester: rankWith(4, and(isOneOfControl, optionIs('variant', 'tab'))),
+};

packages/vue-vuetify/src/complex/OneOfTabRenderer.vue

@@ -59,15 +59,10 @@
 
 <script lang="ts">
 import {
-  and,
   type CombinatorSubSchemaRenderInfo,
   type ControlElement,
   createCombinatorRenderInfos,
   createDefaultValue,
-  isOneOfControl,
-  type JsonFormsRendererRegistryEntry,
-  optionIs,
-  rankWith,
 } from '@jsonforms/core';
 import {
   DispatchRenderer,
@@ -187,9 +182,4 @@ const controlRenderer = defineComponent({
 });
 
 export default controlRenderer;
-
-export const entry: JsonFormsRendererRegistryEntry = {
-  renderer: controlRenderer,
-  tester: rankWith(4, and(isOneOfControl, optionIs('variant', 'tab'))),
-};
 </script>