How to use hasReactRefresh method in storybook-root

Best JavaScript code snippet using storybook-root

next-babel-loader.js

Source:next-babel-loader.js

1import babelLoader from 'next/dist/compiled/babel-loader'2import hash from 'next/dist/compiled/string-hash'3import { basename, join } from 'path'4import * as Log from '../../output/log'5// increment 'n' to invalidate cache6// eslint-disable-next-line no-useless-concat7const cacheKey = 'babel-cache-' + 'n' + '-'8const nextBabelPreset = require('../../babel/preset')9const getModernOptions = (babelOptions = {}) => {10  const presetEnvOptions = Object.assign({}, babelOptions['preset-env'])11  const transformRuntimeOptions = Object.assign(12    {},13    babelOptions['transform-runtime'],14    { regenerator: false }15  )16  presetEnvOptions.targets = {17    esmodules: true,18  }19  presetEnvOptions.exclude = [20    ...(presetEnvOptions.exclude || []),21    // Block accidental inclusions22    'transform-regenerator',23    'transform-async-to-generator',24  ]25  return {26    ...babelOptions,27    'preset-env': presetEnvOptions,28    'transform-runtime': transformRuntimeOptions,29  }30}31const nextBabelPresetModern = (presetOptions) => (context) =>32  nextBabelPreset(context, getModernOptions(presetOptions))33module.exports = babelLoader.custom((babel) => {34  const presetItem = babel.createConfigItem(nextBabelPreset, {35    type: 'preset',36  })37  const applyCommonJs = babel.createConfigItem(38    require('../../babel/plugins/commonjs'),39    { type: 'plugin' }40  )41  const commonJsItem = babel.createConfigItem(42    require('@babel/plugin-transform-modules-commonjs'),43    { type: 'plugin' }44  )45  const configs = new Set()46  return {47    customOptions(opts) {48      const custom = {49        isServer: opts.isServer,50        isModern: opts.isModern,51        pagesDir: opts.pagesDir,52        hasModern: opts.hasModern,53        babelPresetPlugins: opts.babelPresetPlugins,54        development: opts.development,55        hasReactRefresh: opts.hasReactRefresh,56        hasJsxRuntime: opts.hasJsxRuntime,57      }58      const filename = join(opts.cwd, 'noop.js')59      const loader = Object.assign(60        opts.cache61          ? {62              cacheCompression: false,63              cacheDirectory: join(opts.distDir, 'cache', 'next-babel-loader'),64              cacheIdentifier:65                cacheKey +66                (opts.isServer ? '-server' : '') +67                (opts.isModern ? '-modern' : '') +68                (opts.hasModern ? '-has-modern' : '') +69                '-new-polyfills' +70                (opts.development ? '-development' : '-production') +71                (opts.hasReactRefresh ? '-react-refresh' : '') +72                (opts.hasJsxRuntime ? '-jsx-runtime' : '') +73                JSON.stringify(74                  babel.loadPartialConfig({75                    filename,76                    cwd: opts.cwd,77                    sourceFileName: filename,78                  }).options79                ),80            }81          : {82              cacheDirectory: false,83            },84        opts85      )86      delete loader.isServer87      delete loader.cache88      delete loader.distDir89      delete loader.isModern90      delete loader.hasModern91      delete loader.pagesDir92      delete loader.babelPresetPlugins93      delete loader.development94      delete loader.hasReactRefresh95      delete loader.hasJsxRuntime96      return { loader, custom }97    },98    config(99      cfg,100      {101        source,102        customOptions: {103          isServer,104          isModern,105          hasModern,106          pagesDir,107          babelPresetPlugins,108          development,109          hasReactRefresh,110          hasJsxRuntime,111        },112      }113    ) {114      const filename = this.resourcePath115      const options = Object.assign({}, cfg.options)116      const isPageFile = filename.startsWith(pagesDir)117      if (cfg.hasFilesystemConfig()) {118        for (const file of [cfg.babelrc, cfg.config]) {119          // We only log for client compilation otherwise there will be double output120          if (file && !isServer && !configs.has(file)) {121            configs.add(file)122            Log.info(`Using external babel configuration from ${file}`)123          }124        }125      } else {126        // Add our default preset if the no "babelrc" found.127        options.presets = [...options.presets, presetItem]128      }129      options.caller.isServer = isServer130      options.caller.isModern = isModern131      options.caller.isDev = development132      options.caller.hasJsxRuntime = hasJsxRuntime133      const emitWarning = this.emitWarning.bind(this)134      Object.defineProperty(options.caller, 'onWarning', {135        enumerable: false,136        writable: false,137        value: (options.caller.onWarning = function (reason) {138          if (!(reason instanceof Error)) {139            reason = new Error(reason)140          }141          emitWarning(reason)142        }),143      })144      options.plugins = options.plugins || []145      if (hasReactRefresh) {146        const reactRefreshPlugin = babel.createConfigItem(147          [require('react-refresh/babel'), { skipEnvCheck: true }],148          { type: 'plugin' }149        )150        options.plugins.unshift(reactRefreshPlugin)151        if (!isServer) {152          const noAnonymousDefaultExportPlugin = babel.createConfigItem(153            [require('../../babel/plugins/no-anonymous-default-export'), {}],154            { type: 'plugin' }155          )156          options.plugins.unshift(noAnonymousDefaultExportPlugin)157        }158      }159      if (!isServer && isPageFile) {160        const pageConfigPlugin = babel.createConfigItem(161          [require('../../babel/plugins/next-page-config')],162          { type: 'plugin' }163        )164        options.plugins.push(pageConfigPlugin)165        const diallowExportAll = babel.createConfigItem(166          [167            require('../../babel/plugins/next-page-disallow-re-export-all-exports'),168          ],169          { type: 'plugin' }170        )171        options.plugins.push(diallowExportAll)172      }173      if (isServer && source.indexOf('next/data') !== -1) {174        const nextDataPlugin = babel.createConfigItem(175          [176            require('../../babel/plugins/next-data'),177            { key: basename(filename) + '-' + hash(filename) },178          ],179          { type: 'plugin' }180        )181        options.plugins.push(nextDataPlugin)182      }183      if (isModern) {184        const nextPreset = options.presets.find(185          (preset) => preset && preset.value === nextBabelPreset186        ) || { options: {} }187        const additionalPresets = options.presets.filter(188          (preset) => preset !== nextPreset189        )190        const presetItemModern = babel.createConfigItem(191          nextBabelPresetModern(nextPreset.options),192          {193            type: 'preset',194          }195        )196        options.presets = [...additionalPresets, presetItemModern]197      }198      // If the file has `module.exports` we have to transpile commonjs because Babel adds `import` statements199      // That break webpack, since webpack doesn't support combining commonjs and esmodules200      if (!hasModern && source.indexOf('module.exports') !== -1) {201        options.plugins.push(applyCommonJs)202      }203      options.plugins.push([204        require.resolve('babel-plugin-transform-define'),205        {206          'process.env.NODE_ENV': development ? 'development' : 'production',207          'typeof window': isServer ? 'undefined' : 'object',208          'process.browser': isServer ? false : true,209        },210        'next-js-transform-define-instance',211      ])212      if (isPageFile) {213        if (!isServer) {214          options.plugins.push([215            require.resolve('../../babel/plugins/next-ssg-transform'),216            {},217          ])218        }219      }220      // As next-server/lib has stateful modules we have to transpile commonjs221      options.overrides = [222        ...(options.overrides || []),223        {224          test: [225            /next[\\/]dist[\\/]next-server[\\/]lib/,226            /next[\\/]dist[\\/]client/,227            /next[\\/]dist[\\/]pages/,228          ],229          plugins: [commonJsItem],230        },231      ]232      for (const plugin of babelPresetPlugins) {233        require(join(plugin.dir, 'src', 'babel-preset-build.js'))(234          options,235          plugin.config || {}236        )237      }238      return options239    },240  }...

