Nifty Pony Merchandise

    wc-info
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.165 • Public • Published

    Published on webcomponents.org

    wc-info

    wc-info provides some helper resources for a server-side html api that provides UI-friendly views of the custom elements manifest file. The web components it provides are currently deprecated.

    NB A great, more fully featured alternative to wc-info is the api-viewer element.

    First, a reusable, high performing url can take as a query string parameter a link to any custom elements manifest file, and display it in HTML format:

    For example: https://cf-sw.bahrus.workers.dev/?href=https://cdn.skypack.dev/@shoelace-style/shoelace/dist/custom-elements.json

    Such links are iframeable.

    To see the usage: https://cf-sw.bahrus.workers.dev

    Many aspects of the api are customizable, as the usage form indicates.

    OpenAPI spec: https://unpkg.com/wc-info/openAPI.json

    To embed just the bare minimum html and apply customizations as needed:

    https://cf-sw.bahrus.workers.dev/?href=https://cdn.skypack.dev/@shoelace-style/shoelace/dist/custom-elements.json&embedded=true

    Another parameter, "tags" can be used to filter the output, based on a comma delimited list of tags.

    Source code for worker: https://github.com/bahrus/cf-sw

    To embed this bare minimum html in an existing parent html stream, one of the fastest ways to do this is with the k-fetch web component:

    <k-fetch href="https://cf-sw.bahrus.workers.dev/?href=https://cdn.skypack.dev/@shoelace-style/shoelace/dist/custom-elements.json&embedded=true" as=html target=bra-ket-ui5><k-fetch>

    Some web component libraries like ui-5, carbon design (and hopefully mwc (status is tbd)) provide support for providing more functionality over the bare-bones html elements this service provides.

    The bra-ket web component provides support for this scenario. Display the initial output of the service based on out-of-the-box formatting browsers provide for table elements. Then, once the dependencies of ui-5 are fully downloaded, only then does the initial output get transformed (via xslt) into the equivalent markup using ui-5 components. The transition is almost unnoticeable in high performance scenarios, but makes the loading experience much better on slower devices / networks.

    So now the markup looks as follows:

        <k-fetch href="https://cf-sw.bahrus.workers.dev/?href=https://cdn.skypack.dev/@shoelace-style/shoelace/dist/custom-elements.json&embedded=true" as=html target=bra-ket-ui5></k-fetch>
        <bra-ket-ui5 ></bra-ket-ui5>

    Viewing Your Element (locally)

    $ npm install
    $ npm run serve
    

    Install

    npm i wc-info

    DownloadsWeekly Downloads

    169

    Version

    0.0.165

    License

    MIT

    Unpacked Size

    156 kB

    Total Files

    20

    Last publish

    Collaborators

    • bahrus