All files / src/bundlers webpack.ts

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
 
 
 
 
113x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
113x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/**
 * @module bundlers
 */
 
const mdUse = (skipCsf: boolean) => [
  {
    loader: "babel-loader",
    options: {
      babelrc: false,
      configFile: false,
      presets: ["@babel/preset-env", "@babel/preset-react"],
    },
  },
  {
    loader: require.resolve("@storybook/mdx1-csf/loader"),
    options: { skipCsf },
  },
];
 
type SimplifiedUse = { loader?: string };
type SimplifiedRule = { use?: SimplifiedUse[] };
 
/**
 * This is likely a highly specialized use case for adding mdx functionality
 * and code coverage in the cypress.config.ts file. It assumes that you've
 * already added ts-loader to the webpack config file proper.
 */
export const cypressWebpackConfigMdx = (
  /** webpack config to be updated */
  config: any,
  /** add coverage via babel-loader + istanbul */
  coverage = true
) => {
  const rules = config.module?.rules || [];
 
  let indexOfTsLoader = -1;
  let tsLoaderRule: SimplifiedRule = {};
  let tsLoaderUse: SimplifiedUse = {};
  rules?.some((rule: { use: SimplifiedUse[] }, i: number) => {
    const loaderUse = rule?.use?.find(
      (useItem) => useItem.loader === "ts-loader"
    );
    Iif (loaderUse) {
      indexOfTsLoader = i;
      tsLoaderRule = rule;
      tsLoaderUse = loaderUse;
      return true;
    }
    return false;
  });
 
  Iif (indexOfTsLoader >= 0 && tsLoaderRule?.use !== undefined) {
    const tsLoaderRuleWithCoverage = coverage
      ? {
          ...tsLoaderRule,
          use: [
            {
              loader: "babel-loader",
              options: {
                plugins: ["istanbul"],
                babelrc: false,
                configFile: false,
              },
            },
            ...tsLoaderRule.use,
          ],
        }
      : tsLoaderRule;
    return {
      ...config,
      module: {
        ...config.module,
        rules: [
          ...[
            ...rules.slice(0, indexOfTsLoader),
            tsLoaderRuleWithCoverage,
            ...rules.slice(indexOfTsLoader + 1),
          ],
          // Required to support arbitary mdx imports in csf and mdx test files
          {
            test: /\.mdx$/,
            use: [tsLoaderUse, ...mdUse(false)],
          },
          {
            test: /\.md$/,
            use: mdUse(true),
          },
        ],
      },
    };
  }
 
  console.error(
    "cypressWebpackConfigMdx found no rule that used ts-loader, config will remain unchanged"
  );
 
  return config;
};