diff --git a/.spelling b/.spelling index 7ed819bf9f11..4fabd92b8645 100644 --- a/.spelling +++ b/.spelling @@ -7,7 +7,6 @@ addon addons api apollo -aurelia bundlers center centered diff --git a/code/.eslintrc.js b/code/.eslintrc.js index 9ce44395500f..c8c7127d5c26 100644 --- a/code/.eslintrc.js +++ b/code/.eslintrc.js @@ -139,12 +139,6 @@ module.exports = { 'spaced-comment': 'off', }, }, - { - files: ['**/mithril/**/*'], - rules: { - 'react/no-unknown-property': 'off', // Need to deactivate otherwise eslint replaces some unknown properties with React ones - }, - }, { files: ['**/e2e-tests/**/*'], rules: { diff --git a/code/addons/links/package.json b/code/addons/links/package.json index b812fe8169a0..91a3ab811109 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -124,7 +124,6 @@ "displayName": "Links", "icon": "https://user-images.githubusercontent.com/263385/101991673-48355c80-3c7c-11eb-9b6e-b627c96a75f6.png", "unsupportedFrameworks": [ - "marko", "react-native" ] } diff --git a/code/addons/storyshots-core/README.md b/code/addons/storyshots-core/README.md index 4da0ba29673f..8a20edd2c7f3 100644 --- a/code/addons/storyshots-core/README.md +++ b/code/addons/storyshots-core/README.md @@ -603,11 +603,10 @@ initStoryshots({ Use this table as a reference for manually specifying the framework. -| angular | html | preact | -| -------------- | ---- | ------------ | -| react | riot | react-native | -| svelte | vue | vue3 | -| web-components | rax | | +| angular | html | preact | +| ------- | ------------ | -------------- | +| react | react-native | vue3 | +| svelte | vue | web-components | ### `test` diff --git a/code/addons/storyshots-core/package.json b/code/addons/storyshots-core/package.json index b3c707524a85..fc29cf804358 100644 --- a/code/addons/storyshots-core/package.json +++ b/code/addons/storyshots-core/package.json @@ -147,9 +147,7 @@ "displayName": "Storyshots", "icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png", "unsupportedFrameworks": [ - "ember", - "mithril", - "marko" + "ember" ] } } diff --git a/code/addons/storyshots-core/src/frameworks/SupportedFramework.ts b/code/addons/storyshots-core/src/frameworks/SupportedFramework.ts index fd04db80adc9..dfc20d8163ce 100644 --- a/code/addons/storyshots-core/src/frameworks/SupportedFramework.ts +++ b/code/addons/storyshots-core/src/frameworks/SupportedFramework.ts @@ -3,10 +3,8 @@ export type SupportedFramework = | 'html' | 'preact' | 'react' - | 'riot' | 'react-native' | 'svelte' | 'vue' | 'vue3' - | 'web-components' - | 'rax'; + | 'web-components'; diff --git a/code/addons/storyshots-core/src/frameworks/rax/loader.ts b/code/addons/storyshots-core/src/frameworks/rax/loader.ts deleted file mode 100644 index 178ef3c1d7b5..000000000000 --- a/code/addons/storyshots-core/src/frameworks/rax/loader.ts +++ /dev/null @@ -1,60 +0,0 @@ -import { global } from '@storybook/global'; -import configure from '../configure'; -import hasDependency from '../hasDependency'; -import type { Loader } from '../Loader'; -import type { StoryshotsOptions } from '../../api/StoryshotsOptions'; - -function test(options: StoryshotsOptions): boolean { - return options.framework === 'rax' || (!options.framework && hasDependency('@storybook/rax')); -} - -function load(options: StoryshotsOptions) { - global.STORYBOOK_ENV = 'rax'; - - let mockStartedAPI: any; - - jest.mock('@storybook/preview-api', () => { - const previewAPI = jest.requireActual('@storybook/preview-api'); - - return { - ...previewAPI, - start: (...args: any[]) => { - mockStartedAPI = previewAPI.start(...args); - return mockStartedAPI; - }, - }; - }); - - jest.mock('@storybook/rax', () => { - const renderAPI = jest.requireActual('@storybook/rax'); - - renderAPI.addDecorator = mockStartedAPI.clientApi.addDecorator; - renderAPI.addParameters = mockStartedAPI.clientApi.addParameters; - - return renderAPI; - }); - - // eslint-disable-next-line global-require - const storybook = require('@storybook/rax'); - - configure({ - ...options, - storybook, - }); - - return { - framework: 'rax' as const, - renderTree: jest.requireActual('./renderTree').default, - renderShallowTree: () => { - throw new Error('Shallow renderer is not supported for rax'); - }, - storybook, - }; -} - -const raxLoader: Loader = { - load, - test, -}; - -export default raxLoader; diff --git a/code/addons/storyshots-core/src/frameworks/rax/renderTree.ts b/code/addons/storyshots-core/src/frameworks/rax/renderTree.ts deleted file mode 100644 index 6046f0f6cc60..000000000000 --- a/code/addons/storyshots-core/src/frameworks/rax/renderTree.ts +++ /dev/null @@ -1,12 +0,0 @@ -// eslint-disable-next-line import/no-unresolved -import raxTestRenderer from 'rax-test-renderer'; - -function getRenderedTree(story: any, context: any, { renderer, ...rendererOptions }: any) { - const storyElement = story.render(); - const currentRenderer = renderer || raxTestRenderer.create; - const tree = currentRenderer(storyElement, rendererOptions); - - return tree; -} - -export default getRenderedTree; diff --git a/code/addons/storyshots-core/src/frameworks/riot/loader.ts b/code/addons/storyshots-core/src/frameworks/riot/loader.ts deleted file mode 100644 index 598bfc300601..000000000000 --- a/code/addons/storyshots-core/src/frameworks/riot/loader.ts +++ /dev/null @@ -1,65 +0,0 @@ -import { global } from '@storybook/global'; -import hasDependency from '../hasDependency'; -import configure from '../configure'; -import type { Loader } from '../Loader'; -import type { StoryshotsOptions } from '../../api/StoryshotsOptions'; - -function mockRiotToIncludeCompiler() { - jest.mock('riot', () => jest.requireActual('riot/riot.js')); -} - -function test(options: StoryshotsOptions): boolean { - return options.framework === 'riot' || (!options.framework && hasDependency('@storybook/riot')); -} - -function load(options: StoryshotsOptions) { - global.STORYBOOK_ENV = 'riot'; - mockRiotToIncludeCompiler(); - - let mockStartedAPI: any; - - jest.mock('@storybook/preview-api', () => { - const previewAPI = jest.requireActual('@storybook/preview-api'); - - return { - ...previewAPI, - start: (...args: any[]) => { - mockStartedAPI = previewAPI.start(...args); - return mockStartedAPI; - }, - }; - }); - - jest.mock('@storybook/riot', () => { - const renderAPI = jest.requireActual('@storybook/riot'); - - renderAPI.addDecorator = mockStartedAPI.clientApi.addDecorator; - renderAPI.addParameters = mockStartedAPI.clientApi.addParameters; - - return renderAPI; - }); - - // eslint-disable-next-line global-require - const storybook = require('@storybook/riot'); - - configure({ - ...options, - storybook, - }); - - return { - framework: 'riot' as const, - renderTree: jest.requireActual('./renderTree').default, - renderShallowTree: () => { - throw new Error('Shallow renderer is not supported for riot'); - }, - storybook, - }; -} - -const riotLoader: Loader = { - load, - test, -}; - -export default riotLoader; diff --git a/code/addons/storyshots-core/src/frameworks/riot/renderTree.ts b/code/addons/storyshots-core/src/frameworks/riot/renderTree.ts deleted file mode 100644 index 085065635acf..000000000000 --- a/code/addons/storyshots-core/src/frameworks/riot/renderTree.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { global } from '@storybook/global'; - -const { document } = global; - -const riotForStorybook = jest.requireActual('@storybook/riot'); - -function bootstrapADocumentAndReturnANode() { - const rootElement = document.createElement('div'); - rootElement.id = 'storybook-root'; - document.body = document.createElement('body'); - document.body.appendChild(rootElement); - return rootElement; -} - -function makeSureThatResultIsRenderedSomehow({ context, result, rootElement }: any) { - if (!rootElement.firstChild) { - const { kind, name } = context; - riotForStorybook.render({ - storyFn: () => result, - kind, - name, - }); - } -} - -function getRenderedTree(story: any, context: any) { - const rootElement = bootstrapADocumentAndReturnANode(); - - const result = story.render(); - - makeSureThatResultIsRenderedSomehow({ context, result, rootElement }); - - return rootElement; -} - -export default getRenderedTree; diff --git a/code/addons/storyshots-core/src/typings.d.ts b/code/addons/storyshots-core/src/typings.d.ts index b22078cd189a..1c68913a502c 100644 --- a/code/addons/storyshots-core/src/typings.d.ts +++ b/code/addons/storyshots-core/src/typings.d.ts @@ -3,7 +3,6 @@ declare module 'jest-preset-angular/*'; declare module 'preact-render-to-string/jsx'; declare module 'react-test-renderer*'; -declare module 'rax-test-renderer*'; declare module '@storybook/babel-plugin-require-context-hook/register'; diff --git a/code/lib/cli/src/automigrate/fixes/new-frameworks.test.ts b/code/lib/cli/src/automigrate/fixes/new-frameworks.test.ts index edfe1f60ee6e..0938511e53cf 100644 --- a/code/lib/cli/src/automigrate/fixes/new-frameworks.test.ts +++ b/code/lib/cli/src/automigrate/fixes/new-frameworks.test.ts @@ -40,21 +40,6 @@ describe('new-frameworks fix', () => { ).resolves.toBeFalsy(); }); - it('in sb 7 with unsupported package', async () => { - const packageJson = { dependencies: { '@storybook/riot': '^7.0.0' } }; - await expect( - checkNewFrameworks({ - packageJson, - main: { - framework: '@storybook/riot', - core: { - builder: 'webpack5', - }, - }, - }) - ).resolves.toBeFalsy(); - }); - it('in sb 7 with correct structure already', async () => { const packageJson = { dependencies: { '@storybook/angular': '^7.0.0' } }; await expect( diff --git a/code/lib/cli/src/detect-webpack.ts b/code/lib/cli/src/detect-webpack.ts deleted file mode 100644 index d0a980567d29..000000000000 --- a/code/lib/cli/src/detect-webpack.ts +++ /dev/null @@ -1,32 +0,0 @@ -import type { JsPackageManager } from './js-package-manager'; - -export const detectWebpack = async (packageManager: JsPackageManager): Promise => { - try { - let out = ''; - if (packageManager.type === 'npm') { - try { - // npm <= v7 - out = await packageManager.executeCommand({ command: 'npm', args: ['ls', 'webpack'] }); - } catch (e2) { - // npm >= v8 - out = await packageManager.executeCommand({ command: 'npm', args: ['why', 'webpack'] }); - } - } else { - out = await packageManager.executeCommand({ command: 'yarn', args: ['why', 'webpack'] }); - } - - // if the user has BOTH webpack 4 and 5 installed already, we'll pick the safest options (4) - if (out.includes('webpack@4') || out.includes('webpack@npm:4')) { - return 4; - } - - // the user has webpack 4 installed, but not 5 - if (out.includes('webpack@5') || out.includes('webpack@npm:5')) { - return 5; - } - } catch (err) { - // - } - - return false; -}; diff --git a/code/lib/cli/src/detect.test.ts b/code/lib/cli/src/detect.test.ts index 0c463a0056e2..0136d4991377 100644 --- a/code/lib/cli/src/detect.test.ts +++ b/code/lib/cli/src/detect.test.ts @@ -212,46 +212,6 @@ const MOCK_FRAMEWORK_FILES: { }, }, }, - { - name: ProjectType.MITHRIL, - files: { - 'package.json': { - dependencies: { - mithril: '1.0.0', - }, - }, - }, - }, - { - name: ProjectType.MARIONETTE, - files: { - 'package.json': { - dependencies: { - 'backbone.marionette': '1.0.0', - }, - }, - }, - }, - { - name: ProjectType.MARKO, - files: { - 'package.json': { - dependencies: { - marko: '1.0.0', - }, - }, - }, - }, - { - name: ProjectType.RIOT, - files: { - 'package.json': { - dependencies: { - riot: '1.0.0', - }, - }, - }, - }, { name: ProjectType.PREACT, files: { @@ -272,27 +232,6 @@ const MOCK_FRAMEWORK_FILES: { }, }, }, - { - name: ProjectType.RAX, - files: { - '.rax': 'file content', - 'package.json': { - dependencies: { - rax: '1.0.0', - }, - }, - }, - }, - { - name: ProjectType.AURELIA, - files: { - 'package.json': { - dependencies: { - 'aurelia-bootstrapper': '1.0.0', - }, - }, - }, - }, ]; describe('Detect', () => { diff --git a/code/lib/cli/src/detect.ts b/code/lib/cli/src/detect.ts index e360702d8e51..8f8271ad8e4d 100644 --- a/code/lib/cli/src/detect.ts +++ b/code/lib/cli/src/detect.ts @@ -5,6 +5,7 @@ import { logger } from '@storybook/node-logger'; import { pathExistsSync } from 'fs-extra'; import { join, resolve } from 'path'; +import prompts from 'prompts'; import type { TemplateConfiguration, TemplateMatcher } from './project_types'; import { ProjectType, @@ -15,9 +16,9 @@ import { } from './project_types'; import { commandLog, getBowerJson, isNxProject } from './helpers'; import type { JsPackageManager, PackageJson, PackageJsonWithMaybeDeps } from './js-package-manager'; -import { detectWebpack } from './detect-webpack'; const viteConfigFiles = ['vite.config.ts', 'vite.config.js', 'vite.config.mjs']; +const webpackConfigFiles = ['webpack.config.js']; const hasDependency = ( packageJson: PackageJsonWithMaybeDeps, @@ -108,28 +109,44 @@ export function detectFrameworkPreset( * * @returns CoreBuilder */ -export function detectBuilder(packageManager: JsPackageManager, projectType: ProjectType) { +export async function detectBuilder(packageManager: JsPackageManager, projectType: ProjectType) { const viteConfig = findUp.sync(viteConfigFiles); - if (viteConfig) { + const webpackConfig = findUp.sync(webpackConfigFiles); + const dependencies = await packageManager.getAllDependencies(); + + if (viteConfig || (dependencies['vite'] && dependencies['webpack'] === undefined)) { commandLog('Detected Vite project. Setting builder to Vite')(); return CoreBuilder.Vite; } - if (detectWebpack(packageManager)) { + // REWORK + if (webpackConfig || (dependencies['webpack'] && dependencies['vite'] !== undefined)) { commandLog('Detected webpack project. Setting builder to webpack')(); return CoreBuilder.Webpack5; } // Fallback to Vite or Webpack based on project type switch (projectType) { - case ProjectType.SVELTE: - case ProjectType.SVELTEKIT: - case ProjectType.VUE: - case ProjectType.VUE3: case ProjectType.SFC_VUE: return CoreBuilder.Vite; - default: + case ProjectType.REACT_SCRIPTS: + case ProjectType.ANGULAR: + case ProjectType.NEXTJS: return CoreBuilder.Webpack5; + default: + // eslint-disable-next-line no-case-declarations + const { builder } = await prompts({ + type: 'select', + name: 'builder', + message: + 'We were not able to detect the right builder for your project. Please select one:', + choices: [ + { title: 'Vite', value: CoreBuilder.Vite }, + { title: 'Webpack 5', value: CoreBuilder.Webpack5 }, + ], + }); + + return builder; } } diff --git a/code/lib/cli/src/generators/AURELIA/index.ts b/code/lib/cli/src/generators/AURELIA/index.ts deleted file mode 100644 index 04101f26c857..000000000000 --- a/code/lib/cli/src/generators/AURELIA/index.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { join } from 'path'; -import { writeFileAsJson, readFileAsJson, copyTemplate } from '../../helpers'; -import { getCliDir } from '../../dirs'; -import { baseGenerator } from '../baseGenerator'; -import type { Generator } from '../types'; - -function addStorybookExcludeGlobToTsConfig() { - const tsConfigJson = readFileAsJson('tsconfig.json', true); - const glob = '**/*.stories.ts'; - if (!tsConfigJson) { - return; - } - - const { exclude = [] } = tsConfigJson; - if (exclude.includes(glob)) { - return; - } - - tsConfigJson.exclude = [...exclude, glob]; - writeFileAsJson('tsconfig.json', tsConfigJson); -} - -const generator: Generator = async (packageManager, npmOptions, options) => { - addStorybookExcludeGlobToTsConfig(); - await baseGenerator(packageManager, npmOptions, options, 'aurelia', { - extraPackages: ['aurelia'], - }); - - const templateDir = join(getCliDir(), 'templates', 'aurelia'); - if (templateDir) { - copyTemplate(templateDir); - } -}; - -export default generator; diff --git a/code/lib/cli/src/generators/MARIONETTE/index.ts b/code/lib/cli/src/generators/MARIONETTE/index.ts deleted file mode 100644 index 232086fd8f1d..000000000000 --- a/code/lib/cli/src/generators/MARIONETTE/index.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { baseGenerator } from '../baseGenerator'; -import type { Generator } from '../types'; - -const generator: Generator = async (packageManager, npmOptions, options) => { - await baseGenerator(packageManager, npmOptions, options, 'marionette'); -}; - -export default generator; diff --git a/code/lib/cli/src/generators/MARKO/index.ts b/code/lib/cli/src/generators/MARKO/index.ts deleted file mode 100644 index c8d01bc4cea3..000000000000 --- a/code/lib/cli/src/generators/MARKO/index.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { baseGenerator } from '../baseGenerator'; -import type { Generator } from '../types'; - -const generator: Generator = async (packageManager, npmOptions, options) => { - await baseGenerator(packageManager, npmOptions, options, 'marko'); -}; - -export default generator; diff --git a/code/lib/cli/src/generators/MITHRIL/index.ts b/code/lib/cli/src/generators/MITHRIL/index.ts deleted file mode 100644 index 21d10d187693..000000000000 --- a/code/lib/cli/src/generators/MITHRIL/index.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { baseGenerator } from '../baseGenerator'; -import type { Generator } from '../types'; - -const generator: Generator = async (packageManager, npmOptions, options) => { - await baseGenerator(packageManager, npmOptions, options, 'mithril'); -}; - -export default generator; diff --git a/code/lib/cli/src/generators/RAX/index.ts b/code/lib/cli/src/generators/RAX/index.ts deleted file mode 100644 index e3a0acefc2f8..000000000000 --- a/code/lib/cli/src/generators/RAX/index.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { baseGenerator } from '../baseGenerator'; -import type { Generator } from '../types'; - -const generator: Generator = async (packageManager, npmOptions, options) => { - const [latestRaxVersion] = await packageManager.getVersions('rax'); - const packageJson = await packageManager.retrievePackageJson(); - - const raxVersion = packageJson.dependencies.rax || latestRaxVersion; - - // in case Rax project is not detected, `rax` package is not available either - packageJson.dependencies.rax = packageJson.dependencies.rax || raxVersion; - - // these packages are required for Welcome story - packageJson.dependencies['rax-image'] = packageJson.dependencies['rax-image'] || raxVersion; - packageJson.dependencies['rax-link'] = packageJson.dependencies['rax-link'] || raxVersion; - packageJson.dependencies['rax-text'] = packageJson.dependencies['rax-text'] || raxVersion; - packageJson.dependencies['rax-view'] = packageJson.dependencies['rax-view'] || raxVersion; - - await packageManager.writePackageJson(packageJson); - - await baseGenerator(packageManager, npmOptions, options, 'rax', { - extraPackages: ['rax'], - }); -}; - -export default generator; diff --git a/code/lib/cli/src/generators/RIOT/index.ts b/code/lib/cli/src/generators/RIOT/index.ts deleted file mode 100644 index 2b16634b230e..000000000000 --- a/code/lib/cli/src/generators/RIOT/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { baseGenerator } from '../baseGenerator'; -import type { Generator } from '../types'; - -const generator: Generator = async (packageManager, npmOptions, options) => { - await baseGenerator(packageManager, npmOptions, options, 'riot', { - extraPackages: ['riot-tag-loader'], - }); -}; - -export default generator; diff --git a/code/lib/cli/src/initiate.ts b/code/lib/cli/src/initiate.ts index 62c0f0c0cf59..b588b81eece1 100644 --- a/code/lib/cli/src/initiate.ts +++ b/code/lib/cli/src/initiate.ts @@ -14,7 +14,6 @@ import { } from './detect'; import { commandLog, codeLog, paddedLog } from './helpers'; import angularGenerator from './generators/ANGULAR'; -import aureliaGenerator from './generators/AURELIA'; import emberGenerator from './generators/EMBER'; import reactGenerator from './generators/REACT'; import reactNativeGenerator from './generators/REACT_NATIVE'; @@ -24,17 +23,12 @@ import sfcVueGenerator from './generators/SFC_VUE'; import vueGenerator from './generators/VUE'; import vue3Generator from './generators/VUE3'; import webpackReactGenerator from './generators/WEBPACK_REACT'; -import mithrilGenerator from './generators/MITHRIL'; -import marionetteGenerator from './generators/MARIONETTE'; -import markoGenerator from './generators/MARKO'; import htmlGenerator from './generators/HTML'; import webComponentsGenerator from './generators/WEB-COMPONENTS'; -import riotGenerator from './generators/RIOT'; import preactGenerator from './generators/PREACT'; import svelteGenerator from './generators/SVELTE'; import qwikGenerator from './generators/QWIK'; import svelteKitGenerator from './generators/SVELTEKIT'; -import raxGenerator from './generators/RAX'; import solidGenerator from './generators/SOLID'; import serverGenerator from './generators/SERVER'; import type { JsPackageManager } from './js-package-manager'; @@ -69,7 +63,7 @@ const installStorybook = async ( const generatorOptions = { language, - builder: options.builder || detectBuilder(packageManager, projectType), + builder: options.builder || (await detectBuilder(packageManager, projectType)), linkable: !!options.linkable, pnp: pnp || options.usePnp, }; @@ -137,21 +131,6 @@ const installStorybook = async ( commandLog('Adding Storybook support to your "Ember" app') ); - case ProjectType.MITHRIL: - return mithrilGenerator(packageManager, npmOptions, generatorOptions).then( - commandLog('Adding Storybook support to your "Mithril" app') - ); - - case ProjectType.MARIONETTE: - return marionetteGenerator(packageManager, npmOptions, generatorOptions).then( - commandLog('Adding Storybook support to your "Marionette.js" app') - ); - - case ProjectType.MARKO: - return markoGenerator(packageManager, npmOptions, generatorOptions).then( - commandLog('Adding Storybook support to your "Marko" app') - ); - case ProjectType.HTML: return htmlGenerator(packageManager, npmOptions, generatorOptions).then( commandLog('Adding Storybook support to your "HTML" app') @@ -162,11 +141,6 @@ const installStorybook = async ( commandLog('Adding Storybook support to your "web components" app') ); - case ProjectType.RIOT: - return riotGenerator(packageManager, npmOptions, generatorOptions).then( - commandLog('Adding Storybook support to your "riot.js" app') - ); - case ProjectType.PREACT: return preactGenerator(packageManager, npmOptions, generatorOptions).then( commandLog('Adding Storybook support to your "Preact" app') @@ -182,16 +156,6 @@ const installStorybook = async ( commandLog('Adding Storybook support to your "SvelteKit" app') ); - case ProjectType.RAX: - return raxGenerator(packageManager, npmOptions, generatorOptions).then( - commandLog('Adding Storybook support to your "Rax" app') - ); - - case ProjectType.AURELIA: - return aureliaGenerator(packageManager, npmOptions, generatorOptions).then( - commandLog('Adding Storybook support to your "Aurelia" app') - ); - case ProjectType.SERVER: return serverGenerator(packageManager, npmOptions, generatorOptions).then( commandLog('Adding Storybook support to your "Server" app') @@ -223,7 +187,7 @@ const installStorybook = async ( default: paddedLog(`We couldn't detect your project type. (code: ${projectType})`); paddedLog( - 'You can specify a project type explicitly via `sb init --type `, see our docs on how to configure Storybook for your framework: https://storybook.js.org/docs/react/get-started/install' + 'You can specify a project type explicitly via `storybook init --type `, see our docs on how to configure Storybook for your framework: https://storybook.js.org/docs/react/get-started/install' ); // Add a new line for the clear visibility. diff --git a/code/lib/cli/src/project_types.ts b/code/lib/cli/src/project_types.ts index 903ea2ca3cb4..ed6fbc3d7959 100644 --- a/code/lib/cli/src/project_types.ts +++ b/code/lib/cli/src/project_types.ts @@ -38,16 +38,10 @@ export type SupportedRenderers = | 'vue' | 'vue3' | 'angular' - | 'mithril' - | 'riot' | 'ember' - | 'marionette' - | 'marko' | 'preact' | 'svelte' | 'qwik' - | 'rax' - | 'aurelia' | 'html' | 'web-components' | 'server' @@ -59,16 +53,10 @@ export const SUPPORTED_RENDERERS: SupportedRenderers[] = [ 'vue', 'vue3', 'angular', - 'mithril', - 'riot', 'ember', - 'marionette', - 'marko', 'preact', 'svelte', 'qwik', - 'rax', - 'aurelia', 'solid', ]; @@ -87,17 +75,11 @@ export enum ProjectType { ANGULAR = 'ANGULAR', EMBER = 'EMBER', WEB_COMPONENTS = 'WEB_COMPONENTS', - MITHRIL = 'MITHRIL', - MARIONETTE = 'MARIONETTE', - MARKO = 'MARKO', HTML = 'HTML', QWIK = 'QWIK', - RIOT = 'RIOT', PREACT = 'PREACT', SVELTE = 'SVELTE', SVELTEKIT = 'SVELTEKIT', - RAX = 'RAX', - AURELIA = 'AURELIA', SERVER = 'SERVER', NX = 'NX', SOLID = 'SOLID', @@ -232,34 +214,6 @@ export const supportedTemplates: TemplateConfiguration[] = [ return dependencies.some(Boolean); }, }, - { - preset: ProjectType.MITHRIL, - dependencies: ['mithril'], - matcherFunction: ({ dependencies }) => { - return dependencies.every(Boolean); - }, - }, - { - preset: ProjectType.MARIONETTE, - dependencies: ['backbone.marionette'], - matcherFunction: ({ dependencies }) => { - return dependencies.every(Boolean); - }, - }, - { - preset: ProjectType.MARKO, - dependencies: ['marko'], - matcherFunction: ({ dependencies }) => { - return dependencies.every(Boolean); - }, - }, - { - preset: ProjectType.RIOT, - dependencies: ['riot'], - matcherFunction: ({ dependencies }) => { - return dependencies.every(Boolean); - }, - }, { preset: ProjectType.PREACT, dependencies: ['preact'], @@ -282,20 +236,6 @@ export const supportedTemplates: TemplateConfiguration[] = [ return dependencies.every(Boolean); }, }, - { - preset: ProjectType.RAX, - dependencies: ['rax'], - matcherFunction: ({ dependencies }) => { - return dependencies.every(Boolean); - }, - }, - { - preset: ProjectType.AURELIA, - dependencies: ['aurelia-bootstrapper'], - matcherFunction: ({ dependencies }) => { - return dependencies.every(Boolean); - }, - }, { preset: ProjectType.SOLID, dependencies: ['solid-js'], diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index ff8a46362afa..84ba8639d1ff 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -346,7 +346,8 @@ const baseTemplates = { }, 'vue-cli/default-js': { name: 'Vue-CLI (Default JS)', - script: 'npx -p @vue/cli vue create . --default --packageManager=yarn --force --merge', + script: + 'npx -p @vue/cli vue create . --default --packageManager=yarn --force --merge && echo "module.exports = {}" > webpack.config.js', expected: { framework: '@storybook/vue3-webpack5', renderer: '@storybook/vue3', @@ -358,7 +359,7 @@ const baseTemplates = { 'vue-cli/vue2-default-js': { name: 'Vue-CLI (Vue2 JS)', script: - 'npx -p @vue/cli vue create . --default --packageManager=yarn --force --merge --preset="Default (Vue 2)"', + 'npx -p @vue/cli vue create . --default --packageManager=yarn --force --merge --preset="Default (Vue 2)" && echo "module.exports = {}" > webpack.config.js', expected: { framework: '@storybook/vue-webpack5', renderer: '@storybook/vue', @@ -369,7 +370,8 @@ const baseTemplates = { }, 'preact-webpack5/default-js': { name: 'Preact CLI (Default JS)', - script: 'npx preact-cli create default {{beforeDir}} --name preact-app --yarn --no-install', + script: + 'npx preact-cli create default {{beforeDir}} --name preact-app --yarn --no-install && echo "module.exports = {}" > webpack.config.js', expected: { framework: '@storybook/preact-webpack5', renderer: '@storybook/preact', @@ -379,7 +381,8 @@ const baseTemplates = { }, 'preact-webpack5/default-ts': { name: 'Preact CLI (Default TS)', - script: 'npx preact-cli create typescript {{beforeDir}} --name preact-app --yarn --no-install', + script: + 'npx preact-cli create typescript {{beforeDir}} --name preact-app --yarn --no-install && echo "module.exports = {}" > webpack.config.js', expected: { framework: '@storybook/preact-webpack5', renderer: '@storybook/preact', diff --git a/code/lib/core-common/src/utils/get-storybook-info.ts b/code/lib/core-common/src/utils/get-storybook-info.ts index d46908372770..e19ccdda9b21 100644 --- a/code/lib/core-common/src/utils/get-storybook-info.ts +++ b/code/lib/core-common/src/utils/get-storybook-info.ts @@ -12,12 +12,8 @@ export const rendererPackages: Record = { '@storybook/web-components': 'web-components', '@storybook/polymer': 'polymer', '@storybook/ember': 'ember', - '@storybook/marko': 'marko', - '@storybook/mithril': 'mithril', - '@storybook/riot': 'riot', '@storybook/svelte': 'svelte', '@storybook/preact': 'preact', - '@storybook/rax': 'rax', '@storybook/server': 'server', // community (outside of monorepo) 'storybook-framework-qwik': 'qwik', diff --git a/code/lib/postinstall/src/frameworks.ts b/code/lib/postinstall/src/frameworks.ts index ee9260e2c230..a618e4c832cc 100644 --- a/code/lib/postinstall/src/frameworks.ts +++ b/code/lib/postinstall/src/frameworks.ts @@ -8,13 +8,9 @@ const FRAMEWORKS = [ 'angular', 'ember', 'html', - 'marko', - 'mithril', 'preact', - 'rax', 'react', 'react-native', - 'riot', 'svelte', 'vue', 'web-components', diff --git a/docs/addons/integration-catalog.md b/docs/addons/integration-catalog.md index 78ded7ff0417..00fd10fcd84f 100644 --- a/docs/addons/integration-catalog.md +++ b/docs/addons/integration-catalog.md @@ -52,8 +52,6 @@ Use the list below as a reference when filling in the values for both the `suppo - html - svelte - preact -- aurelia -- marionette - react-native
diff --git a/docs/frameworks.js b/docs/frameworks.js index d7b4f2ec9e5c..ed7483a3b273 100644 --- a/docs/frameworks.js +++ b/docs/frameworks.js @@ -103,7 +103,7 @@ module.exports = { }, { name: 'events', - unsupported: ['svelte', 'riot'], + unsupported: ['svelte'], }, { name: 'google-analytics',