fix: resolve ES modules compatibility in E2E test files
- Replace __dirname with import.meta.url pattern for ES modules compatibility - Add fileURLToPath imports to all E2E test files - Fix duplicate require statements in setup-verification.spec.ts - Update playwright.config.ts to use relative path instead of __dirname This fixes the 'ReferenceError: __dirname is not defined in ES module scope' error when running Playwright tests in the ES modules environment.
This commit is contained in:
Luca Sacchi Ricciardi
21
node_modules/use-callback-ref/LICENSE
generated
vendored
Normal file
21
node_modules/use-callback-ref/LICENSE
generated
vendored
Normal file
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2017 Anton Korzunov
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
170
node_modules/use-callback-ref/README.md
generated
vendored
Normal file
170
node_modules/use-callback-ref/README.md
generated
vendored
Normal file
@@ -0,0 +1,170 @@
|
||||
<div align="center">
|
||||
<h1>🤙 use-callback-ref 📞</h1>
|
||||
<br/>
|
||||
The same `useRef` but it will callback: 📞 Hello! Your ref was changed!
|
||||
<br/>
|
||||
<a href="https://www.npmjs.com/package/use-callback-ref">
|
||||
<img src="https://img.shields.io/npm/v/use-callback-ref.svg?style=flat-square" />
|
||||
</a>
|
||||
<a href="https://travis-ci.org/theKashey/use-callback-ref">
|
||||
<img alt="Travis" src="https://img.shields.io/travis/theKashey/use-callback-ref/master.svg?style=flat-square">
|
||||
</a>
|
||||
<a href="https://bundlephobia.com/result?p=use-callback-ref">
|
||||
<img src="https://img.shields.io/bundlephobia/minzip/use-callback-ref.svg" alt="bundle size">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
> Keep in mind that useRef doesn't notify you when its content changes.
|
||||
> Mutating the .current property doesn't cause a re-render.
|
||||
> If you want to run some code when React attaches or detaches a ref to a DOM node,
|
||||
> you may want to use ~~a callback ref instead~~ .... **useCallbackRef** instead.
|
||||
|
||||
– [Hooks API Reference](https://reactjs.org/docs/hooks-reference.html#useref)
|
||||
|
||||
Read more about `use-callback` pattern and use cases:
|
||||
|
||||
- https://dev.to/thekashey/the-same-useref-but-it-will-callback-8bo
|
||||
|
||||
This library exposes helpers to handle any case related to `ref` _lifecycle_
|
||||
|
||||
- `useCallbackRef` - react on a ref change (replacement for `useRef`)
|
||||
- `createCallbackRef` - - low level version of `useCallbackRef`
|
||||
- `useMergeRefs` - merge multiple refs together creating a stable return ref
|
||||
- `mergeRefs` - low level version of `useMergeRefs`
|
||||
- `useTransformRef` - transform one ref to another (replacement for `useImperativeHandle`)
|
||||
- `transformRef` - low level version of `useTransformRef`
|
||||
- `useRefToCallback` - convert RefObject to an old callback-style ref
|
||||
- `refToCallback` - low level version of `useRefToCallback`
|
||||
- `assignRef` - assign value to the ref, regardless it is RefCallback or RefObject
|
||||
|
||||
All functions are tree shakable, but even together it's **less then 300b**.
|
||||
|
||||
# API
|
||||
|
||||
💡 Some commands are hooks based, and returns the same refs/functions every render.
|
||||
But some are not, to be used in classes or non-react code.
|
||||
|
||||
## useRef API
|
||||
|
||||
🤔 Use case: every time you have to react to ref change
|
||||
|
||||
API is 99% compatible with React `createRef` and `useRef`, and just adds another argument - `callback`,
|
||||
which would be called on **ref update**.
|
||||
|
||||
#### createCallbackRef - to replace React.createRef
|
||||
|
||||
- `createCallbackRef(callback)` - would call provided `callback` when ref is changed.
|
||||
|
||||
#### useCallbackRef - to replace React.useRef
|
||||
|
||||
- `useCallbackRef(initialValue, callback)` - would call provided `callback` when ref is changed.
|
||||
|
||||
> `callback` in both cases is `callback(newValue, oldValue)`. Callback would not be called if newValue and oldValue is the same.
|
||||
|
||||
```js
|
||||
import { useRef, createRef, useState } from 'react';
|
||||
import { useCallbackRef, createCallbackRef } from 'use-callback-ref';
|
||||
|
||||
const Component = () => {
|
||||
const [, forceUpdate] = useState();
|
||||
// I dont need callback when ref changes
|
||||
const ref = useRef(null);
|
||||
|
||||
// but sometimes - it could be what you need
|
||||
const anotherRef = useCallbackRef(null, () => forceUpdate());
|
||||
|
||||
useEffect(() => {
|
||||
// now it's just possible
|
||||
}, [anotherRef.current]); // react to dom node change
|
||||
};
|
||||
```
|
||||
|
||||
💡 You can use `useCallbackRef` to convert RefObject into RefCallback, creating bridges between the old and the new code
|
||||
|
||||
```js
|
||||
// some old component
|
||||
const onRefUpdate = (newRef) => {...}
|
||||
const refObject = useCallbackRef(null, onRefUpdate);
|
||||
// ...
|
||||
<SomeNewComponent ref={refObject}/>
|
||||
```
|
||||
|
||||
## assignRef
|
||||
|
||||
🤔 Use case: every time you need to assign ref manually, and you dont know the shape of the ref
|
||||
|
||||
`assignRef(ref, value)` - assigns `values` to the `ref`. `ref` could be RefObject or RefCallback.
|
||||
|
||||
```
|
||||
🚫 ref.current = value // what if it's a callback-ref?
|
||||
🚫 ref(value) // but what if it's a object ref?
|
||||
|
||||
import {assignRef} from "use-callback-ref";
|
||||
✅ assignRef(ref, value);
|
||||
```
|
||||
|
||||
## useTransformRef (to replace React.useImperativeHandle)
|
||||
|
||||
🤔 Use case: ref could be different.
|
||||
`transformRef(ref, tranformer):Ref` - return a new `ref` which would propagate all changes to the provided `ref` with applied `transform`
|
||||
|
||||
```js
|
||||
// before
|
||||
const ResizableWithRef = forwardRef((props, ref) => <Resizable {...props} ref={(i) => i && ref(i.resizable)} />);
|
||||
|
||||
// after
|
||||
|
||||
const ResizableWithRef = forwardRef((props, ref) => (
|
||||
<Resizable {...props} ref={transformRef(ref, (i) => (i ? i.resizable : null))} />
|
||||
));
|
||||
```
|
||||
|
||||
## refToCallback
|
||||
|
||||
`refToCallback(ref: RefObject): RefCallback` - for compatibility between the old and the new code.
|
||||
For the compatibility between `RefCallback` and RefObject use `useCallbackRef(undefined, callback)`
|
||||
|
||||
## useMergeRefs
|
||||
|
||||
`mergeRefs(refs: arrayOfRefs, [defaultValue]):ReactMutableRef` - merges a few refs together
|
||||
|
||||
When developing low level UI components, it is common to have to use a local ref but also support an external one using React.forwardRef. Natively, React does not offer a way to set two refs inside the ref property. This is the goal of this small utility.
|
||||
|
||||
```js
|
||||
import React from 'react';
|
||||
import { useMergeRefs } from 'use-callback-ref';
|
||||
|
||||
const MergedComponent = React.forwardRef((props, ref) => {
|
||||
const localRef = React.useRef();
|
||||
// ...
|
||||
// both localRef and ref would be populated with the `ref` to a `div`
|
||||
return <div ref={useMergeRefs([localRef, ref])} />;
|
||||
});
|
||||
```
|
||||
|
||||
💡 - `useMergeRefs` will always give you the same return, and you don't have to worry about `[localRef, ref]` unique every render.
|
||||
|
||||
## mergeRefs
|
||||
|
||||
`mergeRefs(refs: arrayOfRefs, [defaultValue]):ReactMutableRef` - merges a few refs together
|
||||
is a non-hook based version. Will produce the new `ref` every run, causing the old one to unmount, and be _populated_ with the `null` value.
|
||||
|
||||
> mergeRefs are based on https://github.com/smooth-code/react-merge-refs, just exposes a RefObject, instead of a callback
|
||||
|
||||
`mergeRefs` are "safe" to use as a part of other hooks-based commands, but don't forget - it returns a new object every call.
|
||||
|
||||
# Similar packages:
|
||||
|
||||
- [apply-ref](https://github.com/mitchellhamilton/apply-ref) - `applyRefs` is simular to `mergeRef`, `applyRef` is similar to `assignRef`
|
||||
- [useForkRef](https://react-hooks.org/docs/use-fork-ref) - `useForkRef` is simular to `useMergeRefs`, but accepts only two arguments.
|
||||
- [react-merge-refs](https://github.com/gregberge/react-merge-refs) - `merge-refs` is simular to `useMergeRefs`, but not a hook and does not provide "stable" reference.
|
||||
|
||||
---
|
||||
|
||||
> Is it a rocket science? No, `RefObject` is no more than `{current: ref}`, and `use-callback-ref` is no more than `getter` and `setter` on that field.
|
||||
|
||||
# License
|
||||
|
||||
MIT
|
||||
85
node_modules/use-callback-ref/package.json
generated
vendored
Normal file
85
node_modules/use-callback-ref/package.json
generated
vendored
Normal file
@@ -0,0 +1,85 @@
|
||||
{
|
||||
"name": "use-callback-ref",
|
||||
"version": "1.3.3",
|
||||
"description": "The same useRef, but with callback",
|
||||
"main": "dist/es5/index.js",
|
||||
"jsnext:main": "dist/es2015/index.js",
|
||||
"module": "dist/es2015/index.js",
|
||||
"types": "dist/es5/index.d.ts",
|
||||
"module:es2019": "dist/es2019/index.js",
|
||||
"sideEffects": false,
|
||||
"scripts": {
|
||||
"dev": "lib-builder dev",
|
||||
"test": "jest",
|
||||
"test:ci": "jest --runInBand --coverage",
|
||||
"build": "lib-builder build && yarn size:report",
|
||||
"release": "yarn build && yarn test",
|
||||
"size": "npx size-limit",
|
||||
"size:report": "npx size-limit --json > .size.json",
|
||||
"lint": "lib-builder lint",
|
||||
"format": "lib-builder format",
|
||||
"update": "lib-builder update",
|
||||
"prepublish": "yarn build && yarn changelog",
|
||||
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
|
||||
"changelog:rewrite": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
|
||||
},
|
||||
"repository": "https://github.com/theKashey/use-callback-ref/",
|
||||
"author": "theKashey <thekashey@gmail.com>",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"tslib": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@size-limit/preset-small-lib": "^11.0.2",
|
||||
"size-limit": "^11.0.2",
|
||||
"@testing-library/jest-dom": "^6.1.5",
|
||||
"@testing-library/react": "^14.1.2",
|
||||
"@theuiteam/lib-builder": "^0.3.0",
|
||||
"jest-environment-jsdom": "^29.7.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"keywords": [
|
||||
"react",
|
||||
"hook",
|
||||
"useRef",
|
||||
"createRef",
|
||||
"merge refs"
|
||||
],
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "lint-staged"
|
||||
}
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{ts,tsx}": [
|
||||
"prettier --write",
|
||||
"eslint --fix",
|
||||
"git add"
|
||||
],
|
||||
"*.{js,css,json,md}": [
|
||||
"prettier --write",
|
||||
"git add"
|
||||
]
|
||||
},
|
||||
"prettier": {
|
||||
"printWidth": 120,
|
||||
"trailingComma": "es5",
|
||||
"tabWidth": 2,
|
||||
"semi": true,
|
||||
"singleQuote": true
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user