@teipublisher/pb-components7 v2.0.4
This is the development version containing the components for TEI Publisher 7. While the components are backwards compatible with TEI Publisher 6, demos and tests require version 7 to be installed, which has not been released yet.
Web Components for TEI Publisher
This repository contains the web components used by TEI Publisher and apps generated by it. It will be the basis for the next iteration of TEI Publisher. While TEI Publisher 5 used Polymer as the framework for webcomponents, components in this repository use the LitElement library, which adds only a thin layer on top of native web components.
Distributing the components in a separate package has several benefits:
- generated apps can depend on a specific version of the components without getting into conflict with other apps
- the components can be embedded into any environment, e.g. a CMS or blog software, as long as they can communicate with a TEI Publisher instance running somewhere else
Quick Start
Clone the repository, call npm install once and run npm start. This creates a simple webserver which you can access in a browser to see the documentation and demos.
All components talk to an endpoint, which will either be a TEI Publisher instance or an application generated from TEI Publisher. Docs and demos in this repo currently expect the endpoint to be available on http://localhost:8080/exist. TEI Publisher version 6 is required for all features to work correctly.
Loading Components from CDN
To include components into your own application, you can load them from a CDN:
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.4.3/webcomponents-loader.js"></script>
<script type="module" src="https://unpkg.com/@teipublisher/pb-components@latest/dist/pb-components-bundle.js"></script>For most use case, including pb-components-bundle.js is enough. However, we ship additional bundles as described below:
| File | Description |
|---|---|
dist/pb-components-bundle.js | (required) the base components, including text views and all core functionality |
dist/pb-leaflet-map.js | (optional) support for displaying maps |
dist/pb-odd-editor.js | implements the visual ODD editor |
dist/pb-component-docs.js | components to view the API documentation of this package |
Bundles build on each other, so you always need to at least include pb-components-bundle.js in your HTML page.
For some examples of how to embed components into plain HTML, see the sample collection on codepen.
Loading from npm
Install @teipublisher/pb-components into your project:
npm install --save @teipublisher/pb-componentsExtending
If you wish to extend the library with your own components, there's a template project available, which you may fork.
Building
Run npm run build:production to generate the set of bundle files in dist, containing all components and their dependencies.
Development
For development, run npm start as described above. It will open a browser window and watch for file changes.
To regenerate the API documentation, run npm run docs.
Every component should have a demo to show its functionality.