An open-source utility library for measuring React component render times.
• Developed an NPM package to extract and test React Fiber data by injecting a bundled script into Puppeteer’s headless browser environment and hooking into React Fiber reconciliation process.
• Used Rollup to run Babel plugins to transpile and to resolve TS modules into ES and bundle multiple modules into one bundled script with a browser-compatible format to inject into a headless browser environment and test target applications.
• Implemented a tree-like data structure within an algorithm to store information extracted from React Fiber and to create a history of renders, state changes, and updated actions related to each Fiber node for ease of testing, time-travel, and analytics.
• Utilized Jest to develop unit tests for API functions and rendered components to ensure intended functionalities.
• Utilized Docker to containerize and test target applications in hosted VM to mimic a client machine, and to provide a more accurate testing environment as compared to a developer machine that would have good specifications and faster processing times.
• Developed an API with functionality that allows developers to build their own tools and view data from React Fiber through its commits.
• Utilized Sequelize as an ORM for PostgreSQL to design and develop data models for React Fiber data, allowing for simplified querying and ease of management of relationships.
