Sitelet https://web.archive.org/web/20211022025056/https://github.com/angular/angular/pull/34363
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(language-service): completions support for template reference variables #34363

Closed

Conversation

@ivanwonder
Copy link
Contributor

@ivanwonder ivanwonder commented Dec 12, 2019

https://angular.io/guide/template-syntax#how-a-reference-variable-gets-its-value
get completions from option exportAs of Directive.

PR Checklist

Please check if your PR fulfills the following requirements:

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update (formatting, local variables)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • CI related changes
  • Documentation content changes
  • angular.io application / infrastructure changes
  • Other... Please describe:

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

  • Yes
  • No

Other information

@ivanwonder ivanwonder requested a review from as a code owner Dec 12, 2019
packages/language-service/src/completions.ts Outdated Show resolved Hide resolved
packages/language-service/test/completions_spec.ts Outdated Show resolved Hide resolved
packages/language-service/test/completions_spec.ts Outdated Show resolved Hide resolved
packages/language-service/src/completions.ts Outdated Show resolved Hide resolved
@ngbot ngbot bot added this to the needsTriage milestone Dec 12, 2019
@ngbot ngbot bot added this to the needsTriage milestone Dec 12, 2019
@ayazhafiz ayazhafiz requested a review from kyliau Dec 12, 2019
Copy link
Contributor

@kyliau kyliau left a comment

Thank you for contributing! Your help is much appreciated :)

packages/language-service/src/completions.ts Outdated Show resolved Hide resolved
@ivanwonder ivanwonder force-pushed the template-reference-completions branch from a28ec0e to d487b6c Dec 13, 2019
@ivanwonder ivanwonder requested a review from kyliau Dec 13, 2019
packages/language-service/src/completions.ts Outdated Show resolved Hide resolved
@kyliau
Copy link
Contributor

@kyliau kyliau commented Dec 17, 2019

@ivanwonder, you are correct. The TemplateAst parser does not parse attributes correctly. This is bad, because it means there's no 1-1 mapping from HtmlAst to TemplateAst.
More specifically, the HtmlAst would contain Element --> Attribute, but when it gets parsed into TemplateAst, there's only ElementAst. This is why the visit has no effect.
I'll fix this in a separate PR, and you should be able to implement this feature the correct way after that.
Thank you for your patience!

@ivanwonder
Copy link
Contributor Author

@ivanwonder ivanwonder commented Dec 18, 2019

Thank you for your guidance. I will pick it up after you fix the problem.

@ivanwonder
Copy link
Contributor Author

@ivanwonder ivanwonder commented Dec 20, 2019

@kyliau I think I can help to resolve the problem of TemplateAst if you have not begun to do it or no time to look into it.
I recently read the code, and my solution is to add the reference to the array targetReferences before reporting the error on line 596.

elementOrDirectiveRefs.forEach((elOrDirRef) => {
if (elOrDirRef.value.length > 0) {
if (!matchedReferences.has(elOrDirRef.name)) {
this._reportError(
`There is no directive with "exportAs" set to "${elOrDirRef.value}"`,
elOrDirRef.sourceSpan);
}
} else if (!component) {
let refToken: CompileTokenMetadata = null !;
if (isTemplateElement) {
refToken = createTokenForExternalReference(this.reflector, Identifiers.TemplateRef);
}
targetReferences.push(
new t.ReferenceAst(elOrDirRef.name, refToken, elOrDirRef.value, elOrDirRef.sourceSpan));
}
});

@ayazhafiz
Copy link
Contributor

@ayazhafiz ayazhafiz commented Dec 20, 2019

@kyliau I think I can help to resolve the problem of TemplateAst if you have not begun to do it or no time to look into it.

I think this was partially fixed in #34459, @kyliau can you confirm? I think you would have to do a little extra work to get visitReference to be called, since that change parses an attribute and not a reference, but you could add a call to visitReference in ExpressionVisitor#visitAttr or parse the reference where the attribute is.

