DEV Community: rxliuli

Introduction to @rxliuli/vista: A unified request interceptor library for both Fetch and XHR with middleware support.

rxliuli — Mon, 06 Jan 2025 14:01:39 +0000

@rxliuli/vista is a powerful homogeneous request interceptor library that supports unified interception of Fetch/XHR requests. It allows you to intervene at different stages of the request lifecycle, enabling various functions such as request monitoring, modification, and mocking.

Characteristics

🚀 Supports both Fetch and XHR request interception
🎯 Use middleware pattern, flexible and easy to expand
💫 Support interventions before and after requests
🔄 Modifiable request and response data
📦 Zero dependency, compact size
🌐 Supports browser environment only

Installation

npm install @rxliuli/vista
# Or
yarn add @rxliuli/vista
# Or
pnpm add @rxliuli/vista

Basic Usage

import { Vista } from '@rxliuli/vista'

new Vista()
  .use(async (c, next) => {
    console.log('Request started:', c.req.url)
    await next()
  })
  .use(async (c, next) => {
    await next()
    console.log('Response data:', await c.res.clone().text())
  })
  .intercept()

Advanced Use Cases

Add global request headers

new Vista()
  .use(async (c, next) => {
    c.req.headers.set('Authorization', 'Bearer token')
    await next()
  })
  .intercept()

Request Result Cache

const cache = new Map()

new Vista()
  .use(async (c, next) => {
    const key = c.req.url
    if (cache.has(key)) {
      c.res = cache.get(key).clone()
      return
    }
    await next()
    cache.set(key, c.res.clone())
  })
  .intercept()

Request failed, please retry

new Vista()
  .use(async (c, next) => {
    const maxRetries = 3
    let retries = 0

    while (retries < maxRetries) {
      try {
        await next()
        break
      } catch (err) {
        retries++
        if (retries === maxRetries) throw err
      }
    }
  })
  .intercept()

Dynamic modify response

new Vista()
  .use(async (c, next) => {
    await next()
    if (c.req.url === 'https://example.com/example') {
      const json = await c.res.json()
      json.id = 2
      c.res = new Response(JSON.stringify(json), c.res)
    }
  })
  .intercept()

API Reference

Vista Class

Main interceptor class, providing the following methods:

use(middleware): Add middleware
intercept(): Start intercepting requests
destroy(): Stop intercepting requests

Middleware Context

The middleware function receives two parameters:

context: Contains request and response information
- req: Request object res: Response object
- type: Request type, fetch or xhr
next: Call the function of the next middleware or original request

FAQ

How to stop interception?

   const vista = new Vista()
   vista.intercept()
   // When not needed
   vista.destroy()

Does it support asynchronous operations?
Yes, the middleware supports async/await syntax.
Does it support intercepting requests in Node.js?

No, it only supports intercepting requests in the browser.

Thanks

xhook: A library that implements xhr interception, helpful for the implementation of some features.
hono: An excellent web server framework that provides a lot of inspiration in its API.

Contribution Guidelines

Welcome to submit Issues and Pull Requests!

License

MIT License

Try it and tell me your experience, welcome any error or feature feedback.

Questions and Confusions for Mac Beginners

rxliuli — Wed, 06 Mar 2024 13:11:26 +0000

Preface

Switched to an M2 MacBook, as a long-term Windows user, I have encountered many problems and confusions up to now. Some have been solved, while others have not yet found a solution. Here, I record and share them.

System

How to Add Fonts

Previously, my daily font was Sarasa Gothic, which is not outstanding, but its main advantage is supporting Simplified and Traditional Chinese, Japanese, and English in a unified style.
The basic steps are similar to Windows: download the ttc file, click to open it, and wait for the verification to pass. However, this process is very slow on a Mac, so slow that I thought there was a bug.

How to Keep the Mac Awake with the Lid Closed When Connected to an External Display

Although I found a bunch of answers, it turns out that all you need to do is connect to power and set the external monitor as the primary display.

There is still a bug, sometimes I cannot wake it up using an external keyboard and mouse.

How to Reverse Mouse Scrolling Direction

This was one of the very first things I was not used to, but it can be adjusted by using a tool called SCROLL REVERSER to set it to reverse.

Checking for Global Shortcut Key Conflicts on Mac

I haven't found a truly viable solution, so I will continue to search for Mac's shortcut key settings through Google and asking questions.

How to Use Other Input Methods

Simply download the system's input methods, then you can switch input methods using ctrl+space.

Since it conflicts with the shortcut key for suggestions in vscode, I changed it to ctrl+shift+space.

Using Function Keys on Mac Without Pressing Fn

Enable Use F1, F2, etc. keys as standard function keys in system preferences, ref: https://support.apple.com/102439

I found that the shortcut key for refreshing the browser page, F5, does not work...

How to Hide from Dock When Closing the Main Window of an App

This depends on whether the app supports this behavior, for example, SSR supports minimizing to the top right corner after closing the window, but Proxifier does not support it and must occupy a place in the dock.

How to List and Switch Between All Windows

Mac's command+tab can only switch applications, but not multiple windows within the same application.
To switch between multiple windows of the same application, use the command+~ shortcut.
To list all windows, you can use the ctrl+top shortcut, but it's not possible to switch using a shortcut, moving the right hand from the mouse to the keyboard and back to the mouse is too counterintuitive, and the sizes being different is strange.

Using alt-tab can restore behavior similar to Windows.

Disabling Right-Click Menu in Chrome

By default, Chrome displays several integrated right-click menu items for Mac, which are not practical most of the time and need to be disabled.

Well, it seems this issue is unsolvable, which is really unfortunate. ref: https://superuser.com/questions/1012292/

Changing Cursor Movement Shortcuts to Windows Style in Input

The cursor movement shortcuts on Mac might be good, but there is obviously a significant difference from Windows.
In Windows, the following keys are generally used to move the cursor:

Home/End to jump to the beginning/end of the line
Ctrl+Home/End to jump to the beginning/end of the text
Ctrl+Left/Right to jump to the beginning/end of the word

All the above keys can be used in combination with Shift.

This issue can be mitigated by configuring global keyboard mapping with Karabiner-Elements.

How to Download DMG Files from Third Parties

Not addressed yet

How to Kill a Specific Process

Sometimes a background program freezes and needs to be restarted, but Activity Monitor seems unable to right-click to kill a process.
Use the Linux commands ps + kill -9

In Activity Monitor, first select the process you want to kill, then click the ⊗ in the navigation bar.

Disabling Cmd+Shift+A Triggering "No manual entry for setting;type=a" on Mac

In JetBrains' IDEs, Cmd+Shift+A triggers "No manual entry for setting;type=a," another example of Mac's "helpful" shortcuts.

This can be resolved by:

Opening System Preferences => Keyboard => Shortcuts => Services
Disabling Text => Search man Page Index in Terminal

Automatically Close Notifications in the Top Right Corner

Sometimes the system pops up notifications, such as software updates, but these notifications will stay visible in the top right corner indefinitely unless actively closed, which is very annoying. I would prefer them to automatically hide like in Windows and be viewable in the notification list if needed.

Tools like Automator seem to only set shortcuts for closing notifications and cannot automatically close system notifications after a few seconds.

Set Gmail Web Version as the Default System Mail Client

The built-in mail client on Mac might be useful, but having gotten used to Gmail, I want to set Gmail as the default system mail client. This process is much more complicated than on Windows, refer to the tutorial: https://support.apple.com/102362

How to Synchronize Files to a Phone via USB Differentially

The actual need is to synchronize the OneDrive and the e-book reader's directory. Surprisingly, when connecting an Android phone to a Mac, files cannot be transferred directly through Finder. It requires Google's Android File Transfer program, which does not support differential sync.

This helps understand why some people dislike Mac, saying it's too closed, as its support for non-Apple products is quite poor.

Disable the Mouse Move to Bottom Right Corner to Show Notes

Open System Preferences => Search "Hot Corners" => Hot Corners
Remove the note trigger in the bottom right corner.

Finder

Deleting Icons from the Desktop in Mac

Use Command+Delete to delete the selected icon.

Quick Switch Between Windows

Using Ctrl+Left/Right can switch between adjacent windows, which is very useful for quickly accessing commonly used windows during development. (Restores the old behavior similar to multiple windows, abandoning the mobile-like practice of one app covering the screen)

Display Hidden Files

Command+Shift+. can temporarily toggle the display of hidden files.

Use the following method for a permanent setting (seems not to work for file selectors triggered by browsers):

defaults write com.apple.finder AppleShowAllFiles -bool true # Show hidden files
defaults write com.apple.finder AppleShowAllFiles -bool false # Hide hidden files
killall Finder # Restart Finder

How to Paste a File Path

Sometimes, after copying a file path, you may want to quickly open it in Finder. You can use the Command+Shift+G shortcut, then paste the path.

Open Terminal or VSCode in the Current Directory

After selecting a directory, go to Finder => Services => New iTerm2 Window Here to open it.

This is actually different from what was expected to open the current directory and is also relatively slow.

Well, it's actually also available in the right-click context menu's submenu.

Opening iTerm2 for the first time will have two terminals, which appears to be a bug.

You can use szContext to customize the context menu.

Changing the Default Program for Opening a File

In Finder, right-click on a file of the type you wish to change, to bring up the context menu.
In the menu, select the "Get Info" option.
In the dialog that appears, expand the "Open With" option.
Choose the program you want to set as the default for opening this type of file, and click on "Change All..." below.

Selecting the Always Open With option when opening an application is confusing; it turns out it only applies to that specific file.

A better tool for this is duti, which can get or set the default program for a specific file type. This is particularly useful for batch changing the default application from Xcode to Visual Studio Code for opening certain file types.

