anthowave

Codesandbox demo

anthowave

const COUNTRY_CODES = {
  "US": "United of States",
  "CA": "Canada",
  "GB": "United Kingodm",
};

// type definition

type CountryCode = keyof typeof COUNTRY_CODES;    // equivalent to: type CountryCode = "US" | "CA" | "GB";
type CountryName = typeof COUNTRY_CODES[CountryCode]; // equivalent to: type CountryName = "United of States" | "Canada" | "United Kingdom";

anthowave

Package/library docs mostly come as static site.

Here are the list of useful SSGs(static site generator):

React

• Next.js
• Gatsby.js
• React-static

Vue

anthowave

Create New App

JavaScript Template

npx create-react-app@next --scripts-version=@next --template=cra-template@next my-js-app

TypeScript Template

npx create-react-app@next --scripts-version=@next --template=typescript@next my-ts-app

anthowave

Problem

How to extract the merged arguments of an array of functions? And also the merged results of those functions?

https://www.typescriptlang.org/play?#code/C4TwDgpgBAQghgZwgQQE4HMFQLxQN4C+AUKJLIhAEoRa6FFECWAdsBKgGZwDG0AYgEY0mKBAAebZgBMs8JMKx4iUKBwEA5OAFsIALigJgqFuiLEWbTj34DqWcZJnkkd-MtUD9h481PFSNjhQABRwGAj6ggoAlDgAfFCCdgwW7Fy8iQBMCqISENKyFDlKKhyZmjpeRiZmTKxp1lmuDvlOclQ0bqWZVT5+JOD8mUGh4ZHZ4bHYCXyZyQwBicy0UADaggA0WQC6DAD0ewYAFgD2AK4ANlJQAEZ6iULhUABkWQoDZACy7OgQUjm4AD8wKgRAOx3OV1u9ySnVes2Si2+GD+riBwKAA

(Source from https://twitter.com/flybayer/status/1316844216199372801)

Solution

anthowave

import React from 'react'

export default function CountdownTimer({ startSeconds }) {

  const [seconds, setSeconds] = React.useState(startSeconds);

  const timeoutCallback = React.useCallback(() => {
    if(seconds >= 1)
      setSeconds(seconds - 1);
  }, [seconds]);

anthowave

export default function createCrudHooks({
  baseKey,
  indexFn,
  singleFn,
  createFn,
  updateFn,
  deleteFn,
}) {
  const useIndex = (config) => useQuery([baseKey], indexFn, config)
  const useSingle = (id, config) =>

anthowave

const stringLitArray = <L extends string>(arr: L[]) => arr;
const linkTypes = stringLitArray(['a', 'link']);
export type LinkType = (typeof linkTypes)[number];

const isLinkType = (x: any): x is LinkType => linkTypes.includes(x);

let link = 'a';
if (isLinkType('a')) {
  console.log("The current link is of type 'LinkType'");
}

anthowave

const matchDark = '(prefers-color-scheme: dark)'

function useDarkMode() {
  const [isDark, setIsDark] = React.useState(
    () => window.matchMedia && window.matchMedia(matchDark).matches
  );

  React.useEffect(() => {
    const matcher = window.matchMedia(matchDark);
    const onChange = ({ matches }) => setIsDark(matches);

anthowave

function* search(node) {
  if (!node) return;
  yield node;
  yield* search(node.firstChild);
  yield* search(node.nextSibling);
}

// example usage
for (let node of search(document)) {
  if (node.localName === 'title') {