fix(vite-plugin-angular): add Vitest plugin to transform async/await …

…in Angular packages (#760)

.prettierignore

@@ -5,4 +5,5 @@
 .prettierignore
 .docusaurus/
 pnpm-lock.yaml
-/.nx/cache
+/.nx/cache
+.angular

apps/astro-app-e2e-playwright/tests/app.spec.ts

@@ -47,7 +47,7 @@ describe('AstroApp', () => {
       ).toContain(/Angular \(server side binding\)/i);
     });
 
-    test('Then client side rendered CardComponent should emit an event on click', async () => {
+    test.skip('Then client side rendered CardComponent should emit an event on click', async () => {
       const console = waitForConsole();
       const componentLocator = page.locator(
         '[data-analog-id=card-component-1]'

libs/card/.eslintrc.json

@@ -0,0 +1,36 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "lib",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "lib",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}

libs/card/README.md

@@ -0,0 +1,3 @@
+# libs/card
+
+This library was generated with [Nx](https://nx.dev).

libs/card/project.json

@@ -0,0 +1,21 @@
+{
+  "name": "card",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/card/src",
+  "prefix": "lib",
+  "tags": [],
+  "projectType": "library",
+  "targets": {
+    "test": {
+      "executor": "@nx/vite:test"
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["libs/card/**/*.ts", "libs/card/**/*.html"]
+      }
+    }
+  },
+  "implicitDependencies": ["vite-plugin-angular"]
+}

libs/card/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/card/card.component';

libs/card/src/lib/card/__snapshots__/card.component.spec.ts.snap

@@ -0,0 +1,18 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`CardComponent > should create the app 1`] = `
+<lib-card>
+  card-works
+
+  <button
+    _ngcontent-a-c1042141038=""
+    color="primary"
+    mat-button=""
+  >
+    Render card
+  </button>
+  <!--bindings={
+  "ng-reflect-ng-if": "false"
+}-->
+</lib-card>
+`;

libs/card/src/lib/card/card.component.html

@@ -0,0 +1,3 @@
+{{ title }}
+<button mat-button color="primary" (click)="render = true">Render card</button>
+<mat-card *ngIf="render"> Some card </mat-card>

libs/card/src/lib/card/card.component.spec.ts

@@ -0,0 +1,52 @@
+// @vitest-environment happy-dom
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { MatButtonHarness } from '@angular/material/button/testing';
+import { MatCardHarness } from '@angular/material/card/testing';
+
+import { CardComponent } from './card.component';
+
+describe('CardComponent', () => {
+  let loader: HarnessLoader;
+  let fixture: ComponentFixture<CardComponent>;
+  let component: CardComponent;
+
+  beforeEach(() =>
+    TestBed.configureTestingModule({
+      imports: [CardComponent],
+    })
+  );
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CardComponent);
+    component = fixture.componentInstance;
+    loader = TestbedHarnessEnvironment.loader(fixture);
+    fixture.detectChanges();
+  });
+
+  it('should show a card once we click on the button', async () => {
+    const button = await loader.getHarness(MatButtonHarness);
+
+    const card = await loader.getHarnessOrNull(MatCardHarness);
+    expect(card).toBeNull();
+
+    await button.click();
+
+    const cardAfterClick = await loader.getHarnessOrNull(MatCardHarness);
+    expect(cardAfterClick).not.toBeNull();
+  });
+
+  it('should create the app', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it(`should have as title 'vitetest'`, () => {
+    expect(component.title).toEqual('card-works');
+  });
+
+  it('should create the app', () => {
+    expect(fixture).toMatchSnapshot();
+  });
+});

libs/card/src/lib/card/card.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatCardModule } from '@angular/material/card';
+
+@Component({
+  selector: 'lib-card',
+  standalone: true,
+  imports: [CommonModule, MatCardModule],
+  templateUrl: './card.component.html',
+  styleUrls: ['./card.component.css'],
+})
+export class CardComponent {
+  title = 'card-works';
+  render = false;
+}

libs/card/src/test-setup.ts

@@ -0,0 +1,16 @@
+import '@analogjs/vite-plugin-angular/setup-vitest';
+import '@angular/compiler';
+
+/**
+ * Initialize TestBed for all tests inside of content
+ */
+import { TestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting,
+} from '@angular/platform-browser-dynamic/testing';
+
+TestBed.initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);

libs/card/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "useDefineForClassFields": false,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json",
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

libs/card/tsconfig.lib.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": ["src/**/*.spec.ts", "vite.config.ts"],
+  "include": ["src/**/*.ts"]
+}

libs/card/tsconfig.spec.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["node", "vitest/globals"],
+    "target": "es2016"
+  },
+  "files": ["src/test-setup.ts"],
+  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
+}

libs/card/vite.config.ts