# https://github.com/moretension/duti
brew install duti
# from https://github.com/vscode-icons/vscode-icons/blob/74220b6f8389ad5c5d9f68b2029d91460de2b374/src/iconsManifest/languages.ts#L319
filetypes=(.as .ada .prw .affect .al .ansible .g4 .any .htaccess .cls .apib .apl .applescript .adoc .asp .asm .ats .ahk .au3 .avcs .azcli .azure-pipelines.yml .bal .bat .bats .bzl .bf .bicep .bib .biml .blade.php .blitzbasic .bolt .bsq .buf.yaml .c .cal .cabal .Caddyfile .casc .cddl .ceylon .cfc .cfm .clojure .clojurescript .yml .cmake .CMakeCache.txt .cbl .ql .coffee .cfml .confluence .ckbk .cpp .h .cr .cs .css .feature .cu .pyx .dal .dart .dhall .html .diff .d .dockerfile .dtx .env .dot .dox .drl .dust .dylan .earthfile .edge .eex .es .ex .elm .erb .erl .yaml .falcon .fql .f .ftl .fs .fthtml .gspec .gml .gcode .gen .git .glsl .glyphs .gp .go .api .gd .gr .gql .gv .groovy .haml .hbs .prg .hs .haxe .hcl .helm.tpl .hjson .hlsl .hosts .http .aff .hy .hypr .icl .imba .4gl .ini .ink .iss .io .janet .java .js .jsx .jekyll .jenkins .jinja .json .jsonc .jsonnet .json5 .jl .id .k .kv .ks .kt ..kusto .tex .lat .less .flex .ly .lisp .lhs .log .lol .lsl .lua .mk .md .marko .mat .ms .mdx .mediawiki .mel .mmd .meson.build .mjml .pq .ep .mongo .mson .ne .nim .nimble .nix .nsi .nunjucks .m .mm .ml .o3 .w .things .pas .pddl .plan .happenings .pl .pl6 .pgsql .php .pine .requirements.txt .txt .dbgasm .ddl .polymer .pony .pcss .ps1 .prisma .pde .pro .rules .properties .proto .pug .pp .purs .arr .py .pyowo .qvs .qml .qs .r .rkt .cshtml .raml .re .red .res .rst .rex .tag .rmd .robot .rb .rs .san .sas .sbt .scad .scala .sce .scss .sdl .shader .sh .slang .ice .slim .ss .sn .eskip .tpl .snort .sol .rq .sqf .sql .nut .stan .bazel .do .stencil .html.stencil .st.css .styled .styl .svelte .swagger .swift .swig .link .sv .tt .teal .tt3 .tera .tf .sty .textile .JSON-tmLanguage .YAML-tmLanguage .Tiltfile .toit .toml .ttcn3 .tuc .twig .ts .tsx .typoscript .u .vb .wsf .vm .v .vhdl .vim .volt .vue .wai .wasm .wy .wgsl .wt .wl .wurst .wxml .xmake.lua .xml .xquery .xsl .bison .yang .zig)

for filetype in "${filetypes[@]}"
do
   duti -s com.microsoft.VSCode $filetype all
   if [ $? -ne 0 ]; then
      echo "Failed to set default program for $filetype"
   fi
done

How to Rename Files

Select the file and press Enter to rename it, or choose Rename from the right-click menu.

How to Cut Files

Well, it must use Command+C and then move the file with Command+Option+V. This is Mac only, even other programs on Mac support Command+X.

Third-party enhancement tool XtraFinder does not support M1.

How to Create a New Finder Window with a Shortcut

In Finder, use Command+N to create a window, unlike Ctrl+E, which can be very conveniently done with one hand.

How to Copy File Names in Bulk

Well, just select multiple files with Command+C and then paste in a text editor to get the filenames, no special tools needed. ref: https://discussions.apple.com/thread/1850895

How to Close All Finder Windows

In a Finder window, press Option+Command+W to close all windows of the current application.

Applications

Video Player

On Windows, PotPlayer is widely used for its power and simplicity. Since it's apparently not supported on Mac, I switched to an open-source tool iina. The control bar is a bit odd, but it's manageable with keyboard controls for progress.

Music Player

Although iina also supports music playback, I found an open-source music player museeks.

Clipboard History Management

Use the open-source program Maccy for management, GitHub: https://github.com/p0deje/Maccy

How to Convert WAV+CUE to FLAC

Use Mediahuman Audio Converter, refer to: https://www.reddit.com/r/audiophile/comments/s7ftf3/help_with_cue_splitter_program_for_mac/

What to Use for Sandboxing Tools

Parallels can install Windows, but $80 is a bit expensive.

Solved with utm, note that downloading Windows 11 ARM is a bit troublesome. It must be downloaded and converted using a Windows system from uup dump. Sharing a merged iso file, ref: https://pan.baidu.com/s/1wDPVJRNP27dMv2s1f74TlQ#4qx8.

Effect

How to Record GIFs

Use the open-source tool kap as a substitute for ScreenToGif on Windows. It doesn't support trimming and scaling the timeline but is basically usable (especially the feature of selecting application windows, it's dumb that screen recording tools don't support it).

Development

Disable or Modify System Shortcuts on Mac

Firstly, Ctrl+Space, which is the shortcut for switching input methods, can be modified in Shortcuts => Input Sources.

Next, Ctrl+Command+Space, which by default brings up the emoji menu, can be changed in Shortcuts => App Shortcuts to a complex and seldom-used shortcut.

Disable Command+Alt+M, the shortcut for minimizing the window, also in Shortcuts => App Shortcuts, change it to a complex and seldom-used shortcut.

Turn off Cmd+Shift+C for creating terminals, as it easily conflicts with browser shortcuts. -- Actually, this is a VSCode shortcut.

How to Use Shortcuts Similar to Ctrl+Home/Ctrl+End to Move the Cursor

By default, the shortcuts on Mac for moving the cursor are:

Use Command+Up/Down to jump to the beginning/end of a line (paragraph).
Use Option+Left/Right to jump to the beginning of the previous word/end of the next word.
Use Command+Top/Bottom to jump to the beginning/end of the text.

All the above keys can be combined with Shift.

In VSCode, Command+Down is occupied by the Idea shortcut editor.action.goToDeclaration and needs to be disabled.

Configuring Terminal Command Line Prompt

Use iTerm2 and oh-my-zsh.

Unable to Use the Run Script Feature in VSCode

Error: The terminal process "/bin/zsh '-c', 'pnpm run dev'" failed to launch (exit code: 127).

This is resolved after installing iTerm2 and oh-my-zsh, which is odd.

Automatic Merging When Pulling Code with Git Pull

Currently, using git pull always prompts to enter a commit message, but there should be a configuration to disable this behavior.

git config --global branch.autosetupmerge always
git config --global branch.autosetuprebase always

ref: https://stackoverflow.com/questions/5480069/

Did not take effect

Switching Tabs in VSCode

Okay, IDEA's default Alt+Left/Right on the Windows platform conflicts with macOS's own cursor navigation. The following shortcuts can alleviate this issue:

Command+Shift+N to open a file -- this is the JetBrains IDE shortcut.
Command+Alt+Left/Right to move the cursor back/forward to the next position in opened files.
Ctrl+Tab to switch tabs (obviously, this shortcut is not very convenient to press).

Disabling Alt Key from Typing Special Characters

Unfortunately, this issue seems to be unsolvable as well; it's a behavior of the built-in macOS input method and there's no setting to change it.

Strange Sound When Launching Android Studio

Disable the sound of the emulator:

hw.audioInput = no
hw.audioOutput = no

Use the following script to disable sound for all emulators:

#!/bin/bash
find ~/.android/avd -name "config.ini" | while read line
do
   awk '!/audio/' $line > tmp
   rm $line
   mv tmp $line
   echo "hw.audioInput = no" >> $line
   echo "hw.audioOutput = no" >> $line
done

Then clean the data and cold reboot the emulator.

Modifying the Hosts File

sudo code /etc/hosts

ref: https://www.jianshu.com/p/752211238c1b

Disabling Automatic Creation of .DS_Store Files on Mac

Since using a Mac, it's easy to see this file in git submissions, and its location is unpredictable, which is annoying. So, it's desired to disable it, here is the answer from chatgpt:

You can enter the following command in the terminal to disable macOS from automatically creating .DS_Store files:

defaults write com.apple.desktopservices DSDontWriteNetworkStores true

This will prevent macOS from creating .DS_Store files on network volumes. If you want to prevent macOS from creating .DS_Store files in local folders, you can enter another line of command in the terminal:

defaults write com.apple.desktopservices DSDontWriteStores true

To make these changes take effect, you need to log out and log back into your macOS account. If you want to re-enable the creation of .DS_Store files, you can replace "true" with "false" in the above two commands and log out and back into your system account again.

Configuring iTerm2 Terminal Shortcuts

Surprisingly, the inline cursor movement shortcuts of the widely used terminal tool on Mac are not consistent with the default Mac shortcuts. The expected consistency with Mac includes:

Cmd+Left to move to the beginning of the line
Cmd+Right to move to the end of the line
Option+Left to move to the beginning of the word
Option+Right to move to the end of the word

This requires modifying the Key Mappings Preset.

ref: https://superuser.com/a/1157575/1078727

Disabling iTerm2's Confirmation Prompt on Close

This option can be found in Settings => General => Closing.

The Input Method Theme in JetBrains IDE Does Not Follow the System

Currently, the system theme is dark, but the input method theme is light. It seems to be a bug in JetBrains IDE, and the only workaround is to restart the IDE. Related issue: https://youtrack.jetbrains.com/issue/IDEA-252482/

How to Create an ICNS Icon File

Creating and publishing a Mac app requires using a specified icon.

