@citolab/tspci 2.9.7 → 2.9.10

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.9.10](/compare/v2.9.9...v2.9.10) (2026-03-11)
+
+**Note:** Version bump only for package @citolab/tspci
+
+
+
+
+
+## [2.9.9](/compare/v2.9.8...v2.9.9) (2026-03-11)
+
+**Note:** Version bump only for package @citolab/tspci
+
+
+
+
+
+## [2.9.8](/compare/v2.9.7...v2.9.8) (2026-03-11)
+
+**Note:** Version bump only for package @citolab/tspci
+
+
+
+
+
 ## [2.9.7](/compare/v2.9.6...v2.9.7) (2026-03-09)
 
 **Note:** Version bump only for package @citolab/tspci

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citolab/tspci",
-  "version": "2.9.7",
+  "version": "2.9.10",
   "description": "an opiniated typescript ims-pci builder with tao integration",
   "author": "patrick <patrick.deklein@cito.nl>",
   "repository": "@citolab/tspci",
@@ -25,7 +25,7 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-replace": "^6.0.3",
-    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-terser": "^1.0.0",
     "@rollup/plugin-typescript": "^12.3.0",
     "@tailwindcss/nesting": "0.0.0-insiders.565cd3e",
     "@tailwindcss/postcss": "^4.1.18",
@@ -40,9 +40,10 @@
     "postcss": "^8.5.6",
     "postcss-import": "^16.1.1",
     "postcss-load-config": "^6.0.1",
-    "rollup": "^4.57.1",
+    "rollup": "^4.59.0",
     "rollup-plugin-livereload": "^2.0.5",
-    "tailwindcss": "^4.1.18"
+    "tailwindcss": "^4.1.18",
+    "tslib": "^2.8.1"
   },
   "devDependencies": {
     "@types/node": "^25.1.0",
@@ -53,5 +54,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "4c0bee22ee34e4ccb9dfebea72ad9870d7812401"
+  "gitHead": "5d514e4e118dd152f455964a08bc9bed43cb774b"
 }

package/preset/base/package.json

