jonathantneal

":" //#;exec /usr/bin/env node --input-type=module - $@<$0

import process from 'process'

const { argv } = process

console.log(argv)

jonathantneal

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

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

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. */

jonathantneal

if (globalThis.CSSStyleSheet) try {
	new CSSStyleSheet
} catch (error) {
	globalThis.CSSStyleSheet = ((
		{ prototype } = CSSStyleSheet,
		styledoc = document.implementation.createDocument(
			'http://www.w3.org/1999/xhtml',
			'style',
		),
		{ firstChild } = styledoc,

jonathantneal

/** Observes stylesheet lists and runs a callback whenever it encounteres added or removed stylesheets. */
export const createStyleSheetObserver = (/** @type {(addedSheets?: CSSStyleSheet[], removedSheets?: CSSStyleSheet[]) => void} */ callback) => {
	/** @type {Set<StyleSheetList>} Observed style sheet lists. */
	const sheetLists = new Set
	/** @type {Set<CSSStyleSheet>} Previously observed style sheets. */
	let lastSheets = new Set
	/** Observes style sheet on each animation frame. */
	const onAnimationFrame = () => {
		requestAnimationFrame(onAnimationFrame)
		/** @type {CSSStyleSheet[]} Observed StyleSheets after this frame. */

jonathantneal

CSS Container Queries Notes

Detecting a layout container

1. If the target rule represents a style rule;
2. If the target rule style contains a fallback contain property; 1. If the fallback contain property represents a layout container;
   1. For each element matching the selector of the target rule;
   2. Add the element to the list of layout containers, then;
   3. Add a fallback layout containment rule for that specific element.

jonathantneal

[
  "align-content",
  "align-items",
  "align-self",
  "alignment-baseline",
  "all",
  "animation",
  "animation-delay",
  "animation-direction",
  "animation-duration",

jonathantneal

function deepAssign(objectA, objectB) {
	for (var n in objectB) {
		var objectBN = objectB[n]

		if (objectBN === Object(objectBN)) {
			var objectAN = objectA[n]

			if (objectAN === Object(objectAN)) {
				objectA[n] = deepAssign(objectAN, objectBN)

jonathantneal

export default new Proxy(
	Object.entries({
		reset: 0,
		bold: 1,
		dim: 2,
		underline: 4,
		blink: 5,
		invert: 7,
		hidden: 8,
		black: 30,