v-bind:is restrict allowed components

[u-rogel]

Vue2 has the directive :is for dynamic components. It is very useful feature but it is very hard to debug and reason about.
The issues I found so far:

1. If the utilizing component has many components injected through the components property, it is very hard to figure out which components actually can be rendered through the dynamic-component.
2. Eslint can't understand which components are expected to be used. Hence, if the directive :is appears in the template, all components are automatically treated as used. Leads to a none clean file as the component will evolve.
3. If I need more then one :is in the template it makes it impossible to know which component belongs where.

My propsal: extanding the current :is directive to receive either an object with two properties: component and options, other suggestion might be even better and array of two elements: component and options.

I know there is the option to pass the decision of which component will be rendered dynamically through a computed property, but Eslint will not be able to follow it and having it straight forward on to the :is would be more developer friendly.

Would love to hear what you guys think.

[privatenumber]

It's not clear to me what your ultimate motivation is (static analysis? debugging? )... but I don't see how your proposal to change is to an object or array makes it any easier to statically analyze or debug.

FYI you can create your own custom <component> like this and add the limitations and API you like. If you want to accept strings for the component name, convert it into a functional component and it will look in the parent's component registry.

const CustomDynamicComponent = {
	props: ['is'],

	render(h) {
		return h(this.is, this.$attrs, this.$slots.default);
	},
};

If you want to improve the developer experience of dynamic components with eslint-plugin-vue, I suggest opening an issue there (eg. proposal on providing hints).