STATUS - Pre-Alpha, this is a work in progress. Apis may change.
This package provides Custom HTML Elements for using KDS PIE Service content.
For authoring content it provides the pie-api-author component:
<pie-api-author></<pie-api-author>
For rendering PIE content to students use the pie-api-player component.
<pie-api-player></pie-api-player>
Put
<script src="https://unpkg.com/@pie-api/pie-api-components@0.0.2/dist/pie-api-components.js"></script>
in the head of your index.html
Then you can use the element anywhere in your template, JSX, html etc.
<pie-api-author id="author"></pie-api-author>
<script>
const author = document.getElementById("author");
author.addEventListener("model-changed", (event) => {
// hadndle update, e.g
author.save().then((itemId, versionn) => {
// handle
});
});
author.contentConfig = {
id: "1",
elements: { "pie-multiple-choice": "@pie-element/multiple-choice@latest" },
models: [
{
id: "1",
element: "pie-multiple-choice",
},
],
markup: "<pie-multiple-choice id='1'></pie-multiple-choice>",
};
</script>
- Run
npm install @pie-api/pie-api-components --save
- Put this
<script src='node_modules/@pie-api/pie-api-components/dist/pie-api-components.js'></script>
in the head of your index.html - Then you can use the element anywhere in your template, JSX, html etc
npm i @pie-api/pie-api-components
import { defineCustomElements } from "@pie-api/pie-api-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-api-player",
"pie-api-author"
];
It is now possible to use the tag provided by the pie components in any template of the app.
<pie-api-author v-bind:contentConfig.prop="contentConfig" />
TODO
-
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.
yarn build
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:
npm install
npm run demo