From 4b3de54e18f98325427db891228a4244354e0362 Mon Sep 17 00:00:00 2001 From: Joseph Garrone Date: Mon, 3 Jun 2024 23:26:04 +0200 Subject: [PATCH] Make it more conveignent to run storybook --- package.json | 5 ++--- scripts/build-storybook.ts | 19 ++++++++++++++++ scripts/link-in-starter.ts | 36 ++---------------------------- scripts/start-storybook.ts | 31 +++++++++++++++++++++++++ scripts/startRebuildOnSrcChange.ts | 36 ++++++++++++++++++++++++++++++ 5 files changed, 90 insertions(+), 37 deletions(-) create mode 100644 scripts/build-storybook.ts create mode 100644 scripts/start-storybook.ts create mode 100644 scripts/startRebuildOnSrcChange.ts diff --git a/package.json b/package.json index a1a9f5d6..8d498850 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "scripts": { "prepare": "patch-package && ts-node --skipProject scripts/generate-i18n-messages.ts", "build": "ts-node --skipProject scripts/build.ts", - "storybook": "yarn build && yarn copy-keycloak-resources-to-storybook-static && start-storybook -p 6006", + "storybook": "ts-node --skipProject scripts/start-storybook.ts", "link-in-starter": "ts-node --skipProject scripts/link-in-starter.ts", "test": "yarn test:types && vitest run", "test:types": "tsc -p test/tsconfig.json --noEmit", @@ -17,8 +17,7 @@ "format": "yarn _format --write", "format:check": "yarn _format --list-different", "link-in-app": "ts-node --skipProject scripts/link-in-app.ts", - "copy-keycloak-resources-to-storybook-static": "PUBLIC_DIR_PATH=.storybook/static node dist/bin/main.js copy-keycloak-resources-to-public", - "build-storybook": "yarn build && yarn copy-keycloak-resources-to-storybook-static && build-storybook", + "build-storybook": "ts-node --skipProject scripts/build-storybook.ts", "dump-keycloak-realm": "ts-node --skipProject scripts/dump-keycloak-realm.ts" }, "bin": { diff --git a/scripts/build-storybook.ts b/scripts/build-storybook.ts new file mode 100644 index 00000000..dfb8cde3 --- /dev/null +++ b/scripts/build-storybook.ts @@ -0,0 +1,19 @@ +import * as child_process from "child_process"; +import { join } from "path"; + +run("yarn build"); + +run(`node ${join("dist", "bin", "main.js")} copy-keycloak-resources-to-public`, { + env: { + ...process.env, + PUBLIC_DIR_PATH: join(".storybook", "static") + } +}); + +run("npx build-storybook"); + +function run(command: string, options?: { env?: NodeJS.ProcessEnv }) { + console.log(`$ ${command}`); + + child_process.execSync(command, { stdio: "inherit", ...options }); +} diff --git a/scripts/link-in-starter.ts b/scripts/link-in-starter.ts index ed98525b..1fcb567f 100644 --- a/scripts/link-in-starter.ts +++ b/scripts/link-in-starter.ts @@ -1,11 +1,7 @@ import * as child_process from "child_process"; import * as fs from "fs"; import { join } from "path"; -import { waitForDebounceFactory } from "powerhooks/tools/waitForDebounce"; -import chokidar from "chokidar"; -import * as runExclusive from "run-exclusive"; -import { Deferred } from "evt/tools/Deferred"; -import chalk from "chalk"; +import { startRebuildOnSrcChange } from "./startRebuildOnSrcChange"; fs.rmSync("node_modules", { recursive: true, force: true }); fs.rmSync("dist", { recursive: true, force: true }); @@ -23,35 +19,7 @@ run("yarn install", { cwd: join("..", "keycloakify-starter") }); run(`npx ts-node --skipProject ${join("scripts", "link-in-app.ts")} keycloakify-starter`); -const { waitForDebounce } = waitForDebounceFactory({ delay: 400 }); - -const runYarnBuild = runExclusive.build(async () => { - console.log(chalk.green("Running `yarn build`")); - - const dCompleted = new Deferred(); - - const child = child_process.spawn("yarn", ["build"], { - env: process.env - }); - - child.stdout.on("data", data => process.stdout.write(data)); - - child.stderr.on("data", data => process.stderr.write(data)); - - child.on("exit", () => dCompleted.resolve()); - - await dCompleted.pr; - - console.log("\n\n"); -}); - -console.log(chalk.green("Watching for changes in src/")); - -chokidar.watch("src", { ignoreInitial: true }).on("all", async () => { - await waitForDebounce(); - - runYarnBuild(); -}); +startRebuildOnSrcChange(); function run(command: string, options?: { cwd: string }) { console.log(`$ ${command}`); diff --git a/scripts/start-storybook.ts b/scripts/start-storybook.ts new file mode 100644 index 00000000..697e31ba --- /dev/null +++ b/scripts/start-storybook.ts @@ -0,0 +1,31 @@ +import * as child_process from "child_process"; +import * as fs from "fs"; +import { join } from "path"; +import { startRebuildOnSrcChange } from "./startRebuildOnSrcChange"; + +run("yarn build"); + +run(`node ${join("dist", "bin", "main.js")} copy-keycloak-resources-to-public`, { + env: { + ...process.env, + PUBLIC_DIR_PATH: join(".storybook", "static") + } +}); + +{ + const child = child_process.spawn("npx", ["start-storybook", "-p", "6006"]); + + child.stdout.on("data", data => process.stdout.write(data)); + + child.stderr.on("data", data => process.stderr.write(data)); + + child.on("exit", process.exit.bind(process)); +} + +startRebuildOnSrcChange(); + +function run(command: string, options?: { env?: NodeJS.ProcessEnv }) { + console.log(`$ ${command}`); + + child_process.execSync(command, { stdio: "inherit", ...options }); +} diff --git a/scripts/startRebuildOnSrcChange.ts b/scripts/startRebuildOnSrcChange.ts new file mode 100644 index 00000000..f091b3f2 --- /dev/null +++ b/scripts/startRebuildOnSrcChange.ts @@ -0,0 +1,36 @@ +import * as child_process from "child_process"; +import { waitForDebounceFactory } from "powerhooks/tools/waitForDebounce"; +import chokidar from "chokidar"; +import * as runExclusive from "run-exclusive"; +import { Deferred } from "evt/tools/Deferred"; +import chalk from "chalk"; + +export function startRebuildOnSrcChange() { + const { waitForDebounce } = waitForDebounceFactory({ delay: 400 }); + + const runYarnBuild = runExclusive.build(async () => { + console.log(chalk.green("Running `yarn build`")); + + const dCompleted = new Deferred(); + + const child = child_process.spawn("yarn", ["build"]); + + child.stdout.on("data", data => process.stdout.write(data)); + + child.stderr.on("data", data => process.stderr.write(data)); + + child.on("exit", () => dCompleted.resolve()); + + await dCompleted.pr; + + console.log("\n\n"); + }); + + console.log(chalk.green("Watching for changes in src/")); + + chokidar.watch("src", { ignoreInitial: true }).on("all", async () => { + await waitForDebounce(); + + runYarnBuild(); + }); +}