[WIP] feat(completion): improve auto complete in html template

[pikax]

Improving auto completion on html, based on the component definition.

Implemented

• Provide deep member properties

TODO

• Support auto-completion when is expression

example:

<template>
  <div>
    <p v-if="obj.ourdata"></p>
  </div>
</template>

<script>
import { defineComponent } from "@vue/composition-api";

export default defineComponent({
  data() {
    return {
      mydata: "1",
      obj: {
        ourdata: 2,
        supa: {
          a: "a",
          n: 1122
        }
      }
    };
  },
  computed: {
    test() {
      return 1;
    },
    testObj() {
      return {
        a: 1,
        bb: {
          a: "2"
        }
      };
    }
  }
});
</script>

[ktsn]

Hmm, I don't think we should manually analyze data properties...
We should utilize type info to do that instead so that the behavior would be the same as normal typescript language feature and we don't have to reinvent the wheel.
And I had made such implementation earlier on this PR. #1446

[pikax]

If there's a way to get the autocomplete correctly from typescript, I completely agree on using that.

Checked your PR(still need time to understand it), only get the first level auto completion, I reckon is the

vetur/server/src/modes/script/componentInfo.ts

Lines 197 to 202 in 271dbfc

	return checker.getPropertiesOfType(computedType).map(s => {
	return {
	name: s.name,
	documentation: buildDocumentation(tsModule, s, checker)
	};
	});

Is not enough to get the the info for

vetur/server/src/modes/template/services/vueInterpolationCompletion.ts

Lines 49 to 55 in 271dbfc

	result.set(p.name, {
	label: p.name,
	documentation: {
	kind: 'markdown',
	value: p.documentation || `\`${p.name}\` computed`
	},
	kind: CompletionItemKind.Property

To build the proper typing.

because as soon as you do:

<p v-if="obj.ou">

The templateService will return undefined.

vetur/server/src/modes/template/interpolationMode.ts

Line 119 in 271dbfc

const completions = templateService.getCompletionsAtPosition(templateFileFsPath, mappedOffset, {

Do you know any documentation that helps doing this?

[ktsn]

You are seeing the current implementation that is even left in the PR for backward compatibility.

The main part of the completion is this line.
https://github.com/vuejs/vetur/pull/1446/files#diff-62e73e93316645d3d052a2638e515905R119
Just calling TS auto completion logic so that we can complete anything if the target is properly typed.

The nested property completion is confirmed by a test case in the PR as well.
https://github.com/vuejs/vetur/pull/1446/files#diff-01bc940b65f71e51cdbf9185aecefa8aR4

[pikax]

The nested property completion is confirmed by a test case in the PR as well.
https://github.com/vuejs/vetur/pull/1446/files#diff-01bc940b65f71e51cdbf9185aecefa8aR4

That example works, the example I was using, the typescript is not actually working -.-''

What's is needed for that PR to be merged?