View use-element-breakpoints.ts
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
// useElementBreakpoints is a Vue 3 composable that matches an element's width (or height) against a set of predefined breakpoints | |
// It needs @vueuse/core to be installed and uses an equivalent breakpoints input as well as an equivalent returned API | |
import { computed, Ref } from 'vue' | |
import { useElementSize, MaybeElementRef } from '@vueuse/core' | |
export type Breakpoints<K extends string = string> = Record<K, number> | |
export type ElementBreakpointsOptions = { dimension: 'width' | 'height' } | |
/** |
View use-query-selector.js
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
import { readonly, ref, watch } from 'vue' | |
import { useMutationObserver } from '@vueuse/core' | |
export function useQuerySelector(selector, { root = document } = {}) { | |
selector = ref(selector) | |
root = ref(root) | |
const result = ref(null) | |
// Find first matching element inside a root element |
View serialize-console-log.js
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
function serializeConsoleLog(...args) { | |
let result = [] | |
// Format if first argument is a string | |
if (typeof args[0] === 'string') { | |
let formattedMessage = args.shift().replace(/%[csdifoO]/g, (match) => { | |
// Keep raw token if no substitution args left | |
if (args.length === 0) return match | |
switch (match) { |
View shorten-path.ps1
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
# Shorten a path in PowerShell by omitting segments from the beginning. | |
# Parameter defaults are designed to be used in a prompt. | |
# Requires at least PowerShell Core 7. | |
function shorten-path { | |
<# | |
.SYNOPSIS | |
Shortens a path from the end. | |
.DESCRIPTION |
View contenteditable-caret-position.js
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
// Some utilities for detecting the caret position inside a contenteditable element | |
/** | |
* Get the number of characters in an element | |
* | |
* @param {Element} element | |
* @return {number} | |
*/ | |
function getTextLength(element) { | |
let range = element.ownerDocument.createRange() |
View parse-filesize.php
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
<?php | |
/** | |
* Parse a filesize to its number of bytes | |
* | |
* @param string|int|float $input | |
* @param int $base | |
* @return int | |
* | |
* @see https://github.com/patrickkettner/filesize-parser, the original JavaScript implementation of this function |
View bitmask-to-array.mjs
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
/** | |
* Convert a bitmask to an array of its individual bits | |
* | |
* @param {number} bitmask The bitmask to dissect | |
* @return {number[]} | |
* | |
* @example | |
* assert.equal(bitmaskToArray(0b101), [0b100, 0b001]) | |
*/ | |
export function bitmaskToArray(bitmask) { |
View use-terminal-size.ts
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
import { useEffect, useState } from 'react' | |
/** | |
* React hook which provides the size of the terminal, based on https://usehooks.com/useWindowSize/ | |
* Great for usage with Ink (https://npmjs.com/package/ink) | |
*/ | |
export function useTerminalSize() { | |
const [terminalSize, setTerminalSize] = useState([ | |
process.stdout.columns, | |
process.stdout.rows |
View readme.md
Async Computed Values for Vue 3
This gist provides a useAsyncComputed
function which allows to create asynchronous dependencies on reactive values (using Vue 3's Composition API).
Requires at least Vue 3.0 and TypeScript 4.0.
Usage
Basic Usage
NewerOlder