List third party code usage

fabicastp commented 8 months ago

Context: The website tested on the slow side for Interaction to Next Paint, which is often affected by third-party code. We will review to either limit or remove the scope of scripts that aren’t necessary.

To do: List the marketing scripts we use on the website.

gitstart-app[bot] commented 8 months ago

Here is the GitStart Ticket for this issue: https://clients.gitstart.com/sourcegraph/3436/tickets/SGM-6777

gitstart-sourcegraph commented 8 months ago

Description

List all third party code usage in the codebase.

Refs

SG Issus GitStart Ticket

To be kept

@dotlottie/react-player: playing dot-Lottie animations on the enterprise page
@headlessui/react: designing the Dropdown component
@visx/* building visualization components
classnames: joining style rules together
d3-scale is a peer dependancy @visx/scale
d3-time-format for date formatting D3-* are built on top of d3 library which is kind of huge, it will be better to keep them the way they are
feed: generating feeds
framer-motion: animating a video, it was used on the carousel component
globby: a helper for globbing files. It's used to generate cache
gray-matter: parsing front-matter from the MD files
js-cookie: saving login initialization state for SSO
mdi-react: For icons. Since most of icons are imported from this library, the @heroicons/react can be removed and migrate completely to this one.
next-mdx-remote: loading MDX contents
prism-themes, prismjs: used for the syntax highlighting
rehype-autolink-headings, rehype-pretty-code, rehype-slug, and remark-gfm are peer dependencies of next-mdx-remote
sharp: It's recommended in production for Image Optimization with Next.js
shikiji is a peer dependency of rehype-pretty-code

Duplicated libraries

@heroicons/react: It can be removed and replaced with mdi-react since it's the one that's used the most

To be built internally

d3-format: trimming insignificant trailing zeros across the data displayed on graphs. There is a small usage for this, we may consider building it internal using different logic since if we use the same logic as the library we will have to use a lot of code for simple use.
react-popper: for creating Tooltip component. usePopper is the only item imported from the library. I believe we can copy the implementation from its repo and get rid of the library.
rxjs: Can be removed. We only import noop function which can be built internally

Unused 3rd Party Packages

@popperjs/core: Can be removed. It has been used to provide a data type in the src/components/Tooltip.tsx file which can be built internally
lottie-web: Can be removed. It's used in the src/components/LottiePlayer.tsx component which it's not used anywhere

gitstart-sourcegraph commented 8 months ago

Hi @fabicastp We have listed the dependences above.

iskyOS commented 7 months ago

@gitstart-sourcegraph , as a follow up to this task, can we please remove lottie-web based on your recommendation? We can consider it a new task.

lottie-web: Can be removed. It's used in the src/components/LottiePlayer.tsx component which it's not used anywhere

iskyOS commented 7 months ago

I think we can close this, @gitstart-sourcegraph ! I'll open a new task for the request in the comment above.

sourcegraph / about