@@ -7,7 +7,8 @@
   "private": true,
   "dependencies": {},
   "devDependencies": {
-    "@citolab/tspci": "latest"
+    "@citolab/tspci": "latest",
+    "tslib": "^2.8.1"
   },
   "scripts": {
     "dev": "tspci --dev",

package/preset/preact/src/interaction.tsx

@@ -20,22 +20,26 @@ const Interaction = ({ config, dom, store }: { config: PropTypes; dom: Document
   };
 
   return <div className="pci-container">
-    <h1>{config.title}</h1>
+    <h1 className="title">{config.title}</h1>
     <div className="body">
-      <img width={config.width} height={+config.height} src={procenten} />
+      <img className="body-image" width={config.width} height={+config.height} src={procenten} alt="Percentages visual" />
     </div>
     <div className="interaction">
-      <label htmlFor="tentacles">{config.prompt}</label>
-      <input type="number"
-        value={state.input}
-        onInput={handleInput}
-        onPaste={() => setEventHandled(false)}
-        onKeyDown={() => setEventHandled(false)}
-        min="0" max="100" />%
+      <label className="prompt" htmlFor="percentage-input">{config.prompt}</label>
+      <div className="answer-row">
+        <input className="answer-input"
+          id="percentage-input"
+          type="number"
+          value={state.input}
+          onInput={handleInput}
+          onPaste={() => setEventHandled(false)}
+          onKeyDown={() => setEventHandled(false)}
+          min="0" max="100" />
+        <span className="answer-suffix">%</span>
+      </div>
     </div>
   </div>;
 };
 
 
 export default Interaction;
-

package/preset/tailwind/src/styles.css

@@ -1,10 +1,30 @@
 @import "tailwindcss";
+@source "./**/*.{html,js,ts,jsx,tsx}";
+@source "../*.xml";
 .pci-container {
-  @apply container flex flex-col justify-center items-center;
+  @apply mx-auto flex w-full max-w-xl flex-col items-center gap-5 rounded-2xl border border-slate-200 bg-white p-6 shadow-lg;
 }
-h1 {
-  @apply text-2xl text-red-500 m-4;
+.title {
+  @apply text-center text-2xl font-semibold tracking-tight text-slate-800;
 }
-input {
-  @apply border border-gray-400 rounded p-2 m-1;
+.body {
+  @apply flex w-full justify-center;
+}
+.body-image {
+  @apply rounded-xl border border-slate-200 bg-slate-50 p-2;
+}
+.interaction {
+  @apply w-full rounded-xl border border-slate-200 bg-slate-50 p-4;
+}
+.prompt {
+  @apply mb-2 block text-sm font-medium text-slate-700;
+}
+.answer-row {
+  @apply flex items-center gap-2;
+}
+.answer-input {
+  @apply w-28 rounded-lg border border-slate-300 bg-white px-3 py-2 text-lg font-medium text-slate-900 shadow-sm outline-none transition focus:border-amber-500 focus:ring-2 focus:ring-amber-200;
+}
+.answer-suffix {
+  @apply text-sm font-semibold uppercase tracking-wide text-slate-500;
 }

package/scripts/test-init-local.sh

@@ -46,6 +46,19 @@ node -e "
   fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n', 'utf8');
 " "${TARGET_DIR}/package.json" "file:${PACK_PATH}"
 
+echo "Verifying generated package.json contains required dev dependencies..."
+node -e "
+  const fs = require('fs');
+  const pkgPath = process.argv[1];
+  const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+  const hasTslib = Boolean(pkg.devDependencies && pkg.devDependencies.tslib);
+  if (!hasTslib) {
+    console.error('ERROR: expected devDependency \"tslib\" in generated package.json');
+    process.exit(1);
+  }
+  console.log('OK: required devDependency \"tslib\" is present');
+" "${TARGET_DIR}/package.json"
+
 echo ""
 echo "Generated files:"
 find "${TARGET_DIR}" -maxdepth 3 -type f | sort
@@ -68,7 +81,6 @@ echo ""
 echo "Installing dependencies in generated project..."
 (cd "${TARGET_DIR}" && npm install --cache "${NPM_CACHE_DIR}" --workspaces=false)
 
-echo ""
 echo "Running production build smoke test..."
 node -e "
   const { spawnSync } = require('child_process');
@@ -76,6 +88,7 @@ node -e "
   const result = spawnSync('npm', ['run', 'prod'], {
     cwd: targetDir,
     stdio: 'inherit',
+    shell: process.platform === 'win32',
     timeout: 180000
   });
   if (result.error) {
@@ -99,6 +112,41 @@ if [[ ! -f "${DIST_TYPES}" ]]; then
   exit 1
 fi
 
+echo "Running dev startup smoke test (timeout 20s)..."
+node -e "
+  const { spawn } = require('child_process');
+  const targetDir = process.argv[1];
+  const child = spawn('npm', ['run', 'dev'], {
+    cwd: targetDir,
+    shell: process.platform === 'win32'
+  });
+  let logs = '';
+  const onData = (chunk) => {
+    logs += chunk.toString();
+  };
+  child.stdout.on('data', onData);
+  child.stderr.on('data', onData);
+  child.on('error', (err) => {
+    console.error(err.message);
+    process.exit(1);
+  });
+  setTimeout(() => {
+    child.kill('SIGTERM');
+    const hasReady = logs.includes('Ready for changes');
+    const missingTslib = logs.includes(\"Could not find module 'tslib'\");
+    if (missingTslib) {
+      console.error('ERROR: dev startup failed due to missing tslib');
+      process.exit(1);
+    }
+    if (!hasReady) {
+      console.error('ERROR: dev startup did not reach \"Ready for changes\" within timeout');
+      console.error(logs);
+      process.exit(1);
+    }
+    process.exit(0);
+  }, 20000);
+" "${TARGET_DIR}"
+
 echo ""
 echo "OK: found expected entry file: ${EXPECTED_FILE}"
 echo "OK: production build output exists: ${DIST_JS}"

package/scripts/test-init-matrix.sh

@@ -88,6 +88,17 @@ create_project() {
     fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + "\n");
   ' "${project_dir}/package.json" "$(npm_path "${TSPCI_TGZ}")" "$(npm_path "${PREACT_STORE_TGZ}")"
 
+  node -e '
+    const fs = require("fs");
+    const pkgPath = process.argv[1];
+    const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf8"));
+    const hasTslib = Boolean(pkg.devDependencies && pkg.devDependencies.tslib);
+    if (!hasTslib) {
+      console.error("ERROR: expected devDependency \"tslib\" in generated package.json");
+      process.exit(1);
+    }
+  ' "${project_dir}/package.json"
+
   (cd "${project_dir}" && npm install --cache "${NPM_CACHE_DIR}" --workspaces=false)
 }
 
@@ -105,6 +116,43 @@ run_base_build() {
   assert_file "${project_dir}/dist/index.js"
 }
 
+run_dev_start_smoke() {
+  local project_dir="$1"
+  node -e '
+    const { spawn } = require("child_process");
+    const targetDir = process.argv[1];
+    const child = spawn("npm", ["run", "dev"], {
+      cwd: targetDir,
+      shell: process.platform === "win32"
+    });
+    let logs = "";
+    const onData = (chunk) => {
+      logs += chunk.toString();
+    };
+    child.stdout.on("data", onData);
+    child.stderr.on("data", onData);
+    child.on("error", (err) => {
+      console.error(err.message);
+      process.exit(1);
+    });
+    setTimeout(() => {
+      child.kill("SIGTERM");
+      const hasReady = logs.includes("Ready for changes");
+      const missingTslib = logs.includes("Could not find module '\''tslib'\''");
+      if (missingTslib) {
+        console.error("ERROR: dev startup failed due to missing tslib");
+        process.exit(1);
+      }
+      if (!hasReady) {
+        console.error("ERROR: dev startup did not reach \"Ready for changes\" within timeout");
+        console.error(logs);
+        process.exit(1);
+      }
+      process.exit(0);
+    }, 20000);
+  ' "${project_dir}"
+}
+
 echo "Scenario 1: vanilla PCI creates and builds"
 create_project "VanillaPci" "javascript" "Vanilla PCI matrix test"
 assert_file "${TEST_ROOT}/VanillaPci/src/index.js"
@@ -114,6 +162,7 @@ echo "Scenario 2: TypeScript PCI (without tailwind/preact) creates and builds"
 create_project "TypeScriptPci" "typescript" "TypeScript PCI matrix test"
 assert_file "${TEST_ROOT}/TypeScriptPci/src/index.ts"
 run_base_build "${TEST_ROOT}/TypeScriptPci"
+run_dev_start_smoke "${TEST_ROOT}/TypeScriptPci"
 
 echo "Scenario 3: TypeScript + tailwind PCI creates and builds"
 create_project "TypeScriptTailwindPci" "preact+tailwind" "TypeScript + tailwind PCI matrix test"

package/src/cli.js

@@ -22,6 +22,24 @@ const __dirname = path.dirname(__filename);
 const PACKAGE_ROOT_PATH = process.cwd();
 const PACKAGE_DIST_PATH = path.join(PACKAGE_ROOT_PATH, "dist");
 const NODE_MODULES = path.join(process.cwd(), "node_modules");
+const REQUIRED_DEV_DEPENDENCIES = {
+  tslib: "^2.8.1",
+};
+
+const ensureRequiredDevDependencies = (packageJson) => {
+  packageJson.devDependencies = packageJson.devDependencies || {};
+  for (const [name, version] of Object.entries(REQUIRED_DEV_DEPENDENCIES)) {
+    if (!packageJson.devDependencies[name]) {
+      packageJson.devDependencies[name] = version;
+    }
+  }
+};
+
+const isMissingTslibError = (event) => {
+  const error = event?.error;
+  const message = [error?.message, error?.toString?.(), event?.message].filter(Boolean).join("\n");
+  return message.includes("Could not find module 'tslib'");
+};
 
 const getDevIndexHtmlSourceCandidates = (target = "IMS") => {
   const projectSource = path.join(PACKAGE_ROOT_PATH, "src/index.html");
@@ -98,6 +116,10 @@ const watchBuild = (devServer = false, target = "IMS") => {
         console.log("starting build");
       }
       if (event.code == "ERROR") {
+        if (isMissingTslibError(event)) {
+          console.log(chalk.red("ERROR: Missing dependency 'tslib'"));
+          console.log(chalk.yellow("Install it in your PCI project: npm install --save-dev tslib"));
+        }
         console.log("ERROR", event);
       }
     });
@@ -337,6 +359,7 @@ const run = async () => {
     const packageJson = path.join(destinationFolder, "package.json");
     const packageJsonContent = fs.readFileSync(packageJson, "utf8");
     let packageJsonContentJson = JSON.parse(packageJsonContent);
+    ensureRequiredDevDependencies(packageJsonContentJson);
 
     const kebabCasedProjectName = pciName.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
     packageJsonContentJson.name = kebabCasedProjectName;
@@ -443,9 +466,9 @@ const run = async () => {
       execSync("npm install", { cwd: destinationFolder, stdio: [0, 1, 2] });
       execSync("npm install", { cwd: destinationFolder, stdio: [0, 1, 2] }); // Somehow this to prevent the fsevents.watch is not a function error
       console.log(chalk.green(`📦 Done!`));
-      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`));
+      console.log(`Navigate to ${chalk.bold(destinationFolder)} or open this folder (e.g. with vscode).`);
+      console.log(`Start the dev server with: ${chalk.bold("npm run dev")}`);
+      console.log(`Add support for TAO with: ${chalk.bold("npm run tspci -- add --target tao")}`);
 
       return;
     } else {