jlfwong / jlfwong/speedscope

Allow speedscope to be used as a library instead of a standalone application

Open
#16 10 comments 14 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
6.8k
Forks
320
PR merge metrics
No merged PRs in 30d

Description

I'm making a chrome devtools extension to surface the results of server-side profiling, and I tried hacking speedscope in as a React component, but I ran into some issues. From my perspective, it would be great if I could install speedscope as a library and render it as a React component with the full text of the profile as a prop.

Here's a partial list of issues that would need to be addressed for this to happen:
* You need to actually build it as a library and publish it on npm. 😄My hacky approach was to just `npm link` the TypeScript into my node_modules and compile it with webpack, but that ran into various issues. If you want to avoid the React dependency (or peer dependency), you could ship a `@speedscope/core` and separate `@speedscope/react` package, or something like that.
* Speedscope uses Preact, which isn't drop-in compatible with React. Probably the best way to ship a React-friendly speedscope component is to just write a React wrapper that mounts a Preact render tree inside, rather than trying to make the whole thing a React render tree.
* I ran into CSP issues since [regl](https://github.com/regl-project/regl) uses eval. I was able to enable eval for my extension to work around it, but I'd prefer not to. This seems like it might be unreasonable to work around, but it would be a good thing to mention in docs.
* Formatting looked wrong because speedscope includes reset.css, which it turns out is necessary. The aphrodite styles just worked, though, which was nice.
* The profile rendered correctly and various interactions worked, but hover and pinch zoom didn't do anything, and drag-to-pan caused the main flamechart view to just disappear. This might just be due to React/Preact differences, not sure.

So at least for now, it looks like an iframe (or external window) is the nicest way to use speedscope, and from what I can see that works fine. But it would be cool if it could be more integrated into a larger tool.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.