@citolab/tspci 2.5.0 → 2.5.1

package/package.json

@@ -1,50 +1,50 @@
 {
   "name": "@citolab/tspci",
-  "version": "2.5.0",
+  "version": "2.5.1",
   "description": "an opiniated typescript ims-pci builder with tao integration",
   "author": "patrick <patrick.deklein@cito.nl>",
   "repository": "@citolab/tspci",
   "bin": {
     "tspci": "src/cli.js"
   },
+  "scripts": {
+    "help": "tspci --help",
+    "init": "tspci init --force --path=../../pcis"
+  },
   "type": "module",
   "types": "types/index.d.ts",
   "dependencies": {
-    "@rollup/plugin-alias": "^5.0.0",
-    "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-commonjs": "^24.1.0",
-    "@rollup/plugin-image": "^3.0.2",
-    "@rollup/plugin-json": "^6.0.0",
-    "@rollup/plugin-node-resolve": "^15.0.2",
-    "@rollup/plugin-replace": "^5.0.2",
-    "@rollup/plugin-terser": "^0.4.1",
-    "@rollup/plugin-typescript": "^11.1.0",
+    "@rollup/plugin-alias": "^5.1.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^26.0.1",
+    "@rollup/plugin-image": "^3.0.3",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-replace": "^5.0.7",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
     "@tailwindcss/nesting": "0.0.0-insiders.565cd3e",
-    "@testing-library/dom": "^9.2.0",
-    "@types/node": "^18.16.3",
-    "@typescript-eslint/eslint-plugin": "^5.59.2",
-    "@typescript-eslint/parser": "^5.59.2",
-    "autoprefixer": "10.4.14",
-    "chalk": "5.2.0",
+    "@testing-library/dom": "^10.4.0",
+    "@types/node": "^22.5.5",
+    "@typescript-eslint/eslint-plugin": "^8.5.0",
+    "@typescript-eslint/parser": "^8.5.0",
+    "autoprefixer": "10.4.20",
+    "chalk": "5.3.0",
     "clear": "0.1.0",
-    "figlet": "1.6.0",
-    "inquirer": "9.2.0",
+    "figlet": "1.7.0",
+    "inquirer": "11.0.1",
     "live-server": "^1.2.2",
-    "postcss": "^8.4.23",
-    "postcss-import": "^15.1.0",
-    "rollup": "^3.21.4",
-    "rollup-plugin-copy": "^3.4.0",
+    "postcss": "^8.4.47",
+    "postcss-import": "^16.1.0",
+    "rollup": "^4.21.3",
+    "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-live-server": "^2.0.0",
     "rollup-plugin-node-builtins": "^2.1.2",
     "rollup-plugin-node-globals": "^1.4.0",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-watch-assets": "^1.0.1",
-    "tailwindcss": "^3.3.2"
-  },
-  "scripts": {
-    "help": "tspci --help",
-    "init": "tspci init --force --path=../../pcis"
+    "tailwindcss": "^3.4.11"
   },
-  "gitHead": "97b99b32afa946f3a85b3cfe6743fa7857d77091"
+  "gitHead": "c2a5bef4bd27f0251da5b62c049b52d42c8efa71"
 }

package/preset/javascript/src/index.js

@@ -0,0 +1,92 @@
+import * as ctx from "qtiCustomInteractionContext";
+import configProps from "./config.json";
+import style from "./styles.css"; // import and bundle this style file ( you can use tailwind and nested css )
+import procenten from "./assets/procenten.png"; // image types are bundled inside the js
+
+class Pci {
+  /**
+   * @constructor
+   * @param {string} typeIdentifier - The unique identifier for this PCI type.
+   */
+  typeIdentifier; // typeIdentifier is mandatory for all PCI's
+  config; // reference to the interface of the config object which you get when getInstance is called by the player
+  state; // keep a reference to the state
+  shadowdom; // Not mandatory, but its wise to create a shadowroot
+
+  constructor() {
+    /**
+     * @type {string}
+     * @description The unique identifier for this PCI type.
+     */
+    this.typeIdentifier = "###___PCI_NAME___###"; // typeIdentifier is mandatory for all PCI's
+    ctx && ctx.register(this); // we assume the qtiCustomInteractionContext is avaible due to the import above
+  }
+
+  /**
+   * @method getInstance
+   * @description Creates a new instance of this portable custom interaction.
+   * This method will be called by the qtiCustomInteractionContext.
+   *
+   * @param {HTMLElement} dom - The DOM element to which this PCI is added.
+   * @param {Object<ConfigProperties>} config - The configuration to apply to this PCI.
+   * @param {string} state - A previously saved state to restore the PCI instance.
+   * This state must have been obtained from a prior call to getState for an instance of the same typeIdentifier.
+   */
+  getInstance = (dom, config, state) => {
+    config.properties = { ...configProps, ...config.properties }; // merge current props with incoming
+    this.config = config;
+    this.state = state ? state : "";
+
+    this.shadowdom = dom.attachShadow({ mode: "closed" });
+    this.render();
+
+    config.onready(this);
+  };
+
+  render = () => {
+    this.shadowdom.addEventListener("change", (e) => {
+      const value = e.target.value;
+      this.state = value;
+    });
+    this.shadowdom.innerHTML = `<div class="pci-container">
+      <h1>${this.config.properties.title}</h1>
+      <div class="body">
+        <img width="${+this.config.properties.width}" height="${+this.config.properties.height}" src="${procenten}" />
+      </div>
+      <div class="interaction">
+        <label for="tentacles">${this.config.properties.prompt}</label>
+        <input type="number" value="${this.state}" min="0" max="100">%
+      </div>
+    </div>`;
+    const css = document.createElement("style");
+    css.innerHTML = style;
+    this.shadowdom.appendChild(css);
+  };
+
+  /**
+   * @method getResponse
+   * @description Retrieves the value to assign to the bound QTI response variable.
+   *
+   * @returns {Object} - The response value.
+   */
+  getResponse = () => {
+    const response = this.state === null || this.state === undefined ? undefined : { base: { integer: this.state } };
+    return response;
+  };
+
+  /**
+   * @method getState
+   * @description Retrieves the current state of this PCI. This state can be passed to getInstance to restore the instance later.
+   *
+   * @returns {string} - The current state of the PCI.
+   */
+  getState = () => this.state.toString();
+
+  /**
+   * @method oncompleted
+   * @description called when the PCI is completed.
+   */
+  oncompleted = () => {};
+}
+
+export default new Pci();

