feat(language-service): autocompletion for the component not imported (#55595)

This PR allows the language service to suggest imports for all directives returned from the compiler, and generate the TypeScript module import and the decorator import when the component is selected by the user. PR Close #55595

Author: ivanwonder

packages/compiler-cli/src/ngtsc/typecheck/src/checker.ts

@@ -752,22 +752,21 @@ export class TemplateTypeCheckerImpl implements TemplateTypeChecker {
  tagMap.set(tag, null);
  }
 
- const scope = this.getScopeData(component);
- if (scope !== null) {
- for (const directive of scope.directives) {
- if (directive.selector === null) {
- continue;
- }
+ const potentialDirectives = this.getPotentialTemplateDirectives(component);
 
- for (const selector of CssSelector.parse(directive.selector)) {
- if (selector.element === null || tagMap.has(selector.element)) {
- // Skip this directive if it doesn't match an element tag, or if another directive has
- // already been included with the same element name.
- continue;
- }
+ for (const directive of potentialDirectives) {
+ if (directive.selector === null) {
+ continue;
+ }
 
- tagMap.set(selector.element, directive);
+ for (const selector of CssSelector.parse(directive.selector)) {
+ if (selector.element === null || tagMap.has(selector.element)) {
+ // Skip this directive if it doesn't match an element tag, or if another directive has
+ // already been included with the same element name.
+ continue;
  }
+
+ tagMap.set(selector.element, directive);
  }
  }
 

packages/language-service/src/codefixes/fix_missing_import.ts

@@ -19,11 +19,7 @@ import {
 import ts from 'typescript';
 
 import {getTargetAtPosition, TargetNodeKind} from '../template_target';
-import {
- standaloneTraitOrNgModule,
- updateImportsForAngularTrait,
- updateImportsForTypescriptFile,
-} from '../ts_utils';
+import {getCodeActionToImportTheDirectiveDeclaration, standaloneTraitOrNgModule} from '../ts_utils';
 import {getDirectiveMatchesForElementTag} from '../utils';
 
 import {CodeActionContext, CodeActionMeta, FixIdForCodeFixesAll} from './utils';
@@ -90,68 +86,17 @@ function getCodeActions({
  return [];
  }
  for (const currMatch of matches.values()) {
- const currMatchSymbol = currMatch.tsSymbol.valueDeclaration!;
- const potentialImports = checker.getPotentialImportsFor(
- currMatch.ref,
- importOn,
- PotentialImportMode.Normal,
- );
- for (const potentialImport of potentialImports) {
- const fileImportChanges: ts.TextChange[] = [];
- let importName: string;
- let forwardRefName: string | null = null;
-
- if (potentialImport.moduleSpecifier) {
- const [importChanges, generatedImportName] = updateImportsForTypescriptFile(
- tsChecker,
- importOn.getSourceFile(),
- potentialImport.symbolName,
- potentialImport.moduleSpecifier,
- currMatchSymbol.getSourceFile(),
- );
- importName = generatedImportName;
- fileImportChanges.push(...importChanges);
- } else {
- if (potentialImport.isForwardReference) {
- // Note that we pass the `importOn` file twice since we know that the potential import
- // is within the same file, because it doesn't have a `moduleSpecifier`.
- const [forwardRefImports, generatedForwardRefName] = updateImportsForTypescriptFile(
- tsChecker,
- importOn.getSourceFile(),
- 'forwardRef',
- '@angular/core',
- importOn.getSourceFile(),
- );
- fileImportChanges.push(...forwardRefImports);
- forwardRefName = generatedForwardRefName;
- }
- importName = potentialImport.symbolName;
- }
+ const currentMatchCodeAction =
+ getCodeActionToImportTheDirectiveDeclaration(compiler, importOn, currMatch) ?? [];
 
- // Always update the trait import, although the TS import might already be present.
- const traitImportChanges = updateImportsForAngularTrait(
- checker,
- importOn,
- importName,
- forwardRefName,
- );
- if (traitImportChanges.length === 0) continue;
-
- let description = `Import ${importName}`;
- if (potentialImport.moduleSpecifier !== undefined) {
- description += ` from '${potentialImport.moduleSpecifier}' on ${importOn.name!.text}`;
- }
- codeActions.push({
- fixName: FixIdForCodeFixesAll.FIX_MISSING_IMPORT,
- description,
- changes: [
- {
- fileName: importOn.getSourceFile().fileName,
- textChanges: [...fileImportChanges, ...traitImportChanges],
- },
- ],
- });
- }
+ codeActions.push(
+ ...currentMatchCodeAction.map<ts.CodeFixAction>((action) => {
+ return {
+ fixName: FixIdForCodeFixesAll.FIX_MISSING_IMPORT,
+ ...action,
+ };
+ }),
+ );
  }
 
  return codeActions;

packages/language-service/src/completions.ts

@@ -61,6 +61,7 @@ import {
  unsafeCastDisplayInfoKindToScriptElementKind,
 } from './display_parts';
 import {TargetContext, TargetNodeKind, TemplateTarget} from './template_target';
+import {getCodeActionToImportTheDirectiveDeclaration, standaloneTraitOrNgModule} from './ts_utils';
 import {filterAliasImports, isBoundEventWithSyntheticHandler, isWithin} from './utils';
 
 type PropertyExpressionCompletionBuilder = CompletionBuilder<
@@ -721,6 +722,7 @@ export class CompletionBuilder<N extends TmplAstNode | AST> {
  name: tag,
  sortText: tag,
  replacementSpan,
+ hasAction: directive?.isInScope === true ? undefined : true,
  }));
 
  return {
@@ -755,13 +757,25 @@ export class CompletionBuilder<N extends TmplAstNode | AST> {
  tags = displayInfo.tags;
  }
 
+ let codeActions: ts.CodeAction[] | undefined;
+
+ if (!directive.isInScope) {
+ const importOn = standaloneTraitOrNgModule(templateTypeChecker, this.component);
+
+ codeActions =
+ importOn !== null
+ ? getCodeActionToImportTheDirectiveDeclaration(this.compiler, importOn, directive)
+ : undefined;
+ }
+
  return {
  kind: tagCompletionKind(directive),
  name: entryName,
  kindModifiers: ts.ScriptElementKindModifier.none,
  displayParts,
  documentation,
  tags,
+ codeActions,
  };
  }
 

packages/language-service/src/format.ts

@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import ts from 'typescript';
+
+/**
+ * Try to guess the indentation of the node.
+ *
+ * This function returns the indentation only if the start character of this node is
+ * the first non-whitespace character in a line where the node is, otherwise,
+ * it returns `undefined`. When computing the start of the node, it should include
+ * the leading comments.
+ */
+export function guessIndentationInSingleLine(
+ node: ts.Node,
+ sourceFile: ts.SourceFile,
+): number | undefined {
+ const leadingComment = ts.getLeadingCommentRanges(sourceFile.text, node.pos);
+ const firstLeadingComment =
+ leadingComment !== undefined && leadingComment.length > 0 ? leadingComment[0] : undefined;
+ const nodeStartWithComment = firstLeadingComment?.pos ?? node.getStart();
+ const lineNumber = sourceFile.getLineAndCharacterOfPosition(nodeStartWithComment).line;
+ const lineStart = sourceFile.getLineStarts()[lineNumber];
+
+ let haveChar = false;
+ for (let pos = lineStart; pos < nodeStartWithComment; pos++) {
+ const ch = sourceFile.text.charCodeAt(pos);
+ if (!ts.isWhiteSpaceSingleLine(ch)) {
+ haveChar = true;
+ break;
+ }
+ }
+ return haveChar ? undefined : nodeStartWithComment - lineStart;
+}