@citolab/tspci 2.5.4 → 2.5.15

package/CHANGELOG.md

@@ -0,0 +1,88 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## 2.5.15 (2024-10-11)
+
+**Note:** Version bump only for package @citolab/tspci
+
+
+
+
+
+## 2.5.14 (2024-10-11)
+
+**Note:** Version bump only for package @citolab/tspci
+
+
+
+
+
+## 2.5.13 (2024-10-11)
+
+**Note:** Version bump only for package @citolab/tspci
+
+
+
+
+
+## 2.5.12 (2024-10-11)
+
+**Note:** Version bump only for package @citolab/tspci
+
+
+
+
+
+## 2.5.11 (2024-10-11)
+
+**Note:** Version bump only for package @citolab/tspci
+
+
+
+
+
+## 2.5.10 (2024-10-11)
+
+**Note:** Version bump only for package @citolab/tspci
+
+
+
+
+
+## 2.5.9 (2024-10-11)
+
+**Note:** Version bump only for package @citolab/tspci
+
+
+
+
+
+## 2.5.8 (2024-10-10)
+
+**Note:** Version bump only for package @citolab/tspci
+
+
+
+
+
+## 2.5.7 (2024-10-10)
+
+**Note:** Version bump only for package @citolab/tspci
+
+
+
+
+
+## [2.5.6](/compare/v2.5.5...v2.5.6) (2024-10-10)
+
+**Note:** Version bump only for package @citolab/tspci
+
+
+
+
+
+## [2.5.5](/compare/v2.5.4...v2.5.5) (2024-10-10)
+
+**Note:** Version bump only for package @citolab/tspci

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citolab/tspci",
-  "version": "2.5.4",
+  "version": "2.5.15",
   "description": "an opiniated typescript ims-pci builder with tao integration",
   "author": "patrick <patrick.deklein@cito.nl>",
   "repository": "@citolab/tspci",
@@ -46,5 +46,5 @@
     "rollup-plugin-watch-assets": "^1.0.1",
     "tailwindcss": "^3.4.11"
   },
-  "gitHead": "3f69ce948e8d2e02131235a9488645aaa95e0413"
+  "gitHead": "1970a9a73da54053545f3b9a470dcad44c8abd21"
 }

package/readme.md

@@ -32,26 +32,29 @@ This will ask a few options, and creates a PCI development environment with an e
   <img src="https://github.com/Citolab/tspci/blob/main/lib/tspci/tspci-console.png" alt="Setup using console">
 </p>
 
-Run:  ```npx @citolab/tspci@latest init```
+Run: `npx @citolab/tspci@latest init`
 
 1. It will ask to download the latest version of tspci.
-2. If agreed; tspci will be downloaded and started. 
+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 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.
 
 #### preact
+
 preact is a small version of react. You can develop your PCI using hooks and the render function as you are familiar with in react. When preact is selected the cli will also add a store to manage state. This can easily be used to store all user actions in the PCI, and even replay them.
 
 ### specific implementations like TAO.
+
 We also support to create a PCI that can be imported in TAO. Therefor you should use @citolab/tspci-tao.
 
 To add tao using the cli you should run the following command inside your PCI folder:
 
-``` sh
+```sh
   npm run tspci -- add --target tao
 ```
 
@@ -64,6 +67,7 @@ For more info: [@citolab/tspci-tao](https://github.com/Citolab/tspci/tree/main/l
 2️. **Set up** your `package.json`:
 
 `// package.json`
+
 ```json
 {
   "name": "@citolab/hello-world",
@@ -151,9 +155,9 @@ Add a `tsconfig.json` to your project for type checking
     "jsxImportSource": "preact",
     "allowSyntheticDefaultImports": true,
     "resolveJsonModule": true,
-    "esModuleInterop": true,
+    "esModuleInterop": true
   },
-  "include": ["**/*"],
+  "include": ["**/*"]
 }
 ```
 
@@ -169,9 +173,10 @@ Available Commands
   --dev    -d     Start development server
   --watch  -w     Only watch changes
   --help   -h     Help about commandos
-  --target -t     Build production for platform
+  --target -t     Build production for platform, could be @citolab/tscpi-${target}
+  --targetExt -tx Same as -target but reffering to a fully qualified package (not in @citolab)
   init            Init PCI development environment.
-  add --target    Add specific implementation to the PCI. 
+  add --target    Add specific implementation to the PCI.
 
 Examples package.json scripts
 	$ "dev": "tspci --dev",
@@ -182,11 +187,12 @@ Examples package.json scripts
 
 ## 🛣 What's next
 
