@citolab/tspci 1.5.7

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@citolab/tspci",
+  "version": "1.5.7",
+  "description": "an opiniated typescript ims-pci builder with tao integration",
+  "author": "patrick <patrick.deklein@cito.nl>",
+  "repository": "@citolab/tspci",
+  "bin": {
+    "tspci": "src/cli.js"
+  },
+  "type": "module",
+  "types": "types/index.d.ts",
+  "devDependencies": {
+    "@rollup/plugin-alias": "^3.1.9",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^21.0.1",
+    "@rollup/plugin-image": "^2.1.1",
+    "@rollup/plugin-node-resolve": "13.1.3",
+    "@rollup/plugin-replace": "^3.0.1",
+    "@rollup/plugin-typescript": "^8.3.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@testing-library/dom": "^8.11.3",
+    "@typescript-eslint/eslint-plugin": "^5.11.0",
+    "@typescript-eslint/parser": "^5.11.0",
+    "rollup-plugin-watch-assets": "^1.0.1",
+    "postcss": "^8.4.6",
+    "postcss-import": "^14.0.2",
+    "rollup": "^2.67.2",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-string": "^3.0.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-live-server": "^2.0.0",
+    "tailwindcss": "^3.0.21",
+    "live-server": "^1.2.1",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-node-builtins": "^2.1.2",
+    "rollup-plugin-node-globals": "^1.4.0",
+    "@types/node": "^17.0.25"
+  },
+  "dependencies": {
+    "@rollup/plugin-alias": "^3.1.9",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^21.0.1",
+    "@rollup/plugin-image": "^2.1.1",
+    "@rollup/plugin-node-resolve": "13.1.3",
+    "@rollup/plugin-replace": "^3.0.1",
+    "@rollup/plugin-typescript": "^8.3.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@testing-library/dom": "^8.11.3",
+    "@typescript-eslint/eslint-plugin": "^5.11.0",
+    "@typescript-eslint/parser": "^5.11.0",
+    "rollup-plugin-watch-assets": "^1.0.1",
+    "postcss": "^8.4.6",
+    "rollup": "^2.67.2",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-string": "^3.0.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-live-server": "^2.0.0",
+    "tailwindcss": "^3.0.21",
+    "live-server": "^1.2.1",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-node-builtins": "^2.1.2",
+    "rollup-plugin-node-globals": "^1.4.0",
+    "@types/node": "^17.0.25"
+  },
+  "scripts": {
+    "publish": "npm publish",
+    "publish:global": "npm publish --@citolab:registry=https://registry.npmjs.org/  --access public"
+  }
+}

package/public/index.html

