jlfwong · jlfwong · Jan 16, 2025 · Jan 11, 2025 · Jan 11, 2025 · Jan 12, 2025
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,5 @@
 node_modules
-.cache
+.parcel-cache
 dist
 .idea
 coverage

diff --git a/assets/index.html b/assets/index.html
@@ -166,7 +166,7 @@
 </head>
 
 <body>
-  <script src="../src/speedscope.tsx"></script>
+  <script type="module" src="../src/speedscope.tsx"></script>
 </body>
 
-</html>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -45,9 +45,10 @@
     "jsverify": "0.8.3",
     "jszip": "3.1.5",
     "pako": "1.0.6",
-    "parcel-bundler": "1.12.4",
+    "parcel": "2.13.3",
     "preact": "10.4.1",
     "prettier": "3.1.1",
+    "process": "^0.11.10",
     "protobufjs": "6.8.8",
     "source-map": "0.6.1",
     "ts-jest": "24.3.0",

diff --git a/src/gl/graphics.ts b/src/gl/graphics.ts
@@ -25,6 +25,8 @@
 
 // NOTE: This file intentionally has no dependencies.
 
+declare const process: any
+
 // Dependencies & polyfills for import from skew
 const RELEASE =
   typeof process !== 'undefined' && process.env && process.env.NODE_ENV === 'production'

