Anurag Hazra anuraghazra

Variables

const shade = 100;
type Shade = 100;

Functions

The Goal:

Build a select component which follows the aria best practices. Select component should be composable, flexible, accessible & renderless.

The single select will follow WAI-ARIA specs for the list box pattern. These are the key resources we need to create this Select.

In these two files if you change getToken{slow,fast}'s passed value (just add a random letter anywhere) you'll see that the fast version is getting type checked about 3x to 5x faster than the slow one.

I'm not sure why using key remapping and using keyof {} is about 3x to 5x faster when doing type checking.

My guess is that in the slow version is using index access with the {}[keyof Theme] which is generally slower?

Slow version: https://tsplay.dev/WJ4bRN
Fast version: https://tsplay.dev/w24J4m

Network Requests

There are a few ways to get info from an API

What is `await`?

'''ts const response = await fetch("mysite.com/api/dogs")

List of interesting github discussions and threads

[Concurrent] Safely disposing uncommitted objects facebook/react#15317 (comment)

	{
	"button": {
	"base": "",
	"variant": {
	"ghost": "lib:text-red-800",
	"secondary": "lib:bg-gray-100 lib:text-gray-800",
	"outline": "lib:border lib:border-gray-300 lib:text-gray-800",
	"primary": "lib:bg-red-800 lib:text-red-200"
	},
	"size": {

	// TypeSafe classnames package
	type IsNever<T> = [T] extends [never] ? true : false;
	type TruthyKind = Record<string, boolean>;
	type StringOrTruthy = string \| TruthyKind \| unknown;

	/**
	* Filter tuple by type (ignore never type)
	*
	* - Filter<["bg", never], string> -> ["bg"]
	*/

	{
	"Experiments": [
	["https://github.com/anuraghazra/AnuReact", "AnuReact (minimal react clone)"],
	["https://codesandbox.io/s/css-in-graphql-5h2xw", "CSS-in-GraphQL"],
	["https://github.com/anuraghazra/react-folder-tree", "React Folder Tree Component"],
	["https://codesandbox.io/s/react-custom-canvas-renderer-kmxw9", "React Custom Canvas Renderer"],
	["https://codesandbox.io/s/fade-component-5mpbj", "Minimal react fade component"],
	["https://codesandbox.io/s/verlyjs-react-w5kfr", "Verly.js React Integration"],
	["https://codesandbox.io/s/react-pubsub-gdf7l", "React PubSub"],
	["https://codesandbox.io/s/react-notification-component-customevents-rcd3o", "React toast component experiment"],

	// magic!
	function dom<Props extends Record<string, unknown>>(
	str: TemplateStringsArray,
	...args: string[] \| ((props: Props) => string)[]
	) {
	const interleaved = args.flatMap((arg, index) => {
	return [arg, str[index + 1]];
	});

	return (props?: Props) =>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Gist</title>
	<link rel="stylesheet" href="./style.css">
	</head>
	<body>