chore: add attributes to cem

[nnaydenow]

Fill attributes array with properties that have attribute representation for custom elements. In addition provide vscode.html-custom-data.json and web-types.json for better integration with IDEs.

Usage:

• JetBrains automatically detect when web-types.json exist
• For VS code manual work has to be done
  • .vscode/settings.json is adjusted for improve development in ui5-webcomponents packages (you need to build the project for autocompletion)
  • if you are using ui5-webcomponents inside your project you have to create .vscode/settings.json on your own and to add:

{
   "html.customData": [
       "./node_modules/@ui5/webcomponents/dist/vscode.html-custom-data.json",
       "./node_modules/@ui5/webcomponents-fiori/dist/vscode.html-custom-data.json"
   ]
}

Fixes: #8392

[vladitasev]

Looks fine by me, let's merge tomorrow after the 1.23.1 release

[veith]

I have run GenerateAPI and used the custom-elements.json. The attributes are working as expected.

Thank you

[veith]

@nnaydenow Are you sure with the types?

The old generator crated the attributes like this:

{
              "default": "\"Default\"",
              "deprecated": false,
              "readonly": "false",
              "fieldName": "design",
              "name": "design",
              "type": {
                "text": "sap.ui.webc.main.types.IconDesign"
              },
              "description": "Defines the component semantic design."
            },

The current one will produce this :

{
              "description": "Defines the component semantic design.",
              "name": "design",
              "default": "\"Default\"",
              "fieldName": "design",
              "type": {
                "text": "\"Neutral\" | \"Information\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Default\" | \"Contrast\" | \"NonInteractive\""
              }
            },

For the web-types.json the type definition like this is fine, because you get code completion.

I am not sure , if writing the type like it is written in the member, would be more correct.

"type": {
                "text": "IconDesign",
                "references": [
                  {
                    "name": "IconDesign",
                    "package": "@ui5/webcomponents",
                    "module": "dist/types/IconDesign.js"
                  }
                ]
              },

But at the end of the day the attributes are always strings in html, the notation you used is more useful.

BTW: All my generator pipelines are working fine with your version.

[nnaydenow]

Hi @veith,

I've made it with this idea. Class field are described with TypeScript type and reference to it but for attributes I'm resolving the type to the values that attribute will accept to achieve the code completion suggestions. I'm using VS Code and it doesn't understand these descriptors if they have references so that's the reason why I though it would be better if the attributes values are the enums values resolved to strings.

[veith]

Hi @veith,

I've made it with this idea. Class field are described with TypeScript type and reference to it but for attributes I'm resolving the type to the values that attribute will accept to achieve the code completion suggestions. I'm using VS Code and it doesn't understand these descriptors if they have references so that's the reason why I though it would be better if the attributes values are the enums values resolved to strings.

I tried it in WebStorm, having the possible values as code completion is a huge improvement.

Thank you again.