diff --git a/src/lib/demangle-cpp.test.ts b/src/lib/demangle-cpp.test.ts
diff --git a/src/lib/demangle-cpp.ts b/src/lib/demangle-cpp.ts
diff --git a/src/lib/demangle/.gitignore b/src/lib/demangle/.gitignore
@@ -0,0 +1 @@
+gcc
diff --git a/src/lib/demangle/Makefile b/src/lib/demangle/Makefile
@@ -0,0 +1,35 @@
+EMCC = emcc
+CFLAGS = -Os -Igcc/include -DHAVE_STDLIB_H -DHAVE_STRING_H
+LDFLAGS_COMMON = \
+    -s EXPORTED_RUNTIME_METHODS=stringToUTF8OnStack,UTF8ToString \
+    -s EXPORTED_FUNCTIONS=_demangle,_free \
+    -s MODULARIZE=1 \
+    -s WASM=1 \
+    -s FILESYSTEM=0
+
+# To use inside speedscope, we have to disable EXPORT_ES6 as otherwise
+# jest complain because it doesn't support es6 module export. It doesn't happen
+# with .ts because they are compiled to compatible js.
+ifeq ($(TEST),1)
+    LDFLAGS = $(LDFLAGS_COMMON) -s EXPORT_ES6=1
+else
+    LDFLAGS = $(LDFLAGS_COMMON) -s SINGLE_FILE=1 -s ENVIRONMENT=web
+endif
+
+SRC_FILES = \
+    gcc/libiberty/safe-ctype.c \
+    gcc/libiberty/rust-demangle.c \
+    gcc/libiberty/cp-demangle.c \
+    demangle.c
+POST_JS = demangle.post.js
+OUTPUT = demangle.wasm.js
+
+all: $(OUTPUT)
+
+$(OUTPUT): $(SRC_FILES) $(POST_JS)
+	$(EMCC) $(CFLAGS) $(SRC_FILES) $(LDFLAGS) --post-js $(POST_JS) --no-entry -o $(OUTPUT)
+
+clean:
+	rm -f $(OUTPUT)
+
+.PHONY: all clean
diff --git a/src/lib/demangle/README.md b/src/lib/demangle/README.md
@@ -0,0 +1,28 @@
+# demangle
+
+A wrapper function on top of demangling functions from the `GNU libiberty`,
+using emscripten.
+
+# Build dependencies
+
+Follow the official `emsdk` installation instructions:
+
+https://emscripten.org/docs/getting_started/downloads.html#installation-instructions-using-the-emsdk-recommended
+
+And make sure you have `emcc` in your PATH.
+
+# Source dependencies
+
+## GCC
+
+Make sure to fetch `gcc` sources.
+
+* `git clone https://github.com/gcc-mirror/gcc`
+* `git reset --hard 40754a3b9bef83bf4da0675fcb378e8cd1675602`
+
+# Build instructions
+
+`make` to produce a single CommonJS module that contains also contain the base64 encoded wasm file.
+`make TEST=1` to produce both a ES6 module AND the wasm file.
+
+Using `make TEST=1` produce a file that can be used by `node` for testing purposes.
diff --git a/src/lib/demangle/demangle.c b/src/lib/demangle/demangle.c
@@ -0,0 +1,38 @@
+#include "gcc/include/demangle.h"
+
+#include <string.h>
+
+static char *non_microsoft_demangle(const char *mangled) {
+  int is_itanium_symbol = strncmp(mangled, "_Z", 2) == 0;
+  if (is_itanium_symbol) {
+    // Note: __cxa_demangle default is DMGL_PARAMS | DMGL_TYPES
+    return cplus_demangle_v3(mangled, DMGL_PARAMS | DMGL_TYPES);
+  }
+
+  int is_rust_symbol = strncmp(mangled, "_R", 2) == 0;
+  if (is_rust_symbol) {
+    // Note: rust_demangle uses only DMGL_VERBOSE and DMGL_NO_RECURSE_LIMIT,
+    // so no need to pass any options in our case.
+    return rust_demangle(mangled, DMGL_NO_OPTS);
+  }
+
+  return NULL;
+}
+
+// Logic is inspired by llvm::demangle.
+// It is the caller's responsibility to free the string which is returned.
+char *demangle(const char *mangled) {
+  char *demangled = non_microsoft_demangle(mangled);
+  if (demangled) {
+    return demangled;
+  }
+
+  if (mangled[0] == '_') {
+    demangled = non_microsoft_demangle(&mangled[1]);
+    if (demangled) {
+      return demangled;
+    }
+  }
+
+  return NULL;
+}
diff --git a/src/lib/demangle/demangle.post.js b/src/lib/demangle/demangle.post.js
@@ -0,0 +1,22 @@
+/**
+ * DO NOT USE THIS FILE DIRECTLY.
+ *
+ * This file is only used as --post-js of emcc.
+ *
+ * This file provides a higher level demangle function ready to use
+ * in JavaScript.
+ */
+Module['wasm_demangle'] = function(mangled) {
+    /*
+     * We are manually calling the lower-level generated functions
+     * instead of using `cwrap` because we need to `free` the pointer
+     * returned by `_demangle`.
+     */
+    const param_ptr = stringToUTF8OnStack(mangled);
+    const result_ptr = _demangle(param_ptr);
+    const result = UTF8ToString(result_ptr);
+    if (result_ptr !== null && result_ptr !== undefined) {
+        _free(result_ptr);
+    }
+    return result;
+}
diff --git a/src/lib/demangle/demangle.test.ts b/src/lib/demangle/demangle.test.ts
@@ -0,0 +1,25 @@
+import {loadDemangling} from './demangle'
+
+test('demangle', async () => {
+  const demangle = await loadDemangling()
+
+  expect(demangle('a')).toBe('a')
+  expect(demangle('someUnobfuscatedFunction')).toBe('someUnobfuscatedFunction')
+
+  // C++ mangling
+  expect(demangle('__ZNK7Support6ColorFeqERKS0_')).toBe(
+    'Support::ColorF::operator==(Support::ColorF const&) const',
+  )
+  // Running a second time to test the cache
+  expect(demangle('__ZNK7Support6ColorFeqERKS0_')).toBe(
+    'Support::ColorF::operator==(Support::ColorF const&) const',
+  )
+
+  // Rust v0 mangling
+  expect(demangle('_RNvCskwGfYPst2Cb_3foo16example_function')).toBe('foo::example_function')
+
+  // Rust legacy mangling
+  expect(demangle('_ZN3std2fs8Metadata7created17h8df207f105c5d474E')).toBe(
+    'std::fs::Metadata::created::h8df207f105c5d474',
+  )
+})
diff --git a/src/lib/demangle/demangle.ts b/src/lib/demangle/demangle.ts
@@ -0,0 +1,25 @@
+import createWasmDemangleModule from './demangle.wasm'
+
+const cache = new Map<string, string>()
+
+export async function loadDemangling(): Promise<(name: string) => string> {
+  // This function converts a mangled C++ name such as "__ZNK7Support6ColorFeqERKS0_"
+  // into a human-readable symbol (in this case "Support::ColorF::==(Support::ColorF&)")
+  const wasmDemangleModule = await createWasmDemangleModule()
+  return cached(wasmDemangleModule.wasm_demangle)
+}
+
+function cached(demangle: (name: string) => string): (name: string) => string {
+  return (name: string): string => {
+    let result = cache.get(name)
+    if (result !== undefined) {
+      name = result
+    } else {
+      result = demangle(name)
+      result = result === '' ? name : result
+      cache.set(name, result)
+      name = result
+    }
+    return name
+  }
+}
diff --git a/src/lib/demangle/demangle.wasm.d.ts b/src/lib/demangle/demangle.wasm.d.ts
@@ -0,0 +1,5 @@
+interface WasmDemangleModule {
+  wasm_demangle(mangled: string): string
+}
+
+export default function ModuleFactory(options?: unknown): Promise<WasmDemangleModule>
diff --git a/src/lib/demangle/demangle.wasm.js b/src/lib/demangle/demangle.wasm.js
diff --git a/src/lib/demangle/index.ts b/src/lib/demangle/index.ts
@@ -0,0 +1 @@
+export {loadDemangling} from './demangle'
diff --git a/src/lib/profile.ts b/src/lib/profile.ts
@@ -1,7 +1,6 @@
 import {lastOf, KeyedSet} from './utils'
 import {ValueFormatter, RawValueFormatter} from './value-formatters'
 import {FileFormat} from './file-format-spec'
