Forem: suhaotian

Zustand — no need to manually write the store interface anymore!

suhaotian — Wed, 08 Oct 2025 12:30:56 +0000

Before:

interface BearState {
  bears: number
  increase: (by: number) => void
}

const useBearStore = create<BearState>()((set) => ({
  bears: 0,
  increase: (by) => set((state) => ({ bears: state.bears + by })),
}))

Now:

const initialState = { bears: 0 }
export type BearState = typeof initialState

export const useBearStore = create<BearState>()(() => initialState)

export const bearActions = {
  increase(by: number) {
    useBearStore.setState((state) => ({ bears: state.bears + by }))
  },
}

What if the fields in initialState are null, undefined, union types, or string? We can use TypeScript’s as syntax to fix this issue and avoid rewriting the store’s type. For example:

const initialState = {
  bears: 0,
  gender: 1 as 0 | 1 | 2 | undefined,
};
export type BearState = typeof initialState;

✨ Why it’s better?

1.No need to manually define and sync the interface

2.Actions are separated and can grow freely

3.typeof initialState automatically infers the correct types

4.Cleaner, easier to maintain, and still fully typed

Axios vs. Fetch: Which Fetch Wrapper Should I Choose in 2025?

suhaotian — Mon, 10 Mar 2025 00:10:49 +0000

It's 2025, and Axios has supported fetch since v1.7, making it just another fetch wrapper.

The Axios package is 35.6KB/Gzip 13.5KB—too big as a fetch wrapper!

So, I looked into popular fetch wrappers and found these:

wretch
ky
ofetch

The good thing is they are well-known and very small—under 2KB to ~6KB(Gzip). The problem? Each has its own API style.

Axios is popular because of its easy-to-use API and powerful interceptors.

I wanted a fetch wrapper that works like Axios.

Besides these well-known fetch wrappers, there are many others. But after searching, I finally found the perfect one: xior

Why Xiorjs?

Tiny, with an Axios-like API
Built-in nested query parameter encoding
Many useful built-in plugins
Easy to customize with plugins
Supports custom fetch implementations (works with proxies, old browsers, Tauri apps)

Size

Show me the code

import axios, {
  XiorError as AxiosError,
  isXiorError as isAxiosError,
  XiorRequestConfig as AxiosRequestConfig,
} from "xior";

export const http = axios.create({
  baseURL: "https://exmaple.com/api",
});

http.request.interceptors.use((request) => {
  request.headers["Authorization"] = "your token";
  return request;
});

http.response.interceptors.use((request) => {
  request.headers["Authorization"] = "your token";
  return request;
});

// Or use defaults to set headers
http.defaults.headers["Authorization"] = "your token";

// GET requests with nested object
http.get("/get-data", {
  params: {
    filter: {
      site: undefined,
      "url:is": "something",
    },
  },
});

// POST requests
http.post(
  "/post-action",
  { payload: { a: 1, b: 2 } },
  {
    params: {
      filter: {
        site: undefined,
        "url:is": "something",
      },
    },
  },
);

Xior is written in TypeScript, used in real projects, and the author fixes issues fast!

How next-intl Works

suhaotian — Thu, 28 Mar 2024 00:04:40 +0000

Understanding how next-intl functions is crucial for two key reasons:

Effective Utilization: By comprehending its inner workings, you can leverage next-intl's capabilities more effectively in your Next.js applications.
Customization: With this knowledge, you gain the ability to tailor your own internationalization(i18n) library for specific needs, such as dynamically loading locales or custom logics within the Next.js App Router.

Four Key Aspects of `next-intl`

1. Conditional Exports (default/react-server):

This mechanism enables separation of code based on where it's executed (client or server).
The "default" export is utilized for all components, while "react-server" caters to server components when have.

Example (package.json):

{
  "name": "conditional-exports-example",
  "version": "1.0.0",
  "exports": {
    ".": {
      "react-server": "./src/hello.server.ts",
      "default": "./src/hello.client.ts"
    }
  }
}

src/hello.server.ts:

const msg = 'Hi from `src/hello.server.ts`';
export default msg;

src/hello.client.ts:

const msg = 'Hi from `src/hello.client.ts`';
export default msg;

Testing with Next.js:

Create a Next.js project using pnpx create-next-app@latest(here using pnpm).
Set up app/server/page.tsx and app/client/page.tsx.

// app/server/page.tsx
import hi from 'conditional-exports-example';

export default function ServerPage() {
  return <div>{hi}</div>;
}

'use client';

// app/client/page.tsx
import hi from 'conditional-exports-example';

export default function ClientPage() {
  return <div>{hi}</div>;
}

Accessing these pages:

http://localhost:3000/server will displays Hi from src/hello.server.ts.
http://localhost:3000/client will displays Hi from src/hello.client.ts.

2. React's `use` hook

The use hook is restricted to regular components (client or server components without the async prefix). You cannot use it within async server components.

❌ Incorrect Example:

Error: Expected a suspended thenable. This is a bug in React. Please file an issue.

export default async function Hello() {
  const msg = use(
    new Promise((resolve) => {
      setTimeout(() => {
        resolve('hi');
      }, 1000);
    })
  );

  return <div>{msg}</div>;
}

✅ Correct Example:

export default function Hello() {
  const msg = use(
    new Promise((resolve) => {
      setTimeout(() => {
        resolve('hi');
      }, 1000);
    })
  );

  return <div>{msg}</div>;
}

In next-intl, distinct modules are imported for translation functions based on the component type:

Example: non-async server component (Server Component without async Prefix):

import { useTranslations } from 'next-intl';

export default function UserDetails({ user }) {
  const t = useTranslations('UserProfile');

  return (
    <section>
      <h2>{t('title')}</h2>
      <p>{t('followers', { count: user.numFollowers })}</p>
    </section>
  );
}

Example: client component:

(Client components are considered non-async components)

'use client';

import { useTranslations } from 'next-intl';

export default function UserDetails({ user }) {
  const t = useTranslations('UserProfile');

  return (
    <section>
      <h2>{t('title')}</h2>
      <p>{t('followers', { count: user.numFollowers })}</p>
    </section>
  );
}

Example: async server components:

import { getTranslations } from 'next-intl/server';

export default async function UserDetails({ user }) {
  const t = await getTranslations('UserProfile');

  return (
    <section>
      <h2>{t('title')}</h2>
      <p>{t('followers', { count: user.numFollowers })}</p>
    </section>
  );
}

3. Customizing `next.config.mjs` for different Runtime-Specific Configurations

Managing configurations for both server and client runtimes can be challenging. next-intl addresses this using the Module Path Aliases feature to establish a flexible configuration file. For details, refer to the source code:

https://github.com/amannn/next-intl/blob/main/packages/next-intl/src/plugin.tsx

4. Redirecting URLs for Language Detection in `middleware.ts`

The core concept for language-based URL redirection can be found in the Official Next.js Internationalization Docs: https://nextjs.org/docs/app/building-your-application/routing/internationalization#routing-overview.

Challenge: Sharing Messages in Client Components

A key challenge involves sharing i18n messages fetched in server components with client components to avoid redundant fetches and potential hydration errors occur when the server-rendered HTML content and the client-side JavaScript do not match.

Ideal Resolution:

Fetch i18n data messages from an API on the server.
Serialize and pass them to client components, eliminating the need for client-side fetching.

Layout.tsx:

import { NextIntlClientProvider, useMessages } from 'next-intl';
import { notFound } from 'next/navigation';

export default function LocaleLayout({ children, params: { locale } }) {
  const messages = useMessages();

  return (
    <html lang={locale}>
      <body>
        <NextIntlClientProvider locale={locale} messages={messages}>
          {children}
        </NextIntlClientProvider>
      </body>
    </html>
  );
}

Client-Side Provider (NextIntlClientProvider):

It's designed to consume locale and message data on the client:

'use client';

export default function NextIntlClientProvider({
  locale,
  resource,
  children,
}: {
  locale: string;
  resource: Record<string, any>;
  children: React.ReactNode;
}) {
  // do something with `locale` / `resource` here
  return children;
}

Next Steps

After understanding of the key aspects of next-intl, the next step involves building our own i18n library to meet specific requirements.

We will refer to part of the code of next-intl and combine it with the popular i18n library i18next to develop a new library that called "next-i18next-v2" for in-depth exploration.

For the example source code, you can refer to:

https://github.com/suhaotian/next-i18next-v2

3 Tips to Make Your Next.js App More Stable

suhaotian — Tue, 19 Mar 2024 14:22:50 +0000

Since Next.js introduced the App Router feature, it provides React Server Components (RSC).

RSC allows your app to render on the server-side, returning static HTML to the browser for faster initial load times.

Here's an example: Creating a page to render data from an API

// app/page.tsx
export default async function HelloPage() {
  const data = await fetch('http://127.0.0.1:3068/messages', {cache: 'no-cache'}).then((res) =>
    res.json()
  );

  return <div>{JSON.stringify(data)}</div>
}

