npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@lwc/metadata

v11.1.0

Published

Extract metadata about Lightning Web Components modules. This software is provided as-is with no support provided.

Downloads

9,745

Readme

@lwc/metadata

This package can be used to collect metadata about a Lightning Web Component(LWC) by statically analysing html, js and css files of the component. In general, this information about the component is referred to as "component metadata". The metadata can be used for referential integrity checking, dependency analysis, code editor features like type ahead support for component attribute.

To learn more about the detailed design of this package and the schema of the metadata that is produced, refer the component metadata rfc.

Installation

npm install @lwc/metadata --save

APIs

collectBundleMetadata(config: BundleConfig)

Statically analyse the raw source of an LWC bundle and return gathered metadata. This API analyses bundle resources ending with a .html, .js and .css file extensions.

Note: This API is designed to work with the raw source as authored by an LWC developer and is expected to run before any tranformations applied by the @lwc/compiler.

import { collectBundleMetadata } from '@lwc/metadata';

const htmlSource = `
    <template>
        <h1>Hello World!</h1>
    </template>
`;

const jsSource = `
    import { LightningElement } from 'lwc';
    export default class MyComponent extends LightningElement {}
`;

const cssSource = `
    h1 {
        font-size: xx-large;
    }
`;

const metadata = collectBundleMetadata({
    type: 'platform',
    name: 'myComponent',
    namespace: 'c',
    namespaceMapping: { c: 'ns1' },
    files: [
        {
            fileName: 'c/myComponent/myComponent.html',
            source: htmlSource,
        },
        {
            fileName: 'c/myComponent/myComponent.js',
            source: jsSource,
        },
        {
            fileName: 'c/myComponent/myComponent.css',
            source: cssSource,
        },
    ],
});

Parameters:

  • config (BundleConfig, required) - Represents information about the LWC bundle that needs to be analysed. The config also contains the raw source code for all files(.html, .js & .css) that make up the bundle.
type BundleType = 'internal' | 'platform';

interface BundleConfig {
    type: BundleType; // Represents whether the bundle was authored by salesforce or a customer
    name: string; // name of the bundle
    namespace: string; // namespace of the bundle
    namespaceMapping: NamespaceMapping; // namespaceMapping to be used to transform module references like 'c/button' to 'namespaceA/button'. This is useful when the given bundle will be part of a managed package.
    files: {
        fileName: string;
        source: string;
    }[]; // List of file name and source code for each file in utf-8 encoding
    enableKomaci?: boolean; // Advance feature meant to analyze data dependencies of given module. It is meant for internal usage.
}

Return value: A BundleMetadata representing the collected metadata about the LWC bundle.

interface BundleMetadata {
    version: string; // version of @lwc/metadata used to collect metadata
    moduleSpecifier: string; // Full canonical name in camel case
    name: string; // same as input name field
    namespace: string; // same as intput naemspace field
    entryFileName?: string; // main entry file of the bundle
    // A list of metadata objects for each file processed in the bundle
    // The order of file is same as order of 'files' in the input config
    files: (HTMLTemplateFile | ScriptFile | CSSFile)[];
    // All diagnostic issues discovered while collecting bundle metadata.
    diagnostics: CompilerDiagnostic[];
}

The schema used for @lwc/metadata package is well defined in TypeScript. Refer to the type definitions that are included in the package distribution. It can be viewed in an IDE that has TypeScript support.