Unlock 30% off on Manual Testing Annual Plans this Holiday Season.

Copied to Clipboard!

How to use shouldCheckTs method in storybook-root

Best JavaScript code snippet using storybook-root

iframe-webpack.config.js

Source:iframe-webpack.config.js

1import path from 'path';2import fse from 'fs-extra';3import { DefinePlugin, HotModuleReplacementPlugin, ProgressPlugin } from 'webpack';4import Dotenv from 'dotenv-webpack';5import HtmlWebpackPlugin from 'html-webpack-plugin';6import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';7import WatchMissingNodeModulesPlugin from 'react-dev-utils/WatchMissingNodeModulesPlugin';8import TerserWebpackPlugin from 'terser-webpack-plugin';9import VirtualModulePlugin from 'webpack-virtual-modules';10import PnpWebpackPlugin from 'pnp-webpack-plugin';11import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';12import resolveFrom from 'resolve-from';13import themingPaths from '@storybook/theming/paths';14import { createBabelLoader } from './babel-loader-preview';15import es6Transpiler from '../common/es6Transpiler';16import { nodeModulesPaths, loadEnv } from '../config/utils';17import { getPreviewHeadHtml, getPreviewBodyHtml } from '../utils/template';18import { toRequireContextString } from './to-require-context';19import { useBaseTsSupport } from '../config/useBaseTsSupport';20const reactPaths = {};21const storybookPaths = [22  'addons',23  'addons',24  'api',25  'channels',26  'channel-postmessage',27  'components',28  'core-events',29  'router',30  'theming',31  'semver',32  'client-api',33  'client-logger',34].reduce(35  (acc, sbPackage) => ({36    ...acc,37    [`@storybook/${sbPackage}`]: path.dirname(38      resolveFrom(__dirname, `@storybook/${sbPackage}/package.json`)39    ),40  }),41  {}42);43try {44  reactPaths.react = path.dirname(resolveFrom(process.cwd(), 'react/package.json'));45  reactPaths['react-dom'] = path.dirname(resolveFrom(process.cwd(), 'react-dom/package.json'));46} catch (e) {47  //48}49export default async ({50  configDir,51  babelOptions,52  entries,53  stories,54  outputDir = path.join('.', 'public'),55  quiet,56  packageJson,57  configType,58  framework,59  presets,60  typescriptOptions,61}) => {62  const dlls = await presets.apply('webpackDlls', []);63  const logLevel = await presets.apply('logLevel', undefined);64  const { raw, stringified } = loadEnv({ production: true });65  const babelLoader = createBabelLoader(babelOptions, framework);66  const isProd = configType === 'PRODUCTION';67  const entryTemplate = await fse.readFile(path.join(__dirname, 'virtualModuleEntry.template.js'), {68    encoding: 'utf8',69  });70  const storyTemplate = await fse.readFile(path.join(__dirname, 'virtualModuleStory.template.js'), {71    encoding: 'utf8',72  });73  const frameworkInitEntry = path.resolve(74    path.join(configDir, 'storybook-init-framework-entry.js')75  );76  const virtualModuleMapping = {77    // Ensure that the client API is initialized by the framework before any other iframe code78    // is loaded. That way our client-apis can assume the existence of the API+store79    [frameworkInitEntry]: `import '@storybook/${framework}';`,80  };81  entries.forEach((entryFilename) => {82    const match = entryFilename.match(/(.*)-generated-(config|other)-entry.js$/);83    if (match) {84      const configFilename = match[1];85      const clientApi = storybookPaths['@storybook/client-api'];86      const clientLogger = storybookPaths['@storybook/client-logger'];87      virtualModuleMapping[entryFilename] = interpolate(entryTemplate, {88        configFilename,89        clientApi,90        clientLogger,91      });92    }93  });94  if (stories) {95    const storiesFilename = path.resolve(path.join(configDir, `generated-stories-entry.js`));96    virtualModuleMapping[storiesFilename] = interpolate(storyTemplate, { framework })97      // Make sure we also replace quotes for this one98      .replace("'{{stories}}'", stories.map(toRequireContextString).join(','));99  }100  const shouldCheckTs = useBaseTsSupport(framework) && typescriptOptions.check;101  const tsCheckOptions = typescriptOptions.checkOptions || {};102  return {103    mode: isProd ? 'production' : 'development',104    bail: isProd,105    devtool: '#cheap-module-source-map',106    entry: entries,107    output: {108      path: path.resolve(process.cwd(), outputDir),109      filename: '[name].[hash].bundle.js',110      publicPath: '',111    },112    plugins: [113      Object.keys(virtualModuleMapping).length > 0114        ? new VirtualModulePlugin(virtualModuleMapping)115        : null,116      new HtmlWebpackPlugin({117        filename: `iframe.html`,118        chunksSortMode: 'none',119        alwaysWriteToDisk: true,120        inject: false,121        templateParameters: (compilation, files, options) => ({122          compilation,123          files,124          options,125          version: packageJson.version,126          globals: {127            LOGLEVEL: logLevel,128          },129          headHtmlSnippet: getPreviewHeadHtml(configDir, process.env),130          dlls,131          bodyHtmlSnippet: getPreviewBodyHtml(configDir, process.env),132        }),133        minify: {134          collapseWhitespace: true,135          removeComments: true,136          removeRedundantAttributes: true,137          removeScriptTypeAttributes: false,138          removeStyleLinkTypeAttributes: true,139          useShortDoctype: true,140        },141        template: require.resolve(`../templates/index.ejs`),142      }),143      new DefinePlugin({144        'process.env': stringified,145        NODE_ENV: JSON.stringify(process.env.NODE_ENV),146      }),147      isProd ? null : new WatchMissingNodeModulesPlugin(nodeModulesPaths),148      isProd ? null : new HotModuleReplacementPlugin(),149      new CaseSensitivePathsPlugin(),150      quiet ? null : new ProgressPlugin(),151      new Dotenv({ silent: true }),152      shouldCheckTs ? new ForkTsCheckerWebpackPlugin(tsCheckOptions) : null,153    ].filter(Boolean),154    module: {155      rules: [156        babelLoader,157        es6Transpiler(),158        {159          test: /\.md$/,160          use: [161            {162              loader: require.resolve('raw-loader'),163            },164          ],165        },166      ],167    },168    resolve: {169      extensions: ['.mjs', '.js', '.jsx', '.ts', '.tsx', '.json', '.cjs'],170      modules: ['node_modules'].concat(raw.NODE_PATH || []),171      alias: {172        ...themingPaths,173        ...storybookPaths,174        ...reactPaths,175      },176      plugins: [177        // Transparently resolve packages via PnP when needed; noop otherwise178        PnpWebpackPlugin,179      ],180    },181    resolveLoader: {182      plugins: [PnpWebpackPlugin.moduleLoader(module)],183    },184    optimization: {185      splitChunks: {186        chunks: 'all',187      },188      runtimeChunk: true,189      minimizer: isProd190        ? [191            new TerserWebpackPlugin({192              cache: true,193              parallel: true,194              sourceMap: true,195              terserOptions: {196                mangle: false,197                keep_fnames: true,198              },199            }),200          ]201        : [],202    },203    performance: {204      hints: isProd ? 'warning' : false,205    },206  };207};208/**209 * Return a string corresponding to template filled with bindings using following pattern:210 * For each (key, value) of `bindings` replace, in template, `{{key}}` by escaped version of `value`211 *212 * @param template {String} Template with `{{binding}}`213 * @param bindings {Object} key-value object use to fill the template, `{{key}}` will be replaced by `escaped(value)`214 * @returns {String} Filled template215 */216const interpolate = (template, bindings) => {217  return Object.entries(bindings).reduce((acc, [k, v]) => {218    const escapedString = v.replace(/\\/g, '/').replace(/\$/g, '$$$');219    return acc.replace(new RegExp(`{{${k}}}`, 'g'), escapedString);220  }, template);...

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.