Anurag Hazra anuraghazra

## ts-basic-mental-model.md

      
              1 file
            
          
              6 forks
            
          
              0 comments
            
          
              38 stars
            
          
                anuraghazra
                / ts-basic-mental-model.md
            
            
              Created
              September 12, 2022 17:27
            
          
    Variables

const shade = 100;
type Shade = 100;
Functions


## select-component-rfc.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                anuraghazra
                / select-component-rfc.md
            
            
              Created
              June 24, 2022 06:18
            
          
    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.

https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-scrollable.html
https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html


## readme.md

      
              3 files
            
          
              0 forks
            
          
              0 comments
            
          
              4 stars
            
          
                anuraghazra
                / readme.md
            
            
              Last active
              March 21, 2023 21:06
            
              
                TypeScript TokenizeTheme type performance
              
          
    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


## theme.json
{
  "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": {

## classnames.d.ts
// 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"]
 */

## index.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                anuraghazra
                / index.md
            
            
              Last active
              October 27, 2020 11:48
            
          
    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")

  
## Interesting GitHub Issue Threads.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                anuraghazra
                / Interesting GitHub Issue Threads.md
            
            
              Last active
              October 26, 2020 09:19
            
          
    List of interesting github discussions and threads


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


## goodies.json
{
  "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"],

## minimal-templating-engine.ts
// 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) =>

## index.html
<!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>
	{
	"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>