What is the best module system for a React component library?

JavaScript module system has been evolving as the language and technology evolves. There are a few different modules systems you can choose when you are bundling a JS library.

The best module system for a frontend component library is ESM. It stands for ES Modules. It is It is the official standard format to package JavaScript (see the language spec). Node.js supports it, too (see the announcement).

Because:

1. ESM works in many modern browser (see browser support).

2. It uses import and export statement and compiled code has an easy-to-understand syntax.

3. Due to ES6’s static module structure, you can tree-shake it. This means using a bundler like Rollup can remove unnecessary code.

4. You can call it in HTML with adding type=”module” in the script tag.

5. ESM is a more secure system than CJS. While both module and exports can be replaced on the fly within the module itself in CJS, this is not possible with ESM because nothing outside the module itself can mutate is own export (by this mechanism).

Front-End
TypeScript: type aliases to check type equality

This post is to analyse how the type equality check by using type aliases proposed by Matt Pocock in his twitter post. These type aliases allow us to elegantly express type equality checks in unit tests. All we need to do is to pass the output and expected types in …

Front-End
Fixing it.only type error in Jest

If you are getting a type error with it.only in Jest, it could be due to incorrect TypeScript typings or incompatible versions of Jest and TypeScript. To resolve this issue, you can try the following steps: Make sure you have the latest versions of Jest and its TypeScript typings installed …

Front-End
yup conditional validation example

Here’s an example of a Yup validation logic where the first input field is optional but, if filled, it must contain only alphabetic characters, and the second input field is required: import * as Yup from “yup”; const validationSchema = Yup.object().shape({ firstField: Yup.string().matches(/^[A-Za-z]*$/, { message: “First field must contain only …