Replace wildcard imports with specific named imports:
// ❌ Before
import * as React from "react";| export function Form() { | |
| const [isPending, startTransition] = useTransition() | |
| return ( | |
| <form | |
| onSubmit={(event) => { | |
| event.preventDefault() | |
| const formData = new FormData(event.currentTarget) | |
| startTransition(async () => { | |
| await someAction(formData) | |
| }) |
With following context, refactor React components
Minimalistic Deps:
import * as React from "react" things to import { useState, use, ... } from React only required in the codePrefer safe prop interface:
React.*HTMLAttributes to ComponentPropsWithRef<*>props: A & B found, convert to interface Props extends A, B {} shapeRemove legacy forwardRef API:
| // copied from https://github.com/facebook/react/blob/8e60bacd08215bd23f0bf05dde407cd133885aa1/packages/react/src/ReactCacheImpl.js#L50 | |
| // but no react context | |
| const rootCacheNode = new WeakMap<(...args: any[]) => any, CacheNode>(); | |
| const UNTERMINATED = 0; | |
| const TERMINATED = 1; | |
| const ERRORED = 2; | |
| type CacheNode = { |
React 컴포넌트에서 컨트랙트를 호출하는 다음과 같은 코드가 있다고 가정해봅시다.
function buildCreateTokenTransaction({
name,
symbol,
caipChainID,
creatorAddress,
}: {
caipChainID: CAIPChainID;| // you can run this on latest chrome browser and copy the result | |
| function arrayBufferToString(buffer) { | |
| const bytes = new Uint8Array(buffer) | |
| const len = bytes.byteLength | |
| // @anonrig: V8 has a limit of 65535 arguments in a function. | |
| // For len < 65535, this is faster. | |
| // https://github.com/vercel/next.js/pull/56377#pullrequestreview-1656181623 | |
| if (len < 65535) { |
gacm (Git Add Commit Merge) is a Zsh function that simplifies the process of adding, committing, and optionally pushing Git changes. It combines git add ., git commit -m, and (optionally) git push into a single command, with an additional option for force push.
Add the following function to your ~/.zshrc file:
| import { expect, test } from "vitest"; | |
| import { render, screen } from "@testing-library/react"; | |
| import { | |
| FormDescription, | |
| FormError, | |
| FormField, | |
| FormInput, | |
| FormLabel, |
| import { mock } from "bun:test"; | |
| import { ReadonlyRequestCookies } from "next/dist/server/web/spec-extension/adapters/request-cookies"; | |
| export function mockNextjsReadonlyCookie() { | |
| mock.module("next/headers", () => { | |
| const cookieMap = new Map<string, { name: string; value: string }>(); | |
| const cookies: ReadonlyRequestCookies = { | |
| get: (nameOrCookie: string | { name: string }) => { | |
| const name = | |
| typeof nameOrCookie === "string" ? nameOrCookie : nameOrCookie.name; |