custom-babel-loader.ts

Source:custom-babel-loader.ts

1// @ts-ignore2import { custom } from 'babel-loader'3import * as Log from '../../../output/log'4import casterlyBabel from '../../babelPreset'5export default custom((babel: any) => {6  const presetItem = babel.createConfigItem(casterlyBabel, {7    type: 'preset',8  })9  const configs = new Set()10  return {11    customOptions(opts: any) {12      const custom = {13        isServer: opts.isServer,14        dev: opts.dev,15        hasReactRefresh: opts.hasReactRefresh,16        hasJsxRuntime: opts.hasJsxRuntime,17      }18      const loader = Object.assign(19        {20          cacheDirectory: false,21        },22        opts23      )24      delete loader.isServer25      delete loader.dev26      delete loader.hasReactRefresh27      delete loader.hasJsxRuntime28      return { loader, custom }29    },30    config(31      this: any,32      cfg: any,33      {34        _,35        customOptions: { isServer, dev, hasReactRefresh, hasJsxRuntime },36      }: any37    ) {38      const options = Object.assign({}, cfg.options)39      if (cfg.hasFilesystemConfig()) {40        for (const file of [cfg.babelrc, cfg.config]) {41          // We only log for client compilation otherwise there will be double output42          if (file && !isServer && !configs.has(file)) {43            configs.add(file)44            Log.info(`Using external babel configuration from ${file}`)45          }46        }47      } else {48        // Add our default preset if no "babelrc" is found.49        options.presets = [...options.presets, presetItem]50      }51      options.caller.isServer = isServer52      options.caller.isDev = dev53      options.caller.hasJsxRuntime = hasJsxRuntime54      const emitWarning = this.emitWarning.bind(this)55      Object.defineProperty(options.caller, 'onWarning', {56        enumerable: false,57        writable: false,58        value: (options.caller.onWarning = function (reason: any) {59          if (!(reason instanceof Error)) {60            reason = new Error(reason)61          }62          emitWarning(reason)63        }),64      })65      options.plugins = options.plugins || []66      if (hasReactRefresh) {67        const reactRefreshPlugin = babel.createConfigItem(68          [require('react-refresh/babel'), { skipEnvCheck: true }],69          { type: 'plugin' }70        )71        options.plugins.unshift(reactRefreshPlugin)72      }73      return options74    },75  }...

