js-toolkit
js-toolkit copied to clipboard
Published
20 hours ago โข
studiometa
studiometa
[Feature] Improve breakpoint performance
๐ Linked issue
No issue.
โ Type of change
- [ ] ๐ Documentation (updates to the documentation, readme or JSdoc annotations)
- [ ] ๐ Bug fix (a non-breaking change that fixes an issue)
- [x] ๐ Enhancement (improving an existing functionality like performance)
- [ ] โจ New feature (a non-breaking change that adds functionality)
- [ ] ๐งน Chore (updates to the build process or auxiliary tools and libraries)
- [ ] โ ๏ธ Breaking change (fix or feature that would cause existing functionality to change)
๐ Description
The matchMedia function is really slow in Safari, adding a cache will improve performance when accessing any of the breakpoint props from the resize service.
See https://jsbench.me/kpm6eyv92r/1 in different browsers.
๐ Checklist
- [ ] I have linked an issue or discussion.
- [x] I have added tests (if possible).
- [ ] I have updated the documentation accordingly.
- [ ] I have updated the changelog.
Export Size
@studiometa/js-toolkit
| Name | Size | Diff |
|---|---|---|
| useResize | 1.01 kB | +14 B (+1.41%) ๐บ |
| ResizeService | 990 B | +13 B (+1.33%) ๐บ |
| withBreakpointManager | 1.4 kB | +17 B (+1.23%) ๐บ |
| withBreakpointObserver | 1.59 kB | +16 B (+1.01%) ๐บ |
| withResponsiveOptions | 2.25 kB | +13 B (+0.58%) ๐บ |
| SERVICES | 3.7 kB | +21 B (+0.57%) ๐บ |
| FRAMEWORK | 12.33 kB | +24 B (+0.20%) ๐บ |
| BASE | 7.56 kB | +14 B (+0.19%) ๐บ |
| DECORATORS | 6.84 kB | +9 B (+0.13%) ๐บ |
| ALL | 17.39 kB | +22 B (+0.13%) ๐บ |
| Base | 7.49 kB | +9 B (+0.12%) ๐บ |
Unchanged
@studiometa/js-toolkit
| Name | Size | Diff |
|---|---|---|
| AbstractService | 512 B | - |
| addClass | 226 B | - |
| addStyle | 238 B | - |
| animate | 2.92 kB | - |
| boundingRectToCircle | 154 B | - |
| cache | 179 B | - |
| camelCase | 401 B | - |
| clamp | 67 B | - |
| clamp01 | 87 B | - |
| collideCircleCircle | 99 B | - |
| collideCircleRect | 159 B | - |
| collidePointCircle | 112 B | - |
| collidePointRect | 103 B | - |
| collideRectRect | 99 B | - |
| createApp | 1.28 kB | - |
| createEaseInOut | 116 B | - |
| createEaseOut | 71 B | - |
| createElement | 526 B | - |
| createRange | 90 B | - |
| damp | 78 B | - |
| dashCase | 376 B | - |
| debounce | 92 B | - |
| domScheduler | 296 B | - |
| DragService | 1.85 kB | - |
| ease | 435 B | - |
| easeInCirc | 68 B | - |
| easeInCubic | 59 B | - |
| easeInExpo | 80 B | - |
| easeInOutCirc | 141 B | - |
| easeInOutCubic | 130 B | - |
| easeInOutExpo | 134 B | - |
| easeInOutQuad | 128 B | - |
| easeInOutQuart | 133 B | - |
| easeInOutQuint | 152 B | - |
| easeInOutSine | 151 B | - |
| easeInQuad | 63 B | - |
| easeInQuart | 61 B | - |
| easeInQuint | 62 B | - |
| easeInSine | 77 B | - |
| easeLinear | 49 B | - |
| easeOutCirc | 115 B | - |
| easeOutCubic | 103 B | - |
| easeOutExpo | 112 B | - |
| easeOutQuad | 103 B | - |
| easeOutQuart | 100 B | - |
| easeOutQuint | 103 B | - |
| easeOutSine | 121 B | - |
| endsWith | 88 B | - |
| getAncestorWhere | 91 B | - |
| getAncestorWhereUntil | 119 B | - |
| getClosestParent | 173 B | - |
| getComponentResolver | 138 B | - |
| getDirectChildren | 194 B | - |
| getInstanceFromElement | 90 B | - |
| getInstances | 146 B | - |
| getOffsetSizes | 159 B | - |
| hasWindow | 62 B | - |
| HELPERS | 2.43 kB | - |
| historyPush | 499 B | - |
| historyReplace | 503 B | - |
| importOnInteraction | 891 B | - |
| importOnMediaQuery | 236 B | - |
| importWhenIdle | 223 B | - |
| importWhenPrefersMotion | 275 B | - |
| importWhenVisible | 911 B | - |
| inertiaFinalValue | 142 B | - |
| isArray | 70 B | - |
| isBoolean | 78 B | - |
| isDefined | 86 B | - |
| isDev | 72 B | - |
| isDirectChild | 206 B | - |
| isEmpty | 207 B | - |
| isEmptyString | 93 B | - |
| isFunction | 72 B | - |
| isNull | 72 B | - |
| isNumber | 84 B | - |
| isObject | 105 B | - |
| isString | 86 B | - |
| keyCodes | 97 B | - |
| KeyService | 833 B | - |
| lerp | 57 B | - |
| loadElement | 169 B | - |
| loadIframe | 189 B | - |
| loadImage | 188 B | - |
| loadLink | 186 B | - |
| loadScript | 197 B | - |
| LoadService | 577 B | - |
| lowerCase | 60 B | - |
| map | 71 B | - |
| matrix | 106 B | - |
| mean | 91 B | - |
| memo | 100 B | - |
| memoize | 189 B | - |
| MutationService | 784 B | - |
| nextFrame | 162 B | - |
| nextMicrotask | 111 B | - |
| nextTick | 134 B | - |
| noop | 39 B | - |
| noopValue | 49 B | - |
| objectToURLSearchParams | 302 B | - |
| pascalCase | 377 B | - |
| PointerService | 1.05 kB | - |
| Queue | 226 B | - |
| RafService | 878 B | - |
| randomInt | 80 B | - |
| randomItem | 232 B | - |
| removeClass | 222 B | - |
| removeStyle | 238 B | - |
| round | 56 B | - |
| saveActiveElement | 56 B | - |
| ScrollService | 1.01 kB | - |
| scrollTo | 2.12 kB | - |
| SmartQueue | 411 B | - |
| snakeCase | 378 B | - |
| startsWith | 87 B | - |
| throttle | 101 B | - |
| toggleClass | 225 B | - |
| transform | 321 B | - |
| transition | 916 B | - |
| trapFocus | 363 B | - |
| tween | 1.55 kB | - |
| untrapFocus | 45 B | - |
| upperCase | 54 B | - |
| useDrag | 1.87 kB | - |
| useKey | 847 B | - |
| useLoad | 592 B | - |
| useMutation | 819 B | - |
| usePointer | 1.08 kB | - |
| useRaf | 888 B | - |
| useScheduler | 290 B | - |
| useScroll | 1.03 kB | - |
| UTILS | 7.47 kB | - |
| wait | 79 B | - |
| withDrag | 1.99 kB | - |
| withExtraConfig | 135 B | - |
| withFreezedOptions | 140 B | - |
| withIntersectionObserver | 260 B | - |
| withLeadingCharacters | 88 B | - |
| withLeadingSlash | 107 B | - |
| withMountOnMediaQuery | 322 B | - |
| withMountWhenInView | 286 B | - |
| withMountWhenPrefersMotion | 355 B | - |
| withMutation | 943 B | - |
| withName | 81 B | - |
| withoutLeadingCharacters | 86 B | - |
| withoutLeadingCharactersRecursive | 124 B | - |
| withoutLeadingSlash | 93 B | - |
| withoutTrailingCharacters | 98 B | - |
| withoutTrailingCharactersRecursive | 129 B | - |
| withoutTrailingSlash | 103 B | - |
| withRelativePointer | 1.21 kB | - |
| withScrolledInView | 1.85 kB | - |
| withTrailingCharacters | 96 B | - |
| withTrailingSlash | 120 B | - |
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Codecov Report
All modified and coverable lines are covered by tests :white_check_mark:
Project coverage is 99.13%. Comparing base (
1e7936f) to head (84a9b61). Report is 5 commits behind head on develop.
Additional details and impacted files
@@ Coverage Diff @@
## develop #589 +/- ##
========================================
Coverage 99.13% 99.13%
========================================
Files 122 122
Lines 4182 4185 +3
Branches 1138 1139 +1
========================================
+ Hits 4146 4149 +3
Misses 36 36
| Flag | Coverage ฮ | |
|---|---|---|
| unittests | 99.13% <100.00%> (+<0.01%) |
:arrow_up: |
Flags with carried forward coverage won't be shown. Click here to find out more.
:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.
:rocket: New features to boost your workflow:
- :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
- :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.
![codecov[bot] avatar](https://avatars.githubusercontent.com/in/254?v=4 "Published by a pub.dev verified publisher"){kind=small}