fix: esbuild plugin break after stylable error (#2938) 5.x

packages/esbuild/src/stylable-esbuild-plugin.ts

@@ -188,13 +188,24 @@ export const stylablePlugin = (initialPluginOptions: ESBuildOptions = {}): Plugi
         build.onLoad(
             { filter: /.*/, namespace: namespaces.jsModule },
             wrapDebug('onLoad stylable module', (args) => {
+                let res: StylableResults;
                 const cacheResults = checkCache(args.path);
                 if (cacheResults) {
                     return cacheResults;
                 }
                 onLoadCalled = true;
-
-                const res = stylable.transform(args.path);
+                try {
+                    res = stylable.transform(args.path);
+                } catch (e) {
+                    return {
+                        errors: [
+                            {
+                                text: String(e),
+                            },
+                        ],
+                        watchFiles: [args.path],
+                    };
+                }
                 const { errors, warnings } = esbuildEmitDiagnostics(res, diagnosticsMode);
                 const { imports, collector } = importsCollector(res);
                 const { cssDepth = 0, deepDependencies } = res.meta.transformCssDepth!;
@@ -316,7 +327,7 @@ export const stylablePlugin = (initialPluginOptions: ESBuildOptions = {}): Plugi
          * process the generated bundle and optimize the css output
          */
         build.onEnd(
-            wrapDebug(`onEnd generate cssInjection: ${cssInjection}`, ({ metafile }) => {
+            wrapDebug(`onEnd generate cssInjection: ${cssInjection}`, ({ metafile, errors }) => {
                 transferBuildInfo();
                 if (!onLoadCalled) {
                     lazyDebugPrint();
@@ -326,6 +337,9 @@ export const stylablePlugin = (initialPluginOptions: ESBuildOptions = {}): Plugi
                 let mapping: OptimizationMapping;
                 if (devTypes.enabled) {
                     if (!metafile) {
+                        if (errors.length) {
+                            return;
+                        }
                         throw new Error('metafile is required for css injection');
                     }
                     const absSrcDir = join(projectRoot, devTypes.srcDir);
@@ -355,6 +369,9 @@ export const stylablePlugin = (initialPluginOptions: ESBuildOptions = {}): Plugi
 
                 if (cssInjection === 'css') {
                     if (!metafile) {
+                        if (errors.length) {
+                            return;
+                        }
                         throw new Error('metafile is required for css injection');
                     }
                     mapping ??= buildUsageMapping(metafile, stylable);

packages/esbuild/test/e2e/esbuild-testkit.ts

@@ -1,9 +1,8 @@
 import { dirname, join } from 'node:path';
 import { readFileSync, symlinkSync, writeFileSync } from 'node:fs';
-import { nodeFs } from '@file-services/node';
-import { BuildContext, BuildOptions, context } from 'esbuild';
+import { BuildContext, BuildOptions, context, Plugin } from 'esbuild';
 import { createTempDirectorySync, runServer } from '@stylable/e2e-test-kit';
-
+import { nodeFs } from '@file-services/node';
 import playwright from 'playwright-core';
 
 type BuildFn = (
@@ -21,11 +20,13 @@ export class ESBuildTestKit {
         buildExport,
         tmp = true,
         overrideOptions = {},
+        extraPlugins = [],
     }: {
         project: string;
         buildExport?: string;
         tmp?: boolean;
         overrideOptions?: BuildOptions;
+        extraPlugins?: Array<Plugin>;
     }) {
         let openServerUrl: string | undefined;
         let buildFile = require.resolve(`@stylable/esbuild/test/e2e/${project}/build.js`);
@@ -51,10 +52,41 @@ export class ESBuildTestKit {
         if (!run) {
             throw new Error(`could not find ${buildExport || 'run'} export in ${buildFile}`);
         }
+        const onEnd = new Set<() => void>();
+        function act<T>(fn: () => T, timeout = 3000) {
+            return new Promise<T>((resolve, reject) => {
+                let results = undefined as T | Promise<T>;
+                const tm = setTimeout(reject, timeout);
+                const handler = () => {
+                    clearTimeout(tm);
+                    onEnd.delete(handler);
+                    if (results instanceof Promise) {
+                        results.then(resolve, reject);
+                    } else {
+                        resolve(results);
+                    }
+                };
+                onEnd.add(handler);
+                results = fn();
+            });
+        }
 
         const buildContext = await run(context, (options: BuildOptions) => ({
             ...options,
-            plugins: [...(options.plugins ?? [])],
+            plugins: [
+                ...(options.plugins ?? []),
+                ...extraPlugins,
+                {
+                    name: 'build-end',
+                    setup(build) {
+                        build.onEnd(() => {
+                            for (const fn of onEnd) {
+                                fn();
+                            }
+                        });
+                    },
+                },
+            ],
             absWorkingDir: projectDir,
             loader: {
                 '.png': 'file',
@@ -124,6 +156,7 @@ export class ESBuildTestKit {
             context: buildContext,
             serve,
             open,
+            act,
             write(pathInCwd: string, content: string) {
                 writeFileSync(join(projectDir, pathInCwd), content, 'utf8');
             },

packages/esbuild/test/e2e/rebuild/rebuild.spec.ts

@@ -7,17 +7,37 @@ describe('Stylable ESBuild plugin rebuild on change', () => {
 
     afterEach(() => tk.dispose());
 
-    it('should pick up rebuild', async () => {
-        const { context, read, write } = await tk.build({
+    it('should pick up rebuild', async function () {
+        const { context, read, write, act } = await tk.build({
             project: 'rebuild',
             tmp: true,
         });
         const css1 = read('dist/index.js');
         expect(css1, 'initial color').to.includes('color: red');
         await context.watch();
         await sleep(2222);
-        write('a.st.css', `.root{color: green}`);
+        await act(() => {
+            write('a.st.css', `.root{color: green}`);
+        });
+        const css2 = read('dist/index.js');
+        expect(css2, 'color after change').to.includes('color: green');
+    });
+
+    it('should stay alive after error', async function () {
+        const { context, read, write, act } = await tk.build({
+            project: 'rebuild',
+            tmp: true,
+        });
+        const css1 = read('dist/index.js');
+        expect(css1, 'initial color').to.includes('color: red');
+        await context.watch();
         await sleep(2222);
+        await act(() => {
+            write('a.st.css', `.root{}}}}}`);
+        });
+        await act(() => {
+            write('a.st.css', `.root{color: green}`);
+        });
         const css2 = read('dist/index.js');
         expect(css2, 'color after change').to.includes('color: green');
     });