-const demangleCppModule = import('./demangle-cpp')
 
 export interface FrameInfo {
   key: string | number
@@ -404,16 +403,20 @@ export class Profile {
 
   // Demangle symbols for readability
   async demangle() {
-    let demangleCpp: ((name: string) => string) | null = null
+    let demangle: ((name: string) => string) | null = null
 
     for (let frame of this.frames) {
-      // This function converts a mangled C++ name such as "__ZNK7Support6ColorFeqERKS0_"
-      // into a human-readable symbol (in this case "Support::ColorF::==(Support::ColorF&)")
-      if (frame.name.startsWith('__Z')) {
-        if (!demangleCpp) {
-          demangleCpp = (await demangleCppModule).demangleCpp
+      // This function converts a mangled C++ and Rust name into a human-readable symbol.
+      if (
+        frame.name.startsWith('__Z') ||
+        frame.name.startsWith('_R') ||
+        frame.name.startsWith('_Z')
+      ) {
+        if (!demangle) {
+          const demangleModule = await import('./demangle')
+          demangle = await demangleModule.loadDemangling()
         }
-        frame.name = demangleCpp(frame.name)
+        frame.name = demangle(frame.name)
       }
     }
   }

diff --git a/src/views/application.tsx b/src/views/application.tsx
@@ -25,7 +25,7 @@ const importModule = import('../import')
 // We put them all in one place so we can directly control the relative priority
 // of these.
 importModule.then(() => {})
-import('../lib/demangle-cpp').then(() => {})
+import('../lib/demangle').then(() => {})
 import('source-map').then(() => {})
 
 async function importProfilesFromText(
@@ -56,8 +56,10 @@ async function importFromFileSystemDirectoryEntry(entry: FileSystemDirectoryEntr
   return (await importModule).importFromFileSystemDirectoryEntry(entry)
 }
 
-declare function require(x: string): any
-const exampleProfileURL = require('../../sample/profiles/stackcollapse/perf-vertx-stacks-01-collapsed-all.txt')
+const exampleProfileURL = new URL(
+  '../../sample/profiles/stackcollapse/perf-vertx-stacks-01-collapsed-all.txt',
+  import.meta.url,
+)
 
 function isFileSystemDirectoryEntry(entry: FileSystemEntry): entry is FileSystemDirectoryEntry {
   return entry != null && entry.isDirectory
-Original file line number
+Diff line change
@@ Expand Up / @@ -166,7 +166,7 @@ @@
     </head>
     <body>
-      <script src="../src/speedscope.tsx"></script>
+      <script type="module" src="../src/speedscope.tsx"></script>
     </body>
-    </html>
+    </html>