feat(compiler): experimentalErrorRecoveryMode for template transformation (#5582)

Author: rax-it

packages/@lwc/compiler/src/transformers/__tests__/transform-html.spec.ts

@@ -9,14 +9,14 @@ import { APIVersion, noop } from '@lwc/shared';
 import { transformSync } from '../transformer';
 import type { TransformOptions } from '../../options';
 
-const TRANSFORMATION_OPTIONS = {
+const BASE_TRANSFORM_OPTIONS = {
     namespace: 'x',
     name: 'foo',
 } satisfies TransformOptions;
 
 describe('transformSync', () => {
     it('should throw when processing an invalid HTML file', () => {
-        expect(() => transformSync(`<html`, 'foo.html', TRANSFORMATION_OPTIONS)).toThrow(
+        expect(() => transformSync(`<html`, 'foo.html', BASE_TRANSFORM_OPTIONS)).toThrow(
             'Invalid HTML syntax: eof-in-tag.'
         );
     });
@@ -27,7 +27,7 @@ describe('transformSync', () => {
                 <div>Hello</div>
             </template>
         `;
-        const { code } = transformSync(template, 'foo.html', TRANSFORMATION_OPTIONS);
+        const { code } = transformSync(template, 'foo.html', BASE_TRANSFORM_OPTIONS);
 
         expect(code).toContain(`tmpl.stylesheets = [];`);
     });
@@ -75,7 +75,7 @@ describe('transformSync', () => {
         it.for(configs)('$name', ({ config, expected }) => {
             const template = `<template><img src="http://example.com/img.png" crossorigin="anonymous"></template>`;
             const { code, warnings } = transformSync(template, 'foo.html', {
-                ...TRANSFORMATION_OPTIONS,
+                ...BASE_TRANSFORM_OPTIONS,
                 ...config,
             });
             expect(warnings!.length).toBe(0);
@@ -106,7 +106,7 @@ describe('transformSync', () => {
                     },
                 ],
             },
-            ...TRANSFORMATION_OPTIONS,
+            ...BASE_TRANSFORM_OPTIONS,
         });
         expect(warnings).toHaveLength(0);
         expect(code).toMatch('renderer: renderer');
@@ -120,7 +120,7 @@ describe('transformSync', () => {
                 </svg>
             </template>
         `;
-        const { code, warnings } = transformSync(template, 'foo.html', TRANSFORMATION_OPTIONS);
+        const { code, warnings } = transformSync(template, 'foo.html', BASE_TRANSFORM_OPTIONS);
         expect(warnings).toHaveLength(0);
         expect(code).not.toMatch('renderer: renderer');
     });
@@ -131,7 +131,7 @@ describe('transformSync', () => {
                 <div>Hello</div>
             </template>
         `;
-        const { cssScopeTokens } = transformSync(template, 'foo.html', TRANSFORMATION_OPTIONS);
+        const { cssScopeTokens } = transformSync(template, 'foo.html', BASE_TRANSFORM_OPTIONS);
 
         expect(cssScopeTokens!.sort()).toEqual([
             'lwc-1hl7358i549',
@@ -150,7 +150,7 @@ describe('transformSync', () => {
             `;
             const { code, warnings } = transformSync(template, 'foo.html', {
                 enableDynamicComponents: true,
-                ...TRANSFORMATION_OPTIONS,
+                ...BASE_TRANSFORM_OPTIONS,
             });
 
             expect(warnings).toHaveLength(0);
@@ -166,7 +166,7 @@ describe('transformSync', () => {
             expect(() =>
                 transformSync(template, 'foo.html', {
                     enableDynamicComponents: false,
-                    ...TRANSFORMATION_OPTIONS,
+                    ...BASE_TRANSFORM_OPTIONS,
                 })
             ).toThrow('LWC1188: Invalid dynamic components usage');
         });
@@ -179,7 +179,7 @@ describe('transformSync', () => {
             `;
             const { code, warnings } = transformSync(template, 'foo.html', {
                 experimentalDynamicDirective: true,
-                ...TRANSFORMATION_OPTIONS,
+                ...BASE_TRANSFORM_OPTIONS,
             });
 
             expect(warnings).toHaveLength(1);
@@ -198,7 +198,7 @@ describe('transformSync', () => {
             expect(() =>
                 transformSync(template, 'foo.html', {
                     experimentalDynamicDirective: false,
-                    ...TRANSFORMATION_OPTIONS,
+                    ...BASE_TRANSFORM_OPTIONS,
                 })
             ).toThrowErrorMatchingInlineSnapshot(
                 `[Error: LWC1128: Invalid lwc:dynamic usage. The LWC dynamic directive must be enabled in order to use this feature.]`
@@ -219,7 +219,7 @@ describe('transformSync', () => {
                     incrementCounter,
                 },
                 experimentalDynamicDirective: true,
-                ...TRANSFORMATION_OPTIONS,
+                ...BASE_TRANSFORM_OPTIONS,
             });
 
             const calls = incrementCounter.mock.calls;
@@ -228,4 +228,54 @@ describe('transformSync', () => {
             expect(calls[1][0]).toBe('lwc-dynamic-directive');
         });
     });
+
+    describe('experimentalErrorRecoveryMode', () => {
+        const transformOptions = {
+            ...BASE_TRANSFORM_OPTIONS,
+            experimentalErrorRecoveryMode: true,
+        };
+
+        it('should apply transformation for template file', () => {
+            const template = `
+                <template>
+                    <div>Hello</div>
+                </template>
+            `;
+
+            const { code, warnings } = transformSync(template, 'foo.html', transformOptions);
+
+            expect(code).toContain(`tmpl.stylesheets = [];`);
+            expect(warnings?.length).toBe(0);
+        });
+
+        it('should throw an AggregateError', () => {
+            const templateWithErrors = `
+                <template>
+                    <div lwc:invalid-directive="test"></div>
+                    <span lwc:another-invalid="test"></span>
+                    <p lwc:yet-another-invalid="test"></p>
+                </template>
+            `;
+            expect(() => {
+                transformSync(templateWithErrors, 'foo.html', transformOptions);
+            }).toThrowAggregateError([
+                'LWC1127: Invalid directive "lwc:invalid-directive" on element <div>.',
+                'LWC1127: Invalid directive "lwc:another-invalid" on element <span>.',
+                'LWC1127: Invalid directive "lwc:yet-another-invalid" on element <p>.',
+            ]);
+        });
+
+        it('should aggregate errors from custom element types', () => {
+            const templateWithErrors = `
+                <template>
+                    <custom-element lwc:invalid="test"></custom-element>
+                </template>
+            `;
+            expect(() => {
+                transformSync(templateWithErrors, 'foo.html', transformOptions);
+            }).toThrowAggregateError([
+                'LWC1127: Invalid directive "lwc:invalid" on element <custom-element>.',
+            ]);
+        });
+    });
 });

packages/@lwc/compiler/src/transformers/template.ts

@@ -9,6 +9,7 @@ import {
     normalizeToCompilerError,
     DiagnosticLevel,
     TransformerErrors,
+    CompilerAggregateError,
 } from '@lwc/errors';
 import { compile } from '@lwc/template-compiler';
 
@@ -46,6 +47,7 @@ export default function templateTransform(
         name,
         apiVersion,
         disableSyntheticShadowSupport,
+        experimentalErrorRecoveryMode,
     } = options;
     const experimentalDynamicDirective =
         deprecatedDynamicDirective ?? Boolean(experimentalDynamicComponent);
@@ -71,9 +73,16 @@ export default function templateTransform(
         throw normalizeToCompilerError(TransformerErrors.HTML_TRANSFORMER_ERROR, e, { filename });
     }
 
-    const fatalError = result.warnings.find((warning) => warning.level === DiagnosticLevel.Error);
-    if (fatalError) {
-        throw CompilerError.from(fatalError, { filename });
+    const errors = result.warnings.filter((warning) => warning.level === DiagnosticLevel.Error);
+
+    if (experimentalErrorRecoveryMode && errors.length > 0) {
+        throw new CompilerAggregateError(
+            errors.map((err) => CompilerError.from(err, { filename }))
+        );
+    }
+
+    if (errors[0]) {
+        throw CompilerError.from(errors[0], { filename });
     }
 
     // The "Error" diagnostic level makes no sense to include here, because it would already have been