Use concatenated code from sourcemap after mapping, instead of originals

btd · Dec 9, 2023 · f18cdf8 · f18cdf8
1 parent 5c19b2b
commit f18cdf8
Show file tree

Hide file tree

Showing 15 changed files with 319 additions and 70 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -45,6 +45,7 @@
     "@rollup/plugin-alias": "^5.0.0",
     "@rollup/plugin-commonjs": "^25.0.1",
     "@rollup/plugin-node-resolve": "^15.0.0",
+    "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.1",
     "@types/bytes": "^3.1.1",
     "@types/d3-array": "^3.0.3",

diff --git a/plugin/index.ts b/plugin/index.ts
@@ -4,7 +4,6 @@ import path from "path";
 import { OutputBundle, Plugin, NormalizedOutputOptions, OutputOptions } from "rollup";
 import opn from "open";
 
-
 import { ModuleLengths, ModuleTree, ModuleTreeLeaf, VisualizerData } from "../shared/types";
 import { version } from "./version";
 
@@ -26,8 +25,6 @@ const WARN_JSON_DEPRECATED = 'Option `json` deprecated, please use template: "ra
 
 const ERR_FILENAME_EMIT = "When using emitFile option, filename must not be path but a filename";
 
-
-
 export interface PluginVisualizerOptions {
   /**
    * The path to the template file to use. Or just a name of a file.
@@ -130,14 +127,14 @@ const chooseDefaultFileName = (opts: PluginVisualizerOptions) => {
 };
 
 export const visualizer = (
-  opts: PluginVisualizerOptions | ((outputOptions: OutputOptions) => PluginVisualizerOptions) = {}
+  opts: PluginVisualizerOptions | ((outputOptions: OutputOptions) => PluginVisualizerOptions) = {},
 ): Plugin => {
   return {
     name: "visualizer",
 
     async generateBundle(
       outputOptions: NormalizedOutputOptions,
-      outputBundle: OutputBundle
+      outputBundle: OutputBundle,
     ): Promise<void> {
       opts = typeof opts === "function" ? opts(outputOptions) : opts;
 
@@ -165,22 +162,29 @@ export const visualizer = (
         ? createBrotliSizeGetter(typeof opts.brotliSize === "object" ? opts.brotliSize : {})
         : defaultSizeGetter;
 
-      const ModuleLengths = async ({
-        id,
-        renderedLength,
-        code,
-      }: {
-        id: string;
-        renderedLength: number;
-        code: string | null;
-      }): Promise<ModuleLengths & { id: string }> => {
+      const getModuleLengths = async (
+        {
+          id,
+          renderedLength,
+          code,
+        }: {
+          id: string;
+          renderedLength: number;
+          code: string | null;
+        },
+        useRenderedLength: boolean = false,
+      ): Promise<ModuleLengths & { id: string }> => {
         const isCodeEmpty = code == null || code == "";
 
         const result = {
           id,
           gzipLength: isCodeEmpty ? 0 : await gzipSizeGetter(code),
           brotliLength: isCodeEmpty ? 0 : await brotliSizeGetter(code),
-          renderedLength: isCodeEmpty ? renderedLength : Buffer.byteLength(code, "utf-8"),
+          renderedLength: useRenderedLength
+            ? renderedLength
+            : isCodeEmpty
+              ? 0
+              : Buffer.byteLength(code, "utf-8"),
         };
         return result;
       };
@@ -208,35 +212,40 @@ export const visualizer = (
             bundle,
             outputOptions.dir ??
               (outputOptions.file && path.dirname(outputOptions.file)) ??
-              process.cwd()
+              process.cwd(),
           );
 
           const moduleRenderInfo = await Promise.all(
             Object.values(modules)
               .filter(({ id }) => filter(bundleId, id))
-              .map(({ id, renderedLength }) => {
-                const code = bundle.modules[id]?.code;
-                return ModuleLengths({ id, renderedLength, code });
-              })
+              .map(({ id, renderedLength, code }) => {
+                return getModuleLengths({ id, renderedLength, code: code.join("") }, true);
+              }),
           );
 
           tree = buildTree(bundleId, moduleRenderInfo, mapper);
         } else {
           const modules = await Promise.all(
             Object.entries(bundle.modules)
               .filter(([id]) => filter(bundleId, id))
-              .map(([id, { renderedLength, code }]) => ModuleLengths({ id, renderedLength, code }))
+              .map(
+                ([id, { renderedLength, code }]) => getModuleLengths({ id, renderedLength, code }),
+                false,
+              ),
           );
 
           tree = buildTree(bundleId, modules, mapper);
         }
 
         if (tree.children.length === 0) {
-          const bundleSizes = await ModuleLengths({
-            id: bundleId,
-            renderedLength: bundle.code.length,
-            code: bundle.code,
-          });
+          const bundleSizes = await getModuleLengths(
+            {
+              id: bundleId,
+              renderedLength: bundle.code.length,
+              code: bundle.code,
+            },
+            false,
+          );
 
           const facadeModuleId = bundle.facadeModuleId ?? `${bundleId}-unknown`;
           const bundleUid = mapper.setNodePart(bundleId, facadeModuleId, bundleSizes);

diff --git a/plugin/module-mapper.ts b/plugin/module-mapper.ts
@@ -23,8 +23,8 @@ export class ModuleMapper {
   constructor(private projectRoot: string | RegExp) {}
 
   trimProjectRootId(moduleId: string): string {
-    if(typeof this.projectRoot === 'string' && moduleId.startsWith(this.projectRoot)) {
-      return moduleId.slice(this.projectRoot.length)
+    if (typeof this.projectRoot === "string" && moduleId.startsWith(this.projectRoot)) {
+      return moduleId.slice(this.projectRoot.length);
     }
     return moduleId.replace(this.projectRoot, "");
   }
@@ -69,8 +69,8 @@ export class ModuleMapper {
     if (uid in this.nodeParts) {
       throw new Error(
         `Override module: bundle id ${bundleId}, module id ${moduleId}, value ${JSON.stringify(
-          value
-        )}, existing value: ${JSON.stringify(this.nodeParts[uid])}`
+          value,
+        )}, existing value: ${JSON.stringify(this.nodeParts[uid])}`,
       );
     }
     this.nodeParts[uid] = { ...value, metaUid: this.getModuleUid(moduleId) };

diff --git a/plugin/sourcemap.ts b/plugin/sourcemap.ts
@@ -6,13 +6,14 @@ import { SourceMapConsumer } from "source-map";
 interface SourceMapModuleRenderInfo {
   id: string;
   renderedLength: number;
+  code: string[];
 }
 
 const getBytesPerFileUsingSourceMap = (
   bundleId: string,
   code: string,
   map: SourceMapConsumer,
-  dir: string
+  dir: string,
 ) => {
   const modules: Record<string, SourceMapModuleRenderInfo> = {};
 
@@ -27,8 +28,11 @@ const getBytesPerFileUsingSourceMap = (
     if (source != null) {
       const id = path.resolve(path.dirname(path.join(dir, bundleId)), source);
 
-      modules[id] = modules[id] || { id, renderedLength: 0 };
-      modules[id].renderedLength += Buffer.byteLength(codeChars[i]);
+      const char = codeChars[i];
+
+      modules[id] = modules[id] || { id, renderedLength: 0, code: [] };
+      modules[id].renderedLength += Buffer.byteLength(char);
+      modules[id].code.push(char);
     }
 
     if (code[i] === "\n") {
@@ -43,7 +47,7 @@ const getBytesPerFileUsingSourceMap = (
 export const getSourcemapModules = (
   id: string,
   outputChunk: OutputChunk,
-  dir: string
+  dir: string,
 ): Promise<Record<string, SourceMapModuleRenderInfo>> => {
   if (outputChunk.map == null) {
     return Promise.resolve({});