@angular/language-service 12.2.2 → 12.2.3

package/bundles/ivy.js

@@ -1,5 +1,5 @@
 /**
- * @license Angular v12.2.2
+ * @license Angular v12.2.3
  * Copyright Google LLC All Rights Reserved.
  * License: MIT
  */
@@ -19938,7 +19938,7 @@ define(['exports', 'typescript/lib/tsserverlibrary', 'os', 'typescript', 'fs', '
      * 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
      */
-    const VERSION$1 = new Version('12.2.2');
+    const VERSION$1 = new Version('12.2.3');
 
     /**
      * @license
@@ -20577,7 +20577,7 @@ define(['exports', 'typescript/lib/tsserverlibrary', 'os', 'typescript', 'fs', '
     function compileDeclareClassMetadata(metadata) {
         const definitionMap = new DefinitionMap();
         definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION));
-        definitionMap.set('version', literal('12.2.2'));
+        definitionMap.set('version', literal('12.2.3'));
         definitionMap.set('ngImport', importExpr(Identifiers.core));
         definitionMap.set('type', metadata.type);
         definitionMap.set('decorators', metadata.decorators);
@@ -20617,7 +20617,7 @@ define(['exports', 'typescript/lib/tsserverlibrary', 'os', 'typescript', 'fs', '
     function createDirectiveDefinitionMap(meta) {
         const definitionMap = new DefinitionMap();
         definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$1));
-        definitionMap.set('version', literal('12.2.2'));
+        definitionMap.set('version', literal('12.2.3'));
         // e.g. `type: MyDirective`
         definitionMap.set('type', meta.internalType);
         // e.g. `selector: 'some-dir'`
@@ -20834,7 +20834,7 @@ define(['exports', 'typescript/lib/tsserverlibrary', 'os', 'typescript', 'fs', '
     function compileDeclareFactoryFunction(meta) {
         const definitionMap = new DefinitionMap();
         definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$2));
-        definitionMap.set('version', literal('12.2.2'));
+        definitionMap.set('version', literal('12.2.3'));
         definitionMap.set('ngImport', importExpr(Identifiers.core));
         definitionMap.set('type', meta.internalType);
         definitionMap.set('deps', compileDependencies(meta.deps));
@@ -20876,7 +20876,7 @@ define(['exports', 'typescript/lib/tsserverlibrary', 'os', 'typescript', 'fs', '
     function createInjectableDefinitionMap(meta) {
         const definitionMap = new DefinitionMap();
         definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$3));
-        definitionMap.set('version', literal('12.2.2'));
+        definitionMap.set('version', literal('12.2.3'));
         definitionMap.set('ngImport', importExpr(Identifiers.core));
         definitionMap.set('type', meta.internalType);
         // Only generate providedIn property if it has a non-null value
@@ -20955,7 +20955,7 @@ define(['exports', 'typescript/lib/tsserverlibrary', 'os', 'typescript', 'fs', '
     function createInjectorDefinitionMap(meta) {
         const definitionMap = new DefinitionMap();
         definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$4));
-        definitionMap.set('version', literal('12.2.2'));
+        definitionMap.set('version', literal('12.2.3'));
         definitionMap.set('ngImport', importExpr(Identifiers.core));
         definitionMap.set('type', meta.internalType);
         definitionMap.set('providers', meta.providers);
@@ -20992,7 +20992,7 @@ define(['exports', 'typescript/lib/tsserverlibrary', 'os', 'typescript', 'fs', '
     function createNgModuleDefinitionMap(meta) {
         const definitionMap = new DefinitionMap();
         definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$5));
-        definitionMap.set('version', literal('12.2.2'));
+        definitionMap.set('version', literal('12.2.3'));
         definitionMap.set('ngImport', importExpr(Identifiers.core));
         definitionMap.set('type', meta.internalType);
         // We only generate the keys in the metadata if the arrays contain values.
@@ -21050,7 +21050,7 @@ define(['exports', 'typescript/lib/tsserverlibrary', 'os', 'typescript', 'fs', '
     function createPipeDefinitionMap(meta) {
         const definitionMap = new DefinitionMap();
         definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$6));
-        definitionMap.set('version', literal('12.2.2'));
+        definitionMap.set('version', literal('12.2.3'));
         definitionMap.set('ngImport', importExpr(Identifiers.core));
         // e.g. `type: MyPipe`
         definitionMap.set('type', meta.internalType);
@@ -21082,7 +21082,7 @@ define(['exports', 'typescript/lib/tsserverlibrary', 'os', 'typescript', 'fs', '
      * 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
      */
-    const VERSION$2 = new Version('12.2.2');
+    const VERSION$2 = new Version('12.2.3');
 
     /**
      * @license
@@ -26546,6 +26546,26 @@ define(['exports', 'typescript/lib/tsserverlibrary', 'os', 'typescript', 'fs', '
                 }
             }
         }
+        extendedTemplateCheck(sf, extendedTemplateChecker) {
+            const classes = this.fileToClasses.get(sf);
+            if (classes === undefined) {
+                return [];
+            }
+            const diagnostics = [];
+            for (const clazz of classes) {
+                if (!isNamedClassDeclaration(clazz)) {
+                    continue;
+                }
+                const record = this.classes.get(clazz);
+                for (const trait of record.traits) {
+                    if (trait.handler.extendedTemplateCheck === undefined) {
+                        continue;
+                    }
+                    diagnostics.push(...trait.handler.extendedTemplateCheck(clazz, extendedTemplateChecker));
+                }
+            }
+            return diagnostics;
+        }
         index(ctx) {
             for (const clazz of this.classes.keys()) {
                 const record = this.classes.get(clazz);
@@ -30553,6 +30573,9 @@ Either add the @Injectable() decorator to '${provider.node.name
             const binder = new R3TargetBinder(scope.matcher);
             ctx.addTemplate(new Reference$1(node), binder, meta.template.diagNodes, scope.pipes, scope.schemas, meta.template.sourceMapping, meta.template.file, meta.template.errors);
         }
+        extendedTemplateCheck(component, extendedTemplateChecker) {
+            return extendedTemplateChecker.getDiagnosticsForComponent(component);
+        }
         resolve(node, analysis, symbol) {
             if (this.semanticDepGraphUpdater !== null && analysis.baseClass instanceof Reference$1) {
                 symbol.baseClass = this.semanticDepGraphUpdater.getSymbol(analysis.baseClass.node);
@@ -39731,7 +39754,7 @@ Either add the @Injectable() decorator to '${provider.node.name
             const fileRecord = this.state.get(sfPath);
             const templateId = fileRecord.sourceManager.getTemplateId(clazz);
             const mapping = fileRecord.sourceManager.getSourceMapping(templateId);
-            return makeTemplateDiagnostic(templateId, mapping, sourceSpan, category, errorCode, message, relatedInformation);
+            return Object.assign(Object.assign({}, makeTemplateDiagnostic(templateId, mapping, sourceSpan, category, ngErrorCode(errorCode), message, relatedInformation)), { __ngCode: errorCode });
         }
         getOrCreateCompletionEngine(component) {
             if (this.completionCache.has(component)) {
@@ -40093,6 +40116,141 @@ Either add the @Injectable() decorator to '${provider.node.name
         }
     }
 
+    /**
+     * @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
+     */
+    class ExtendedTemplateCheckerImpl {
+        constructor(templateTypeChecker, typeChecker, templateChecks) {
+            this.templateTypeChecker = templateTypeChecker;
+            this.typeChecker = typeChecker;
+            this.templateChecks = templateChecks;
+        }
+        getDiagnosticsForComponent(component) {
+            const template = this.templateTypeChecker.getTemplate(component);
+            // Skip checks if component has no template. This can happen if the user writes a
+            // `@Component()` but doesn't add the template, could happen in the language service
+            // when users are in the middle of typing code.
+            if (template === null) {
+                return [];
+            }
+            const diagnostics = [];
+            const ctx = {
+                templateTypeChecker: this.templateTypeChecker,
+                typeChecker: this.typeChecker,
+                component
+            };
+            for (const check of this.templateChecks) {
+                diagnostics.push(...deduplicateDiagnostics(check.run(ctx, template)));
+            }
+            return diagnostics;
+        }
+    }
+    // Filter out duplicated diagnostics, this is possible due to the way the compiler
+    // handles desugaring and produces `AST`s. Ex.
+    //
+    // ```
+    // <div *ngIf="true" (foo)="bar">test</div>
+    // ```
+    //
+    // Would result in the following AST:
+    //
+    // ```
+    // Template {
+    //   outputs: [
+    //    BoundEvent {
+    //      name: 'foo',
+    //      /.../
+    //    }
+    //   ],
+    //   children: [
+    //     Element {
+    //       outputs: [
+    //         BoundEvent {
+    //           name: 'foo',
+    //           /.../
+    //         }
+    //       ]
+    //     }
+    //   ],
+    //   /.../
+    // }
+    // ```
+    //
+    // In this case a duplicated diagnostic could be generated for the output `foo`.
+    // TODO(danieltrevino): handle duplicated diagnostics when they are being generated
+    // to avoid extra work (could be directly in the visitor).
+    // https://github.com/angular/angular/pull/42984#discussion_r684823926
+    function deduplicateDiagnostics(diagnostics) {
+        const result = [];
+        for (const newDiag of diagnostics) {
+            const isDuplicateDiag = result.some(existingDiag => areDiagnosticsEqual(newDiag, existingDiag));
+            if (!isDuplicateDiag) {
+                result.push(newDiag);
+            }
+        }
+        return result;
+    }
+    function areDiagnosticsEqual(first, second) {
+        var _a, _b;
+        return ((_a = first.file) === null || _a === void 0 ? void 0 : _a.fileName) === ((_b = second.file) === null || _b === void 0 ? void 0 : _b.fileName) && first.start === second.start &&
+            first.length === second.length && first.code === second.code;
+    }
+
+    /**
+     * @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
+     */
+    /**
+     * Ensures the two-way binding syntax is correct.
+     * Parentheses should be inside the brackets "[()]".
+     * Will return diagnostic information when "([])" is found.
+     */
+    class InvalidBananaInBoxCheck {
+        constructor() {
+            this.code = 8101;
+        }
+        run(ctx, template) {
+            const visitor = new BananaVisitor(ctx);
+            return visitor.getDiagnostics(template);
+        }
+    }
+    class BananaVisitor extends RecursiveVisitor {
+        constructor(ctx) {
+            super();
+            this.ctx = ctx;
+            this.diagnostics = [];
+        }
+        /**
+         * Check for outputs with names surrounded in brackets "[]".
+         * The syntax '([foo])="bar"' would be interpreted as an @Output()
+         * with name '[foo]'. Just like '(foo)="bar"' would have the name 'foo'.
+         * Generate diagnostic information for the cases found.
+         */
+        visitBoundEvent(boundEvent) {
+            const name = boundEvent.name;
+            if (name.startsWith('[') && name.endsWith(']')) {
+                const boundSyntax = boundEvent.sourceSpan.toString();
+                const expectedBoundSyntax = boundSyntax.replace(`(${name})`, `[(${name.slice(1, -1)})]`);
+                this.diagnostics.push(this.ctx.templateTypeChecker.makeTemplateDiagnostic(this.ctx.component, boundEvent.sourceSpan, ts$1.DiagnosticCategory.Warning, ErrorCode.INVALID_BANANA_IN_BOX, `In the two-way binding syntax the parentheses should be inside the brackets, ex. '${expectedBoundSyntax}'. 
+                Find more at https://angular.io/guide/two-way-binding`));
+            }
+        }
+        getDiagnostics(template) {
+            this.diagnostics = [];
+            for (const node of template) {
+                node.visit(this);
+            }
+            return this.diagnostics;
+        }
+    }
+
     /**
      * @license
      * Copyright Google LLC All Rights Reserved.
@@ -40209,6 +40367,10 @@ Either add the @Injectable() decorator to '${provider.node.name
              * with each fresh compilation.
              */
             this.delegatingPerfRecorder = new DelegatingPerfRecorder(this.perfRecorder);
+            if (this.options._extendedTemplateDiagnostics === true &&
+                this.options.strictTemplates === false) {
+                throw new Error('The \'_extendedTemplateDiagnostics\' option requires \'strictTemplates\' to also be enabled.');
+            }
             this.constructionDiagnostics.push(...this.adapter.constructionDiagnostics);
             const incompatibleTypeCheckOptionsDiagnostic = verifyCompatibleTypeCheckOptions(this.options);
             if (incompatibleTypeCheckOptionsDiagnostic !== null) {
@@ -40318,7 +40480,12 @@ Either add the @Injectable() decorator to '${provider.node.name
          * Get all Angular-related diagnostics for this compilation.
          */
         getDiagnostics() {
-            return this.addMessageTextDetails([...this.getNonTemplateDiagnostics(), ...this.getTemplateDiagnostics()]);
+            const diagnostics = [];
+            diagnostics.push(...this.getNonTemplateDiagnostics(), ...this.getTemplateDiagnostics());
+            if (this.options._extendedTemplateDiagnostics) {
+                diagnostics.push(...this.getExtendedTemplateDiagnostics());
+            }
+            return this.addMessageTextDetails(diagnostics);
         }
         /**
          * Get all Angular-related diagnostics for this compilation.
@@ -40326,10 +40493,26 @@ Either add the @Injectable() decorator to '${provider.node.name
          * If a `ts.SourceFile` is passed, only diagnostics related to that file are returned.
          */
         getDiagnosticsForFile(file, optimizeFor) {
-            return this.addMessageTextDetails([
-                ...this.getNonTemplateDiagnostics().filter(diag => diag.file === file),
-                ...this.getTemplateDiagnosticsForFile(file, optimizeFor)
-            ]);
+            const diagnostics = [];
+            diagnostics.push(...this.getNonTemplateDiagnostics().filter(diag => diag.file === file), ...this.getTemplateDiagnosticsForFile(file, optimizeFor));
+            if (this.options._extendedTemplateDiagnostics) {
+                diagnostics.push(...this.getExtendedTemplateDiagnostics(file));
+            }
+            return this.addMessageTextDetails(diagnostics);
+        }
+        /**
+         * Get all `ts.Diagnostic`s currently available that pertain to the given component.
+         */
+        getDiagnosticsForComponent(component) {
+            const compilation = this.ensureAnalyzed();
+            const ttc = compilation.templateTypeChecker;
+            const diagnostics = [];
+            diagnostics.push(...ttc.getDiagnosticsForComponent(component));
+            if (this.options._extendedTemplateDiagnostics) {
+                const extendedTemplateChecker = compilation.extendedTemplateChecker;
+                diagnostics.push(...extendedTemplateChecker.getDiagnosticsForComponent(component));
+            }
+            return this.addMessageTextDetails(diagnostics);
         }
         /**
          * Add Angular.io error guide links to diagnostics for this compilation.
@@ -40719,6 +40902,24 @@ Either add the @Injectable() decorator to '${provider.node.name
             }
             return this.nonTemplateDiagnostics;
         }
+        /**
+         * Calls the `extendedTemplateCheck` phase of the trait compiler
+         * @param sf optional parameter to get diagnostics for a certain file
+         *     or all files in the program if `sf` is undefined
+         * @returns generated extended template diagnostics
+         */
+        getExtendedTemplateDiagnostics(sf) {
+            const diagnostics = [];
+            const compilation = this.ensureAnalyzed();
+            const extendedTemplateChecker = compilation.extendedTemplateChecker;
+            if (sf !== undefined) {
+                return compilation.traitCompiler.extendedTemplateCheck(sf, extendedTemplateChecker);
+            }
+            for (const sf of this.inputProgram.getSourceFiles()) {
+                diagnostics.push(...compilation.traitCompiler.extendedTemplateCheck(sf, extendedTemplateChecker));
+            }
+            return diagnostics;
+        }
         makeCompilation() {
             const checker = this.inputProgram.getTypeChecker();
             const reflector = new TypeScriptReflectionHost(checker);
@@ -40832,6 +41033,8 @@ Either add the @Injectable() decorator to '${provider.node.name
                 this.currentProgram = program;
             });
             const templateTypeChecker = new TemplateTypeCheckerImpl(this.inputProgram, notifyingDriver, traitCompiler, this.getTypeCheckingConfig(), refEmitter, reflector, this.adapter, this.incrementalCompilation, scopeRegistry, typeCheckScopeRegistry, this.delegatingPerfRecorder);
+            const templateChecks = [new InvalidBananaInBoxCheck()];
+            const extendedTemplateChecker = new ExtendedTemplateCheckerImpl(templateTypeChecker, checker, templateChecks);
             return {
                 isCore,
                 traitCompiler,
@@ -40846,6 +41049,7 @@ Either add the @Injectable() decorator to '${provider.node.name
                 refEmitter,
                 templateTypeChecker,
                 resourceRegistry,
+                extendedTemplateChecker
             };
         }
     }
