Attribute enum autosuggestion

[gejgalis]

I have prepared my-foo tag with size attribute which is enumeration of values m and s. WebStorm/IntelliJ doesn't suggest those values.

Is my JSON correct or this is missing feature in WebStorm/IntelliJ ?

Having such feature would be veeeeeeery useful for cases like:

• colour palettes
• sizes
• types of buttons
• etc...

{
  "name": "my-foo",
  "attributes": [
    {
      "name": "size",
      "value": {
        "kind": "enum",
        "items": [
          "m",
          "s"
        ]
      },
      "default": "\"m\""
    }
  ]
}

[piotrtomiak]

@gejgalis Your JSON is correct. The easiest way to ensure is to validate it against the schema :) Unfortunately there is still quite a few unimplemented features in the IDE. Looks like I need to create a table, which summarizes supported features of web-types in WebStorm (and other IDEs)

[gejgalis]

@piotrtomiak features table with planned and already implemented would be great!

[gejgalis]

Linking with YouTrack issue: https://youtrack.jetbrains.com/issue/WEB-42445

[jonhuteau]

Any news on this @piotrtomiak ?

[piotrtomiak]

@jonhuteau I plan to improve web-types support in JB IDEs within next 2-3 months, this should be one of the included improvements.

[itsJohnnyGrid]

@piotrtomiak any news? :)

The line with @values disappears now. Please add at least support of multi line JSDoc comments. It will be super nice to show this line for developer in IDE hint.

[piotrtomiak]

@itsJohnnyGrid Are you using vue-docgen-webtypes to generate web-types? It depends on vue-docgen-api, which is part of vue-styleguidist project. It looks like vue-docgen-api is not processing JSDoc @type for props, so it cannot pick up values expressed in that way. If they can process the type from JSDoc, than it could be passed to web-types and the code completion would work. E.g.:

props: {
    /**
     * The size of the button.
     * @type 'sm' | 'md' | 'lg'
     */
    size: {
      type: String,
      default: "md"
    }
  },

should result in web-types:

"attributes": [
  {
    "name": "size",
    "description": "The size of the button.",
    "value": {
      "kind": "expression",
      "type": "'sm' | 'md' | 'lg'"
    }
    "default": "\"md\""
  }
]

and that in turn will correctly provide possible values:

Please file an issue with the vue-styleguidist project.

[jpradelle]

To have it work I had to change kind by "plain" instead of "expression":

"attributes": [
  {
    "name": "size",
    "description": "The size of the button.",
    "value": {
      "kind": "plain",
      "type": "'sm' | 'md' | 'lg'"
    }
    "default": "\"md\""
  }
]

[piotrtomiak]

@jpradelle It depends on whether you expect a property binding, or simple text in the attribute value. My example above was not entirely correct indeed - it is using old format for Vue files, where attributes are translated as Vue component props.

[MatthD]

@jpradelle @piotrtomiak When I edit my generated files it works too, but what is the syntax to have this compiled ?

 /**
     * The size of the select.
     * @type {"md" | "lg"}
     */
    size: {
      type: String,
      default: "md",
      validator: (v: string) => ["md", "lg"].indexOf(v) !== -1,
    },

Compiles to:

            {
              "name": "size",
              "description": "The size of the select.",
              "value": {
                "kind": "expression",
                "type": "string"
              },
              "default": "\"md\""
            }

[jpradelle]

@MatthD When you say "compiled" do you mean having your code parsed and webtypes file generated by web-component-analyzer-webtypes ? If so your syntax is good, but you have to use the latest version: 2.0.8