Note: {cache: 'no-cache'} is added to disable caching for testing purposes.

The concern here is: what happens if the API fetch encounters an error? This could lead to a crashed page.

The example code using Express.js to simulate an API:

import express from 'express';

const app = express();

app.use(express.urlencoded({ extended: true }));
app.use(express.json());

app.get('/', (req, res) => {
  res.send('hi');
});

app.get('/messages', (req, res) => {
  const isEven = Math.round(Math.random() * 19) % 2 === 0;
  if (isEven) {
    res.send([
      { id: 1, text: 'Foobar' },
      { id: 1, text: 'Some content' },
    ]);
  } else {
    res.status(500).send({
      msg: 'some error happend',
    });
  }
});

app.listen(3068, () => {
  console.log(`Server listening at: http://127.0.0.1:3068`);
});

Here's how we can improve this scenario:

Implement Error Retries: If the API call fails, we can retry the request a few times before giving up.
Cache Data: When the API request is successful, cache the data. If retries still fail, use the cached data to prevent a completely broken page.
Dedupe Requests: Avoid making unnecessary redundant requests. This prevents multiple identical requests from being sent simultaneously on the fly.

These functionalities can be achieved using libraries like axios with its third-party plugins or a library specifically designed for these purposes, such as xior.

In this case, we'll use xior. xior offers a similar API to axios and leverages the built-in fetch API.

Install xior:

npm install xior

# or pnpm install
pnpm install xior

Create an app/http.ts file to configure xior with its built-in plugins:

// app/http.ts
import xior from 'xior';
import errorRetryPlugin from 'xior/plugins/error-retry';
import errorCachePlugin from 'xior/plugins/error-cache';
import dedupeRequestPlugin from 'xior/plugins/dedupe';

export const http = xior.create({
  baseURL: 'http://127.0.0.1:3068/',
});

http.plugins.use(
  errorRetryPlugin({
    retryTimes: 2,
    retryInterval(count) {
      return count * 250;
    },
    onRetry(config, error, count) {
      console.log(`${config?.method} ${config?.url} retry ${count}`);
    },
  })
);
http.plugins.use(errorCachePlugin());
if (typeof window !== 'undefined') {
  // fetch in Next.js server components, the requests already dedupe
  http.plugins.use(dedupeRequestPlugin());
}

Create a new page app/improved/page.tsx that utilizes the http.ts instance:

// app/improved/page.tsx
import { http } from '../http';