-Use one of the [examples](https://github.com/Citolab/tspci-examples) to get a headstart 
+Use one of the [examples](https://github.com/Citolab/tspci-examples) to get a headstart
 
-Or read further how we build our PCIs 
+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
@@ -195,7 +201,7 @@ your-pci-project
 │
 └───src
 │   │   config.json    // Used to configure PCI, and in TAO for authors
-│   │   index.ts       // The api for the player and bootstraps your interaction 
+│   │   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
@@ -204,8 +210,8 @@ your-pci-project
 │   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
@@ -220,6 +226,7 @@ Use (p)react in your PCI's to create interactions and bind your data to HTML
 ```
 
 ### Bundle your css
+
 Import and bundle css
 Appending css to shadowdom will prevent styles leaking into your player
 
@@ -239,20 +246,18 @@ Appending css to shadowdom will prevent styles leaking into your player
 
 install autoprefixer
 
-``` sh 
+```sh
 npm i -D autoprefixer
 ```
 
 add `postcss.config.js` with autoprefixer
 
 // postcss.config.js
+
 ```js
 module.exports = {
-  plugins: [
-    require('postcss-import'),
-    require('autoprefixer'),
-  ]
-}
+  plugins: [require("postcss-import"), require("autoprefixer")],
+};
 ```
 
 ### Modern UI with existing classes
@@ -262,10 +267,7 @@ and add a `tailwind.config.js`
 
 ```js
 // postcss.config.js
-  plugins: [
-    + require('tailwindcss/nesting'),
-    + require('tailwindcss'),
-  ];
+plugins: [+require("tailwindcss/nesting"), +require("tailwindcss")];
 ```
 
 ```js
@@ -280,7 +282,8 @@ module.exports = {
 ```
 
 ### Bundle all your images
-Images are bundled in the js by importing them in code: 
+
+Images are bundled in the js by importing them in code:
 imports JPG, PNG, GIF, SVG, and WebP files
 
 ```ts
@@ -289,6 +292,7 @@ import procenten from "./assets/procenten.png";
 ```
 
 ### Create advanced PCIs with 3D libraries
+
 For example, import threejs to create 3D pci's
 
 ```ts
@@ -300,6 +304,7 @@ 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
@@ -312,17 +317,20 @@ 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
 `// src/config.json`
+
 ```json
 {
   "buttonText": "Calculate",
-  "sum1" : "$1 * 14 + 1",
-  "sum2" : "$1 * 2 + 21",
-  "tableSize" : "4"
+  "sum1": "$1 * 14 + 1",
+  "sum2": "$1 * 2 + 21",
+  "tableSize": "4"
 }
 ```
+
 ```ts
 // src/index.ts
   + import configProps from "./config.json";
@@ -341,6 +349,7 @@ Also used in the TAO export for configuring PCIs in TAO
 ```
 
 ### Make use of existing react hooks
+
 ```ts
 // src/useMousePosition
 import { useEffect, useState } from "react";
@@ -354,20 +363,21 @@ export const useMousePosition = () => {
     return () => window.removeEventListener("mousemove", setPosFromEvent);
   }, []);
 
-  return { clientX: position.x, clientY: position.y }
+  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 
+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
+
 - [github](https://github.com/Citolab/tspci/blob/main/lib/tspci-tao)
 - [@citolab/tspci-tao](https://www.npmjs.com/package/@citolab/tspci-tao)
 
-If you want your platform to be support,  [contact us](mailto://getinspiredbycitolab@gmail.com)
-
+If you want your platform to be support, [contact us](mailto://getinspiredbycitolab@gmail.com)
 
 ## License
 
- [GPLv3](https://github.com/Citolab/tspci/blob/main/LICENSE)
+[GPLv3](https://github.com/Citolab/tspci/blob/main/LICENSE)

package/src/cli.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 import { loadConfigFile } from "rollup/dist/loadConfigFile.js";
-import { execSync, spawn } from "child_process";
+import { execSync } from "child_process";
 import { rollup, watch } from "rollup";
 import readline from "readline";
 import chalk from "chalk";
@@ -31,8 +31,9 @@ const watchBuild = (devServer = false, target = "IMS") => {
   process.env.ROLLUP_WATCH = "true";
 
   fs.rmSync(PACKAGE_DIST_PATH, { recursive: true, force: true });
-  !fs.existsSync(PACKAGE_DIST_PATH) && fs.mkdirSync(PACKAGE_DIST_PATH);
-
+  if (!fs.existsSync(PACKAGE_DIST_PATH)) {
+    fs.mkdirSync(PACKAGE_DIST_PATH);
+  }
   if (devServer) {
     try {
       if (fs.existsSync(path.join(PACKAGE_ROOT_PATH, "src/index.html"))) {
@@ -65,8 +66,12 @@ const watchBuild = (devServer = false, target = "IMS") => {
     warnings.flush();
     const watcher = watch(options);
     watcher.on("event", (event) => {
-      event.code == "START" && console.log("starting build");
-      event.code == "ERROR" && console.log("ERROR", event);
+      if (event.code == "START") {
+        console.log("starting build");
+      }
+      if (event.code == "ERROR") {
+        console.log("ERROR", event);
+      }
     });
     watcher.on("event", ({ result }) => {
       if (result) {
@@ -105,30 +110,6 @@ const prodBuild = async () => {
   });
 };
 
-function promptYesNo(prompt) {
-  const rl = readline.createInterface({
-    input: process.stdin,
-    output: process.stdout,
-  });
-  return new Promise((resolve) => {
-    rl.question(`${prompt} (y/n): `, (answer) => {
-      const normalizedAnswer = answer.trim().toLowerCase();
-      if (normalizedAnswer === "y" || normalizedAnswer === "yes") {
-        console.log(chalk.green("Yes"));
-        resolve(true);
-      } else if (normalizedAnswer === "n" || normalizedAnswer === "no") {
-        console.log(chalk.red("No"));
-        resolve(false);
-      } else {
-        console.log("Invalid input. Please enter 'y' or 'n'.");
-        resolve(promptYesNo(prompt));
-      }
-    });
-  }).finally(() => {
-    rl.close();
-  });
-}
-
 function selectOptions(prompt, options) {
   return inquirer.prompt([
     {
@@ -204,8 +185,10 @@ 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 || args.indexOf("-t") >= 0;
+  const t = args.indexOf("--target") >= 0 || args.indexOf("-t") >= 0;
+  const tExt = args.indexOf("--targetExt") >= 0 || args.indexOf("-tx") >= 0;
   const init = args.indexOf("init") >= 0;
+  const targetName = t !== -1 ? `@citolab/tspci-${t}` : tExt !== -1 ? tExt : null;
 
   if (help) {
     console.log(`•\t${chalk.blueBright("--help -h")} list these commands`);
@@ -364,6 +347,9 @@ const run = async () => {
         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);
@@ -391,37 +377,31 @@ const run = async () => {
       return;
     }
     const version = args.indexOf("--next") !== -1 ? "next" : "latest";
-    const targetname = args[targetIndex + 1];
     const packageFileContent = fs.readFileSync(path.join(PACKAGE_ROOT_PATH, "package.json"), "utf8");
     const packageJson = JSON.parse(packageFileContent);
 
     const modifyPci = () => {
-      const scriptFile = path.join(
-        path.join(path.join(path.join(NODE_MODULES, `@citolab`), `tspci-${targetname}`), "src"),
-        `init.mjs`
-      );
+      const scriptFile = path.join(path.join(path.join(NODE_MODULES, `${targetName}`), "src"), `init.mjs`);
       let init = false;
       if (fs.existsSync(scriptFile)) {
         // run init() script
         import(`file:///${scriptFile}`).then((script) => {
           if (script.init) {
             init = true;
-            console.log(chalk.green(`Running init script for @citolab/tspci-${targetname}`));
+            console.log(chalk.green(`Running init script for ${targetName}`));
             script.init();
           } else {
             if (!init) {
-              console.log(chalk.red(`No init script found for @citolab/tspci-${targetname}`));
+              console.log(chalk.red(`No init script found for ${targetName}`));
             }
           }
         });
       }
     };
