KaneAI - World’s First E2E Software Testing Agent.Signup for Private Beta Join TestMu Conference

How to use csfFilePromiseList method in storybook-root

Best JavaScript code snippet using storybook-root

StoryStore.ts

Source:StoryStore.ts

1import memoize from 'memoizerific';2import type {3  Parameters,4  StoryId,5  StoryContextForLoaders,6  AnyFramework,7  ProjectAnnotations,8  ComponentTitle,9  StoryContextForEnhancers,10  StoryContext,11} from '@storybook/csf';12import mapValues from 'lodash/mapValues';13import pick from 'lodash/pick';14import global from 'global';15import { SynchronousPromise } from 'synchronous-promise';16import { StoryIndexStore } from './StoryIndexStore';17import { ArgsStore } from './ArgsStore';18import { GlobalsStore } from './GlobalsStore';19import { processCSFFile, prepareStory, normalizeProjectAnnotations } from './csf';20import type {21  CSFFile,22  ModuleImportFn,23  Story,24  NormalizedProjectAnnotations,25  Path,26  ExtractOptions,27  BoundStory,28  StoryIndex,29  StoryIndexEntry,30  V2CompatIndexEntry,31} from './types';32import { HooksContext } from './hooks';33// TODO -- what are reasonable values for these?34const CSF_CACHE_SIZE = 1000;35const STORY_CACHE_SIZE = 10000;36export class StoryStore<TFramework extends AnyFramework> {37  storyIndex: StoryIndexStore;38  importFn: ModuleImportFn;39  projectAnnotations: NormalizedProjectAnnotations<TFramework>;40  globals: GlobalsStore;41  args: ArgsStore;42  hooks: Record<StoryId, HooksContext<TFramework>>;43  cachedCSFFiles?: Record<Path, CSFFile<TFramework>>;44  processCSFFileWithCache: typeof processCSFFile;45  prepareStoryWithCache: typeof prepareStory;46  initializationPromise: SynchronousPromise<void>;47  resolveInitializationPromise: () => void;48  constructor() {49    this.globals = new GlobalsStore();50    this.args = new ArgsStore();51    this.hooks = {};52    // We use a cache for these two functions for two reasons:53    //  1. For performance54    //  2. To ensure that when the same story is prepared with the same inputs you get the same output55    this.processCSFFileWithCache = memoize(CSF_CACHE_SIZE)(processCSFFile) as typeof processCSFFile;56    this.prepareStoryWithCache = memoize(STORY_CACHE_SIZE)(prepareStory) as typeof prepareStory;57    // We cannot call `loadStory()` until we've been initialized properly. But we can wait for it.58    this.initializationPromise = new SynchronousPromise((resolve) => {59      this.resolveInitializationPromise = resolve;60    });61  }62  setProjectAnnotations(projectAnnotations: ProjectAnnotations<TFramework>) {63    // By changing `this.projectAnnotations, we implicitly invalidate the `prepareStoryWithCache`64    this.projectAnnotations = normalizeProjectAnnotations(projectAnnotations);65    const { globals, globalTypes } = projectAnnotations;66    this.globals.set({ globals, globalTypes });67  }68  initialize({69    storyIndex,70    importFn,71    cache = false,72  }: {73    storyIndex?: StoryIndex;74    importFn: ModuleImportFn;75    cache?: boolean;76  }): PromiseLike<void> {77    this.storyIndex = new StoryIndexStore(storyIndex);78    this.importFn = importFn;79    // We don't need the cache to be loaded to call `loadStory`, we just need the index ready80    this.resolveInitializationPromise();81    return cache ? this.cacheAllCSFFiles() : SynchronousPromise.resolve();82  }83  // This means that one of the CSF files has changed.84  // If the `importFn` has changed, we will invalidate both caches.85  // If the `storyIndex` data has changed, we may or may not invalidate the caches, depending86  // on whether we've loaded the relevant files yet.87  async onStoriesChanged({88    importFn,89    storyIndex,90  }: {91    importFn?: ModuleImportFn;92    storyIndex?: StoryIndex;93  }) {94    if (importFn) this.importFn = importFn;95    if (storyIndex) this.storyIndex.stories = storyIndex.stories;96    if (this.cachedCSFFiles) await this.cacheAllCSFFiles();97  }98  // To load a single CSF file to service a story we need to look up the importPath in the index99  loadCSFFileByStoryId(storyId: StoryId): PromiseLike<CSFFile<TFramework>> {100    const { importPath, title } = this.storyIndex.storyIdToEntry(storyId);101    return this.importFn(importPath).then((moduleExports) =>102      // We pass the title in here as it may have been generated by autoTitle on the server.103      this.processCSFFileWithCache(moduleExports, importPath, title)104    );105  }106  loadAllCSFFiles(): PromiseLike<StoryStore<TFramework>['cachedCSFFiles']> {107    const importPaths: Record<Path, StoryId> = {};108    Object.entries(this.storyIndex.stories).forEach(([storyId, { importPath }]) => {109      importPaths[importPath] = storyId;110    });111    const csfFilePromiseList = Object.entries(importPaths).map(([importPath, storyId]) =>112      this.loadCSFFileByStoryId(storyId).then((csfFile) => ({113        importPath,114        csfFile,115      }))116    );117    return SynchronousPromise.all(csfFilePromiseList).then((list) =>118      list.reduce((acc, { importPath, csfFile }) => {119        acc[importPath] = csfFile;120        return acc;121      }, {} as Record<Path, CSFFile<TFramework>>)122    );123  }124  cacheAllCSFFiles(): PromiseLike<void> {125    return this.initializationPromise.then(() =>126      this.loadAllCSFFiles().then((csfFiles) => {127        this.cachedCSFFiles = csfFiles;128      })129    );130  }131  // Load the CSF file for a story and prepare the story from it and the project annotations.132  async loadStory({ storyId }: { storyId: StoryId }): Promise<Story<TFramework>> {133    await this.initializationPromise;134    const csfFile = await this.loadCSFFileByStoryId(storyId);135    return this.storyFromCSFFile({ storyId, csfFile });136  }137  // This function is synchronous for convenience -- often times if you have a CSF file already138  // it is easier not to have to await `loadStory`.139  storyFromCSFFile({140    storyId,141    csfFile,142  }: {143    storyId: StoryId;144    csfFile: CSFFile<TFramework>;145  }): Story<TFramework> {146    const storyAnnotations = csfFile.stories[storyId];147    if (!storyAnnotations) {148      throw new Error(`Didn't find '${storyId}' in CSF file, this is unexpected`);149    }150    const componentAnnotations = csfFile.meta;151    const story = this.prepareStoryWithCache(152      storyAnnotations,153      componentAnnotations,154      this.projectAnnotations155    );156    this.args.setInitial(story);157    this.hooks[story.id] = this.hooks[story.id] || new HooksContext();158    return story;159  }160  // If we have a CSF file we can get all the stories from it synchronously161  componentStoriesFromCSFFile({ csfFile }: { csfFile: CSFFile<TFramework> }): Story<TFramework>[] {162    return Object.keys(this.storyIndex.stories)163      .filter((storyId: StoryId) => !!csfFile.stories[storyId])164      .map((storyId: StoryId) => this.storyFromCSFFile({ storyId, csfFile }));165  }166  // A prepared story does not include args, globals or hooks. These are stored in the story store167  // and updated separtely to the (immutable) story.168  getStoryContext(story: Story<TFramework>): Omit<StoryContextForLoaders<TFramework>, 'viewMode'> {169    return {170      ...story,171      args: this.args.get(story.id),172      globals: this.globals.get(),173      hooks: this.hooks[story.id] as unknown,174    };175  }176  cleanupStory(story: Story<TFramework>): void {177    this.hooks[story.id].clean();178  }179  extract(180    options: ExtractOptions = { includeDocsOnly: false }181  ): Record<StoryId, StoryContextForEnhancers<TFramework>> {182    if (!this.cachedCSFFiles) {183      throw new Error('Cannot call extract() unless you call cacheAllCSFFiles() first.');184    }185    return Object.entries(this.storyIndex.stories).reduce((acc, [storyId, { importPath }]) => {186      const csfFile = this.cachedCSFFiles[importPath];187      const story = this.storyFromCSFFile({ storyId, csfFile });188      if (!options.includeDocsOnly && story.parameters.docsOnly) {189        return acc;190      }191      acc[storyId] = Object.entries(story).reduce(192        (storyAcc, [key, value]) => {193          if (typeof value === 'function') {194            return storyAcc;195          }196          if (Array.isArray(value)) {197            return Object.assign(storyAcc, { [key]: value.slice().sort() });198          }199          return Object.assign(storyAcc, { [key]: value });200        },201        { args: story.initialArgs }202      );203      return acc;204    }, {} as Record<string, any>);205  }206  getSetStoriesPayload() {207    const stories = this.extract({ includeDocsOnly: true });208    const kindParameters: Parameters = Object.values(stories).reduce(209      (acc: Parameters, { title }: { title: ComponentTitle }) => {210        acc[title] = {};211        return acc;212      },213      {} as Parameters214    );215    return {216      v: 2,217      globals: this.globals.get(),218      globalParameters: {},219      kindParameters,220      stories,221    };222  }223  getStoriesJsonData = () => {224    const value = this.getSetStoriesPayload();225    const allowedParameters = ['fileName', 'docsOnly', 'framework', '__id', '__isArgsStory'];226    const stories: Record<StoryId, StoryIndexEntry | V2CompatIndexEntry> = mapValues(227      value.stories,228      (story) => ({229        ...pick(story, ['id', 'name', 'title']),230        importPath: this.storyIndex.stories[story.id].importPath,231        ...(!global.FEATURES?.breakingChangesV7 && {232          kind: story.title,233          story: story.name,234          parameters: {235            ...pick(story.parameters, allowedParameters),236            fileName: this.storyIndex.stories[story.id].importPath,237          },238        }),239      })240    );241    return {242      v: 3,243      stories,244    };245  };246  raw(): BoundStory<TFramework>[] {247    return Object.values(this.extract()).map(({ id }: { id: StoryId }) => this.fromId(id));248  }249  fromId(storyId: StoryId): BoundStory<TFramework> {250    if (!this.cachedCSFFiles) {251      throw new Error('Cannot call fromId/raw() unless you call cacheAllCSFFiles() first.');252    }253    let importPath;254    try {255      ({ importPath } = this.storyIndex.storyIdToEntry(storyId));256    } catch (err) {257      return null;258    }259    const csfFile = this.cachedCSFFiles[importPath];260    const story = this.storyFromCSFFile({ storyId, csfFile });261    return {262      ...story,263      storyFn: (update) => {264        const context = {265          ...this.getStoryContext(story),266          viewMode: 'story',267        } as StoryContext<TFramework>;268        return story.unboundStoryFn({ ...context, ...update });269      },270    };271  }...

