[Release] 3.0.5

CHANGELOG.md

@@ -4,6 +4,17 @@ All notable changes to this project will be documented in this file. The format
 
 ## [Unreleased]
 
+## [v3.0.5](https://github.com/studiometa/js-toolkit/compare/3.0.4..3.0.5) (2025-07-23)
+
+### Changed
+
+- **withScrolledInView:** improve performance ([#645](https://github.com/studiometa/js-toolkit/pull/645), [83b65f16](https://github.com/studiometa/js-toolkit/commit/83b65f16))
+- **useScroll:** avoid layout thrashing ([#645](https://github.com/studiometa/js-toolkit/pull/645), [158d0b66](https://github.com/studiometa/js-toolkit/commit/158d0b66))
+
+### Fixed
+
+- **scrollTo:** fix scroll to be always instant ([#644](https://github.com/studiometa/js-toolkit/pull/644), [6e018553](https://github.com/studiometa/js-toolkit/commit/6e018553))
+
 ## [v3.0.4](https://github.com/studiometa/js-toolkit/compare/3.0.3..3.0.4) (2025-05-12)
 
 ### Changed

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit-workspace",
-  "version": "3.0.4",
+  "version": "3.0.5",
   "private": true,
   "type": "module",
   "workspaces": [
@@ -30,10 +30,10 @@
     "build-for-export-size": "node scripts/add-utils-export.js && rm -rf dist && npm run build:pkg && npm run build:cp-files"
   },
   "devDependencies": {
-    "@studiometa/prettier-config": "4.1.0",
-    "@types/node": "22.15.17",
-    "oxlint": "0.16.10",
-    "prettier": "3.5.3",
+    "@studiometa/prettier-config": "4.2.0",
+    "@types/node": "22.16.0",
+    "oxlint": "0.18.1",
+    "prettier": "3.6.2",
     "typescript": "5.8.3"
   },
   "dependencies": {

packages/demo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit-demo",
-  "version": "3.0.4",
+  "version": "3.0.5",
   "private": true,
   "type": "module",
   "scripts": {
@@ -19,20 +19,20 @@
     "fix:prettier": "npm run lint:prettier -- --write"
   },
   "dependencies": {
-    "@studiometa/ui": "^1.0.0-beta.0",
+    "@studiometa/ui": "1.0.0-rc.2",
     "tailwindcss": "^3.4.14"
   },
   "devDependencies": {
-    "@studiometa/eslint-config": "4.2.0",
-    "@studiometa/prettier-config": "4.1.0",
-    "@studiometa/stylelint-config": "4.0.0",
+    "@studiometa/eslint-config": "4.3.1",
+    "@studiometa/prettier-config": "4.2.0",
+    "@studiometa/stylelint-config": "4.1.1",
     "@studiometa/tailwind-config": "2.1.0",
-    "@studiometa/webpack-config": "6.3.4",
-    "@studiometa/webpack-config-preset-prototyping": "6.3.4",
-    "eslint": "9.26.0",
+    "@studiometa/webpack-config": "6.3.6",
+    "@studiometa/webpack-config-preset-prototyping": "6.3.6",
+    "eslint": "9.30.1",
     "http-server": "14.1.1",
-    "prettier": "3.5.3",
-    "stylelint": "16.19.1"
+    "prettier": "3.6.2",
+    "stylelint": "16.21.1"
   },
   "stylelint": {
     "extends": "@studiometa/stylelint-config"

packages/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit-docs",
-  "version": "3.0.4",
+  "version": "3.0.5",
   "type": "module",
   "private": true,
   "scripts": {
@@ -9,10 +9,10 @@
     "preview": "vitepress preview ."
   },
   "devDependencies": {
-    "@shikijs/vitepress-twoslash": "3.4.0",
+    "@shikijs/vitepress-twoslash": "3.7.0",
     "@studiometa/tailwind-config": "2.1.0",
     "tailwindcss": "3.4.17",
     "vitepress": "1.6.3",
-    "vitepress-plugin-llms": "1.1.3"
+    "vitepress-plugin-llms": "1.7.0"
   }
 }

packages/js-toolkit/decorators/withScrolledInView/withScrolledInView.ts

@@ -5,6 +5,7 @@ import type {
   ScrollServiceProps,
   ResizeServiceProps,
 } from '../../services/index.js';
+import { useScroll } from '../../services/index.js';
 import { withMountWhenInView } from '../withMountWhenInView.js';
 import {
   damp,
@@ -78,11 +79,7 @@ function updateProps(
   dampPrecision: number,
   axis: 'x' | 'y' = 'x',
 ): void {
-  props.current[axis] = clamp(
-    axis === 'x' ? window.scrollX : window.scrollY,
-    props.start[axis],
-    props.end[axis],
-  );
+  props.current[axis] = clamp(useScroll().props()[axis], props.start[axis], props.end[axis]);
   props.dampedCurrent[axis] = damp(
     props.current[axis],
     props.dampedCurrent[axis],

packages/js-toolkit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit",
-  "version": "3.0.4",
+  "version": "3.0.5",
   "description": "A set of useful little bits of JavaScript to boost your project! 🚀",
   "publishConfig": {
     "access": "public"

packages/js-toolkit/services/ScrollService.ts

@@ -2,6 +2,7 @@ import type { ServiceConfig, ServiceInterface } from './AbstractService.js';
 import { AbstractService } from './AbstractService.js';
 import { debounce } from '../utils/debounce.js';
 import { PASSIVE_CAPTURE_EVENT_OPTIONS } from './utils.js';
+import { nextTick } from '../utils/nextTick.js';
 
 export interface ScrollServiceProps {
   x: number;
@@ -105,15 +106,19 @@ export class ScrollService extends AbstractService<ScrollServiceProps> {
     return props;
   }
 
+  update() {
+    nextTick(() => this.updateProps()).then(() => this.trigger(this.props));
+  }
+
   onScrollDebounced = debounce(() => {
-    this.trigger(this.updateProps());
+    this.update();
   }, 100);
 
   /**
    * Scroll handler.
    */
   handleEvent() {
-    this.trigger(this.updateProps());
+    this.update();
     this.onScrollDebounced();
   }
 }

packages/js-toolkit/utils/scrollTo.ts

@@ -154,6 +154,7 @@ export function scrollTo(
         rootElement.scrollTo({
           left: lerp(initialScrollPosition.left, targetScrollPosition.left, progress),
           top: lerp(initialScrollPosition.top, targetScrollPosition.top, progress),
+          behavior: 'instant',
         });
       },
       {

packages/tests/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit-tests",
-  "version": "3.0.4",
+  "version": "3.0.5",
   "private": true,
   "type": "module",
   "scripts": {

packages/tests/services/ScrollService.spec.ts

@@ -1,6 +1,7 @@
 import { describe, it, expect, vi } from 'vitest';
 import { useScroll } from '@studiometa/js-toolkit';
 import { advanceTimersByTime, dispatch, useFakeTimers, useRealTimers } from '#test-utils';
+import { wait } from '#private/utils';
 
 describe('The `useScroll` service', () => {
   it('should expose a single instance', () => {
@@ -57,31 +58,33 @@ describe('The `useScroll` service', () => {
     `);
   });
 
-  it('should trigger on scroll', () => {
+  it('should trigger on scroll', async () => {
     const service = useScroll();
     const fn = vi.fn();
     service.add('key', fn);
     dispatch(document, 'scroll');
+    await wait(1);
     expect(fn).toHaveBeenLastCalledWith(service.props());
     fn.mockRestore();
     service.remove('key');
     dispatch(document, 'scroll');
     expect(fn).not.toHaveBeenCalled();
   });
 
-  it('should trigger after debounce', () => {
+  it('should trigger after debounce', async () => {
     const service = useScroll();
     const fn = vi.fn();
     service.add('key', fn);
     useFakeTimers();
     dispatch(document, 'scroll');
     advanceTimersByTime(101);
     useRealTimers();
+    await wait();
     expect(fn).toHaveBeenCalledTimes(2);
     service.remove('key');
   });
 
-  it('should always have a progress of 1 if the page is not scrollable', () => {
+  it('should always have a progress of 1 if the page is not scrollable', async () => {
     const spyWidth = vi.spyOn(document.scrollingElement, 'scrollWidth', 'get');
     spyWidth.mockImplementation(() => window.innerWidth);
     const spyHeight = vi.spyOn(document.scrollingElement, 'scrollHeight', 'get');
@@ -90,12 +93,13 @@ describe('The `useScroll` service', () => {
     const fn = vi.fn();
     service.add('key', fn);
     dispatch(document, 'scroll');
+    await wait();
     expect(service.props().maxX).toBe(0);
     expect(service.props().maxY).toBe(0);
     service.remove('key');
   });
 
-  it('should update the direction accordingly', () => {
+  it('should update the direction accordingly', async () => {
     const spyWidth = vi.spyOn(document.scrollingElement, 'scrollWidth', 'get');
     spyWidth.mockImplementation(() => window.innerWidth * 2);
     const spyHeight = vi.spyOn(document.scrollingElement, 'scrollHeight', 'get');
@@ -111,22 +115,26 @@ describe('The `useScroll` service', () => {
     scrollXSpy.mockImplementation(() => 0);
     scrollYSpy.mockImplementation(() => 0);
     dispatch(document, 'scroll');
+    await wait();
     expect(service.props().direction.x).toBe('NONE');
     expect(service.props().direction.y).toBe('NONE');
 
     scrollXSpy.mockImplementation(() => 10);
     scrollYSpy.mockImplementation(() => 10);
     dispatch(document, 'scroll');
+    await wait();
     expect(service.props().direction.x).toBe('RIGHT');
     expect(service.props().direction.y).toBe('DOWN');
 
     scrollXSpy.mockImplementation(() => 0);
     scrollYSpy.mockImplementation(() => 0);
     dispatch(document, 'scroll');
+    await wait();
     expect(service.props().direction.x).toBe('LEFT');
     expect(service.props().direction.y).toBe('UP');
 
     dispatch(document, 'scroll');
+    await wait();
     expect(service.props().direction.x).toBe('NONE');
     expect(service.props().direction.y).toBe('NONE');