Skip to content

Commit 529b46f

Browse files
thebuilderthebuilder
committed
feat: migrate to Biome formatting
Remove prettier in favour of Biome. This results in some updates to multiple files, mainly because of switching from single to double quotes.
1 parent 1bae98d commit 529b46f

25 files changed

Lines changed: 548 additions & 579 deletions

‎README.md‎

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ Provide these as the options argument in the `useInView` hook or as props on the
149149
**`<InView />`** component.
150150

151151
| Name | Type | Default | Description |
152-
| ---------------------- | ------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
152+
|------------------------|---------------------------|-------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
153153
| **root** | `Element` | `document` | The Intersection Observer interface's read-only root property identifies the Element or Document whose bounds are treated as the bounding box of the viewport for the element which is the observer's target. If the root is `null`, then the bounds of the actual document viewport are used. |
154154
| **rootMargin** | `string` | `'0px'` | Margin around the root. Can have values similar to the CSS margin property, e.g. `"10px 20px 30px 40px"` (top, right, bottom, left). |
155155
| **threshold** | `number` or `number[]` | `0` | Number between `0` and `1` indicating the percentage that should be visible before triggering. Can also be an array of numbers, to create multiple trigger points. |
@@ -166,8 +166,8 @@ Provide these as the options argument in the `useInView` hook or as props on the
166166
The **`<InView />`** component also accepts the following props:
167167

168168
| Name | Type | Default | Description |
169-
| ------------ | ---------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
170-
| **as** | `IntrinsicElement` | `'div'` | Render the wrapping element as this element. Defaults to `div`. If you want to use a custom component, please use the `useInView` hook or a render prop instead to manage the reference explictly. |
169+
|--------------|------------------------------------------------------|-------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
170+
| **as** | `IntrinsicElement` | `'div'` | Render the wrapping element as this element. Defaults to `div`. If you want to use a custom component, please use the `useInView` hook or a render prop instead to manage the reference explictly. |
171171
| **children** | `({ref, inView, entry}) => ReactNode` or `ReactNode` | `undefined` | Children expects a function that receives an object containing the `inView` boolean and a `ref` that should be assigned to the element root. Alternatively pass a plain child, to have the `<InView />` deal with the wrapping element. You will also get the `IntersectionObserverEntry` as `entry`, giving you more details. |
172172

173173
### Intersection Observer v2 🧪
@@ -259,7 +259,7 @@ will emulate the real IntersectionObserver, allowing you to validate that your
259259
components are behaving as expected.
260260
261261
| Method | Description |
262-
| --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
262+
|-----------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
263263
| `mockAllIsIntersecting(isIntersecting)` | Set `isIntersecting` on all current Intersection Observer instances. The value of `isIntersecting` should be either a `boolean` or a threshold between 0 and 1. |
264264
| `mockIsIntersecting(element, isIntersecting)` | Set `isIntersecting` for the Intersection Observer of a specific `element`. The value of `isIntersecting` should be either a `boolean` or a threshold between 0 and 1. |
265265
| `intersectionMockInstance(element)` | Call the `intersectionMockInstance` method with an element, to get the (mocked) `IntersectionObserver` instance. You can use this to spy on the `observe` and`unobserve` methods. |
@@ -360,15 +360,15 @@ const HookComponent = ({ options }) => {
360360
};
361361

362362
test('should create a hook inView', () => {
363-
render(<HookComponent />);
363+
render(<HookComponent/>);
364364

365365
// This causes all (existing) IntersectionObservers to be set as intersecting
366366
mockAllIsIntersecting(true);
367367
screen.getByText('true');
368368
});
369369

