@citolab/tspci 2.5.30-beta.10 → 2.5.30-beta.3

package/CHANGELOG.md

@@ -3,65 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [2.5.30-beta.10](/compare/v2.5.30-beta.9...v2.5.30-beta.10) (2025-02-04)
-
-**Note:** Version bump only for package @citolab/tspci
-
-
-
-
-
-## [2.5.30-beta.9](/compare/v2.5.30-beta.8...v2.5.30-beta.9) (2025-02-04)
-
-**Note:** Version bump only for package @citolab/tspci
-
-
-
-
-
-## [2.5.30-beta.8](/compare/v2.5.30-beta.7...v2.5.30-beta.8) (2025-02-04)
-
-**Note:** Version bump only for package @citolab/tspci
-
-
-
-
-
-## [2.5.30-beta.7](/compare/v2.5.30-beta.6...v2.5.30-beta.7) (2025-02-04)
-
-
-### Features
-
-* dispatch qti-interaction-changed event 5c81bab
-
-
-
-
-
-## [2.5.30-beta.6](/compare/v2.5.30-beta.5...v2.5.30-beta.6) (2025-02-03)
-
-**Note:** Version bump only for package @citolab/tspci
-
-
-
-
-
-## [2.5.30-beta.5](/compare/v2.5.30-beta.4...v2.5.30-beta.5) (2025-02-03)
-
-**Note:** Version bump only for package @citolab/tspci
-
-
-
-
-
-## [2.5.30-beta.4](/compare/v2.5.30-beta.3...v2.5.30-beta.4) (2025-02-03)
-
-**Note:** Version bump only for package @citolab/tspci
-
-
-
-
-
 ## [2.5.30-beta.3](/compare/v2.5.30-beta.2...v2.5.30-beta.3) (2025-02-03)
 
 **Note:** Version bump only for package @citolab/tspci

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citolab/tspci",
-  "version": "2.5.30-beta.10",
+  "version": "2.5.30-beta.3",
   "description": "an opiniated typescript ims-pci builder with tao integration",
   "author": "patrick <patrick.deklein@cito.nl>",
   "repository": "@citolab/tspci",
@@ -24,7 +24,6 @@
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.1.0",
     "@tailwindcss/nesting": "0.0.0-insiders.565cd3e",
-    "@tailwindcss/postcss": "^4.0.3",
     "@testing-library/dom": "^10.4.0",
     "@types/node": "^22.5.5",
     "@typescript-eslint/eslint-plugin": "^8.9.0",
@@ -51,5 +50,5 @@
   "resolutions": {
     "chokidar": "^4.0.0"
   },
-  "gitHead": "5be4bc6341a95ed5d5cf8bc9100e6c9182cc6b79"
+  "gitHead": "5b9acc4c3375c831ed4885bfd8a389e4c5e5a990"
 }

package/preset/javascript/src/index.js

@@ -41,38 +41,14 @@ class Pci {
 
     this.shadowdom = dom.attachShadow({ mode: "closed" });
     this.render();
-    const event = {
-      interaction: this,
-      responseIdentifier: this.config.responseIdentifier,
-      valid: true,
-      value: this.getResponse(),
-    };
-    // dispatch a custom event to notify the Delivery System that the interaction has changed
-    const interactionChangedEvent = new CustomEvent("qtiInteractionChanged", {
-      detail: event,
-    });
-    this.shadowdom.dispatchEvent(interactionChangedEvent);
-  };
 
