GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-09 00:19:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #17860 from storybookjs/detect-vite

Browse Source 
CLI: Detect vite project, use vite builder automatically
This commit is contained in:
Michael Shilman 2022-04-03 11:43:36 +08:00 committed by GitHub
commit a034cb3310
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 51 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
lib/cli/src/automigrate/fixes/builder-vite.ts
View File

@ -39,7 +39,6 @@ export const builderVite: Fix<BuilderViteOptions> = {
const builderName = typeof builder === 'string' ? builder : builder?.name;
if (builderName !== 'storybook-builder-vite') {
logger.info(`Not using community vite builder, skipping`);
return null;
}

3
lib/cli/src/detect.test.ts
View File

@ -15,6 +15,9 @@ jest.mock('./js-package-manager', () => ({
jest.mock('fs', () => ({
existsSync: jest.fn(),
stat: jest.fn(),
lstat: jest.fn(),
access: jest.fn(),
}));
jest.mock('path', () => ({

24
lib/cli/src/detect.ts
View File

@ -1,5 +1,6 @@
import path from 'path';
import fs from 'fs';
import findUp from 'find-up';
import {
ProjectType,
@ -9,10 +10,13 @@ import {
TemplateConfiguration,
TemplateMatcher,
unsupportedTemplate,
CoreBuilder,
} from './project_types';
import { getBowerJson } from './helpers';
import { getBowerJson, paddedLog } from './helpers';
import { PackageJson, readPackageJson } from './js-package-manager';
const viteConfigFiles = ['vite.config.ts', 'vite.config.js', 'vite.config.mjs'];
const hasDependency = (
packageJson: PackageJson,
name: string,
@ -94,6 +98,24 @@ export function detectFrameworkPreset(packageJson = {}) {
return result ? result.preset : ProjectType.UNDETECTED;
}
/**
* Attempts to detect which builder to use, by searching for a vite config file. If one is found, the vite builder
* will be used, otherwise, webpack4 is the default.
*
* @returns CoreBuilder
*/
export function detectBuilder() {
const viteConfig = findUp.sync(viteConfigFiles);
if (viteConfig) {
paddedLog('Detected vite project, setting builder to @storybook/builder-vite');
return CoreBuilder.Vite;
}
// Fallback to webpack4
return CoreBuilder.Webpack4;
}
export function isStorybookInstalled(dependencies: PackageJson | false, force?: boolean) {
if (!dependencies) {
return false;

50
lib/cli/src/initiate.ts
View File

@ -1,8 +1,8 @@
import { UpdateNotifier, Package } from 'update-notifier';
import chalk from 'chalk';
import prompts from 'prompts';
import { detect, isStorybookInstalled, detectLanguage } from './detect';
import { installableProjectTypes, ProjectType, Builder, CoreBuilder } from './project_types';
import { detect, isStorybookInstalled, detectLanguage, detectBuilder } from './detect';
import { installableProjectTypes, ProjectType, Builder } from './project_types';
import { commandLog, codeLog, paddedLog } from './helpers';
import angularGenerator from './generators/ANGULAR';
import aureliaGenerator from './generators/AURELIA';
@ -57,7 +57,7 @@ const installStorybook = (projectType: ProjectType, options: CommandOptions): Pr
const generatorOptions = {
language,
builder: options.builder || CoreBuilder.Webpack4,
builder: options.builder || detectBuilder(),
linkable: !!options.linkable,
commonJs: options.commonJs,
};
@ -92,7 +92,7 @@ const installStorybook = (projectType: ProjectType, options: CommandOptions): Pr
case ProjectType.UPDATE_PACKAGE_ORGANIZATIONS:
return updateOrganisationsGenerator(packageManager, options.parser, npmOptions)
.then(() => null) // commandLog doesn't like to see output
.then(commandLog('Upgrading your project to the new Storybook packages.'))
.then(commandLog('Upgrading your project to the new Storybook packages.\n'))
.then(end);
case ProjectType.REACT_SCRIPTS:
@ -102,7 +102,7 @@ const installStorybook = (projectType: ProjectType, options: CommandOptions): Pr
case ProjectType.REACT:
return reactGenerator(packageManager, npmOptions, generatorOptions)
.then(commandLog('Adding Storybook support to your "React" app'))
.then(commandLog('Adding Storybook support to your "React" app\n'))
.then(end);
case ProjectType.REACT_NATIVE: {
@ -120,7 +120,7 @@ const installStorybook = (projectType: ProjectType, options: CommandOptions): Pr
]) as Promise<{ server: boolean }>)
)
.then(({ server }) => reactNativeGenerator(packageManager, npmOptions, server))
.then(commandLog('Adding Storybook support to your "React Native" app'))
.then(commandLog('Adding Storybook support to your "React Native" app\n'))
.then(end)
.then(() => {
logger.log(chalk.red('NOTE: installation is not 100% automated.'));
@ -134,97 +134,97 @@ const installStorybook = (projectType: ProjectType, options: CommandOptions): Pr
case ProjectType.METEOR:
return meteorGenerator(packageManager, npmOptions, generatorOptions)
.then(commandLog('Adding Storybook support to your "Meteor" app'))
.then(commandLog('Adding Storybook support to your "Meteor" app\n'))
.then(end);
case ProjectType.WEBPACK_REACT:
return webpackReactGenerator(packageManager, npmOptions, generatorOptions)
.then(commandLog('Adding Storybook support to your "Webpack React" app'))
.then(commandLog('Adding Storybook support to your "Webpack React" app\n'))
.then(end);
case ProjectType.REACT_PROJECT:
return reactGenerator(packageManager, npmOptions, generatorOptions)
.then(commandLog('Adding Storybook support to your "React" library'))
.then(commandLog('Adding Storybook support to your "React" library\n'))
.then(end);
case ProjectType.SFC_VUE:
return sfcVueGenerator(packageManager, npmOptions, generatorOptions)
.then(commandLog('Adding Storybook support to your "Single File Components Vue" app'))
.then(commandLog('Adding Storybook support to your "Single File Components Vue" app\n'))
.then(end);
case ProjectType.VUE:
return vueGenerator(packageManager, npmOptions, generatorOptions)
.then(commandLog('Adding Storybook support to your "Vue" app'))
.then(commandLog('Adding Storybook support to your "Vue" app\n'))
.then(end);
case ProjectType.VUE3:
return vue3Generator(packageManager, npmOptions, generatorOptions)
.then(commandLog('Adding Storybook support to your "Vue 3" app'))
.then(commandLog('Adding Storybook support to your "Vue 3" app\n'))
.then(end);
case ProjectType.ANGULAR:
return angularGenerator(packageManager, npmOptions, generatorOptions)
.then(commandLog('Adding Storybook support to your "Angular" app'))
.then(commandLog('Adding Storybook support to your "Angular" app\n'))
.then(end);
case ProjectType.EMBER:
return emberGenerator(packageManager, npmOptions, generatorOptions)
.then(commandLog('Adding Storybook support to your "Ember" app'))
.then(commandLog('Adding Storybook support to your "Ember" app\n'))
.then(end);
case ProjectType.MITHRIL:
return mithrilGenerator(packageManager, npmOptions, generatorOptions)
.then(commandLog('Adding Storybook support to your "Mithril" app'))
.then(commandLog('Adding Storybook support to your "Mithril" app\n'))
.then(end);
case ProjectType.MARIONETTE:
return marionetteGenerator(packageManager, npmOptions, generatorOptions)
.then(commandLog('Adding Storybook support to your "Marionette.js" app'))
.then(commandLog('Adding Storybook support to your "Marionette.js" app\n'))
.then(end);
case ProjectType.MARKO:
return markoGenerator(packageManager, npmOptions, generatorOptions)
.then(commandLog('Adding Storybook support to your "Marko" app'))
.then(commandLog('Adding Storybook support to your "Marko" app\n'))
.then(end);
case ProjectType.HTML:
return htmlGenerator(packageManager, npmOptions, generatorOptions)
.then(commandLog('Adding Storybook support to your "HTML" app'))
.then(commandLog('Adding Storybook support to your "HTML" app\n'))
.then(end);
case ProjectType.WEB_COMPONENTS:
return webComponentsGenerator(packageManager, npmOptions, generatorOptions)
.then(commandLog('Adding Storybook support to your "web components" app'))
.then(commandLog('Adding Storybook support to your "web components" app\n'))
.then(end);
case ProjectType.RIOT:
return riotGenerator(packageManager, npmOptions, generatorOptions)
.then(commandLog('Adding Storybook support to your "riot.js" app'))
.then(commandLog('Adding Storybook support to your "riot.js" app\n'))
.then(end);
case ProjectType.PREACT:
return preactGenerator(packageManager, npmOptions, generatorOptions)
.then(commandLog('Adding Storybook support to your "Preact" app'))
.then(commandLog('Adding Storybook support to your "Preact" app\n'))
.then(end);
case ProjectType.SVELTE:
return svelteGenerator(packageManager, npmOptions, generatorOptions)
.then(commandLog('Adding Storybook support to your "Svelte" app'))
.then(commandLog('Adding Storybook support to your "Svelte" app\n'))
.then(end);
case ProjectType.RAX:
return raxGenerator(packageManager, npmOptions, generatorOptions)
.then(commandLog('Adding Storybook support to your "Rax" app'))
.then(commandLog('Adding Storybook support to your "Rax" app\n'))
.then(end);
case ProjectType.AURELIA:
return aureliaGenerator(packageManager, npmOptions, generatorOptions)
.then(commandLog('Adding Storybook support to your "Aurelia" app'))
.then(commandLog('Adding Storybook support to your "Aurelia" app\n'))
.then(end);
case ProjectType.SERVER:
return serverGenerator(packageManager, npmOptions, generatorOptions)
.then(commandLog('Adding Storybook support to your "Server" app'))
.then(commandLog('Adding Storybook support to your "Server" app\n'))
.then(end);
case ProjectType.UNSUPPORTED: