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)
})

crutchcorn

A note on framework specifics

As a final note, before I send you into the rest of the book/course, I want to touch on a few points about these frameworks:

• React has two different ways of writing code: Using classes and "Hooks".

While React classes are more similar to Angular or Vue's Option API, I've decided to write this book/course using React's "Hooks" method as references for the components.

This is because, while classes are still a part of the most modern versions of React, they've drastically fallen out of favor in comparison to React Hooks. I want to try to make this book representative of real-world codebases you're likely to run into with modern versions of these frameworks, so I thought it only made sense to go with Hooks.

crutchcorn

function treeByLevels (rootNode) {
  let sortedArr = []
  if (!rootNode) return sortedArr;

  sortedArr.push(rootNode.value);
  let toReadAfter = [];
  currNode = rootNode;
  while (currNode) {
    currNode.left && sortedArr.push(currNode.left.value);
    currNode.right && sortedArr.push(currNode.right.value);