From fcb0f672c60c8f30518982be8b263a9b00653e1d Mon Sep 17 00:00:00 2001 From: fi3ework Date: Wed, 17 Jul 2024 21:53:45 +0800 Subject: [PATCH] refactor: format with biome --- .github/workflows/ci.yaml | 6 +- .prettierignore | 2 - .prettierrc.json | 6 -- .vscode/settings.json | 23 ++++- biome.json | 52 ++++++++++ package.json | 11 ++- packages/builder-rsbuild/package.json | 6 +- packages/builder-rsbuild/src/index.ts | 80 ++++++++-------- .../src/loaders/export-order-loader.ts | 4 +- .../src/preview/iframe-rsbuild.config.ts | 48 +++++----- .../src/preview/virtual-module-mapping.ts | 30 +++--- packages/builder-rsbuild/src/react-shims.ts | 6 +- packages/builder-rsbuild/src/types.ts | 6 +- packages/react-rsbuild/package.json | 15 +-- .../src/loaders/docgen-resolver.ts | 2 +- .../src/loaders/react-docgen-loader.ts | 29 +++--- packages/react-rsbuild/src/preset.ts | 2 +- packages/react-rsbuild/src/react-docs.ts | 4 +- packages/react-rsbuild/src/types.ts | 4 +- packages/vue3-rsbuild/package.json | 20 +--- .../src/framework-preset-vue3-docs.ts | 8 +- packages/vue3-rsbuild/src/preset.ts | 2 +- packages/vue3-rsbuild/src/types.ts | 10 +- pnpm-lock.yaml | 94 ++++++++++++++++++- sandboxes/react-16/.storybook/main.ts | 7 +- sandboxes/react-16/public/index.html | 0 sandboxes/react-16/src/App.tsx | 2 +- .../react-16/src/stories/Page.stories.ts | 2 +- sandboxes/react-18/.storybook/main.ts | 2 +- sandboxes/react-18/src/App.tsx | 2 +- .../react-18/src/stories/Page.stories.ts | 2 +- sandboxes/vue3/.storybook/main.ts | 2 +- sandboxes/vue3/src/stories/Button.stories.ts | 2 +- sandboxes/vue3/src/stories/Button.vue | 4 +- sandboxes/vue3/src/stories/Header.stories.ts | 2 +- sandboxes/vue3/src/stories/Page.stories.ts | 2 +- scripts/prepare/bundle.ts | 10 +- scripts/prepare/check.ts | 2 +- scripts/utils/exec.ts | 2 +- 39 files changed, 321 insertions(+), 192 deletions(-) delete mode 100644 .prettierignore delete mode 100644 .prettierrc.json create mode 100644 biome.json create mode 100644 sandboxes/react-16/public/index.html diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml index ddf7ee0..be36b2c 100644 --- a/.github/workflows/ci.yaml +++ b/.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 diff --git a/.prettierignore b/.prettierignore deleted file mode 100644 index 8f7356c..0000000 --- a/.prettierignore +++ /dev/null @@ -1,2 +0,0 @@ - -*.handlebars \ No newline at end of file diff --git a/.prettierrc.json b/.prettierrc.json deleted file mode 100644 index d50a919..0000000 --- a/.prettierrc.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "trailingComma": "all", - "tabWidth": 2, - "semi": false, - "singleQuote": true -} diff --git a/.vscode/settings.json b/.vscode/settings.json index 25fa621..10ab1f0 100644 --- a/.vscode/settings.json +++ b/.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" + } } diff --git a/biome.json b/biome.json new file mode 100644 index 0000000..a186116 --- /dev/null +++ b/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" + } + } + } +} diff --git a/package.json b/package.json index 692e243..2132222 100644 --- a/package.json +++ b/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", diff --git a/packages/builder-rsbuild/package.json b/packages/builder-rsbuild/package.json index 1cf87f8..ca58d9c 100644 --- a/packages/builder-rsbuild/package.json +++ b/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" }, diff --git a/packages/builder-rsbuild/src/index.ts b/packages/builder-rsbuild/src/index.ts index 02d50b1..5161c5d 100644 --- a/packages/builder-rsbuild/src/index.ts +++ b/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,7 +120,7 @@ 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!'), }) } @@ -129,7 +128,7 @@ export const start: RsbuildBuilder['start'] = async ({ 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 = 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 = + 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')] diff --git a/packages/builder-rsbuild/src/loaders/export-order-loader.ts b/packages/builder-rsbuild/src/loaders/export-order-loader.ts index be30f5a..fa0cb71 100644 --- a/packages/builder-rsbuild/src/loaders/export-order-loader.ts +++ b/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, diff --git a/packages/builder-rsbuild/src/preview/iframe-rsbuild.config.ts b/packages/builder-rsbuild/src/preview/iframe-rsbuild.config.ts index ae35a2e..d02b86a 100644 --- a/packages/builder-rsbuild/src/preview/iframe-rsbuild.config.ts +++ b/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 = (input: I): I => dirname(require.resolve(join(input, 'package.json'))) as any @@ -29,11 +29,11 @@ const maybeGetAbsolutePath = (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. @@ -41,13 +41,13 @@ const themingPath = maybeGetAbsolutePath(`@storybook/theming`) const storybookPaths: Record = { ...(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, diff --git a/packages/builder-rsbuild/src/preview/virtual-module-mapping.ts b/packages/builder-rsbuild/src/preview/virtual-module-mapping.ts index 82dbbbf..2e1a225 100644 --- a/packages/builder-rsbuild/src/preview/virtual-module-mapping.ts +++ b/packages/builder-rsbuild/src/preview/virtual-module-mapping.ts @@ -1,22 +1,22 @@ -import path from 'path' -import fs from 'fs' -import type { - NormalizedStoriesSpecifier, - Options, - PreviewAnnotation, -} from 'storybook/internal/types' -import { join, resolve } from 'path' +import fs from 'node:fs' +import path from 'node:path' +import { join, resolve } from 'node:path' +import { webpackIncludeRegexp } from '@storybook/core-webpack' +import slash from 'slash' import { + getBuilderOptions, handlebars, loadPreviewOrConfigFile, normalizeStories, readTemplate, - getBuilderOptions, } from 'storybook/internal/common' -import slash from 'slash' -import { webpackIncludeRegexp } from '@storybook/core-webpack' +import type { + NormalizedStoriesSpecifier, + Options, + PreviewAnnotation, +} from 'storybook/internal/types' import { dedent } from 'ts-dedent' -import { BuilderOptions } from '../types' +import type { BuilderOptions } from '../types' export const getVirtualModules = async (options: Options) => { const virtualModules: Record = {} @@ -83,9 +83,9 @@ export const getVirtualModules = async (options: Options) => { ).replace(/\\/g, '\\\\') entries.push(configEntryPath) - Object.entries(virtualModules).forEach(([key, value]) => { + for (const [key, value] of Object.entries(virtualModules)) { fs.writeFileSync(key, value) - }) + } return { virtualModules, @@ -125,7 +125,7 @@ export function toImportFn( relativeOffset: string, { needPipelinedImport }: { needPipelinedImport?: boolean } = {}, ) { - let pipelinedImport = `const pipeline = (x) => x();` + let pipelinedImport = 'const pipeline = (x) => x();' if (needPipelinedImport) { pipelinedImport = ` const importPipeline = ${importPipeline}; diff --git a/packages/builder-rsbuild/src/react-shims.ts b/packages/builder-rsbuild/src/react-shims.ts index 025f372..54381db 100644 --- a/packages/builder-rsbuild/src/react-shims.ts +++ b/packages/builder-rsbuild/src/react-shims.ts @@ -3,10 +3,10 @@ * We had to copy this file because there's no rsbuildFinal there. */ -import type { Options } from 'storybook/internal/types' -import { join, dirname, isAbsolute } from 'path' -import { readFile } from 'fs/promises' +import { readFile } from 'node:fs/promises' +import { dirname, isAbsolute, join } from 'node:path' import type { RsbuildConfig } from '@rsbuild/core' +import type { Options } from 'storybook/internal/types' /** * Get react-dom version from the resolvedReact preset, which points to either diff --git a/packages/builder-rsbuild/src/types.ts b/packages/builder-rsbuild/src/types.ts index 2f76a32..6d1306b 100644 --- a/packages/builder-rsbuild/src/types.ts +++ b/packages/builder-rsbuild/src/types.ts @@ -1,12 +1,12 @@ -import type { Stats } from './index' import type { RsbuildConfig } from '@rsbuild/core' +import type { PluginTypeCheckerOptions } from '@rsbuild/plugin-type-check' import type { Builder, + BuilderResult as BuilderResultBase, Options, TypescriptOptions as TypeScriptOptionsBase, - BuilderResult as BuilderResultBase, } from 'storybook/internal/types' -import type { PluginTypeCheckerOptions } from '@rsbuild/plugin-type-check' +import type { Stats } from './index' // Storybook's Stats are optional Webpack related property type RsbuildStats = { diff --git a/packages/react-rsbuild/package.json b/packages/react-rsbuild/package.json index 8628c23..f2b6427 100644 --- a/packages/react-rsbuild/package.json +++ b/packages/react-rsbuild/package.json @@ -2,12 +2,7 @@ "name": "storybook-react-rsbuild", "version": "0.0.7", "description": "Storybook for React and Rsbuild: Develop React components in isolation with Hot Reloading.", - "keywords": [ - "storybook", - "rsbuild", - "rspack", - "react" - ], + "keywords": ["storybook", "rsbuild", "rspack", "react"], "bugs": { "url": "https://github.com/rspack-contrib/storybook-rsbuild/issues" }, @@ -41,13 +36,7 @@ "main": "dist/index.js", "module": "dist/index.mjs", "types": "dist/index.d.ts", - "files": [ - "dist/**/*", - "README.md", - "*.js", - "*.d.ts", - "!src/**/*" - ], + "files": ["dist/**/*", "README.md", "*.js", "*.d.ts", "!src/**/*"], "scripts": { "build": "pnpm run prep --optimized", "check": "node --loader ../../scripts/node_modules/esbuild-register/loader.js -r ../../scripts/node_modules/esbuild-register/register.js ../../scripts/prepare/check.ts", diff --git a/packages/react-rsbuild/src/loaders/docgen-resolver.ts b/packages/react-rsbuild/src/loaders/docgen-resolver.ts index 4b0e7e1..bb1d837 100644 --- a/packages/react-rsbuild/src/loaders/docgen-resolver.ts +++ b/packages/react-rsbuild/src/loaders/docgen-resolver.ts @@ -1,4 +1,4 @@ -import { extname } from 'path' +import { extname } from 'node:path' import resolve from 'resolve' export class ReactDocgenResolveError extends Error { diff --git a/packages/react-rsbuild/src/loaders/react-docgen-loader.ts b/packages/react-rsbuild/src/loaders/react-docgen-loader.ts index 02d5ca8..0824bd1 100644 --- a/packages/react-rsbuild/src/loaders/react-docgen-loader.ts +++ b/packages/react-rsbuild/src/loaders/react-docgen-loader.ts @@ -1,23 +1,23 @@ +import findUp from 'find-up' +import MagicString from 'magic-string' import { - parse, - builtinResolvers as docgenResolver, + ERROR_CODES, builtinHandlers as docgenHandlers, + builtinResolvers as docgenResolver, makeFsImporter, - ERROR_CODES, + parse, utils, } from 'react-docgen' -import * as TsconfigPaths from 'tsconfig-paths' -import findUp from 'find-up' -import MagicString from 'magic-string' -// @ts-expect-error can not reexport `LoaderContext` from @rsbuild/core -import type { LoaderContext } from 'webpack' import type { + Documentation, Handler, NodePath, babelTypes as t, - Documentation, } from 'react-docgen' import { logger } from 'storybook/internal/node-logger' +import * as TsconfigPaths from 'tsconfig-paths' +// @ts-expect-error can not reexport `LoaderContext` from @rsbuild/core +import type { LoaderContext } from 'webpack' import { RESOLVE_EXTENSIONS, @@ -86,11 +86,11 @@ let tsconfigPathsInitializeStatus: let resolveTsconfigPathsInitialingPromise: ( value: void | PromiseLike, ) => void -let tsconfigPathsInitialingPromise = new Promise((resolve) => { +const tsconfigPathsInitialingPromise = new Promise((resolve) => { resolveTsconfigPathsInitialingPromise = resolve }) -let finishInitialization = () => { +const finishInitialization = () => { resolveTsconfigPathsInitialingPromise() tsconfigPathsInitializeStatus = 'initialized' } @@ -142,13 +142,13 @@ export default async function reactDocgenLoader( const magicString = new MagicString(source) - docgenResults.forEach((info) => { + for (const info of docgenResults) { const { actualName, definedInFile, ...docgenInfo } = info if (actualName && definedInFile === this.resourcePath) { const docNode = JSON.stringify(docgenInfo) magicString.append(`;${actualName}.__docgenInfo=${docNode}`) } - }) + } callback( null, @@ -188,9 +188,8 @@ export function getReactDocgenImporter( if (matchingPath) { const match = matchingPath(filename) return match || filename - } else { - return filename } + return filename })() const result = defaultLookupModule(mappedFilenameByPaths, basedir) diff --git a/packages/react-rsbuild/src/preset.ts b/packages/react-rsbuild/src/preset.ts index 5f19de3..793e937 100644 --- a/packages/react-rsbuild/src/preset.ts +++ b/packages/react-rsbuild/src/preset.ts @@ -1,4 +1,4 @@ -import { dirname, join } from 'path' +import { dirname, join } from 'node:path' import type { PresetProperty } from 'storybook/internal/types' import { rsbuildFinalDocs } from './react-docs' import type { StorybookConfig } from './types' diff --git a/packages/react-rsbuild/src/react-docs.ts b/packages/react-rsbuild/src/react-docs.ts index e4e9ac3..e2d9dba 100644 --- a/packages/react-rsbuild/src/react-docs.ts +++ b/packages/react-rsbuild/src/react-docs.ts @@ -1,9 +1,9 @@ -import { hasDocsOrControls } from 'storybook/internal/docs-tools' import { mergeRsbuildConfig } from '@rsbuild/core' +import { hasDocsOrControls } from 'storybook/internal/docs-tools' import type { RsbuildConfig } from '@rsbuild/core' -import type { StorybookConfig } from './types' import { requirer } from './requirer' +import type { StorybookConfig } from './types' export const rsbuildFinalDocs: NonNullable< StorybookConfig['rsbuildFinal'] diff --git a/packages/react-rsbuild/src/types.ts b/packages/react-rsbuild/src/types.ts index 2b0bd8e..5e4c28d 100644 --- a/packages/react-rsbuild/src/types.ts +++ b/packages/react-rsbuild/src/types.ts @@ -1,13 +1,13 @@ +import type { PluginOptions as ReactDocgenTypescriptOptions } from '@storybook/react-docgen-typescript-plugin' import type { - StorybookConfigRsbuild, BuilderOptions, + StorybookConfigRsbuild, TypescriptOptions as TypescriptOptionsBuilder, } from 'storybook-builder-rsbuild' import type { StorybookConfig as StorybookConfigBase, TypescriptOptions as TypescriptOptionsBase, } from 'storybook/internal/types' -import type { PluginOptions as ReactDocgenTypescriptOptions } from '@storybook/react-docgen-typescript-plugin' type FrameworkName = 'storybook-react-rsbuild' type BuilderName = 'storybook-builder-rsbuild' diff --git a/packages/vue3-rsbuild/package.json b/packages/vue3-rsbuild/package.json index 0e0b3b4..93c3669 100644 --- a/packages/vue3-rsbuild/package.json +++ b/packages/vue3-rsbuild/package.json @@ -2,12 +2,7 @@ "name": "storybook-vue3-rsbuild", "version": "0.0.7", "description": "Storybook for Vue3 and Rsbuild: Develop React Component in isolation with Hot Reloading.", - "keywords": [ - "storybook", - "rsbuild", - "rspack", - "vue3" - ], + "keywords": ["storybook", "rsbuild", "rspack", "vue3"], "bugs": { "url": "https://github.com/rspack-contrib/storybook-rsbuild/issues" }, @@ -37,13 +32,7 @@ "main": "dist/index.js", "module": "dist/index.mjs", "types": "dist/index.d.ts", - "files": [ - "dist/**/*", - "README.md", - "*.js", - "*.d.ts", - "!src/**/*" - ], + "files": ["dist/**/*", "README.md", "*.js", "*.d.ts", "!src/**/*"], "scripts": { "build": "pnpm run prep --optimized", "check": "node --loader ../../scripts/node_modules/esbuild-register/loader.js -r ../../scripts/node_modules/esbuild-register/register.js ../../scripts/prepare/check.ts", @@ -77,10 +66,7 @@ "access": "public" }, "bundler": { - "entries": [ - "./src/index.ts", - "./src/preset.ts" - ], + "entries": ["./src/index.ts", "./src/preset.ts"], "platform": "node" } } diff --git a/packages/vue3-rsbuild/src/framework-preset-vue3-docs.ts b/packages/vue3-rsbuild/src/framework-preset-vue3-docs.ts index c760d34..299fbb7 100644 --- a/packages/vue3-rsbuild/src/framework-preset-vue3-docs.ts +++ b/packages/vue3-rsbuild/src/framework-preset-vue3-docs.ts @@ -1,6 +1,6 @@ -import type { StorybookConfig } from './types' -import { hasDocsOrControls } from 'storybook/internal/docs-tools' import { mergeRsbuildConfig } from '@rsbuild/core' +import { hasDocsOrControls } from 'storybook/internal/docs-tools' +import type { StorybookConfig } from './types' export const rsbuildFinal: StorybookConfig['rsbuildFinal'] = ( config, @@ -10,7 +10,7 @@ export const rsbuildFinal: StorybookConfig['rsbuildFinal'] = ( let vueDocgenOptions = {} - options.presetsList?.forEach((preset) => { + for (const preset of options.presetsList || []) { if (preset.name.includes('addon-docs') && preset.options.vueDocgenOptions) { const appendableOptions = preset.options.vueDocgenOptions vueDocgenOptions = { @@ -18,7 +18,7 @@ export const rsbuildFinal: StorybookConfig['rsbuildFinal'] = ( ...appendableOptions, } } - }) + } const finalConfig = mergeRsbuildConfig(config, { tools: { diff --git a/packages/vue3-rsbuild/src/preset.ts b/packages/vue3-rsbuild/src/preset.ts index 3afdfbc..628d365 100644 --- a/packages/vue3-rsbuild/src/preset.ts +++ b/packages/vue3-rsbuild/src/preset.ts @@ -1,5 +1,5 @@ +import { dirname, join } from 'node:path' import type { PresetProperty } from 'storybook/internal/types' -import { dirname, join } from 'path' export { rsbuildFinal } from './framework-preset-vue3-docs' diff --git a/packages/vue3-rsbuild/src/types.ts b/packages/vue3-rsbuild/src/types.ts index 8a3fb5a..d2b9533 100644 --- a/packages/vue3-rsbuild/src/types.ts +++ b/packages/vue3-rsbuild/src/types.ts @@ -1,12 +1,12 @@ import type { - StorybookConfig as StorybookConfigBase, - TypescriptOptions as TypescriptOptionsBaseAndVue, -} from 'storybook/internal/types' -import type { + BuilderOptions, StorybookConfigRsbuild, TypescriptOptions as TypescriptOptionsBuilder, - BuilderOptions, } from 'storybook-builder-rsbuild' +import type { + StorybookConfig as StorybookConfigBase, + TypescriptOptions as TypescriptOptionsBaseAndVue, +} from 'storybook/internal/types' type FrameworkName = 'storybook-vue3-rsbuild' type BuilderName = 'storybook-builder-rsbuild' diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 16762a0..6f715f7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,9 @@ importers: .: devDependencies: + '@biomejs/biome': + specifier: ^1.8.3 + version: 1.8.3 '@changesets/cli': specifier: ^2.27.1 version: 2.27.1 @@ -20,9 +23,6 @@ importers: nx: specifier: ^19.4.3 version: 19.4.3 - prettier: - specifier: ^3.2.5 - version: 3.2.5 simple-git-hooks: specifier: ^2.11.1 version: 2.11.1 @@ -1079,6 +1079,59 @@ packages: '@base2/pretty-print-object@1.0.1': resolution: {integrity: sha512-4iri8i1AqYHJE2DstZYkyEprg6Pq6sKx3xn5FpySk9sNhH7qN2LLlHJCfDTZRILNwQNPD7mATWM0TBui7uC1pA==} + '@biomejs/biome@1.8.3': + resolution: {integrity: sha512-/uUV3MV+vyAczO+vKrPdOW0Iaet7UnJMU4bNMinggGJTAnBPjCoLEYcyYtYHNnUNYlv4xZMH6hVIQCAozq8d5w==} + engines: {node: '>=14.21.3'} + hasBin: true + + '@biomejs/cli-darwin-arm64@1.8.3': + resolution: {integrity: sha512-9DYOjclFpKrH/m1Oz75SSExR8VKvNSSsLnVIqdnKexj6NwmiMlKk94Wa1kZEdv6MCOHGHgyyoV57Cw8WzL5n3A==} + engines: {node: '>=14.21.3'} + cpu: [arm64] + os: [darwin] + + '@biomejs/cli-darwin-x64@1.8.3': + resolution: {integrity: sha512-UeW44L/AtbmOF7KXLCoM+9PSgPo0IDcyEUfIoOXYeANaNXXf9mLUwV1GeF2OWjyic5zj6CnAJ9uzk2LT3v/wAw==} + engines: {node: '>=14.21.3'} + cpu: [x64] + os: [darwin] + + '@biomejs/cli-linux-arm64-musl@1.8.3': + resolution: {integrity: sha512-9yjUfOFN7wrYsXt/T/gEWfvVxKlnh3yBpnScw98IF+oOeCYb5/b/+K7YNqKROV2i1DlMjg9g/EcN9wvj+NkMuQ==} + engines: {node: '>=14.21.3'} + cpu: [arm64] + os: [linux] + + '@biomejs/cli-linux-arm64@1.8.3': + resolution: {integrity: sha512-fed2ji8s+I/m8upWpTJGanqiJ0rnlHOK3DdxsyVLZQ8ClY6qLuPc9uehCREBifRJLl/iJyQpHIRufLDeotsPtw==} + engines: {node: '>=14.21.3'} + cpu: [arm64] + os: [linux] + + '@biomejs/cli-linux-x64-musl@1.8.3': + resolution: {integrity: sha512-UHrGJX7PrKMKzPGoEsooKC9jXJMa28TUSMjcIlbDnIO4EAavCoVmNQaIuUSH0Ls2mpGMwUIf+aZJv657zfWWjA==} + engines: {node: '>=14.21.3'} + cpu: [x64] + os: [linux] + + '@biomejs/cli-linux-x64@1.8.3': + resolution: {integrity: sha512-I8G2QmuE1teISyT8ie1HXsjFRz9L1m5n83U1O6m30Kw+kPMPSKjag6QGUn+sXT8V+XWIZxFFBoTDEDZW2KPDDw==} + engines: {node: '>=14.21.3'} + cpu: [x64] + os: [linux] + + '@biomejs/cli-win32-arm64@1.8.3': + resolution: {integrity: sha512-J+Hu9WvrBevfy06eU1Na0lpc7uR9tibm9maHynLIoAjLZpQU3IW+OKHUtyL8p6/3pT2Ju5t5emReeIS2SAxhkQ==} + engines: {node: '>=14.21.3'} + cpu: [arm64] + os: [win32] + + '@biomejs/cli-win32-x64@1.8.3': + resolution: {integrity: sha512-/PJ59vA1pnQeKahemaQf4Nyj7IKUvGQSc3Ze1uIGi+Wvr1xF7rGobSrAAG01T/gUDG21vkDsZYM03NAmPiVkqg==} + engines: {node: '>=14.21.3'} + cpu: [x64] + os: [win32] + '@changesets/apply-release-plan@7.0.0': resolution: {integrity: sha512-vfi69JR416qC9hWmFGSxj7N6wA5J222XNBmezSVATPWDVPIF7gkd4d8CpbEbXmRWbVrkoli3oerGS6dcL/BGsQ==} @@ -6945,6 +6998,41 @@ snapshots: '@base2/pretty-print-object@1.0.1': {} + '@biomejs/biome@1.8.3': + optionalDependencies: + '@biomejs/cli-darwin-arm64': 1.8.3 + '@biomejs/cli-darwin-x64': 1.8.3 + '@biomejs/cli-linux-arm64': 1.8.3 + '@biomejs/cli-linux-arm64-musl': 1.8.3 + '@biomejs/cli-linux-x64': 1.8.3 + '@biomejs/cli-linux-x64-musl': 1.8.3 + '@biomejs/cli-win32-arm64': 1.8.3 + '@biomejs/cli-win32-x64': 1.8.3 + + '@biomejs/cli-darwin-arm64@1.8.3': + optional: true + + '@biomejs/cli-darwin-x64@1.8.3': + optional: true + + '@biomejs/cli-linux-arm64-musl@1.8.3': + optional: true + + '@biomejs/cli-linux-arm64@1.8.3': + optional: true + + '@biomejs/cli-linux-x64-musl@1.8.3': + optional: true + + '@biomejs/cli-linux-x64@1.8.3': + optional: true + + '@biomejs/cli-win32-arm64@1.8.3': + optional: true + + '@biomejs/cli-win32-x64@1.8.3': + optional: true + '@changesets/apply-release-plan@7.0.0': dependencies: '@babel/runtime': 7.24.5 diff --git a/sandboxes/react-16/.storybook/main.ts b/sandboxes/react-16/.storybook/main.ts index 83d3d2a..43bd634 100644 --- a/sandboxes/react-16/.storybook/main.ts +++ b/sandboxes/react-16/.storybook/main.ts @@ -1,5 +1,5 @@ +import { dirname, join } from 'node:path' import type { StorybookConfig } from 'storybook-react-rsbuild' -import { join, dirname } from 'path' /** * This function is used to resolve the absolute path of a package. @@ -27,12 +27,15 @@ const config: StorybookConfig = { }, }, docs: { - autodocs: 'tag', + defaultName: 'Docs', + docsMode: false, + autodocs: false, }, typescript: { reactDocgen: 'react-docgen', check: true, }, + staticDirs: ['../public'], } export default config diff --git a/sandboxes/react-16/public/index.html b/sandboxes/react-16/public/index.html new file mode 100644 index 0000000..e69de29 diff --git a/sandboxes/react-16/src/App.tsx b/sandboxes/react-16/src/App.tsx index 6703435..dc1b3a4 100644 --- a/sandboxes/react-16/src/App.tsx +++ b/sandboxes/react-16/src/App.tsx @@ -8,7 +8,7 @@ function App() { return ( <> diff --git a/sandboxes/react-16/src/stories/Page.stories.ts b/sandboxes/react-16/src/stories/Page.stories.ts index 7a64b87..cb5c26a 100644 --- a/sandboxes/react-16/src/stories/Page.stories.ts +++ b/sandboxes/react-16/src/stories/Page.stories.ts @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react' -import { within, userEvent, expect } from '@storybook/test' +import { expect, userEvent, within } from '@storybook/test' import { Page } from './Page' diff --git a/sandboxes/react-18/.storybook/main.ts b/sandboxes/react-18/.storybook/main.ts index 5b67f52..a2ef965 100644 --- a/sandboxes/react-18/.storybook/main.ts +++ b/sandboxes/react-18/.storybook/main.ts @@ -1,5 +1,5 @@ +import { dirname, join } from 'node:path' import type { StorybookConfig } from 'storybook-react-rsbuild' -import { join, dirname } from 'path' /** * This function is used to resolve the absolute path of a package. diff --git a/sandboxes/react-18/src/App.tsx b/sandboxes/react-18/src/App.tsx index 6703435..dc1b3a4 100644 --- a/sandboxes/react-18/src/App.tsx +++ b/sandboxes/react-18/src/App.tsx @@ -8,7 +8,7 @@ function App() { return ( <> diff --git a/sandboxes/react-18/src/stories/Page.stories.ts b/sandboxes/react-18/src/stories/Page.stories.ts index 7a64b87..cb5c26a 100644 --- a/sandboxes/react-18/src/stories/Page.stories.ts +++ b/sandboxes/react-18/src/stories/Page.stories.ts @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react' -import { within, userEvent, expect } from '@storybook/test' +import { expect, userEvent, within } from '@storybook/test' import { Page } from './Page' diff --git a/sandboxes/vue3/.storybook/main.ts b/sandboxes/vue3/.storybook/main.ts index 0117673..041d5d9 100644 --- a/sandboxes/vue3/.storybook/main.ts +++ b/sandboxes/vue3/.storybook/main.ts @@ -1,4 +1,4 @@ -import { join, dirname } from 'path' +import { dirname, join } from 'node:path' import type { StorybookConfig } from 'storybook-vue3-rsbuild' /** diff --git a/sandboxes/vue3/src/stories/Button.stories.ts b/sandboxes/vue3/src/stories/Button.stories.ts index 9d4d263..dac8711 100644 --- a/sandboxes/vue3/src/stories/Button.stories.ts +++ b/sandboxes/vue3/src/stories/Button.stories.ts @@ -1,5 +1,5 @@ -import type { Meta, StoryObj } from '@storybook/vue3' import { fn } from '@storybook/test' +import type { Meta, StoryObj } from '@storybook/vue3' import Button from './Button.vue' // More on how to set up stories at: https://storybook.js.org/docs/writing-stories diff --git a/sandboxes/vue3/src/stories/Button.vue b/sandboxes/vue3/src/stories/Button.vue index 068b920..6d1f1d6 100644 --- a/sandboxes/vue3/src/stories/Button.vue +++ b/sandboxes/vue3/src/stories/Button.vue @@ -30,9 +30,7 @@ const props = withDefaults( { primary: false }, ) -const emit = defineEmits<{ - (e: 'click', id: number): void -}>() +const emit = defineEmits<(e: 'click', id: number) => void>() const classes = computed(() => ({ 'storybook-button': true, diff --git a/sandboxes/vue3/src/stories/Header.stories.ts b/sandboxes/vue3/src/stories/Header.stories.ts index 5b0e34e..197142b 100644 --- a/sandboxes/vue3/src/stories/Header.stories.ts +++ b/sandboxes/vue3/src/stories/Header.stories.ts @@ -1,5 +1,5 @@ -import type { Meta, StoryObj } from '@storybook/vue3' import { fn } from '@storybook/test' +import type { Meta, StoryObj } from '@storybook/vue3' import MyHeader from './Header.vue' diff --git a/sandboxes/vue3/src/stories/Page.stories.ts b/sandboxes/vue3/src/stories/Page.stories.ts index 04bfe2a..b89c59d 100644 --- a/sandboxes/vue3/src/stories/Page.stories.ts +++ b/sandboxes/vue3/src/stories/Page.stories.ts @@ -1,5 +1,5 @@ +import { expect, userEvent, within } from '@storybook/test' import type { Meta, StoryObj } from '@storybook/vue3' -import { within, userEvent, expect } from '@storybook/test' import MyPage from './Page.vue' const meta = { diff --git a/scripts/prepare/bundle.ts b/scripts/prepare/bundle.ts index 740dc16..dd74ae4 100644 --- a/scripts/prepare/bundle.ts +++ b/scripts/prepare/bundle.ts @@ -3,14 +3,14 @@ * to follow the build process of Storybook to ease migration. */ +import path, { dirname, join, relative } from 'node:path' +import aliasPlugin from 'esbuild-plugin-alias' import * as fs from 'fs-extra' -import path, { dirname, join, relative } from 'path' +import slash from 'slash' +import dedent from 'ts-dedent' import type { Options } from 'tsup' -import type { PackageJson } from 'type-fest' import { build } from 'tsup' -import aliasPlugin from 'esbuild-plugin-alias' -import dedent from 'ts-dedent' -import slash from 'slash' +import type { PackageJson } from 'type-fest' import { exec } from '../utils/exec' /* TYPES */ diff --git a/scripts/prepare/check.ts b/scripts/prepare/check.ts index 09fe67e..8827298 100755 --- a/scripts/prepare/check.ts +++ b/scripts/prepare/check.ts @@ -3,7 +3,7 @@ * to follow the build process of Storybook to ease migration. */ -import { join } from 'path' +import { join } from 'node:path' import fs from 'fs-extra' import ts from 'typescript' diff --git a/scripts/utils/exec.ts b/scripts/utils/exec.ts index 1dddac6..e444b0a 100644 --- a/scripts/utils/exec.ts +++ b/scripts/utils/exec.ts @@ -3,9 +3,9 @@ * to follow the build process of Storybook to ease migration. */ +import chalk from 'chalk' /* eslint-disable no-await-in-loop, no-restricted-syntax */ import type { ExecaChildProcess, Options } from 'execa' -import chalk from 'chalk' import { execa } from 'execa' const logger = console