-  interactionChanged = () => {
-    const event = {
-      interaction: this,
-      responseIdentifier: this.config.responseIdentifier,
-      valid: true,
-      value: this.getResponse(),
-    };
-    // dispatch a custom event to notify the Delivery System that the interaction has changed
-    const interactionChangedEvent = new CustomEvent("qti-interaction-changed", {
-      detail: event,
-    });
-    this.dom.dispatchEvent(interactionChangedEvent);
+    config.onready(this);
   };
 
   render = () => {
     this.shadowdom.addEventListener("change", (e) => {
       const value = e.target.value;
       this.state = value;
-      this.interactionChanged();
     });
     this.shadowdom.innerHTML = `<div class="pci-container">
       <h1>${this.config.properties.title}</h1>

package/preset/preact/src/index.tsx

@@ -4,7 +4,7 @@ import { IStore } from "@citolab/preact-store";
 import * as ctx from "qtiCustomInteractionContext";
 import Interaction from "./interaction";
 import style from "./styles.css";
-import { ConfigProperties, IMSpci, QtiInteractionChangedDetail, QtiVariableJSON } from "@citolab/tspci";
+import { Configuration, IMSpci, QtiVariableJSON } from "@citolab/tspci";
 import configProps from "./config.json";
 import { StateModel, initStore } from "./store";
 
@@ -12,7 +12,7 @@ type PropTypes = typeof configProps;
 
 class App implements IMSpci<PropTypes> {
   typeIdentifier = "###___PCI_NAME___###"; // typeIdentifier is mandatory for all PCI's
-  config: ConfigProperties<PropTypes>; // reference to the interface of the config object which you get when getInstance is called by the player
+  config: Configuration<PropTypes>; // reference to the interface of the config object which you get when getInstance is called by the player
   state: string; // keep a reference to the state
   shadowdom: ShadowRoot; // Not mandatory, but its wise to create a shadowroot
   store: IStore<StateModel>;
@@ -20,17 +20,13 @@ class App implements IMSpci<PropTypes> {
   private logActions: { type: string; payload: unknown }[] = []; // optional logActions
   private initialState: StateModel = { input: undefined }; // optional initial state
   constructor() {
-    if (ctx) {
-      ctx.register(this);
-    }
+    ctx && ctx.register(this);
   }
 
-  getInstance = (dom: HTMLElement, config: ConfigProperties<PropTypes>, stateString: string) => {
+  getInstance = (dom: HTMLElement, config: Configuration<PropTypes>, stateString: string) => {
     config.properties = { ...configProps, ...config.properties }; // merge current props with incoming
     this.config = config;
-    if (!dom) {
-      throw new Error("No DOM Element provided");
-    }
+
     this.logActions = stateString ? JSON.parse(stateString).log : [];
     this.store = initStore(this.initialState);
     try {
@@ -43,26 +39,9 @@ class App implements IMSpci<PropTypes> {
     }
 
     this.shadowdom = dom.attachShadow({ mode: "closed" });
-
-    this.store.subscribe(() => {
-      const event: QtiInteractionChangedDetail = {
-        interaction: this,
-        responseIdentifier: this.config.responseIdentifier,
-        valid: true,
-        value: this.getResponse(),
-      };
-      // dispatch a custom event to notify the Delivery System that the interaction has changed
-      const interactionChangedEvent = new CustomEvent("qti-interaction-changed", {
-        detail: event,
-      });
-      dom.dispatchEvent(interactionChangedEvent);
-    });
-
     this.render();
 
-    if (this.config.onready) {
-      this.config.onready(this);
-    }
+    this.config.onready && this.config.onready(this);
   };
 
   render = () => {

package/preset/preact/src/store.ts

@@ -1,19 +1,15 @@
 import { Store } from "@citolab/preact-store";
 
 export type ActionType = "SET_INPUT" | "RESTORE_STATE";
-export type StateModel = { input: number | undefined };
+export type StateModel = { input: number };
 
-export const initStore = (
-  initialState: StateModel,
-  restoreData?: {
-    state: StateModel;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    actions: { type: string; payload: any; timestamp?: number }[];
-  }
-) => {
+export const initStore = (initialState: StateModel, restoreData?: {
+  state?: StateModel;
+  actions: { type: string; payload: any; timestamp?: number }[];
+}) => {
   const store = new Store<StateModel>(initialState, restoreData);
-  store.addReducer<{ input: number | undefined }>("SET_INPUT", (state, { input }) => {
-    return { ...state, input };
+  store.addReducer<{ input: number }>("SET_INPUT", (state, { input }) => {
+    return {...state, input };
   });
   return store;
-};
+}

package/preset/tailwind/postcss.config.js

@@ -1,8 +1,8 @@
 module.exports = {
   plugins: [
-    require("postcss-import"),
-    require("@tailwindcss/nesting"),
-    require("@tailwindcss/postcss"),
-    require("autoprefixer"),
-  ],
-};
+    require('postcss-import'),
+    require('@tailwindcss/nesting'),
+    require('tailwindcss'),
+    require('autoprefixer'),
+  ]
+}

package/preset/tailwind/src/styles.css

@@ -1,10 +1,7 @@
-@import "tailwindcss";
-.pci-container {
-  @apply container flex flex-col justify-center items-center;
-}
-h1 {
-  @apply text-2xl text-red-500 m-4;
-}
-input {
-  @apply border border-gray-400 rounded p-2 m-1;
-}
+@tailwind components;
+@tailwind utilities;
+@tailwind base;
+
+.pci-container  { @apply container flex flex-col justify-center items-center;  }
+h1 { @apply text-2xl text-red-500 m-4; }
+input { @apply border border-gray-400 rounded p-2 m-1;  }

package/preset/typescript/src/index.ts

@@ -1,4 +1,4 @@
-import { ConfigProperties, IMSpci, QtiInteractionChangedDetail, QtiVariableJSON } from "@citolab/tspci";
+import { Configuration, IMSpci, QtiVariableJSON } from "@citolab/tspci";
 import * as ctx from "qtiCustomInteractionContext";
 import configProps from "./config.json";
 import Interaction from "./interaction"; // import and bundle this interaction file
@@ -10,53 +10,31 @@ type PropTypes = typeof configProps;
 
 class Pci implements IMSpci<PropTypes> {
   typeIdentifier = "###___PCI_NAME___###"; // typeIdentifier is mandatory for all PCI's
-  config: ConfigProperties<PropTypes>; // reference to the interface of the config object which you get when getInstance is called by the player
+  config: Configuration<PropTypes>; // reference to the interface of the config object which you get when getInstance is called by the player
   state: string; // keep a reference to the state
   shadowdom: ShadowRoot | Element; // Not mandatory, but its wise to create a shadowroot
-  dom: HTMLElement;
 
   constructor() {
-    if (ctx) {
-      ctx.register(this); // we assume the qtiCustomInteractionContext is avaible due to the import above
-    }
+    ctx && ctx.register(this); // we assume the qtiCustomInteractionContext is avaible due to the import above
   }
 
   // First in the lifecycle of a PCI, this method is called with the domElement ( usually qti-interaction-markup ) where we can add our dom tree.
   // config is the configuration object which has an onready
-  getInstance = (dom: HTMLElement, config: ConfigProperties<PropTypes>, state: string) => {
+  getInstance = (dom: HTMLElement, config: Configuration<any>, state: string) => {
     config.properties = { ...configProps, ...config.properties }; // merge current props with incoming
     this.config = config;
     this.state = state ? state : "";
-    if (!dom) {
-      throw new Error("No DOM Element provided");
-    }
-    this.shadowdom = dom.attachShadow({ mode: "closed" });
-    this.dom = dom;
 
+    this.shadowdom = dom.attachShadow({ mode: "closed" });
     this.render();
 
     config.onready(this);
   };
 
-  private interactionChanged = () => {
-    const event: QtiInteractionChangedDetail = {
-      interaction: this,
-      responseIdentifier: this.config.responseIdentifier,
-      valid: true,
-      value: this.getResponse(),
-    };
-    // dispatch a custom event to notify the Delivery System that the interaction has changed
-    const interactionChangedEvent = new CustomEvent("qti-interaction-changed", {
-      detail: event,
-    });
-    this.dom.dispatchEvent(interactionChangedEvent);
-  };
-
   private render = () => {
     this.shadowdom.addEventListener("change", (e: Event) => {
       const value = (e.target as HTMLInputElement)?.value || "";
       this.state = value;
-      this.interactionChanged();
     });
     this.shadowdom.innerHTML = `<div class="pci-container">
       <h1>${this.config.properties.title}</h1>

package/readme.md

@@ -97,7 +97,7 @@ Add the following PCI in the src folder `index.ts`
 
 ```ts
 // src/index.ts
-import { ConfigProperties, IMSpci } from "@citolab/tspci";
+import { Configuration, IMSpci } from "@citolab/tspci";
 import * as ctx from "qtiCustomInteractionContext";
 
 class Pci implements IMSpci<{}> {
@@ -108,7 +108,7 @@ class Pci implements IMSpci<{}> {
     ctx && ctx.register(this);
   }
 
-  getInstance = (dom: HTMLElement, config: ConfigProperties<any>, state: string) => {
+  getInstance = (dom: HTMLElement, config: Configuration<any>, state: string) => {
     this.shadowdom = dom.attachShadow({ mode: "closed" });
     this.render();
     config.onready(this);
@@ -337,9 +337,9 @@ Also used in the TAO export for configuring PCIs in TAO
   + type PropTypes = typeof configProps;
 
   // add to types
-  + private config: ConfigProperties<PropTypes>;
+  + private config: Configuration<PropTypes>;
 
-  getInstance = (dom: HTMLElement, config: ConfigProperties<PropTypes>, stateString: string) => {
+  getInstance = (dom: HTMLElement, config: Configuration<PropTypes>, stateString: string) => {
   + config.properties = { ...configProps, ...config.properties }; // merge our props with players
   + this.config = config;
 

package/src/cli.js

@@ -289,17 +289,11 @@ const run = async () => {
 
       // read postcss.config.js
       const postcssConfig = path.resolve(cliPath, "./../preset/tailwind/postcss.config.js");
-      // get all plugin names
       const postcssConfigContent = fs.readFileSync(postcssConfig, "utf8");
       // get all plugin names
-      // Match require statements that use either single or double quotes
-      const pluginMatches = postcssConfigContent.match(/require\(["']([^"']+)["']\)/g);
-      let pluginNames = [];
-      if (pluginMatches) {
-        pluginNames = pluginMatches.map((plugin) => plugin.replace(/require\(["']([^"']+)["']\)/, "$1"));
-      } else {
-        console.log("No PostCSS plugins found.");
-      }
+      const pluginNames = postcssConfigContent
+        .match(/require\('(.*)'\)/g)
+        .map((plugin) => plugin.replace(/require\('(.*)'\)/, "$1"));
       const packageJsonCli = path.resolve(cliPath, "./../package.json");
       const packageJsonCliContent = fs.readFileSync(packageJsonCli, "utf8");
       const packageJsonCliContentJson = JSON.parse(packageJsonCliContent);
@@ -436,14 +430,15 @@ const run = async () => {
   }
 
   prodBuild().then(() => {
-    if (!targetName) {
-      console.error("Missing target name. Use tspci --target target or tspci --targetExt target");
-      return;
+    if (t) {
+      if (!targetName) {
+        console.error("Missing target name. Use tspci --target target or tspci --targetExt target");
+      }
+      const scriptFile = path.join(path.join(path.join(NODE_MODULES, `${targetName}`), "src"), `createPackage.mjs`);
+      import(`file:///${scriptFile}`).then((script) => {
+        script.bundle();
+      });
     }
