fix(ngcc): libraries using spread in object literals cannot be processed (#34661)

Consider a library that uses a shared constant for host bindings. e.g.

```ts
export const BASE_BINDINGS= {
  '[class.mat-themed]': '_isThemed',
}

----

@Directive({
  host: {...BASE_BINDINGS, '(click)': '...'}
})
export class Dir1 {}

@Directive({
  host: {...BASE_BINDINGS, '(click)': '...'}
})
export class Dir2 {}
```

Previously when these components were shipped as part of the
library to NPM, consumers were able to consume `Dir1` and `Dir2`.
No errors showed up.

Now with Ivy, when ngcc tries to process the library, an error
will be thrown. The error is stating that the host bindings should
be an object (which they obviously are). This happens because
TypeScript transforms the object spread to individual
`Object.assign` calls (for compatibility).

The partial evaluator used by the `@Directive` annotation handler
is unable to process this expression because there is no
integrated support for `Object.assign`. In View Engine, this was
not a problem because the `metadata.json` files from the library
were used to compute the host bindings.

Fixes #34659

PR Close #34661
This commit is contained in:
Paul Gschwendtner
2020-01-09 20:37:02 +01:00
committed by Andrew Kushnir
parent 93ffc67bfb
commit 6b468f9b2e
18 changed files with 306 additions and 27 deletions

View File

@ -114,7 +114,7 @@ export class ModuleWithProvidersAnalyzer {
`The referenced NgModule in ${fn.declaration.getText()} is not a named class declaration in the typings program; instead we get ${dtsNgModule.getText()}`);
}
return {node: dtsNgModule, viaModule: null};
return {node: dtsNgModule, known: null, viaModule: null};
}
}

View File

@ -126,6 +126,7 @@ export class CommonJsReflectionHost extends Esm5ReflectionHost {
name,
declaration: {
node: null,
known: null,
expression: exportExpression,
viaModule: null,
},
@ -159,9 +160,10 @@ export class CommonJsReflectionHost extends Esm5ReflectionHost {
const reexports: ExportDeclaration[] = [];
importedExports.forEach((decl, name) => {
if (decl.node !== null) {
reexports.push({name, declaration: {node: decl.node, viaModule}});
reexports.push({name, declaration: {node: decl.node, known: null, viaModule}});
} else {
reexports.push({name, declaration: {node: null, expression: decl.expression, viaModule}});
reexports.push(
{name, declaration: {node: null, known: null, expression: decl.expression, viaModule}});
}
});
return reexports;
@ -186,7 +188,7 @@ export class CommonJsReflectionHost extends Esm5ReflectionHost {
}
const viaModule = !importInfo.from.startsWith('.') ? importInfo.from : null;
return {node: importedFile, viaModule};
return {node: importedFile, known: null, viaModule};
}
private resolveModuleName(moduleName: string, containingFile: ts.SourceFile): ts.SourceFile

View File

@ -8,7 +8,7 @@
import * as ts from 'typescript';
import {ClassDeclaration, ClassMember, ClassMemberKind, ConcreteDeclaration, CtorParameter, Declaration, Decorator, TypeScriptReflectionHost, TypeValueReference, isDecoratorIdentifier, reflectObjectLiteral} from '../../../src/ngtsc/reflection';
import {ClassDeclaration, ClassMember, ClassMemberKind, ConcreteDeclaration, CtorParameter, Declaration, Decorator, KnownDeclaration, TypeScriptReflectionHost, TypeValueReference, isDecoratorIdentifier, reflectObjectLiteral,} from '../../../src/ngtsc/reflection';
import {isWithinPackage} from '../analysis/util';
import {Logger} from '../logging/logger';
import {BundleProgram} from '../packages/bundle_program';
@ -353,6 +353,17 @@ export class Esm2015ReflectionHost extends TypeScriptReflectionHost implements N
}
}
// If the identifier resolves to the global JavaScript `Object`, return a
// declaration that denotes it as the known `JsGlobalObject` declaration.
if (superDeclaration !== null && this.isJavaScriptObjectDeclaration(superDeclaration)) {
return {
known: KnownDeclaration.JsGlobalObject,
expression: id,
viaModule: null,
node: null,
};
}
return superDeclaration;
}
@ -1697,6 +1708,30 @@ export class Esm2015ReflectionHost extends TypeScriptReflectionHost implements N
const exportDecl = namespaceExports.get(expression.name.text) !;
return {...exportDecl, viaModule: namespaceDecl.viaModule};
}
/** Checks if the specified declaration resolves to the known JavaScript global `Object`. */
protected isJavaScriptObjectDeclaration(decl: Declaration): boolean {
if (decl.node === null) {
return false;
}
const node = decl.node;
// The default TypeScript library types the global `Object` variable through
// a variable declaration with a type reference resolving to `ObjectConstructor`.
if (!ts.isVariableDeclaration(node) || !ts.isIdentifier(node.name) ||
node.name.text !== 'Object' || node.type === undefined) {
return false;
}
const typeNode = node.type;
// If the variable declaration does not have a type resolving to `ObjectConstructor`,
// we cannot guarantee that the declaration resolves to the global `Object` variable.
if (!ts.isTypeReferenceNode(typeNode) || !ts.isIdentifier(typeNode.typeName) ||
typeNode.typeName.text !== 'ObjectConstructor') {
return false;
}
// Finally, check if the type definition for `Object` originates from a default library
// definition file. This requires default types to be enabled for the host program.
return this.src.program.isSourceFileDefaultLibrary(node.getSourceFile());
}
}
///////////// Exported Helpers /////////////

