hub / github.com/JimLiu/twitter-virtual-scroller

github.com/JimLiu/twitter-virtual-scroller @main

198 symbols 401 edges 31 files 5 documented · 3%

What it actually does AI analysis from the code graph — generated when you open this

loading…

README

Twitter VirtualScroller

This project is a demo of the VirtualScroller component on Twitter, which allows for efficient rendering of large data sets in web applications. For more information on the VirtualScroller component, please refer to the article "Twitter Lite and High Performance React Progressive Web Apps at Scale".

The VirtualScroller source code used in this project was obtained through reverse engineering the JavaScript code on twitter.com. With the help of ChatGPT, the obfuscated JavaScript code was deobfuscated and made readable. The result was manually debugged and optimized.

Disclaimer: This project is for learning purposes only, and the code should not be used for commercial purposes. Please do not use this code for any commercial or business-related purposes.

Demo

https://user-images.githubusercontent.com/648674/223175035-8b68594d-96c1-45b7-aa69-746e8016ec8a.mp4

Steps

Get the source code from Chrome dev tool.

Paste the code to ChatGPT to convert it to a readable React component.

Sometimes the code is too long ChatGPT cannot return the complete code, you can ask it to return only a certain function.

However, the code it returns is not directly runnable, and you still need to spend time debugging and optimizing the generated code yourself, but that's good enough.

Extension points exported contracts — how you extend this code

IViewport (Interface)

(no doc) [2 implementers]

src/virtual-scroller/Viewport.ts

User (Interface)

(no doc)

src/types.ts

UserTimelineProps (Interface)

(no doc)

src/app/UserTimeline.tsx

Tweet (Interface)

(no doc)

src/types.ts

AvatarProps (Interface)

(no doc)

src/app/timeline/Avatar.tsx

TimelineContextType (Interface)

(no doc)

src/app/timeline/TimelineContext.ts

TweetLoaderProps (Interface)

(no doc)

src/app/timeline/TweetLoader.tsx

Core symbols most depended-on inside this repo

getTop

called by 19

src/virtual-scroller/Rectangle.ts

getHeight

called by 14

src/virtual-scroller/VirtualScrollerRenderer.tsx

getBottom

called by 14

src/virtual-scroller/Rectangle.ts

getRenderedItemRectInViewport

called by 8

src/virtual-scroller/VirtualScrollerRenderer.tsx

update

called by 6

src/virtual-scroller/VirtualScrollerRenderer.tsx

measureRelativeViewportRect

called by 5

src/virtual-scroller/VirtualScrollerRenderer.tsx

getFinalRenderedItems

called by 5

src/virtual-scroller/VirtualScrollerRenderer.tsx

scrollBy

called by 5

src/virtual-scroller/Viewport.ts

Shape

Method 141

Function 30

Class 20

Interface 7

Languages

TypeScript100%

Modules by API surface

src/virtual-scroller/VirtualScrollerRenderer.tsx61 symbols

src/virtual-scroller/Viewport.ts35 symbols

src/virtual-scroller/VirtualScrollerCell.tsx19 symbols

src/virtual-scroller/VirtualScroller.tsx17 symbols

src/virtual-scroller/Rectangle.ts11 symbols

src/virtual-scroller/CustomLocation.ts10 symbols

src/virtual-scroller/Positioning.ts7 symbols

src/virtual-scroller/DataItem.ts5 symbols

src/virtual-scroller/EdgeProximity.ts4 symbols

src/virtual-scroller/Anchor.ts4 symbols

src/app/timeline/TweetLoader.tsx3 symbols

src/virtual-scroller/utils.ts2 symbols

For agents

$ claude mcp add twitter-virtual-scroller \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact