mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-03 05:04:51 +08:00
Merge pull request #4902 from mrmckeb/feature/storybook-folder-ts-support
Add CRA TypeScript support for .storybook folder
This commit is contained in:
Igor
GitHub
commit
be544bc220
151
app/react/src/server/__mocks__/mockRules.js
Normal file
151
app/react/src/server/__mocks__/mockRules.js
Normal file
@ -0,0 +1,151 @@
|
||||
export default [
|
||||
{ parser: { requireEnsure: false } },
|
||||
{
|
||||
test: /\.(js|mjs|jsx)$/,
|
||||
enforce: 'pre',
|
||||
use: [
|
||||
{
|
||||
options: {
|
||||
formatter: '/mock_folder/node_modules/react-dev-utils/eslintFormatter.js',
|
||||
eslintPath: '/mock_folder/node_modules/eslint/lib/api.js',
|
||||
baseConfig: {
|
||||
extends: ['/mock_folder/node_modules/eslint-config-react-app/index.js'],
|
||||
settings: { react: { version: '999.999.999' } },
|
||||
},
|
||||
ignore: false,
|
||||
useEslintrc: false,
|
||||
},
|
||||
loader: '/mock_folder/node_modules/eslint-loader/index.js',
|
||||
},
|
||||
],
|
||||
include: '/mock_folder/src',
|
||||
},
|
||||
{
|
||||
oneOf: [
|
||||
{
|
||||
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
|
||||
loader: '/mock_folder/node_modules/url-loader/dist/cjs.js',
|
||||
options: { limit: 10000, name: 'static/media/[name].[hash:8].[ext]' },
|
||||
},
|
||||
{
|
||||
test: /\.(js|mjs|jsx|ts|tsx)$/,
|
||||
include: '/mock_folder/src',
|
||||
loader: '/mock_folder/node_modules/babel-loader/lib/index.js',
|
||||
options: {
|
||||
customize: '/mock_folder/node_modules/babel-preset-react-app/webpack-overrides.js',
|
||||
babelrc: false,
|
||||
configFile: false,
|
||||
presets: ['/mock_folder/node_modules/babel-preset-react-app/index.js'],
|
||||
cacheIdentifier:
|
||||
'development:babel-plugin-named-asset-import@0.2.3:babel-preset-react-app@6.1.0:react-dev-utils@6.1.1:react-scripts@',
|
||||
plugins: [
|
||||
[
|
||||
'/mock_folder/node_modules/babel-plugin-named-asset-import/index.js',
|
||||
{
|
||||
loaderMap: {
|
||||
svg: {
|
||||
ReactComponent: '@svgr/webpack?-prettier,-svgo![path]',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
],
|
||||
cacheDirectory: true,
|
||||
cacheCompression: false,
|
||||
compact: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.(js|mjs)$/,
|
||||
exclude: {},
|
||||
loader: '/mock_folder/node_modules/babel-loader/lib/index.js',
|
||||
options: {
|
||||
babelrc: false,
|
||||
configFile: false,
|
||||
compact: false,
|
||||
presets: [
|
||||
['/mock_folder/node_modules/babel-preset-react-app/dependencies.js', { helpers: true }],
|
||||
],
|
||||
cacheDirectory: true,
|
||||
cacheCompression: false,
|
||||
cacheIdentifier:
|
||||
'development:babel-plugin-named-asset-import@0.2.3:babel-preset-react-app@6.1.0:react-dev-utils@6.1.1:react-scripts@',
|
||||
sourceMaps: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
exclude: {},
|
||||
use: [
|
||||
'/mock_folder/node_modules/bmr-react-scripts/node_modules/style-loader/index.js',
|
||||
{
|
||||
loader: '/mock_folder/node_modules/bmr-react-scripts/node_modules/css-loader/index.js',
|
||||
options: { importLoaders: 1, sourceMap: false },
|
||||
},
|
||||
{
|
||||
loader: '/mock_folder/node_modules/postcss-loader/src/index.js',
|
||||
options: { ident: 'postcss', sourceMap: false },
|
||||
},
|
||||
],
|
||||
sideEffects: true,
|
||||
},
|
||||
{
|
||||
test: /\.module\.css$/,
|
||||
use: [
|
||||
'/mock_folder/node_modules/bmr-react-scripts/node_modules/style-loader/index.js',
|
||||
{
|
||||
loader: '/mock_folder/node_modules/bmr-react-scripts/node_modules/css-loader/index.js',
|
||||
options: { importLoaders: 1, sourceMap: false, modules: true },
|
||||
},
|
||||
{
|
||||
loader: '/mock_folder/node_modules/postcss-loader/src/index.js',
|
||||
options: { ident: 'postcss', sourceMap: false },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.(scss|sass)$/,
|
||||
exclude: {},
|
||||
use: [
|
||||
'/mock_folder/node_modules/bmr-react-scripts/node_modules/style-loader/index.js',
|
||||
{
|
||||
loader: '/mock_folder/node_modules/bmr-react-scripts/node_modules/css-loader/index.js',
|
||||
options: { importLoaders: 2, sourceMap: false },
|
||||
},
|
||||
{
|
||||
loader: '/mock_folder/node_modules/postcss-loader/src/index.js',
|
||||
options: { ident: 'postcss', sourceMap: false },
|
||||
},
|
||||
{
|
||||
loader: '/mock_folder/node_modules/sass-loader/lib/loader.js',
|
||||
options: { sourceMap: false },
|
||||
},
|
||||
],
|
||||
sideEffects: true,
|
||||
},
|
||||
{
|
||||
test: /\.module\.(scss|sass)$/,
|
||||
use: [
|
||||
'/mock_folder/node_modules/bmr-react-scripts/node_modules/style-loader/index.js',
|
||||
{
|
||||
loader: '/mock_folder/node_modules/bmr-react-scripts/node_modules/css-loader/index.js',
|
||||
options: { importLoaders: 2, sourceMap: false, modules: true },
|
||||
},
|
||||
{
|
||||
loader: '/mock_folder/node_modules/postcss-loader/src/index.js',
|
||||
options: { ident: 'postcss', sourceMap: false },
|
||||
},
|
||||
{
|
||||
loader: '/mock_folder/node_modules/sass-loader/lib/loader.js',
|
||||
options: { sourceMap: false },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
loader: '/mock_folder/node_modules/file-loader/dist/cjs.js',
|
||||
exclude: [{}, {}, {}],
|
||||
options: { name: 'static/media/[name].[hash:8].[ext]' },
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
@ -2,7 +2,6 @@ import fs from 'fs';
|
||||
import path from 'path';
|
||||
import semver from 'semver';
|
||||
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
|
||||
|
||||
import { normalizeCondition } from 'webpack/lib/RuleSet';
|
||||
|
||||
const cssExtensions = ['.css', '.scss', '.sass'];
|
||||
@ -41,19 +40,19 @@ export function isReactScriptsInstalled(requiredVersion = '2.0.0') {
|
||||
|
||||
export const getRules = extensions => rules =>
|
||||
rules.reduce((craRules, rule) => {
|
||||
// If at least one style extension satisfies the rule test, the rule is one
|
||||
// If at least one extension satisfies the rule test, the rule is one
|
||||
// we want to extract
|
||||
if (rule.test && extensions.some(normalizeCondition(rule.test))) {
|
||||
// If the base test is for styles, return early
|
||||
// If the base test is for extensions, return early
|
||||
return craRules.concat(rule);
|
||||
}
|
||||
|
||||
// Get any style rules contained in rule.oneOf
|
||||
// Get any rules contained in rule.oneOf
|
||||
if (!rule.test && rule.oneOf) {
|
||||
craRules.push(...getRules(extensions)(rule.oneOf));
|
||||
}
|
||||
|
||||
// Get any style rules contained in rule.rules
|
||||
// Get any rules contained in rule.rules
|
||||
if (!rule.test && rule.rules) {
|
||||
craRules.push(...getRules(extensions)(rule.rules));
|
||||
}
|
||||
@ -62,7 +61,22 @@ export const getRules = extensions => rules =>
|
||||
}, []);
|
||||
|
||||
const getStyleRules = getRules(cssExtensions.concat(cssModuleExtensions));
|
||||
const getTypeScriptRules = getRules(typeScriptExtensions);
|
||||
|
||||
export const getTypeScriptRules = (webpackConfigRules, configDir) => {
|
||||
const rules = getRules(typeScriptExtensions)(webpackConfigRules);
|
||||
// We know CRA only has one rule targetting TS for now, which is the first rule.
|
||||
const babelRule = rules[0];
|
||||
// Resolves an issue where this config is parsed twice (#4903).
|
||||
if (typeof babelRule.include !== 'string') return rules;
|
||||
// Adds support for using TypeScript in the `.storybook` (or config) folder.
|
||||
return [
|
||||
{
|
||||
...babelRule,
|
||||
include: [babelRule.include, path.resolve(configDir)],
|
||||
},
|
||||
...rules.slice(1),
|
||||
];
|
||||
};
|
||||
|
||||
export function getCraWebpackConfig(mode) {
|
||||
const pathToReactScripts = getReactScriptsPath();
|
||||
@ -86,7 +100,7 @@ export function getCraWebpackConfig(mode) {
|
||||
return webpackConfig;
|
||||
}
|
||||
|
||||
export function applyCRAWebpackConfig(baseConfig) {
|
||||
export function applyCRAWebpackConfig(baseConfig, configDir) {
|
||||
// Check if the user can use TypeScript (react-scripts version 2.1+).
|
||||
const hasTsSupport = isReactScriptsInstalled('2.1.0');
|
||||
|
||||
@ -102,7 +116,9 @@ export function applyCRAWebpackConfig(baseConfig) {
|
||||
const craWebpackConfig = getCraWebpackConfig(baseConfig.mode);
|
||||
|
||||
const craStyleRules = getStyleRules(craWebpackConfig.module.rules);
|
||||
const craTypeScriptRules = hasTsSupport ? getTypeScriptRules(craWebpackConfig.module.rules) : [];
|
||||
const craTypeScriptRules = hasTsSupport
|
||||
? getTypeScriptRules(craWebpackConfig.module.rules, configDir)
|
||||
: [];
|
||||
|
||||
// Add css minification for production
|
||||
const plugins = [...baseConfig.plugins];
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import fs from 'fs';
|
||||
import { getReactScriptsPath } from './cra-config';
|
||||
import { getReactScriptsPath, getTypeScriptRules } from './cra-config';
|
||||
import mockRules from './__mocks__/mockRules';
|
||||
|
||||
jest.mock('fs', () => ({
|
||||
realpathSync: jest.fn(),
|
||||
@ -41,4 +42,19 @@ describe('cra-config', () => {
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when used with TypeScript', () => {
|
||||
const rules = getTypeScriptRules(mockRules, './.storybook');
|
||||
|
||||
it('should return the correct config', () => {
|
||||
// Normalise the return, as we know our new rules object will be an array, whereas a string is expected.
|
||||
const rulesObject = { ...rules[0], include: rules[0].include[0] };
|
||||
expect(rulesObject).toMatchObject(mockRules[2].oneOf[1]);
|
||||
});
|
||||
|
||||
// Allows using TypeScript in the `.storybook` (or config) folder.
|
||||
it('should add the Storybook config directory to `include`', () => {
|
||||
expect(rules[0].include.findIndex(string => string.includes('.storybook'))).toEqual(1);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { logger } from '@storybook/node-logger';
|
||||
import { applyCRAWebpackConfig, isReactScriptsInstalled } from './cra-config';
|
||||
|
||||
export function webpackFinal(config) {
|
||||
export function webpackFinal(config, { configDir }) {
|
||||
if (!isReactScriptsInstalled()) {
|
||||
logger.info('=> Using base config because react-scripts is not installed.');
|
||||
return config;
|
||||
@ -9,7 +9,7 @@ export function webpackFinal(config) {
|
||||
|
||||
logger.info('=> Loading create-react-app config.');
|
||||
|
||||
return applyCRAWebpackConfig(config);
|
||||
return applyCRAWebpackConfig(config, configDir);
|
||||
}
|
||||
|
||||
export function babelDefault(config) {
|
||||
|
||||
@ -35,6 +35,7 @@ module.exports = {
|
||||
'!**/cli/test/**',
|
||||
'!**/dist/**',
|
||||
'!**/generators/**',
|
||||
'!app/**/__mocks__ /',
|
||||
],
|
||||
coverageDirectory: 'coverage',
|
||||
testEnvironment: 'jsdom',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user