# 1. Prepare a single image with the maximum size of 1024x1024, rename it to icon.png; other sizes can be generated via terminal commands.
# 2. Create a folder named icons.iconset either by right-clicking or using a command.
mkdir icons.iconset
# 3. Use the "Terminal" to quickly create image files of various required sizes.
sips -z 16 16 icon.png -o icons.iconset/icon_16x16.png
sips -z 32 32 icon.png -o icons.iconset/icon_16x16@2x.png
sips -z 32 32 icon.png -o icons.iconset/icon_32x32.png
sips -z 64 64 icon.png -o icons.iconset/icon_32x32@2x.png
sips -z 128 128 icon.png -o icons.iconset/icon_128x128.png
sips -z 256 256 icon.png -o icons.iconset/icon_128x128@2x.png
sips -z 256 256 icon.png -o icons.iconset/icon_256x256.png
sips -z 512 512 icon.png -o icons.iconset/icon_256x256@2x.png
sips -z 512 512 icon.png -o icons.iconset/icon_512x512.png
sips -z 1024 1024 icon.png -o icons.iconset/icon_512x512@2x.png
# 4. Run the following command in the terminal to get the icon.icns file.
iconutil -c icns icons.iconset -o icon.icns

Note: The icon.png image file and the icons.iconset folder should be saved in the same directory. Start the "Terminal" and switch to the same directory.

Display website icons in the VSCode markdown preview

rxliuli — Tue, 12 Sep 2023 17:59:30 +0000

A quick inspiration realized: in the markdown preview of VSCode, in addition to displaying the link itself, if it's a popular website, such as GitHub, Twitter, Google, etc., the corresponding logo will be added in front of it.

It has been published to the VSCode extension store: https://marketplace.visualstudio.com/items?itemName=rxliuli.markdown-link-logo

Inspiration source: https://discourse.joplinapp.org/t/32608

Have fun! ✨

Developing and Building Node.js Applications with Vite

rxliuli — Mon, 19 Jun 2023 07:04:01 +0000

Context

As a modern tool for building web applications, Vite has been utilized by many developers for creating web applications (react, vue). Due to its ease of use and high performance, many web frameworks have even written official plugins (solid, astro), making it a successful challenger to Webpack in recent years. However, Vite has evolved to be more than just a tool for the web layer. Its surrounding ecosystem is flourishing, leading to the development of a series of peripheral tools.

Motivation

Why is Vite suitable for developing Node.js applications?

Firstly, even without Vite, tools like vitest for unit testing, tsx/ts-node for running source code for debugging, and tsup/esbuild for bundling code into the final js to be executed are likely needed. Thus, if Vite is used, these tasks can be accomplished within the same ecosystem.

vitest: A unit testing tool that supports ESM and TypeScript.
vite-node: A tool for running TypeScript code that supports various Vite features, such as ?raw.
Vite: Bundles Node.js applications into the final JavaScript to be executed, with an option to bundle dependencies selectively.

Usage

Vitest and vite-node are ready to use out of the box, so the focus here is on Vite's building aspects.

First, install the dependencies



pnpm i -D vite vite-node vitest

vitest

Create a unit test file, for example, src/__tests__/index.test.ts



import { it } from 'vitest'

it('hello world', () => {
  expect(1 + 1).eq(2)
})

Run vitest with the following command



pnpm vitest src/__tests__/index.test.ts

vite-node

It can replace the node command to run any file, offering more capabilities than the standard node command, including:

Support for ts/tsx files and running esm/cjs modules.
CJS polyfills in ESM, allowing direct use of __dirname, etc.
Support for watch mode execution.
Support for Vite's own features, such as ?raw.
Support for using Vite plugins.

For example, create a file src/main.ts



import { readFile } from 'fs/promises'

console.log(await readFile(__filename, 'utf-8'))

Then run it with vite-node



pnpm vite-node src/main.ts

Vite

To build Node.js applications with Vite, it's necessary to modify some configurations and plugins to address a few key issues:

Implement CJS polyfills for ESM code, including __dirname, __filename, require, and self.
Correctly bundle devDependencies while excluding node and dependencies.
Provide an out-of-the-box default configuration.

Let's tackle these issues one by one.

Polyfilling CJS Features During Build

In Node.js, global variables like __dirname are commonly used. Unfortunately, ESM does not support these. The recommended approach in Node.js is as follows:



import path from 'path'
import { fileURLToPath } from 'url'

const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)

You can use a Vite plugin to prepend some extra code to the beginning of the built code, automatically creating these variables.

Here's how to implement it:

Install magic-string to modify the code while keeping the source map intact.



   pnpm i -D magic-string

Then, add the polyfill code in the renderChunk hook.



   import MagicString from 'magic-string'
   import { Plugin } from 'vite'

   function shims(): Plugin {
     return {
       name: 'node-shims',
       renderChunk(code, chunk) {
         if (!chunk.fileName.endsWith('.js')) {
           return null;
         }
         const s = new MagicString(code);
         s.prepend(`
   import __path from 'path';
   import { fileURLToPath as __fileURLToPath } from 'url';
   import { createRequire as __createRequire } from 'module';

   const __getFilename = () => __fileURLToPath(import.meta.url);
   const __getDirname = () => __path.dirname(__getFilename());
   const __dirname = __getDirname();
   const __filename = __getFilename();
   const self = globalThis;
   const require = __createRequire(import.meta.url);
   `);
         return {
           code: s.toString(),
           map: s.generateMap({ hires: true }),
         };
       },
       apply: 'build',
     };
   }

By integrating this plugin into your Vite configuration, you'll automatically inject these shims into your JavaScript files during the build process, emulating Node.js's CommonJS environment within an ESM context. This solution streamlines the adaptation of existing Node.js codebases to the ESM module system.

Correctly Bundling Dependencies

It's common in Node.js applications to include modules such as fs, which Vite will also try to bundle by default. Therefore, it's necessary to treat them as external dependencies. Fortunately, there is already a plugin called rollup-plugin-node-externals that can exclude Node.js and dependencies declared in the dependencies field of package.json. However, some minor compatibility adjustments are needed for it to work smoothly with Vite.

Install the dependency:



   pnpm i -D rollup-plugin-node-externals

Wrap it to make it compatible with Vite:



   import { nodeExternals } from 'rollup-plugin-node-externals'
   import { Plugin } from 'vite'

   function externals(): Plugin {
     return {
       ...nodeExternals({
         // Options here if needed
       }),
       name: 'node-externals',
       enforce: 'pre', // The key is to run it before Vite's default dependency resolution plugin
       apply: 'build',
     }
   }

Adding Default Configuration

Given the frequency of Node.js projects, it's preferable not to repeat the configuration setup for each project. Instead, a convention-over-configuration approach is adopted, supplemented with the option for customization. Thus, a simple implementation of a shared Vite plugin for common configurations can be created as follows:



import path from 'path'
import { Plugin } from 'vite'

function config(options?: { entry?: string }): Plugin {
  const entry = options?.entry ?? 'src/main.ts'
  return {
    name: 'node-config',
    config() {
      return {
        build: {
          lib: {
            entry: path.resolve(entry),
            formats: ['es'],
            fileName: (format) => `${path.basename(entry, path.extname(entry))}.${format}.js`,
          },
          rollupOptions: {
            external: ['dependencies-to-exclude']
            // Additional Rollup options here
          },
        },
        resolve: {
          // Change default resolution to node rather than browser
          mainFields: ['module', 'jsnext:main', 'jsnext'],
          conditions: ['node'],
        },
      }
    },
    apply: 'build',
  }
}

This setup enables a default configuration tailored for Node.js projects, simplifying the development process. By specifying an entry file and the necessary adjustments for module resolution and build output, this plugin facilitates a straightforward build setup for a wide range of Node.js applications.

Combining Plugins

Finally, we combine these plugins into one, creating a new plugin setup:



import { Plugin } from 'vite'

export function node(): Plugin[] {
  return [shims(), externals(), config()]
}

Then, use it in your vite.config.ts file:



import { defineConfig } from 'vite'
import { node } from './path/to/your/plugin'

export default defineConfig({
  plugins: [node()],
})

Now, you can build Node.js applications with Vite using the following command:



pnpm vite build

Enjoy everything Vite has to offer!

A Vite plugin @liuli-util/vite-plugin-node has been published, which is ready to use out of the box.

Limitations

Alright, there are still some issues here, including:

~~Vite does not officially support building node applications, and its main goal is not that~~ -- At least it can be said that both vitest/nuxt depend on Vite at the node level.
~~vite-plugin-node still has many issues, such as not automatically polyfilling __dirname and the like~~ -- Implemented.
~~Vite's performance is still an order of magnitude worse compared to esbuild~~ -- The performance issues are not significant for most libraries now, and human perception can hardly notice it.
~~Building with zx fails to run due to incorrect configuration for chalk~~ -- specifically, failure to recognize the node field in imports. The maintainer's lack of interest suggests considering a switch to ansi-colors, as discussed in this issue.
~~Issues after building with koa-bodyparser~~ -- due to lack of proper ESM support. Awaiting the merge of this pull request.

No choice is perfect, but the decision to go all-in with Vite is deliberate.

Future Goals

[x] Support for multiple entry points.
[x] Generation of type definitions.

Choosing to focus on Vite involves weighing its current limitations against its potential and making a strategic decision based on the overall benefits it offers, including its growing ecosystem and the ability to streamline development workflows for Node.js applications.

Re-release fs-extra to properly support esm/cjs usage

rxliuli — Sun, 25 Dec 2022 06:22:09 +0000

motivation

Since updating nodejs@18 and switching to esm only, many libraries have been replaced to support esm import, but fs-extra has not been The use of esm is correctly supported, and no suitable replacement has been found. After the a PR proposed by us was rejected, I decided to re-release a fs-extra-unified that correctly supports the use of esm module.