package/preset/preact/src/index.tsx

@@ -67,6 +67,7 @@ class App implements IMSpci<PropTypes> {
       },
     } as QtiVariableJSON;
   }
+  oncompleted = () => { };
 }
 
 export default new App();

package/preset/{base → typescript}/src/index.ts

@@ -1,6 +1,8 @@
 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
+
 import style from "./styles.css"; // import and bundle this style file ( you can use tailwind and nested css )
 import procenten from "./assets/procenten.png"; // image types are bundled inside the js
 // Configuration
@@ -31,7 +33,7 @@ class Pci implements IMSpci<PropTypes> {
 
   private render = () => {
     this.shadowdom.addEventListener("change", (e: Event) => {
-      const value = (e.target as HTMLInputElement).value;
+      const value = (e.target as HTMLInputElement)?.value || "";
       this.state = value;
     });
     this.shadowdom.innerHTML = `<div class="pci-container">
@@ -50,11 +52,16 @@ class Pci implements IMSpci<PropTypes> {
   };
 
   getResponse = () => {
-    const response = (this.state === null || this.state === undefined) ? undefined : { base: { integer: this.state }} as QtiVariableJSON;
+    const response =
+      this.state === null || this.state === undefined
+        ? undefined
+        : ({ base: { integer: this.state } } as QtiVariableJSON);
     return response;
   };
 
   getState = () => this.state.toString();
+
+  oncompleted = () => {};
 }
 
 export default new Pci();

package/readme.md

@@ -38,7 +38,7 @@ Run:  ```npx @citolab/tspci@latest init```
 2. If agreed; tspci will be downloaded and started. 
 3. You should provide a name/identifier for your PCI.
 4. You should provide a description.
-5. Last option is to add options: tailwind and preact (both are selected by default, for more info; keep reading).
+5. Last option is to choose how you want to build your pci, using tailwind and preact, typescript or javascript
 
 #### Tailwind
 Tailwind is a popular css framework and can be used to give a nice look and feel of the PCI. The cli will make sure the css is added; and all build stuff that comes with tailwind is setup.

package/src/cli.js

@@ -132,7 +132,7 @@ function promptYesNo(prompt) {
 function selectOptions(prompt, options) {
   return inquirer.prompt([
     {
-      type: "checkbox",
+      type: "list",
       message: prompt,
       name: "values",
       choices: options.map((o) => ({ name: o, checked: true })),
@@ -232,7 +232,10 @@ const run = async () => {
     console.log(chalk.green(figlet.textSync("@citolab/tspci", { horizontalLayout: "full" })));
 
     // prompt for name
-    let pciName = (await askOption("What your pci identifier (typeIdentifier). this can only contain alphanumeric characters (default: myPci)  ")) || "myPci";
+    let pciName =
+      (await askOption(
+        "What your pci identifier (typeIdentifier). this can only contain alphanumeric characters (default: myPci)  "
+      )) || "myPci";
     let destinationFolder = path.join(process.cwd(), pciName);
     if (args.find((arg) => arg.startsWith("--path"))) {
       const pathIndex = args.findIndex((arg) => arg.startsWith("--path"));
@@ -266,7 +269,7 @@ const run = async () => {
       (await askOption("What is the description of your pci? (default: pci created with tspci)")) ||
       "pci created with tspci";
 
-    const options = await selectOptions("Would you like to add other features?", ["tailwind css", "preact"]);
+    const options = await selectOptions("Type of project?", ["preact+tailwind", "typescript", "javascript"]);
     console.log(chalk.green(`Options: ${options.values.length === 0 ? "none" : options.values}`));
     // get relative path to executable
     const cliPath = __dirname;
@@ -298,7 +301,7 @@ const run = async () => {
     }
     packageJsonContentJson.config.tspci.typeIdentifier = pciName;
 
-    if (options.values.includes("tailwind css")) {
+    if (options.values.includes("preact+tailwind")) {
       console.log(chalk.green("Adding tailwind css"));
 
       // read postcss.config.js
@@ -325,19 +328,19 @@ const run = async () => {
       copyDir(path.resolve(cliPath, "./../preset/tailwind"), destinationFolder);
     }
 
-    if (options.values.includes("preact")) {
+    if (options.values.includes("preact+tailwind")) {
       console.log(chalk.green("Adding preact"));
       const packageJson = path.join(destinationFolder, "package.json");
       const packageJsonContent = fs.readFileSync(packageJson, "utf8");
       let packageJsonContentJson = JSON.parse(packageJsonContent);
       // delete index.ts
-      fs.rmSync(path.join(destinationFolder, "src/index.ts"), { force: true });
+      // fs.rmSync(path.join(destinationFolder, "src/index.ts"), { force: true });
       const preactPresetFolder = path.resolve(cliPath, "./../preset/preact");
       copyDirAndReplaceInFiles(preactPresetFolder, destinationFolder, pciName);
       // add preact and @citolab/preact-store to the package json
       packageJsonContentJson.dependencies = {
         ...packageJsonContentJson.dependencies,
-        preact: "^10.13.2",
+        preact: "^10.24.0",
         "@citolab/preact-store": "latest",
       };
       packageJsonContentJson = { ...packageJsonContentJson, source: "src/index.tsx" };
@@ -345,6 +348,36 @@ const run = async () => {
       fs.writeFileSync(packageJson, newPackageJsonContent);
     }
 
+    if (options.values.includes("typescript")) {
+      copyDirAndReplaceInFiles(
+        path.resolve(cliPath, "./../preset/typescript/src"),
+        path.join(destinationFolder, "src"),
+        pciName
+      );
+      // point to the javascript file
+      const packageJson = path.join(destinationFolder, "package.json");
+      const packageJsonContent = fs.readFileSync(packageJson, "utf8");
+      let packageJsonContentJson = JSON.parse(packageJsonContent);
+      packageJsonContentJson.source = "src/index.ts";
+      const newPackageJsonContent = JSON.stringify(packageJsonContentJson, null, 2);
+      fs.writeFileSync(packageJson, newPackageJsonContent);
+    }
+
+    if (options.values.includes("javascript")) {
+      copyDirAndReplaceInFiles(
+        path.resolve(cliPath, "./../preset/javascript/src"),
+        path.join(destinationFolder, "src"),
+        pciName
+      );
+      // point to the javascript file
+      const packageJson = path.join(destinationFolder, "package.json");
+      const packageJsonContent = fs.readFileSync(packageJson, "utf8");
+      let packageJsonContentJson = JSON.parse(packageJsonContent);
+      packageJsonContentJson.source = "src/index.js";
+      const newPackageJsonContent = JSON.stringify(packageJsonContentJson, null, 2);
+      fs.writeFileSync(packageJson, newPackageJsonContent);
+    }
+
     // run npm install in destination folder
     if (args.indexOf("--no-install") === -1) {
       console.log(chalk.green("📦 Installing dependencies"));
@@ -353,7 +386,7 @@ const run = async () => {
       console.log(chalk.blueBright(`Navigate to ${destinationFolder} or open this folder (e.g. with vscode).`));
       console.log(chalk.blueBright(`Start the dev server with: npm run dev`));
       console.log(chalk.blueBright(`Add support for TAO with: npm run tspci -- add --target tao`));
-       
+
       return;
     } else {
       console.log(chalk.yellow("Skipping npm install, run npm install in the project folder to install dependencies"));
@@ -391,14 +424,16 @@ const run = async () => {
           }
         });
       }
-
     };
 
     // check if `@citolab/tspci-${targetname}]}` is already in devDependencies
     if (!packageJson.devDependencies || !packageJson.devDependencies[`@citolab/tspci-${targetname}`]) {
       console.log(chalk.white(`Adding @citolab/tspci-${targetname}`));
       // install @citolab/tspci-${targetname} to devDepencies
-      execSync(`npm install @citolab/tspci-${targetname}@${version} --save-dev`, { cwd: PACKAGE_ROOT_PATH, stdio: [0, 1, 2] });
+      execSync(`npm install @citolab/tspci-${targetname}@${version} --save-dev`, {
+        cwd: PACKAGE_ROOT_PATH,
+        stdio: [0, 1, 2],
+      });
     }
     modifyPci();
 
@@ -413,7 +448,7 @@ const run = async () => {
   if (dev) {
     const devIndex = args.indexOf("--dev");
     if (args.length <= devIndex + 1) {
-      console.error("Missing dev target name. Using IMS template");
+      console.log("Using IMS template");
       watchBuild(true);
     } else {
       const target = args[devIndex + 1];