@@ -0,0 +1,351 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Hello RequireJS</title>
+
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
+      crossorigin="anonymous"
+    />
+
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
+      crossorigin="anonymous"
+    ></script>
+
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"
+      integrity="sha512-c3Nl8+7g4LMSTdrm621y7kf9v3SDPnhxLNhcjFJbKECVnmZHTdo+IRO05sNLTH/D3vA6u1X32ehoLC7WFVdheg=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    ></script>
+
+    <style>
+      html {
+        font-size: 100%;
+      }
+      #pciContainer {
+        width: 100%;
+        /* min-width: 800px; */
+        max-width: 1024px;
+        height: 600px;
+        min-height: 600px;
+        /* max-height: 600px; */
+        border: 1px solid #eeeeee;
+        overflow: hidden;
+        margin: 0 auto;
+        background-color: white;
+        border-radius: 10px;
+        margin-top: 1rem;
+      }
+      #devtools {
+        max-width: 1024px;
+        margin: 0 auto;
+      }
+    </style>
+  </head>
+  <body class="bg-light">
+    <div class="container">
+      <div
+        class="alert alert-danger position-fixed mx-auto bottom-0"
+        style="display: none"
+        role="alert"
+        id="noresponse"
+      >
+        user has not yet interacted yet, getResponse should return undefined.
+      </div>
+
+      <div id="pciContainer" class="shadow-sm">
+        <div id="loading" class="text-muted mx-auto p-4">Loading...</div>
+      </div>
+      <div id="devtools"></div>
+    </div>
+
+    <script type="module">
+      import { h, Component, render } from "https://unpkg.com/preact@latest?module";
+      import { useState, useEffect } from "https://unpkg.com/preact@latest/hooks/dist/hooks.module.js?module";
+      import htm from "https://unpkg.com/htm?module";
+      // Initialize htm with Preact
+      const html = htm.bind(h);
+
+      function App({ item }) {
+        const [show, setShow] = useState(false);
+        const [response, setResponse] = useState(undefined);
+
+        useEffect(() => {
+          localStorage.getItem(item.typeIdentifier + "_response");
+        }, []);
+
+        useEffect(() => {
+          if (response !== undefined) {
+            localStorage.setItem(item.typeIdentifier + "_response", item.getResponse().base.string);
+          } else {
+            localStorage.removeItem(item.typeIdentifier + "_response");
+            item.resetResponse && item.resetResponse();
+          }
+        }, [response]);
+
+        let keyArray = [];
+        if (item.config && item.config.properties) {
+          keyArray = Object.keys(item.config.properties).map((keyName, keyIndex) => ({
+            key: keyName,
+            value: item.config.properties[keyName],
+          }));
+        }
+
+        function resetlocalstorage() {
+          localStorage.removeItem(item.typeIdentifier + "_state");
+          localStorage.removeItem(item.typeIdentifier + "_props");
+          setResponse(undefined);
+        }
+
+        function reset() {
+          resetlocalstorage();
+          location.reload();
+        }
+
+        function storeResponse() {
+          if (item.getResponse() !== undefined) {
+            setResponse(item.getResponse().base.string);
+          }
+        }
+
+        function compareResponse() {
+          const response = localStorage.getItem(item.typeIdentifier + "_response");
+          if (!response) {
+            alert("no response stored");
+            return;
+          }
+          if (response === item.getResponse().base.string) {
+            alert("same");
+          } else {
+            alert("different");
+          }
+        }
+
+        function resetResponse() {
+          setResponse(undefined);
+        }
+
+        function setStoredResponse() {
+          item.setResponse &&
+            item.setResponse({
+              base: {
+                string: response,
+              },
+            });
+        }
+
+        function reload() {
+          const state = item.getState();
+          localStorage.setItem(item.typeIdentifier + "_state", JSON.stringify(state));
+          location.reload();
+        }
+
+        function changeConfig(key, value) {
+          item.config.properties[key] = value;
+          item.trigger(`change${key}`, value);
+        }
+
+        function reConfig(key, value) {
+          localStorage.setItem(item.typeIdentifier + "_props", JSON.stringify(item.config.properties));
+          location.reload();
+        }
+
+        function unload() {
+          item.destroy && item.destroy();
+          item.oncompleted && item.oncompleted();
+          var name = require.undef("index.js");
+          loadItem();
+        }
+
+        return html`
+          <div>
+            <div style="width:300px" class="shadow offcanvas offcanvas-end ${show ? "show visible" : ""}">
+              <div class="offcanvas-header">
+                <h5 class="offcanvas-title" id="offcanvasExampleLabel">properties</h5>
+                <button
+                  type="button"
+                  onClick="${() => setShow(false)}"
+                  disabled="${!item.config}"
+                  class="btn-close text-reset"
+                ></button>
+              </div>
+              <div class="offcanvas-body">
+                <ul class="card-body">
+                  ${keyArray.map(
+                    ({ key, value }) => html`<div>
+                      <div>${key}</div>
+                      <input
+                        type="text"
+                        class="form-control"
+                        value="${value}"
+                        onkeyup="${(e) => changeConfig(key, e.target.value)}"
+                      />
+                    </div>`
+                  )}
+                </ul>
+                <button class="btn btn-primary" onClick="${() => reConfig()}">save and reload</button>
+              </div>
+            </div>
+
+            <div class="d-flex justify-content-start mt-3" role="toolbar" aria-label="Toolbar with button groups">
+              <div>
+                <small class="text-muted">configuration</small>
+                <div class="btn-group me-2 shadow-sm" role="group" aria-label="Basic checkbox toggle button group">
+                  <button class="btn btn-outline-secondary" onClick="${() => setShow(true)}">props</button>
+                  <button
+                    class="btn btn-outline-secondary"
+                    onClick="${() => alert(JSON.stringify(item.config), null, 4)}"
+                  >
+                    config
+                  </button>
+                </div>
+              </div>
+
+              <div>
+                <small class="text-muted">data</small>
+                <div class="btn-group me-2 shadow-sm" role="group" aria-label="Basic checkbox toggle button group">
+                  <button
+                    class="btn btn-outline-secondary"
+                    onClick="${() => alert(JSON.stringify(item.getResponse(), null, 4))}"
+                  >
+                    getResponse
+                  </button>
+                  <button class="btn btn-outline-secondary" onClick="${() => alert(item.getState())}">getState</button>
+                </div>
+              </div>
+
+              <div>
+                <small class="text-muted">state</small>
+                <div class="btn-group me-2 shadow-sm" role="group" aria-label="Basic checkbox toggle button group">
+                  <button
+                    class="btn btn-outline-secondary"
+                    data-bs-placement="bottom"
+                    data-bs-toggle="tooltip"
+                    data-bs-html="true"
+                    title="<ol class="m-0"><li class="text-start">state in localstorage</li><li>reload page</li><li>load state</li><li>remove localstorage</li></ol>"
+                    onClick="${() => reload()}"
+                  >
+                    reload
+                  </button>
+                </div>
+              </div>
+
+              <div>
+                <small class="text-muted">response</small>
+                <div class="btn-group me-2 shadow-sm" role="group" aria-label="Basic checkbox toggle button group">
+                  <button class="btn btn-outline-secondary" data-bs-placement="bottom"
+                    data-bs-toggle="tooltip"
+                    data-bs-html="true"
+                    title="Save response in localstorage" onClick="${() => storeResponse()}">store</button>
+                  <button class="btn btn-outline-secondary" data-bs-placement="bottom"
+                    data-bs-toggle="tooltip"
+                    data-bs-html="true"
+                    title="Compare current response with response in localstorage" onClick="${() =>
+                      compareResponse()}">compare</button>
+                  <button class="btn btn-outline-secondary" data-bs-placement="bottom"
+                    data-bs-toggle="tooltip"
+                    data-bs-html="true"
+                    title="set stored response back into item with setResponse (*TAO PCI only)" disabled="${!item.setResponse}" onClick="${() =>
+          setStoredResponse()}">set</button>
+                  <button class="btn btn-outline-secondary" data-bs-placement="bottom"
+                    data-bs-toggle="tooltip"
+                    data-bs-html="true"
+                    title="reset reponse in item (*TAO PCI only)" disabled="${!item.resetResponse}" onClick="${() =>
+          resetResponse()}">reset</button>
+                </div>
+                <div>${response}</div>
+              </div>
+
+
+
+
+              <div>
+                <small class="text-muted">ㅤ</small>
+                <div class="d-flex">
+                  <button data-bs-toggle="tooltip"
+                    disabled="${!(item.destroy || item.oncompleted)}"
+                    data-bs-html="true"
+                    title="reset everything in localstorage (config/state/response) and reload" class="btn bg-light shadow-sm btn-outline-danger me-2" onClick="${() => unload()}">
+                    unload
+                  </button>
+                  <button data-bs-toggle="tooltip"
+                    data-bs-html="true"
+                    title="reset everything in localstorage (config/state/response) and reload" class="btn bg-light shadow-sm btn-outline-danger" onClick="${() => reset()}">reset</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        `;
+      }
+
+      function register(item) {
+        let state = undefined;
+        const localStorageState = localStorage.getItem(item.typeIdentifier + "_state");
+        if (localStorageState) {
+          state = JSON.parse(localStorageState);
+        }
+        let props = {};
+        const localStorageProps = localStorage.getItem(item.typeIdentifier + "_props");
+        if (localStorageProps) {
+          props = JSON.parse(localStorageProps);
+        }
+        const dom = document.getElementById("pciContainer");
+        const config = {
+          onready: () => {
+            document.getElementById("loading").innerHTML = "";
+          },
+          properties: props,
+        };
+
+        item.getInstance(dom, config, state);
+
+        if (item.getResponse() !== undefined) {
+          document.getElementById("noresponse").style.display = "block";
+        }
+
+        localStorage.removeItem(item.typeIdentifier + "_state");
+      }
+
+      define("qtiCustomInteractionContext", (qtiCustomInteractionContext) => {
+        return { register: (ctxA) => register(ctxA) };
+      });
+
+      function loadItem() {
+        requirejs(["index.js"], (itemInstance) => {
+          render(html`<${App} item="${itemInstance}" />`, document.getElementById("devtools"));
+          // enable tooltips
+          var tooltipList = [].slice
+            .call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
+            .map(function (tooltipTriggerEl) {
+              return new bootstrap.Tooltip(tooltipTriggerEl);
+            });
+        });
+      }
+      window.onload = () => loadItem();
+    </script>
+
+    <h3 style="margin-top: 12rem">checklist</h3>
+    <ul style="margin-bottom: 10rem">
+      <li>Is the css scoped to the item?</li>
+      <li>Is the css/item somewhat responsive on smaller screens</li>
+      <li>Can you reset the item to its initial state</li>
+      <li>Can it restore its state ( reload )</li>
+      <li>Can you change the config</li>
+      <li>Colorblind</li>
+      <li>Touch/Mouse friendly</li>
+      <li>Works in older browser like IE11</li>
+      <li>Destroys itself correctly, removing event listeners</li>
+      <li>No objects or variables on global scope</li>
+      <li>Triggers correctly on changed config properties</li>
+      <li>Implements on off() methods of tao?</li>
+      <li>Response type and response correct</li>
+      <li>getResponse() should give undefined when user has not done anything</li>
+      <li>For TAO to enter response is the entered comparable by the response given</li>
+    </ul>
+  </body>
+</html>

