!Built With Stencil

Pie Api Components

This package provides Custom HTML Elements for using KDS PIE Service content.

For authoring content it provides the pie-api-author component:

For rendering PIE content to students use the pie-api-player component.

Using these components

$3

Put

``html

`

in the head of your index.html

Then you can use the element anywhere in your template, JSX, html etc.

`html


`

$3

- Run npm install @pie-api/pie-api-components --save
- Put this in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc

$3

#### 1: Add the component to the dependencies

`shell
npm i @pie-api/pie-api-components
`

#### 2: Import the component(s)

`javascript
import { defineCustomElements } from "@pie-api/pie-api-components/dist/loader";

defineCustomElements(window);
`

#### 3: Consume the component

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.

`json
Vue.config.ignoredElements = [
"pie-api-player",
"pie-api-author"
];
`

It is now possible to use the tag provided by the pie components in any template of the app.

`html

`

$3

TODO

Development

Testing

- yarn test - test e2e and spec
- ./node_modules/.bin/stencil --spec - run spec only
- ./node_modules/.bin/stencil --e2e - run e2e only
- ./node_modules/.bin/stencil --e2e|spec path/to/file - run single file

> Note: yarn stencil doesn't work so use the above instead.

Build

yarn build

Preview

You can add demo files to src/demo and they'll be available in the demo.

yarn demo

Then go to http://localhost:3333/demo/...

UPDATE:


$3


`
npm install
`

$3

`
npm run demo
``

to avoid typescript errors use node 16.3.0