Migrate components to only used named exports, not default exports.

Default exports are a bit harder to maintain because they might have different names when imported into a file. For instance,

// chart.js could export by default a component named "Cart"
export default Chart;

// Then another file could import that chart, and rename it to "ComponentChart"
import ComponentChart from "./chart";

// However if chart.js used a named export, there would only be one name
export ComponentChart;

// It can only be imported on that name.
import { ComponentChart } from "./chart";

This makes it hard to refactor and search through the codebase when the names differ. Instead, named exports force the use of a single name for a given export.

The work here, is to go through each component folder, and make sure that it’s using a named export.

As for naming conventions, the components most likely are named correctly already, but if there is ambiguity, here is how components should be named. You take the name of the component directory, and then add on the sub-component name.

For instance, in src/components/marker-chart the file index.js would export a component named MarkerChart. The canvas.js file will export a component named MarkerChartCanvas. Often two component definitions will exist, one with the raw component, and the other with it “connected” to the redux store. In this case, the unconnected component will not be exported, and it will be named “MarkerChartCanvasImpl”, where “Impl” is short for implementation. Then, only the connected “MarkerChartCanvas” should be exported. This is the general practice, but PRs should minimize name changes unless it’s needed.

Here is an example that follows the “impl” pattern:

https://github.com/firefox-devtools/profiler/blob/ac2dd88f7ff6d9d88b6eaf272a1f8818d07d8ec2/src/components/timeline/TrackMemory.js#L88-L104

Please comment on this issue to claim a component, and I will add your name to it. Please only work on one at a time, and send in 1 PR for each code path. This will make it easy for multiple people to work on this as a “good first issue”.

Contributor	PR	Complete	Code path
@Segun-Ogundipe	#2854	yes	src/components/app
@miami78	#2853	yes	src/components/calltree
@lape15	#2859	yes	src/components/flame-graph
@inflame07	#2836	yes	src/components/js-tracer
@NisaSource	#2855	yes	src/components/marker-chart
@nibble0101	#2848, #2895, #2912	yes	src/components/marker-table
@maulik1729	#2829	yes	src/components/network-chart
@anap226	#2909 #2919 #2946 #2953	yes	src/components/shared
@hetpatel33	#2822	yes	src/components/sidebar
@rhetoricalraj	#2835	yes	src/components/stack-chart
@okwonks	#3023	yes	src/components/timeline
@hetpatel33	#2821	yes	src/components/tooltip

[julienw]

Hey folks! I’d suggest that each of you do only 1 or 2 components max, so that there are still some available for other people. Once you’re comfortable with the project, you can look at more complex issues.Thanks for your understanding!

[julienw]

I believe this is now complete, thanks a lot for your help!