Skip to content

Instantly share code, notes, and snippets.

Avatar
📒
Writing like whoa

Corbin Crutchley crutchcorn

📒
Writing like whoa
View GitHub Profile
@crutchcorn
crutchcorn / inference.ts
Last active September 10, 2023 22:53
known working examples of TS generics inferencing
View inference.ts
function identity<T>(arg: T): T {
return arg;
}
const val = identity(1 as const);
// ^ 1
// ---------------------- Works with classes too ---------------------------------------------
class IdentityWithMeta<T> {
View loosen.ts
/**
* ["a", "b", "c"] => ["a" | "b" | "c", "a" | "b" | "c", "a" | "b" | "c"]
*
* Assumes keys are unique
*/
export type LoosenTuple<
Arr extends readonly any[],
OriginalArr extends readonly any[] = Arr,
> = Arr extends readonly [unknown, ...infer Tail]
? readonly [OriginalArr[number], ...LoosenTuple<Tail, OriginalArr>]
View package.json
{
"name": "@mitosis.template/templating-base",
"version": "0.0.1",
"description": "",
"repository": {
"type": "git",
"url": "git+https://github.com/crutchcorn/mitosis-template.git"
},
"bugs": {
"url": "https://github.com/crutchcorn/mitosis-template/issues"
@crutchcorn
crutchcorn / app.component.html
Created June 4, 2023 16:07
Weird framework idea
View app.component.html
<button data-on-click="updateCount()">Count</button>
<p>Count: {{count.value}}</p>
<p>Double: {{double.value}}</p>
<p data-if="count.value % 2 === 0">{{count.value}} is even</p>
<p data-if="count.value % 2 !== 0">{{count.value}} is odd</p>
<Child/>
@crutchcorn
crutchcorn / setTimeoutGrossPolyfill.js
Created May 29, 2023 10:04
Eww, a JS-only setTimeout polyfill??
View setTimeoutGrossPolyfill.js
globalThis.setTimeout = (cb, num) => {
const start = Date.now();
function loop() {
return new Promise((resolve) => {
queueMicrotask(() => {
const now = Date.now();
const diff = now - start;
if (diff < num) {
loop()
@crutchcorn
crutchcorn / after.js
Created March 26, 2023 07:04
Used in a Twitter thread
View after.js
// ...
let theme = document.documentElement.className;
toggleButtonIcon(theme);
themeToggleBtn.addEventListener('click', () => {
theme = theme === 'light' ? 'dark' : 'light';
toggleButtonIcon(theme);
});
View minimal-angular-from-scratch.js
class Zone {
constructor() {
this.tasks = [];
}
// Add a new task to the zone
add(task) {
this.tasks.push(task);
}
View tabs-border-roundness.css
ul.tabs__tab-list:has(> .tabs__tab:first-child:not([aria-selected="true"]))
~ .tabs__tab-panel {
border-radius: var(--code-block-corner-radius_inner);
}
ul.tabs__tab-list:has(> .tabs__tab:first-child[aria-selected="true"])
~ .tabs__tab-panel {
border-radius: 0 var(--code-block-corner-radius_inner)
var(--code-block-corner-radius_inner);
}
@crutchcorn
crutchcorn / react-add-children-to-component
Created November 16, 2022 04:46
A TypeScipt type to add children to older React components that don't have children declared
View react-add-children-to-component
import { ComponentType, PropsWithChildren } from "react";
import { Text } from "react-native";
import { Wrapper } from "aws-amplify-react-native";
// 🪄 This is the magic
type AddChildrenToComponent<T> = T extends ComponentType<infer P>
? ComponentType<PropsWithChildren<P>>
: never;
const WrapperWithChildren = Wrapper as AddChildrenToComponent<typeof Wrapper>;
View fill-route.ts
// OK
const firstRoute = ":test"; // Or ":test/" or "/:test" or "other/:test", etc
fillRoute(firstRoute, {
test: "hello",
});
// Type error - not enough params
const secondRoute = ":test/:other";
fillRoute(secondRoute, {
test: "hello",