View File

@ -14,6 +14,7 @@ import {getNameText, hasNameIdentifier, stripDollarSuffix} from '../utils';
import {Esm2015ReflectionHost, ParamInfo, getPropertyValueFromSymbol, isAssignment, isAssignmentStatement} from './esm2015_host';
import {NgccClassSymbol} from './ngcc_host';
/**
* ESM5 packages contain ECMAScript IIFE functions that act like classes. For example:
*
@ -655,6 +656,8 @@ function getTsHelperFn(node: ts.NamedDeclaration): TsHelperFn|null {
null;
switch (name) {
case '__assign':
return TsHelperFn.Assign;
case '__spread':
return TsHelperFn.Spread;
case '__spreadArrays':

View File

@ -140,6 +140,7 @@ export class UmdReflectionHost extends Esm5ReflectionHost {
name,
declaration: {
node: null,
known: null,
expression: exportExpression,
viaModule: null,
},
@ -182,9 +183,10 @@ export class UmdReflectionHost extends Esm5ReflectionHost {
const reexports: ExportDeclaration[] = [];
importedExports.forEach((decl, name) => {
if (decl.node !== null) {
reexports.push({name, declaration: {node: decl.node, viaModule}});
reexports.push({name, declaration: {node: decl.node, known: null, viaModule}});
} else {
reexports.push({name, declaration: {node: null, expression: decl.expression, viaModule}});
reexports.push(
{name, declaration: {node: null, known: null, expression: decl.expression, viaModule}});
}
});
return reexports;
@ -213,7 +215,7 @@ export class UmdReflectionHost extends Esm5ReflectionHost {
// We need to add the `viaModule` because the `getExportsOfModule()` call
// did not know that we were importing the declaration.
return {node: importedFile, viaModule: importInfo.from};
return {node: importedFile, known: null, viaModule: importInfo.from};
}
private resolveModuleName(moduleName: string, containingFile: ts.SourceFile): ts.SourceFile

View File

@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/
import * as ts from 'typescript';
import {AbsoluteFsPath, FileSystem, NgtscCompilerHost, absoluteFrom} from '../../../src/ngtsc/file_system';
import {AbsoluteFsPath, FileSystem, NgtscCompilerHost} from '../../../src/ngtsc/file_system';
import {PathMappings} from '../utils';
import {BundleProgram, makeBundleProgram} from './bundle_program';
import {EntryPoint, EntryPointFormat} from './entry_point';
@ -50,8 +50,7 @@ export function makeEntryPointBundle(
const rootDir = entryPoint.package;
const options: ts.CompilerOptions = {
allowJs: true,
maxNodeModuleJsDepth: Infinity,
noLib: true, rootDir, ...pathMappings
maxNodeModuleJsDepth: Infinity, rootDir, ...pathMappings
};
const srcHost = new NgccSourcesCompilerHost(fs, options, entryPoint.path);
const dtsHost = new NgtscCompilerHost(fs, options);