-    const scriptFile = path.join(path.join(path.join(NODE_MODULES, `${targetName}`), "src"), `createPackage.mjs`);
-    import(`file:///${scriptFile}`).then((script) => {
-      script.bundle();
-    });
   });
 };
 

package/types/index.d.ts

@@ -1,22 +1,22 @@
 // Define the payload structure for the custom event
 export interface QtiInteractionChangedDetail {
-  interaction: IMSpci<unknown>; // The PCI instance itself
+  interaction: IMSpci<ConfigProperties>; // The PCI instance itself
   responseIdentifier: string; // The response identifier provided in the getInstance call
   valid?: boolean; // Optional boolean indicating if checkValidity() returns true
   value?: QtiVariableJSON; // Optional value returned by getResponse()
 }
 
 // Define the ConfigProperties interface
-export interface ConfigProperties<T> {
-  properties: T; // Follows dataset conversion rules (camelCased keys)
+export interface ConfigProperties {
+  properties: Record<string, string>; // Follows dataset conversion rules (camelCased keys)
   templateVariables: Record<string, QtiVariableJSON>; // Follows structure in Appendix C
   contextVariables: Record<string, QtiVariableJSON>; // Follows structure in Appendix C
   boundTo: Record<string, QtiVariableJSON>; // Follows structure in Appendix C
   responseIdentifier: string; // Unique within interaction scope
 
-  onready: (interaction: IMSpci<T>, state?: string) => void; // Callback when PCI is fully constructed and ready
+  onready: (interaction: IMSpci<ConfigProperties>, state?: string) => void; // Callback when PCI is fully constructed and ready
   ondone?: (
-    interaction: IMSpci<T>,
+    interaction: IMSpci<ConfigProperties>,
     response: Record<string, QtiVariableJSON>,
     state: string,
     status?: "interacting" | "closed" | "solution" | "review"
@@ -25,7 +25,7 @@ export interface ConfigProperties<T> {
   status?: "interacting" | "suspended" | "closed" | "solution" | "review"; // Optional, defaults to "interacting"
 }
 
-export interface IMSpci<T> {
+export interface IMSpci<CustomConfigProperties extends ConfigProperties> {
   typeIdentifier: string;
 
   /** @access public
@@ -37,7 +37,7 @@ export interface IMSpci<T> {
    *  This must have been obtained from a prior call to getState on an
    *  instance of this type (same typeIdentifier)
    */
-  getInstance: (dom: HTMLElement, configuration: ConfigProperties<T>, state: string) => void;
+  getInstance: (dom: HTMLElement, configuration: Configuration<CustomConfigProperties>, state: string) => void;
 
   /** @access public
    * @method getResponse
@@ -55,6 +55,11 @@ export interface IMSpci<T> {
   destroy?: () => void; // Not used in IMS and not in TAO implementation, so not used here (optional)
 }
 
+export declare type Configuration<T extends ConfigProperties> = {
+  onready: () => void;
+  properties: T;
+};
+
 export interface directedPair {
   destination: string;
   source: string;