Unlock 30% off on Manual Testing Annual Plans this Holiday Season.

Copied to Clipboard!

How to use matchingSpecifier method in storybook-root

Best JavaScript code snippet using storybook-root

scope.ts

Source:scope.ts

1import { NodePath, Binding } from "@babel/traverse";2import * as t from "@babel/types";3import { first } from "../array";4import { getImportDeclarations, TypeDeclaration } from "./domain";5import {6  areEquivalent,7  isFunctionDeclarationOrArrowFunction8} from "./identity";9import { isSelectablePath, SelectablePath } from "./selection";10export {11  findScopePath,12  findParentIfPath,13  getFunctionScopePath,14  isShadowIn,15  findFirstExistingDeclaration,16  findCommonAncestorToDeclareVariable,17  findAncestorThatCanHaveVariableDeclaration,18  bindingNamesInScope,19  referencesInScope,20  getReferencedImportDeclarations,21  getTypeReferencedImportDeclarations,22  hasReferencesDefinedInSameScope,23  hasTypeReferencesDefinedInSameScope24};25function findScopePath(path: NodePath<t.Node | null>): NodePath | null {26  return path.findParent(27    (parentPath) =>28      t.isExpressionStatement(parentPath) ||29      (t.isVariableDeclaration(parentPath) &&30        !t.isExportDeclaration(parentPath.parentPath)) ||31      t.isReturnStatement(parentPath) ||32      t.isClassDeclaration(parentPath) ||33      (t.isIfStatement(parentPath) &&34        !t.isIfStatement(parentPath.parentPath)) ||35      t.isWhileStatement(parentPath) ||36      t.isSwitchStatement(parentPath) ||37      t.isExportDeclaration(parentPath) ||38      t.isForStatement(parentPath) ||39      t.isThrowStatement(parentPath)40  );41}42function findParentIfPath(43  path: NodePath<t.Node | null>44): NodePath<t.IfStatement> | undefined {45  return path.findParent((parentPath) => t.isIfStatement(parentPath)) as46    | NodePath<t.IfStatement>47    | undefined;48}49function getFunctionScopePath(path: NodePath<t.FunctionDeclaration>): NodePath {50  return path.getFunctionParent() || path.parentPath;51}52function isShadowIn(53  id: t.Identifier,54  ancestors: t.TraversalAncestors55): boolean {56  // A variable is "shadow" if one of its ancestor redefines the Identifier.57  return ancestors.some(58    ({ node }) => isDeclaredInFunction(node) || isDeclaredInScope(node)59  );60  function isDeclaredInFunction(node: t.Node): boolean {61    return (62      isFunctionDeclarationOrArrowFunction(node) &&63      node.params.some((node) => areEquivalent(id, node))64    );65  }66  function isDeclaredInScope(node: t.Node): boolean {67    return (68      t.isBlockStatement(node) &&69      node.body.some(70        (child) =>71          t.isVariableDeclaration(child) &&72          child.declarations.some(73            (declaration) =>74              t.isVariableDeclarator(declaration) &&75              areEquivalent(id, declaration.id) &&76              // Of course, if it's the inlined variable it's not a shadow!77              declaration.id !== id78          )79      )80    );81  }82}83function findFirstExistingDeclaration(expressionPath: NodePath<t.Expression>) {84  const existingDeclarations: NodePath<DestructuredVariableDeclarator>[] =85    Object.values(expressionPath.scope.getAllBindings())86      .map(({ path }) => path)87      .filter(88        (path): path is NodePath<DestructuredVariableDeclarator> =>89          path.isVariableDeclarator() &&90          path.get("id").isObjectPattern() &&91          path.get("init").isIdentifier()92      )93      .filter((path) => areEquivalent(expressionPath.node, path.node.init));94  return first(existingDeclarations);95}96type DestructuredVariableDeclarator = t.VariableDeclarator & {97  id: t.ObjectPattern;98  init: t.Identifier;99};100function findCommonAncestorToDeclareVariable(101  path: NodePath,102  otherPaths: NodePath[]103): SelectablePath | null {104  let ancestor: NodePath | null = null;105  try {106    // Original type is incorrect, it will return a NodePath or throw107    ancestor = path.getEarliestCommonAncestorFrom(108      otherPaths109    ) as any as NodePath;110  } catch {111    // If it fails, it means it couldn't find the earliest ancestor.112    ancestor = getProgramPath(path);113  }114  return findAncestorThatCanHaveVariableDeclaration(ancestor);115}116function getProgramPath(path: NodePath): NodePath {117  const allAncestors = path.getAncestry();118  return allAncestors[allAncestors.length - 1];119}120function findAncestorThatCanHaveVariableDeclaration<T extends t.Node>(121  path: NodePath<T> | null122): SelectablePath<T> | null {123  if (path === null) return null;124  if (isSelectablePath(path)) {125    if (path.isProgram()) return path;126    if (path.isStatement() && !path.isBlockStatement()) return path;127  }128  // @ts-expect-error Not sure how to solve, looks like a typedef issue129  return findAncestorThatCanHaveVariableDeclaration(path.parentPath);130}131function bindingNamesInScope<T>(path: NodePath<T>): string[] {132  return Object.keys(path.scope.getAllBindings());133}134function referencesInScope(135  path: NodePath<t.FunctionDeclaration | t.FunctionExpression>136): NodePath[] {137  const allBindings = Object.values(path.scope.getAllBindings()) as Binding[];138  return (139    allBindings140      // Omit imports that are bound to the program and would appear in the list141      .filter((binding) => binding.path.isFunctionDeclaration())142      .flatMap((binding) => binding.referencePaths)143  );144}145function getReferencedImportDeclarations(146  functionPath: NodePath<t.FunctionDeclaration>,147  programPath: NodePath<t.Program>148): t.ImportDeclaration[] {149  let result: t.ImportDeclaration[] = [];150  const importDeclarations = getImportDeclarations(programPath);151  functionPath.get("body").traverse({152    Identifier(path) {153      if (!path.isReferenced()) return;154      importDeclarations.forEach((declaration) => {155        const matchingSpecifier = declaration.specifiers.find(({ local }) =>156          areEquivalent(local, path.node)157        );158        if (matchingSpecifier) {159          result.push({160            ...declaration,161            specifiers: [matchingSpecifier]162          });163        }164      });165    }166  });167  return result;168}169function getTypeReferencedImportDeclarations(170  typePath: NodePath<TypeDeclaration>,171  programPath: NodePath<t.Program>172): t.ImportDeclaration[] {173  let result: t.ImportDeclaration[] = [];174  const importDeclarations = getImportDeclarations(programPath);175  typePath.traverse({176    TSTypeReference(path) {177      if (!path.isReferenced()) return;178      importDeclarations.forEach((declaration) => {179        const matchingSpecifier = declaration.specifiers.find(({ local }) =>180          areEquivalent(local, path.node.typeName)181        );182        if (matchingSpecifier) {183          result.push({184            ...declaration,185            specifiers: [matchingSpecifier]186          });187        }188      });189    }190  });191  return result;192}193function hasReferencesDefinedInSameScope(194  functionPath: NodePath<t.FunctionDeclaration>,195  programPath: NodePath<t.Program>196): boolean {197  let result = false;198  const scopeReferencesNames = bindingNamesInScope(functionPath);199  const importDeclarations = getImportDeclarations(programPath);200  const importReferencesNames = importDeclarations201    .flatMap(({ specifiers }) => specifiers)202    .map(({ local }) => local.name);203  const functionParamsNames = functionPath.node.params.flatMap(getNames);204  const referencesDefinedInSameScope = scopeReferencesNames205    .filter((name) => !importReferencesNames.includes(name))206    .filter((name) => !functionParamsNames.includes(name));207  functionPath.get("body").traverse({208    Identifier(path) {209      if (!path.isReferenced()) return;210      if (referencesDefinedInSameScope.includes(path.node.name)) {211        result = true;212        path.stop();213      }214    }215  });216  return result;217}218function hasTypeReferencesDefinedInSameScope(219  typePath: NodePath<TypeDeclaration>220): boolean {221  let result = false;222  typePath.traverse({223    TSTypeReference(path) {224      if (!path.isReferenced()) return;225      if (!t.isIdentifier(path.node.typeName)) return;226      if (typePath.scope.hasGlobal(path.node.typeName.name)) {227        result = true;228        path.stop();229      }230    }231  });232  return result;233}234function getNames(node: t.Node | null): string[] {235  if (t.isArrayPattern(node)) return node.elements.flatMap(getNames);236  if (t.isAssignmentPattern(node)) return getNames(node.left);237  if (t.isIdentifier(node)) return [node.name];238  if (t.isRestElement(node)) return getNames(node.argument);239  if (t.isObjectPattern(node)) return node.properties.flatMap(getNames);240  if (t.isObjectProperty(node)) return getNames(node.key);241  return [];...

watch-story-specifiers.ts

Source:watch-story-specifiers.ts

1import Watchpack from 'watchpack';2import slash from 'slash';3import fs from 'fs';4import path from 'path';5import glob from 'globby';6import { NormalizedStoriesSpecifier } from '@storybook/core-common';7import { Path } from '@storybook/store';8const isDirectory = (directory: Path) => {9  try {10    return fs.lstatSync(directory).isDirectory();11  } catch (err) {12    return false;13  }14};15// Watchpack (and path.relative) passes paths either with no leading './' - e.g. `src/Foo.stories.js`,16// or with a leading `../` (etc), e.g. `../src/Foo.stories.js`.17// We want to deal in importPaths relative to the working dir, so we normalize18function toImportPath(relativePath: Path) {19  return relativePath.startsWith('.') ? relativePath : `./${relativePath}`;20}21export function watchStorySpecifiers(22  specifiers: NormalizedStoriesSpecifier[],23  options: { workingDir: Path },24  onInvalidate: (specifier: NormalizedStoriesSpecifier, path: Path, removed: boolean) => void25) {26  // See https://www.npmjs.com/package/watchpack for full options.27  // If you want less traffic, consider using aggregation with some interval28  const wp = new Watchpack({29    // poll: true, // Slow!!! Enable only in special cases30    followSymlinks: false,31    ignored: ['**/.git', 'node_modules'],32  });33  wp.watch({34    directories: specifiers.map((ns) => ns.directory),35  });36  async function onChangeOrRemove(watchpackPath: Path, removed: boolean) {37    // Watchpack passes paths either with no leading './' - e.g. `src/Foo.stories.js`,38    // or with a leading `../` (etc), e.g. `../src/Foo.stories.js`.39    // We want to deal in importPaths relative to the working dir, or absolute paths.40    const importPath = slash(watchpackPath.startsWith('.') ? watchpackPath : `./${watchpackPath}`);41    const matchingSpecifier = specifiers.find((ns) => ns.importPathMatcher.exec(importPath));42    if (matchingSpecifier) {43      onInvalidate(matchingSpecifier, importPath, removed);44      return;45    }46    // When a directory is removed, watchpack will fire a removed event for each file also47    // (so we don't need to do anything special).48    // However, when a directory is added, it does not fire events for any files *within* the directory,49    // so we need to scan within that directory for new files. It is tricky to use a glob for this,50    // so we'll do something a bit more "dumb" for now51    const absolutePath = path.join(options.workingDir, importPath);52    if (!removed && isDirectory(absolutePath)) {53      await Promise.all(54        specifiers55          // We only receive events for files (incl. directories) that are *within* a specifier,56          // so will match one (or more) specifiers with this simple `startsWith`57          .filter((specifier) => importPath.startsWith(specifier.directory))58          .map(async (specifier) => {59            // If `./path/to/dir` was added, check all files matching `./path/to/dir/**/*.stories.*`60            // (where the last bit depends on `files`).61            const dirGlob = path.join(62              options.workingDir,63              importPath,64              '**',65              // files can be e.g. '**/foo/*/*.js' so we just want the last bit,66              // because the directoru could already be within the files part (e.g. './x/foo/bar')67              path.basename(specifier.files)68            );69            const files = await glob(dirGlob);70            files.forEach((filePath) => {71              const fileImportPath = toImportPath(path.relative(options.workingDir, filePath));72              if (specifier.importPathMatcher.exec(fileImportPath)) {73                onInvalidate(specifier, fileImportPath, removed);74              }75            });76          })77      );78    }79  }80  wp.on('change', async (filePath: Path, mtime: Date, explanation: string) => {81    // When a file is renamed (including being moved out of the watched dir)82    // we see first an event with explanation=rename and no mtime for the old name.83    // then an event with explanation=rename with an mtime for the new name.84    // In theory we could try and track both events together and move the exports85    // but that seems dangerous (what if the contents changed?) and frankly not worth it86    // (at this stage at least)87    const removed = !mtime;88    await onChangeOrRemove(filePath, removed);89  });90  wp.on('remove', async (filePath: Path, explanation: string) => {91    await onChangeOrRemove(filePath, true);92  });93  return () => wp.close();...

StoryExplorerStoryFile.ts

Source:StoryExplorerStoryFile.ts

1import { sanitize } from '@componentdriven/csf';2import type { GlobSpecifier } from '../config/GlobSpecifier';3import type { ParsedStoryWithFileUri } from '../parser/parseStoriesFileByUri';4import { StoryExplorerStory } from './StoryExplorerStory';5import { getAutoTitleSuffixParts } from './getAutoTitleSuffixParts';6import { getPartialFilePath } from './getPartialFilePath';7export class StoryExplorerStoryFile {8  public readonly docsStory?: StoryExplorerStory;9  private readonly stories: StoryExplorerStory[];10  public constructor(11    private readonly parsed: ParsedStoryWithFileUri,12    private readonly specifiers: GlobSpecifier[],13  ) {14    this.stories = parsed.stories.reduce<StoryExplorerStory[]>((acc, story) => {15      const { nameForId, location, name } = story;16      if (name) {17        const seStory = StoryExplorerStory.fromStory(18          { nameForId, location, name },19          this,20        );21        if (seStory) {22          acc.push(seStory);23        }24      }25      return acc;26    }, []);27    this.docsStory = StoryExplorerStory.fromStoryFileForDocs(this);28  }29  public getUri() {30    return this.parsed.file;31  }32  public getTitle() {33    const uri = this.getUri();34    const matchingSpecifier = this.specifiers.find(35      (specifier) =>36        uri.scheme === specifier.directory.scheme &&37        uri.authority === specifier.directory.authority &&38        uri.path.startsWith(specifier.directory.path),39    );40    if (!matchingSpecifier) {41      return undefined;42    }43    const titlePrefixParts = matchingSpecifier.titlePrefix.split('/');44    const metaTitle = this.parsed.meta.title;45    const titleSuffix = metaTitle46      ? metaTitle.split('/')47      : getAutoTitleSuffixParts(48          getPartialFilePath(matchingSpecifier.directory.path, uri.path),49        );50    const autoTitleParts = [...titlePrefixParts, ...titleSuffix].filter(51      Boolean,52    );53    return autoTitleParts.join('/');54  }55  public getId() {56    const metaId = this.parsed.meta.id;57    if (metaId) {58      return metaId;59    }60    const title = this.getTitle();61    if (title) {62      return sanitize(title);63    }64  }65  public getStories() {66    return this.stories;67  }68  public getAllStories() {69    return [this.docsStory, ...this.stories].filter(70      Boolean,71    ) as StoryExplorerStory[];72  }73  public isDocsOnly() {74    return this.isMdx() && this.parsed.stories.length === 0;75  }76  public getMetaLocation() {77    return this.parsed.meta.location;78  }79  public isMdx() {80    return this.parsed.type === 'mdx';81  }...

Using AI Code Generation

1import { matchingSpecifier } from 'storybook-root';2console.log(matchingSpecifier('test'));3import { matchingSpecifier } from 'storybook-root';4console.log(matchingSpecifier('test'));5import { matchingSpecifier } from 'storybook-root';6console.log(matchingSpecifier('test'));7import { matchingSpecifier } from 'storybook-root';8console.log(matchingSpecifier('test'));9import { matchingSpecifier } from 'storybook-root';10console.log(matchingSpecifier('test'));11import { matchingSpecifier } from 'storybook-root';12console.log(matchingSpecifier('test'));13import { matchingSpecifier } from 'storybook-root';14console.log(matchingSpecifier('test'));15import { matchingSpecifier } from 'storybook-root';16console.log(matchingSpecifier('test'));17import { matchingSpecifier } from 'storybook-root';18console.log(matchingSpecifier('test'));19import { matchingSpecifier } from 'storybook-root';20console.log(matchingSpecifier('test'));21import { matchingSpecifier } from 'storybook-root';22console.log(matchingSpecifier('test'));23import { matchingSpecifier } from 'storybook-root';24console.log(matchingSpecifier('test'));25import { matchingSpecifier } from 'storybook-root';26console.log(matchingSpecifier('test'));27import { matchingSpecifier } from 'storybook-root';28console.log(matchingSpecifier('test'));

Using AI Code Generation

1import { matchingSpecifier } from 'storybook-root-configuration';2matchingSpecifier('test');3import { matchingSpecifier } from 'storybook-root-configuration';4matchingSpecifier('test');5import { matchingSpecifier } from 'storybook-root-configuration';6matchingSpecifier('test');7import { matchingSpecifier } from 'storybook-root-configuration';8matchingSpecifier('test');9import { matchingSpecifier } from 'storybook-root-configuration';10matchingSpecifier('test');11import { matchingSpecifier } from 'storybook-root-configuration';12matchingSpecifier('test');13import { matchingSpecifier } from 'storybook-root-configuration';14matchingSpecifier('test');15import { matchingSpecifier } from 'storybook-root-configuration';16matchingSpecifier('test');17import { matchingSpecifier } from 'storybook-root-configuration';18matchingSpecifier('test');19import { matchingSpecifier } from 'storybook-root-configuration';20matchingSpecifier('test');21import { matchingSpecifier } from 'storybook-root-configuration';22matchingSpecifier('test');23import { matchingSpecifier } from 'storybook-root-configuration';24matchingSpecifier('test');

Using AI Code Generation

1const { matchingSpecifier } = require('storybook-root-cause');2  {3  },4  {5    props: {6    },7  },8  {9    props: {10    },11  },12  {13    props: {14    },15  },16  {17    props: {18    },19  },20  {21    props: {22    },23  },24];25const specifier = {26  props: {27  },28};29const result = matchingSpecifier(specifier, specifiers);30console.log(result);31const { matchingSpecifier } = require('storybook-root-cause');32  {33  },34  {35    props: {36    },37  },38  {39    props: {40    },41  },42  {43    props: {44    },45  },46  {47    props: {48    },49  },50  {

Using AI Code Generation

1import { matchingSpecifier } from 'storybook-root';2import { storiesOf } from '@storybook/react-native';3import { text, withKnobs } from '@storybook/addon-knobs';4const stories = storiesOf('MyComponent', module);5stories.addDecorator(withKnobs);6stories.add('with text', () => {7  const textValue = text('text', 'Hello Storybook');8  if (matchingSpecifier('with text')) {9    return <MyComponent text={textValue} />;10  }11  return null;12});13stories.add('with some emoji', () => {14  const textValue = text('text', '😀 😎 👍 💯');15  if (matchingSpecifier('with some emoji')) {16    return <MyComponent text={textValue} />;17  }18  return null;19});20stories.add('with some other emoji', () => {21  const textValue = text('text', '👻 🎃 👻');22  if (matchingSpecifier('with some other emoji')) {23    return <MyComponent text={textValue} />;24  }25  return null;26});27stories.add('with some other text', () => {28  const textValue = text('text', 'Hello Storybook');29  if (matchingSpecifier('with some other text')) {30    return <MyComponent text={textValue} />;31  }32  return null;33});34stories.add('with some other text and emoji', () => {35  const textValue = text('text', 'Hello Storybook');36  if (matchingSpecifier('with some other text and emoji')) {37    return <MyComponent text={textValue} />;38  }39  return null;40});41stories.add('with some other text and other emoji', () => {42  const textValue = text('text', 'Hello Storybook');43  if (matchingSpecifier('with some other text and other emoji')) {44    return <MyComponent text={textValue} />;45  }46  return null;47});48stories.add('with some other text and other emoji and other text', () => {49  const textValue = text('text', 'Hello Storybook');50  if (matchingSpecifier('with some other text and other emoji and other text')) {51    return <MyComponent text={textValue} />;52  }53  return null;54});55stories.add('with some other text and other emoji and other text and other emoji', () => {

Using AI Code Generation

1import { matchingSpecifier } from 'storybook-root';2const specifiers = [ 'app', 'app/containers', 'app/components', 'app/components/atoms', 'app/components/molecules', 'app/components/organisms', 'app/components/templates', 'app/components/pages' ];3const specifier = matchingSpecifier(specifiers, 'app/components/pages/MyPage');4import { matchingSpecifier } from 'storybook-root';5const specifiers = [ 'app', 'app/containers', 'app/components', 'app/components/atoms', 'app/components/molecules', 'app/components/organisms', 'app/components/templates', 'app/components/pages' ];6const specifier = matchingSpecifier(specifiers, 'app/components/pages/MyPage');

Using AI Code Generation

1import { matchingSpecifier } from 'storybook-root-logger';2const logger = matchingSpecifier('test');3logger.info('info message');4logger.warn('warn message');5logger.error('error message');6import { matchingSpecifier } from 'storybook-root-logger';7const logger = matchingSpecifier('test2');8logger.info('info message');9logger.warn('warn message');10logger.error('error message');11const logger = matching('test', ['info', 'warn']);12const logger = matchingSpecifier('test', 'error');

Using AI Code Generation

1import { matchingSpecifier } from 'storybook-root-alias';2const path = matchingSpecifier('my-component');3export default () => <div>My Component</div>;4import MyComponent from 'my-component';5export default () => <div>My Component</div>;6import MyComponent from 'my-component/MyComponent';7export default () => <div>My Component</div>;8import MyComponent from 'my-component/MyComponent';9export default () => <div>My Component</div>;10import MyComponent from 'my-component/MyComponent';11export default () => <div>My Component</div>;12import MyComponent from 'my-component/MyComponent';13export default () => <div>My Component</div>;14import MyComponent from 'my-component/MyComponent';15export default () => <div>My Component</div>;16import MyComponent from 'my-component/MyComponent';17export default () => <div>My Component</div>;18import MyComponent from 'my-component/MyComponent';19export default () => <div>My Component</div>;20import MyComponent from

Using AI Code Generation

1const { matchingSpecifier } = require('storybook-root-cause');2const testStory = (storyName) => {3  it(storyName, () => {4  });5};6describe('Storybook test', () => {7  testStory('Button');8  testStory('Text');9});

Using AI Code Generation

1import { matchingSpecifier } from 'storybook-root';2const story = matchingSpecifier('test');3import { storiesOf } from '@storybook/react';4import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';5import { withInfo } from '@storybook/addon-info';6import { withNotes } from '@storybook/addon-notes';7import { withOptions } from '@storybook/addon-options';8import { withViewport } from '@storybook/addon-viewport';9import { withA11y } from '@storybook/addon-a11y';10import { withBackgrounds } from '@storybook/addon-backgrounds';11import { withSpecs } from 'storybook-addon-specifications';12import { specs, describe, it } from 'storybook-addon-specifications';13import { withTests } from '@storybook/addon-jest';14import { withConsole } from '@storybook/addon-console';15import { addDecorator, setAddon, configure, getStorybook, getStorybookUI } from '@storybook/react-native';16import * as React from 'react';17import { View } from 'react-native';18import { storiesOf, addDecorator, setAddon, configure, getStorybook, getStorybookUI } from '@storybook/react-native';19import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';20import { withInfo } from '@storybook/addon-info';21import { withNotes } from '@storybook/addon-notes';22import { withOptions } from '@storybook/addon-options';23import { withViewport } from '@storybook/addon-viewport';24import { withA11y } from '@storybook/addon-a11y';25import { withBackgrounds } from '@storybook/addon-backgrounds';26import { withSpecs } from 'storybook-addon-specifications';27import { specs, describe,

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.