I found inspiration in an example from this website to develop a custom renderer for JsonForms using Vue:
However, as I implement this example in my .vue file within the script tags, I encounter an error UnexpectedToken right after declaring the props. It happens immediately after the generic type definition and the brackets for the parameters (the function has no parameters).
This is the TypeScript code snippet I am working with:
<script lang="ts">
import { ControlElement } from '@jsonforms/core';
import { RendererProps, rendererProps, useJsonFormsControl } from '@jsonforms/vue';
import { defineComponent } from 'vue';
import { rankWith, scopeEndsWith, JsonFormsRendererRegistryEntry } from '@jsonforms/core';
const CustomCheckboxRenderer = defineComponent({
name: 'custom-checkbox-renderer',
props: {
...rendererProps<ControlElement>(), <---- The error occurs on this line right after the >
},
emits: ['input'],
setup(props: RendererProps<ControlElement>) {
return useJsonFormsControl(props);
},
methods:{
onChange(event: Event){
this.handleChange(this.control.path, (event.target as HTMLInputElement).checked);
}
}
});
export default CustomCheckboxRenderer;
export const entry: JsonFormsRendererRegistryEntry = {
renderer: CustomCheckboxRenderer,
tester: rankWith(3, scopeEndsWith('tter')),
}
</script>
Here is the error message I received:
ERROR in [eslint]
C:\Projects\GH\app\src\renderers\MyCheckboxRenderer.vue
26:39 error Parsing error: Unexpected token (11:39)
✖ 1 problem (1 error, 0 warnings)
I suspect it could be an issue with the eslint configuration. I have tried using different parsers, but it leads to problems in other parts of my project. Below is my eslint configuration:
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/vue3-essential',
'eslint:recommended'
],
parserOptions: {
parser: '@babel/eslint-parser'
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
}
}