If you don't know what fs-extra is, here is a brief introduction: it is a tool library related to nodejs file operations, which is used to completely replace the fs module. Before the existence of fs/promises, it has all the fs Asynchronous callback functions are converted to Promises. At the same time, some other very useful utility functions are provided for use, such as pathExists, remove, mkdirp, copy.

For example after deleting a temporary directory and then rebuilding it

import { remove, mkdirp } from 'fs-extra'
import path from 'node:path'
import { fileURLToPath } from 'node:url'

const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)
const tempPath = path.resolve(__dirname, '.temp')
await remove(tempPath)
await mkdirp(tempPath)

But in the esm module, it currently does not support the use of ts correctly. For example, the above code can only be used normally in the cjs module. In the esm module, the following imports must be used

import fsExtra from 'fs-extra'
const { remove, mkdirp } = fsExtra

Even though fs-extra@11 claims to support esm, it is supported by another entry fs-extra/esm, and the ts type definition has not been updated yet, so it cannot actually be used in ts. For example the above import can be converted to the following import

import { remove, mkdirp } from 'fs-extra/esm'

In addition, it has another troublesome problem, that is, the functions exported by fs are not supported, for example, the following code will report an error

import { readFile } from 'fs-extra/esm'
import { fileURLToPath } from 'node:url'
console.log(await readFile(fileURLToPath(import.meta.url), 'utf-8'))

The official claims that only fs-extra/esm will only export some unique functions. The functions originally exported by fs need to use the fs/promises module, which needs to be modified to the following imports

import { readFile } from 'fs/promises'
import { fileURLToPath } from 'node:url'
console.log(await readFile(fileURLToPath(import.meta.url), 'utf-8'))

Ok, looks like esm/ts support is second class citizen, let me summarize known issues

The default fs-extra entry does not support esm named imports
fs-extra/esm does not support the original functions of fs
fs-extra/esm does not correctly declare the ts type definition
cjs/esm use different behavior

It is precisely because it is a commonly used tool library that we republish it.

Republish

The basic idea is very simple. Scan the modules exported by fs-extra through the script, then generate an esm entry, and finally declare it correctly in the exports of package.json, so that there is no difference between esm and cjs at the usage level.

Desired result

esm supports named import and default import

import { readdir } from 'fs-extra'
import fsExtra from 'fs-extra'
import { fileURLToPath } from 'url'
import path from 'path'

const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)
console.log(await readdir(__dirname))
console.log(await fsExtra.readdir(__dirname))

cjs supports named import and default import

import { readdir } from 'fs-extra'
import fsExtra from 'fs-extra'
const { readdir: readdirCjs } = require('fs-extra')
const fsExtraCjs = require('fs-extra')
;(async () => {
  console.log(await readdir(__dirname))
  console.log(await readdirCjs(__dirname))
  console.log(await fsExtra.readdir(__dirname))
  console.log(await fsExtraCjs.readdir(__dirname))
})()

Correctly support the use of ts, esm no longer uses a separate entry

Final implementation method

Use the generate script to generate esm entry

const fsExtra = require('./lib/index')
const path = require('path')
const { difference } = require('lodash')

function scan() {
  const excludes = [
    'FileReadStream',
    'FileWriteStream',
    '_toUnixTimestamp',
    'F_OK',
    'R_OK',
    'W_OK',
    'X_OK',
    'graceful',
  ]
  return difference(Object. keys(fsExtra), excludes)
}

function generate(list) {
  return (
    "import fsExtra from './index'\n" +
    list.map((item) => `export const ${item} = fsExtra.${item}\n`).join('') +
    `export default {${list
      .map((item) => `${item}: fsExtra.${item},`)
      .join('')}}`
  )
}

async function build() {
  const list = scan()
  const code = generate(list)
  await fsExtra.writeFile(path.resolve(__dirname, 'lib/esm.mjs'), code)
}

build()

Then add the dependency of @types/fs-extra and re-export it in index.d.ts
```
export * from 'fs-extra'
```

Declare the correct exports/types field in package.json

{
  "exports": {
    ".": {
      "import": "./lib/esm.mjs",
      "require": "./lib/index.js"
    }
  },
  "types": "./index.d.ts"
}

Conclusion

If fs-extra finally supports esm/ts correctly, we will also delete this module to avoid trouble, but before that, we can only use this module first.

GitHub: https://github.com/rxliuli/node-fs-extra

cons: Data Structures from Nothing

rxliuli — Sat, 11 Jun 2022 03:03:03 +0000

Preface

There is an interesting data structure in lisp, Cons, which uses function closures to encapsulate a two-tuple data structure and build any other data structure needed on top of it. Before this, although I knew about closures and other concepts and had written some higher-order functions, I had not thought that I could use functions to build data structures, and I will explain how to do that in ts below.

lisp cons's wiki

The basic definition is as follows

$$
c=cons(a,b)\\
car(c)=a\\
cdr(c)=b
$$

Initial Implementation

The cons initial implementation is simple and can be implemented in just a few lines of code. As you can see, it simply uses closures to bind the arguments a and b and return them when the function is executed.

function cons(a: number, b: number): (n: number) => number {
  return (n: number) => (n === 0 ? a : b)
}
function car(cons: (n: number) => number) {
  return cons(0)
}
function cdr(cons: (n: number) => number) {
  return cons(1)
}

It can be used in the following way

const n = cons(1, 2)
console.log(car(n)) // 1
console.log(cdr(n)) // 2

To make it look a little more practical, first supplement its type with a generic type

export interface Cons<A, B> {
  (s: 0): A
  (s: 1): B
  _0: A
  _1: B
}

export function cons<A, B>(a: A, b: B): Cons<A, B> {
  return ((s: 0 | 1) => (s === 0 ? a : b)) as any
}
export function car<T extends Cons<any, any>>(cons: T): T['_0'] {
  return cons(0)
}
export function cdr<T extends Cons<any, any>>(cons: T): T['_1'] {
  return cons(1)
}

Verify it with the following unit test

it('cons', () => {
  const c = cons('hello', 1)
  expect(car(c) as string).toBe('hello')
  expect(cdr(c) as number).toBe(1)
})

It doesn't look like much, but it will be used below (the simplest binary structure) to combine into more complex data structures like chained tables and trees.

Chain Tables

In fact, once you have a binary, you can go on to combine any data structure you need, and a linked table is a simple example of this.
Here the car part of cons stores the value of the current node in the chain table, and cdr stores a pointer to the next node.

type List<T> = Cons<T, List<T>> | null
function list(): null
function list<T>(.. .args: T[]): Exclude<List<T>, null>
function list<T>(... .args: T[]): List<T> {
  function iter(i: number): List<T> {
    return i === args.length ? null : cons(args[i], iter(i + 1))
  }
  return iter(0)
}

Here is a chain table storing 4 elements

list(1, 2, 3, 4)

It will be a cons nested call procedure

cons(1, cons(2, cons(3, cons(4, null))))

You can write map/filter/reduce functions for it

map/filter is nothing complicated, just recursive processing of each node

function map<T, R>(list: List<T>, f: (i: T) => R): List<R> {
  return list === null ? null : (cons(f(car(list)), map(cdr(list)!, f)) as any)
}
function filter<T>(list: List<T>, f: (i: T) => boolean): List<T> {
  return list === null
    ? null
    : f(car(list))
    ? cons(car(list), filter(cdr(list), f))
    : filter(cdr(list), f)
}

The following diagram uses map processing

reduce is a little special in that it is an iterative recursion

function reduce<T>(list: List<T>, f: (res: T, v: T, i: number) => T): T
function reduce<T, R>(
  list: List<T>,
  f: (res: R, v: T, i: number) => R,
  init: R,
): R
function reduce<T, R>(
  list: List<T>,
  f: (res: R, v: T, i: number) => R,
  init?: R,
): R {
  function iter(list: List<T>, init: R, i: number): R {
    return list === null ? init : iter(cdr(list)!, f(init, car(list), i), i + 1)
  }
  return init! == undefined
    ? iter(list, init, 0)
    : iter(cdr(list!), car(list!) as unknown as R, 1)
}

It can be used in the following way

const res = reduce(
  map(
    filter(list(1, 2, 3, 4), (i) => i % 2 === 0),
    (i) => i * 2,
  ),
  (a, b) => a + b,
  0,
)
console.log(res) // 12

In theory, it should be easy to convert map/filter to a higher-order function based on reduce, for example the following code implements map/filter based on reduce in js

function map<T, R>(list: T[], f: (i: T) => R): R[] {
  return list.reduce((res, i) => {
    res.push(f(i))
    return res
  }, [] as R[])
}
function filter<T>(list: T[], f: (i: T) => boolean): T[] {
  return list.reduce((res, i) => {
    if (f(i)) {
      res.push(i)
    }
    return res
  }, [] as T[])
}

If one wishes to base the map/filter implementation of the linked table here on reduce, this is currently not possible. Note that the above code uses push, which is a modify operation and is more recommended for immutable state in functional programming. So, is there some way to do it even without changing the state? I will try to implement it.

function concat<T>(a: List<T>, b: List<T>): List<T> {
  return a === null ? b : cons(car(a), concat(cdr(a), b))
}
function mapForReduce<T, R>(arr: List<T>, f: (i: T) => R): List<R> {
  return reduce(arr, (res, i) => concat(res, list(f(i))), null as List<R>)
}
function filterForReduce<T>(arr: List<T>, f: (i: T) => boolean): List<T> {
  return reduce(
    arr,
    (res, i) => (f(i) ? concat(res, list(i)) : res),
    null as List<T>,
  )
}

Of course, someone might say: Isn't it inefficient to concatenate two chains every time you iterate over an element? Yes, it is indeed very inefficient, so another slightly odd approach can be used.

