const shade = 100;
type Shade = 100;
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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": { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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"] | |
*/ |
- [Concurrent] Safely disposing uncommitted objects facebook/react#15317 (comment)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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"], |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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) => |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
NewerOlder