Codennnn

Next.js client-only SPA example

Made this example to show how to use Next.js router for a 100% SPA (no JS server) app.

You use Next.js router like normally, but don't define getStaticProps and such. Instead you do client-only fetching with swr, react-query, or similar methods.

You can generate HTML fallback for the page if there's something meaningful to show before you "know" the params. (Remember, HTML is static, so it can't respond to dynamic query. But it can be different per route.)

Don't like Next? Here's how to do the same in Gatsby.

Codennnn

interface LoadingBarProps {
  className?: string
  loading?: boolean
}

export default function LoadingBar(props: LoadingBarProps) {
  return (
    <div className={`relative min-h-[0.25rem] ${props.className ?? ''}`}>
      <div
        className={`absolute inset-x-0 bottom-0 z-20 h-1 overflow-hidden py-[1px] ${

Codennnn

# 以代理端口 7890 为例
git config --global http.https://github.com.proxy socks5h://127.0.0.1:7890

# 取消代理
git config --global --unset http.https://github.com.proxy

Codennnn

import { useRef } from 'react';

type AnyFunction = (...args: any[]) => any;

/**
 * 对目标函数进行 memoized，并保证每次调用目标函数时都是最新的。
 *
 * 当你需要把函数加入诸如 `useEffect` 的 dependencyList，而又不希望函数的 update/recreate 造成 hook 执行，就需要用到此方法。
 */
export function useEvent<T extends AnyFunction | undefined>(callback: T): T {

Codennnn

/**
 * RuntimeGlobalsChecker
 * 
 * You can use this utility to quickly check what variables have been added (or
 * leaked) to the global window object at runtime (by JavaScript code). 
 * By running this code, the globals checker itself is attached as a singleton
 * to the window object as "__runtimeGlobalsChecker__". 
 * You can check the runtime globals programmatically at any time by invoking
 * "window.__runtimeGlobalsChecker__.getRuntimeGlobals()".
 * 

Codennnn

const none = Symbol('lazyRef.Uninitialized')

export default useJitRef(init) {
  const value = useRef(none)
  const ref = useLazyRef(() => ({
    get current() {
      if (value.current === none) {
        value.current = init()
      }
      return value.current

Codennnn

/**
 * 创建表单 shouldUpdate 函数的简易工具方法
 *
 * @param namePath - 要响应变化的表单字段，路径格式与调用 Form.getFieldValue 方法的传参一致
 */
export function shouldFormItemUpdate<Values>(
  namePath: string | (string | number)[]
): (...value: [Values, Values]) => boolean {
  const shouldUpdate = (...value: [Values, Values]) => {
    const [prevValue, curValue] = value;

Codennnn

export function highlightJSON(json: string): string {
  if (!json) {
    return ''
  }

  if (typeof json !== 'string') {
    json = JSON.stringify(json, undefined, 2)
  }

  json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')

Codennnn

import type { FormInstance } from 'antd';
import { Button, Form, Input, Popconfirm, Table } from 'antd';
import React, { useContext, useEffect, useRef, useState } from 'react';

const EditableContext = React.createContext<FormInstance | null>(null);

const EditableRow = ({ index, ...props }: { index: number; [x: string]: any }) => {
  const [form] = Form.useForm();

  return (

Codennnn

import { createContext, useContext, useEffect, useState } from 'react';

const XxxContext = createContext({});

export function XxxContextProvider(props: { children: React.ReactNode }) {
  const [state, setState] = useState();

  const value = { state, setState };

  return <XxxContext.Provider value={value}>{props.children}</XxxContext.Provider>;