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.