function mapForReduce<T, R>(list: List<T>, f: (i: T) => R): List<R> {
  return reduce(
    list,
    (res, i) => {
      return i === null ? res : (next) => res(cons(f(i), next))
    },
    (r: List<R>) => r,
  )(null)
}
function filterForReduce<T>(list: List<T>, f: (i: T) => boolean): List<T> {
  return reduce(
    list,
    (res, i) => (f(i) ? (next) => res(cons(i, next)) : res),
    (r: List<T>) => r,
  )(null)
}

Admittedly, this approach doesn't seem to accumulate a stack on each recursion, but it also wraps the function res over and over, and eventually passing in a single argument to call it all at once when reduce ends doesn't solve the fundamental problem, so the following implementation of setCar/setCdr

Support for modifying car/cdr

To implement set, you actually have to modify the parameters of the closure binding.

export interface Cons<A, B> {
  (s: 'car'): A
  (s: 'cdr'): B
  (s: 'setCar'): (v: A) => void
  (s: 'setCdr'): (v: B) => void
  _0: A
  _1: B
}

export function cons<A, B>(a: A, b: B): Cons<A, B> {
  return ((s: string) =>
    s === 'car'
      ? a
      : s === 'cdr'
      ? b
      : s === 'setCar'
      ? (v: A) => (a = v)
      : (v: B) => (b = v)) as any
}
export function car<T extends Cons<any, any>>(cons: T): T['_0'] {
  return cons('car')
}
export function cdr<T extends Cons<any, any>>(cons: T): T['_1'] {
  return cons('cdr')
}
export function setCar<T extends Cons<any, any>>(cons: T, v: T['_0']): void {
  return cons('setCar')(v)
}
export function setCdr<T extends Cons<any, any>>(cons: T, v: T['_1']): void {
  return cons('setCdr')(v)
}

This can be verified using the following unit test

it('cons', () => {
  const c = cons('hello', 1)
  expect(car(c) as string).toBe('hello')
  expect(cdr(c) as number).toBe(1)
  setCar(c, 'liuli')
  setCdr(c, 2)
  expect(car(c) as string).toBe('liuli')
  expect(cdr(c) as number).toBe(2)
})

However, an alternative implementation is proposed in the course that uses a higher-order function implementation entirely, without using internal judgments in cons.

export interface Cons<A, B> {
  (m: (a: A, b: B, setA: (a: A) => void, setB: (b: B) => void) => any): any
  _0: A
  _1: B
}

export function cons<A, B>(a: A, b: B): Cons<A, B> {
  return ((
    m: (a: A, b: B, setA: (a: A) => void, setB: (b: B) => void) => any,
  ) =>
    m(
      a,
      b,
      (n: A) => (a = n),
      (n: B) => (b = n),
    )) as any
}
export function car<T extends Cons<any, any>>(cons: T): T['_0'] {
  return cons((a) => a)
}
export function cdr<T extends Cons<any, any>>(cons: T): T['_1'] {
  return cons((_a, b) => b)
}
export function setCar<T extends Cons<any, any>>(
  cons: T,
  value: T['_0'],
): void {
  cons((_a, _b, setA) => setA(value))
}
export function setCdr<T extends Cons<any, any>>(
  cons: T,
  value: T['_1'],
): void {
  cons((_a, _b, _setA, setB) => setB(value))
}

Now, re-implement mapForReduce/filterForReduce

function mapForReduce<T, R>(list: List<T>, f: (i: T) => R): List<R> {
  const init = cons(null, null) as unknown as List<R>
  reduce(
    list,
    (curr, i) => {
      const next = cons(f(i), null) as List<R>
      setCdr(curr!, next)
      return next
    },
    init,
  )
  return cdr(init!)
}
function filterForReduce<T>(list: List<T>, f: (i: T) => boolean): List<T> {
  const init = cons(null, null) as unknown as List<T>
  reduce(
    list,
    (curr, i) => {
      if (!f(i)) {
        return curr
      }
      const next = cons(i, null) as List<T>
      setCdr(curr!, next)
      return next
    },
    init,
  )
  return cdr(init!)
}

For the code mapForReduce(list(1, 2, 3, 4), i => i) the iterative process graph

i	curr	init
1	(null, null)	(null, null)
2	(1, null)	(null, (1, null))
3	(2, null)	(null, (1, (2, null)))
4	(3, null)	(null, (1, (2, (3, null))))
return		(null, (1, (2, (3, (4, null)))))

As you can see, each time you modify the previous node, and use cons to construct a new node with the current value as the next iteration, you end up traversing the entire list and making a copy of the entire list.

Trees

Since you can construct a chain table with cons, you can also construct a tree structure by defining a tree structure.

A node is composed of a value and possible children, so we define a tree node like this.

cons(value, list(sub1, sub2, ...subN))

The implementation is very simple

type Tree<T> = Cons<T, List<Tree<T>>>
function tree<T>(value: T, children: List<Tree<T>>> = null) {
  return cons(value, children)
}

const t = tree(1, list(tree(2, list(tree(3)))), tree(4)))
expect(car(t)).toBe(1)
expect(car(car(cdr(t)!))) .toBe(2)

It is also possible to implement map/filter/reduce with a tree structure, and you can see that the line implementations are simple list-based map/filter implementations.

function treeReduce<T, R>(tree: Tree<T>, f: (r: R, v: T) => R, init: R): R {
  init = f(init, car(tree))
  map(cdr(tree), (i) => {
    init = treeReduce(i, f, init)
  })
  return init
}
function treeMap<T, R>(tree: Tree<T>, f: (v: T) => R): Tree<R> {
  return cons(
    f(car(tree)),
    map(cdr(tree)! , (i) => treeMap(i, f)),
  )
}
function treeFilter<T>(tree: Tree<T>, f: (v: T) => boolean): Tree<T> | null {
  if (!f(car(tree))) {
    return null
  }
  return cons(
    car(tree),
    filter(
      map(cdr(tree)! , (i) => treeFilter(i, f)! ,
      (i) => i ! == null,
    ),
  )
}

Test it

const t = tree(1, list(tree(2, list(tree(3)))), tree(4)))
it('basic', () => {
  expect(car(t)).toBe(1)
  expect(car(car(cdr(t)!))) .toBe(2)
})
it('treeReduce', () => {
  expect(treeReduce(t, (r, i) => [. .r, i], [] as number[])).toEqual([
    1, 2, 3, 4,
  ])
})
it('treeMap', () => {
  expect(
    treeReduce(
      treeMap(t, (i) => i * 2),
      (r, i) => [. .r, i],
      [] as number[],
    ),
  ).toEqual([1, 2, 3, 4].map((i) => i * 2))
})
it('treeFilter', () => {
  const res = treeFilter(t, (i) => i % 2 === 1)
  expect(treeReduce(res!, (r, i) => [. .r, i], [] as number[])).toEqual([1])
})

Conclusion

lisp is a seemingly simple language, because it seems to be all about expressions, and it doesn't offer as many ways to construct complex data (like object objects, structs, classes, etc.) as modern languages. But as you can see here, it is possible to construct arbitrarily complex data structures by supporting the simplest complex data, and the building blocks of all complex data are so simple as to be unbelievable.

In fact, it is so easy to write a lisp toy parser and runtime using ts that I will demonstrate it later.

Using the ESBuild plug-in mechanism to achieve the desired functionality

rxliuli — Fri, 20 May 2022 15:04:27 +0000

Preface

esbuild is a general purpose code compiler and build tool that uses golang builds, it is very fast and 1~2 orders of magnitude higher in performance than the existing js toolchain. It's not an out-of-the-box build tool yet, but with its plugin system we can already do a lot of things.

Automatically exclude all dependencies

When building libs, we usually don't want to bundle dependent modules and want to exclude all dependencies by default, this plugin is used to do that. It will set all imported modules that do not start with . to avoid bundling into the final build.



import { Plugin } from 'esbuild'

/**
 * Automatically exclude all dependencies
 * Some regular expression syntax of js is not supported by golang, see https://github.com/evanw/esbuild/issues/1634
 */
export function autoExternal(): Plugin {
  return {
    name: 'autoExternal',
    setup(build) {
      build.onResolve({ filter: /. */ }, (args) => {
        if (/^\. {1,2}\//.test(args.path)) {
          return
        }
        return {
          path: args.path,
          external: true,
        }
      })
    },
  }
}

We could use it this way, for example import esbuild, but it would not be bundled in.



import { build } from 'esbuild'
console.log(build)

will be compiled into



import { build } from 'esbuild'
console.log(build)

Using environment variables

Sometimes we need to use environment variables for different environments to differentiate between them, and it's easy to do that with plugins.



import { Plugin } from 'esbuild'

/**
 * @param {string} str
 */
function isValidId(str: string) {
  try {
    new Function(`var ${str};`)
  } catch (err) {
    return false
  }
  return true
}

/*
 * Create a map of replacements for environment variables.
 * @return A map of variables.
 */
export function defineProcessEnv() {
  /**
   * @type {{ [key: string]: string }}
   */
  const definitions: Record<string, string> = {}
  definitions['process.env.NODE_ENV'] = JSON.stringify(
    process.env.NODE_ENV || 'development',
  )
  Object.keys(process.env).forEach((key) => {
    if (isValidId(key)) {
      definitions[`process.env.${key}`] = JSON.stringify(process.env[key])
    }
  })
  definitions['process.env'] = '{}'

  return definitions
}

export function defineImportEnv() {
  const definitions: Record<string, string> = {}
  Object.keys(process.env).forEach((key) => {
    if (isValidId(key)) {
      definitions[`import.meta.env.${key}`] = JSON.stringify(process.env[key])
    }
  })
  definitions['import.meta.env'] = '{}'
  return definitions
}

/**
 * Pass environment variables to esbuild.
 * @return An esbuild plugin.
 */
