diff --git a/examples/vite/index.html b/examples/vite/index.html index 4ab94c45..ffb08ef2 100644 --- a/examples/vite/index.html +++ b/examples/vite/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/vite/src/assets/base.css b/examples/vite/src/assets/base.css index b25093ba..df934ae1 100644 --- a/examples/vite/src/assets/base.css +++ b/examples/vite/src/assets/base.css @@ -63,10 +63,22 @@ body { min-height: 100vh; color: var(--color-text); background: var(--color-background); - transition: color 0.5s, background-color 0.5s; + transition: + color 0.5s, + background-color 0.5s; line-height: 1.6; - font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, - Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + font-family: + Inter, + -apple-system, + BlinkMacSystemFont, + 'Segoe UI', + Roboto, + Oxygen, + Ubuntu, + Cantarell, + 'Fira Sans', + 'Droid Sans', + 'Helvetica Neue', sans-serif; font-size: 15px; text-rendering: optimizeLegibility; diff --git a/examples/vite/src/writing-stories/5-using-the-play-function.stories.ts b/examples/vite/src/writing-stories/5-using-the-play-function.stories.ts index 6da3fdd6..e2414a3e 100644 --- a/examples/vite/src/writing-stories/5-using-the-play-function.stories.ts +++ b/examples/vite/src/writing-stories/5-using-the-play-function.stories.ts @@ -53,8 +53,8 @@ export const FilledForm: Story = { // 👇 Assert DOM structure await expect( canvas.getByText( - 'Everything is perfect. Your account is ready and we should probably get you started!' - ) + 'Everything is perfect. Your account is ready and we should probably get you started!', + ), ).toBeInTheDocument() }, } diff --git a/examples/vite/src/writing-stories/5-using-the-play-function.stories.vue b/examples/vite/src/writing-stories/5-using-the-play-function.stories.vue index 541d33d4..f33abc9a 100644 --- a/examples/vite/src/writing-stories/5-using-the-play-function.stories.vue +++ b/examples/vite/src/writing-stories/5-using-the-play-function.stories.vue @@ -23,8 +23,8 @@ async function playFunction({ canvasElement }) { // 👇 Assert DOM structure await expect( canvas.getByText( - 'Everything is perfect. Your account is ready and we should probably get you started!' - ) + 'Everything is perfect. Your account is ready and we should probably get you started!', + ), ).toBeInTheDocument() } diff --git a/package.json b/package.json index 3110dc92..87c874f4 100644 --- a/package.json +++ b/package.json @@ -93,7 +93,7 @@ "@storybook/csf": "^0.1.1", "@storybook/mdx2-csf": "^1.1.0", "consola": "^3.2.3", - "prettier": "^2.8.8", + "prettier": "^3.0.3", "prettier-plugin-organize-imports": "^3.2.3", "unplugin": "^1.5.0" }, diff --git a/playground/index.html b/playground/index.html index 25ad3964..ed98d44a 100644 --- a/playground/index.html +++ b/playground/index.html @@ -1,4 +1,4 @@ - + diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 08f2dcee..7fe4ff5e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -18,11 +18,11 @@ importers: specifier: ^3.2.3 version: 3.2.3 prettier: - specifier: ^2.8.8 - version: 2.8.8 + specifier: ^3.0.3 + version: 3.0.3 prettier-plugin-organize-imports: specifier: ^3.2.3 - version: 3.2.3(prettier@2.8.8)(typescript@5.2.2) + version: 3.2.3(prettier@3.0.3)(typescript@5.2.2) unplugin: specifier: ^1.5.0 version: 1.5.0 @@ -9065,7 +9065,7 @@ packages: engines: {node: '>= 0.8.0'} dev: true - /prettier-plugin-organize-imports@3.2.3(prettier@2.8.8)(typescript@5.2.2): + /prettier-plugin-organize-imports@3.2.3(prettier@3.0.3)(typescript@5.2.2): resolution: {integrity: sha512-KFvk8C/zGyvUaE3RvxN2MhCLwzV6OBbFSkwZ2OamCrs9ZY4i5L77jQ/w4UmUr+lqX8qbaqVq6bZZkApn+IgJSg==} peerDependencies: '@volar/vue-language-plugin-pug': ^1.0.4 @@ -9078,7 +9078,7 @@ packages: '@volar/vue-typescript': optional: true dependencies: - prettier: 2.8.8 + prettier: 3.0.3 typescript: 5.2.2 dev: false @@ -9086,6 +9086,13 @@ packages: resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==} engines: {node: '>=10.13.0'} hasBin: true + dev: true + + /prettier@3.0.3: + resolution: {integrity: sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==} + engines: {node: '>=14'} + hasBin: true + dev: false /pretty-format@27.5.1: resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==} diff --git a/src/core/indexer.ts b/src/core/indexer.ts index fd100c7c..46e50d30 100644 --- a/src/core/indexer.ts +++ b/src/core/indexer.ts @@ -5,7 +5,7 @@ import { toId } from '@storybook/csf' export async function indexer( fileName: string, - options: IndexerOptions + options: IndexerOptions, ): Promise { const code = (await fs.readFile(fileName, { encoding: 'utf-8' })).toString() return indexerCode(code, options) @@ -13,7 +13,7 @@ export async function indexer( export function indexerCode( code: string, - { makeTitle }: IndexerOptions + { makeTitle }: IndexerOptions, ): IndexedCSFFile { const { meta, stories, docs } = parse(code) const indexedStories: IndexedStory[] = stories diff --git a/src/core/parser.ts b/src/core/parser.ts index df73b934..ed74a596 100644 --- a/src/core/parser.ts +++ b/src/core/parser.ts @@ -35,7 +35,7 @@ export function parse(code: string) { const resolvedScript = resolveScript(descriptor) const { meta, stories } = parseTemplate(descriptor.template.content) const docsBlock = descriptor.customBlocks?.find( - (block) => block.type === 'docs' + (block) => block.type === 'docs', ) const docs = docsBlock?.content.trim() return { @@ -86,7 +86,7 @@ function parseTemplate(content: string): { const storyTemplate = parseSFC( story.loc.source .replace(//, '') + .replace(/<\/Story>/, ''), ).descriptor.template?.content if (storyTemplate === undefined) throw new Error('No template found in Story') @@ -138,7 +138,7 @@ function extractProp(node: ElementNode, name: string) { (prop.name === 'bind' && prop.type === DIRECTIVE && prop.arg?.type === SIMPLE_EXPRESSION && - prop.arg?.content === name) + prop.arg?.content === name), ) } } diff --git a/src/core/transform.ts b/src/core/transform.ts index 5c01a354..8da7e0ad 100644 --- a/src/core/transform.ts +++ b/src/core/transform.ts @@ -11,16 +11,16 @@ import { ParsedMeta, ParsedStory, parse } from './parser' export async function transform(code: string) { let result = '' const { resolvedScript, meta, stories, docs } = parse(code) + const isTS = resolvedScript?.lang === 'ts' if (resolvedScript) { - const isTS = resolvedScript.lang === 'ts' - const plugins: ParserPlugin[] = isTS ? ['typescript'] : [] - result += rewriteDefault(resolvedScript.content, '_sfc_main', plugins) + const babelPlugins: ParserPlugin[] = isTS ? ['typescript'] : [] + result += rewriteDefault(resolvedScript.content, '_sfc_main', babelPlugins) result += '\n' } else { result += 'const _sfc_main = {}\n' } result += await transformTemplate({ meta, stories, docs }, resolvedScript) - result = organizeImports(result) + result = await organizeImports(result, isTS) return result /* @@ -87,7 +87,7 @@ async function transformTemplate( stories, docs, }: { meta: ParsedMeta; stories: ParsedStory[]; docs?: string }, - resolvedScript?: SFCScriptBlock + resolvedScript?: SFCScriptBlock, ) { let result = generateDefaultImport(meta, docs) for (const story of stories) { @@ -103,7 +103,7 @@ async function transformTemplate( function generateDefaultImport( { title, component }: ParsedMeta, - docs?: string + docs?: string, ) { return `export default { ${title ? `title: '${title}',` : ''} @@ -118,7 +118,7 @@ function generateDefaultImport( function generateStoryImport( { id, title, play, template }: ParsedStory, - resolvedScript?: SFCScriptBlock + resolvedScript?: SFCScriptBlock, ) { const { code } = compileTemplate({ source: template.trim(), @@ -137,7 +137,7 @@ function generateStoryImport( const renderFunction = code.replace( 'export function render', - `function render${id}` + `function render${id}`, ) // Each named export is a story, has to return a Vue ComponentOptionsBase @@ -151,10 +151,10 @@ function generateStoryImport( };` } -function organizeImports(result: string): string { +async function organizeImports(result: string, isTS: boolean): Promise { // Use prettier to organize imports - return prettierFormat(result, { - parser: 'babel', + return await prettierFormat(result, { + parser: isTS ? 'typescript' : 'babel', plugins: ['prettier-plugin-organize-imports'], }) } diff --git a/test/index.test.ts b/test/index.test.ts index 22619e6e..d9f92a21 100644 --- a/test/index.test.ts +++ b/test/index.test.ts @@ -55,7 +55,7 @@ describe('transform', () => { it('throws error if story does not have a title', async () => { const code = '' await expect(() => - transform(code) + transform(code), ).rejects.toThrowErrorMatchingInlineSnapshot('"Story is missing a title"') }) it('extracts component from Stories', async () => { @@ -325,7 +325,7 @@ describe('transform', () => { p: \\"p\\", }, _provideComponents(), - props.components + props.components, ); return _jsxs(_Fragment, { children: [ @@ -343,14 +343,14 @@ describe('transform', () => { const { wrapper: MDXLayout } = Object.assign( {}, _provideComponents(), - props.components + props.components, ); return MDXLayout ? _jsx( MDXLayout, Object.assign({}, props, { children: _jsx(_createMdxContent, props), - }) + }), ) : _createMdxContent(props); } @@ -464,7 +464,7 @@ describe('transform', () => { _createElementVNode(\\"h1\\", null, _toDisplayString($setup.headingText)), _createElementVNode(\\"p\\", null, _toDisplayString($setup.paragraph)), ], - 64 /* STABLE_FRAGMENT */ + 64 /* STABLE_FRAGMENT */, ) ); } @@ -491,7 +491,7 @@ describe('transform', () => { _createElementVNode(\\"h1\\", null, _toDisplayString($setup.headingText)), _createElementVNode(\\"p\\", null, _toDisplayString($setup.paragraph)), ], - 64 /* STABLE_FRAGMENT */ + 64 /* STABLE_FRAGMENT */, ) ); }