chore: add script to run commands on playground directories (#36)

* chore: add script to run commands on playground directories

also optimize build-playground script a bit

* chore: update lint-staged prettier pattern to include mjs

* style: format playground scripts

Author: samrum

package.json

@@ -22,6 +22,7 @@
     "prepare": "husky install",
     "prepublishOnly": "pnpm run build",
     "release": "standard-version --sign",
+    "run:playground": "node scripts/run-playground.mjs",
     "test:playground": "playwright test",
     "test:playground:ui": "pnpm run test:playground --ui"
   },
@@ -73,8 +74,8 @@
     "standard-version": "^9.5.0"
   },
   "lint-staged": {
-    "*.{js,ts,vue,json,yml,md}": [
-      "prettier --write"
+    "*": [
+      "prettier --write --cache --ignore-unknown"
     ]
   }
 }

scripts/build-playground.mjs

@@ -1,7 +1,7 @@
 import util from "util";
 import { fileURLToPath } from "url";
-import { dirname } from "path";
-import { exec as execCallback } from "child_process";
+import { dirname, resolve } from "path";
+import { exec as execCallback, spawn } from "child_process";
 
 const exec = util.promisify(execCallback);
 
@@ -14,7 +14,9 @@ const manifestVersions = ["2", "3", "2+3"];
 const builds = [];
 
 (async () => {
-  await exec("pnpm build");
+  const { stdout } = await exec("pnpm build");
+  console.log(stdout);
+
   await exec("mkdir -p playground && rm -rf playground/*");
 
   for (const framework of frameworks) {
@@ -33,13 +35,10 @@ const builds = [];
   }
 
   for (const buildArgs of builds) {
-    await exec(`cd playground && node ../create.cjs ${buildArgs.join(" ")}`);
-
-    await exec(
-      `cd playground/${buildArgs[0]} && pnpm i && pnpm build --mode development`
-    );
-    console.log(
-      `cd ${__dirname}/../playground/${buildArgs[0]} && pnpm serve:chrome`
-    );
+    spawn(`cd playground && node ../create.cjs ${buildArgs.join(" ")}`, {
+      shell: true,
+    });
+
+    console.log(resolve(`${__dirname}/../playground/${buildArgs[0]}`));
   }
 })();

scripts/run-playground.mjs

@@ -0,0 +1,45 @@
+import { fileURLToPath } from "url";
+import { dirname, join } from "path";
+import { spawn } from "child_process";
+import { readdir } from "fs/promises";
+
+async function getDirectories(path) {
+  try {
+    return (await readdir(path, { withFileTypes: true }))
+      .filter((dirent) => dirent.isDirectory())
+      .map((dirent) => dirent.name);
+  } catch (e) {
+    return [];
+  }
+}
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const playgroundDir = join(__dirname, "../playground");
+const builds = await getDirectories(playgroundDir);
+
+const supportedCommands = ["build", "dev", "install"];
+
+const inputCommand = process.argv[2] ?? "build";
+
+if (!supportedCommands.includes(inputCommand)) {
+  throw new Error(`Supported commands: ${supportedCommands.join(", ")}`);
+}
+
+let pnpmCommand = "build";
+switch (inputCommand) {
+  case "build":
+    pnpmCommand = "build --mode development";
+    break;
+  case "dev":
+    pnpmCommand = "dev --clearScreen false";
+    break;
+  default:
+    pnpmCommand = inputCommand;
+}
+
+for (const build of builds) {
+  spawn(`cd ${join(playgroundDir, build)} && pnpm ${pnpmCommand}`, {
+    stdio: "inherit",
+    shell: true,
+  });
+}