GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-01-14 00:52:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

Remove unsupported/broken frameworks/renderers

Browse Source
This commit is contained in:
Valentin Palkovic 2023-05-10 11:00:39 +02:00
parent b3c9b952c6
commit 74f8fce3f7
25 changed files with 7 additions and 471 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.spelling
View File

@ -7,7 +7,6 @@ addon
addons
api
apollo
aurelia
bundlers
center
centered

6
code/.eslintrc.js
View File

@ -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: {

1
code/addons/links/package.json
View File

@ -124,7 +124,6 @@
"displayName": "Links",
"icon": "https://user-images.githubusercontent.com/263385/101991673-48355c80-3c7c-11eb-9b6e-b627c96a75f6.png",
"unsupportedFrameworks": [
"marko",
"react-native"
]
}

9
code/addons/storyshots-core/README.md
View File

@ -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`

4
code/addons/storyshots-core/package.json
View File

@ -146,9 +146,7 @@
"displayName": "Storyshots",
"icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png",
"unsupportedFrameworks": [
"ember",
"mithril",
"marko"
"ember"
]
}
}

4
code/addons/storyshots-core/src/frameworks/SupportedFramework.ts
View File

@ -3,10 +3,8 @@ export type SupportedFramework =
| 'html'
| 'preact'
| 'react'
| 'riot'
| 'react-native'
| 'svelte'
| 'vue'
| 'vue3'
| 'web-components'
| 'rax';
| 'web-components';

60
code/addons/storyshots-core/src/frameworks/rax/loader.ts
View File

@ -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;

12
code/addons/storyshots-core/src/frameworks/rax/renderTree.ts
View File

@ -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;

65
code/addons/storyshots-core/src/frameworks/riot/loader.ts
View File

@ -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;

36
code/addons/storyshots-core/src/frameworks/riot/renderTree.ts
View File

@ -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;

1
code/addons/storyshots-core/src/typings.d.ts vendored
View File

@ -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';

15
code/lib/cli/src/automigrate/fixes/new-frameworks.test.ts
View File

@ -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(

61
code/lib/cli/src/detect.test.ts
View File

@ -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', () => {

35
code/lib/cli/src/generators/AURELIA/index.ts
View File

@ -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;

8
code/lib/cli/src/generators/MARIONETTE/index.ts
View File

@ -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;

8
code/lib/cli/src/generators/MARKO/index.ts
View File

@ -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;

8
code/lib/cli/src/generators/MITHRIL/index.ts
View File

@ -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;

26
code/lib/cli/src/generators/RAX/index.ts
View File

@ -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;

10
code/lib/cli/src/generators/RIOT/index.ts
View File

@ -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;

36
code/lib/cli/src/initiate.ts
View File

@ -8,7 +8,6 @@ import { installableProjectTypes, ProjectType } from './project_types';
import { detect, isStorybookInstalled, detectLanguage, detectBuilder, detectPnp } 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';
@ -18,17 +17,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';
@ -131,21 +125,6 @@ const installStorybook = async <Project extends ProjectType>(
commandLog('Adding Storybook support to your "Ember" app\n')
);
case ProjectType.MITHRIL:
return mithrilGenerator(packageManager, npmOptions, generatorOptions).then(
commandLog('Adding Storybook support to your "Mithril" app\n')
);
case ProjectType.MARIONETTE:
return marionetteGenerator(packageManager, npmOptions, generatorOptions).then(
commandLog('Adding Storybook support to your "Marionette.js" app\n')
);
case ProjectType.MARKO:
return markoGenerator(packageManager, npmOptions, generatorOptions).then(
commandLog('Adding Storybook support to your "Marko" app\n')
);
case ProjectType.HTML:
return htmlGenerator(packageManager, npmOptions, generatorOptions).then(
commandLog('Adding Storybook support to your "HTML" app\n')
@ -156,11 +135,6 @@ const installStorybook = async <Project extends ProjectType>(
commandLog('Adding Storybook support to your "web components" app\n')
);
case ProjectType.RIOT:
return riotGenerator(packageManager, npmOptions, generatorOptions).then(
commandLog('Adding Storybook support to your "riot.js" app\n')
);
case ProjectType.PREACT:
return preactGenerator(packageManager, npmOptions, generatorOptions).then(
commandLog('Adding Storybook support to your "Preact" app\n')
@ -176,16 +150,6 @@ const installStorybook = async <Project extends ProjectType>(
commandLog('Adding Storybook support to your "SvelteKit" app\n')
);
case ProjectType.RAX:
return raxGenerator(packageManager, npmOptions, generatorOptions).then(
commandLog('Adding Storybook support to your "Rax" app\n')
);
case ProjectType.AURELIA:
return aureliaGenerator(packageManager, npmOptions, generatorOptions).then(
commandLog('Adding Storybook support to your "Aurelia" app\n')
);
case ProjectType.SERVER:
return serverGenerator(packageManager, npmOptions, generatorOptions).then(
commandLog('Adding Storybook support to your "Server" app\n')

60
code/lib/cli/src/project_types.ts
View File

@ -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'],

4
code/lib/core-common/src/utils/get-storybook-info.ts
View File

@ -12,12 +12,8 @@ export const rendererPackages: Record<string, string> = {
'@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',

4
code/lib/postinstall/src/frameworks.ts
View File

@ -8,13 +8,9 @@ const FRAMEWORKS = [
'angular',
'ember',
'html',
'marko',
'mithril',
'preact',
'rax',
'react',
'react-native',
'riot',
'svelte',
'vue',
'web-components',

2
docs/addons/integration-catalog.md
View File

@ -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
<div class="aside">

2
docs/frameworks.js
View File

@ -103,7 +103,7 @@ module.exports = {
},
{
name: 'events',
unsupported: ['svelte', 'riot'],
unsupported: ['svelte'],
},
{
name: 'google-analytics',