@citolab/tspci 2.13.0 → 2.14.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.14.0](https://github.com/Citolab/tspci/compare/v2.13.0...v2.14.0) (2026-10-14)
+
+
+### Features
+
+* **tspci:** the preact template uses typed store actions and the unsubscribe function ([5297db7](https://github.com/Citolab/tspci/commit/5297db72a3d2c62cdba58c1b2fe49bbbdee1e024))
+
+
+
+
+
 # [2.13.0](/compare/v2.12.1...v2.13.0) (2026-10-14)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citolab/tspci",
-  "version": "2.13.0",
+  "version": "2.14.0",
   "description": "an opiniated typescript ims-pci builder with tao integration",
   "author": "patrick <patrick.deklein@cito.nl>",
   "repository": {
@@ -65,5 +65,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "b62ff736df6ebd0ec8c86e35338a6bb705e0820c"
+  "gitHead": "d72febca7cea937f77be4cef910a7f2d72fd524f"
 }

package/preset/preact/src/index.tsx

@@ -17,7 +17,7 @@ import * as ctx from "qtiCustomInteractionContext"; // provided by the delivery
 import configProps from "./config.json"; // the settings; the build passes only their defaults (AUTHORING.md)
 import style from "./styles.css"; // Tailwind, compiled to a string, added to the shadow root below
 import Interaction from "./interaction";
-import { StateModel, initStore } from "./store";
+import { Actions, StateModel, initStore } from "./store";
 
 // Like every data- attribute, each setting arrives as a string.
 type PropTypes = PciProperties<typeof configProps>;
@@ -49,7 +49,7 @@ class PciInstance implements IMSpci<PropTypes> {
   private config: ConfigProperties<PropTypes>;
   private dom: HTMLElement;
   private shadowdom: ShadowRoot;
-  private store: IStore<StateModel> = initStore();
+  private store: IStore<StateModel, Actions> = initStore();
   private customValidity = "";
 
   constructor(dom: HTMLElement, config: ConfigProperties<PropTypes>, stateString?: string) {
@@ -79,13 +79,14 @@ class PciInstance implements IMSpci<PropTypes> {
 
     // From here on, tell the engine when the response changes.
     this.previousResponse = JSON.stringify(this.getResponse() ?? null);
-    this.store.subscribe(this.onStoreChange);
+    this.unsubscribe = this.store.subscribe(this.onStoreChange);
 
     this.render();
     config.onready?.(this, this.getState());
   }
 
   private previousResponse: string;
+  private unsubscribe = () => {};
   private onStoreChange: Listener<StateModel> = () => {
     const response = JSON.stringify(this.getResponse() ?? null);
     if (response === this.previousResponse) return; // subscribe() calls us right away, and not every action changes it
@@ -148,7 +149,7 @@ class PciInstance implements IMSpci<PropTypes> {
 
   /** The engine is done with this instance: unsubscribe and unmount (which also runs the components' cleanups). */
   oncompleted = () => {
-    this.store.unsubscribe(this.onStoreChange);
+    this.unsubscribe();
     render(null, this.shadowdom);
   };
 }

package/preset/preact/src/interaction.tsx

@@ -3,14 +3,14 @@ import { IStore, useStore } from "@citolab/preact-store";
 import { useLayoutEffect, useRef, useState } from "preact/hooks";
 import configProps from "./config.json";
 import { Pie } from "./pie";
-import { StateModel } from "./store";
+import { Actions, StateModel } from "./store";
 // Images are bundled too: `import logo from "./assets/logo.png"` gives a data URL for <img src={logo} />.
 
 type PropTypes = PciProperties<typeof configProps>;
 
 type Props = {
   config: PropTypes;
-  store: IStore<StateModel>;
+  store: IStore<StateModel, Actions>;
   readOnly: boolean; // review, solution, closed: show the answer, but do not change it
 };
 

package/preset/preact/src/store.ts

@@ -5,12 +5,13 @@ import { Store } from "@citolab/preact-store";
  * getState() saves both, so a session can be restored, and even replayed (store.replay), action by action.
  */
 export type StateModel = { value: string }; // the text in the input, also when it is not a number yet
-export type ActionType = "SET_VALUE";
+/** The actions, as { type: payload }: dispatch and addReducer only accept these. */
+export type Actions = { SET_VALUE: { value: string } };
 
 export const initialState: StateModel = { value: "" };
 
 export const initStore = (state: StateModel = initialState) => {
-  const store = new Store<StateModel>(state);
-  store.addReducer<{ value: string }>("SET_VALUE", (current, { value }) => ({ ...current, value }));
+  const store = new Store<StateModel, Actions>(state);
+  store.addReducer("SET_VALUE", (current, { value }) => ({ ...current, value }));
   return store;
 };

package/readme.md

@@ -515,17 +515,27 @@ class VoxelPainterClass {
 
 ### 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
+With `@citolab/preact-store` (the `preact+tailwind` template) every change of the PCI state is an action. The
+store keeps the actions with a timestamp, so `getState()` can save how a candidate came to an answer, and
+`store.replay(log)` plays it back.
 
 ```ts
-// src/index.ts
-const [state, dispatch] = useStore<StateModel, ActionType>((type, payload) => {});
+// src/store.ts
+type Actions = { ADD_CUBE: { x: number }; CLEAR: null }; // { type: payload }
+const store = new Store<StateModel, Actions>({ cubes: [] });
+store.addReducer("ADD_CUBE", (state, cube) => ({ ...state, cubes: [...state.cubes, cube] }));
+
+// src/interaction.tsx
+const { cubes } = useStore(store); // re-renders on every change
+store.dispatch({ type: "ADD_CUBE", payload: { x: 1 } });
 
-dispatch<{ x: number }>("ADD_ACTION", { x: +inputValue });
+// src/index.ts
+const unsubscribe = store.subscribe(() => notifyTheEngine(), { immediate: false });
+getState = () => JSON.stringify({ state: store.getState(), log: store.getActions() });
 ```
 
+See [preact-store](../preact-store/readme.md) for the whole API.
+
 ### Let authors configure your PCI in QTI
 
 Use properties in config.json to let authors configure your PCI. Each one becomes a `data-` attribute of the