How to use shouldCheckTs method in storybook-root

Best JavaScript code snippet using storybook-root

iframe-webpack.config.js

Source: iframe-webpack.config.js Github

copy

Full Screen

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);...

Full Screen

Full Screen

Blogs

Check out the latest blogs from LambdaTest on this topic:

Oct’22 Updates: New Analytics And App Automation Dashboard, Test On Google Pixel 7 Series, And More

Hey everyone! We hope you had a great Hacktober. At LambdaTest, we thrive to bring you the best with each update. Our engineering and tech teams work at lightning speed to deliver you a seamless testing experience.

Now Log Bugs Using LambdaTest and DevRev

In today’s world, an organization’s most valuable resource is its customers. However, acquiring new customers in an increasingly competitive marketplace can be challenging while maintaining a strong bond with existing clients. Implementing a customer relationship management (CRM) system will allow your organization to keep track of important customer information. This will enable you to market your services and products to these customers better.

How To Run Cypress Tests In Azure DevOps Pipeline

When software developers took years to create and introduce new products to the market is long gone. Users (or consumers) today are more eager to use their favorite applications with the latest bells and whistles. However, users today don’t have the patience to work around bugs, errors, and design flaws. People have less self-control, and if your product or application doesn’t make life easier for users, they’ll leave for a better solution.

How to Position Your Team for Success in Estimation

Estimates are critical if you want to be successful with projects. If you begin with a bad estimating approach, the project will almost certainly fail. To produce a much more promising estimate, direct each estimation-process issue toward a repeatable standard process. A smart approach reduces the degree of uncertainty. When dealing with presales phases, having the most precise estimation findings can assist you to deal with the project plan. This also helps the process to function more successfully, especially when faced with tight schedules and the danger of deviation.

How To Write End-To-End Tests Using Cypress App Actions

When I started writing tests with Cypress, I was always going to use the user interface to interact and change the application’s state when running tests.

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.

LambdaTest Learning Hubs:

YouTube

You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.

Run storybook-root automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful