osp-lit-common

Common web components for the OSP ecosystem

Usage no npm install needed!

<script type="module">
  import ospLitCommon from 'https://cdn.skypack.dev/osp-lit-common';
</script>

README

osp-lit-common

This repo contains some general-use components implementing the OSP design language and assorted simple functionality.

API Documentation

Static docs, which may not correspond exactly to your version: https://rmer.info/osp

To run your own synchronized version:

  • git clone (this repo)
  • (in repo dir) yarn install
  • yarn watch
  • Visit http://localhost:8080

Writing new web components

  • yarn add osp-lit-common
  • Follow lit-element and lit-html docs, except inherit from OspElement instead, and use its provided registry in preference to customElements:
import { OspElement } from 'osp-lit-common';

export class OspMyFooComponent extends OspElement {
    // ...
}
OspElement.define(OspMyFooComponent);

Also, in your template, import html and similar utilities from osp-lit-common as well, instead of directly referencing lit-element or lit-html.

More information about this is above in the API documentation.

Using components (in a lit-based app, or in another context like React, Vue, vanilla JS, etc)

TODO: there should be a bundle URL you can link from OSP to get all the common components while taking advantage of the client cache to not duplicate them between pages.

Until that's configured:

  • yarn add osp-lit-common
  • import components as needed, e.g: import { OspInput } from 'osp-lit-common/src/components/Input'
  • Use the corresponding tags as needed in your templates, <osp-input label="Test"></osp-input>