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 .
eclipsesource · Oct 18, 2024 · d6293f3 · d6293f3
1 parent cf45f9b
commit d6293f3
Show file tree

Hide file tree

Showing 89 changed files with 563 additions and 509 deletions.
diff --git a/packages/vue-vuetify/README.md b/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

diff --git a/packages/vue-vuetify/src/additional/LabelRenderer.entry.ts b/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')),
+};
diff --git a/packages/vue-vuetify/src/additional/LabelRenderer.vue b/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>
diff --git a/packages/vue-vuetify/src/additional/ListWithDetailRenderer.entry.ts b/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)),
+};
diff --git a/packages/vue-vuetify/src/additional/ListWithDetailRenderer.vue b/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>

diff --git a/packages/vue-vuetify/src/additional/index.ts b/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,

diff --git a/packages/vue-vuetify/src/complex/AllOfRenderer.entry.ts b/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),
+};
diff --git a/packages/vue-vuetify/src/complex/AllOfRenderer.vue b/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>
diff --git a/packages/vue-vuetify/src/complex/AnyOfRenderer.entry.ts b/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),
+};
diff --git a/packages/vue-vuetify/src/complex/AnyOfRenderer.vue b/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>
diff --git a/packages/vue-vuetify/src/complex/ArrayControlRenderer.entry.ts b/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)),
+};
diff --git a/packages/vue-vuetify/src/complex/ArrayControlRenderer.vue b/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>

diff --git a/packages/vue-vuetify/src/complex/EnumArrayRenderer.entry.ts b/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;
diff --git a/packages/vue-vuetify/src/complex/EnumArrayRenderer.vue b/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>
diff --git a/packages/vue-vuetify/src/complex/ObjectRenderer.entry.ts b/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),
+};
diff --git a/packages/vue-vuetify/src/complex/ObjectRenderer.vue b/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>
diff --git a/packages/vue-vuetify/src/complex/OneOfRenderer.entry.ts b/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),
+};
diff --git a/packages/vue-vuetify/src/complex/OneOfRenderer.vue b/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>
diff --git a/packages/vue-vuetify/src/complex/OneOfTabRenderer.entry.ts b/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'))),
+};
diff --git a/packages/vue-vuetify/src/complex/OneOfTabRenderer.vue b/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>