import path from 'path' ; import fs from 'fs' ; import babelConfig from '@design-systems/build/babel.config' ; import { createLogger , loadUserWebpackConfig , getMonorepoRoot } from '@design-systems/cli-utils' ; import { Snippet } from 'playroom' ; const logger = createLogger ( { scope : 'playroom' } ) ; const config = babelConfig ( { env : ( ) => '' } ) ; require ( '@babel/register' ) ( { ... config , plugins : [ ... config . plugins , [ 'babel-plugin-import-redirect' , { suppressResolveWarning : true , redirect : { '.*main\\.css$' : { } } } ] ] , extensions : [ '.ts' , '.tsx' , '.jsx' , '.js' , '.mjs' ] } ) ; interface PlayroomConfig { components : string ; outputPath : string ; title ? : string ; themes ? : string ; widths ? : number [ ] ; snippets ? : Snippet [ ] | string ; frameComponent ? : string ; exampleCode ? : string ; cwd ? : string ; storageKey ? : string ; webpackConfig ? : ( ) => void ; baseUrl ? : string ; } /**
 * Modifies the playroom config by trying to load the user's custom config.
 */ const loadUserPlayroomConfig = ( baseConfig ) : PlayroomConfig => { const userConfigPath = path . join ( getMonorepoRoot ( ) , 'playroom.config.js' ) ; if ( fs . existsSync ( userConfigPath ) ) { logger . debug ( `Custom playroom config file: ${ userConfigPath }` ) ; const getUserConfig = require ( userConfigPath ) ; const userConfig = getUserConfig ( baseConfig ) ; logger . trace ( 'Customized playroom config:' , userConfig ) ; return userConfig ; } return baseConfig ; } ; export default async ( { entry , title , snippets } ) => { const webpackConfig = await loadUserWebpackConfig ( { plugins : [ ] , resolve : { } , module : { rules : [ { type : 'javascript/auto' , test : /\.mjs$/ } , { test : /\.css$/ , exclude : /codemirror/ , use : [ 'style-loader' , 'css-loader' ] } , { test : /\.(woff(2)?|ttf|eot|svg|otf)(\?v=\d+\.\d+\.\d+)?$/ , use : [ 'file-loader' ] } ] } } , 'playroom' ) ; const playroomConfig = { components : entry , outputPath : './out/playroom' , title , widths : [ 320 , 768 , 992 , 1200 ] , snippets , typeScriptFiles : [ 'components/**/src/**/*.{ts,tsx}' , '!**/node_modules' ] , webpackConfig : ( ) => webpackConfig } ; logger . trace ( 'Default playroom config:' , playroomConfig ) ; return loadUserPlayroomConfig ( playroomConfig ) ; } ;