README.md

Provider Web Components

GitLab Repository

You can install this component via npm:

npm i @dbp-toolkit/provider

Local development

# get the source
git clone git@gitlab.tugraz.at:dbp/web-components/toolkit.git
cd toolkit/packages/provider

# install dependencies (make sure you have npm version 4+ installed, so symlinks to the git submodules are created automatically)
yarn install

# constantly build dist/bundle.js and run a local web-server on port 8002 
yarn run watch

# run tests
yarn test

Jump to http://localhost:8002 and you should get a demo page.

Provider

Usage

You can provide attributes (e.g. global-name) for components inside the provider:

<provider global-name="value" global-name2="value2">
  <dbp-person-select subscribe="local-name:global-name"></dbp-person-select>
  <dbp-person-profile subscribe="local-name:global-name,local-name2:global-name2"></dbp-person-profile>
</provider>
<script type="module" src="node_modules/@dbp-toolkit/provider/dist/dbp-provider.js"></script>

All other components are also inherent providers (see below), so you don't really need dbp-provider in the shadow dom of other components. The use of dbp-provider is mainly suggested being used for namespacing (e.g. different languages or entry point urls on the same page) or to deliver attribute changes across different components.

Attributes

• init (optional): set your vars to values
  • example <provider init="foo=bar"></provider>
• id (optional): set an id, useful for debugging
  • example <provider id="p-1"></provider>

AdapterLitElement

This is a class you can derive your component class from instead of LitElement.

You can locally "subscribe" to attributes (e.g. local-name) that can be provided by a dbp-provider (e.g. global-name). You need to make this available attributes as LitElement properties.

Example

Multiple attributes can be subscribed when separated by a comma (,).

<dbp-person-select subscribe="local-name:global-name,local-name2:global-name2"></dbp-person-select>