Join the 1-day Testing & QA Summit featuring 15+ Expert Speakers.Register for FREE! Join TestMu Conference

How to use hasJsxRuntime method in storybook-root

Best JavaScript code snippet using storybook-root

next-babel-loader.js

Source:next-babel-loader.js

1import { join } from 'path'2import * as Log from '../../output/log'3import babelLoader from './babel-loader/src/index'4// increment 'o' to invalidate cache5// eslint-disable-next-line no-useless-concat6const cacheKey = 'babel-cache-' + 'o' + '-'7const nextBabelPreset = require('../../babel/preset')8const customBabelLoader = babelLoader((babel) => {9  const presetItem = babel.createConfigItem(nextBabelPreset, {10    type: 'preset',11  })12  const applyCommonJs = babel.createConfigItem(13    require('../../babel/plugins/commonjs'),14    { type: 'plugin' }15  )16  const commonJsItem = babel.createConfigItem(17    require('next/dist/compiled/babel/plugin-transform-modules-commonjs'),18    { type: 'plugin' }19  )20  const configs = new Set()21  return {22    customOptions(opts) {23      const custom = {24        isServer: opts.isServer,25        pagesDir: opts.pagesDir,26        babelPresetPlugins: opts.babelPresetPlugins,27        development: opts.development,28        hasReactRefresh: opts.hasReactRefresh,29        hasJsxRuntime: opts.hasJsxRuntime,30      }31      const filename = join(opts.cwd, 'noop.js')32      const loader = Object.assign(33        opts.cache34          ? {35              cacheDirectory: join(opts.distDir, 'cache', 'next-babel-loader'),36              cacheIdentifier:37                cacheKey +38                (opts.isServer ? '-server' : '') +39                '-new-polyfills' +40                (opts.development ? '-development' : '-production') +41                (opts.hasReactRefresh ? '-react-refresh' : '') +42                (opts.hasJsxRuntime ? '-jsx-runtime' : '') +43                JSON.stringify(44                  babel.loadPartialConfig({45                    filename,46                    cwd: opts.cwd,47                    sourceFileName: filename,48                  }).options49                ),50            }51          : {52              cacheDirectory: false,53            },54        opts55      )56      delete loader.isServer57      delete loader.cache58      delete loader.distDir59      delete loader.pagesDir60      delete loader.babelPresetPlugins61      delete loader.development62      delete loader.hasReactRefresh63      delete loader.hasJsxRuntime64      return { loader, custom }65    },66    config(67      cfg,68      {69        source,70        customOptions: {71          isServer,72          pagesDir,73          babelPresetPlugins,74          development,75          hasReactRefresh,76          hasJsxRuntime,77        },78      }79    ) {80      const filename = this.resourcePath81      const options = Object.assign({}, cfg.options)82      const isPageFile = filename.startsWith(pagesDir)83      if (cfg.hasFilesystemConfig()) {84        for (const file of [cfg.babelrc, cfg.config]) {85          // We only log for client compilation otherwise there will be double output86          if (file && !isServer && !configs.has(file)) {87            configs.add(file)88            Log.info(`Using external babel configuration from ${file}`)89          }90        }91      } else {92        // Add our default preset if the no "babelrc" found.93        options.presets = [...options.presets, presetItem]94      }95      options.caller.isServer = isServer96      options.caller.isDev = development97      options.caller.hasJsxRuntime = hasJsxRuntime98      const emitWarning = this.emitWarning.bind(this)99      Object.defineProperty(options.caller, 'onWarning', {100        enumerable: false,101        writable: false,102        value: (options.caller.onWarning = function (reason) {103          if (!(reason instanceof Error)) {104            reason = new Error(reason)105          }106          emitWarning(reason)107        }),108      })109      options.plugins = options.plugins || []110      if (hasReactRefresh) {111        const reactRefreshPlugin = babel.createConfigItem(112          [require('react-refresh/babel'), { skipEnvCheck: true }],113          { type: 'plugin' }114        )115        options.plugins.unshift(reactRefreshPlugin)116        if (!isServer) {117          const noAnonymousDefaultExportPlugin = babel.createConfigItem(118            [require('../../babel/plugins/no-anonymous-default-export'), {}],119            { type: 'plugin' }120          )121          options.plugins.unshift(noAnonymousDefaultExportPlugin)122        }123      }124      if (!isServer && isPageFile) {125        const pageConfigPlugin = babel.createConfigItem(126          [require('../../babel/plugins/next-page-config')],127          { type: 'plugin' }128        )129        options.plugins.push(pageConfigPlugin)130        const diallowExportAll = babel.createConfigItem(131          [132            require('../../babel/plugins/next-page-disallow-re-export-all-exports'),133          ],134          { type: 'plugin' }135        )136        options.plugins.push(diallowExportAll)137      }138      // If the file has `module.exports` we have to transpile commonjs because Babel adds `import` statements139      // That break webpack, since webpack doesn't support combining commonjs and esmodules140      if (source.indexOf('module.exports') !== -1) {141        options.plugins.push(applyCommonJs)142      }143      options.plugins.push([144        require.resolve('next/dist/compiled/babel/plugin-transform-define'),145        {146          'process.env.NODE_ENV': development ? 'development' : 'production',147          'typeof window': isServer ? 'undefined' : 'object',148          'process.browser': isServer ? false : true,149        },150        'next-js-transform-define-instance',151      ])152      if (isPageFile) {153        if (!isServer) {154          options.plugins.push([155            require.resolve('../../babel/plugins/next-ssg-transform'),156            {},157          ])158        }159      }160      // As next-server/lib has stateful modules we have to transpile commonjs161      options.overrides = [162        ...(options.overrides || []),163        {164          test: [165            /next[\\/]dist[\\/]next-server[\\/]lib/,166            /next[\\/]dist[\\/]client/,167            /next[\\/]dist[\\/]pages/,168          ],169          plugins: [commonJsItem],170        },171      ]172      for (const plugin of babelPresetPlugins) {173        require(join(plugin.dir, 'src', 'babel-preset-build.js'))(174          options,175          plugin.config || {}176        )177      }178      return options179    },180  }181})...

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

