refactor(@ngtools/webpack): replace deprecated TypeScript methods

TypeScript provides a set of  pure  functions for producing syntax tree nodes. Since TypeScript 4.0 these methods have been deprecated in favor of the `factory` API.

See: https://github.com/microsoft/TypeScript/wiki/API-Breaking-Changes#typescript-40

Author: alan-agius4

packages/ngtools/webpack/src/transformers/export_ngfactory.ts

@@ -58,10 +58,10 @@ export function exportNgFactory(
       const factoryClassName = entryModule.className + 'NgFactory';
       const factoryModulePath = normalizedEntryModulePath + '.ngfactory';
 
-      const namedExports = ts.createNamedExports([ts.createExportSpecifier(undefined,
-        ts.createIdentifier(factoryClassName))]);
-      const newImport = ts.createExportDeclaration(undefined, undefined, namedExports,
-        ts.createLiteral(factoryModulePath));
+      const namedExports = ts.factory.createNamedExports([ts.factory.createExportSpecifier(undefined,
+        ts.factory.createIdentifier(factoryClassName))]);
+      const newImport = ts.factory.createExportDeclaration(undefined, undefined, false, namedExports,
+        ts.factory.createStringLiteral(factoryModulePath));
 
       const firstNode = getFirstNode(sourceFile);
       if (firstNode) {

packages/ngtools/webpack/src/transformers/import_factory.ts

@@ -227,10 +227,10 @@ function replaceImport(
   const replacementVisitor: ts.Visitor = (node: ts.Node) => {
     if (node === importStringLit) {
       // Transform the import string.
-      return ts.createStringLiteral(newImportString);
+      return ts.factory.createStringLiteral(newImportString);
     } else if (node === exportNameId) {
       // Transform the export name.
-      return ts.createIdentifier(exportNameId.text + 'NgFactory');
+      return ts.factory.createIdentifier(exportNameId.text + 'NgFactory');
     }
 
     return ts.visitEachChild(node, replacementVisitor, context);

packages/ngtools/webpack/src/transformers/insert_import.ts

@@ -23,10 +23,10 @@ export function insertStarImport(
   // We don't need to verify if the symbol is already imported, star imports should be unique.
 
   // Create the new import node.
-  const namespaceImport = ts.createNamespaceImport(identifier);
-  const importClause = ts.createImportClause(undefined, namespaceImport);
-  const newImport = ts.createImportDeclaration(undefined, undefined, importClause,
-    ts.createLiteral(modulePath));
+  const namespaceImport = ts.factory.createNamespaceImport(identifier);
+  const importClause = ts.factory.createImportClause(false, undefined, namespaceImport);
+  const newImport = ts.factory.createImportDeclaration(undefined, undefined, importClause,
+    ts.factory.createStringLiteral(modulePath));
 
   if (target) {
     ops.push(new AddNodeOperation(
@@ -106,15 +106,15 @@ export function insertImport(
       sourceFile,
       maybeImports[0].elements[maybeImports[0].elements.length - 1],
       undefined,
-      ts.createImportSpecifier(undefined, ts.createIdentifier(symbolName)),
+      ts.factory.createImportSpecifier(undefined, ts.factory.createIdentifier(symbolName)),
     ));
   } else {
     // Create the new import node.
-    const namedImports = ts.createNamedImports([ts.createImportSpecifier(undefined,
-      ts.createIdentifier(symbolName))]);
-    const importClause = ts.createImportClause(undefined, namedImports);
-    const newImport = ts.createImportDeclaration(undefined, undefined, importClause,
-      ts.createLiteral(modulePath));
+    const namedImports = ts.factory.createNamedImports([ts.factory.createImportSpecifier(undefined,
+      ts.factory.createIdentifier(symbolName))]);
+    const importClause = ts.factory.createImportClause(false, undefined, namedImports);
+    const newImport = ts.factory.createImportDeclaration(undefined, undefined, importClause,
+      ts.factory.createStringLiteral(modulePath));
 
     if (allImports.length > 0) {
       // Find the last import and insert after.

packages/ngtools/webpack/src/transformers/register_locale_data.ts

@@ -66,7 +66,7 @@ export function registerLocaleData(
       }
 
       // Create the import node for the locale.
-      const localeNamespaceId = ts.createUniqueName('__NgCli_locale_');
+      const localeNamespaceId = ts.factory.createUniqueName('__NgCli_locale_');
       ops.push(...insertStarImport(
         sourceFile,
         localeNamespaceId,
@@ -76,19 +76,19 @@ export function registerLocaleData(
       ));
 
       // Create the import node for the registerLocaleData function.
-      const regIdentifier = ts.createIdentifier(`registerLocaleData`);
-      const regNamespaceId = ts.createUniqueName('__NgCli_locale_');
+      const regIdentifier = ts.factory.createIdentifier(`registerLocaleData`);
+      const regNamespaceId = ts.factory.createUniqueName('__NgCli_locale_');
       ops.push(
         ...insertStarImport(sourceFile, regNamespaceId, '@angular/common', firstNode, true),
       );
 
       // Create the register function call
-      const registerFunctionCall = ts.createCall(
-        ts.createPropertyAccess(regNamespaceId, regIdentifier),
+      const registerFunctionCall = ts.factory.createCallExpression(
+        ts.factory.createPropertyAccessExpression(regNamespaceId, regIdentifier),
         undefined,
-        [ts.createPropertyAccess(localeNamespaceId, 'default')],
+        [ts.factory.createPropertyAccessExpression(localeNamespaceId, 'default')],
       );
-      const registerFunctionStatement = ts.createStatement(registerFunctionCall);
+      const registerFunctionStatement = ts.factory.createExpressionStatement(registerFunctionCall);
 
       ops.push(new AddNodeOperation(
         sourceFile,

packages/ngtools/webpack/src/transformers/replace_bootstrap.ts

@@ -74,8 +74,8 @@ export function replaceBootstrap(
 
       const platformBrowserDynamicIdentifier = innerCallExpr.expression as ts.Identifier;
 
-      const idPlatformBrowser = ts.createUniqueName('__NgCli_bootstrap_');
-      const idNgFactory = ts.createUniqueName('__NgCli_bootstrap_');
+      const idPlatformBrowser = ts.factory.createUniqueName('__NgCli_bootstrap_');
+      const idNgFactory = ts.factory.createUniqueName('__NgCli_bootstrap_');
 
       // Add the transform operations.
       const relativeEntryModulePath = relative(dirname(sourceFile.fileName), entryModule.path);
@@ -93,13 +93,13 @@ export function replaceBootstrap(
         // Replace the entry module import.
         ...insertStarImport(sourceFile, idNgFactory, modulePath),
         new ReplaceNodeOperation(sourceFile, entryModuleIdentifier,
-          ts.createPropertyAccess(idNgFactory, ts.createIdentifier(className))),
+          ts.factory.createPropertyAccessExpression(idNgFactory, ts.factory.createIdentifier(className))),
         // Replace the platformBrowserDynamic import.
         ...insertStarImport(sourceFile, idPlatformBrowser, '@angular/platform-browser'),
         new ReplaceNodeOperation(sourceFile, platformBrowserDynamicIdentifier,
-          ts.createPropertyAccess(idPlatformBrowser, 'platformBrowser')),
+          ts.factory.createPropertyAccessExpression(idPlatformBrowser, 'platformBrowser')),
         new ReplaceNodeOperation(sourceFile, bootstrapModuleIdentifier,
-          ts.createIdentifier(bootstrapIdentifier)),
+          ts.factory.createIdentifier(bootstrapIdentifier)),
       );
     });
 

packages/ngtools/webpack/src/transformers/replace_resources.ts

@@ -16,15 +16,17 @@ export function replaceResources(
     const typeChecker = getTypeChecker();
     const resourceImportDeclarations: ts.ImportDeclaration[] = [];
     const moduleKind = context.getCompilerOptions().module;
+    const nodeFactory = context.factory;
+
     const visitNode: ts.Visitor = (node: ts.Node) => {
       if (ts.isClassDeclaration(node)) {
         const decorators = ts.visitNodes(node.decorators, node =>
           ts.isDecorator(node)
-            ? visitDecorator(node, typeChecker, directTemplateLoading, resourceImportDeclarations, moduleKind)
+            ? visitDecorator(nodeFactory, node, typeChecker, directTemplateLoading, resourceImportDeclarations, moduleKind)
             : node,
         );
 
-        return ts.updateClassDeclaration(
+        return nodeFactory.updateClassDeclaration(
           node,
           decorators,
           node.modifiers,
@@ -46,10 +48,10 @@ export function replaceResources(
       const updatedSourceFile = ts.visitNode(sourceFile, visitNode);
       if (resourceImportDeclarations.length) {
         // Add resource imports
-        return ts.updateSourceFileNode(
+        return context.factory.updateSourceFile(
           updatedSourceFile,
           ts.setTextRange(
-            ts.createNodeArray([
+            context.factory.createNodeArray([
               ...resourceImportDeclarations,
               ...updatedSourceFile.statements,
             ]),
@@ -64,6 +66,7 @@ export function replaceResources(
 }
 
 function visitDecorator(
+  nodeFactory: ts.NodeFactory,
   node: ts.Decorator,
   typeChecker: ts.TypeChecker,
   directTemplateLoading: boolean,
@@ -91,29 +94,30 @@ function visitDecorator(
   // visit all properties
   let properties = ts.visitNodes(objectExpression.properties, node =>
     ts.isObjectLiteralElementLike(node)
-      ? visitComponentMetadata(node, styleReplacements, directTemplateLoading, resourceImportDeclarations, moduleKind)
+      ? visitComponentMetadata(nodeFactory, node, styleReplacements, directTemplateLoading, resourceImportDeclarations, moduleKind)
       : node,
   );
 
   // replace properties with updated properties
   if (styleReplacements.length > 0) {
-    const styleProperty = ts.createPropertyAssignment(
-      ts.createIdentifier('styles'),
-      ts.createArrayLiteral(styleReplacements),
+    const styleProperty = nodeFactory.createPropertyAssignment(
+      nodeFactory.createIdentifier('styles'),
+      nodeFactory.createArrayLiteralExpression(styleReplacements),
     );
 
-    properties = ts.createNodeArray([...properties, styleProperty]);
+    properties = nodeFactory.createNodeArray([...properties, styleProperty]);
   }
 
-  return ts.updateDecorator(
+  return nodeFactory.updateDecorator(
     node,
-    ts.updateCall(decoratorFactory, decoratorFactory.expression, decoratorFactory.typeArguments, [
-      ts.updateObjectLiteral(objectExpression, properties),
+    nodeFactory.updateCallExpression(decoratorFactory, decoratorFactory.expression, decoratorFactory.typeArguments, [
+      nodeFactory.updateObjectLiteralExpression(objectExpression, properties),
     ]),
   );
 }
 
 function visitComponentMetadata(
+  nodeFactory: ts.NodeFactory,
   node: ts.ObjectLiteralElementLike,
   styleReplacements: ts.Expression[],
   directTemplateLoading: boolean,
@@ -131,6 +135,7 @@ function visitComponentMetadata(
 
     case 'templateUrl':
       const importName = createResourceImport(
+        nodeFactory,
         node.initializer,
         directTemplateLoading ? '!raw-loader!' : '',
         resourceImportDeclarations,
@@ -140,9 +145,9 @@ function visitComponentMetadata(
         return node;
       }
 
-      return ts.updatePropertyAssignment(
+      return nodeFactory.updatePropertyAssignment(
         node,
-        ts.createIdentifier('template'),
+        nodeFactory.createIdentifier('template'),
         importName,
       );
     case 'styles':
@@ -158,10 +163,10 @@ function visitComponentMetadata(
         }
 
         if (isInlineStyles) {
-          return ts.createLiteral(node.text);
+          return nodeFactory.createStringLiteral(node.text);
         }
 
-        return createResourceImport(node, undefined, resourceImportDeclarations, moduleKind) || node;
+        return createResourceImport(nodeFactory, node, undefined, resourceImportDeclarations, moduleKind) || node;
       });
 
       // Styles should be placed first
@@ -200,6 +205,7 @@ function isComponentDecorator(node: ts.Node, typeChecker: ts.TypeChecker): node
 }
 
 function createResourceImport(
+  nodeFactory: ts.NodeFactory,
   node: ts.Node,
   loader: string | undefined,
   resourceImportDeclarations: ts.ImportDeclaration[],
@@ -210,23 +216,23 @@ function createResourceImport(
     return null;
   }
 
-  const urlLiteral = ts.createLiteral(url);
+  const urlLiteral = nodeFactory.createStringLiteral(url);
 
   if (moduleKind < ts.ModuleKind.ES2015) {
-    return ts.createPropertyAccess(
-      ts.createCall(
-        ts.createIdentifier('require'),
+    return nodeFactory.createPropertyAccessExpression(
+      nodeFactory.createCallExpression(
+        nodeFactory.createIdentifier('require'),
         [],
         [urlLiteral],
       ),
       'default',
     );
   } else {
-    const importName = ts.createIdentifier(`__NG_CLI_RESOURCE__${resourceImportDeclarations.length}`);
-    resourceImportDeclarations.push(ts.createImportDeclaration(
+    const importName = nodeFactory.createIdentifier(`__NG_CLI_RESOURCE__${resourceImportDeclarations.length}`);
+    resourceImportDeclarations.push(nodeFactory.createImportDeclaration(
       undefined,
       undefined,
-      ts.createImportClause(importName, undefined),
+      nodeFactory.createImportClause(false, importName, undefined),
       urlLiteral,
     ));
 

packages/ngtools/webpack/src/transformers/replace_server_bootstrap.ts

@@ -79,21 +79,21 @@ export function replaceServerBootstrap(
 
           const platformDynamicServerIdentifier = innerCallExpr.expression as ts.Identifier;
 
-          const idPlatformServer = ts.createUniqueName('__NgCli_bootstrap_');
-          const idNgFactory = ts.createUniqueName('__NgCli_bootstrap_');
+          const idPlatformServer = ts.factory.createUniqueName('__NgCli_bootstrap_');
+          const idNgFactory = ts.factory.createUniqueName('__NgCli_bootstrap_');
 
           // Add the transform operations.
           ops.push(
             // Replace the entry module import.
             ...insertStarImport(sourceFile, idNgFactory, factoryModulePath),
             new ReplaceNodeOperation(sourceFile, entryModuleIdentifier,
-              ts.createPropertyAccess(idNgFactory, ts.createIdentifier(factoryClassName))),
+              ts.factory.createPropertyAccessExpression(idNgFactory, ts.factory.createIdentifier(factoryClassName))),
             // Replace the platformBrowserDynamic import.
             ...insertStarImport(sourceFile, idPlatformServer, '@angular/platform-server'),
             new ReplaceNodeOperation(sourceFile, platformDynamicServerIdentifier,
-              ts.createPropertyAccess(idPlatformServer, 'platformServer')),
+              ts.factory.createPropertyAccessExpression(idPlatformServer, 'platformServer')),
             new ReplaceNodeOperation(sourceFile, bootstrapModuleIdentifier,
-              ts.createIdentifier('bootstrapModuleFactory')),
+              ts.factory.createIdentifier('bootstrapModuleFactory')),
           );
         } else if (callExpr.expression.kind === ts.SyntaxKind.Identifier) {
           // Figure out if it is renderModule
@@ -106,30 +106,30 @@ export function replaceServerBootstrap(
 
           const renderModuleIdentifier = identifierExpr as ts.Identifier;
 
-          const idPlatformServer = ts.createUniqueName('__NgCli_bootstrap_');
-          const idNgFactory = ts.createUniqueName('__NgCli_bootstrap_');
+          const idPlatformServer = ts.factory.createUniqueName('__NgCli_bootstrap_');
+          const idNgFactory = ts.factory.createUniqueName('__NgCli_bootstrap_');
 
           ops.push(
             // Replace the entry module import.
             ...insertStarImport(sourceFile, idNgFactory, factoryModulePath),
             new ReplaceNodeOperation(sourceFile, entryModuleIdentifier,
-              ts.createPropertyAccess(idNgFactory, ts.createIdentifier(factoryClassName))),
+              ts.factory.createPropertyAccessExpression(idNgFactory, ts.factory.createIdentifier(factoryClassName))),
             // Replace the renderModule import.
             ...insertStarImport(sourceFile, idPlatformServer, '@angular/platform-server'),
             new ReplaceNodeOperation(sourceFile, renderModuleIdentifier,
-              ts.createPropertyAccess(idPlatformServer, 'renderModuleFactory')),
+              ts.factory.createPropertyAccessExpression(idPlatformServer, 'renderModuleFactory')),
           );
         }
       } else if (entryModuleIdentifier.parent.kind === ts.SyntaxKind.PropertyAssignment) {
         // This is for things that accept a module as a property in a config object
         // .ie the express engine
 
-        const idNgFactory = ts.createUniqueName('__NgCli_bootstrap_');
+        const idNgFactory = ts.factory.createUniqueName('__NgCli_bootstrap_');
 
         ops.push(
           ...insertStarImport(sourceFile, idNgFactory, factoryModulePath),
           new ReplaceNodeOperation(sourceFile, entryModuleIdentifier,
-            ts.createPropertyAccess(idNgFactory, ts.createIdentifier(factoryClassName))),
+            ts.factory.createPropertyAccessExpression(idNgFactory, ts.factory.createIdentifier(factoryClassName))),
         );
       }
     });