370370
test('should create a hook inView with threshold', () => {
371-
render(<HookComponent options={{ threshold: 0.3 }} />);
371+
render(<HookComponent options={{ threshold: 0.3 }}/>);
372372

373373
mockAllIsIntersecting(0.1);
374374
screen.getByText('false');
@@ -379,7 +379,7 @@ test('should create a hook inView with threshold', () => {
379379
});
380380

381381
test('should mock intersecing on specific hook', () => {
382-
render(<HookComponent />);
382+
render(<HookComponent/>);
383383
const wrapper = screen.getByTestId('wrapper');
384384

385385
// Set the intersection state on the wrapper.
@@ -388,7 +388,7 @@ test('should mock intersecing on specific hook', () => {
388388
});
389389

390390
test('should create a hook and call observe', () => {
391-
const { getByTestId } = render(<HookComponent />);
391+
const { getByTestId } = render(<HookComponent/>);
392392
const wrapper = getByTestId('wrapper');
393393
// Access the `IntersectionObserver` instance for the wrapper Element.
394394
const instance = intersectionMockInstance(wrapper);
@@ -423,6 +423,7 @@ You can set the fallback globally:
423423
424424
```js
425425
import { defaultFallbackInView } from 'react-intersection-observer';
426+
426427
defaultFallbackInView(true); // or 'false'
427428
```
428429
@@ -488,11 +489,12 @@ cases, where you need full control over when and how observers are created.
488489
489490
```js
490491
import { observe } from 'react-intersection-observer';
492+
491493
const destroy = observe(element, callback, options);
492494
```
493495
494496
| Name | Type | Required | Description |
495-
| ------------ | -------------------------- | -------- | ---------------------------------------------------------- |
497+
|--------------|----------------------------|----------|------------------------------------------------------------|
496498
| **element** | `Element` | true | DOM element to observe |
497499
| **callback** | `ObserverInstanceCallback` | true | The callback function that Intersection Observer will call |
498500
| **options** | `IntersectionObserverInit` | false | The options for the Intersection Observer |
@@ -505,19 +507,29 @@ order to destroy the observer again.
505507
> how instances are created.
506508
507509
[package-url]: https://npmjs.org/package/react-intersection-observer
510+
508511
[npm-version-svg]: https://img.shields.io/npm/v/react-intersection-observer.svg
512+
509513
[npm-minzip-svg]:
510-
https://img.shields.io/bundlephobia/minzip/react-intersection-observer.svg
514+
https://img.shields.io/bundlephobia/minzip/react-intersection-observer.svg
515+
511516
[bundlephobia-url]:
512-
https://bundlephobia.com/result?p=react-intersection-observer
517+
https://bundlephobia.com/result?p=react-intersection-observer
518+
513519
[license-image]: http://img.shields.io/npm/l/react-intersection-observer.svg
520+
514521
[license-url]: LICENSE
522+
515523
[downloads-image]: http://img.shields.io/npm/dm/react-intersection-observer.svg
524+
516525
[downloads-url]:
517-
http://npm-stat.com/charts.html?package=react-intersection-observer
526+
http://npm-stat.com/charts.html?package=react-intersection-observer
527+
518528
[test-image]:
519-
https://github.com/thebuilder/react-intersection-observer/workflows/Test/badge.svg
529+
https://github.com/thebuilder/react-intersection-observer/workflows/Test/badge.svg
530+
520531
[test-url]:
521-
https://github.com/thebuilder/react-intersection-observer/actions?query=workflow%3ATest
532+
https://github.com/thebuilder/react-intersection-observer/actions?query=workflow%3ATest
533+
522534
[test-utils-url]:
523-
https://github.com/thebuilder/react-intersection-observer/blob/master/src/test-utils.ts
535+
https://github.com/thebuilder/react-intersection-observer/blob/master/src/test-utils.ts

‎biome.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@
66
"organizeImports": {
77
"enabled": true
88
},
9+
"formatter": {
10+
"enabled": true,
11+
"indentStyle": "space"
12+
},
913
"linter": {
1014
"enabled": true,
1115
"rules": {

‎package.json‎

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -53,11 +53,6 @@
5353
"useInView",
5454
"useIntersectionObserver"
5555
],
56-
"prettier": {
57-
"singleQuote": true,
58-
"trailingComma": "all",
59-
"proseWrap": "always"
60-
},
6156
"release": {
6257
"branches": [
6358
"main",
@@ -83,10 +78,7 @@
8378
},
8479
"lint-staged": {
8580
"*.{js,json,css,md,ts,tsx}": [
86-
"prettier --write"
87-
],
88-
"src/**/*.{ts,tsx}": [
89-
"biome lint --apply"
81+
"biome check --apply"
9082
]
9183
},
9284
"size-limit": [
@@ -116,16 +108,15 @@
116108
"devDependencies": {
117109
"@biomejs/biome": "^1.5.3",
118110
"@size-limit/preset-small-lib": "^11.0.2",
119-
"@testing-library/jest-dom": "^6.4.0",
120-
"@testing-library/react": "^14.2.0",
121-
"@types/jest": "^29.5.11",
122-
"@types/react": "^18.2.48",
111+
"@testing-library/jest-dom": "^6.4.1",
112+
"@testing-library/react": "^14.2.1",
113+
"@types/jest": "^29.5.12",
114+
"@types/react": "^18.2.51",
123115
"@types/react-dom": "^18.2.18",
124116
"jsdom": "^24.0.0",
125117
"lint-staged": "^15.2.1",
126118
"microbundle": "^0.15.1",
127119
"npm-run-all": "^4.1.5",
128-
"prettier": "^3.2.4",
129120
"react": "^18.2.0",
130121
"react-dom": "^18.2.0",
131122
"simple-git-hooks": "^2.9.0",
@@ -142,7 +133,8 @@
142133
"pnpm": {
143134
"peerDependencyRules": {
144135
"allowedVersions": {
145-
"react": "18"
136+
"react": "18",
137+
"vite": "5"
146138
}
147139
},
148140
"allowedDeprecatedVersions": {

0 commit comments

Comments
 (0)