/
main.js
111 lines (91 loc) · 3.4 KB
/
main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
const fs = require('fs')
const path = require('path')
const { merge } = require('webpack-merge')
const { getSharedPlugins } = require('@redwoodjs/core/config/webpack.common.js')
const {
importStatementPath,
getConfig,
getPaths,
} = require('@redwoodjs/internal')
const config = getConfig()
const rwjsPaths = getPaths()
const baseConfig = {
core: {
builder: 'webpack5',
},
stories: [
`${importStatementPath(rwjsPaths.web.src)}/**/*.stories.{tsx,jsx,js}`,
],
addons: [config.web.a11y && '@storybook/addon-a11y'].filter(Boolean),
webpackFinal: (sbConfig, { configType }) => {
// configType is 'PRODUCTION' or 'DEVELOPMENT', why shout?
const isEnvProduction =
configType && configType.toLowerCase() === 'production'
const rwConfig = isEnvProduction
? require('@redwoodjs/core/config/webpack.production')
: require('@redwoodjs/core/config/webpack.development')
// We replace imports to "@redwoodjs/router" with our own implementation in "@redwoodjs/testing"
sbConfig.resolve.alias['@redwoodjs/router$'] = require.resolve(
'@redwoodjs/testing/dist/web/MockRouter.js'
)
sbConfig.resolve.alias['~__REDWOOD__USER_ROUTES_FOR_MOCK'] =
rwjsPaths.web.routes
sbConfig.resolve.alias['~__REDWOOD__USER_WEB_SRC'] = rwjsPaths.web.src
// Determine the default storybook style file to use.
const supportedStyleIndexFiles = ['index.scss', 'index.sass', 'index.css']
for (let file of supportedStyleIndexFiles) {
const filePath = path.join(rwjsPaths.web.src, file)
if (fs.existsSync(filePath)) {
sbConfig.resolve.alias['~__REDWOOD__USER_WEB_DEFAULT_CSS'] = filePath
break
}
}
const userPreviewPath = fs.existsSync(rwjsPaths.web.storybookPreviewConfig)
? rwjsPaths.web.storybookPreviewConfig
: './preview.example.js'
sbConfig.resolve.alias['~__REDWOOD__USER_STORYBOOK_PREVIEW_CONFIG'] =
userPreviewPath
sbConfig.resolve.extensions = rwConfig.resolve.extensions
sbConfig.resolve.plugins = rwConfig.resolve.plugins // Directory Named Plugin
// Webpack v5 does not include polyfills. Will error without these:
sbConfig.resolve.fallback = {
http: false,
https: false,
timers: false,
os: false,
tty: false,
crypto: false,
zlib: false,
}
// ** PLUGINS **
sbConfig.plugins = [
...sbConfig.plugins,
...getSharedPlugins(isEnvProduction),
]
// ** LOADERS **
sbConfig.module.rules = rwConfig.module.rules
// ** NODE **
sbConfig.node = rwConfig.node
// Performance Improvements:
// https://webpack.js.org/guides/build-performance/#avoid-extra-optimization-steps
sbConfig.optimization = {
removeAvailableModules: false,
removeEmptyChunks: false,
splitChunks: false,
}
// https://webpack.js.org/guides/build-performance/#output-without-path-info
sbConfig.output.pathinfo = false
return sbConfig
},
}
const mergeUserStorybookConfig = (baseConfig) => {
const redwoodPaths = getPaths()
const hasCustomConfig = fs.existsSync(redwoodPaths.web.storybookConfig)
if (!hasCustomConfig) {
return baseConfig
}
const userStorybookConfig = require(redwoodPaths.web.storybookConfig)
return merge(baseConfig, userStorybookConfig)
}
/** @returns {import('webpack').Configuration} Webpack Configuration with storybook config */
module.exports = mergeUserStorybookConfig(baseConfig)