Using AI Code Generation

1const storybookRoot = require('storybook-root');2const path = require('path');3const fs = require('fs');4const csfFilePromiseList = storybookRoot.csfFilePromiseList;5const getStories = storybookRoot.getStories;6const getStorybookConfig = storybookRoot.getStorybookConfig;7const storybookConfigPath = path.join(process.cwd(), '.storybook');8const storybookConfig = getStorybookConfig(storybookConfigPath);9const csfFiles = csfFilePromiseList(storybookConfig);10Promise.all(csfFiles).then((csfFileList) => {11  const stories = getStories(csfFileList);12  console.log(stories);13});14const path = require('path');15const { configure } = require('@storybook/react');16const req = require.context('../src', true, /.stories.js$/);17function loadStories() {18  req.keys().forEach((filename) => req(filename));19}20configure(loadStories, module);

Using AI Code Generation

1const storybookRoot = require('storybook-root');2const csfFilePromiseList = storybookRoot.csfFilePromiseList;3const stories = await csfFilePromiseList();4const storybookRoot = require('storybook-root');5const csfFilePromiseList = storybookRoot.csfFilePromiseList;6const stories = await csfFilePromiseList();7const storybookRoot = require('storybook-root');8const csfFilePromiseList = storybookRoot.csfFilePromiseList;9const stories = await csfFilePromiseList();10const storybookRoot = require('storybook-root');11const csfFilePromiseList = storybookRoot.csfFilePromiseList;12const stories = await csfFilePromiseList();13const storybookRoot = require('storybook-root');14const csfFilePromiseList = storybookRoot.csfFilePromiseList;15const stories = await csfFilePromiseList();16const storybookRoot = require('storybook-root');17const csfFilePromiseList = storybookRoot.csfFilePromiseList;18const stories = await csfFilePromiseList();19const storybookRoot = require('storybook-root');20const csfFilePromiseList = storybookRoot.csfFilePromiseList;21const stories = await csfFilePromiseList();22const storybookRoot = require('storybook-root');23const csfFilePromiseList = storybookRoot.csfFilePromiseList;24const stories = await csfFilePromiseList();25const storybookRoot = require('storybook-root');26const csfFilePromiseList = storybookRoot.csfFilePromiseList;27const stories = await csfFilePromiseList();28const storybookRoot = require('storybook-root');29const csfFilePromiseList = storybookRoot.csfFilePromiseList;

Using AI Code Generation

1const csfFilePromiseList = require('@storybook/core/server').csfFilePromiseList;2const path = require('path');3const storybookRoot = path.resolve('node_modules/@storybook/react');4const pathToCSF = path.resolve('src');5csfFilePromiseList(storybookRoot, pathToCSF).then((list) => {6  console.log(list);7});8const csfFileList = require('@storybook/core/server').csfFileList;9const path = require('path');10const storybookRoot = path.resolve('node_modules/@storybook/react');11const pathToCSF = path.resolve('src');12const list = csfFileList(storybookRoot, pathToCSF);13console.log(list);

Using AI Code Generation

1const [csfFiles] = await csfFilePromiseList()2csfFiles.forEach((csfFile) => {3  console.log(csfFile)4})5{6}7const [csfFiles] = await csfFilePromiseList()8csfFiles.forEach((csfFile) => {9  console.log(csfFile)10})11{12}

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.