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

crutchcorn

@Injectable()
class CloseIfOutSideContext implements OnDestroy {
  getCloseIfOutsideFunction = (contextMenu: ElementRef<HTMLElement>, close: EventEmitter<any>) => {
    return (e: MouseEvent) => {
      const contextMenuEl = contextMenu?.nativeElement;
      if (!contextMenuEl) return;
      const isClickInside = contextMenuEl.contains(e.target as HTMLElement);
      if (isClickInside) return;
      close.emit();
    }

crutchcorn

const useWindowSize = () => {
    // This doesn't handle resizes or SSR, only used for demos
    const [height, setHeight] = useState(window.innerHeight);
    const [width, setWidth] = useState(window.innerWidth);
  
    return {height, width};
}

crutchcorn

let theme = document.documentElement.className;
toggleButton(theme);

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

  toggleButton(theme);
  localStorage.setItem(COLOR_MODE_STORAGE_KEY, theme)
})