@pie-api/pie-api-components

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:

<pie-api-author></<pie-api-author>

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

<pie-api-player></pie-api-player>

Using these components

Script tag

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>

Node Modules

• 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

VUE JS

1: Add the component to the dependencies

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

2: Import the component(s)

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.

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" />

React

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:

Project setup

npm install

Run your demo files

npm run demo

to avoid typescript errors use node 16.3.0