fix(vue-type-check): fix vue type check issues

[HELWATANY]

Description

• 🏷️ Added helper type EditorMode
• 🏷️ Added the boolAttrs explicitly to the props to enhance type check
• 🐛 Fixed vue type check errors

Linked Issues

#86

Additional context

• I Added the boolAttrs explicitly to the props to enhance type check

[cloydlau]

Thanks for the efforts, I have a few questions:

1. I tried it, and the line that actually works is: [modelValueProp]: Object. But doesn't this declare the type of the binding value as Object (which should be any)?
2. Why do users still need EditorMode when they can already use import type { Mode } from 'vanilla-jsoneditor'?
3. Writing boolAttrs statically in props is indeed more TypeScript-friendly. However, it is not conducive to the maintainability of the code. If the boolean properties of svelte-jsoneditor are added, modified, or removed, then json-editor-vue will need to follow these changes, and the adjustments aren't limited to just one place. Moreover, this approach only enhances the TypeScript-friendliness for boolean properties. The issues with other types of properties still remain. I wonder if there's a better way.

[HELWATANY]

Thanks for the efforts, I have a few questions:

1. I tried it, and the line that actually works is: [modelValueProp]: Object. But doesn't this declare the type of the binding value as Object (which should be any)?

I thought the binding value should be an object, correct?

Also, I updated the propsGlobal and attrsGlobal types, the <Record> key type should be a string

2. Why do users still need EditorMode when they can already use import type { Mode } from 'vanilla-jsoneditor'?

I'm still using the Mode from vanilla-jsoneditor but I convert it to string literal union type

Please check the following links

• Typescript playground to explain using enums as string literal type
• Stack overflow

3. Writing boolAttrs statically in props is indeed more TypeScript-friendly. However, it is not conducive to the maintainability of the code. If the boolean properties of svelte-jsoneditor are added, modified, or removed, then json-editor-vue will need to follow these changes, and the adjustments aren't limited to just one place. Moreover, this approach only enhances the TypeScript-friendliness for boolean properties. The issues with other types of properties still remain. I wonder if there's a better way.

Unfortunately there isn't a better way to do this, you need to explicitly define the props so that the IntelliSense and TypeScript can check and guide the users while using the library leading to a better DC

[cloydlau]

I thought the binding value should be an object, correct?

The binding value can be of any type, as mentioned in the document.

the <Record> key type should be a string

Actually it can also be other types such as symbol.

I'm still using the Mode from vanilla-jsoneditor but I convert it to string literal union type

I understand that this allows the use of string instead of enum, but what is the purpose of doing so? This is exactly the change in version 0.15.0. The aim is to maintain consistency with svelte-jsoneditor, and using enum doesn't lead to spelling errors.

Unfortunately there isn't a better way to do this, you need to explicitly define the props so that the IntelliSense and TypeScript can check and guide the users while using the library leading to a better DC

If there's no better solution, I suggest keeping it as it is since it doesn't resolve the two issues I mentioned. What do you think?

[HELWATANY]

I thought the binding value should be an object, correct?

The binding value can be of any type, as mentioned in the document.

I reviewed the document and found that the type of the model value in the examples is object, even when you declare the model value using const value = ref() this makes the value a ref of null and the typeof null is object.

When declaring the type of the model value in the props it can't be {} it should follow the Vue type declaration that was the source of the issue.

the <Record> key type should be a string

Actually it can also be other types such as symbol.

You are correct, updated the key type to string | number | symbol as these are the only supported types for an object key

I'm still using the Mode from vanilla-jsoneditor but I convert it to string literal union type

I understand that this allows the use of string instead of enum, but what is the purpose of doing so? This is exactly the change in version 0.15.0. The aim is to maintain consistency with svelte-jsoneditor, and using enum doesn't lead to spelling errors.

Gotcha, reverted to the Mode enum

Unfortunately there isn't a better way to do this, you need to explicitly define the props so that the IntelliSense and TypeScript can check and guide the users while using the library leading to a better DC

If there's no better solution, I suggest keeping it as it is since it doesn't resolve the two issues I mentioned. What do you think?

I agree, reverted this change since it's out of the scope of the fix, we can figure out a better way latter.