nativeTags is hard to use

[ModyQyW]

Hi. Thanks for your work first!

I am @uni-helper/uni-app-types author and the package is providing uni-app elements types. I notice that v1.0.10 adds nativeTags and removes experimentalRuntimeMode. I also see #2065.

I think nativeTags is hard to use. With #2065 example, as shown below.

{
  "vueCompilerOptions": {
    "nativeTags": [
      "view",
      "scroll-view"
    ]
  },
}

It doesn't parse the correct types of view and scroll-view, but parse the other elements.

To accurately parse types, I think I need to set a long nativeTags, which includes https://github.com/johnsoncodehk/volar/blob/master/vue-language-tools/vue-language-core/src/utils/ts.ts#L121-L128 elements and exclude uni-app elements. Here I exclude view, text, progress and so on.

{
  "vueCompilerOptions": {
    "nativeTags": [
      "html",
      "body",
      "base",
      "head",
      "link",
      "meta",
      "style",
      "title",
      "address",
      "article",
      "aside",
      "footer",
      "header",
      "hgroup",
      "h1",
      "h2",
      "h3",
      "h4",
      "h5",
      "h6",
      "nav",
      "section",
      "div",
      "dd",
      "dl",
      "dt",
      "figcaption",
      "figure",
      "picture",
      "hr",
      "img",
      "li",
      "main",
      "ol",
      "p",
      "pre",
      "ul",
      "a",
      "b",
      "abbr",
      "bdi",
      "bdo",
      "br",
      "cite",
      "code",
      "data",
      "dfn",
      "em",
      "i",
      "kbd",
      "mark",
      "q",
      "rp",
      "rt",
      "ruby",
      "s",
      "samp",
      "small",
      "span",
      "strong",
      "sub",
      "sup",
      "time",
      "u",
      "var",
      "wbr",
      "area",
      "track",
      "embed",
      "object",
      "param",
      "source",
      "script",
      "noscript",
      "del",
      "ins",
      "caption",
      "col",
      "colgroup",
      "table",
      "thead",
      "tbody",
      "td",
      "th",
      "tr",
      "datalist",
      "fieldset",
      "legend",
      "meter",
      "optgroup",
      "option",
      "output",
      "select",
      "details",
      "dialog",
      "menu",
      "summary",
      "template",
      "blockquote",
      "iframe",
      "tfoot",
      "svg",
      "animate",
      "animateMotion",
      "animateTransform",
      "circle",
      "clipPath",
      "color-profile",
      "defs",
      "desc",
      "discard",
      "ellipse",
      "feBlend",
      "feColorMatrix",
      "feComponentTransfer",
      "feComposite",
      "feConvolveMatrix",
      "feDiffuseLighting",
      "feDisplacementMap",
      "feDistanceLight",
      "feDropShadow",
      "feFlood",
      "feFuncA",
      "feFuncB",
      "feFuncG",
      "feFuncR",
      "feGaussianBlur",
      "feImage",
      "feMerge",
      "feMergeNode",
      "feMorphology",
      "feOffset",
      "fePointLight",
      "feSpecularLighting",
      "feSpotLight",
      "feTile",
      "feTurbulence",
      "filter",
      "foreignObject",
      "g",
      "hatch",
      "hatchpath",
      "image",
      "line",
      "linearGradient",
      "marker",
      "mask",
      "mesh",
      "meshgradient",
      "meshpatch",
      "meshrow",
      "metadata",
      "mpath",
      "path",
      "pattern",
      "polygon",
      "polyline",
      "radialGradient",
      "rect",
      "set",
      "solidcolor",
      "stop",
      "symbol",
      "textPath",
      "tspan",
      "unknown",
      "use",
      "slot",
      "component"
    ]
  },
}

Can I have a better way to specify uni-app elements without such a long list?

[ModyQyW]

demo

I am using take over mode.

[johnsoncodehk]

If you see the change, "experimentalRuntimeMode": "runtime-uni-app" is just equivalent to "nativeTags": ["block", "component", "template", "slot"], you don't need the long list if "experimentalRuntimeMode": "runtime-uni-app" is working to you before.

If you really need the long list, you can modify the default long list nativeTags via plugin API your self:

{
  "vueCompilerOptions": {
    "plugins": ["./your-plugin"]
  }
}

import { VueLanguagePlugin } from '../types';

const plugin: VueLanguagePlugin = (cxt) => {

	cxt.vueCompilerOptions.nativeTags = cxt.vueCompilerOptions.nativeTags.filter(...);

	return { version: 1 };
};
export = plugin;

[ModyQyW]

Ah I just miss that change. Thanks for pointing it out and thanks again for your great work! ❤