open-index/open-npm huggingface dataset:
npm package: @pie-api/pie-api-live-components
Description: Custom Elements that work with PIE Api Live services
Latest version: 4.10.0


# PIE LIve Api Components

A set of components for interacting with PIE Api Live, for realtime reporting on user assessment item sessions.

See Readme docs for each component:

[pie-api-live](./pie-api-live/readme.md)






## devt

ron locally in devt mode

```bash
npm install
npm start
```

To build the component for production, run:

```bash
npm run build
```

To run the unit tests for the components, run:

```bash
npm test
```

### Debug 

To run mock server in debug mode:

```
node --inspect -r ts-node/register src/mock-server/start-mock-server.ts
```

To run debugger on one stencil spec test file for one test:
```
 node --inspect-brk -r ts-node/register ./node_modules/.bin/stencil test --spec  src/components/pie-live-session/pie-live-session.spec.ts -t metadata
```
Then attach VSCode / Chrome debugger.

There is also a 'spec test current file' launch config for vscode in the repository.

## TODO / Notes

> load scoring browser modules with session? issue is if getting scores outside of waiting for a score event

This would require re-purposing/re-implementing the item level scoring function from pie-api?

> dealing with multi-part

Will handle this internally in the response-rendering components, if there are multi-parts can append mulitple explicit elements like `<response-part>` we may need to look at expliciti definition of what a part is at core model level, maybe props all pies can use in their model to define themselves as a part, with a label etc 
 - what if multiple pies where not all are 'parts'? need more explicit definition of parts? In short term can use models references in response model on save to determine what is a 'part' based on there being a saved 'response' for that pie.


live-session should retrieve item model directly once using item id (rather than receiving model in every sessionEvent as it is now. For short-term in R&D this is ok, but should be refactored for efficiency
npm package: @pie-api/pie-element-extensions
Description: Extended capabilites for pie-elements
Author: PIE Api Authors
Latest version: 1.51.0

# pie-element-extensions

This is a set of Custom Elements and ES Modules that extend the capabilties of `@pie-framework/elements`
in the context of `pie-api` service. They are intended to be deployed for use in a browser with ES imports.

Initially, the Elements will include:

`Cell` - an element to render a user response in a small form factor that can be displayed in a table/spreadsheet cell

`Response` - an element to rendder more complete user response, in a larger form factor than `Cell` but without necessarily rendering the actual question

Future Elements:

`Aggregate` - display a PIE with aggreate information about a set of responses 

Modules:

This lib may also export modules & functions that are not Custom Elements.
e.g.:
`aggregateResponses([session])` - do a map reduce to get aggregate data about user responses.

Under R&D:

`pie-api` will support extending the capabilities of 'installed' pies with these extensions through a definition  that defines the module urls for the extension's modules. See `src/multiple-choice/pie.config.js`


## Installation
```bash
yarn add @pie-api/pie-element-extensions/
```
```bash
npm i @pie-api/pie-element-extensions/
```

## Usage
```html
<script type="module">
  import '@pie-api/pie-element-extensions/pie-element-extensions.js';
</script>
<!-- use one of the elements exported by the above import-->
<multiple-choice-cell></multiple-choice-cell>
```

## Development


### Quick Start

```bash
yarn  
yarn test
```


### Adding new Elements

* Add element source in `src/pie-name` directory.
* Export a class that extends `LitElement` from the element module file. Also export this as default. 
* Add jsdoc `@element tag-name` in comments for the element class
* Add jsdoc `@prop {Type} name - description` in coments for the element class
* Add tests in `src/pie-name/test` 
* Add stories in `stories/element-name/[pie-name].stories.js`


## Testing 
To run the suite of karma tests, run
```bash
yarn test
```

To run the tests in watch mode (for <abbr title="test driven development">TDD</abbr>, for example), run

```bash
yarn test:watch
```
And open the URL that will be logged to consoleon test-server-start


## Demoing with Storybook
To run a local instance of Storybook for the components, run
```bash
yarn storybook
```

To build a production version of Storybook, run
```bash
yarn storybook:build
```



## Linting with ESLint, Prettier
To scan the project for linting errors, run
```bash
yarn lint
```

You can lint with ESLint and Prettier individually as well
```bash
yarn lint:eslint
```
```bash
yarn lint:prettier
```

To automatically fix many linting errors, run
```bash
yarn format
```

You can format using ESLint and Prettier individually as well
```bash
yarn format:eslint
```
```bash
yarn format:prettier
```


## Local Demo with `es-dev-server`
```bash
yarn start
```
To run a local development server that serves the basic demo located in `demo/index.html`
npm package: @pie-api/pie-inline-player
Description: A standalone web component to render a PIE item in a single request.
Latest version: 1.0.2

# pie-inline-player Web Component

A standalone web component that renders a PIE item from a single, packaged request (item data plus required JavaScript bundles). This is not the primary/recommended integration path, but it can be a pragmatic fallback to reduce round trips—for example on high‑latency or unstable networks, behind strict proxies, or in kiosk-like environments. Trade‑offs include a larger payload, coarser caching, and higher retry cost if the transfer fails.

## Usage

You can use the component in two ways: via npm install, or directly from a CDN.

### 1) Install from NPM

```bash
npm install @pie-api/pie-inline-player
```

Then import it once to register the custom element and use the tag:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>PIE Inline Player</title>
  <script type="module">
    import '@pie-api/pie-inline-player';
  </script>
  </head>
  <body>
    <pie-inline-player
      item-id="your-item-id-here"
      api-base-url="https://your-pieoneer-instance.com"
      token="your-client-jwt-here"
    ></pie-inline-player>
  </body>
  </html>
```

### 2) Load directly from NPM (CDN)

You can include the module directly from a CDN such as jsDelivr:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>PIE Inline Player</title>
  <script type="module" src="https://cdn.jsdelivr.net/npm/@pie-api/pie-inline-player@latest/pie-inline-player.mjs"></script>
</head>
<body>
  <pie-inline-player
    item-id="your-item-id-here"
    api-base-url="https://your-pieoneer-instance.com"
    token="your-client-jwt-here"
  ></pie-inline-player>
</body>
</html>
```

### Component Attributes

- `item-id` (required): The ID of the PIE item to load.
- `api-base-url` (required): The base URL of the Pieoneer instance hosting the packaged item API endpoint.
- `token` (required): A valid JWT for authenticating with the API endpoint.
npm package: @pie-api/pie-item-player
Description: Custom element for PIE item player
Latest version: 0.0.1

# pie-item-player Web Component

A custom web component from the PIE API AWS project.

## Installation

```bash
npm install @pie-api-aws/pie-item-player
```

## Usage

```html
<script type="module">
  import '@pie-api/pie-item-player';
</script>

<pie-item-player></pie-item-player>
```

## API Documentation

TODO: Add component API documentation here.