fix: add support for TypeScript 4.8 (#3548)

markostanimirovic · web-flow · commit d558ce1b23eb · 2022-08-29T15:47:27.000+02:00
Closes #3547
diff --git a/modules/component-store/schematics-core/index.ts b/modules/component-store/schematics-core/index.ts
@@ -92,3 +92,5 @@ export {
   visitNgModules,
   visitTemplates,
 } from './utility/visitors';
+
+export { getNodeDecorators } from './utility/decorators';
diff --git a/modules/component-store/schematics-core/utility/decorators.ts b/modules/component-store/schematics-core/utility/decorators.ts
@@ -0,0 +1,10 @@
+import * as ts from 'typescript';
+
+/**
+ * In TS 4.8 the `decorators` are combined with the `modifiers` array.
+ * Once we drop support for older versions, we can remove this function
+ * and use `ts.getDecorators`.
+ */
+export function getNodeDecorators(node: ts.Node): ts.Decorator[] | undefined {
+  return (ts as any).getDecorators?.(node) || node.decorators;
+}
diff --git a/modules/component-store/schematics-core/utility/visitors.ts b/modules/component-store/schematics-core/utility/visitors.ts
@@ -1,6 +1,7 @@
 import * as ts from 'typescript';
 import { normalize, resolve } from '@angular-devkit/core';
 import { Tree, DirEntry } from '@angular-devkit/schematics';
+import { getNodeDecorators } from './decorators';
 
 export function visitTSSourceFiles<Result = void>(
   tree: Tree,
@@ -166,15 +167,13 @@ export function visitDecorator(
     }
 
     const classDeclarationNode = node as ts.ClassDeclaration;
+    const decorators = getNodeDecorators(classDeclarationNode);
 
-    if (
-      !classDeclarationNode.decorators ||
-      !classDeclarationNode.decorators.length
-    ) {
+    if (!decorators || !decorators.length) {
       return;
     }
 
-    const componentDecorator = classDeclarationNode.decorators.find((d) => {
+    const componentDecorator = decorators.find((d) => {
       return (
         ts.isCallExpression(d.expression) &&
         ts.isIdentifier(d.expression.expression) &&
diff --git a/modules/component/schematics-core/index.ts b/modules/component/schematics-core/index.ts
@@ -92,3 +92,5 @@ export {
   visitNgModules,
   visitTemplates,
 } from './utility/visitors';
+
+export { getNodeDecorators } from './utility/decorators';
diff --git a/modules/component/schematics-core/utility/decorators.ts b/modules/component/schematics-core/utility/decorators.ts
@@ -0,0 +1,10 @@
+import * as ts from 'typescript';
+
+/**
+ * In TS 4.8 the `decorators` are combined with the `modifiers` array.
+ * Once we drop support for older versions, we can remove this function
+ * and use `ts.getDecorators`.
+ */
+export function getNodeDecorators(node: ts.Node): ts.Decorator[] | undefined {
+  return (ts as any).getDecorators?.(node) || node.decorators;
+}
diff --git a/modules/component/schematics-core/utility/visitors.ts b/modules/component/schematics-core/utility/visitors.ts
@@ -1,6 +1,7 @@
 import * as ts from 'typescript';
 import { normalize, resolve } from '@angular-devkit/core';
 import { Tree, DirEntry } from '@angular-devkit/schematics';
+import { getNodeDecorators } from './decorators';
 
 export function visitTSSourceFiles<Result = void>(
   tree: Tree,
@@ -166,15 +167,13 @@ export function visitDecorator(
     }
 
     const classDeclarationNode = node as ts.ClassDeclaration;
+    const decorators = getNodeDecorators(classDeclarationNode);
 
-    if (
-      !classDeclarationNode.decorators ||
-      !classDeclarationNode.decorators.length
-    ) {
+    if (!decorators || !decorators.length) {
       return;
     }
 
-    const componentDecorator = classDeclarationNode.decorators.find((d) => {
+    const componentDecorator = decorators.find((d) => {
       return (
         ts.isCallExpression(d.expression) &&
         ts.isIdentifier(d.expression.expression) &&
diff --git a/modules/data/schematics-core/index.ts b/modules/data/schematics-core/index.ts
@@ -92,3 +92,5 @@ export {
   visitNgModules,
   visitTemplates,
 } from './utility/visitors';
+
+export { getNodeDecorators } from './utility/decorators';
diff --git a/modules/data/schematics-core/utility/decorators.ts b/modules/data/schematics-core/utility/decorators.ts
@@ -0,0 +1,10 @@
+import * as ts from 'typescript';
+
+/**
+ * In TS 4.8 the `decorators` are combined with the `modifiers` array.
+ * Once we drop support for older versions, we can remove this function
+ * and use `ts.getDecorators`.
+ */
+export function getNodeDecorators(node: ts.Node): ts.Decorator[] | undefined {
+  return (ts as any).getDecorators?.(node) || node.decorators;
+}
diff --git a/modules/data/schematics-core/utility/visitors.ts b/modules/data/schematics-core/utility/visitors.ts
@@ -1,6 +1,7 @@
 import * as ts from 'typescript';
 import { normalize, resolve } from '@angular-devkit/core';
 import { Tree, DirEntry } from '@angular-devkit/schematics';
+import { getNodeDecorators } from './decorators';
 
 export function visitTSSourceFiles<Result = void>(
   tree: Tree,
@@ -166,15 +167,13 @@ export function visitDecorator(
     }
 
     const classDeclarationNode = node as ts.ClassDeclaration;
+    const decorators = getNodeDecorators(classDeclarationNode);
 
-    if (
-      !classDeclarationNode.decorators ||
-      !classDeclarationNode.decorators.length
-    ) {
+    if (!decorators || !decorators.length) {
       return;
     }
 
-    const componentDecorator = classDeclarationNode.decorators.find((d) => {
+    const componentDecorator = decorators.find((d) => {
       return (
         ts.isCallExpression(d.expression) &&
         ts.isIdentifier(d.expression.expression) &&
diff --git a/modules/effects/migrations/13_0_0/index.ts b/modules/effects/migrations/13_0_0/index.ts
@@ -7,6 +7,7 @@ import {
   replaceImport,
   commitChanges,
   visitTSSourceFiles,
+  getNodeDecorators,
 } from '../../schematics-core';
 
 export function migrateToCreators(): Rule {
@@ -15,13 +16,10 @@ export function migrateToCreators(): Rule {
       const effectsPerClass = sourceFile.statements
         .filter(ts.isClassDeclaration)
         .map((clas) =>
-          clas.members
-            .filter(ts.isPropertyDeclaration)
-            .filter(
-              (property) =>
-                property.decorators &&
-                property.decorators.some(isEffectDecorator)
-            )
+          clas.members.filter(ts.isPropertyDeclaration).filter((property) => {
+            const decorators = getNodeDecorators(property);
+            return decorators && decorators.some(isEffectDecorator);
+          })
         );
 
       const effects = effectsPerClass.reduce(
@@ -60,7 +58,9 @@ function replaceEffectDecorators(
       if (!effect.initializer) {
         return [];
       }
-      const decorator = (effect.decorators || []).find(isEffectDecorator);
+      const decorator = (getNodeDecorators(effect) || []).find(
+        isEffectDecorator
+      );
       if (!decorator) {
         return [];
       }
@@ -86,7 +86,7 @@ function replaceEffectDecorators(
     .reduce((acc, inserts) => acc.concat(inserts), []);
 
   const removes = effects
-    .map((effect) => effect.decorators)
+    .map((effect) => getNodeDecorators(effect))
     .map((decorators) => {
       if (!decorators) {
         return [];
diff --git a/modules/effects/schematics-core/index.ts b/modules/effects/schematics-core/index.ts
@@ -92,3 +92,5 @@ export {
   visitNgModules,
   visitTemplates,
 } from './utility/visitors';
+
+export { getNodeDecorators } from './utility/decorators';
diff --git a/modules/effects/schematics-core/utility/decorators.ts b/modules/effects/schematics-core/utility/decorators.ts
@@ -0,0 +1,10 @@
+import * as ts from 'typescript';
+
+/**
+ * In TS 4.8 the `decorators` are combined with the `modifiers` array.
+ * Once we drop support for older versions, we can remove this function
+ * and use `ts.getDecorators`.
+ */
+export function getNodeDecorators(node: ts.Node): ts.Decorator[] | undefined {
+  return (ts as any).getDecorators?.(node) || node.decorators;
+}
diff --git a/modules/effects/schematics-core/utility/visitors.ts b/modules/effects/schematics-core/utility/visitors.ts
@@ -1,6 +1,7 @@
 import * as ts from 'typescript';
 import { normalize, resolve } from '@angular-devkit/core';
 import { Tree, DirEntry } from '@angular-devkit/schematics';
+import { getNodeDecorators } from './decorators';
 
 export function visitTSSourceFiles<Result = void>(
   tree: Tree,
@@ -166,15 +167,13 @@ export function visitDecorator(
     }
 
     const classDeclarationNode = node as ts.ClassDeclaration;
+    const decorators = getNodeDecorators(classDeclarationNode);
 
-    if (
-      !classDeclarationNode.decorators ||
-      !classDeclarationNode.decorators.length
-    ) {
+    if (!decorators || !decorators.length) {
       return;
     }
 
-    const componentDecorator = classDeclarationNode.decorators.find((d) => {
+    const componentDecorator = decorators.find((d) => {
       return (
         ts.isCallExpression(d.expression) &&
         ts.isIdentifier(d.expression.expression) &&
diff --git a/modules/effects/src/effect_decorator.ts b/modules/effects/src/effect_decorator.ts
@@ -28,7 +28,7 @@ export function Effect(config: EffectConfig = {}) {
   };
 }
 
-export function getEffectDecoratorMetadata<T>(
+export function getEffectDecoratorMetadata<T extends Object>(
   instance: T
 ): EffectMetadata<T>[] {
   const effectsDecorators: EffectMetadata<T>[] = compose(
diff --git a/modules/effects/src/effects_metadata.ts b/modules/effects/src/effects_metadata.ts
@@ -2,7 +2,9 @@ import { EffectMetadata, EffectsMetadata } from './models';
 import { getCreateEffectMetadata } from './effect_creator';
 import { getEffectDecoratorMetadata } from './effect_decorator';
 
-export function getEffectsMetadata<T>(instance: T): EffectsMetadata<T> {
+export function getEffectsMetadata<T extends Object>(
+  instance: T
+): EffectsMetadata<T> {
   return getSourceMetadata(instance).reduce(
     (
       acc: EffectsMetadata<T>,
@@ -15,7 +17,9 @@ export function getEffectsMetadata<T>(instance: T): EffectsMetadata<T> {
   );
 }
 
-export function getSourceMetadata<T>(instance: T): EffectMetadata<T>[] {
+export function getSourceMetadata<T extends Object>(
+  instance: T
+): EffectMetadata<T>[] {
   const effects: Array<(instance: T) => EffectMetadata<T>[]> = [
     getEffectDecoratorMetadata,
     getCreateEffectMetadata,
diff --git a/modules/effects/src/models.ts b/modules/effects/src/models.ts
@@ -34,6 +34,6 @@ export interface EffectMetadata<T extends Object>
   propertyName: EffectPropertyKey<T>;
 }
 
-export type EffectsMetadata<T> = {
-  [key in EffectPropertyKey<T>]?: EffectConfig;
+export type EffectsMetadata<T extends Object> = {
+  [Key in EffectPropertyKey<T>]?: EffectConfig;
 };
diff --git a/modules/entity/schematics-core/index.ts b/modules/entity/schematics-core/index.ts
@@ -92,3 +92,5 @@ export {
   visitNgModules,
   visitTemplates,
 } from './utility/visitors';
+
+export { getNodeDecorators } from './utility/decorators';
diff --git a/modules/entity/schematics-core/utility/decorators.ts b/modules/entity/schematics-core/utility/decorators.ts
@@ -0,0 +1,10 @@
+import * as ts from 'typescript';
+
+/**
+ * In TS 4.8 the `decorators` are combined with the `modifiers` array.
+ * Once we drop support for older versions, we can remove this function
+ * and use `ts.getDecorators`.
+ */
+export function getNodeDecorators(node: ts.Node): ts.Decorator[] | undefined {
+  return (ts as any).getDecorators?.(node) || node.decorators;
+}
diff --git a/modules/entity/schematics-core/utility/visitors.ts b/modules/entity/schematics-core/utility/visitors.ts
@@ -1,6 +1,7 @@
 import * as ts from 'typescript';
 import { normalize, resolve } from '@angular-devkit/core';
 import { Tree, DirEntry } from '@angular-devkit/schematics';
+import { getNodeDecorators } from './decorators';
 
 export function visitTSSourceFiles<Result = void>(
   tree: Tree,
@@ -166,15 +167,13 @@ export function visitDecorator(
     }
 
     const classDeclarationNode = node as ts.ClassDeclaration;
+    const decorators = getNodeDecorators(classDeclarationNode);
 
-    if (
-      !classDeclarationNode.decorators ||
-      !classDeclarationNode.decorators.length
-    ) {
+    if (!decorators || !decorators.length) {
       return;
     }
 
-    const componentDecorator = classDeclarationNode.decorators.find((d) => {
+    const componentDecorator = decorators.find((d) => {
       return (
         ts.isCallExpression(d.expression) &&
         ts.isIdentifier(d.expression.expression) &&
diff --git a/modules/router-store/schematics-core/index.ts b/modules/router-store/schematics-core/index.ts
@@ -92,3 +92,5 @@ export {
   visitNgModules,
   visitTemplates,
 } from './utility/visitors';
+
+export { getNodeDecorators } from './utility/decorators';
diff --git a/modules/router-store/schematics-core/utility/decorators.ts b/modules/router-store/schematics-core/utility/decorators.ts
@@ -0,0 +1,10 @@
+import * as ts from 'typescript';
+
+/**
+ * In TS 4.8 the `decorators` are combined with the `modifiers` array.
+ * Once we drop support for older versions, we can remove this function
+ * and use `ts.getDecorators`.
+ */
+export function getNodeDecorators(node: ts.Node): ts.Decorator[] | undefined {
+  return (ts as any).getDecorators?.(node) || node.decorators;
+}
diff --git a/modules/router-store/schematics-core/utility/visitors.ts b/modules/router-store/schematics-core/utility/visitors.ts
@@ -1,6 +1,7 @@
 import * as ts from 'typescript';
 import { normalize, resolve } from '@angular-devkit/core';
 import { Tree, DirEntry } from '@angular-devkit/schematics';
+import { getNodeDecorators } from './decorators';
 
 export function visitTSSourceFiles<Result = void>(
   tree: Tree,
@@ -166,15 +167,13 @@ export function visitDecorator(
     }
 
     const classDeclarationNode = node as ts.ClassDeclaration;
+    const decorators = getNodeDecorators(classDeclarationNode);
 
-    if (
-      !classDeclarationNode.decorators ||
-      !classDeclarationNode.decorators.length
-    ) {
+    if (!decorators || !decorators.length) {
       return;
     }
 
-    const componentDecorator = classDeclarationNode.decorators.find((d) => {
+    const componentDecorator = decorators.find((d) => {
       return (
         ts.isCallExpression(d.expression) &&
         ts.isIdentifier(d.expression.expression) &&
diff --git a/modules/router-store/src/router_selectors.ts b/modules/router-store/src/router_selectors.ts
@@ -13,7 +13,7 @@ export function createRouterSelector<
   return createFeatureSelector(DEFAULT_ROUTER_FEATURENAME);
 }
 
-export function getSelectors<V>(
+export function getSelectors<V extends Record<string, any>>(
   selectState: (state: V) => RouterReducerState<any> = createRouterSelector<V>()
 ): RouterStateSelectors<V> {
   const selectRouterState = createSelector(
diff --git a/modules/schematics-core/index.ts b/modules/schematics-core/index.ts
@@ -92,3 +92,5 @@ export {
   visitNgModules,
   visitTemplates,
 } from './utility/visitors';
+
+export { getNodeDecorators } from './utility/decorators';
diff --git a/modules/schematics-core/utility/decorators.ts b/modules/schematics-core/utility/decorators.ts
@@ -0,0 +1,10 @@
+import * as ts from 'typescript';
+
+/**
+ * In TS 4.8 the `decorators` are combined with the `modifiers` array.
+ * Once we drop support for older versions, we can remove this function
+ * and use `ts.getDecorators`.
+ */
+export function getNodeDecorators(node: ts.Node): ts.Decorator[] | undefined {
+  return (ts as any).getDecorators?.(node) || node.decorators;
+}
diff --git a/modules/schematics-core/utility/visitors.ts b/modules/schematics-core/utility/visitors.ts
diff --git a/modules/schematics/schematics-core/index.ts b/modules/schematics/schematics-core/index.ts
diff --git a/modules/schematics/schematics-core/utility/decorators.ts b/modules/schematics/schematics-core/utility/decorators.ts
diff --git a/modules/schematics/schematics-core/utility/visitors.ts b/modules/schematics/schematics-core/utility/visitors.ts
diff --git a/modules/store-devtools/schematics-core/index.ts b/modules/store-devtools/schematics-core/index.ts
diff --git a/modules/store-devtools/schematics-core/utility/decorators.ts b/modules/store-devtools/schematics-core/utility/decorators.ts
diff --git a/modules/store-devtools/schematics-core/utility/visitors.ts b/modules/store-devtools/schematics-core/utility/visitors.ts
diff --git a/modules/store/schematics-core/index.ts b/modules/store/schematics-core/index.ts
diff --git a/modules/store/schematics-core/utility/decorators.ts b/modules/store/schematics-core/utility/decorators.ts
diff --git a/modules/store/schematics-core/utility/visitors.ts b/modules/store/schematics-core/utility/visitors.ts
diff --git a/modules/store/testing/src/mock_state.ts b/modules/store/testing/src/mock_state.ts