@@ -0,0 +1,23 @@
+/// <reference types="vitest" />
+
+import { defineConfig } from 'vite';
+import angular from '@analogjs/vite-plugin-angular';
+
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }) => {
+  return {
+    plugins: [angular()],
+    test: {
+      globals: true,
+      environment: 'jsdom',
+      setupFiles: ['src/test-setup.ts'],
+      include: ['**/*.spec.ts'],
+      cache: {
+        dir: `../../node_modules/.vitest`,
+      },
+    },
+    define: {
+      'import.meta.vitest': mode !== 'production',
+    },
+  };
+});

package.json

@@ -43,10 +43,12 @@
   ],
   "dependencies": {
     "@angular/animations": "^17.0.0",
+    "@angular/cdk": "^17.0.1",
     "@angular/common": "^17.0.0",
     "@angular/compiler": "^17.0.0",
     "@angular/core": "^17.0.0",
     "@angular/forms": "^17.0.0",
+    "@angular/material": "^17.0.1",
     "@angular/platform-browser": "^17.0.0",
     "@angular/platform-browser-dynamic": "^17.0.0",
     "@angular/platform-server": "^17.0.0",
@@ -102,9 +104,9 @@
     "@nx/vite": "17.0.1",
     "@nx/web": "17.0.1",
     "@schematics/angular": "^17.0.0",
-    "@swc-node/register": "^1.4.2",
+    "@swc-node/register": "~1.6.7",
     "@swc/cli": "0.1.62",
-    "@swc/core": "^1.2.173",
+    "@swc/core": "~1.3.85",
     "@swc/helpers": "0.5.1",
     "@types/babel__core": "^7.20.0",
     "@types/jest": "29.4.4",
@@ -129,6 +131,7 @@
     "fast-glob": "^3.2.12",
     "fs-extra": "^11.1.1",
     "h3": "^1.8.2",
+    "happy-dom": "^12.10.3",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "jsdom": "22.1.0",

packages/vite-plugin-angular/setup-vitest.ts

@@ -119,6 +119,7 @@ function isAngularFixture(val: any): boolean {
   const fixtureKeys = [
     'componentRef',
     'ngZone',
+    'effectRunner',
     '_autoDetect',
     '_isStable',
     '_isDestroyed',

packages/vite-plugin-angular/src/lib/angular-fixture-snapshot.spec.ts

@@ -5,7 +5,7 @@ import { describe } from 'vitest';
 /**
  * @vitest-environment jsdom
  */
-describe.skip('Angular Fixture Snapshot', () => {
+describe('Angular Fixture Snapshot', () => {
   @Component({
     selector: 'app-test',
     standalone: true,

packages/vite-plugin-angular/src/lib/angular-vite-plugin.ts

@@ -21,6 +21,7 @@ import {
   createJitResourceTransformer,
   SourceFileCache,
 } from './utils/devkit';
+import { angularVitestPlugin } from './angular-vitest-plugin';
 
 export interface PluginOptions {
   tsconfig?: string;
@@ -133,13 +134,16 @@ export function angular(options?: PluginOptions): Plugin[] {
             exclude: ['@angular/platform-server'],
             esbuildOptions: {
               plugins: [
-                createCompilerPlugin({
-                  tsconfig: pluginOptions.tsconfig,
-                  sourcemap: !isProd,
-                  advancedOptimizations: isProd,
-                  jit,
-                  incremental: watchMode,
-                }),
+                createCompilerPlugin(
+                  {
+                    tsconfig: pluginOptions.tsconfig,
+                    sourcemap: !isProd,
+                    advancedOptimizations: isProd,
+                    jit,
+                    incremental: watchMode,
+                  },
+                  isTest
+                ),
               ],
               define: {
                 ngJitMode: 'false',
@@ -362,6 +366,7 @@ export function angular(options?: PluginOptions): Plugin[] {
 
   return [
     angularPlugin(),
+    (isTest && angularVitestPlugin()) as Plugin,
     (jit &&
       jitPlugin({
         inlineStylesExtension: pluginOptions.inlineStylesExtension,

packages/vite-plugin-angular/src/lib/angular-vitest-plugin.ts

@@ -0,0 +1,34 @@
+import { Plugin, transformWithEsbuild } from 'vite';
+
+export function angularVitestPlugin(): Plugin {
+  return {
+    name: '@analogjs/vitest-angular-esm-plugin',
+    apply: 'serve',
+    enforce: 'post',
+    config() {
+      return {
+        ssr: {
+          noExternal: [/fesm2022/],
+        },
+      };
+    },
+    async transform(_code, id) {
+      if (/fesm2022/.test(id) && _code.includes('async (')) {
+        const { code, map } = await transformWithEsbuild(_code, id, {
+          loader: 'js',
+          format: 'esm',
+          target: 'es2016',
+          sourcemap: true,
+          sourcefile: id,
+        });
+
+        return {
+          code,
+          map,
+        };
+      }
+
+      return undefined;
+    },
+  };
+}