STATUS - Pre-Alpha, this is a work in progress. Apis may change.
This package provides Custom Html Elements for using PIE Framework content.
It provides pie-player
<pie-player></pie-player>
For rendering PIE content, and pie-author
<pie-author></pie-author>
For authoring content.
Put
<script src='https://unpkg.com/@pie-framework@latest/dist/pie-player-components.js'></script>
in the head of your index.html
Then you can use the element anywhere in your template, JSX, html etc.
<pie-player id="player"></pie-player>
<script>
const player = document.getElementById('player');
player.addEventListener('session-changed', event => {
// do something
});
player.config = config;
</script>
- Run
npm install @pie-framework/pie-player-components --save
- Put this
<script src='node_modules/@pie-framework/pie-player-components/dist/pie-player-components.js'></script>
in the head of your index.html - Then you can use the element anywhere in your template, JSX, html etc
// package.json
"dependencies": {
...
"@pie-framework/pie-player-components": "latest"
}
import { defineCustomElements } from '@pie-framework/pie-player-components/dist/loader';
defineCustomElements(window);
To prevent Vue from complaining that your component has an unrecognized tag, add the following in main.js. Use either the full name, or regex if you want to capture a family of components.
Vue.config.ignoredElements = [
"pie-player",
"pie-author"
];
It is now possible to use the tag provided by the pie components in any template of the app.
<pie-player v-bind:config.prop="config" />
TODO
Element Registry This is not working yet. Goal is for these components to use a controller that maintains a registry of which custom elements are installed and only reach out to the bundle build service when it needs new one(s).
- [ ] pie-loader should handle the possiblity of two versions of a PIE being loaded (will probably need build service update to include version in global key)
- [ ] handle re-setting of same player/author with a new config