@citolab/tspci 2.8.4 → 2.9.9

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

@@ -9,7 +9,8 @@ import fs from "fs";
 import os from "os";
 import clear from "clear";
 import figlet from "figlet";
-import inquirer from "inquirer";
+import chokidar from "chokidar";
+import { select } from "@inquirer/prompts";
 
 const args = process.argv.slice(2);
 
@@ -21,6 +22,70 @@ 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");
+  const templateSource =
+    target === "IMS"
+      ? path.join(__dirname, "../public/index.html")
+      : path.join(NODE_MODULES, `@citolab/tspci-${target}/public/index.html`);
+  return { projectSource, templateSource };
+};
+
+const resolveActiveDevIndexHtmlSource = (target = "IMS") => {
+  const { projectSource, templateSource } = getDevIndexHtmlSourceCandidates(target);
+  return fs.existsSync(projectSource) ? projectSource : templateSource;
+};
+
+const copyDevIndexHtmlToDist = (target = "IMS", reason = "initial") => {
+  const source = resolveActiveDevIndexHtmlSource(target);
+  if (!fs.existsSync(source)) {
+    throw new Error(`No index.html template found for dev mode. Expected: ${source}`);
+  }
+  fs.copyFileSync(source, path.join(PACKAGE_DIST_PATH, "index.html"));
+  console.log(`index.html copied to dist (${reason}) from ${source}`);
+};
+
+const watchDevIndexHtmlSources = (target = "IMS") => {
+  const { projectSource, templateSource } = getDevIndexHtmlSourceCandidates(target);
+  const watcher = chokidar.watch([projectSource, templateSource], {
+    ignoreInitial: true,
+    awaitWriteFinish: {
+      stabilityThreshold: 120,
+      pollInterval: 20,
+    },
+  });
+
+  watcher.on("all", (event, changedPath) => {
+    try {
+      copyDevIndexHtmlToDist(target, `${event}: ${changedPath}`);
+    } catch (err) {
+      console.error(`Failed to refresh index.html after ${event} on ${changedPath}`, err);
+    }
+  });
+
+  const closeWatcher = () => watcher.close();
+  process.on("SIGINT", closeWatcher);
+  process.on("SIGTERM", closeWatcher);
+};
 
 // https://rollupjs.org/guide/en/#programmatically-loading-a-config-file
 const watchBuild = (devServer = false, target = "IMS") => {
@@ -36,27 +101,8 @@ const watchBuild = (devServer = false, target = "IMS") => {
   }
   if (devServer) {
     try {
-      if (fs.existsSync(path.join(PACKAGE_ROOT_PATH, "src/index.html"))) {
-        fs.copyFile(
-          path.join(PACKAGE_ROOT_PATH, "src/index.html"),
-          path.join(PACKAGE_DIST_PATH, "index.html"),
-          (err) => {
-            if (err) throw err;
-            console.log("using index.html found in src/index.html, copied to dist");
-          }
-        );
-      } else {
-        let fileToCopy;
-        if (target == "IMS") {
-          fileToCopy = path.join(__dirname, `../public/index.html`);
-        } else {
-          fileToCopy = path.join(NODE_MODULES, `@citolab/tspci-${target}/public/index.html`);
-        }
-        fs.copyFile(fileToCopy, path.join(PACKAGE_DIST_PATH, "index.html"), (err) => {
-          if (err) throw err;
-          console.log("using index.html was copied to /dist folder pci");
-        });
-      }
+      copyDevIndexHtmlToDist(target);
+      watchDevIndexHtmlSources(target);
     } catch (err) {
       console.error(err);
     }
@@ -70,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);
       }
     });
@@ -110,16 +160,13 @@ const prodBuild = async () => {
   });
 };
 
-function selectOptions(prompt, options) {
-  return inquirer.prompt([
-    {
-      type: "list",
-      message: prompt,
-      name: "value",
-      choices: options,
-      default: options[0],
-    },
-  ]);
+async function selectOptions(prompt, options) {
+  const value = await select({
+    message: prompt,
+    choices: options.map((o) => ({ value: o })),
+    default: options[0],
+  });
+  return { value };
 }
 
 function askOption(prompt) {
@@ -312,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;
@@ -418,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 {