eclipsesource / eclipsesource/jsonforms

Form Control for Array Element disappears when NODE_ENV = production in Vue 3 using vue-vanilla renderers

Open
#2,077 7 comments 0 reactions 0 assignees View on GitHub
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 }}









No Items

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

![image](https://user-images.githubusercontent.com/4996592/211914905-93c5dc78-4a2a-45c5-bc41-414db02f4504.png)
![image](https://user-images.githubusercontent.com/4996592/211915165-a75c87b6-ab26-47c4-ae42-47b5d74b509c.png)

### 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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.