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

Copied to Clipboard!

How to use storyIdIsInvalidHtmlTagName method in storybook-root

Best JavaScript code snippet using storybook-root

AbstractRenderer.ts

Source:AbstractRenderer.ts

1/* eslint-disable no-undef */2import { enableProdMode, NgModule, PlatformRef } from '@angular/core';3import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';4import { BehaviorSubject, Subject } from 'rxjs';5import { stringify } from 'telejson';6import { ICollection, StoryFnAngularReturnType } from '../types';7import { Parameters } from '../types-6-0';8import { createStorybookModule, getStorybookModuleMetadata } from './StorybookModule';9type StoryRenderInfo = {10  storyFnAngular: StoryFnAngularReturnType;11  moduleMetadataSnapshot: string;12};13// platform must be init only if render is called at least once14let platformRef: PlatformRef;15function getPlatform(newPlatform?: boolean): PlatformRef {16  if (!platformRef || newPlatform) {17    platformRef = platformBrowserDynamic();18  }19  return platformRef;20}21export abstract class AbstractRenderer {22  /**23   * Wait and destroy the platform24   */25  public static resetPlatformBrowserDynamic() {26    return new Promise<void>((resolve) => {27      if (platformRef && !platformRef.destroyed) {28        platformRef.onDestroy(async () => {29          resolve();30        });31        // Destroys the current Angular platform and all Angular applications on the page.32        // So call each angular ngOnDestroy and avoid memory leaks33        platformRef.destroy();34        return;35      }36      resolve();37    }).then(() => {38      getPlatform(true);39    });40  }41  /**42   * Reset compiled components because we often want to compile the same component with43   * more than one NgModule.44   */45  protected static resetCompiledComponents = async () => {46    try {47      // Clear global Angular component cache in order to be able to re-render the same component across multiple stories48      //49      // References:50      // https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/build_angular/src/webpack/plugins/hmr/hmr-accept.ts#L5051      // https://github.com/angular/angular/blob/2ebe2bcb2fe19bf672316b05f15241fd7fd40803/packages/core/src/render3/jit/module.ts#L377-L38452      const { ÉµresetCompiledComponents } = await import('@angular/core');53      ÉµresetCompiledComponents();54    } catch (e) {55      /**56       * noop catch57       * This means angular removed or modified ÉµresetCompiledComponents58       */59    }60  };61  protected previousStoryRenderInfo: StoryRenderInfo;62  // Observable to change the properties dynamically without reloading angular module&component63  protected storyProps$: Subject<ICollection | undefined>;64  constructor(public storyId: string) {65    if (typeof NODE_ENV === 'string' && NODE_ENV !== 'development') {66      try {67        // platform should be set after enableProdMode()68        enableProdMode();69      } catch (e) {70        // eslint-disable-next-line no-console71        console.debug(e);72      }73    }74  }75  protected abstract beforeFullRender(): Promise<void>;76  protected abstract afterFullRender(): Promise<void>;77  /**78   * Bootstrap main angular module with main component or send only new `props` with storyProps$79   *80   * @param storyFnAngular {StoryFnAngularReturnType}81   * @param forced {boolean} If :82   * - true render will only use the StoryFn `props' in storyProps observable that will update sotry's component/template properties. Improves performance without reloading the whole module&component if props changes83   * - false fully recharges or initializes angular module & component84   * @param component {Component}85   * @param parameters {Parameters}86   */87  public async render({88    storyFnAngular,89    forced,90    parameters,91    component,92    targetDOMNode,93  }: {94    storyFnAngular: StoryFnAngularReturnType;95    forced: boolean;96    component?: any;97    parameters: Parameters;98    targetDOMNode: HTMLElement;99  }) {100    const targetSelector = `${this.generateTargetSelectorFromStoryId()}`;101    const newStoryProps$ = new BehaviorSubject<ICollection>(storyFnAngular.props);102    const moduleMetadata = getStorybookModuleMetadata(103      { storyFnAngular, component, targetSelector },104      newStoryProps$105    );106    if (107      !this.fullRendererRequired({108        storyFnAngular,109        moduleMetadata,110        forced,111      })112    ) {113      this.storyProps$.next(storyFnAngular.props);114      return;115    }116    await this.beforeFullRender();117    // Complete last BehaviorSubject and set a new one for the current module118    if (this.storyProps$) {119      this.storyProps$.complete();120    }121    this.storyProps$ = newStoryProps$;122    this.initAngularRootElement(targetDOMNode, targetSelector);123    await getPlatform().bootstrapModule(124      createStorybookModule(moduleMetadata),125      parameters.bootstrapModuleOptions ?? undefined126    );127    await this.afterFullRender();128  }129  /**130   * Only ASCII alphanumerics can be used as HTML tag name.131   * https://html.spec.whatwg.org/#elements-2132   *133   * Therefore, stories break when non-ASCII alphanumerics are included in target selector.134   * https://github.com/storybookjs/storybook/issues/15147135   *136   * This method returns storyId when it doesn't contain any non-ASCII alphanumerics.137   * Otherwise, it generates a valid HTML tag name from storyId by removing non-ASCII alphanumerics from storyId, prefixing "sb-", and suffixing "-component"138   * @protected139   * @memberof AbstractRenderer140   */141  protected generateTargetSelectorFromStoryId() {142    const invalidHtmlTag = /[^A-Za-z0-9-]/g;143    const storyIdIsInvalidHtmlTagName = invalidHtmlTag.test(this.storyId);144    return storyIdIsInvalidHtmlTagName145      ? `sb-${this.storyId.replace(invalidHtmlTag, '')}-component`146      : this.storyId;147  }148  protected initAngularRootElement(targetDOMNode: HTMLElement, targetSelector: string) {149    // Adds DOM element that angular will use as bootstrap component150    // eslint-disable-next-line no-param-reassign151    targetDOMNode.innerHTML = '';152    targetDOMNode.appendChild(document.createElement(targetSelector));153  }154  private fullRendererRequired({155    storyFnAngular,156    moduleMetadata,157    forced,158  }: {159    storyFnAngular: StoryFnAngularReturnType;160    moduleMetadata: NgModule;161    forced: boolean;162  }) {163    const { previousStoryRenderInfo } = this;164    const currentStoryRender = {165      storyFnAngular,166      moduleMetadataSnapshot: stringify(moduleMetadata),167    };168    this.previousStoryRenderInfo = currentStoryRender;169    if (170      // check `forceRender` of story RenderContext171      !forced ||172      // if it's the first rendering and storyProps$ is not init173      !this.storyProps$174    ) {175      return true;176    }177    // force the rendering if the template has changed178    const hasChangedTemplate =179      !!storyFnAngular?.template &&180      previousStoryRenderInfo?.storyFnAngular?.template !== storyFnAngular.template;181    if (hasChangedTemplate) {182      return true;183    }184    // force the rendering if the metadata structure has changed185    const hasChangedModuleMetadata =186      currentStoryRender.moduleMetadataSnapshot !== previousStoryRenderInfo?.moduleMetadataSnapshot;187    return hasChangedModuleMetadata;188  }...

Using AI Code Generation

1const storyIdIsInvalidHtmlTagName = require('storybook-root').storyIdIsInvalidHtmlTagName;2const storyIdIsInvalidHtmlTagName = require('storybook-root').storyIdIsInvalidHtmlTagName;3const storyIdIsInvalidHtmlTagName = require('storybook-root').storyIdIsInvalidHtmlTagName;4const storyIdIsInvalidHtmlTagName = require('storybook-root').storyIdIsInvalidHtmlTagName;5const storyIdIsInvalidHtmlTagName = require('storybook-root').storyIdIsInvalidHtmlTagName;6const storyIdIsInvalidHtmlTagName = require('storybook-root').storyIdIsInvalidHtmlTagName;7const storyIdIsInvalidHtmlTagName = require('storybook-root').storyIdIsInvalidHtmlTagName;8const storyIdIsInvalidHtmlTagName = require('storybook-root').storyIdIsInvalidHtmlTagName;9const storyIdIsInvalidHtmlTagName = require('storybook-root').storyIdIsInvalidHtmlTagName;10const storyIdIsInvalidHtmlTagName = require('storybook-root').storyIdIsInvalidHtmlTagName;11const storyIdIsInvalidHtmlTagName = require('storybook-root').storyIdIsInvalidHtmlTagName;12const storyIdIsInvalidHtmlTagName = require('storybook-root').storyIdIsInvalidHtmlTagName;13const storyIdIsInvalidHtmlTagName = require('storybook-root').storyIdIsInvalidHtmlTagName;14const storyIdIsInvalidHtmlTagName = require('storybook-root').storyIdIsInvalidHtmlTagName;

Using AI Code Generation

1import { storyIdIsInvalidHtmlTagName } from 'storybook-root';2import { storyIdIsInvalidHtmlTagName } from 'storybook-root';3import { storyIdIsInvalidHtmlTagName } from 'storybook-root';4import { storyIdIsInvalidHtmlTagName } from 'storybook-root';5import { storyIdIsInvalidHtmlTagName } from 'storybook-root';6import { storyIdIsInvalidHtmlTagName } from 'storybook-root';7import { storyIdIsInvalidHtmlTagName } from 'storybook-root';8import { storyIdIsInvalidHtmlTagName } from 'storybook-root';9import { storyIdIsInvalidHtmlTagName } from 'storybook-root';10import { storyIdIsInvalidHtmlTagName } from 'storybook-root';11import { storyIdIsInvalidHtmlTagName } from 'storybook-root';12import { storyIdIsInvalidHtmlTagName } from 'storybook-root';13import { storyIdIsInvalidHtmlTagName } from 'storybook-root';14import { storyIdIsInvalidHtmlTagName } from 'storybook-root';15import { storyIdIsInvalidHtmlTagName } from 'storybook-root';16import { storyIdIsInvalidHtml

Using AI Code Generation

1const storybookRoot = require('storybook-root');2const storyIdIsInvalidHtmlTagName = storybookRoot.storyIdIsInvalidHtmlTagName;3const storyId = 'h1';4const isInvalid = storyIdIsInvalidHtmlTagName(storyId);5console.log('is invalid storyId', isInvalid);6const storyIdIsInvalidHtmlTagName = require('storyIdIsInvalidHtmlTagName');7const storyId = 'h1';8const isInvalid = storyIdIsInvalidHtmlTagName(storyId);9console.log('is invalid storyId', isInvalid);

Using AI Code Generation

1import { storyIdIsInvalidHtmlTagName } from "storybook-root";2console.log(storyIdIsInvalidHtmlTagName("story-id"));3import { storyIdIsInvalidHtmlTagName } from "storybook-root";4console.log(storyIdIsInvalidHtmlTagName("story-id"));5import { storyIdIsInvalidHtmlTagName } from "storybook-root";6console.log(storyIdIsInvalidHtmlTagName("story-id"));7import { storyIdIsInvalidHtmlTagName } from "storybook-root";8console.log(storyIdIsInvalidHtmlTagName("story-id"));9import { storyIdIsInvalidHtmlTagName } from "storybook-root";10console.log(storyIdIsInvalidHtmlTagName("story-id"));11import { storyIdIsInvalidHtmlTagName } from "storybook-root";12console.log(storyIdIsInvalidHtmlTagName("story-id"));13import { storyIdIsInvalidHtmlTagName } from "storybook-root";14console.log(storyIdIsInvalidHtmlTagName("story-id"));15import { storyIdIsInvalidHtmlTagName } from "storybook-root";16console.log(storyIdIsInvalidHtmlTagName("story-id"));17import { storyIdIsInvalidHtmlTagName } from "storybook-root";18console.log(storyIdIsInvalidHtmlTagName("story-id"));19import { storyIdIsInvalidHtmlTagName } from "storybook-root";20console.log(storyIdIsInvalidHtmlTagName("story-id"));

Using AI Code Generation

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

Using AI Code Generation

1const storyIdIsInvalidHtmlTagName = require('storybook-root').storyIdIsInvalidHtmlTagName;2console.log(storyIdIsInvalidHtmlTagName('button'));3console.log(storyIdIsInvalidHtmlTagName('my-button'));4import { storyIdIsInvalidHtmlTagName } from 'storybook-root';5console.log(storyIdIsInvalidHtmlTagName('button'));6console.log(storyIdIsInvalidHtmlTagName('my-button'));7import storybookRoot from 'storybook-root';8console.log(storybookRoot.storyIdIsInvalidHtmlTagName('button'));9console.log(storybookRoot.storyIdIsInvalidHtmlTagName('my-button'));10import { storyIdIsInvalidHtmlTagName } from 'storybook-root';11console.log(storyIdIsInvalidHtmlTagName('button'));12console.log(storyIdIsInvalidHtmlTagName('my-button'));13import storybookRoot from 'storybook-root';14console.log(storybookRoot.storyIdIsInvalidHtmlTagName('button'));15console.log(storybookRoot.storyIdIsInvalidHtmlTagName('my-button'));16import { storyIdIsInvalidHtmlTagName } from 'storybook-root';17console.log(storyIdIsInvalidHtmlTagName('button'));18console.log(storyIdIsInvalidHtmlTagName('my-button'));19import storybookRoot from 'storybook-root';20console.log(storybookRoot.storyIdIsInvalidHtmlTagName('button'));21console.log(storybookRoot.storyIdIsInvalidHtmlTagName('my-button'));

Using AI Code Generation

1import { storyIdIsInvalidHtmlTagName } from 'storybook-root';2const storyId = 'my-story-id';3const storyIdIsInvalidHtmlTagNameResult = storyIdIsInvalidHtmlTagName(storyId);4console.log(storyIdIsInvalidHtmlTagNameResult);5import { storyIdIsInvalidHtmlTagName } from 'storybook-root';6const storyId = 'a';7const storyIdIsInvalidHtmlTagNameResult = storyIdIsInvalidHtmlTagName(storyId);8console.log(storyIdIsInvalidHtmlTagNameResult);9import { storyIdIsInvalidHtmlTagName } from 'storybook-root';10const storyId = 'a ';11const storyIdIsInvalidHtmlTagNameResult = storyIdIsInvalidHtmlTagName(storyId);12console.log(storyIdIsInvalidHtmlTagNameResult);

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.