catalog

catalog copied to clipboard

🛠 Status: In Development

This custom elements catalog is currently in development.

Custom Elements Catalog

This let's you search the npm registry for web components.

Adding a web component

Be sure to have a custom-elements.json describing all (or one) web components within your package.

Example:

{
  "version": 2,
  "tags": [
    {
      "label": "test-wc-card"
    }
  ]
}

As this is still a pilot phase you will have to manually index your package.

1. Go to http://catalog.open-wc.org/add.html
2. Enter you package name followed by @ and version (example [email protected] or @foo/[email protected])

(only the latest npm versions get added to the search index - but older vesions can still be added to our database)

Working on it

yarn install
yarn storybook # for individual parts with mocked data
yarn start # for live page

Background

Uses

• Funadb to store the data in a normalized way
• Elasticsearch (aws) to store flattened docs to make them performant searchable

custom-elements.json

This is still a proposal so follow the discussion!!.

Possible example:

{
  "version": 2,
  "tags": [
    {
      "label": "test-wc-card",
      "attributes": [
        {
          "label": "header"
        },
        {
          "label": "side",
          "values": [{ "label": "A" }, { "label": "B" }]
        }
      ],
      "properties": [
        {
          "label": "header"
        },
        {
          "label": "headerColor"
        },
        {
          "label": "side",
          "values": [{ "label": "A" }, { "label": "B" }]
        }
      ],
      "events": [],
      "slots": []
    }
  ]
}