export function env(options: { process?: boolean; import?: boolean }): Plugin {
  return {
    name: 'env',
    setup(build) {
      const { platform, define = {} } = build.initialOptions
      if (platform === 'node') {
        return
      }
      build.initialOptions.define = define
      if (options.import) {
        Object.assign(build.initialOptions.define, defineImportEnv())
      }
      if (options.process) {
        Object.assign(build.initialOptions.define, defineProcessEnv())
      }
    },
  }
}

After using the plugin, we can use environment variables in our code



export const NodeEnv = import.meta.env.NODE_ENV

Compile the result



export const NodeEnv = 'test'

Exporting logs at build time

Sometimes we want to build something in watch mode, but esbuild won't output a message after the build, so we simply implement one.



import { Plugin, PluginBuild } from 'esbuild'

export function log(): Plugin {
  return {
    name: 'log',
    setup(builder: PluginBuild) {
      let start: number
      builder.onStart(() => {
        start = Date.now()
      })
      builder.onEnd((result) => {
        if (result.errors.length ! == 0) {
          console.error('build failed', result.errors)
          return
        }
        console.log(`build complete, time ${Date.now() - start}ms`)
      })
    },
  }
}

We can test that it works



const mockLog = jest.fn()
jest.spyOn(global.console, 'log').mockImplementation(mockLog)
await build({
  stdin: {
    contents: `export const name = 'liuli'`,
  },
  plugins: [log()],
  write: false,
})
expect(mockLog.mock.calls.length).toBe(1)

Automatically exclude dependencies starting with node:

Sometimes some dependencies use nodejs native modules, but are written with node: prefixes, which will not be recognized by esbuild, we use the following plugin to handle it



import { Plugin } from 'esbuild'

/**
 * Exclude and replace node built-in modules
 */
export function nodeExternal(): Plugin {
  return {
    name: 'nodeExternals',
    setup(build) {
      build.onResolve({ filter: /(^node:)/ }, (args) => ({
        path: args.path.slice(5),
        external: true,
      }))
    },
  }
}

The native modules starting with node: in our following code will be excluded



import { path } from 'node:path'
console.log(path.resolve(__dirname))

Compilation results



// <stdin>
import { path } from 'path'
console.log(path.resolve(__dirname))

Binding text files via ?raw

If you have used vite, you may be impressed by its ? * feature, which provides a variety of functions to import files in different ways, and in esbuild, we sometimes want to statically bundle certain content, such as readme files.



import { Plugin } from 'esbuild'
import { readFile } from 'fs-extra'
import * as path from 'path'

/**
 * Package resources as strings via ?raw
 * @returns
 */
export function raw(): Plugin {
  return {
    name: 'raw',
    setup(build) {
      build.onResolve({ filter: /\?raw$/ }, (args) => {
        return {
          path: path.isAbsolute(args.path)
            ? args.path
            : path.join(args.resolveDir, args.path),
          namespace: 'raw-loader',
        }
      })
      build.onLoad(
        { filter: /\?raw$/, namespace: 'raw-loader' },
        async (args) => {
          return {
            contents: await readFile(args.path.replace(/\?raw$/, '')),
            loader: 'text',
          }
        },
      )
    },
  }
}

Verify by



const res = await build({
  stdin: {
    contents: `
        import readme from '... /... /README.md?raw'
        console.log(readme)
      `,
    resolveDir: __dirname,
  },
  plugins: [raw()],
  bundle: true,
  write: false,
})
console.log(res.outputFiles[0].text)
expect(
  res.outputFiles[0].text.includes('@liuli-util/esbuild-plugins'),
).toBeTruthy()

Rewriting some modules

Sometimes we want to rewrite some modules, such as changing the imported lodash to lodash-es for tree shaking, and we can do this with the following plugin



import { build, Plugin } from 'esbuild'
import path from 'path'

/**
 * Rewrite the specified import as another
 * @param entries
 * @returns
 */
export function resolve(entries: [from: string, to: string][]): Plugin {
  return {
    name: 'resolve',
    setup(build) {
      build.onResolve({ filter: /. */ }, async (args) => {
        const findEntries = entries.find((item) => item[0] === args.path)
        if (!findEntries) {
          return
        }
        return await build.resolve(findEntries[1])
      })
    },
  }
}

We can replace lodash with lodash-es using the following configuration



build({
  plugins: [resolve([['lodash', 'lodash-es']])],
})

Source code



import { uniq } from 'lodash'
console.log(uniq([1, 2, 1]))

Compile the result



import { uniq } from 'lodash-es'
console.log(uniq([1, 2, 1]))

Forcing a module to be specified has no side effects

When we use a third-party package, it is possible that the package depends on some other module. If the module does not declare sideEffect, then even if it has no side effects and exports the esm package, it will bundle in the dependent module, but we can use the plugin api to force the specified module to have no side effects.



import { Plugin } from 'esbuild'

/**
 * Set the specified module to be a package with no side effects, and since the webpack/esbuild configuration is not compatible, use the plugin to do this first
 * @param packages
 * @returns
 */
export function sideEffects(packages: string[]): Plugin {
  return {
    name: 'sideEffects',
    setup(build) {
      build.onResolve({ filter: /. */ }, async (args) => {
        if (
          args.pluginData || // Ignore this if we called ourselves
          !packages.includes(args.path)
        ) {
          return
        }

        const { path, . .rest } = args
        rest.pluginData = true // Avoid infinite recursion
        const result = await build.resolve(path, rest)

        result.sideEffects = false
        return result
      })
    },
  }
}

We use it in the following way



build({
  plugins: [sideEffects(['lib'])],
})

In this case, even if some code in lib-a depends on lib-b, as long as your code does not depend on a specific method, then it will be tree shaking correctly

For example, the following code



// main.ts
import { hello } from 'lib-a'
console.log(hello('lili'))



// lib-a/src/index.ts
export * from 'lib-b'
export function hello(name: string) {
  return `hello ${name}`
}

Compile the result



// dist/main.js

function hello(name: string) {

  return hello </span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">

}

console.log(hello('liuli'))

Summary

Many plugins for esbuild have been implemented, but it is still a bit weak as a basic build tool for building applications, and it is currently only recommended to build some pure JavaScript/TypeScript code. If you need to build a complete web application, then vite is probably the most mature build tool based on esbuild.

VSCode Extensions New Project Release 0.2.0

rxliuli — Thu, 31 Mar 2022 11:01:50 +0000

Preface

In the previous article VSCode Extension New Project Release 0.1.0, I implemented the basic extension functionality and also explained some problems encountered in the process.
Now, I have implemented the custom generator and then released 0.2.0, which makes it possible to use the company's internal cli generator.

Specifically, there are several steps as follows

expose the generator's json schema
get the json configs from the vscode configuration
render the form for creating the template project
create the same process as the internally supported generators

Define schema

typescript interface

export interface BaseConfig {
  name: string
  label: string
  default?: any
}

export interface SelectConfig extends BaseConfig {
  type: 'select'
  options: {
    label: string
    value: string
  }[]
}

export interface CheckboxConfig extends BaseConfig {
  type: 'checkbox'
}

export interface InputConfig extends BaseConfig {
  type: 'input'
}

export type Conifg = SelectConfig | CheckboxConfig | InputConfig

export interface BootstrapConfig {
  id: string
  title: string
  package: string
  command: string
  configs: Conifg[]
}

Convert the resulting json schema

{
  "type": "array",
  "description": "List of generators to use",
  "items": {
    "type": "object",
    "properties": {
      "id": {
        "type": "string",
        "description": "The id of the generator"
      },
      "title": {
        "type": "string",
        "description": "The title of the generator"
      },
      "package": {
        "type": "string",
        "description": "npm package"
      },
      "command": {
        "type": "string",
        "description": "command to run"
      },
      "configs": {
        "type": "array",
        "description": "configs to pass to the command",
        "items": {
          "type": "object",
          "properties": {
            "type": {
              "type": "string",
              "enum": ["select", "checkbox", "input"],
              "description": ""
            },
            "name": {
              "type": "string",
              "description": ""
            },
            "label": {
              "type": "string",
              "description": ""
            },
            "default": {},
            "options": {
              "type": "array",
              "items": {
                "type": "object",
                "properties": {
                  "label": {
                    "type": "string",
                    "description": "option label"
                  },
                  "value": {
                    "type": "string",
                    "description": "option value"
                  }
                },
                "required": ["label", "value"]
              }
            }
          },
          "required": ["type", "name", "label"]
        }
      }
    },
    "required": ["id", "title", "package", "command", "configs"]
  }
}

Then we can customize the generator in VSCode

{
  "newProject.generators": [
    {
      "id": "@liuli-util/cli",
      "title": "liuli-cli",
      "package": "@liuli-util/cli",
      "command": "liuli-cli generate",
      "configs": [
        {
          "type": "select",
          "name": "template",
          "label": "Template",
          "default": "lib",
          "options": [
            { "label": "lib", "value": "lib" },
            { "label": "cli", "value": "cli" }
          ]
        },
        {
          "type": "checkbox",
          "name": "init-sync",
          "label": "init sync",
          "default": false
        }
      ]
    }
  ]
}

Then you can use this generator to create projects

more generator configuration examples

Limitations

cli preferably supports a non-interactive mode. Interactive cli is more friendly for command line use, but the plugin itself has already implemented the interactive part, so there is no need to use cli's own interactive behavior additionally
The command format of cli generated projects generally needs to satisfy cli command name flags. For example create-vite hello-world --template=preact-ts, fortunately both commanderjs and yargs support this pattern, and many cli's do so as well

Follow up

The basic functionality of the plugin is now complete, and the next few things known to need to be taken care of are

feat: internationalization support
feat: support for jetbrains ide-like override mode (currently cleared)
feat: support for more existing frameworks

