@citolab/tspci 2.5.30-beta.0 → 2.5.30-beta.11

package/CHANGELOG.md

@@ -3,6 +3,100 @@
 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.11](/compare/v2.5.30-beta.10...v2.5.30-beta.11) (2025-02-04)
+
+
+### Features
+
+* add tailwindcss to devDependencies and set version based on @tailwindcss/postcss 907b541
+
+
+
+
+
+## [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
+
+
+
+
+
+## [2.5.30-beta.2](/compare/v2.5.30-beta.1...v2.5.30-beta.2) (2025-02-03)
+
+**Note:** Version bump only for package @citolab/tspci
+
+
+
+
+
+## [2.5.30-beta.1](/compare/v2.5.30-beta.0...v2.5.30-beta.1) (2025-02-03)
+
+**Note:** Version bump only for package @citolab/tspci
+
+
+
+
+
 ## [2.5.30-beta.0](/compare/v2.5.29...v2.5.30-beta.0) (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.0",
+  "version": "2.5.30-beta.11",
   "description": "an opiniated typescript ims-pci builder with tao integration",
   "author": "patrick <patrick.deklein@cito.nl>",
   "repository": "@citolab/tspci",
@@ -24,6 +24,7 @@
     "@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",
@@ -50,5 +51,5 @@
   "resolutions": {
     "chokidar": "^4.0.0"
   },
-  "gitHead": "604b6123a4e495717e4fdde55d1ad1c52cb81724"
+  "gitHead": "b49f38a0dcf06c589224b7730c5dc9cbd31ccccd"
 }

package/preset/javascript/src/index.js

@@ -41,14 +41,38 @@ 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);
+  };
 
-    config.onready(this);
+  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);
   };
 
   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 { Configuration, IMSpci, QtiVariableJSON } from "@citolab/tspci";
