How to use customElementsJson method in storybook-root

Best JavaScript code snippet using storybook-root

story-header.ts

Source:story-header.ts

1import { css, html, LitElement, nothing, PropertyValues } from 'lit';2import { customElement, property, query, state } from 'lit/decorators.js';3import { h1, p } from '@leavittsoftware/titanium-styles';4import '@leavittsoftware/titanium-chip';5import { CountUp } from 'countup.js';6type CustomElementDeclaration = {7  name?: string;8  description?: string;9  tagName?: string;10  kind?: string;11};12@customElement('story-header')13export default class StoryHeaderElement extends LitElement {14  @property({ type: String }) name: string;15  @property({ type: String }) packageName: string;16  @property({ type: String }) className: string;17  @property({ type: String }) deprecatedReason: string;18  @query('span.major') private major: HTMLDivElement;19  @query('span.minor') private minor: HTMLDivElement;20  @query('span.rev') private rev: HTMLDivElement;21  @query('span.downloads') private downloads: HTMLDivElement;22  @state()23  customElementsJSON: { modules: [{ declarations: Array<CustomElementDeclaration> }] } | null = null;24  @state()25  customElementDeclaration: CustomElementDeclaration | null = null;26  async firstUpdated() {27    this.customElementsJSON = await this.readCustomElementsJson('/custom-elements.json');28  }29  async updated(changedProps: PropertyValues<this>) {30    if ((changedProps.has('className') || changedProps.has('customElementsJSON')) && this.className && this.customElementsJSON) {31      this.customElementDeclaration = this.customElementsJSON?.modules.flatMap(o => o.declarations).find(o => o.name === this.className) ?? null;32    }33    if (changedProps.has('packageName') && this.packageName) {34      const [version, downloadCount] = (await this.getVersion(this.packageName)) ?? [];35      if (version) {36        const [major, minor, rev] = version.split('.').map(o => Number(o));37        const countUp = new CountUp(this.major, major, { suffix: '.', duration: 1 });38        const countUp2 = new CountUp(this.minor, minor, { suffix: '.', duration: 1 });39        const countUp3 = new CountUp(this.rev, rev, { duration: 1 });40        countUp.start();41        setTimeout(() => {42          countUp2.start();43        }, 500);44        setTimeout(() => {45          countUp3.start();46        }, 1000);47        const downloadsCountUp = new CountUp(this.downloads, downloadCount ?? 0, { useGrouping: true, suffix: ' downloads' });48        downloadsCountUp.start();49      }50    }51  }52  private async readCustomElementsJson(path: string) {53    try {54      const response = await fetch(path, {55        method: 'GET',56      });57      const text = await response.text();58      return text.length ? JSON.parse(text) : {};59    } catch (error) {60      console.warn(error);61    }62    return null;63  }64  private async getVersion(packageName: string): Promise<[string, number] | null> {65    try {66      const response = await fetch(`https://api.npms.io/v2/package/@leavittsoftware%2F${packageName}`, {67        method: 'GET',68      });69      const text = await response.text();70      const json = text.length ? JSON.parse(text) : {};71      return [72        json.collected.metadata.version as string,73        json.collected.npm.downloads.reduce((previousValue, currentValue) => currentValue.count + previousValue, 0) as number,74      ];75    } catch (error) {76      console.warn(error);77    }78    return null;79  }80  static styles = [81    h1,82    p,83    css`84      :host {85        display: block;86        padding-bottom: 48px;87      }88      h1 {89        padding: 0;90        margin: 0;91      }92      [code] {93        font-family: Consolas, monospace;94        color: var(--app-light-text-color);95        font-size: 18px;96      }97      p[desc] {98        margin-top: 12px;99      }100      h1 {101        font-size: 36px;102        line-height: 44px;103        font-weight: 400;104        padding: 0;105        margin: 0;106      }107      info-container {108        display: flex;109        align-items: center;110        gap: 6px;111      }112      chip-container {113        display: flex;114        margin-top: 12px;115        gap: 6px;116      }117      titanium-chip {118        height: 24px;119        padding: 0px 6px;120        --app-text-color: #f5f5f5;121      }122      titanium-chip[black] {123        --titanium-chip-label-background-color: #212121;124      }125      titanium-chip[blue] {126        --titanium-chip-label-background-color: var(--app-primary-color);127      }128      titanium-chip[deprecated] {129        --titanium-chip-label-background-color: var(--app-accent-color-red);130      }131    `,132  ];133  render() {134    return html`135      <h1>${this.name}</h1>136      <info-container>137        ${this.customElementDeclaration?.tagName138          ? html`<p code>${'<'}${this.customElementDeclaration?.tagName}${'>'}</p>139              <p>|</p>`140          : ''}141        <p code>${this.className}</p>142      </info-container>143      <p desc>${this.customElementDeclaration?.description}</p>144      <chip-container>145        ${this.packageName146          ? html`147              <titanium-chip readonly black>148                <span slot="label"><span class="major"></span><span class="minor"></span><span class="rev"></span></span>149              </titanium-chip>150              <titanium-chip readonly blue>151                <span slot="label"><span class="downloads"></span></span>152              </titanium-chip>153            `154          : nothing}155        ${this.deprecatedReason ? html`<titanium-chip readonly deprecated label="Deprecated (${this.deprecatedReason})"></titanium-chip>` : nothing}156      </chip-container>157    `;158  }...

index.test.ts

Source:index.test.ts

1import { expect } from 'chai';2import { CustomElementsJson } from '../src/index';3const default_fixture = { version: '', modules: []};4const many_classes_and_superclasses = require('../fixtures/many_classes_and_superclasses.json');5describe('CustomElementsJson', () => {6  it('instantiates', () => {7    const customElementsJson = new CustomElementsJson(default_fixture);8    expect(customElementsJson.json).to.equal(default_fixture);9  });10  describe('getByTagName', () => {11    it('getByTagName', () => {12      const customElementsJson = new CustomElementsJson(many_classes_and_superclasses);13      expect(customElementsJson.getByTagName('c-c').name).to.equal('C');14      expect(customElementsJson.getByTagName('c-c').tagName).to.equal('c-c');15      expect(customElementsJson.getByTagName('a-a').name).to.equal('A');16      expect(customElementsJson.getByTagName('a-a').tagName).to.equal('a-a');17    });18  });19  describe('getByClassName', () => {20    it('getByClassName', () => {21      const customElementsJson = new CustomElementsJson(many_classes_and_superclasses);22      expect(customElementsJson.getByClassName('C').name).to.equal('C');23      expect(customElementsJson.getByClassName('C').tagName).to.equal('c-c');24      expect(customElementsJson.getByClassName('A').name).to.equal('A');25      expect(customElementsJson.getByClassName('A').tagName).to.equal('a-a');26    });27    it('getByClassName - gets a superclass', () => {28      const customElementsJson = new CustomElementsJson(many_classes_and_superclasses);29      expect(customElementsJson.getByClassName('SuperB').name).to.equal('SuperB');30      expect(customElementsJson.getByClassName('SuperB').members!.length).to.equal(1);31    });32  });33  describe('getClasses', () => {34    it('getClasses - gets all classes', () => {35      const customElementsJson = new CustomElementsJson(many_classes_and_superclasses);36      expect(customElementsJson.getClasses().length).to.equal(4);37    });38  });39  describe('getDefinitions', () => {40    it('getDefinitions - gets all definitions', () => {41      const customElementsJson = new CustomElementsJson(many_classes_and_superclasses);42      expect(customElementsJson.getDefinitions().length).to.equal(2);43    });44  });45  describe('getMixins', () => {46    const multiple_mixins = require('../fixtures/multiple_mixins.json');47    it('getMixins - gets all mixins', () => {48      const customElementsJson = new CustomElementsJson(multiple_mixins);49      expect(customElementsJson.getMixins().length).to.equal(2);50    });51  });52  describe('getInheritanceTree', () => {53    const only_superclasses = require('../fixtures/inheritance/only_superclasses/custom-elements.json');54    const superclasses_and_mixins = require('../fixtures/inheritance/superclasses_and_mixins/custom-elements.json');55    it('getInheritanceTree - gets all superclasses', () => {56      const customElementsJson = new CustomElementsJson(only_superclasses);57      expect(customElementsJson.getInheritanceTree('MyComponent').length).to.equal(3);58      expect(customElementsJson.getInheritanceTree('MyComponent')[0].name).to.equal('MyComponent');59      expect(customElementsJson.getInheritanceTree('MyComponent')[1].name).to.equal('LitElement');60      expect(customElementsJson.getInheritanceTree('MyComponent')[2].name).to.equal('UpdatingElement');61    });62    it('getInheritanceTree - gets all superclasses and mixins', () => {63      const customElementsJson = new CustomElementsJson(superclasses_and_mixins);64      expect(customElementsJson.getInheritanceTree('MyComponent').length).to.equal(5);65      expect(customElementsJson.getInheritanceTree('MyComponent')[0].name).to.equal('MyComponent');66      expect(customElementsJson.getInheritanceTree('MyComponent')[1].name).to.equal('TabindexMixin');67      expect(customElementsJson.getInheritanceTree('MyComponent')[2].name).to.equal('LocalizeMixin');68      expect(customElementsJson.getInheritanceTree('MyComponent')[3].name).to.equal('LitElement');69      expect(customElementsJson.getInheritanceTree('MyComponent')[4].name).to.equal('UpdatingElement');70    });71    it('getInheritanceTree - returns empty array if class not found', () => {72      const customElementsJson = new CustomElementsJson(only_superclasses);73      expect(customElementsJson.getInheritanceTree('AsdfAsdf').length).to.equal(0);74    });75  });...

rollup-plugin-custom-elements-json.ts

Source:rollup-plugin-custom-elements-json.ts

...13/**14 * A Rollup plugin that uses web component analyzer to generate a custom-elements.json file.15 * @param config16 */17export function customElementsJson(config: Partial<IRollupPluginCustomElementsJsonConfig> = {}) {18	const { verbose } = { ...defaultConfig, ...config };19	return {20		name: "customElementsJson",21		generateBundle: async (outputOptions: OutputOptions, bundle: OutputBundle, isWrite: boolean): Promise<void> => {22			if (!isWrite) return;23			try {24				//analyzeComponents(sourceFile, { checker }); what? :-)25			} catch (ex) {26				if (verbose) {27					console.log(colors.red(`[customElementsJson] - Something went wrong: "${ex.message}"`));28				}29			}30		}31	};...

Using AI Code Generation

1import { customElementsJson } from 'storybook-root-elements';2export const parameters = {3  docs: {4  },5};6import { customElementsJson } from 'storybook-root-elements';7export const parameters = {8  docs: {9  },10};11const { customElementsJson } = require('storybook-root-elements');12module.exports = {13  stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],14  docs: {15  },16};17const { customElementsJson } = require('storybook-root-elements');18module.exports = {19  stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],20  docs: {21  },22};

Using AI Code Generation

1import { customElementsJson } from 'storybook-root';2const customElementsJson = require('storybook-root').customElementsJson;3const customElementsJson = require('storybook-root/custom-elements.json');4const customElementsJson = require('storybook-root').customElementsJson;5const customElementsJson = require('storybook-root/custom-elements.json');6const customElementsJson = require('storybook-root').customElementsJson;7const customElementsJson = require('storybook-root/custom-elements.json');8const customElementsJson = require('storybook-root').customElementsJson;9const customElementsJson = require('storybook-root/custom-elements.json');10const customElementsJson = require('storybook-root').customElementsJson;11const customElementsJson = require('storybook-root/custom-elements.json');12const customElementsJson = require('storybook-root').customElementsJson;13const customElementsJson = require('storybook-root/custom-elements.json');14const customElementsJson = require('storybook-root').customElementsJson;15const customElementsJson = require('storybook-root/custom-elements.json');16const customElementsJson = require('storybook-root').customElementsJson;17const customElementsJson = require('storybook-root/custom-elements.json');18const customElementsJson = require('storybook-root').customElementsJson;19const customElementsJson = require('storybook-root/custom-elements.json');

Using AI Code Generation

1import {customElementsJson} from 'storybook-root-elements';2import {customElementsJson} from 'storybook-root-elements';3const {customElementsJson} = require('storybook-root-elements');4import {customElementsJson} from 'storybook-root-elements';5import {customElementsJson} from 'storybook-root-elements';6import {customElementsJson} from 'storybook-root-elements';7import {customElementsJson} from 'storybook-root-elements';8import {customElementsJson} from 'storybook-root-elements';9import {customElementsJson} from 'storybook-root-elements';10import {customElementsJson} from 'storybook-root-elements';11import

Using AI Code Generation

1import { customElementsJson } from 'storybook-root-elements';2import { storiesOf } from '@storybook/html';3storiesOf('My Storybook', module)4  .add('My Element', () => {5    const element = document.createElement('my-element');6    element.textContent = 'Hello World';7    return element;8  });9customElementsJson();10import { customElementsJson } from 'storybook-root-elements';11customElementsJson();12import { customElementsJson } from 'storybook-root-elements';13customElementsJson();14import { customElementsJson } from 'storybook-root-elements';15customElementsJson();16const { customElementsJson } = require('storybook-root-elements');17customElementsJson();18import { storiesOf } from '@storybook/html';19storiesOf('My Storybook', module)20  .add('My Element', () => {21    const element = document.createElement('my-element');22    element.textContent = 'Hello World';23    return element;24  });

Using AI Code Generation

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

Using AI Code Generation

1const customElementsJson = require('storybook-root/customElementsJson');2customElementsJson('storybook-root', {3    {4    },5    {6    },7});8MIT © [Dylan Schiemann](

Using AI Code Generation

1(async () => {2  const customElementsData = await customElementsJson();3})();4(async () => {5  const customElementsData = await customElementsJson();6})();7(async () => {8  const customElementsData = await customElementsJson();9})();10(async () => {11  const customElementsData = await customElementsJson();12})();13(async () => {14  const customElementsData = await customElementsJson();15import { customElementsJson } from 'storybook-root-decorator';16const customElements = customElementsJson();17const customElements = customElementsJson();18import { customElementsJson } from 'storybook-root-decorator';19const customElements = customElementsJson();20const customElements = customElementsJson();21import { customElementsJson } from 'storybook-root-decorator';22const customElements = customElementsJson();23const customElements = customElementsJson();24import { customElementsJson } from 'storybook-root-decorator';25const customElements = customElementsJson();26const customElements = customElementsJson();27import { customElementsJson } from 'storybook-root-decorator';28const customElements = customElementsJson();29const customElements = customElementsJson();30import { customElementsJson } from 'storybook-root-decorator';31const customElements = customElementsJson();32const customElements = customElementsJson();33import

Using AI Code Generation

1const customElementsJson = require('storybook-root/customElementsJson');2customElementsJson('storybook-root', {3    {4    },5    {6    },7});8MIT © [Dylan Schiemann](

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.