VSCode Extensions New Project Release 0.1.0

rxliuli — Wed, 30 Mar 2022 00:53:11 +0000

Preface

vscode extensions marketplace

This idea started a few weeks after I switched from webstorm to vscode, and this past weekend I thought, why does the Jetbrains IDE have a project creation bootstrap, but vscode doesn't support it, and you can only use the command line tool? With this in mind, I decided to implement the equivalent plugin in vscode myself.

I have also developed a plugin for webstorm to generate vite projects Vite Integrated

The final result

demo.gif

Ideas

The basic idea is to create a project by rendering the configuration via vscode webview and then stitching the npx command in the main thread to execute it. Specifically, from the user's point of view, there are several steps

open the project creation panel via the command or the menu on the ui
select the generator to use
select the location of the generated project
select or enter some configuration required by the generator
Create the project
if it is a subdirectory of the current project, open package.json in the directory, otherwise open a new window

Some problems encountered

How to use react to develop the view layer
How to keep the webview interface style consistent with vscode
How to communicate with the main thread for the rendering layer
Using npm create or npx
How to persist state

How to develop a view layer using react

I initially wanted to deploy the webview view layer as a standalone on github pages, and the vscode plugin part only contains bundles. vscode requires html strings as the entry point by default, which made things a bit complicated, but luckily I found the official example project hello-world-vite, which makes integrating our familiar technology stack a bit easier, and the project is modified from this template.

How to keep the webview interface style consistent with vscode

This problem was a bit complicated earlier, but with the release of the official vscode ui library vscode-webview-ui-toolkit, and the recent release of the default integration with react, the problem has become much simpler -- not perfect, of course.

The official diagram

It provides some basic components

badge
button
checkbox
data-grid
divider
dropdown
link
option
panels
progress-ring
radio
radio-group
tag
text-area
text-field

However, I still found some problems when using it in practice, mainly including

The type definition of components is not accurate, resulting in a serious need to rely on storybook's documentation and dream back to JavaScript
Some components are not intuitive, for example, panels/select/text-field is a little different from the general practice, panels tab/panel has to be written twice, select does not separate value/label, text-field uses
The ui library doesn't support tree shaking, resulting in a relatively large bundle and a project footprint of 439.98kb/74.79%

The dependency tree is really terrible, that's why I didn't replace react => preact

@vscode/codicons 0.0.29
@vscode/webview-ui-toolkit 0.9.3
├── @microsoft/fast-element 1.8.0
├─┬ @microsoft/fast-foundation 2.37.2
│ ├── @microsoft/fast-element 1.8.0
│ ├── @microsoft/fast-web-utilities 5.1.0
│ ├── tabbable 5.2.1
│ └── tslib 1.14.1
├─┬ @microsoft/fast-react-wrapper 0.1.43
│ ├── @microsoft/fast-element 1.8.0
│ ├─┬ @microsoft/fast-foundation 2.37.2
│ │ ├── @microsoft/fast-element 1.8.0
│ │ ├── @microsoft/fast-web-utilities 5.1.0
│ │ ├── tabbable 5.2.1
│ │ └── tslib 1.14.1
│ └── react 17.0.2 peer
└── react 17.0.2 peer

How to implement the rendering layer to communicate with the main thread

Since the core is implemented through postMessage/onmessage, it is very similar to web worker or iframe communication. Since the code is relatively simple, I did not encapsulate the complex communication logic.

the basic data structure of communication is defined
use map in the main thread part to save the function exposed by channel => handle to the rendering thread, execute the corresponding method after receiving the ready-made message from the rendering and throw it to the rendering thread via postMessage
simply wrap it in the rendering thread so that the call is made by passing channel + data to call the method exposed in the main thread and get the result asynchronously

Key Code

Main thread

const map = new Map<string, (. . args: any[]) => any>()
map.set('hello', (name: string) => `hello ${name}`)
webview.onDidReceiveMessage(
  async (message: any) => {
    const { command, data = [], callback } = message
    if (!map.has(command)) {
      throw new Error(`Command not found ${command}`)
    }
    const res = await map.get(command)! (... .data)
    if (callback) {
      console.log('callback: ', callback)
      this._panel.webview.postMessage({
        command: callback,
        data: [res],
      })
    }
  },
  undefined,
  this._disposables,
)

Rendering threads

import type { WebviewApi } from 'vscode-webview'

class VSCodeAPIWrapper {
  private readonly vsCodeApi: WebviewApi<unknown> | undefined

  constructor() {
    if (typeof acquireVsCodeApi === 'function') {
      this.vsCodeApi = acquireVsCodeApi()
    }
  }

  public postMessage(message: unknown) {
    if (this.vsCodeApi) {
      this.vsCodeApi.postMessage(message)
    } else {
      console.log(message)
    }
  }

  async invoke(options: {
    command: string
    default?: any
    args?: any[]
  }): Promise<any> {
    return await new Promise<string>((resolve) => {
      if (typeof acquireVsCodeApi! == 'function') {
        resolve(options.default)
        return
      }
      const id = Date.now() + '_' + Math.random()
      const listener = (message: MessageEvent) => {
        const data = message.data
        if (data.command === id) {
          resolve(data.data[0])
          window.removeEventListener('message', listener)
        }
      }
      window.addEventListener('message', listener)
      vscode.postMessage({
        command: options.command,
        data: options.args,
        callback: id,
      })
    })
  }
}

export const vscode = new VSCodeAPIWrapper()

console.log(await vscode.invoke({ command: 'world' })) // hello world

Use npm create or npx

For example, the command to create a react project using vite is

npx --yes --package create-vite create-vite path --template=react-ts

The command to create a project using create-react-app is

npx --yes --package create-react-app create-react-app path --template=typescript

Some people may ask: "Why don't you use a command like npm create to create a project?"
At first glance, it seems that the create command is already supported by the major package managers npm/yarn/pnpm, but it has a few limitations

npm package names are restricted in that the part that does not contain an organization name must start with create-, but in fact not all cli's start with create-, e.g. @angular/cli
pnpm create is not equivalent to npm and needs to be adapted to each package manager separately
webstorm still uses npx for project creation, which influenced my choice

So it's only natural to choose npx, and we may support global configuration using pnpx in the future.

How to persist state

vscode actually provides an official solution to implement WebviewPanelSerializer that allows acquireVsCodeApi()'s getState/setState to be persisted, but it has some problems that caused me not to use it in the end.