Using AI Code Generation

1import { hasReactRefresh } from 'storybook-root-configuration'2import { getReactRefreshBabelPreset } from 'storybook-root-configuration'3module.exports = async ({ config, mode }) => {4  config.module.rules.push({5    test: /\.(js|jsx|ts|tsx)$/,6      {7        loader: require.resolve('babel-loader'),8        options: {9            ...(isDev ? [getReactRefreshBabelPreset()] : []),10            ...(isDev ? ['react-refresh/babel'] : []),11        },12      },13  })14  if (isDev) {15    config.plugins.push(16      new ReactRefreshWebpackPlugin({17        overlay: {18          sockIntegration: hasReactRefresh(),19        },20      })21  }22}23module.exports = {24  stories: ['../src/**/*.stories.(js|jsx|ts|tsx)'],25    {26      options: {27      },28    },29  webpackFinal: async (config) => {30    return getReactRefreshWebpackConfig(config)31  },32}33import { addDecorator } from '@storybook/react'34import { withA11y } from

Using AI Code Generation

1const hasReactRefresh = require('storybook-root-configuration').hasReactRefresh;2module.exports = {3      {4        targets: {5        },6      },7    hasReactRefresh() && require.resolve('react-refresh/babel'),8  ].filter(Boolean),9};10module.exports = {11  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],12  babel: async (options) => ({13    presets: [...options.presets, require.resolve('storybook-root-configuration')],14  }),15};16const hasReactRefresh = require('storybook-root-configuration').hasReactRefresh;17module.exports = async ({ config }) => {18  config.module.rules.push({19    loaders: [require.resolve('@storybook/source-loader')],20  });21  if (hasReactRefresh()) {22      ...(config.entry || []),23      require.resolve('react-refresh/runtime'),24    ];25    config.plugins.push(26      require.resolve('react-refresh/babel')27    );28  }29  return config;30};31import React from 'react';32import { addDecorator } from '@storybook/react';33import { withReactRefresh } from 'storybook-addon-react-refresh';34addDecorator(withReactRefresh());35export const parameters = {36  actions: { argTypesRegex: '^on[A-Z].*' },37};38  import { applyReactRefresh } from 'storybook-addon-react-refresh';39  applyReactRefresh();