1const { hasJsxRuntime } = require('storybook-root');2module.exports = {3  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],4  reactOptions: {5    runtime: hasJsxRuntime() ? 'classic' : 'automatic',6  },7};8module.exports = {9  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],10  reactOptions: {11    runtime: hasJsxRuntime() ? 'classic' : 'automatic',12  },13};14ionst { hasJsxRuntime } = require('storybook-root');15export const parameters = {16  actons: { argTypesRegex: '^on[A-Z].*' },17  eactOpions: {18    runime:hasJsxRuntime() ? 'classic' : 'automatic',19  },20};21import { hasJsxRuntime } storybook-root';22export const managerWebpack = async (config, options) => {23  config.reactOptions = {24    runtime: hasJsxRunime() ? 'classic' : 'automatic,

Using AI Code Generation

1import { hasJsxRuntime } from 'storybook-root-config';2import { hasJsxRuntime } from 'storybook-root-config';3module.exports = {4    require.resolve('storybook-root-config'),5};6import { hasJsxRuntime } from 'storybook-root-config';7import { hasJsxRuntime } from 'storybook-root-config';8import { hasJsxRuntime } from 'storybook-root-config';9import { hasJsxRuntime } from 'storybook-root-config';10import { hasJsxRuntime } from 'storybook-root-config';11import { hasJsxRuntime } from 'storybook-root-config';12import { hasJsxRuntime } from 'storybook-root-config';13import { hasJsxRuntime } from 'storybook-root-config';14import { hasJsxRuntime } from 'storybook-root-config';15import { hasJsxRuntime } from 'storybook-root-config';16import { hasJsxRuntime } from 'storybook-root-config';17import { hasJsxRuntime } from 'storybook-root-config';

Using AI Code Generation

1import { hasJsxRuntime } from 'storybook-root';2import React from 'react'3module.exports = {4  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],5  reactOptions: {6    runtime: hasJsxRuntime() ? 'classic' : 'automatic',7  },8};9module.exports = {10  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],11  reactOptions: {12    runtime: hasJsxRuntime() ? 'classic' : 'automatic',13  },14};15import { hasJsxRuntime } from 'storybook-root';16export const parameters = {17  actions: { argTypesRegex: '^on[A-Z].*' },18  reactOptions: {19    runtime: hasJsxRuntime() ? 'classic' : 'automatic',20  },21};-cause22const { hasJsxRunte } = require('storybook-root-cause');23if (hasJsxRuntime()) {24} else 25}

Using AI Code Generation

1import { hasJsxRuntime } from 'storybook-root';2import React from 'react';3import ReactDOM from 'react-dom';4const jsxRuntime = hasJsxRuntime();5console.log(jsxRuntime ? 'JSX Runtime is enabled' : 'JSX Runtime is disabled');6{7  "scripts": {8  },9  "dependencies": {10  }11}12import React from 'react';13import ReactDOM from 'react-dom';14export const hasJsxRuntime = () => {15  return !!React.createElement('div').$$typeof;16};

Using AI Code Generation

1import { hasJsxRuntime } from 'storybook-root-config'2import React from 'react'3if (!hasJsxRuntime()) {4  import React from 'react'5}6if (hasJsxRuntime()) {7  import React from '@storybook/addon-docs/blocks'8}9"scripts": {10}

Using AI Code Generation

1import { hasJsxRuntime } from 'storybook-root-config'2import React from 'react'3if (!hasJsxRuntime()) {4  import React from 'react'5}6if (hasJsxRuntime()) {7  import React from '@storybook/addon-docs/blocks'8}9"scripts": {10}ort react/jsx-runtime11} else {12}

Using AI Code Generation

1import {hasJsxRuntime} from 'storybook-root';2const hasJsxRuntime = hasJsxRuntime();3const code = `import React${hasJsxRuntime ? ', {jsxRuntime}' : ''} from 'react';4`;5const result = babel.transform(code, {6      require.resolve('babel-plugin-transform-react-jsx'),7      {8      },9});10console.log(result.code);

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.