export default async function ImprovedHelloPage() {
  const { data, fromCache, error } = await http.get('/messages', { cache: 'no-cache' });

  return (
    <div>
      {fromCache ? (
        <>
          <div className="p-2 text-yellow-600 bg-yellow-300">
            The data from cache, error: {error?.message}
          </div>
          <hr />
        </>
      ) : null}
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

Even if the API call fails and retries are unsuccessful, the page won't crash. Instead, you can show an error message and possibly display cached data or a fallback message. This ensures a better user experience and avoids showing a broken page.

Thank you for reading these little tips. Here's the Example Source Code: https://github.com/suhaotian/3-tips-make-next-more-stable-demo

Migrate to xior from axios

suhaotian — Mon, 18 Mar 2024 02:03:15 +0000

Xior is a library based on fetch that supports plugins, offers an API similar to axios, and is lightweight in size.

Do you use axios or fetch?

If you are already familiar with axios, using xior will be straightforward.

Why xior instead of axios?

One significant reason is that axios doesn't support edge runtime and Cloudflare Worker environments.

In Cloudflare Worker or Next.js's middleware.js file, axios will throw an error: TypeError: adapter is not a function.

Another reason is that xior is more lightweight and supports plugins and if you want use modern features like fetch, xior is the best choice.

But if you need these features, axios still a better choice:

Axios support proxy feature in Node.js
Axios use XMLHttpRequest thats means support old browser
Axios exists over 10 years means more stable and more features support

Compare

name	Size compare	Plugins	API
axios		✅ Support by third library	Browser: `XMLHttpRequest`; Node: `http` module
xior		✅ Built-in support	Both use fetch

Getting Started

Let's install and write some example to get started.

Installing

# npm
npm install xior

# pnpm
pnpm add xior

# bun
bun add xior

# yarn
yarn add xior

GET method

import axios from 'xior';

axios
  .get('/user', {
    params: {
      ID: 12345,
    },
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .finally(function () {
    // always executed
  });

POST method

import axios from 'xior';

axios
  .post(
    '/user',
    // body
    {
      username: 'test',
      nickname: 'j',
    },
    // options
    {
      params: {
        ID: 12345,
      },
    }
  )
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .finally(function () {
    // always executed
  });

Creating instance

import axios from 'xior';

const http = axios.create({ baseURL: 'https://example.com/' });

Inteceptors

Request interceptors:

import axios from 'xior';

axios.interceptors.request.use((config) => {
  const token = localStorage.getItem('LOGIN_TOKEN');
  if (token) {
    config.headers['Authorization'] = `Bearer ${token}`;
  }
  return config;
});

Response interceptors:

import axios from 'xior';

axios.interceptors.response.use(
  (result) => {
    console.log(result.status, result.data, result.config, result.resposne, result.headers);
    return result;
  },
  (error) => {
    if (error?.response?.status === 401) {
      localStorage.removeItem('LOGIN_TOKEN');
    }
    return Promise.reject(error);
  }
);

Plugins

Xior built-in many useful plugins, and let you easily custom your own plugins.

Plugin example, here we use download/upload progress plugin:

import axios from 'xior';
import uploadDownloadProgressPlugin from 'xior/plugins/progress';

axios.plugins.use(uploadDownloadProgressPlugin());

const formData = FormData();
formData.append('file', fileObject);
formData.append('field1', 'val1');
formData.append('field2', 'val2');

axios.post('/upload', formData, {
  // simulate upload progress to 99% in 10 seconds, default is 5 seconds
  progressDuration: 10 * 1000,
  onUploadProgress(e) {
    console.log(`Upload progress: ${e.progress}%`);
  },
  // onDownloadProgress(e) {
  //   console.log(`Download progress: ${e.progress}%`);
  // },
});

Custom your own plugin:

xior let you easily to create custom plugins.

Here are some examples:

Simple Logging plugin:

import axios from 'xior';

axios.plugins.use(function logPlugin(adapter) {
  return async (config) => {
    const start = Date.now();
    const res = await adapter(config);
    console.log('%s %s %s take %sms', config.method, config.url, res.status, Date.now() - start);
    return res;
  };
});

More details, check xior on npm

Maybe you have issues or problem, please feel free to comment

An boilerplate for parcel v2.0.0

suhaotian — Thu, 14 Oct 2021 07:12:23 +0000

Parcel just publish v2.0.0 version, I can't wait update my project from webpack to parcel.

if you use typescript, react, and node.js to development backend service, this is a great boilerplate for you. try it:

https://github.com/suhaotian/parcel-starter

use-one Get 0.8 version

suhaotian — Sat, 22 Aug 2020 18:13:16 +0000

https://use-one.com

The source code only < 70 lines, very simple. Even so small library, also improve the performance and types. 🆒

use-one: a new state share library for react app...

suhaotian — Sat, 22 Aug 2020 00:54:48 +0000

Hello, everyone! Today, I will share a new state library for react. I already thought this a few years ago until hooks showed up, I can make it real now. The source code is really simple.

Features

Easy share state anywhere
No more complex concepts, only useHook
Write in TypeScript
Tiny size (with Dependencies together only gzip 2KB!)

Install

npm

npm install use-one eventemitter3 --save

yarn

yarn add use-one eventemitter3

Usage

Create one hook

// useCount.ts
import { create } from "use-one";

const initialState = { count: 0 };

type CountStateType = typeof initialState;

const [useCount, countStore] = create<CountStateType>(initialState);

export { useCount, countStore };

export const actions = {
  increment: () => {
    // `countStore.getState().count`, we can write to selectors
    countStore.setState({ count: countStore.getState().count + 1 });
  },
  decrement: () => {
    countStore.setState({ count: countStore.getState().count - 1 });
  },
};

Use the hook

// CountExample.tsx
import * as React from "react";
import { useCount, countStore, actions } from "./useCount";

const CountExample = () => {
  const [countState, setCountState] = useCount();

  const { count } = countState;

  return (
    <div>
      <button onClick={actions.increment}>+1</button>
      <span>{count}</span>
      <button onClick={actions.decrement}>-1</button>
      <button
        onClick={() => {
          setTimeout(() => {
            setCountState({
              count: countStore.getState().count + 2,
            });
          }, 2000);
        }}>
        async +2
      </button>
    </div>
  );
};

const ShowCountInOtherPlace = () => {
  const [countState] = useCount();
  const { count } = countState;

  return <span>Count: {count}</span>;
};

export default function App() {
  return (
    <Fragment>
      <ShowCountInOtherPlace />
      <CountExample />
    </Fragment>
  );
}

Online Example

Count

TextInput

Dependencies

eventemitter3