refactor: format with biome

.github/workflows/ci.yaml

@@ -43,8 +43,12 @@ jobs:
  - name: Install Dependencies
  run: |
  pnpm install --frozen-lockfile
+
+ - name: Lint
+ run: |
+ pnpm lint
  pnpm check
 
- - name: Build Test
+ - name: Build sandboxes storybooks
  run: |
  pnpm run build:sandboxes

.vscode/settings.json

@@ -1,3 +1,24 @@
 {
- "typescript.tsdk": "node_modules/typescript/lib"
+ "typescript.tsdk": "node_modules/typescript/lib",
+ "[javascript]": {
+ "editor.defaultFormatter": "biomejs.biome"
+ },
+ "[javascriptreact]": {
+ "editor.defaultFormatter": "biomejs.biome"
+ },
+ "[json5]": {
+ "editor.defaultFormatter": "biomejs.biome"
+ },
+ "[json]": {
+ "editor.defaultFormatter": "biomejs.biome"
+ },
+ "[jsonc]": {
+ "editor.defaultFormatter": "biomejs.biome"
+ },
+ "[typescript]": {
+ "editor.defaultFormatter": "biomejs.biome"
+ },
+ "[typescriptreact]": {
+ "editor.defaultFormatter": "biomejs.biome"
+ }
 }

biome.json

@@ -0,0 +1,52 @@
+{
+ "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
+ "organizeImports": {
+ "enabled": true,
+ "include": [
+ "./**/*.js",
+ "./**/*.jsx",
+ "./**/*.ts",
+ "./**/*.tsx",
+ "./**/*.mjs",
+ "./**/*.cjs"
+ ]
+ },
+ "vcs": {
+ "enabled": true,
+ "defaultBranch": "main",
+ "clientKind": "git",
+ "useIgnoreFile": true
+ },
+ "files": {
+ "ignoreUnknown": true
+ },
+ "formatter": {
+ "indentStyle": "space"
+ },
+ "javascript": {
+ "formatter": {
+ "quoteStyle": "single",
+ "semicolons": "asNeeded"
+ }
+ },
+ "linter": {
+ "enabled": true,
+ "ignore": ["./scripts/"],
+ "rules": {
+ "recommended": true,
+ "a11y": {
+ "all": false
+ },
+ "style": {
+ "noNonNullAssertion": "off"
+ },
+ "suspicious": {
+ "noExplicitAny": "off",
+ "noConfusingVoidType": "off"
+ },
+ "performance": {
+ "noDelete": "off"
+ }
+ }
+ }
+}

package.json

@@ -6,24 +6,27 @@
  "build": "cross-env NX_DAEMON=false nx run-many -t build --exclude @sandboxes/* --parallel=10",
  "build:sandboxes": "cross-env NX_DAEMON=false nx run-many -t build:storybook --projects @sandboxes/* --parallel=10",
  "check": "pnpm --parallel --filter \"./packages/**\" run check",