Using AI Code Generation

1import { hasReactRefresh } from '@storybook/core-common';2const config = {3  core: {4  },5  features: {6  },7};8if (hasReactRefresh()) {9  config.reactOptions = {10  };11}12module.exports = config;13import { hasReactRefresh } from '@storybook/core-common';14describe('hasReactRefresh', () => {15  it('should return true if react refresh is enabled', () => {16    expect(hasReactRefresh()).toBe(true);17  });18});

Using AI Code Generation

1import { hasReactRefresh } from 'storybook-root-configuration';2import { reactRefreshWebpackConfig } from 'storybook-root-configuration';3import { reactRefreshBabelConfig } from 'storybook-root-configuration';4import { getReactRefreshConfig } from 'storybook-root-configuration';5import { getReactRefreshConfig } from 'storybook-root-configuration';6import { getReactRefreshConfig } from 'storybook-root-configuration';7import { getReactRefreshConfig } from 'storybook-root-configuration';8import { getReactRefreshConfig } from 'storybook-root-configuration';9import { getReactRefreshConfig } from 'storybook-root-configuration';10import { getReactRefreshConfig } from 'storybook-root-configuration';11import { getReactRefreshConfig } from 'storybook-root-configuration';12import { getReactRefreshConfig } from 'storybook-root-configuration';13import { getReactRefreshConfig } from 'storybook-root-configuration';

Using AI Code Generation

1import { hasReactRefresh } from 'storybook-root-config';2const hasReactRefresh = hasReactRefresh();3const babelOptions = babelOptions();4const webpackOptions = webpackOptions();5const webpackConfig = webpackConfig();6const webpackFinal = webpackFinal();7const babelFinal = babelFinal();8const babelConfig = babelConfig();9const babelOptions = babelOptions();10const babelFinal = babelFinal();11const babelConfig = babelConfig();12const babelOptions = babelOptions();13const babelFinal = babelFinal();14const babelConfig = babelConfig();15const babelOptions = babelOptions();16const babelFinal = babelFinal();17const babelConfig = babelConfig();18const babelOptions = babelOptions();19const babelFinal = babelFinal();

Using AI Code Generation

1import { configure, addDecorator } from '@storybook/react';2import { withTests } from '@storybook/addon-jest';3import results from '../.jest-test-results.json';4import { withA11y } from '@storybook/addon-a11y';5import { withKnobs } from '@storybook/addon-knobs';6import { withPerformance } from 'storybook-addon-performance';7import { withInfo } from '@storybook/addon-info';8configure(require.context('../src', true, /\.stories\.tsx$/), module);9addDecorator(withTests({ results }));10addDecorator(withA11y);11addDecorator(withKnobs);12addDecorator(withPerformance);13addDecorator(withInfo);

Using AI Code Generation

1if (hasReactRefresh) {2}3module.exports = {4};5module.exports = {6};7module.exports = {8};9module.exports = {10};11module.exports = {12};13module.exports = {14};15module.exports = {

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.