-
-
Notifications
You must be signed in to change notification settings - Fork 35
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: utils package * [autofix.ci] apply automated fixes * Delete vite.config.ts
- Loading branch information
1 parent
052417d
commit f48ed78
Showing
15 changed files
with
4,386 additions
and
8,823 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
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
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
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
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,10 @@ | ||
# `@oku-ui/utils` | ||
|
||
## Installation | ||
|
||
```sh | ||
$ pnpm add @oku-ui/utils | ||
``` | ||
|
||
## Usage | ||
... |
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,40 @@ | ||
{ | ||
"name": "@oku-ui/utils", | ||
"type": "module", | ||
"version": "0.0.0", | ||
"license": "MIT", | ||
"source": "src/index.ts", | ||
"funding": "https://github.com/sponsors/productdevbook", | ||
"homepage": "https://oku-ui.com/primitives", | ||
"repository": { | ||
"type": "git", | ||
"url": "git+https://github.com/oku-ui/primitives.git" | ||
}, | ||
"bugs": { | ||
"url": "https://github.com/oku-ui/c/issues" | ||
}, | ||
"exports": { | ||
".": { | ||
"types": "./dist/index.d.ts", | ||
"require": "./dist/index.cjs", | ||
"import": "./dist/index.js" | ||
} | ||
}, | ||
"main": "dist/index.cjs", | ||
"module": "dist/index.js", | ||
"types": "dist/index.d.ts", | ||
"files": [ | ||
"dist", | ||
"README.md" | ||
], | ||
"scripts": { | ||
"clean": "rm -rf dist", | ||
"build": "tsup --dts", | ||
"dev": "tsup --watch", | ||
"lint": "eslint .", | ||
"lint:fix": "eslint . --fix" | ||
}, | ||
"devDependencies": { | ||
"tsconfig": "workspace:^" | ||
} | ||
} |
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,5 @@ | ||
export { clamp } from './number' | ||
export { composeEventHandlers } from './primitive' | ||
|
||
export { observeElementRect } from './observeElementRect' | ||
export type { Measurable } from './observeElementRect' |
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,5 @@ | ||
function clamp(value: number, [min, max]: [number, number]): number { | ||
return Math.min(max, Math.max(min, value)) | ||
} | ||
|
||
export { clamp } |
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,107 @@ | ||
type Measurable = { getBoundingClientRect(): DOMRect } | ||
|
||
type CallbackFn = (rect: DOMRect) => void | ||
|
||
type ObservedData = { | ||
rect: DOMRect | ||
callbacks: Array<CallbackFn> | ||
} | ||
|
||
let rafId: number | ||
const observedElements: Map<Measurable, ObservedData> = new Map() | ||
|
||
/** | ||
* Observes an element's rectangle on screen (getBoundingClientRect) | ||
* This is useful to track elements on the screen and attach other elements | ||
* that might be in different layers, etc. | ||
*/ | ||
function observeElementRect( | ||
/** The element whose rect to observe */ | ||
elementToObserve: Measurable, | ||
/** The callback which will be called when the rect changes */ | ||
callback: CallbackFn, | ||
) { | ||
const observedData = observedElements.get(elementToObserve) | ||
|
||
if (observedData === undefined) { | ||
// add the element to the map of observed elements with its first callback | ||
// because this is the first time this element is observed | ||
observedElements.set(elementToObserve, { rect: {} as ClientRect, callbacks: [callback] }) | ||
|
||
if (observedElements.size === 1) { | ||
// start the internal loop once at least 1 element is observed | ||
rafId = requestAnimationFrame(runLoop) | ||
} | ||
} | ||
else { | ||
// only add a callback for this element as it's already observed | ||
observedData.callbacks.push(callback) | ||
callback(elementToObserve.getBoundingClientRect()) | ||
} | ||
|
||
return () => { | ||
const observedData = observedElements.get(elementToObserve) | ||
if (observedData === undefined) | ||
return | ||
|
||
// start by removing the callback | ||
const index = observedData.callbacks.indexOf(callback) | ||
if (index > -1) | ||
observedData.callbacks.splice(index, 1) | ||
|
||
if (observedData.callbacks.length === 0) { | ||
// stop observing this element because there are no | ||
// callbacks registered for it anymore | ||
observedElements.delete(elementToObserve) | ||
|
||
if (observedElements.size === 0) { | ||
// stop the internal loop once no elements are observed anymore | ||
cancelAnimationFrame(rafId) | ||
} | ||
} | ||
} | ||
} | ||
|
||
// ======================================================================== | ||
// module internals | ||
|
||
function runLoop() { | ||
const changedRectsData: Array<ObservedData> = [] | ||
|
||
// process all DOM reads first (getBoundingClientRect) | ||
observedElements.forEach((data, element) => { | ||
const newRect = element.getBoundingClientRect() | ||
|
||
// gather all the data for elements whose rects have changed | ||
if (!rectEquals(data.rect, newRect)) { | ||
data.rect = newRect | ||
changedRectsData.push(data) | ||
} | ||
}) | ||
|
||
// group DOM writes here after the DOM reads (getBoundingClientRect) | ||
// as DOM writes will most likely happen with the callbacks | ||
changedRectsData.forEach((data) => { | ||
data.callbacks.forEach(callback => callback(data.rect)) | ||
}) | ||
|
||
rafId = requestAnimationFrame(runLoop) | ||
} | ||
// ======================================================================== | ||
|
||
/** | ||
* Returns whether 2 rects are equal in values | ||
*/ | ||
function rectEquals(rect1: DOMRect, rect2: DOMRect) { | ||
return ( | ||
rect1.width === rect2.width | ||
&& rect1.height === rect2.height | ||
&& rect1.top === rect2.top | ||
&& rect1.right === rect2.right | ||
&& rect1.bottom === rect2.bottom | ||
&& rect1.left === rect2.left | ||
) | ||
} | ||
|
||
export { observeElementRect } | ||
export type { Measurable } |
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,14 @@ | ||
function composeEventHandlers<E>( | ||
originalEventHandler?: (event: E) => void, | ||
ourEventHandler?: (event: E) => void, | ||
{ checkForDefaultPrevented = true } = {}, | ||
) { | ||
return function handleEvent(event: E) { | ||
originalEventHandler?.(event) | ||
|
||
if (checkForDefaultPrevented === false || !((event as unknown) as Event).defaultPrevented) | ||
return ourEventHandler?.(event) | ||
} | ||
} | ||
|
||
export { composeEventHandlers } |
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,8 @@ | ||
import { ref } from 'vue' | ||
|
||
function exampleFn() { | ||
const hello = ref('hello') | ||
return 'example' | ||
} | ||
|
||
export { exampleFn } |
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,9 @@ | ||
{ | ||
"extends": "./../../../tsconfig.json", | ||
"compilerOptions": { | ||
"baseUrl": "." | ||
}, | ||
"include": [ | ||
"./" | ||
] | ||
} |
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,17 @@ | ||
import type { Options } from 'tsup' | ||
|
||
import pkg from './package.json' | ||
|
||
const external = [ | ||
...Object.keys(pkg.dependencies || {}), | ||
...Object.keys(pkg.peerDependencies || {}), | ||
] | ||
|
||
export default <Options>{ | ||
entryPoints: ['src/index.ts'], | ||
outDir: 'dist', | ||
target: 'node16', | ||
format: ['esm', 'cjs'], | ||
dts: true, | ||
external, | ||
} |
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
Oops, something went wrong.