-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
200 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,181 @@ | ||
| const webpack = require('webpack'); | ||
| const fs = require('fs'); | ||
| const path = require('path'); | ||
|
|
||
| const projectRootPath = path.resolve('.'); | ||
| const lessPlugin = require('@plone/volto/webpack-plugins/webpack-less-plugin'); | ||
| const scssPlugin = require('razzle-plugin-scss'); | ||
|
|
||
| const createConfig = require('../node_modules/razzle/config/createConfigAsync.js'); | ||
| const razzleConfig = require(path.join(projectRootPath, 'razzle.config.js')); | ||
|
|
||
| const SVGLOADER = { | ||
| test: /icons\/.*\.svg$/, | ||
| use: [ | ||
| { | ||
| loader: 'svg-loader', | ||
| }, | ||
| { | ||
| loader: 'svgo-loader', | ||
| options: { | ||
| plugins: [ | ||
| { | ||
| name: 'preset-default', | ||
| params: { | ||
| overrides: { | ||
| convertPathData: false, | ||
| removeViewBox: false, | ||
| }, | ||
| }, | ||
| }, | ||
| 'removeTitle', | ||
| 'removeUselessStrokeAndFill', | ||
| ], | ||
| }, | ||
| }, | ||
| ], | ||
| }; | ||
|
|
||
| const defaultRazzleOptions = { | ||
| verbose: false, | ||
| debug: {}, | ||
| buildType: 'iso', | ||
| cssPrefix: 'static/css', | ||
| jsPrefix: 'static/js', | ||
| enableSourceMaps: true, | ||
| enableReactRefresh: true, | ||
| enableTargetBabelrc: false, | ||
| enableBabelCache: true, | ||
| forceRuntimeEnvVars: [], | ||
| mediaPrefix: 'static/media', | ||
| staticCssInDev: false, | ||
| emitOnErrors: false, | ||
| disableWebpackbar: false, | ||
| browserslist: [ | ||
| '>1%', | ||
| 'last 4 versions', | ||
| 'Firefox ESR', | ||
| 'not ie 11', | ||
| 'not dead', | ||
| ], | ||
| }; | ||
|
|
||
| module.exports = { | ||
| core: { | ||
| builder: 'webpack5', | ||
| }, | ||
| stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], | ||
| addons: [ | ||
| '@storybook/addon-links', | ||
| '@storybook/addon-essentials', | ||
| // '@storybook/preset-scss', | ||
| ], | ||
| typescript: { | ||
| check: false, | ||
| reactDocgen: 'any-string', | ||
| }, | ||
| webpackFinal: async (config, { configType }) => { | ||
| // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION' | ||
| // You can change the configuration based on that. | ||
| // 'PRODUCTION' is used when building the static version of storybook. | ||
|
|
||
| // Make whatever fine-grained changes you need | ||
| let baseConfig; | ||
| baseConfig = await createConfig( | ||
| 'web', | ||
| 'dev', | ||
| { | ||
| // clearConsole: false, | ||
| modifyWebpackConfig: razzleConfig.modifyWebpackConfig, | ||
| plugins: razzleConfig.plugins, | ||
| }, | ||
| webpack, | ||
| false, | ||
| undefined, | ||
| [], | ||
| defaultRazzleOptions, | ||
| ); | ||
| const AddonConfigurationRegistry = require('@plone/volto/addon-registry'); | ||
|
|
||
| const registry = new AddonConfigurationRegistry(projectRootPath); | ||
|
|
||
| config = lessPlugin({ registry }).modifyWebpackConfig({ | ||
| env: { target: 'web', dev: 'dev' }, | ||
| webpackConfig: config, | ||
| webpackObject: webpack, | ||
| options: {}, | ||
| }); | ||
|
|
||
| config = scssPlugin.modifyWebpackConfig({ | ||
| env: { target: 'web', dev: 'dev' }, | ||
| webpackConfig: config, | ||
| webpackObject: webpack, | ||
| options: { razzleOptions: {} }, | ||
| }); | ||
|
|
||
| // Put the SVG loader on top and prevent the asset/resource rule | ||
| // from processing the app's SVGs | ||
| config.module.rules.unshift(SVGLOADER); | ||
| const fileLoaderRule = config.module.rules.find((rule) => | ||
| rule.test.test('.svg'), | ||
| ); | ||
| fileLoaderRule.exclude = /icons\/.*\.svg$/; | ||
|
|
||
| config.plugins.unshift( | ||
| new webpack.DefinePlugin({ | ||
| __DEVELOPMENT__: true, | ||
| __CLIENT__: true, | ||
| __SERVER__: false, | ||
| }), | ||
| ); | ||
|
|
||
| const resultConfig = { | ||
| ...config, | ||
| resolve: { | ||
| ...config.resolve, | ||
| alias: { ...config.resolve.alias, ...baseConfig.resolve.alias }, | ||
| fallback: { ...config.resolve.fallback, zlib: false }, | ||
| }, | ||
| }; | ||
|
|
||
| // Addons have to be loaded with babel | ||
| const addonPaths = registry.addonNames.map((addon) => | ||
| fs.realpathSync(registry.packages[addon].modulePath), | ||
| ); | ||
| resultConfig.module.rules[1].exclude = (input) => | ||
| // exclude every input from node_modules except from @plone/volto | ||
| /node_modules\/(?!(@plone\/volto)\/)/.test(input) && | ||
| // If input is in an addon, DON'T exclude it | ||
| !addonPaths.some((p) => input.includes(p)); | ||
|
|
||
| const addonExtenders = registry.getAddonExtenders().map((m) => require(m)); | ||
|
|
||
| const extendedConfig = addonExtenders.reduce( | ||
| (acc, extender) => | ||
| extender.modify(acc, { target: 'web', dev: 'dev' }, config), | ||
| resultConfig, | ||
| ); | ||
|
|
||
| // Note: we don't actually support razzle plugins, which are also a feature | ||
| // of the razzle.extend.js addons file. Those features are probably | ||
| // provided in a different manner by Storybook plugins (for example scss | ||
| // loaders). | ||
|
|
||
| return extendedConfig; | ||
| }, | ||
| babel: async (options) => { | ||
| return { | ||
| ...options, | ||
| plugins: [ | ||
| ...options.plugins, | ||
| [ | ||
| './node_modules/babel-plugin-root-import/build/index.js', | ||
| { | ||
| rootPathSuffix: './src', | ||
| }, | ||
| ], | ||
| ], | ||
| // any extra options you want to set | ||
| }; | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters