Development

The following method is to improve the Gem development experience.

Language Support

Install extension:

Formatting

Prettier

prettier defaults to support the inline html/css template, but does not supportcss({}), use the following command to install prettier To support the formatting of this style:

pnpm add -D prettier@npm:@mantou/prettier

Biome

biome v2 defaults to support the inline html/css template, but does not supportcss({}).

HMR

HMR is available through unplugin-gem on webpack, Rspack, Vite, Rollup, Rolldown and esbuild.

unplugin-gem (recommended)

Turn on hot in the bundler when it has a JS HMR host, then enable hmr. The plugin injects @mantou/gem/helper/hmr automatically:

unpluginGem({ hmr: true, })

Complete JavaScript HMR still needs a host that implements import.meta.webpackHot (webpack/Rspack) or import.meta.hot (Vite / experimental Rolldown). Rollup and esbuild only get the runtime so class updates stay compatible.

SWC plugin

When using swc-plugin-gem directly:

  1. Turn on hot in the build tool, such as Webpack
  2. Add @mantou/gem/helper/hmr to the bundler entry (it must run before any element class is defined)
  3. Enable hmr in the SWC plugin config (true / "webpack-hot", "import-meta-hot", or "module-hot")