const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const cwd = process.cwd()

module.exports = {
  mode: 'development', //开发模式
  devtool: false, //关闭生成sourcemap
  entry: {
    antd: './index.js'
  },
  output: {
    path: path.resolve('dist'), //输出到dist目录
    filename: '[name].js', //打包后的文件 antd.css
    library: 'antd', //打包后库的名字
    libraryTarget: 'umd' //打包后模块的格式 umd amd cmd commonjs commonjs window
  },
  externals: {
    //组件库代码其实是不需要打包react 和react-dom进去的
    react: {
      //外部依赖
      root: 'React',
      commonjs2: 'react',
      commonjs: 'react',
      amd: 'react'
    },
    'react-dom': {
      root: 'ReactDOM',
      commonjs2: 'react-dom',
      commonjs: 'react-dom',
      amd: 'react-dom'
    }
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'] //指定扩展名
    // alias: {
    //     antdesign: cwd
    // }
  },
  module: {
    rules: [
      {
        test: /\.(j|t)sx?$/, //配置如何加载js ts jsx tsx
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader, //把这些CSS收集起来后面通过插件写入单独的antd.css
          {
            loader: 'css-loader', //处理@import和url
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader', //加厂商前缀
            options: {
              postcssOptions: {
                plugins: ['autoprefixer']
              },
              sourceMap: true
            }
          }
        ]
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: ['autoprefixer']
              },
              sourceMap: true
            }
          },
          {
            loader: 'less-loader', //把less编译 成css
            options: {
              lessOptions: {
                javascriptEnabled: true
              },
              sourceMap: true
            }
          }
        ]
      },
      {
        //webpack5里file-loaer url-loader已经废弃 了
        test: /\.(png|jpg|jpeg|gif|svg)(\?v=\d+\.\d+\.\d+)?$/i,
        type: 'asset' //静态文件不再需要配置loader
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css'
    })
  ]
}

module.exports = {
  presets: [
    '@babel/preset-react',
    [
      '@babel/preset-env',
      {
        modules: 'auto',
        targets: {
          browsers: ['last 2 versions', 'Firefox ESR', '> 1%', 'ie >= 11']
        }
      }
    ]
  ],
  plugins: [
    [
      '@babel/plugin-transform-typescript',
      {
        isTSX: true
      }
    ],
    ['@babel/plugin-transform-runtime']
  ]
}

module.exports = require('./components')

module.exports = {
  stories: [
    '../components/Introduction.stories.mdx',
    '../components/Install.stories.mdx',
    '../components/Components.stories.mdx',
    '../components/**/*.stories.mdx',
    '../components/**/*.stories.@(js|jsx|ts|tsx)'
  ],
  addons: ['@storybook/addon-essentials']
}

const React = require('react')
const Enzyme = require('enzyme')

const Adapter = require('@wojtekmaj/enzyme-adapter-react-17')
Enzyme.configure({ adapter: new Adapter() })

module.exports = {
  verbose: true,
  testEnvironment: 'jsdom', //运行测试的环境
  setupFiles: ['./tests/setup.js'],
  testMatch: ['**/unit/**/*.(spec|test).(js|ts|jsx|tsx)'],
  collectCoverage: true,
  collectCoverageFrom: [
    'components/**/*.(js|ts|jsx|tsx)',
    '!components/**/*.stories.(js|ts|jsx|tsx)',
    '!components/**/*.(spec|test).(js|ts|jsx|tsx)'
  ]
}

module.exports = {
  verbose: true,
  testEnvironment: 'jest-environment-puppeteer',
  setupFiles: ['./tests/setup.js'],
  preset: 'jest-puppeteer',
  testMatch: ['**/e2e/**/*.(spec|test).(j|t)sx']
}

module.exports = {
  launch: {
    headless: true
  },
  browserContext: 'default'
}

module.exports = {}

const gulp = require('gulp') //定义执行任务
const path = require('path') //处理路径
const rimraf = require('rimraf') //删除跑路的 rm -rf
const ts = require('gulp-typescript')
const babel = require('gulp-babel')
const merge2 = require('merge2') //Promise.all
const { compilerOptions } = require('./tsconfig.json')

const tsConfig = {
  noUnusedParameters: true, //不能有未使用的参数
  noUnusedLocals: true, //不能有未使用的本地变量
  strictNullChecks: true, //严格的Null检查
  target: 'es6', //编译 的目标
  jsx: 'react', //jsx如何处理preserve 保留不处理  react变成React.createElement()
  moduleResolution: 'node', //模块的查找规则 node
  declaration: true, //生成声明文件 d.ts
  allowSyntheticDefaultImports: true, //允许 默认导入
  ...compilerOptions
}
const babelConfig = require('./babel.config')
//准备好要编译 的文件
//glob 文件匹配模板，类似于正则
const source = [
  'components/**/*.{js,ts,jsx,tsx}',
  '!components/**/*.stories.{js,ts,jsx,tsx}',
  '!components/**/e2e/*',
  '!components/**/unit/*'
]
//antd\components
const base = path.join(process.cwd(), 'components')
function getProjectPath (filePath) {
  return path.join(process.cwd(), filePath)
}
// antd\lib
const libDir = getProjectPath('lib')
// antd\es
const esDir = getProjectPath('es')
/**
 * 执行编译
 * @param {*} modules 是否要转换模块
 */
function compile (modules) {
  const targeDir = modules === false ? esDir : libDir
  rimraf.sync(targeDir) //删除老的内容 rm -rf
  //把文件匹配模式传给gulp,gulp会按这个模式把文件匹配了出来
  //ts转译后会生成二个流，一个流是JS一个流是类型声明d.ts
  const { js, dts } = gulp.src(source, { base }).pipe(ts(tsConfig))
  const dtsStream = dts.pipe(gulp.dest(targeDir))
  let jsStream = js
  if (modules) {
    //如果要转成ES5，就用babel进行转义
    jsStream = js.pipe(babel(babelConfig))
  }
  jsStream = jsStream.pipe(gulp.dest(targeDir))
  return merge2([jsStream, dtsStream])
}
gulp.task('compile-with-es', done => {
  console.log('compile to es')
  compile(false).on('finish', done)
})
gulp.task('compile-with-lib', done => {
  console.log('compile to js')
  compile().on('finish', done)
})
gulp.task('compile', gulp.parallel('compile-with-es', 'compile-with-lib'))