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 = {
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.
You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.
Get 100 minutes of automation test minutes FREE!!