the state is restored only when the webview is rendered for the first time, but the changes are not persisted until vscode is closed, i.e. if you need to create two projects, the first time you create some configuration items, but the second time the configuration items are not cached, and they only take effect when vscode is reopened, which is really strange (or maybe I'm using the wrong one)
the interface does not support kv storage, it only supports getting the full state or setting the full state

So I choose to use context.globalState to persist data

main thread

// Other code....
map.set('getState', (key: string) => this.globalState.get(key))
map.set('setState', (key: string, value: any) =>
  this.globalState.update(key, value),
)

Rendering threads

import type { WebviewApi } from 'vscode-webview'

class VSCodeAPIWrapper {
  // Other code...
  async getState(key: string): Promise<unknown | undefined> {
    if (this.vsCodeApi) {
      return await this.invoke({ command: 'getState', args: [key] })
    } else {
      const state = localStorage.getItem(key)
      return state ? JSON.parse(state) : undefined
    }
  }

  async setState<T extends unknown | undefined>(
    key: string,
    newState: T,
  ): Promise<void> {
    if (this.vsCodeApi) {
      return await this.invoke({ command: 'setState', args: [key, newState] })
    } else {
      localStorage.setItem(key, JSON.stringify(newState))
    }
  }
}

export const vscode = new VSCodeAPIWrapper()

const store = (await vscode.getState(props.id)) as { location: string }

It is now possible to support that selected generators and configuration items will still be cached the next time they are used, which is really handy when you need to create projects with the same generator, especially if there are more generator options.

Conclusion

vscode is still not as good as webstorm in some ways, but its popularity is simply unstoppable, and many front-end projects even officially support only vscode editors, which makes it a no-option at some point (e.g. vue3, nx). So instead of complaining about it, you should try to make it better.

Personal website performance optimization

rxliuli — Fri, 25 Mar 2022 07:19:03 +0000

Publish a new personal website

I released a new version of my personal website two days ago, but at that time there were still some unresolved performance issues, including

Performance optimization
- Reducing the number of dependencies
- Chopping off runtime dependencies marked
- Compressing image sizes
- Adding .nojekyll to avoid github actions doing unnecessary builds
Validation tools
- rollup-plugin-visualizer: check bundle size
- lighthouse in chrome devtools: test runtime performance

Validation tools

To do a good job, you have to have a good tool. I use two main tools to test and validate optimizations

rollup-plugin-visualizer

npm

This is a dependency analysis tool integrated into rollup that will analyze how my code relates to the dependencies in the bundle, which is important to find out which dependencies need to be optimized.

lighthouse

online version

This is a self-contained feature of chrome browser, it can check out the problems of web pages, including blocking time, oversized images and other problems are checked out by this tool. The following is the test result of v1 version, the performance is simply miserable, so v2 I focus on solving these problems.

Performance optimization

Reduce the number of dependencies

Since the site was updated from v1 => v2, reducing the number of dependencies has been a key concern for me

v1 has few direct dependencies, only 9, but many more actual dependencies (node_modules black hole), 133 after de-duplication

@fortawesome/fontawese-free 6.0.0
@liuli-util/react-router 0.3.1
mockjs 1.1.0
normalize.css 8.0.1
rc-util 5.18.1
react 17.0.2
react-dom 17.0.2
react-markdown 8.0.0
react-use 17.3.2

v2 had only 3 runtime dependencies when the site was last released, the first one I cut was react, it was too big for small projects, classnames was kept because it was a 1kb utility function and needed to be used frequently, and marked was the smallest and most popular markdown parser that I needed to render some markdown snippets.

preact
classnames
marked

But marked is still a big part of it, about 58%, and more fatally, it's a cpu-intensive operation that makes the TBT reach 510ms, which is obviously something I need to work on.

Before looking at the original project bchiang7 v4, I also considered using a plugin to convert markdown to html at build time to avoid performance loss at runtime, but of course considering that small markdown fragments don't seem convenient to split into separate markdown file, so I didn't implement it. But that's what the original project did, so I put it into practice -- it was surprisingly easy, since there were only two markdown fragments to handle, so I easily solved the problem with vite-plugin-markdown to solve this problem.

Now it's a 100 out of 100 on mobile devices too!

The final bundle size was reduced from 2.18M to 58.96k, which did pretty much meet my expectations.

Compressing the image size

I didn't pay much attention to the image before, but after checking it with lighthouse, I compressed it using Squoosh. The reason I didn't use the build tool plugin is that there are not many images, and the build tool is good for batch processing but not for fine tuning, e.g. some images need to be compressed and then resized.

28 => 19
196 => 56
103 => 28

Overall the image size is optimized by 68% and lighthouse no longer reports that the image needs to be optimized.

Add .nojekyll to avoid github actions doing unnecessary builds

I was motivated to do this because I noticed that the deployment of github pages was slowing down, and sometimes I couldn't see it in github deployments when I pushed it up, which made me feel a bit strange, so I checked it out and found that gh-pages deployments now go through the github actions process, which actions is divided into two steps: build => deploy.

And in the build step, github will use jekyll to build by default

This slows down the release a bit, so I added .nojekyll to bypass this step

As you can see, this reduces the build time by over 50%, and every future release will benefit from this.

Wrap-up

There is no end to performance optimization, from chrome v8, which greatly optimizes the performance of js, to the programming language of build tools from nodejs to golang/rust, to even vue authors who are not satisfied with webpack to create vite on their own, all prove this, and I'm just trying to do something for my personal website.

Rewrite nodejs cli using golang

rxliuli — Sun, 30 Jan 2022 10:15:22 +0000

Scenes

Since we use monorepo to manage all projects, the build time for lib module initialization is unacceptable, so for the past two days, we have been trying to use golang to rewrite the lib/cli build tool @liuli-util/cli to verify how fast golang can do it.

@liuli-util/cli is a zero-configuration build tool created by us for library and CLI application packaging, but also supports Some additional common features include generating template projects, syncing configurations, deploying, and more.

accomplish

saki npm, all tests are in liuli-tools Done, it's a monorepo with 44 modules, 28 of which need to be built.

The overall build command of liuli-cli is rewritten based on esbuild, supporting build lib/cli and custom targets. Here are some tests I did after the rewrite, proving that using golang can drastically improve lib build performance, it's so fast that it's possible to put it in postinstall.

Commands are repeated 10 times using time seq 10 | xargs -i <cmd>

saki build

Build lib or cli programs based on esbuild, which is very fast.

saki build lib # build lib
saki build cli # build cli

Performance Testing

The following two cli are based on the build implemented by esbuild, but the real runtime of the latter is very long, because nodejs itself also takes time (and is very slow) to load the code.

Download the binaries to install

$ saki build lib

real 0m0.647s
user 0m0.060s
sys 0m0.183s
# Average 64.7ms/time

$ saki build cli

real 0m2.831s
user 0m0.106s
sys 0m0.275s
# Average 283.1ms/time

npm install globally

$ saki build lib

real 0m2.724s
user 0m0.482s
sys 0m1.665s
# Average 272.4ms/time

$ saki build cli

real 0m4.622s
user 0m0.587s
sys 0m1.438s
# Average 462.2ms/time

liuli-cli

$ liuli-cli build lib

real 0m6.882s
user 0m0.648s
sys 0m1.364s
# Average 688.2ms/time

$ liuli-cli build cli

real 0m8.687s
user 0m0.587s
sys 0m1.333s
# Average 868.7ms/time

saki run

An alternative to pnpm --filter . run that tries to improve the efficiency of running commands in multiple threads.

saki run setup # run the setup command on all modules (if there is one)
saki run --filter libs/* setup # run the setup command in all modules matching libs/*
# use --filter array
saki run --filter libs/* --filter apps/* setup # or use , to split
saki run --filter libs/*,apps/* setup

Performance Testing

pnpm + liuli-cli + dts

$ pnpm --filter .run setup

real 4m49.648s
user 0m0.593s
sys 0m1.391s
# Average 1034.4ms/pc

pnpm + liuli-cli

$ pnpm --filter .run setup

real 1m3.847s
user 0m0.468s
sys 0m1.484s
# Average 228ms/pc

saki + liuli-cli

$ saki run setup

real 1m19.657s
user 0m0.497s
sys 0m1.494s
# Average 284.4ms/pc

pnpm + saki

$ pnpm --filter .run setup

real 0m16.168s
user 0m0.435s
sys 0m1.590s
# Average 57.7ms/pc

npm saki (almost unimaginable with a js toolchain)

$ saki run setup

real 0m13.742s
user 0m0.046s
sys 0m0.258s
# Average 49.0ms/pc

Use git bash --filter parameter under Windows, please wrap it with ""

in conclusion

At present, builder has improved significantly, while run is almost the same as node (sometimes even slower).

My generation may continue to try to use golang to rewrite more front-end basic tools. The performance of nodejs does not seem to be available at present.

Directly point to source code when referencing dependencies in monorepo

rxliuli — Thu, 13 Jan 2022 16:07:40 +0000

Scenes

In a monorepo project, we may have dozens of lib modules, and if the lib module needs to be published outside the monorepo, it must be packaged as js, and main/module points to the packaged js file, so that everyone can use it .

For example a simple lib module like the following

lib-a
- src
- README.md
- package.json
- tsconfig.json

The source code may be directly pointed to in package.json when there is no need to publish it originally

This optimization of lib buildless in monorepo is mentioned in How to reduce the initialization time of lib in monorepo

{
  "name": "lib-a",
  "main": "src/index.ts",
  "module": "src/index.ts",
  "types": "src/index.ts"
}

When published, it needs to be modified to

{
  "name": "lib-a",
  "main": "dist/index.js",
  "module": "dist/index.esm.js",
  "types": "src/index.ts"
}

This leads us to add at least one setup script for the first time pulling the project to perform the initialization of all modules in batches. For example the command for pnpm might be pnpm --filter .run setup

{
  "scripts": {
    "setup": "npm run build"
  }
}

If there are only one or two modules, it probably won't take much time. But if there are dozens of modules (in our production project, about 37), even if the initial build of a module only takes a few seconds, it will take minutes cumulatively. There are many practices

All initialized only for the first time, and subsequent updates are rebuilt by the modules used by the user. For example antv series of open source projects
Use typescript's project-references to point directly to the ts source files. For example open source project Maskbook
Cache built files to avoid rebuilds. For example nx.js, yarn-plugin-change, ultra-runner
Speed up the build of each module. I tried to use esbuild to refactor @liuli-util/cli

Since most of our web projects are developed based on vite, we consider creating a vite/rollup plugin to rewrite module resolve, and rewrite the imported module directly to the source code instead of dist/index.js, even if this will increase each The time for module development, but on average no more than 10 other libs depend on each module, the extra time is almost insignificant (mainly in a nodejs process and compiled with esbuild).

accomplish

Before implementing it myself, I also retrieved existing plugins, such as @rollup/plugin-alias, but its configuration is static For example, we need to configure @liuli-util/* to all point to @liuli-util/*/src/index.ts, which needs to be configured separately for each module.

import { defineConfig } from 'rollup'
import alias from '@rollup/plugin-alias'

export default defineConfig({
  plugins: [
    alias({
      entries: [
        {
          find: '@liuli-util/async',
          replacement: '@liuli-util/async/src/index.ts',
        },
        {
          find: '@liuli-util/array',
          replacement: '@liuli-util/array/src/index.ts',
        },
        // maybe more
      ],
    }),
  ],
})

And I expect to focus on doing this, so I developed a separate plugin rollup-plugin-ts-alias

import { Plugin, ResolveIdResult } from 'rollup'
import { pathExists } from 'fs-extra'

export function tsAlias(
  includes: (string | RegExp)[],
  excludes: (string | RegExp)[] = [],
): Plugin & { enforce: 'pre' | 'post' } {
  return {
    name: 'rollup-plugin-ts-alias',
    enforce: 'pre',
    async resolveId(source: string): Promise<ResolveIdResult> {
      excludes.push(/\/.*\//)
      const predicate = (item: string | RegExp) =>
        typeof item === 'string' ? source.startsWith(item) : item.test(source)
      if (includes.some(predicate) && !excludes.some(predicate)) {
        let res: string
        try {
          res = require.resolve(source + '/src/index.ts')
        } catch (e) {
          return null
        }
        if (!(await pathExists(res))) {
          console.warn('path not exists: ', res)
          return null
        }
        console.log('rewrite: ', res)
        return res
      }
      return null
    },
  }
}

use

The plugin has been published to npm @liuli-util/rollup-plugin-ts-alias

Install

pnpm i -D @liuli-util/rollup-plugin-ts-alias

configure

// vite.config.ts
import { tsAlias } from '@liuli-util/rollup-plugin-ts-alias'

export default defineConfig({
  plugins: [tsAlias(['@liuli-util/'])],
})

After that, the source code of lib can be hot-updated by directly modifying the source code of lib in monorepo, no need to start additional terminal, and no need to add setup command for full initialization. As you can see below, the dependent lib @liuli-util/react-router has been pointed to the source code

problem

How should a large monorepo solve performance and collaboration issues?
Or do we not need to use a monorepo?