fix(web): use legacy decorators so they work with TypeScript.

Closes nrwl#1908
jaysoo · Oct 8, 2019 · 5d862f6 · 5d862f6
1 parent e9a6b20
commit 5d862f6
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 6 deletions.
diff --git a/e2e/web.test.ts b/e2e/web.test.ts
@@ -6,8 +6,10 @@ import {
   runCLIAsync,
   uniq,
   forEachCli,
-  supportUi
+  supportUi,
+  updateFile
 } from './utils';
+import { stripIndents } from '@angular-devkit/core/src/utils/literals';
 
 forEachCli(currentCLIName => {
   describe('Web Components Applications', () => {
@@ -57,5 +59,35 @@ forEachCli(currentCLIName => {
         expect(e2eResults).toContain('All specs passed!');
       }
     }, 120000);
+
+    it('should allow for TypeScript-compatible decorators', () => {
+      ensureProject();
+      const appName = uniq('app');
+
+      runCLI(`generate @nrwl/web:app ${appName} --no-interactive`);
+
+      const mainPath = `apps/${appName}/src/app/app.element.ts`;
+      const content = readFile(mainPath);
+      updateFile(
+        mainPath,
+        content
+          .replace(
+            `export class AppElement extends HTMLElement`,
+            stripIndents`
+          function a(ctor) {
+            ctor.title = '${appName}';
+          }
+
+          @a
+          export class AppElement extends HTMLElement`
+          )
+          .replace('${title}', '${(AppElement as any).title}')
+      );
+
+      if (supportUi()) {
+        const e2eResults = runCLI(`e2e ${appName}-e2e`);
+        expect(e2eResults).toContain('All specs passed!');
+      }
+    });
   });
 });
diff --git a/packages/web/src/utils/babel-config.ts b/packages/web/src/utils/babel-config.ts
@@ -28,12 +28,12 @@ export function createBabelConfig(
     ],
     plugins: [
       require.resolve('babel-plugin-macros'),
+      // Must use legacy decorators to remain compatible with TypeScript.
+      [require.resolve('@babel/plugin-proposal-decorators'), { legacy: true }],
       [
-        // Allows decorators to be before export since it is consistent with TypeScript syntax.
-        require.resolve('@babel/plugin-proposal-decorators'),
-        { decoratorsBeforeExport: true }
-      ],
-      [require.resolve('@babel/plugin-proposal-class-properties')]
+        require.resolve('@babel/plugin-proposal-class-properties'),
+        { loose: true }
+      ]
     ]
   };
 }