eclipsesource / eclipsesource/jsonforms
Form Control for Array Element disappears when NODE_ENV = production in Vue 3 using vue-vanilla renderers
- Dominant language
- TypeScript
- Stars
- 2.7k
- Forks
- 424
- Avg merge
- 17d 8h
- Merged PRs (30d)
- 1
Description
### Describe the bug
I use the same code base locally and switch NODE_ENV between 'development' and 'production' to test different environments.
When I use the vue-vanilla renderers, my form looks the same in both environments. When I use my custom ArrayListRenderer, it is only rendered when NODE_ENV is not "production" (it can be "development" or be unset).
**HTML rendered in "development" mode:**
```html
...
```
**HTML rendered in "production" mode:**
```html
```
There's no JS error, rendering in "production" mode.
**Custom ArrayListRenderer:**
```vue
{{ control.label }}
import {
composePaths,
createDefaultValue,
JsonFormsRendererRegistryEntry,
rankWith,
ControlElement,
schemaTypeIs,
} from "@jsonforms/core";
import { defineComponent } from "vue";
import {
DispatchRenderer,
rendererProps,
useJsonFormsArrayControl,
RendererProps,
} from "@jsonforms/vue";
import { useVanillaArrayControl } from "@jsonforms/vue-vanilla";
import ArrayListElement from "./ArrayListElement.vue";
const controlRenderer = defineComponent({
name: "array-list-renderer",
components: {
ArrayListElement,
DispatchRenderer,
},
props: {
...rendererProps<ControlElement>(),
},
setup(props: RendererProps<ControlElement>) {
return useVanillaArrayControl(useJsonFormsArrayControl(props));
},
computed: {
noData(): boolean {
return !this.control.data || this.control.data.length === 0;
},
},
methods: {
composePaths,
createDefaultValue,
addButtonClick() {
this.addItem(
this.control.path,
createDefaultValue(this.control.schema)
)();
},
},
});
export default controlRenderer;
const entry: JsonFormsRendererRegistryEntry = {
renderer: controlRenderer,
tester: rankWith(3, schemaTypeIs("array")),
};
export { entry };
```
### Expected behavior
I would expect the control to render with NODE_ENV = "production"
### Steps to reproduce the issue
to reproduce, use the vue-vanilla example project and recreate my custom renderer.
register it as follows:
```typescript
import { vanillaRenderers } from "@jsonforms/vue-vanilla";
import { entry as ArrayListRenderer } from "@/components/jsonforms/ArrayListRenderer.vue";
const myRenderers = Object.freeze([...vanillaRenderers, ArrayListRenderer]);
```
use the following schema:
```typescript
const settingsProperties = {
adminMail: {
type: "string",
},
locale: {
type: "string",
},
hscodes: {
type: "array",
title: "HSCODES",
items: {
type: "object",
properties: {
code: {
type: "string",
},
label: {
type: "string",
},
},
},
},
};
```
and this UiSchema:
```typescript
{
type: "VerticalLayout",
elements: [
{
type: "Control",
scope: "#/properties/adminMail",
},
{
type: "Control",
scope: "#/properties/locale",
},
{
type: "Control",
scope: "#/properties/hscodes",
options: {
childLabelProp: "label",
detail: {
type: "HorizontalLayout",
initiallyExpanded: false,
elements: [
{
type: "Control",
scope: "#/properties/label",
},
{
type: "Control",
scope: "#/properties/code",
},
],
},
},
},
],
}
```
and this example data:
```typescript
{
adminMail: "info@example.org",
locale: "de-CH",
hscodes: [
{ label: "Sculpture", code: "2345-90.1" },
{ label: "Painting", code: "454.343-1" },
],
}
```
### Screenshots


### In which browser are you experiencing the issue?
Version 108.0.5359.124 (Offizieller Build) (arm64)
### Which Version of JSON Forms are you using?
v3.0.0
### Framework
Vue 3
### RendererSet
Vanilla
### Additional context
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.