-
-    // 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}`));
+    if (!packageJson.devDependencies || !packageJson.devDependencies[targetName]) {
+      console.log(chalk.white(`Adding ${targetName}`));
       // install @citolab/tspci-${targetname} to devDepencies
-      execSync(`npm install @citolab/tspci-${targetname}@${version} --save-dev`, {
+      execSync(`npm install ${targetName}@${version} --save-dev`, {
         cwd: PACKAGE_ROOT_PATH,
         stdio: [0, 1, 2],
       });
@@ -449,16 +429,11 @@ const run = async () => {
   }
 
   prodBuild().then(() => {
-    if (target) {
-      const targetIndex = args.indexOf("--target");
-      if (args.length <= targetIndex + 1) {
-        console.error("Missing target name. Use tspci --target target");
+    if (t) {
+      if (!targetName) {
+        console.error("Missing target name. Use tspci --target target or tspci --targetExt target");
       }
-      const targetname = args[targetIndex + 1];
-      const scriptFile = path.join(
-        path.join(path.join(path.join(NODE_MODULES, `@citolab`), `tspci-${targetname}`), "src"),
-        `createPackage.mjs`
-      );
+      const scriptFile = path.join(path.join(path.join(NODE_MODULES, `${targetName}`), "src"), `createPackage.mjs`);
       import(`file:///${scriptFile}`).then((script) => {
         script.bundle();
       });