Florian Reuschel loilo

Unwrap Component for Vue 2 and Vue 3

[Here's a demo](https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCBVbndyYXAgZnJvbSAnLi9VbndyYXAuanMnXG5pbXBvcnQgeyByZWYgfSBmcm9tICd2dWUnXG5cbmxldCBzaW5nbGVMaXN0ID0gcmVmKGZhbHNlKVxuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPGRpdj5cbiAgICA8bGFiZWw+XG4gICAgICA8aW5wdXQgdHlwZT1cImNoZWNrYm94XCIgdi1tb2RlbD1cInNpbmdsZUxpc3RcIiAvPlxuICAgICAgU2luZ2xlIGxpc3RcbiAgICA8L2xhYmVsPlxuXG4gICAgPFVud3JhcCA6aWY9XCIhc2luZ2xlTGlzdFwiPlxuICAgICAgPHVsPlxuICAgICAgICA8VW53cmFwIDppZj1cInNpbmdsZUxpc3RcIj5cbiAgICAgICAgICA8dWw+XG4gICAgICAgICAgICA8bGk+MTwvbGk+XG4gICAgICAgICAgICA8bGk+MjwvbGk+XG4gICAgICAgICAgICA8bGk+MzwvbGk+XG4gICAgICAgICAgPC91bD5cbiAgICAgICAgICA8dWw+XG4gICAgICAgICAgICA8bGk+NDwvbGk+XG4gICAgICAgICAgICA8bGk+NTwvbGk+XG4gICAgICAgICAgICA8bGk+NjwvbGk+XG4gICAgICAgICAgPC91bD5cbiAgICAgICAgPC9VbndyYXA+XG4gICAgICA8L3VsPlxuICAgIDwvVW53cmFwPlxuICA8L2Rpdj5cbjwvdGVtcGxhdGU+IiwiaW1wb3J0LW1hcC5qc29uIjoie1xuICBcImltcG9ydHNcIjoge1xuICAgIFwidnVlXCI6IFwiaHR0cHM6Ly9zZmMudnVlanMub3JnL3Z1ZS5ydW5

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

Sass Dark/Light Theme Mixin

This is a Sass mixin to handle a 3-way dark mode. It relies on a data-theme attribute on your <html> element with a value of light or dark. If data-theme is absent (i.e. it's neither light nor dark), the system's preferred mode is used.

body {
  // matches data-theme="light" or data-theme="auto" with system instructing light mode
  @include light {
    background: white;
 color: black;

	/**
	* Get the number of characters in an element
	*
	* @param {Element} element
	* @return {number}
	*/
	function getTextLength(element) {
	let range = element.ownerDocument.createRange()
	range.selectNodeContents(element)

	<?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

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

	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

	// This userscript redirects you to the English version of a website if it's denoted in the source code.
	// Insert any URLs of websites below (after @match), for example https://developer.mozilla.org/* or https://www.php.net/*
	// Use multiple @match clauses to enable the script on several domains.

	// ==UserScript==
	// @name Redirect to English
	// @namespace http://tampermonkey.net/
	// @version 1.0
	// @description Redirect websites to their English version
	// @author Florian Reuschel <[email protected]>

	<?php

	function walk_dom(DOMNode $domNode, callable $callback): void
	{
	foreach ($domNode->childNodes as $node) {
	$callback($node);

	if ($node->hasChildNodes()) {
	walk_dom($node, $callback);
	}

	<?php
	// In your AppServiceProvider's boot() method, put this:

	Blade::directive('buffer', function () {
	return '<?php ob_start(); ?>';
	});

	Blade::directive('endbuffer', function (string $name) {
	if ($name === '') {
	return '<?php ob_end_clean(); ?>';