- "dev": "pnpm --parallel --filter \"./packages/**\" run prep --watch"
+ "dev": "pnpm --parallel --filter \"./packages/**\" run prep --watch",
+ "lint": "biome check"
  },
  "simple-git-hooks": {
  "pre-commit": "npx nano-staged"
  },
  "nano-staged": {
- "*.{md,mdx,json,css,less,scss}": "prettier --write",
+ "*.{md,mdx,json,css,less,scss}": [
+ "biome check --write"
+ ],
  "*.{js,jsx,ts,tsx,mjs,cjs}": [
- "prettier --write"
+ "biome check --write"
  ],
  "**/package.json": "sort-package-json"
  },
  "devDependencies": {
+ "@biomejs/biome": "^1.8.3",
  "@changesets/cli": "^2.27.1",
  "cross-env": "^7.0.3",
  "nano-staged": "^0.8.0",
  "nx": "^19.4.3",
- "prettier": "^3.2.5",
  "simple-git-hooks": "^2.11.1",
  "sort-package-json": "^2.10.0",
  "typescript": "^5.3.2",

packages/builder-rsbuild/package.json

@@ -2,11 +2,7 @@
  "name": "storybook-builder-rsbuild",
  "version": "0.0.7",
  "description": "Rsbuild builder for Storybook",
- "keywords": [
- "storybook",
- "rsbuild",
- "rspack"
- ],
+ "keywords": ["storybook", "rsbuild", "rspack"],
  "bugs": {
  "url": "https://github.com/rspack-contrib/storybook-rsbuild/issues"
  },

packages/builder-rsbuild/src/index.ts

@@ -1,19 +1,18 @@
+import { type AddressInfo, createServer } from 'node:net'
+import { join, parse } from 'node:path'
 import * as rsbuildReal from '@rsbuild/core'
-import type { Options } from 'storybook/internal/types'
-import { join, parse } from 'path'
-import { AddressInfo, createServer } from 'net'
+import { mergeRsbuildConfig } from '@rsbuild/core'
 import express from 'express'
 import fs from 'fs-extra'
+import prettyTime from 'pretty-hrtime'
+import { corePath } from 'storybook/core-path'
 import { WebpackInvocationError } from 'storybook/internal/server-errors'
-import type { RsbuildBuilder } from './types'
+import type { Options } from 'storybook/internal/types'
 import rsbuildConfig, {
  type RsbuildBuilderOptions,
 } from './preview/iframe-rsbuild.config'
-import { corePath } from 'storybook/core-path'
 import { applyReactShims } from './react-shims'
-
-import prettyTime from 'pretty-hrtime'
-import { mergeRsbuildConfig } from '@rsbuild/core'
+import type { RsbuildBuilder } from './types'
 
 export * from './types'
 export * from './preview/virtual-module-mapping'
@@ -121,15 +120,15 @@ export const start: RsbuildBuilder['start'] = async ({
  if (!rsbuildBuild) {
  throw new WebpackInvocationError({
  // eslint-disable-next-line local-rules/no-uncategorized-errors
- error: new Error(`Missing Rsbuild build instance at runtime!`),
+ error: new Error('Missing Rsbuild build instance at runtime!'),
  })
  }
 
  const previewResolvedDir = join(corePath, 'dist/preview')
  const previewDirOrigin = previewResolvedDir
 
  router.use(
- `/sb-preview`,
+ '/sb-preview',
  express.static(previewDirOrigin, { immutable: true, maxAge: '5m' }),
  )
 
@@ -146,42 +145,41 @@ export const start: RsbuildBuilder['start'] = async ({
 
 // explicit type annotation to bypass TypeScript check
 // see: https://github.com/microsoft/TypeScript/issues/47663#issuecomment-1519138189
-export const build: ({
- options,
-}: BuilderStartOptions) => Promise<Stats> = async ({ options }) => {
- const { createRsbuild } = await executor.get(options)
- const config = await getConfig(options)
- const rsbuildBuild = await createRsbuild({
- cwd: process.cwd(),
- rsbuildConfig: config,
- })
+export const build: ({ options }: BuilderStartOptions) => Promise<Stats> =
+ async ({ options }) => {
+ const { createRsbuild } = await executor.get(options)
+ const config = await getConfig(options)
+ const rsbuildBuild = await createRsbuild({
+ cwd: process.cwd(),
+ rsbuildConfig: config,
+ })
 
- const previewResolvedDir = join(corePath, 'dist/preview')
- const previewDirOrigin = previewResolvedDir
- const previewDirTarget = join(options.outputDir || '', `sb-preview`)
- let stats: Stats
+  const previewResolvedDir = join(corePath, 'dist/preview')
+  const previewDirOrigin = previewResolvedDir
+  const previewDirTarget = join(options.outputDir || '', 'sb-preview')
+  let stats: Stats
 
- rsbuildBuild.onAfterBuild((params) => {
- stats = params.stats as Stats
- })
+  rsbuildBuild.onAfterBuild((params) => {
+  stats = params.stats as Stats
+  })
 
- const previewFiles = fs.copy(previewDirOrigin, previewDirTarget, {
- filter: (src) => {
- const { ext } = parse(src)
- if (ext) {
- return ext === '.js'
- }
- return true
- },
- })
+  const previewFiles = fs.copy(previewDirOrigin, previewDirTarget, {
+  filter: (src) => {
+  const { ext } = parse(src)
+  if (ext) {
+  return ext === '.js'
+  }
+  return true
+  },
+  })
 
- rsbuildBuild.onAfterBuild((params) => {
- stats = params.stats as Stats
- })
+  rsbuildBuild.onAfterBuild((params) => {
+  stats = params.stats as Stats
+  })
 
- await Promise.all([rsbuildBuild.build(), previewFiles])
- return stats!
-}
+  await Promise.all([rsbuildBuild.build(), previewFiles])
+  return stats!
+ }
 
 export const corePresets = [join(__dirname, './preview-preset.js')]
 

packages/builder-rsbuild/src/loaders/export-order-loader.ts

@@ -1,8 +1,8 @@
 import assert from 'node:assert'
-import { parse as parseCjs, init as initCjsParser } from 'cjs-module-lexer'
+import type { Rspack } from '@rsbuild/core'
+import { init as initCjsParser, parse as parseCjs } from 'cjs-module-lexer'
 import { parse as parseEs } from 'es-module-lexer'
 import MagicString from 'magic-string'
-import type { Rspack } from '@rsbuild/core'
 
 export default async function loader(
  this: Rspack.LoaderContext<any>,

packages/builder-rsbuild/src/preview/iframe-rsbuild.config.ts

@@ -1,23 +1,23 @@
-import { dirname, join, resolve } from 'path'
+import { dirname, join, resolve } from 'node:path'
+import { loadConfig, mergeRsbuildConfig } from '@rsbuild/core'
+import type { RsbuildConfig } from '@rsbuild/core'
+import { pluginTypeCheck } from '@rsbuild/plugin-type-check'
+import { webpack as docsWebpack } from '@storybook/addon-docs/dist/preset'
 // @ts-expect-error (I removed this on purpose, because it's incorrect)
 import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin'
-import type { Options } from 'storybook/internal/types'
-import type { BuilderOptions } from '../types'
-import { globalsNameReferenceMap } from 'storybook/internal/preview/globals'
+import { pluginHtmlMinifierTerser } from 'rsbuild-plugin-html-minifier-terser'
 import {
- stringifyProcessEnvs,
- normalizeStories,
  getBuilderOptions,
  isPreservingSymlinks,
+ normalizeStories,
+ stringifyProcessEnvs,
 } from 'storybook/internal/common'
+import { globalsNameReferenceMap } from 'storybook/internal/preview/globals'
+import type { Options } from 'storybook/internal/types'
 import { dedent } from 'ts-dedent'
-import { getVirtualModules } from './virtual-module-mapping'
-import { loadConfig, mergeRsbuildConfig } from '@rsbuild/core'
-import type { RsbuildConfig } from '@rsbuild/core'
-import { webpack as docsWebpack } from '@storybook/addon-docs/dist/preset'
-import { pluginTypeCheck } from '@rsbuild/plugin-type-check'
+import type { BuilderOptions } from '../types'
 import type { TypescriptOptions } from '../types'
-import { pluginHtmlMinifierTerser } from 'rsbuild-plugin-html-minifier-terser'
+import { getVirtualModules } from './virtual-module-mapping'
 
 const getAbsolutePath = <I extends string>(input: I): I =>
  dirname(require.resolve(join(input, 'package.json'))) as any
@@ -29,25 +29,25 @@ const maybeGetAbsolutePath = <I extends string>(input: I): I | false => {
  }
 }
 
-const managerAPIPath = maybeGetAbsolutePath(`@storybook/manager-api`)
-const componentsPath = maybeGetAbsolutePath(`@storybook/components`)
-const globalPath = maybeGetAbsolutePath(`@storybook/global`)
-const routerPath = maybeGetAbsolutePath(`@storybook/router`)
-const themingPath = maybeGetAbsolutePath(`@storybook/theming`)
+const managerAPIPath = maybeGetAbsolutePath('@storybook/manager-api')
+const componentsPath = maybeGetAbsolutePath('@storybook/components')
+const globalPath = maybeGetAbsolutePath('@storybook/global')
+const routerPath = maybeGetAbsolutePath('@storybook/router')
+const themingPath = maybeGetAbsolutePath('@storybook/theming')
 
 // these packages are not pre-bundled because of react dependencies.
 // these are not dependencies of the builder anymore, thus resolving them can fail.
 // we should remove the aliases in 8.0, I'm not sure why they are here in the first place.
 const storybookPaths: Record<string, string> = {
  ...(managerAPIPath
  ? {
- [`@storybook/manager-api`]: managerAPIPath,
+ '@storybook/manager-api': managerAPIPath,
  }
  : {}),
- ...(componentsPath ? { [`@storybook/components`]: componentsPath } : {}),
- ...(globalPath ? { [`@storybook/global`]: globalPath } : {}),
- ...(routerPath ? { [`@storybook/router`]: routerPath } : {}),
- ...(themingPath ? { [`@storybook/theming`]: themingPath } : {}),
+ ...(componentsPath ? { '@storybook/components': componentsPath } : {}),
+ ...(globalPath ? { '@storybook/global': globalPath } : {}),
+ ...(routerPath ? { '@storybook/router': routerPath } : {}),
+ ...(themingPath ? { '@storybook/theming': themingPath } : {}),
 }
 
 export type RsbuildBuilderOptions = Options & {
@@ -166,7 +166,7 @@ export default async (
  js: options.build?.test?.disableSourcemaps
  ? false
  : 'cheap-module-source-map',
- css: options.build?.test?.disableSourcemaps ? false : true,
+ css: !options.build?.test?.disableSourcemaps,
  },
  distPath: {
  root: resolve(process.cwd(), outputDir),
@@ -303,7 +303,7 @@ export default async (
  return mergeConfig(config, appliedDocsWebpack)
  },
  htmlPlugin: {
- filename: `iframe.html`,
+ filename: 'iframe.html',
  // FIXME: `none` isn't a known option
  chunksSortMode: 'none' as any,
  alwaysWriteToDisk: true,