package/readme.md

@@ -0,0 +1,330 @@
+<h1>
+	A modern QTI-PCI development environment creating and testing portable custom interactions
+</h1>
+
+<p align="center">
+  <img src="tspci-development.png" alt="Typescript Pci Builder">
+</p>
+
+## ✨ Features <a name="features"></a>
+
+- Use modern tooling like typescript, preact, postcss and tailwind
+- Build and bundle your library PCI using only a `package.json`
+- Test and develop all your PCI states, configs, responses and lifecycle without uploading
+- Develop in live server which directly updates on code changes
+- Produces a single bundle .js file to use in any delivery engine that supports the latest IMS PCI standard
+- 0 configuration TypeScript support
+- Bundles all your css, images and json files.
+- Postcss support, use CSS nesting out of the box.
+- First class (p)react and tailwind support
+- Extension for TAO, configuring icon, label, support for setting correct response and pci-properties
+
+## 🔧 Installation & Setup
+
+1️⃣ **Install** by running: `npm i -D @citolab/tspci`
+
+2️⃣ **Set up** your `package.json`:
+
+```json
+// package.json
+{
+  "name": "@citolab/hello-world",
+  "description": "Hello world pci",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "types": "dist/types.d.ts",
+  "dependencies": {},
+  "devDependencies": {
+    "@citolab/tspci": "^1.5.6",
+    "@citolab/tspci-tao": "^1.0.0"
+  },
+  "scripts": {
+    "dev": "tspci --dev",
+    "prod": "tspci"
+  },
+  "source": "src/index.ts"
+}
+```
+
+Add the following PCI in the src folder `index.ts`
+
+```ts
+// src/index.ts
+import { Configuration, IMSpci } from "@citolab/tspci";
+import * as ctx from "qtiCustomInteractionContext";
+
+class Pci implements IMSpci<{}> {
+  typeIdentifier = "HelloWorld"; // same as in package.json
+  shadowdom: ShadowRoot;
+
+  constructor() {
+    ctx && ctx.register(this);
+  }
+
+  getInstance = (dom: HTMLElement, config: Configuration<any>, state: string) => {
+    this.shadowdom = dom.attachShadow({ mode: "closed" });
+    this.render();
+    config.onready(this);
+  };
+
+  private render = () => {
+    this.shadowdom.innerHTML = `<div>Hello-World</div>`;
+  };
+
+  getResponse = () => {
+    return null;
+  };
+
+  getState = () => null;
+}
+export default new Pci();
+```
+
+Add this in your root project: `global.d.ts` file
+
+```ts
+// global.d.ts
+declare module "qtiCustomInteractionContext" {
+  const register: { register: (PortableInteraction) => void };
+  export = register;
+}
+```
+
+Add a `tsconfig.json` to your project for type checking
+
+```json
+{
+  "compilerOptions": {
+    "declaration": true,
+    "lib": ["es6", "dom", "dom.iterable"],
+    "module": "es6",
+    "moduleResolution": "node",
+    "removeComments": true,
+    "sourceMap": true,
+    "strict": false,
+    "target": "es6",
+    "outDir": "./dist",
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+  },
+  "include": ["**/*"],
+}
+```
+
+3️⃣ **Try it out** by running `tspci --dev`.
+
+### All CLI Options
+
+```
+Usage
+	$ tspci <command> [options]
+
+Available Commands
+  --dev    -d     Start development server
+  --watch  -w     Only watch changes
+  --help   -h     Help about commandos
+  --target        Build production for platform
+
+Examples package.json scripts
+	$ "dev": "tspci --dev",
+	$ "prod": "tspci",
+	$ "watch": "tspci --watch",
+	$ "package-tao": "tspci --target tao"
+```
+
+## 🛣 What's next
+
+Use one of the [examples](https://github.com/Citolab/tspci-helloworld) to get a headstart 
+
+Or read further how we build our PCIs 
+
+Our prefered layout of our PCIs
+```
+your-pci-project
+│   package.json       // Definition of your PCI in a standard package.json, TAO adds some props
+│   global.d.ts        // Tell typescript qtiCustomInteractionContext is supplied later, adds a shim
+│   tsconfig.json      // Typescript configuration, also for type checking your code
+│
+└───src
+│   │   config.json    // Used to configure PCI, and in TAO for authors
+│   │   index.ts       // The api for the player and bootstraps your interaction 
+│   │   interaction.ts // the actual interaction, preferably a main preact component
+│   │   store.ts       // definition of the state and all possible state mutations of your pci
+│   └───style.css      // css styles, imported by your pci and possible to use tailwind classes
+│
+│   postcss.config.js  // optionally adds postcss processing of css
+│   tailwind.config.js // include tailwind classes
+```
+
+
+### Use JSX
+Use (p)react in your PCI's to create interactions and bind your data to HTML
+
+```ts
++ import { h, render } from "preact";
+
+  render(null, this.shadowdom);
+
+  render = () => {
+    + render(null, this.shadowdom);
+    + render(<Interaction config={this.config.properties} />, this.shadowdom);
+  };
+```
+
+### Bundle your css
+Import and bundle css
+Appending css to shadowdom will prevent styles leaking into your player
+
+```ts
++ import style from "./style.css";
+
+  render = () => {
+    render(...
+    + const css = document.createElement("style");
+    + css.innerHTML = style;
+    + this.shadowdom.appendChild(css);
+    render(...
+  };
+```
+
+### Use modern css
+add `postcss.config.js` with autoprefixer
+
+```json
+// postcss.config.js
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    require('autoprefixer'),
+  ]
+}
+```
+
+### Modern UI with existing classes
+
+add tailwind to `postcss.config.js`
+and add a `tailwind.config.js`
+
+```js
+// postcss.config.js
+  plugins: [
+    + require('tailwindcss/nesting'),
+    + require('tailwindcss'),
+  ];
+```
+
+```js
+// tailwind.config.js
+module.exports = {
+  content: ["./src/**/*.{html,js,ts,jsx,tsx}", "./*.xml"], // html/javascript and typescript, and everything in pci markup
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
+```
+
+### Bundle all your images
+Images are bundled in the js by importing them in code: 
+imports JPG, PNG, GIF, SVG, and WebP files
+
+```ts
+import procenten from "./assets/procenten.png";
+<img src={procenten} />;
+```
+
+### Create advanced PCIs with 3D libraries
+For example, import threejs to create 3D pci's
+
+```ts
+// src/interaction.ts
+  import * as THREE from "three";
+
+class VoxelPainterClass {
+  private scene: THREE.Scene;
+```
+
+### Record user interaction
+A store will centralize your PCI state but also all mutations.
+This means, this way you could replay everything a user did
+And you can use Redux devtools to debug
+
+```ts
+// src/index.ts
+const [state, dispatch] = useStore<StateModel, ActionType>((type, payload) => {});
+
+dispatch<{ x: number }>("ADD_ACTION", { x: +inputValue });
+```
+
+### Let authors configure your PCI in QTI
+Use properties in config.json to let authors configure your PCI
+Also used in the TAO export for configuring PCIs in TAO
+```json
+// src/config.json
+{
+  "buttonText": "Calculate",
+  "sum1" : "$1 * 12 + 3",
+  "sum2" : "$1 * 4 + 53",
+  "tableSize" : "4"
+}
+```
+```ts
+// src/index.ts
+  + import configProps from "./config.json";
+  + type PropTypes = typeof configProps;
+
+  // add to types
+  + private config: Configuration<PropTypes>;
+
+  getInstance = (dom: HTMLElement, config: Configuration<PropTypes>, stateString: string) => {
+  + config.properties = { ...configProps, ...config.properties }; // merge our props with players
+  + this.config = config;
+
+  // destructure props for use in PCI
+  + const { sum1, sum2, buttonText, tableSize } = config;
+
+```
+
+### Make use of existing react hooks
+```ts
+// src/useMousePosition
+import { useEffect, useState } from "react";
+
+export const useMousePosition = () => {
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+
+  useEffect(() => {
+    const setPosFromEvent = (e) => setPosition({ x: e.clientX, y: e.clientY });
+    window.addEventListener("mousemove", setPosFromEvent);
+    return () => window.removeEventListener("mousemove", setPosFromEvent);
+  }, []);
+
+  return { clientX: position.x, clientY: position.y }
+};
+```
+
+### Use in TAO
+Tao adds some lifecycle methods which you can implement and we supply an extended interfaee on top of the IMS one. 
+
+More info, see our extension 
+[@citolab/tspci-tao](https://github.com/Citolab/qti-pci-bundler/tree/main/lib/tspci-tao)
+
+
+## Roadmap
+
+- Packager for Facet
+- Packager for Trifork
+- Create PCI with Vue
+- Create PCI with Haunted
+
+
+If you want your platform to be support,  [contact us](mailto://getinspiredbycitolab@gmail.com)
+
+
+## License
+
+[GPL3](https://www.gnu.org/licenses/gpl-3.0.en.html)
+[rollup]: https://github.com/rollup/rollup

package/src/cli.js

@@ -0,0 +1,130 @@
+#!/usr/bin/env node
+import loadConfigFile from "rollup/dist/loadConfigFile.js";
+import { rollup, watch } from "rollup";
+import path from "path";
+import fs from "fs";
+
+const args = process.argv.slice(2);
+
+// PK: retreive dirname, most of the time automaticly inserted in es modules
+import { fileURLToPath } from "url";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const PACKAGE_ROOT_PATH = process.cwd();
+const PACKAGE_DIST_PATH = path.join(PACKAGE_ROOT_PATH, "dist");
+const NODE_MODULES = path.join(process.cwd(), "node_modules");
+
+// https://rollupjs.org/guide/en/#programmatically-loading-a-config-file
+const watchBuild = (devServer = false) => {
+  const rollupFile = devServer ? "rollup.config.dev.js" : "rollup.config.js";
+
+  fs.rmSync(PACKAGE_DIST_PATH, { recursive: true, force: true });
+  !fs.existsSync(PACKAGE_DIST_PATH) && fs.mkdirSync(PACKAGE_DIST_PATH);
+
+  if (devServer) {
+    try {
+      if (fs.existsSync(path.join(PACKAGE_ROOT_PATH, "src/index.html"))) {
+        fs.copyFile(
+          path.join(PACKAGE_ROOT_PATH, "src/index.html"),
+          path.join(PACKAGE_DIST_PATH, "index.html"),
+          (err) => {
+            if (err) throw err;
+            console.log("using index.html found in src/index.html, copied to dist");
+          }
+        );
+      } else {
+        fs.copyFile(path.join(__dirname, "../public/index.html"), path.join(PACKAGE_DIST_PATH, "index.html"), (err) => {
+          if (err) throw err;
+          console.log("using index.html was copied to /dist folder pci");
+        });
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  }
+  loadConfigFile(path.resolve(__dirname, rollupFile), {}).then(async ({ options, warnings }) => {
+    console.log(`We currently have ${warnings.count} warnings`);
+    warnings.flush();
+    const watcher = watch(options);
+    watcher.on("event", (event) => {
+      event.code == "START" && console.log("starting build");
+      event.code == "ERROR" && console.log("ERROR", event);
+    });
+    watcher.on("event", ({ result }) => {
+      if (result) {
+        result.close();
+      }
+    });
+    watcher.close();
+  });
+};
+
+const prodBuild = async () => {
+  fs.rmSync(path.join(PACKAGE_ROOT_PATH, "dist"), { recursive: true, force: true });
+  return loadConfigFile(path.resolve(__dirname, "rollup.config.prod.js"), {}).then(async ({ options, warnings }) => {
+    console.log(`We currently have ${warnings.count} warnings`);
+    warnings.flush();
+    for (const optionsObj of options) {
+      const bundle = await rollup(optionsObj);
+      await Promise.all(optionsObj.output.map(bundle.write));
+    }
+
+    // if supplying your own index.html, this should be copied to the dist folder
+    try {
+      if (fs.existsSync(path.join(PACKAGE_ROOT_PATH, "src/index.html"))) {
+        fs.copyFile(
+          path.join(PACKAGE_ROOT_PATH, "src/index.html"),
+          path.join(PACKAGE_DIST_PATH, "index.html"),
+          (err) => {
+            if (err) throw err;
+            console.log(`using ${PACKAGE_ROOT_PATH}, "src/index.html", copied to ${PACKAGE_DIST_PATH}`);
+          }
+        );
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  });
+};
+
+const run = async () => {
+  const help = args.indexOf("--help") >= 0 || args.indexOf("-h") >= 0;
+  const watch = args.indexOf("--watch") >= 0 || args.indexOf("-w") >= 0;
+  const dev = args.indexOf("--dev") >= 0 || args.indexOf("-d") >= 0;;
+  const target = args.indexOf("-target") >= 0;
+
+  if (help) {
+    console.log("--help -h list these commands");
+    console.log("--build a one of build of your item");
+    console.log("--watch watch the files");
+    console.log("--target  build a prod item and bundle for platform");
+    return;
+  }
+
+  if (watch) {
+    watchBuild(false);
+    return;
+  }
+
+  if (dev) {
+    watchBuild(true);
+    return;
+  }
+
+  prodBuild().then(() => {
+    if (target) {
+      const targetIndex = args.indexOf("--target");
+      if (args.length <= targetIndex + 1) {
+        console.error("Missing target name. Use tspci --target target");
+      }
+      const targetname = args[targetIndex + 1];
+      const scriptFile = path.join(NODE_MODULES, `@citolab\\tspci-${targetname}\\src\\createPackage.mjs`);
+      import(`file:///${scriptFile}`).then((script) => {
+        script.bundle();
+      });
+    }
+  });
+};
+
+run();

package/src/rollup-plugin-live-server.js

@@ -0,0 +1,32 @@
+// PK: made a pull request for this https://bitbucket.org/robhicks55/rollup-plugin-live-server/pull-requests/
+// WATCH argument added to live server, else this package could just be used
+// https://www.npmjs.com/package/rollup-plugin-live-server
+const ls = require("live-server");
+
+export function liveServer(options = {}) {
+  const directories = options.directories || [];
+  const params = {
+  file: options.file || 'index.html',
+  host: options.host || '0.0.0.0',
+  logLevel: options.logLevel || 2,
+  open: options.open || false,
+  port: options.port ||8080,
+  root: options.root || '.',
+  wait: options.wait || 200,
+  watch: options.watch || "",
+};
+if (options.mount) params.mount = options.mount;
+if (options.ignore) params.ignore = options.ignore;
+if (options.middleware) params.middleware = options.middleware;
+if (options.cert) params.cert = options.cert;
+if (options.key) params.key = options.key;
+if (options.passphrase) params.passphrase = options.passphrase;
+
+ls.start(params);
+  return {
+    name: 'liveServer',
+    generateBundle() {
+      console.log(`live-server running on ${params.port}`);
+    }
+  };
+}

package/src/rollup.config.dev.js

@@ -0,0 +1,28 @@
+import watchAssets from 'rollup-plugin-watch-assets';
+// PK: not the official npm package, but a copy, needed watch functinoality
+import { liveServer } from "./rollup-plugin-live-server";
+
+import path from "path";
+
+const PACKAGE_ROOT_PATH = process.cwd()
+const PACKAGE_DIST_PATH = path.join(PACKAGE_ROOT_PATH, "dist")
+
+const livesrvr = liveServer({
+  root: path.join(PACKAGE_ROOT_PATH),
+  mount: [["/", "./dist"]],
+  open: true,
+  wait: 500,
+  watch: PACKAGE_DIST_PATH
+});
+
+const watchassets = watchAssets({ assets: ['./src/**/*.json',  './src/**/*.svg', './src/**/*.png'] })
+
+import rollupConfig from "./rollup.config";
+
+const newRollupConfig = {
+  ...rollupConfig,
+  output: rollupConfig.output.map((output) => ({ ...output, sourcemap: true })),
+  plugins: [...rollupConfig.plugins, livesrvr, watchassets],
+};
+
+export default newRollupConfig;

package/src/rollup.config.js

@@ -0,0 +1,83 @@
+import resolve from "@rollup/plugin-node-resolve";
+import typescript from "@rollup/plugin-typescript";
+import alias from "@rollup/plugin-alias";
+import image from "@rollup/plugin-image";
+import replace from "@rollup/plugin-replace";
+import postcss from "rollup-plugin-postcss";
+import commonjs from "@rollup/plugin-commonjs"; // added this when added react-redux, gave an ' 'default' is not exported by node_modules/prop-types/index.js'
+import json from "@rollup/plugin-json";
+
+// copy, builtins, globals and litTailwind were added for use in simple bundle tool to make qti players
+import copy from "rollup-plugin-copy";  // copying assets to the assets folder in dist ( not for PCI, those assets are bundled )
+import builtins from 'rollup-plugin-node-builtins'; // was fix for including pixi for QTI component development, see: https://github.com/rollup/rollup/issues/3230#issuecomment-585416594
+import globals from 'rollup-plugin-node-globals'; // was fix for including pixi for QTI component development, see:  https://github.com/rollup/rollup/issues/3230#issuecomment-585416594
+// import litTailwind from "rollup-plugin-lit-tailwindcss3"; // Qti development, custom components can include tailwind classes
+
+import fs from "fs";
+import path from "path";
+
+const PACKAGE_ROOT_PATH = process.cwd();
+const pkg = JSON.parse(fs.readFileSync(path.join(PACKAGE_ROOT_PATH, "package.json"), "utf-8"));
+
+export default {
+  input: [`${pkg.source}`],
+  external: ["qtiCustomInteractionContext"],
+  watch: {
+    include: "./src/**", // fixme: watch these files, does not support watching the css
+    clearScreen: false, // clears the bash log before running
+  },
+  output: [
+    {
+      name: `${pkg.name}`,
+      file: `${pkg.main}`,
+      format: "umd",
+      sourcemap: true,
+    },
+  ],
+  plugins: [
+    globals(),
+    builtins(),
+    alias({
+      // When using third party react libraries, alias them to preact
+      entries: [
+        { find: "qtiCustomInteractionContext", replacement: "./qtiShim" },
+        { find: "react", replacement: "preact/compat" },
+        { find: "react-dom/test-utils", replacement: "preact/test-utils" },
+        { find: "react-dom", replacement: "preact/compat" },
+        { find: "react/jsx-runtime", replacement: "preact/jsx-runtime" },
+      ],
+    }),
+    replace({
+      values: {
+        "process.env.NODE_ENV": "false", // added this when bundling gave an 'process is not defined' error
+      },
+    }),
+    resolve({
+      ignoreGlobal: false,
+      include: ["node_modules/**"],
+      dedupe: ["preact"],
+      browser: true
+    }),
+    commonjs({ transformMixedEsModules: true }), // preact was imported twice, with require (unistore/preact) and with import (our import), which resulted in 2 preacts in our project
+    json(), // used to import config.json
+    typescript({
+      tsconfig: `${PACKAGE_ROOT_PATH}/tsconfig.json`,
+      declarationDir: `${PACKAGE_ROOT_PATH}/dist`
+    }),
+    // litTailwind({
+    //   include: "src/components/**/*.ts",
+    // }),
+    postcss({
+      extract: false, // not extracting embeds the js in the build, which is what we need for shipping it
+      modules: false, // tried modules at first, could work, but not with html in the qti file
+      inject: false, // does not inject the imported styles in the head
+      extensions: [".css"],
+    }),
+    copy({
+      targets: [
+        { src: "src/assets", dest: "dist" }, // copy asses to dist folder
+      ],
+    }),
+    image(), // import images png/svg/gif/jpg and converts to inline code
+  ],
+};

package/src/rollup.config.prod.js

@@ -0,0 +1,10 @@
+import { terser } from 'rollup-plugin-terser'
+import rollupConfig from "./rollup.config";
+
+const newRollupConfig = { 
+  ...rollupConfig, 
+  output: rollupConfig.output.map((output) => ({ ...output, sourcemap: false })),
+  plugins: [...rollupConfig.plugins, terser()],
+};
+
+export default newRollupConfig;

package/types/index.d.ts

@@ -0,0 +1,88 @@
+export interface IMSpci<ConfigProperties> {
+  typeIdentifier: string;
+
+  /** @access public
+   *  @method getInstance Create a new instance of this portable custom interaction
+   *  Will be called by the qtiCustomInteractionContext
+   *  @param {DOM Element} dom - the DOM Element this PCI is being added to
+   *  @param {Object} configuration - the configuration to apply to this PCI
+   *  @param {String} state - a previous saved state to apply to this instance.
+   *  This must have been obtained from a prior call to getState on an
+   *  instance of this type (same typeIdentifier)
+   */
+  getInstance: (dom: HTMLElement, configuration: Configuration<ConfigProperties>, state: string) => void;
+
+  /** @access public
+   * @method getResponse
+   * @return {Object} - the value to assign to the bound QTI response variable
+   */
+  getResponse: () => QtiVariableJSON;
+
+  /** @access public
+   * @method getState
+   * @return {String} The current state of this PCI. May be passed to
+   * getInstance to later restore this PCI instance.
+   */
+  getState: () => string;
+  oncompleted?: () => void;
+  destroy?: () => void; // Not used in IMS and not in TAO implementation, so not used here (optional)
+}
+
+
+
+export declare type Configuration<T> = {
+  onready: (pci: IMSpci<T>, state?: string) => void;
+  properties: T;
+  // PK: following this: https://www.imsglobal.org/spec/qti/v3p0/impl#h.1mc9puik2ft6
+  // All below are not used in the IMS Reference implementation, keeping for ref
+  /*    
+  ondone: (pci: IMSPci<T>,response:any,state:string, status?: "interacting" | "closed" | "solution" | "review" ) => void;
+  status: string;
+  templateVariables: any;  
+  boundTo: any;
+  contextVariables
+  responseIdentifier
+  */
+};
+
+export interface directedPair {
+  destination: string;
+  source: string;
+}
+export interface ResponseInteraction<T> {
+  responseIdentifier: string;
+  responses: T;
+}
+export interface ResponseItem<T> {
+  item: string;
+  interaction: ResponseInteraction<T>;
+}
+export interface InputResponseFormat<T> {
+  item: string;
+  interactions: ResponseInteraction<T>[];
+}
+export interface Calculate {
+  calculate: () => ResponseType;
+}
+export declare type QtiVariableJSON = {
+  [K in "list" | "base"]?: {
+    [Ka in "boolean" | "integer" | "float" | "string" | "pair" | "directedPair" | "identifier"]?: ResponseType;
+  };
+};
+export declare type float = number;
+export declare type integer = number;
+export declare type ResponseType = boolean | directedPair | float | integer | string | ResponseType[];
+export declare enum BaseType {
+  boolean = "boolean",
+  directedPair = "directedPair",
+  float = "float",
+  integer = "integer",
+  string = "string",
+}
+export declare type Multiple = Array<ResponseType>;
+export declare type Ordered = Array<ResponseType>;
+export declare enum Cardinality {
+  multiple = "multiple",
+  ordered = "ordered",
+  single = "single",
+}