crutchcorn

function identity<T>(arg: T): T {
  return arg;
}

const val = identity(1 as const);
   // ^ 1

// ---------------------- Works with classes too ---------------------------------------------

class IdentityWithMeta<T> {

crutchcorn

/**
 * ["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>]

crutchcorn

{
  "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

<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

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

// ...
let theme = document.documentElement.className;
toggleButtonIcon(theme);

themeToggleBtn.addEventListener('click', () => {
  theme = theme === 'light' ? 'dark' : 'light';

  toggleButtonIcon(theme);
});

crutchcorn

class Zone {
    constructor() {
        this.tasks = [];
    }

    // Add a new task to the zone
    add(task) {
        this.tasks.push(task);
    }

crutchcorn

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

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>;

crutchcorn

// 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",