-
Notifications
You must be signed in to change notification settings - Fork 33
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(packages/sui-performance): documentation and tests
- Loading branch information
Showing
3 changed files
with
73 additions
and
203 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,201 +1 @@ | ||
| # CHANGELOG | ||
|
|
||
| # 2.6.0 (2024-06-20) | ||
|
|
||
|
|
||
| ### Bug Fixes | ||
|
|
||
| * add expected attribution for inp ([acc4a16](https://github.com/SUI-Components/sui/commit/acc4a1658635181b64562774cac7174e4ff3f337)) | ||
|
|
||
|
|
||
|
|
||
| # 2.5.0 (2024-06-19) | ||
|
|
||
|
|
||
| ### Features | ||
|
|
||
| * upgrade web vitals package ([575f8f8](https://github.com/SUI-Components/sui/commit/575f8f8c89669472ea05e0bec6f52d5fcc69920b)) | ||
|
|
||
|
|
||
|
|
||
| # 2.4.0 (2024-03-26) | ||
|
|
||
|
|
||
| ### Features | ||
|
|
||
| * upgrade web vitals package ([06c29f5](https://github.com/SUI-Components/sui/commit/06c29f5b27a2a9bb240f558b602b471b77e24eb6)) | ||
|
|
||
|
|
||
|
|
||
| # 2.3.0 (2024-02-12) | ||
|
|
||
|
|
||
| ### Features | ||
|
|
||
| * skip empty targets ([39a0ac4](https://github.com/SUI-Components/sui/commit/39a0ac45cd59f091521345269f4e7323a582b303)) | ||
| * validate if the target is null ([f671e93](https://github.com/SUI-Components/sui/commit/f671e9378797525386dfcfe9399f33e6cac6fd87)) | ||
|
|
||
|
|
||
|
|
||
| # 2.2.0 (2024-02-09) | ||
|
|
||
|
|
||
| ### Features | ||
|
|
||
| * add some device data to sent to Open Search ([50ed352](https://github.com/SUI-Components/sui/commit/50ed352bc4d6b14ba40e95d11c857021ae0cd0c0)) | ||
| * log visibilityState ([cf46a94](https://github.com/SUI-Components/sui/commit/cf46a9403ed070a669b9893697539ca7f49175f9)) | ||
| * Mocking the visibilityState ([9bd98d1](https://github.com/SUI-Components/sui/commit/9bd98d113227474f05a247998186309c1af75fe3)) | ||
| * skip logger.cwv test 🙈 ([bef9b26](https://github.com/SUI-Components/sui/commit/bef9b2648404c7b7bf3e02a42fdedd0f2c46aec8)) | ||
| * skip logger.cwv test 🙈 ([b0452c6](https://github.com/SUI-Components/sui/commit/b0452c6fc93bb8c893607f7224bcfb0158409c3d)) | ||
| * skip logger.cwv test 🙈 ([30bc4da](https://github.com/SUI-Components/sui/commit/30bc4da64fe905b1af7699419576b3869a4a0568)) | ||
| * skip logger.cwv test 🙈 ([636e79a](https://github.com/SUI-Components/sui/commit/636e79a58bc9f1a12ef081be6fafcc26a642bc9c)) | ||
| * skip logger.cwv test 🙈 ([6c1f1a2](https://github.com/SUI-Components/sui/commit/6c1f1a28b7f0cec00e6b9e4fea7c3b5042eb8d19)) | ||
| * unskip test ([676fac6](https://github.com/SUI-Components/sui/commit/676fac613935500b8976aa4cb39dbe4736a0f471)) | ||
| * unskip the test and log the method called ([15575a2](https://github.com/SUI-Components/sui/commit/15575a2b1337fcbcf9ad6eb0785b89fb11832b96)) | ||
|
|
||
|
|
||
|
|
||
| # 2.1.0 (2023-12-04) | ||
|
|
||
|
|
||
| ### Features | ||
|
|
||
| * **packages/sui-react-web-vitals:** add routeId field to logger ([524a2ce](https://github.com/SUI-Components/sui/commit/524a2ced234c8e24f3d636bc1c7a69ffef4f57ad)) | ||
|
|
||
|
|
||
|
|
||
| # 2.0.0 (2023-11-27) | ||
|
|
||
|
|
||
| ### Features | ||
|
|
||
| * **packages/sui-react-web-vitals:** add presentationTime comment ([3aaee12](https://github.com/SUI-Components/sui/commit/3aaee12327952c0fa6919a424fb36c4ac2d344c8)) | ||
| * **packages/sui-react-web-vitals:** add sub inp metrics to cwv ([3ddbd34](https://github.com/SUI-Components/sui/commit/3ddbd34428e23b7b384780c21d6a84e58ef44fb3)) | ||
| * **packages/sui-react-web-vitals:** minor updates ([55f1eaf](https://github.com/SUI-Components/sui/commit/55f1eaf0c2779522fef4e1421c02197aa32909d4)) | ||
| * **packages/sui-react-web-vitals:** update doc ([52bd64d](https://github.com/SUI-Components/sui/commit/52bd64d4aea798efe2ed8b46d645ef96258c2063)) | ||
| * **packages/sui-react-web-vitals:** update test and props ([1bd4347](https://github.com/SUI-Components/sui/commit/1bd4347296bfebb1e7b48e6ee3c59d7a88e2c58d)) | ||
|
|
||
|
|
||
|
|
||
| # 1.12.0 (2023-11-07) | ||
|
|
||
|
|
||
| ### Features | ||
|
|
||
| * **packages/sui-react-web-vitals:** add visibilityState property ([ee5c0e1](https://github.com/SUI-Components/sui/commit/ee5c0e1f6052f0b006dd825654ef8f3bf79abd1d)) | ||
|
|
||
|
|
||
|
|
||
| # 1.11.0 (2023-10-23) | ||
|
|
||
|
|
||
| ### Features | ||
|
|
||
| * **packages/sui-react-web-vitals:** add INP eventType attribution ([3b0b664](https://github.com/SUI-Components/sui/commit/3b0b6645c7637b93dc318f61dd44faa863e81d1c)) | ||
|
|
||
|
|
||
|
|
||
| # 1.10.0 (2023-10-09) | ||
|
|
||
|
|
||
| ### Features | ||
|
|
||
| * **packages/sui-react-web-vitals:** update Wev Vitals lib to 3.5.0 ([15a4775](https://github.com/SUI-Components/sui/commit/15a47759b5580af5af748940859415f7e1aba334)) | ||
|
|
||
|
|
||
|
|
||
| # 1.9.0 (2023-09-08) | ||
|
|
||
|
|
||
| ### Bug Fixes | ||
|
|
||
| * **packages/sui-react-web-vitals:** fix path is regexp logic ([f2427bc](https://github.com/SUI-Components/sui/commit/f2427bc686f81464e869adc4dabc2b006ed5b006)) | ||
|
|
||
|
|
||
| ### Features | ||
|
|
||
| * **packages/sui-react-web-vitals:** improve logic for pathname normalisation ([e214243](https://github.com/SUI-Components/sui/commit/e214243bdcd3f23dacdb1e91e2abd1fdc55aa8ee)) | ||
|
|
||
|
|
||
|
|
||
| # 1.8.0 (2023-09-05) | ||
|
|
||
|
|
||
| ### Bug Fixes | ||
|
|
||
| * **packages/sui-react-web-vitals:** use metricsAllChanges and add more default metrics ([056247f](https://github.com/SUI-Components/sui/commit/056247fda7af44e0ce19ddce7fe1dc281160ef27)) | ||
| * **packages/sui-react-web-vitals:** validate if the rating is EQUAL to 'good' ([2655250](https://github.com/SUI-Components/sui/commit/265525050f7bbcf906ede1acf2efb22fc4febf23)) | ||
|
|
||
|
|
||
|
|
||
| # 1.7.0 (2023-09-05) | ||
|
|
||
|
|
||
| ### Features | ||
|
|
||
| * **packages/sui-react-web-vitals:** use cwv instead of log ([e5be9ec](https://github.com/SUI-Components/sui/commit/e5be9ecc49d33db9b5201efe88b510632d5fa413)) | ||
|
|
||
|
|
||
|
|
||
| # 1.6.0 (2023-08-10) | ||
|
|
||
|
|
||
| ### Bug Fixes | ||
|
|
||
| * **packages/sui-react-web-vitals:** fix path normalizer to avoid DD not collecting some tag values ([2acaa96](https://github.com/SUI-Components/sui/commit/2acaa96b46df2fa3ed83036424c08324a280de77)) | ||
|
|
||
|
|
||
|
|
||
| # 1.5.0 (2023-08-08) | ||
|
|
||
|
|
||
| ### Features | ||
|
|
||
| * **packages/sui-react-web-vitals:** add attribution param ([6da1b1b](https://github.com/SUI-Components/sui/commit/6da1b1b541f31247a2d45f19060477c53d25b294)) | ||
| * **packages/sui-react-web-vitals:** add proper thresholds for all metrics ([24fbcda](https://github.com/SUI-Components/sui/commit/24fbcda3c6817cf45dcfb64526f0db9ff1dadfe5)) | ||
| * **packages/sui-react-web-vitals:** add reporting all changes for defined metrics ([cdabf48](https://github.com/SUI-Components/sui/commit/cdabf48f42ddf12c017d5970900e928f1ae9579c)) | ||
| * **packages/sui-react-web-vitals:** adding attribution as tags on metric ([1d7c76f](https://github.com/SUI-Components/sui/commit/1d7c76ff7c9a2d775eef49f8802ffaf1b6f8e000)) | ||
| * **packages/sui-react-web-vitals:** better way of managing reportAllChanges ([7058675](https://github.com/SUI-Components/sui/commit/70586755f10c7c2955b4d7811c23a8a16b7468c1)) | ||
| * **packages/sui-react-web-vitals:** use logger.log instead of logger.metric ([3e4726e](https://github.com/SUI-Components/sui/commit/3e4726e6516cb30c644847e8cc941b58734642e6)) | ||
|
|
||
|
|
||
|
|
||
| # 1.4.0 (2023-05-18) | ||
|
|
||
|
|
||
| ### Features | ||
|
|
||
| * **packages/sui-react-web-vitals:** add routename to reporter as coming from route id prop ([5c31343](https://github.com/SUI-Components/sui/commit/5c31343834149cd3ca0183e0d66668c92fc55131)) | ||
|
|
||
|
|
||
|
|
||
| # 1.3.0 (2023-04-06) | ||
|
|
||
|
|
||
| ### Features | ||
|
|
||
| * **packages/sui-react-web-vitals:** replace wildcard on pathname tag value so that it works with DD ([894ce02](https://github.com/SUI-Components/sui/commit/894ce026e7089e962f9e5ab16c94d5a5e82a4ef7)) | ||
|
|
||
|
|
||
|
|
||
| # 1.2.0 (2023-01-30) | ||
|
|
||
|
|
||
| ### Features | ||
|
|
||
| * **packages/sui-react-web-vitals:** add distribution metric support ([aa741e6](https://github.com/SUI-Components/sui/commit/aa741e6d2e7899f9eba083b4d144fad1918baeae)) | ||
|
|
||
|
|
||
|
|
||
| # 1.1.0 (2022-12-22) | ||
|
|
||
|
|
||
| ### Features | ||
|
|
||
| * **packages/sui-react-web-vitals:** add hook dep ([cc08b5a](https://github.com/SUI-Components/sui/commit/cc08b5a6a091337efbaddedaf948e931a97bfaa2)) | ||
| * **packages/sui-react-web-vitals:** add lcp metric ([ca0b1c9](https://github.com/SUI-Components/sui/commit/ca0b1c9da7d78d1269823e094dccb6b1dac6cb73)) | ||
| * **packages/sui-react-web-vitals:** add react web vitals ([6f9864c](https://github.com/SUI-Components/sui/commit/6f9864c2300c760557a4a061aa53b928bb9c3fd2)) | ||
| * **packages/sui-react-web-vitals:** improve doc and add more props ([89ddb13](https://github.com/SUI-Components/sui/commit/89ddb132d7f6603449ff9b621ba52fe0c0dd2bb7)) | ||
| * **packages/sui-react-web-vitals:** remove not needed console log ([549c96a](https://github.com/SUI-Components/sui/commit/549c96ae507445d46702573c154acb7c2cb8c8d0)) | ||
| * **packages/sui-react-web-vitals:** update feedback ([52f64a8](https://github.com/SUI-Components/sui/commit/52f64a8ea7587a94a821e88cc72bcd8d629abdf1)) | ||
| * **packages/sui-react-web-vitals:** update logger check ([2ccaac0](https://github.com/SUI-Components/sui/commit/2ccaac0fa1d09dc24177e80d743ee65b3c83e184)) | ||
| # CHANGELOG |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,55 @@ | ||
| # @s-ui/performance | ||
|
|
||
| > Track the performance of pages using Core Web Vitals in real-time for all the visits | ||
| > Performance utilities to make your web application go fast ⚡️ | ||
| ## Installation | ||
|
|
||
| ```sh | ||
| npm install @s-ui/performance | ||
| ``` | ||
|
|
||
| ## | ||
| ## Usage | ||
|
|
||
| ### Delay code execution | ||
|
|
||
| Use this function to delay the execution of an expensive operation and prioritize user actions. Keep in mind that it only delays the response by a maximum of 1 frame, an average of 8ms, which is too little for a human to notice for the types of major actions where you’d use this function. | ||
|
|
||
| ```jsx | ||
| import {delayTask} from '@s-ui/performance'; | ||
|
|
||
| export default function Example() { | ||
| const [counter, setCounter] = useState(0) | ||
|
|
||
| const handleClick = async () => { | ||
| setCounter(counter => counter + 1) | ||
|
|
||
| await delayTask() | ||
|
|
||
| work() // expensive work | ||
| } | ||
|
|
||
| return <button onClick={handleClick}>{counter}</button> | ||
| } | ||
| ``` | ||
|
|
||
| ### Delay code execution until urgent | ||
|
|
||
| Use this function to delay the execution of an expensive operation while the main thread is idle, using [requestIdleCallback](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback), and to prioritize user actions. This method ensures the execution is completed before the user leaves the page. It is especially useful for delaying tracking execution. | ||
|
|
||
| ```jsx | ||
| import {delayTaskUntilUrgent} from '@s-ui/performance'; | ||
|
|
||
| export default function Example() { | ||
| const [counter, setCounter] = useState(0) | ||
|
|
||
| const handleClick = async () => { | ||
| setCounter(counter => counter + 1) | ||
|
|
||
| await delayTaskUntilUrgent() | ||
|
|
||
| track() // expensive work | ||
| } | ||
|
|
||
| return <button onClick={handleClick}>{counter}</button> | ||
| } | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import {expect} from 'chai' | ||
| import sinon from 'sinon' | ||
|
|
||
| import {waitFor} from '@testing-library/react' | ||
|
|
||
| import {delayTask, delayTaskUntilUrgent} from '../../src/index.js' | ||
|
|
||
| describe('delayTask', () => { | ||
| it('should execute function', async () => { | ||
| const callback = sinon.spy() | ||
|
|
||
| delayTask().then(callback) | ||
|
|
||
| await waitFor(() => expect(callback.called).to.be.true) | ||
| }) | ||
| }) | ||
|
|
||
| describe('delayTaskUntilUrgent', () => { | ||
| it('should execute function', async () => { | ||
| const callback = sinon.spy() | ||
|
|
||
| delayTaskUntilUrgent().then(callback) | ||
|
|
||
| await waitFor(() => expect(callback.called).to.be.true) | ||
| }) | ||
| }) |