chaance

import * as React from "react";
import { useLocation, useTransition } from "remix";

function RouteAnnouncement({ getTitle = defaultGetTitle }) {
  let location = useLocation();
  let transition = useTransition();
  let liveRegionRef = React.useRef(null);

  React.useEffect(() => {
    liveRegionRef.current = document.createElement("div");

chaance

const DIRECTIVES = [
	/**
	 * If there is currently a local scope or no scope, the :root directive will
	 * revert to using only the top-level scope if one is defined.
	 *
	 * @example
	 *
	 * @simple-scope;
	 *

chaance

html {
	box-sizing: border-box;
	tab-size: 4;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
	  sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

*,

chaance

{
	"name": "blah/blah",
	"type": "wordpress-theme",
	"authors": [
		{
			"name": "Chance Strickland",
			"email": "hi@chance.dev"
		}
	],
	"require": {

chaance

type SomeProps =
  | { action: "START" }
  | { action: "STOP"; time: number }
  | { action: "PAUSE"; time: number; ref: { current: any } };

function useExample(props: SomeProps) {
  let {
    action, // "START" | "STOP" | "PAUSE"
    time, // number | undefined,
    ref // { current: any } | undefined

chaance

function useAccessibleRouting(skipLinkRef) {
	let location = useLocation();
	let liveRegionRef = React.useRef();

	React.useEffect(
		/**
		 * Create a live region that will be used to announce route changes when the
		 * user navigates. This hook should be called from the root App component,
		 * so this should be created and appended to the DOM only once.
		 */

chaance

type LinkProps<T extends { href: any }> = T extends { href: infer U }
	// If our `href` prop starts with a given substring, we might
	// determine that we have an external link and filter internal
	// routing-related props. This could just as easily work in reverse!
	? U extends `https://${string}` | `http://${string}`
		? ExternalLinkProps
		: InternalLinkProps
	: never;

chaance

// For Reference
import * as React from 'react'
import * as ReactDOM from 'react-dom'

const states: any[] = []
let calls = -1

function useState<S>(value: S) {
  const call = ++calls

chaance

// With template literal types this kind of thing is a breeze! 
type RootActionPrefix = 'auth';
type ActionType = 'LOGIN' | 'LOGOUT';
type RootActionTypes = `${RootActionPrefix}/${ActionType}`;


// Is there any sort of mapped-type magic that would let me
// turn this...
type AuthActions = 
  | { type: 'LOGIN'; user: UserNoPassword }

chaance

describe("when navigating between focused buttons", () => {
  let buttons: HTMLElement[];
  beforeAll(() => {
    let rendered = renderTestAccordion();
    buttons = rendered.buttons;
  });

  it("should move focus to the next focusable button on `ArrowDown` press", () => {
    // document.activeElement is the body here, cool
    buttons[0].focus();