loilo

Draftlog with Vue Reactivity

Draftlog is a great tool for creating rich terminal logging experiences. However, using it feels kind of imperative when coming from a data-driven frontend world (insofar as you have to decide on your own when to re-apply data and call the draft function again).

This little code snippet marries Draftlog with the @vue/reactivity (one of the earlier implementation of the signals pattern in the web development world).

You basically keep using console.draft() just as before, but you can pass it reactive data which will cause the draft to update automatically when that data changes.

loilo

import { createFilter } from '@rollup/pluginutils'
import got from 'got'
import MagicString from 'magic-string'
import path from 'node:path'
import revisionHash from 'rev-hash'

function escapeRegex(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
}

loilo

Simple .zip file generation with JavaScript using JSZip

The zipTree function exported from this module takes a file tree object and creates a zip object from it using JSZip (which you need to install first via npm install jszip):

// A tree is just a collection of file names mapped to their contents
let data = {
  // Use a string for text content
  'file.txt': '...file content...',

loilo

To the extent possible under law, Florian Reuschel

loilo

/**
 * Find nodes via XPath
 *
 * @param {string} query
 * @param {Node} root 
 * @returns {Node[]}
 */
export function xpath(query, root = document) {
  let iterator = document.evaluate(query, document)

loilo

// 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' }

/**

loilo

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

loilo

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) {

loilo

# 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

loilo

// 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()