How to use exportsMap method in storybook-root

Best JavaScript code snippet using storybook-root

FlagDependencyUsagePlugin.js

Source:FlagDependencyUsagePlugin.js

1/*2	MIT License http://www.opensource.org/licenses/mit-license.php3	Author Tobias Koppers @sokra4*/5"use strict";6const Dependency = require("./Dependency");7const { UsageState } = require("./ExportsInfo");8const ModuleGraphConnection = require("./ModuleGraphConnection");9const { STAGE_DEFAULT } = require("./OptimizationStages");10const ArrayQueue = require("./util/ArrayQueue");11const TupleQueue = require("./util/TupleQueue");12const { getEntryRuntime, mergeRuntimeOwned } = require("./util/runtime");13/** @typedef {import("./Chunk")} Chunk */14/** @typedef {import("./ChunkGroup")} ChunkGroup */15/** @typedef {import("./Compiler")} Compiler */16/** @typedef {import("./DependenciesBlock")} DependenciesBlock */17/** @typedef {import("./Dependency").ReferencedExport} ReferencedExport */18/** @typedef {import("./ExportsInfo")} ExportsInfo */19/** @typedef {import("./Module")} Module */20/** @typedef {import("./util/runtime").RuntimeSpec} RuntimeSpec */21const { NO_EXPORTS_REFERENCED, EXPORTS_OBJECT_REFERENCED } = Dependency;22class FlagDependencyUsagePlugin {23	/**24	 * @param {boolean} global do a global analysis instead of per runtime25	 */26	constructor(global) {27		this.global = global;28	}29	/**30	 * Apply the plugin31	 * @param {Compiler} compiler the compiler instance32	 * @returns {void}33	 */34	apply(compiler) {35		compiler.hooks.compilation.tap("FlagDependencyUsagePlugin", compilation => {36			const moduleGraph = compilation.moduleGraph;37			compilation.hooks.optimizeDependencies.tap(38				{39					name: "FlagDependencyUsagePlugin",40					stage: STAGE_DEFAULT41				},42				modules => {43					if (compilation.moduleMemCaches) {44						throw new Error(45							"optimization.usedExports can't be used with cacheUnaffected as export usage is a global effect"46						);47					}48					const logger = compilation.getLogger(49						"webpack.FlagDependencyUsagePlugin"50					);51					/** @type {Map<ExportsInfo, Module>} */52					const exportInfoToModuleMap = new Map();53					/** @type {TupleQueue<[Module, RuntimeSpec]>} */54					const queue = new TupleQueue();55					/**56					 * @param {Module} module module to process57					 * @param {(string[] | ReferencedExport)[]} usedExports list of used exports58					 * @param {RuntimeSpec} runtime part of which runtime59					 * @param {boolean} forceSideEffects always apply side effects60					 * @returns {void}61					 */62					const processReferencedModule = (63						module,64						usedExports,65						runtime,66						forceSideEffects67					) => {68						const exportsInfo = moduleGraph.getExportsInfo(module);69						if (usedExports.length > 0) {70							if (!module.buildMeta || !module.buildMeta.exportsType) {71								if (exportsInfo.setUsedWithoutInfo(runtime)) {72									queue.enqueue(module, runtime);73								}74								return;75							}76							for (const usedExportInfo of usedExports) {77								let usedExport;78								let canMangle = true;79								if (Array.isArray(usedExportInfo)) {80									usedExport = usedExportInfo;81								} else {82									usedExport = usedExportInfo.name;83									canMangle = usedExportInfo.canMangle !== false;84								}85								if (usedExport.length === 0) {86									if (exportsInfo.setUsedInUnknownWay(runtime)) {87										queue.enqueue(module, runtime);88									}89								} else {90									let currentExportsInfo = exportsInfo;91									for (let i = 0; i < usedExport.length; i++) {92										const exportInfo = currentExportsInfo.getExportInfo(93											usedExport[i]94										);95										if (canMangle === false) {96											exportInfo.canMangleUse = false;97										}98										const lastOne = i === usedExport.length - 1;99										if (!lastOne) {100											const nestedInfo = exportInfo.getNestedExportsInfo();101											if (nestedInfo) {102												if (103													exportInfo.setUsedConditionally(104														used => used === UsageState.Unused,105														UsageState.OnlyPropertiesUsed,106														runtime107													)108												) {109													const currentModule =110														currentExportsInfo === exportsInfo111															? module112															: exportInfoToModuleMap.get(currentExportsInfo);113													if (currentModule) {114														queue.enqueue(currentModule, runtime);115													}116												}117												currentExportsInfo = nestedInfo;118												continue;119											}120										}121										if (122											exportInfo.setUsedConditionally(123												v => v !== UsageState.Used,124												UsageState.Used,125												runtime126											)127										) {128											const currentModule =129												currentExportsInfo === exportsInfo130													? module131													: exportInfoToModuleMap.get(currentExportsInfo);132											if (currentModule) {133												queue.enqueue(currentModule, runtime);134											}135										}136										break;137									}138								}139							}140						} else {141							// for a module without side effects we stop tracking usage here when no export is used142							// This module won't be evaluated in this case143							// TODO webpack 6 remove this check144							if (145								!forceSideEffects &&146								module.factoryMeta !== undefined &&147								module.factoryMeta.sideEffectFree148							) {149								return;150							}151							if (exportsInfo.setUsedForSideEffectsOnly(runtime)) {152								queue.enqueue(module, runtime);153							}154						}155					};156					/**157					 * @param {DependenciesBlock} module the module158					 * @param {RuntimeSpec} runtime part of which runtime159					 * @param {boolean} forceSideEffects always apply side effects160					 * @returns {void}161					 */162					const processModule = (module, runtime, forceSideEffects) => {163						/** @type {Map<Module, (string[] | ReferencedExport)[] | Map<string, string[] | ReferencedExport>>} */164						const map = new Map();165						/** @type {ArrayQueue<DependenciesBlock>} */166						const queue = new ArrayQueue();167						queue.enqueue(module);168						for (;;) {169							const block = queue.dequeue();170							if (block === undefined) break;171							for (const b of block.blocks) {172								if (173									!this.global &&174									b.groupOptions &&175									b.groupOptions.entryOptions176								) {177									processModule(178										b,179										b.groupOptions.entryOptions.runtime || undefined,180										true181									);182								} else {183									queue.enqueue(b);184								}185							}186							for (const dep of block.dependencies) {187								const connection = moduleGraph.getConnection(dep);188								if (!connection || !connection.module) {189									continue;190								}191								const activeState = connection.getActiveState(runtime);192								if (activeState === false) continue;193								const { module } = connection;194								if (activeState === ModuleGraphConnection.TRANSITIVE_ONLY) {195									processModule(module, runtime, false);196									continue;197								}198								const oldReferencedExports = map.get(module);199								if (oldReferencedExports === EXPORTS_OBJECT_REFERENCED) {200									continue;201								}202								const referencedExports =203									compilation.getDependencyReferencedExports(dep, runtime);204								if (205									oldReferencedExports === undefined ||206									oldReferencedExports === NO_EXPORTS_REFERENCED ||207									referencedExports === EXPORTS_OBJECT_REFERENCED208								) {209									map.set(module, referencedExports);210								} else if (211									oldReferencedExports !== undefined &&212									referencedExports === NO_EXPORTS_REFERENCED213								) {214									continue;215								} else {216									let exportsMap;217									if (Array.isArray(oldReferencedExports)) {218										exportsMap = new Map();219										for (const item of oldReferencedExports) {220											if (Array.isArray(item)) {221												exportsMap.set(item.join("\n"), item);222											} else {223												exportsMap.set(item.name.join("\n"), item);224											}225										}226										map.set(module, exportsMap);227									} else {228										exportsMap = oldReferencedExports;229									}230									for (const item of referencedExports) {231										if (Array.isArray(item)) {232											const key = item.join("\n");233											const oldItem = exportsMap.get(key);234											if (oldItem === undefined) {235												exportsMap.set(key, item);236											}237											// if oldItem is already an array we have to do nothing238											// if oldItem is an ReferencedExport object, we don't have to do anything239											// as canMangle defaults to true for arrays240										} else {241											const key = item.name.join("\n");242											const oldItem = exportsMap.get(key);243											if (oldItem === undefined || Array.isArray(oldItem)) {244												exportsMap.set(key, item);245											} else {246												exportsMap.set(key, {247													name: item.name,248													canMangle: item.canMangle && oldItem.canMangle249												});250											}251										}252									}253								}254							}255						}256						for (const [module, referencedExports] of map) {257							if (Array.isArray(referencedExports)) {258								processReferencedModule(259									module,260									referencedExports,261									runtime,262									forceSideEffects263								);264							} else {265								processReferencedModule(266									module,267									Array.from(referencedExports.values()),268									runtime,269									forceSideEffects270								);271							}272						}273					};274					logger.time("initialize exports usage");275					for (const module of modules) {276						const exportsInfo = moduleGraph.getExportsInfo(module);277						exportInfoToModuleMap.set(exportsInfo, module);278						exportsInfo.setHasUseInfo();279					}280					logger.timeEnd("initialize exports usage");281					logger.time("trace exports usage in graph");282					/**283					 * @param {Dependency} dep dependency284					 * @param {RuntimeSpec} runtime runtime285					 */286					const processEntryDependency = (dep, runtime) => {287						const module = moduleGraph.getModule(dep);288						if (module) {289							processReferencedModule(290								module,291								NO_EXPORTS_REFERENCED,292								runtime,293								true294							);295						}296					};297					/** @type {RuntimeSpec} */298					let globalRuntime = undefined;299					for (const [300						entryName,301						{ dependencies: deps, includeDependencies: includeDeps, options }302					] of compilation.entries) {303						const runtime = this.global304							? undefined305							: getEntryRuntime(compilation, entryName, options);306						for (const dep of deps) {307							processEntryDependency(dep, runtime);308						}309						for (const dep of includeDeps) {310							processEntryDependency(dep, runtime);311						}312						globalRuntime = mergeRuntimeOwned(globalRuntime, runtime);313					}314					for (const dep of compilation.globalEntry.dependencies) {315						processEntryDependency(dep, globalRuntime);316					}317					for (const dep of compilation.globalEntry.includeDependencies) {318						processEntryDependency(dep, globalRuntime);319					}320					while (queue.length) {321						const [module, runtime] = queue.dequeue();322						processModule(module, runtime, false);323					}324					logger.timeEnd("trace exports usage in graph");325				}326			);327		});328	}329}...

Using AI Code Generation

1const { exportsMap } = require('storybook-root-exports');2const { stories, addons } = exportsMap();3module.exports = {4};5const path = require('path');6module.exports = {7  stories: [path.resolve(__dirname, '../test.js')],8};9const { addDecorator } = require('@storybook/react');10const { withA11y } = require('@storybook/addon-a11y');11addDecorator(withA11y);12const { addons } = require('@storybook/addons');13const { create } = require('@storybook/theming/create');14addons.setConfig({15  theme: create({16  }),17});18const path = require('path');19module.exports = ({ config }) => {20    ...(config.resolve.modules || []),21    path.resolve(__dirname, '../src'),22  ];23  return config;24};25{26  "compilerOptions": {27    "paths": {

Using AI Code Generation

1import { withRootAlias } from 'storybook-root-alias';2module.exports = withRootAlias({3  webpackFinal: async (config) => {4    return config;5  },6});7module.exports = {8  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],9};10import { withRootAlias } from 'storybook-root-alias';11module.exports = withRootAlias({12  webpackFinal: async (config) => {13    return config;14  },15});16{17  "compilerOptions": {18  }19}20{21  "compilerOptions": {22    "paths": {23    },24  },25}26{27  "compilerOptions": {

Using AI Code Generation

1export * from 'storybook-root-config';2module.exports = {3};4import { exportsMap } from 'storybook-root-config';5import { addDecorator } from '@storybook/react';6import { withA11y } from '@storybook/addon-a11y';7import { withInfo } from '@storybook/addon-info';8import { withKnobs } from '@storybook/addon-knobs';9import { withTests } from '@storybook/addon-jest';10import { withConsole } from '@storybook/addon-console';11import { withThemes } from '@storybook/addon-themes';12const withOptions = {13  styles: {14    infoBody: {15    },16    infoStory: {17    },18  },19};20const withTestsOptions = {21  filesExt: '((\\.specs?)|(\\.tests?))?(\\.ts|\\.tsx)?$',22};23const withConsoleOptions = {24};25addDecorator(withA11y);26addDecorator(withInfo(withOptions));27addDecorator(withKnobs);28addDecorator(withTests(withTestsOptions));29addDecorator((storyFn, context) => withConsole(withConsoleOptions)(storyFn)(context));30addDecorator(withThemes);31exportsMap.forEach((value, key) => {32  addDecorator(value);33});34const { getWebpackConfig } = require('storybook-root-config');35module.exports = (baseConfig, env, defaultConfig) => {36  const config = getWebpackConfig(baseConfig, env, defaultConfig);37  return config;38};39const {

Using AI Code Generation

1import { withRootDecorator } from 'storybook-root-decorator'2export default {3}4export const Demo = () => <div>Hello</div>5import { withRootDecorator } from 'storybook-root-decorator'6export const parameters = {7  actions: { argTypesRegex: '^on[A-Z].*' },8}

Using AI Code Generation

1import { exportsMap } from 'storybook-root-config';2const { MyComponent, MyComponent2 } = exportsMap;3export { MyComponent, MyComponent2 };4import { exportsMap } from 'storybook-root-config';5const { MyComponent, MyComponent2 } = exportsMap;6export default {7};8export const test = () => (9);10export const test2 = () => (11);12import { exportsMap } from 'storybook-root-config';13const { MyComponent, MyComponent2 } = exportsMap;14export { MyComponent, MyComponent2 };15import { exportsMap } from 'storybook-root-config';16const { MyComponent, MyComponent2 } = exportsMap;17export default {18};19export const test = () => (20);21export const test2 = () => (22);23module.exports = {24};25module.exports = {

Using AI Code Generation

1import { exportsMap } from 'storybook-root'2const { MyComponent } = exportsMap3const exportsMap = {4  MyComponent: require('./components/MyComponent').default,5}6export { exportsMap }7export default function MyComponent() {8  return (9}10import { storiesOf } from '@storybook/react'11import { exportsMap } from 'storybook-root'12const { MyComponent } = exportsMap13storiesOf('MyComponent', module)14  .add('with text', () => (15import { storiesOf } from '@storybook/react'16import Button from './components/Button'17import Card from './components/Card'18storiesOf('Button', module)19  .add('with text', () => (20storiesOf('Card', module)21  .add('with text', () => (22For example, if you use Material-UI, you can organize your stories in the same way as you organize your components. You can create a storybook-root.js file in the root of your project and import all

Using AI Code Generation

1exportsMap({2  alias: {3  },4});5const path = require('path');6module.exports = {7  webpackFinal: async (config) => {8    config.resolve.alias = {9      '~': path.resolve(__dirname, '../'),10    };11    return config;12  },13};14module.exports = {15  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],16  webpackFinal: async (config) => {17    config.resolve.alias = {18      '~': path.resolve(__dirname, '../'),19    };20    return config;21  },22};23module.exports = {24  webpackFinal: async (config) => {25    config.resolve.alias = {26      '~': path.resolve(__dirname, '../'),27    };28    return config;29  },30};31{32  "compilerOptions": {33  },34    "../src/**/*.stories.@(ts|tsx|js|jsx)",35    "../src/**/*.stories.@(ts|tsx|js|jsx).mdx"36}37module.exports = ({ config }) => {38  config.module.rules.push({39    include: path.resolve(__dirname, '../'),40  });41  return config;42};43const path = require('path');44module.exports = {45  webpackFinal: async (config) => {46    config.resolve.alias = {47      '~': path.resolve(__dirname, '../'),48    };49    return config;50  },51};52module.exports = {

Using AI Code Generation

1const { exportsMap } = require('storybook-root-config');2module.exports = exportsMap(__dirname, {3  'my-component': {4  }5});6module.exports = {7  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],8};

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.