Skip to content

Instantly share code, notes, and snippets.

Avatar

Jonathan Neal jonathantneal

View GitHub Profile
@jonathantneal
jonathantneal / CSSStyleObserver.js
Created Apr 7, 2022
CSS Style Observer (695 bytes minified, 397 bytes gzipped)
View CSSStyleObserver.js
class CSSStyleRecord {
constructor(
/** @type {{ target: Element, propertyName: string, oldValue: string, newValue: string }} */
init
) {
Object.assign(this, init)
}
}
class CSSStyleObserver {
@jonathantneal
jonathantneal / HTMLElement-contentAvailableCallback.js
Last active Nov 22, 2021
HTMLElement with contentAvailableCallback (483 bytes / 317 gzip / 252 brotli, CC0-1.0)
View HTMLElement-contentAvailableCallback.js
{
let NativeHTMLElement = globalThis.HTMLElement, isContentAvailable = (element) => {
if (element.ownerDocument.readyState !== 'loading') return true
while (element) {
if (element.nextSibling) return true
element = element.parentElement
}
}
@jonathantneal
jonathantneal / glob.ts
Created Nov 2, 2021
Return a list of files, like import.meta.glob in Vite, without calling the files.
View glob.ts
import glob from 'fast-glob'
import nodeURL from 'url'
import process from 'process'
/** Returns pathnames matching the given pattern. */
const sync = (source: string) => glob.sync(source, options()) as string[]
/** Returns pathnames matching the given pattern. */
const async = (source: string) => glob(source, options()) as Promise<string[]>
@jonathantneal
jonathantneal / README.sh
Last active Oct 29, 2021
Useful Brew Installs (macOS Homebrew)
View README.sh
# Brew Package Manager
# --------------------
# Brew
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
# JavaScript & TypeScript runtime
brew install deno
# GitHub manager
@jonathantneal
jonathantneal / Tokens.d.ts
Last active Aug 21, 2021
Tokens — manage space-separated tokens for any attribute — 990 bytes / 498 bytes gzipped
View Tokens.d.ts
/**
* The **Tokens** interface represents a set of space-separated tokens.
*
* **Usage**:
* ```js
* let classTokens = new Tokens(document.body, 'class')
* classTokens.has('js') // boolean
* classTokens.add('js').has('js') // true
* classTokens.remove('js').has('js') // false
* ```
@jonathantneal
jonathantneal / command.js
Last active Mar 19, 2022
Executable JavaScript Modules
View command.js
":" //#;exec /usr/bin/env node --input-type=module - $@<$0
import process from 'process'
const { argv } = process
console.log(argv)
@jonathantneal
jonathantneal / README.md
Last active Jul 20, 2021
React Custom Elements
View README.md

React Custom Elements

Use Web Components as React Components.

Usage

Import reactCustomElements as a module:

import * as reactCustomElements from 'https://gist.githack.com/jonathantneal/b3df57a4c59cd70e0d18437352586794/raw/reactCustomElements.esm.min.js'
@jonathantneal
jonathantneal / getUniqueSelector.js
Last active Apr 7, 2022
getUniqueSelector — Return a unique selector for a specific element (151 bytes minified, 144 bytes gzipped)
View getUniqueSelector.js
/** Return a unique selector for a specific element. */
let getUniqueSelector = (/** @type {Element} */ element) => {
/** Unique selector for this element */
let selector = ''
/** @type {Element} */
let parent
/** @type {number} */
let nth
@jonathantneal
jonathantneal / index.xml
Last active Jun 3, 2021
Example XML webpage
View index.xml
<!DOCTYPE xml [
<!ATTLIST xsl:stylesheet
id ID #FIXED '!'
xmlns:xsl CDATA #FIXED 'http://www.w3.org/1999/XSL/Transform'
version CDATA #FIXED '1.0'
>
<!ATTLIST xsl:output
doctype-system CDATA #FIXED 'about:legacy-compat'
method CDATA #FIXED 'html'
>
@jonathantneal
jonathantneal / esbuild-loader.js
Last active Jun 15, 2021
Node — Loads modules using esbuild. — `node --experimental-loader ./esbuild-loader.js`
View esbuild-loader.js
import { existsSync } from 'fs'
import { readFile } from 'fs/promises'
import { transform } from 'esbuild'
/** @typedef {{ conditions: string[], parentURL: string }} Context */
/** @typedef {(specifier: string, context: Context, defaultResolve: ResolveHook) => { url: string }} ResolveHook */
/** @typedef {(url: string, context: Context, defaultGetFormat: GetFormatHook) => { format: string }} GetFormatHook */
/** @typedef {(url: string, context: Context, defaultGetSource: GetSourceHook) => Promise<{ source: string | SharedArrayBuffer | Uint8Array }>} GetSourceHook */
/** Matches any JavaScript/TypeScript module. */