I recently read the code, and my solution is to add the reference to the array targetReferences before reporting the error on line 596.

I think this would work, but we will have to get a review from the compiler team to make sure it is okay. My only worry is that this would break the typings of the ReferenceAst because the value of the created reference AST would be null (since there is no matching directive to reference), so this might cause some trouble if the reference is used later in the template (but if an error is reported, I don't know if this matters).

@kyliau
Copy link
Contributor

@kyliau kyliau commented Dec 20, 2019

yes, @ayazhafiz is right. I did the work in #34459 to partially address the problem of incomplete template AST. The ideal solution here is to visit AttrAst, create ReferenceAst, then visit it.
However, in order to get hold of the directives that apply to an Element, you have to pass the ElementAst to visitReference() as well. This can be done through the context (second parameter).
Bear in mind that it is insufficient to provide "exportAs" as the sole result set, as was done here. Other symbols that are in scope are valid candidates too.

@ivanwonder
Copy link
Contributor Author

@ivanwonder ivanwonder commented Dec 21, 2019

@kyliau What are the other symbols, can you give me an example? When I input others, it will report the error no directive with "exportAs"

@ivanwonder
Copy link
Contributor Author

@ivanwonder ivanwonder commented Dec 21, 2019

I think it's better to add a new referenceAttributeValueCompletions here.

result = attributeValueCompletions(templateInfo, templatePosition, ast);

Just push the missing ReferenceAst to path if need, begin to visit it with ElementAst parameter in the new method. Like
function interpolationCompletions(info: AstResult, position: number): ng.CompletionEntry[] {

It's a little kind of weird to invoke the method visitReference in visitAttr, travel the path to get the right ElementAst and pass it to visitReference.

@ayazhafiz ayazhafiz dismissed their stale review Dec 21, 2019

changing implementation

@ivanwonder ivanwonder force-pushed the template-reference-completions branch from d487b6c to 1d19b06 Dec 21, 2019
@ivanwonder
Copy link
Contributor Author

@ivanwonder ivanwonder commented Dec 21, 2019

yes, @ayazhafiz is right. I did the work in #34459 to partially address the problem of incomplete template AST. The ideal solution here is to visit AttrAst, create ReferenceAst, then visit it.

This is the new implementation, if need, I can change to the way as @kyliau said above.

@ivanwonder ivanwonder force-pushed the template-reference-completions branch from 1d19b06 to 99bb678 Dec 21, 2019
@ivanwonder ivanwonder requested review from kyliau and ayazhafiz Dec 21, 2019
packages/language-service/src/completions.ts Outdated Show resolved Hide resolved
packages/language-service/src/completions.ts Outdated Show resolved Hide resolved
packages/language-service/src/completions.ts Outdated Show resolved Hide resolved
packages/language-service/src/completions.ts Show resolved Hide resolved
packages/language-service/src/completions.ts Outdated Show resolved Hide resolved
@ivanwonder ivanwonder force-pushed the template-reference-completions branch from 99bb678 to 279d05c Dec 22, 2019
@ivanwonder ivanwonder requested a review from ayazhafiz Dec 22, 2019
Copy link
Contributor

@ayazhafiz ayazhafiz left a comment

Thanks for the feature 🙂

packages/language-service/src/completions.ts Outdated Show resolved Hide resolved
@ivanwonder ivanwonder force-pushed the template-reference-completions branch from 279d05c to 03d552e Dec 22, 2019
kyliau
kyliau approved these changes Jan 9, 2020
@atscott atscott closed this in 181d766 Jan 9, 2020
@ivanwonder ivanwonder deleted the template-reference-completions branch Jan 15, 2020
@angular-automatic-lock-bot
Copy link

@angular-automatic-lock-bot angular-automatic-lock-bot bot commented Feb 15, 2020

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Feb 15, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

4 participants