+import { ConfigProperties, IMSpci, QtiInteractionChangedDetail, 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: Configuration<PropTypes>; // reference to the interface of the config object which you get when getInstance is called by the player
+  config: ConfigProperties<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,13 +20,17 @@ class App implements IMSpci<PropTypes> {
   private logActions: { type: string; payload: unknown }[] = []; // optional logActions
   private initialState: StateModel = { input: undefined }; // optional initial state
   constructor() {
-    ctx && ctx.register(this);
+    if (ctx) {
+      ctx.register(this);
+    }
   }
 
-  getInstance = (dom: HTMLElement, config: Configuration<PropTypes>, stateString: string) => {
+  getInstance = (dom: HTMLElement, config: ConfigProperties<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 {
@@ -39,9 +43,26 @@ 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();
 
-    this.config.onready && this.config.onready(this);
+    if (this.config.onready) {
+      this.config.onready(this);
+    }
   };
 
   render = () => {

package/preset/preact/src/store.ts

@@ -1,15 +1,19 @@
 import { Store } from "@citolab/preact-store";
 
 export type ActionType = "SET_INPUT" | "RESTORE_STATE";
-export type StateModel = { input: number };
+export type StateModel = { input: number | undefined };
 
-export const initStore = (initialState: StateModel, restoreData?: {
-  state?: StateModel;
-  actions: { type: string; payload: any; timestamp?: 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 }[];
+  }
+) => {
   const store = new Store<StateModel>(initialState, restoreData);
-  store.addReducer<{ input: number }>("SET_INPUT", (state, { input }) => {
-    return {...state, input };
+  store.addReducer<{ input: number | undefined }>("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'),
-    require('autoprefixer'),
-  ]
-}
+    require("postcss-import"),
+    require("@tailwindcss/nesting"),
+    require("@tailwindcss/postcss"),
+    require("autoprefixer"),
+  ],
+};

package/preset/tailwind/src/styles.css

@@ -1,7 +1,10 @@
-@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;  }
+@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;
+}

package/preset/typescript/src/index.ts

@@ -1,4 +1,4 @@
-import { Configuration, IMSpci, QtiVariableJSON } from "@citolab/tspci";
+import { ConfigProperties, IMSpci, QtiInteractionChangedDetail, 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,31 +10,53 @@ type PropTypes = typeof configProps;
 
 class Pci implements IMSpci<PropTypes> {
   typeIdentifier = "###___PCI_NAME___###"; // typeIdentifier is mandatory for all PCI's
-  config: Configuration<PropTypes>; // reference to the interface of the config object which you get when getInstance is called by the player
+  config: ConfigProperties<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() {
-    ctx && ctx.register(this); // we assume the qtiCustomInteractionContext is avaible due to the import above
+    if (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: Configuration<any>, state: string) => {
+  getInstance = (dom: HTMLElement, config: ConfigProperties<PropTypes>, 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.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 { Configuration, IMSpci } from "@citolab/tspci";
+import { ConfigProperties, 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: Configuration<any>, state: string) => {
+  getInstance = (dom: HTMLElement, config: ConfigProperties<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: Configuration<PropTypes>;
+  + private config: ConfigProperties<PropTypes>;
 
-  getInstance = (dom: HTMLElement, config: Configuration<PropTypes>, stateString: string) => {
+  getInstance = (dom: HTMLElement, config: ConfigProperties<PropTypes>, stateString: string) => {
   + config.properties = { ...configProps, ...config.properties }; // merge our props with players
   + this.config = config;
 

package/src/cli.js

@@ -289,22 +289,38 @@ 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
-      const pluginNames = postcssConfigContent
-        .match(/require\('(.*)'\)/g)
-        .map((plugin) => plugin.replace(/require\('(.*)'\)/, "$1"));
+      // 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 packageJsonCli = path.resolve(cliPath, "./../package.json");
       const packageJsonCliContent = fs.readFileSync(packageJsonCli, "utf8");
       const packageJsonCliContentJson = JSON.parse(packageJsonCliContent);
       // add all plugins to package.json and map the version to the version in tspci package.json
+      let version = "latest";
       for (const pluginName of pluginNames) {
         const pluginVersion = packageJsonCliContentJson.dependencies[pluginName];
+        if (pluginName === "@tailwindcss/postcss") {
+          version = pluginVersion.toString();
+        }
         packageJsonContentJson.devDependencies = {
           ...packageJsonContentJson.devDependencies,
           [pluginName]: pluginVersion,
         };
       }
+
+      // add tailwindcss itself to the devDependencies
+      packageJsonContentJson.devDependencies = {
+        ...packageJsonContentJson.devDependencies,
+        tailwindcss: version,
+      };
       const newPackageJsonContent = JSON.stringify(packageJsonContentJson, null, 2);
       fs.writeFileSync(packageJson, newPackageJsonContent);
       // copy tailwind config file
@@ -430,15 +446,14 @@ const run = async () => {
   }
 
   prodBuild().then(() => {
-    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();
-      });
+    if (!targetName) {
+      console.error("Missing target name. Use tspci --target target or tspci --targetExt target");
+      return;
     }
+    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<ConfigProperties>; // The PCI instance itself
+  interaction: IMSpci<unknown>; // 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 {
-  properties: Record<string, string>; // Follows dataset conversion rules (camelCased keys)
+export interface ConfigProperties<T> {
+  properties: T; // 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<ConfigProperties>, state?: string) => void; // Callback when PCI is fully constructed and ready
+  onready: (interaction: IMSpci<T>, state?: string) => void; // Callback when PCI is fully constructed and ready
   ondone?: (
-    interaction: IMSpci<ConfigProperties>,
+    interaction: IMSpci<T>,
     response: Record<string, QtiVariableJSON>,
     state: string,
     status?: "interacting" | "closed" | "solution" | "review"
@@ -25,7 +25,7 @@ export interface ConfigProperties {
   status?: "interacting" | "suspended" | "closed" | "solution" | "review"; // Optional, defaults to "interacting"
 }
 
-export interface IMSpci<CustomConfigProperties extends ConfigProperties> {
+export interface IMSpci<T> {
   typeIdentifier: string;
 
   /** @access public
@@ -37,7 +37,7 @@ export interface IMSpci<CustomConfigProperties extends ConfigProperties> {
    *  This must have been obtained from a prior call to getState on an
    *  instance of this type (same typeIdentifier)
    */
-  getInstance: (dom: HTMLElement, configuration: Configuration<CustomConfigProperties>, state: string) => void;
+  getInstance: (dom: HTMLElement, configuration: ConfigProperties<T>, state: string) => void;
 
   /** @access public
    * @method getResponse
@@ -55,11 +55,6 @@ export interface IMSpci<CustomConfigProperties extends ConfigProperties> {
   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;