fix: delay remove of intermediate debugging assets to afterEmit

.changeset/chubby-rocks-hope.md

@@ -0,0 +1,6 @@
+---
+"@lynx-js/template-webpack-plugin": patch
+"@lynx-js/web-webpack-plugin": patch
+---
+
+Delay remove of intermediate debugging assets to afterEmit, this will fix the sourcemap not being generated issue.

packages/webpack/template-webpack-plugin/src/LynxEncodePlugin.ts

@@ -2,7 +2,10 @@
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 
-import type { Compilation, Compiler } from 'webpack';
+import fs from 'node:fs';
+import path from 'node:path';
+
+import type { Compiler } from 'webpack';
 
 import { LynxTemplatePlugin } from './LynxTemplatePlugin.js';
 
@@ -121,6 +124,7 @@ export class LynxEncodePlugin {
 
 export class LynxEncodePluginImpl {
   name = 'LynxEncodePlugin';
+  private assets2Delete = new Set<string>();
 
   constructor(
     compiler: Compiler,
@@ -145,7 +149,7 @@ export class LynxEncodePluginImpl {
 
         if (!isDebug() && !isDev && !isRsdoctor()) {
           templateHooks.beforeEmit.tap(this.name, (args) => {
-            this.deleteDebuggingAssets(compilation, [
+            this.deleteDebuggingAssets([
               encodeData.lepusCode.root,
               ...encodeData.lepusCode.chunks,
               ...Object.keys(manifest).map(name => ({ name })),
@@ -192,6 +196,32 @@ export class LynxEncodePluginImpl {
 
         return args;
       });
+      compiler.hooks.afterEmit.tap(this.name, (compilation) => {
+        this.assets2Delete.forEach((asset) => {
+          compilation.deleteAsset(asset);
+          if (compilation.outputOptions.path) {
+            const files2Delete = [
+              asset,
+            ];
+            if (asset.endsWith('.js')) {
+              files2Delete.push(asset + '.map');
+            }
+            for (const file of files2Delete) {
+              fs.rmSync(
+                path.posix.join(
+                  compilation.outputOptions.path,
+                  file,
+                ),
+                {
+                  recursive: true,
+                  force: true,
+                },
+              );
+            }
+          }
+        });
+        this.assets2Delete.clear();
+      });
 
       templateHooks.encode.tapPromise({
         name: this.name,
@@ -216,14 +246,15 @@ export class LynxEncodePluginImpl {
    * The deleteDebuggingAssets delete all the assets that are inlined into the template.
    */
   deleteDebuggingAssets(
-    compilation: Compilation,
     assets: ({ name: string } | undefined)[],
   ): void {
+    this.assets2Delete = new Set();
+    const { assets2Delete } = this;
     assets
       .filter(asset => asset !== undefined)
       .forEach(asset => deleteAsset(asset));
     function deleteAsset({ name }: { name: string }) {
-      return compilation.deleteAsset(name);
+      return assets2Delete.add(name);
     }
   }
 

packages/webpack/web-webpack-plugin/etc/web-webpack-plugin.api.md

@@ -4,7 +4,6 @@
 
 ```ts
 
-import type { Compilation } from 'webpack';
 import type { Compiler } from 'webpack';
 
 // Warning: (ae-missing-release-tag) "isDebug" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -25,7 +24,7 @@ export class WebWebpackPlugin {
     apply(compiler: Compiler): void;
     // (undocumented)
     static BEFORE_ENCODE_HOOK_STAGE: number;
-    deleteDebuggingAssets(compilation: Compilation, assets: ({
+    deleteDebuggingAssets(assets: ({
         name: string;
     } | undefined)[]): void;
     // (undocumented)

packages/webpack/web-webpack-plugin/src/index.ts

@@ -1,8 +1,10 @@
 // Copyright 2024 The Lynx Authors. All rights reserved.
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
+import fs from 'node:fs';
+import path from 'node:path';
 
-import type { Compilation, Compiler } from 'webpack';
+import type { Compiler } from 'webpack';
 
 import { LynxTemplatePlugin } from '@lynx-js/template-webpack-plugin';
 
@@ -12,6 +14,7 @@ export class WebWebpackPlugin {
   static name = 'lynx-for-web-plugin';
   static BEFORE_ENCODE_HOOK_STAGE = 100;
   static ENCODE_HOOK_STAGE = 100;
+  private assets2Delete = new Set<string>();
 
   apply(compiler: Compiler): void {
     const isDev = process.env['NODE_ENV'] === 'development'
@@ -35,7 +38,7 @@ export class WebWebpackPlugin {
 
           if (!isDebug() && !isDev && !isRsdoctor()) {
             hooks.beforeEmit.tap({ name: WebWebpackPlugin.name }, (args) => {
-              this.deleteDebuggingAssets(compilation, [
+              this.deleteDebuggingAssets([
                 { name },
                 encodeData.lepusCode.root,
                 ...encodeData.lepusCode.chunks,
@@ -57,6 +60,32 @@ export class WebWebpackPlugin {
           });
           return encodeOptions;
         });
+        compiler.hooks.afterEmit.tap(WebWebpackPlugin.name, (compilation) => {
+          this.assets2Delete.forEach((asset) => {
+            compilation.deleteAsset(asset);
+            if (compilation.outputOptions.path) {
+              const files2Delete = [
+                asset,
+              ];
+              if (asset.endsWith('.js')) {
+                files2Delete.push(asset + '.map');
+              }
+              for (const file of files2Delete) {
+                fs.rmSync(
+                  path.posix.join(
+                    compilation.outputOptions.path,
+                    file,
+                  ),
+                  {
+                    recursive: true,
+                    force: true,
+                  },
+                );
+              }
+            }
+          });
+          this.assets2Delete.clear();
+        });
 
         hooks.encode.tap({
           name: WebWebpackPlugin.name,
@@ -82,14 +111,15 @@ export class WebWebpackPlugin {
    * The deleteDebuggingAssets delete all the assets that are inlined into the template.
    */
   deleteDebuggingAssets(
-    compilation: Compilation,
     assets: ({ name: string } | undefined)[],
   ): void {
+    this.assets2Delete = new Set();
+    const { assets2Delete } = this;
     assets
       .filter(asset => asset !== undefined)
       .forEach(asset => deleteAsset(asset));
     function deleteAsset({ name }: { name: string }) {
-      return compilation.deleteAsset(name);
+      return assets2Delete.add(name);
     }
   }
 }