Directive Schema API

[louiss0]

Directive Schema API

Motivation

There is no way to type directives in vue. Yes, you can type the function signature, but that's pretty much it. There is no way for Volar to know which modifiers are supposed to be added to a directive or which arguments are supposed to be passed in. It also doesn't know whether a value is supposed to be passed to the directive even the type that is supposed to be used.

By having a schema for volar to read. Directives can be typed and the arguments can be known. Types can be produced and evaluated when using the directive. Error messages can be produced when the directive is used and not typed. People can create directives knowing that they can type safe or even runtime safe.

API Design

The API is an extra property that will be added to object directives and function directives. The property is called schema. The schema is an object that has these keys.

• The arguments key
• The value key
• The modifiers key.
• An elements key.

I choose them because they are the things that need to be typed. The arguments key is a key that can be typed the same way as props. The value is the type of value. The value is will use the same Syntax that is used for props. The modifiers is also the same as the arguments key. The last key is called the element key. It works like the Props, but it only allows the use of instances of HTMLElement This one is optional as well. It will make it so that the element is attached to the element it is supposed to be attached to. Or it could be used for better typing.

Object directive for v-model

const vModel = {

	schema: {
	 value: {
		 type:[String, Number],
		 required:true
	 },
	 arguments:{
		 type:String,
		 required:false
	 },
	 modifiers:[
	 "lazy",
	 "trim",
	 "number"
	 ],
	 elements:[
	 HTMLInputElement,
	 HTMLSelectElement,
	 HTMLTextareaElement,
	 HTMLOutputElement,
	 HTMLMeterElement,
	 HTMLProgressElement,
	 ] 
	} 

}

Function Directive for v-model

function vModel() {

}

vModel.schema: {
	 value: {
		 type:[String, Number],
		 required:true
	 },
	 arguments:{
		 type:String,
		 required:false
	 },
	 modifiers:[
	 "lazy",
	 "trim",
	 "number"
	 ],
	 elements:[
	 HTMLInputElement,
	 HTMLSelectElement,
	 HTMLTextareaElement,
	 HTMLOutputElement,
	 HTMLMeterElement,
	 HTMLProgressElement,
	 ] 
	} 

As you can see this is how things would work out. This is an example of v-model but I think you can think of many other situations where this can work. The problem with directives is that there is no type validation for them at all. When this information can be used to make sure that.

What happens when validation fails?

Vue is not supposed to compile if there is an error with the validation Schema. In fact, it will throw an error called a Directive Validation Error. The error message that is shown is based on the kind of validation that fails.

• Binding -- This binding is supposed to be added to ==name of directive ==
• Argument -- This argument is supposed to be used on this ==name of directive ==
• Value -- This value is not the right value for this ==name of directive ==
• Wrong Element -- ==name of directive== is supposed only to be added to ==list of comma separated element classes from the elements property==

Concerns

The names used in this API don't have to be used in the creation of the API. All that matters is that it exists. I think the errors should be thrown at compile time not runtime. I'm not saying that this is the way this API is supposed to be used if runtime is more performant then that one should be picked.

How will this API be used?

The point of this API is to make sure directives are typed properly and are added to the correct elements.

**Will this API introduce breaking changes? **

This API does not remove anything at all it just add new things?.

---

[louiss0]

I'm going to go to Johnson about this problem instead.