@@ -44409,7 +44613,6 @@ https://v9.angular.io/guide/template-typecheck#template-type-checking`,
         }
         getSemanticDiagnostics(fileName) {
             return this.withCompilerAndPerfTracing(PerfPhase.LsDiagnostics, (compiler) => {
-                const ttc = compiler.getTemplateTypeChecker();
                 const diagnostics = [];
                 if (isTypeScriptFile(fileName)) {
                     const program = compiler.getCurrentProgram();
@@ -44445,7 +44648,7 @@ https://v9.angular.io/guide/template-typecheck#template-type-checking`,
                     const components = compiler.getComponentsWithTemplateFile(fileName);
                     for (const component of components) {
                         if (ts.isClassDeclaration(component)) {
-                            diagnostics.push(...ttc.getDiagnosticsForComponent(component));
+                            diagnostics.push(...compiler.getDiagnosticsForComponent(component));
                         }
                     }
                 }

package/bundles/language-service.js

@@ -1,5 +1,5 @@
 /**
- * @license Angular v12.2.2
+ * @license Angular v12.2.3
  * Copyright Google LLC All Rights Reserved.
  * License: MIT
  */
@@ -21475,7 +21475,7 @@ define(['exports', 'typescript/lib/tsserverlibrary', 'typescript', 'path'], func
      * 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
      */
-    const VERSION$1 = new Version('12.2.2');
+    const VERSION$1 = new Version('12.2.3');
 
     /**
      * @license
@@ -37554,7 +37554,7 @@ define(['exports', 'typescript/lib/tsserverlibrary', 'typescript', 'path'], func
     /**
      * @publicApi
      */
-    const VERSION$2 = new Version$1('12.2.2');
+    const VERSION$2 = new Version$1('12.2.3');
 
     /**
      * @license

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/language-service",
-  "version": "12.2.2",
+  "version": "12.2.3",
   "description": "Angular - language services",
   "main": "./index.js",
   "typings": "./index.d.ts",