rocket-preset-webcomponents-dev
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.6 • Public • Published

    rocket-preset-webcomponents-dev

    Add tab elements for code blocks

    Configuration

    Add the preset to your rocket.config.js, and configure it with a collections object. collections is a record of collection names to tab types. For example, if you want code tabs which switch between install commands for npm, yarn, and pnpm, add the following:

    import { webcomponentsDev } from 'rocket-preset-webcomponents-dev';
    
    export default {
      presets: [
        webcomponentsDev(),
      ]
    }

    Usage

    Now, to add an interactive webcomponents.dev demo to your page, use the wcd shortcode.

    {% wcd 'ZCUsvyx06Au5j0yZzgG7', 'src/index.js' %}

    To customize the preview code block, use the wcd markdown directive instead.

    ```js wcd ZCUsvyx06Au5j0yZzgG7 src/index.js
    const template = document.createElement('template');
    template.innerHTML = `...`;
    class MyCounter extends HTMLElement {
      constructor() {
        super();
        this.count = 0;
        this.attachShadow({ mode: 'open' });
      }
    
      connectedCallback() {
        this.shadowRoot.appendChild(template.content.cloneNode(true));
        this.shadowRoot.getElementById('inc').onclick = () => this.inc();
        this.shadowRoot.getElementById('dec').onclick = () => this.dec();
        this.update(this.count);
      }
    
      inc() {
        this.update(++this.count);
      }
    
      dec() {
        this.update(--this.count);
      }
    
      update(count) {
        this.shadowRoot.getElementById('count').innerHTML = count;
      }
    }
    
    customElements.define('my-counter', MyCounter);
    ```

    API Docs

    rocket-preset-webcomponents-dev.js:

    Functions

    Name Description Parameters Return
    webcomponentsDev

    Exports

    Kind Name Declaration Module Package
    js webcomponentsDev webcomponentsDev rocket-preset-webcomponents-dev.js

    eleventy/wcdShortcode.js:

    Functions

    Name Description Parameters Return
    wcdShortcodePlugin eleventyConfig

    Exports

    Kind Name Declaration Module Package
    js wcdShortcodePlugin wcdShortcodePlugin eleventy/wcdShortcode.js

    components/wcd-snippet/wcd-snippet.ts:

    class: WcdSnippet, wcd-snippet

    Superclass
    Name Module Package
    HTMLElement
    Fields
    Name Privacy Type Default Description Inherited From
    iframe HTMLIFrameElement this.shadowRoot.querySelector('iframe')
    button HTMLButtonElement this.shadowRoot.querySelector('button')
    url URL
    show
    Methods
    Name Privacy Description Parameters Return Inherited From
    show void
    load void
    Attributes
    Name Field Inherited From
    live
    data-id
    file

    Exports

    Kind Name Declaration Module Package
    js WcdSnippet WcdSnippet components/wcd-snippet/wcd-snippet.ts
    custom-element-definition wcd-snippet WcdSnippet components/wcd-snippet/wcd-snippet.ts

    Install

    npm i rocket-preset-webcomponents-dev

    DownloadsWeekly Downloads

    3

    Version

    0.1.6

    License

    MIT

    Unpacked Size

    19.7 kB

    Total Files

    19

    Last publish

    Collaborators

    • bennyp