kasaframe 0.0.0-stage → 0.1.1

package/packages/studio/src/plugin.ts

@@ -0,0 +1,236 @@
+import { existsSync, readdirSync, readFileSync, realpathSync, statSync } from "node:fs";
+import { homedir } from "node:os";
+import { basename, dirname, isAbsolute, join, relative, resolve, sep } from "node:path";
+import { fileURLToPath } from "node:url";
+import type { ServerResponse } from "node:http";
+import type { Plugin } from "vite";
+
+const uiEntry = fileURLToPath(new URL("./ui/main.ts", import.meta.url));
+const uiCss = fileURLToPath(new URL("./ui/studio.css", import.meta.url));
+
+export interface StudioConfig {
+  name: string;
+  /** 미리보기 페이지에서 쓸 곡 주소. 없으면 진짜 시계로 돈다 */
+  music: string | null;
+  /** 곡에서 잘라 쓴 시작(초) — beats.json 의 from */
+  from: number;
+  kf: { fps: number; width: number; height: number; duration: number; scenes?: { id: string; from: number; dur: number }[] } | null;
+  /** 화면 자막 — mode 는 kf.json 의 captions 그대로, lines 는 captions.json 줄 수(0 이면 켜도 보일 게 없다) */
+  captions: { mode: string; lines: number };
+  beats: {
+    bpm?: number;
+    downbeats?: number[];
+    phrases?: number[];
+    sections?: { t: number; kind: string; strength?: number }[];
+    energy?: { hz: number; low: number[]; mid: number[]; high: number[] };
+  } | null;
+}
+
+function readJson<T>(p: string): T | null {
+  try {
+    return JSON.parse(readFileSync(p, "utf8")) as T;
+  } catch {
+    return null;
+  }
+}
+
+function expand(p: string): string {
+  return p.startsWith("~/") ? join(homedir(), p.slice(2)) : p;
+}
+
+interface KfJson {
+  fps: number;
+  width: number;
+  height: number;
+  duration: number;
+  music?: string;
+  beats?: string;
+  captions?: string;
+  scenes?: { id: string; from: number; dur: number }[];
+}
+
+interface BeatsFile extends NonNullable<StudioConfig["beats"]> {
+  source?: string;
+  from?: number;
+}
+
+function load(root: string) {
+  const kf = readJson<KfJson>(join(root, "kf.json"));
+  const beatsPath = join(root, kf?.beats ?? "beats.json");
+  const beats = readJson<BeatsFile>(beatsPath);
+  let music: string | null = null;
+  if (kf?.music) music = resolve(root, expand(kf.music));
+  else if (beats?.source) music = resolve(dirname(beatsPath), expand(beats.source));
+  music = music && existsSync(music) ? realpathSync(music) : null;
+  return { kf, beats, music };
+}
+
+function urlFor(root: string, abs: string): string {
+  const rel = relative(root, abs);
+  const path = rel.startsWith("..") || isAbsolute(rel) ? `/@fs${abs}` : `/${rel.split(sep).join("/")}`;
+  return encodeURI(path);
+}
+
+// 엔진이 Vite 루트를 실제 경로로 잡는다 — 감시 경로·/@fs 주소가 같은 꼴이어야 맞는다
+const realRoot = (dir: string) => realpathSync(resolve(dir));
+
+export function studioConfig(dir: string): StudioConfig {
+  const root = realRoot(dir);
+  const { kf, beats, music } = load(root);
+  return {
+    name: basename(root),
+    music: music ? urlFor(root, music) : null,
+    from: beats?.from ?? 0,
+    kf: kf ? { fps: kf.fps, width: kf.width, height: kf.height, duration: kf.duration, scenes: kf.scenes } : null,
+    captions: { mode: kf?.captions ?? "none", lines: readJson<unknown[]>(join(root, "captions.json"))?.length ?? 0 },
+    beats: beats
+      ? { bpm: beats.bpm, downbeats: beats.downbeats, phrases: beats.phrases, sections: beats.sections, energy: beats.energy }
+      : null,
+  };
+}
+
+function esc(s: string): string {
+  return s.replace(/[&<>"]/g, (c) => `&#${c.charCodeAt(0)};`);
+}
+
+function studioHtml(name: string): string {
+  // Vite 클라이언트를 넣지 않는다 — 넣으면 장면 저장 때 미리보기 화면까지 새로 고쳐져 재생 위치·확대를 잃는다
+  return `<!doctype html>
+<html lang="ko">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>${esc(name)} · kf preview</title>
+<style>${readFileSync(uiCss, "utf8")}</style>
+</head>
+<body>
+<div id="app"></div>
+<script type="module" src="/@fs${encodeURI(uiEntry)}"></script>
+</body>
+</html>`;
+}
+
+// 렌더 결과·의존성·숨김 파일은 미리보기와 상관없다
+function ignoredRel(rel: string): boolean {
+  const head = rel.split(sep)[0];
+  return rel === "" || rel.startsWith("..") || isAbsolute(rel) || head === "out" || head === "node_modules" || head.startsWith(".");
+}
+
+function scanFiles(root: string): string[] {
+  const out: string[] = [];
+  for (const rel of readdirSync(root, { recursive: true }) as string[]) {
+    if (ignoredRel(rel)) continue;
+    const abs = join(root, rel);
+    if (stamp(abs)?.startsWith("f")) out.push(abs);
+  }
+  return out;
+}
+
+function stamp(abs: string): string | null {
+  try {
+    const st = statSync(abs);
+    return `${st.isFile() ? "f" : "d"}${st.mtimeMs}:${st.size}:${st.ino}`;
+  } catch {
+    return null;
+  }
+}
+
+/** 프로젝트 파일을 stat 으로 훑어 바뀐 것을 Vite 감시자에 넣는다. 두 번 연속 같은 값일 때만 — 반쯤 쓴 파일을 잡지 않게. */
+export function pollProject(root: string, emit: (ev: "add" | "change" | "unlink", abs: string) => void): () => void {
+  const known = new Map<string, string>();
+  for (const abs of scanFiles(root)) known.set(abs, stamp(abs)!);
+  const pending = new Map<string, string | null>();
+  const settle = (abs: string, now: string | null) => {
+    if (pending.has(abs) && pending.get(abs) === now) {
+      pending.delete(abs);
+      if (now === null) {
+        if (known.delete(abs)) emit("unlink", abs);
+      } else {
+        emit(known.has(abs) ? "change" : "add", abs);
+        known.set(abs, now);
+      }
+    } else pending.set(abs, now);
+  };
+  const fast = setInterval(() => {
+    for (const [abs, was] of known) {
+      const now = stamp(abs);
+      if (now !== was || pending.has(abs)) settle(abs, now);
+    }
+    for (const abs of pending.keys()) if (!known.has(abs)) settle(abs, stamp(abs));
+  }, 100);
+  const slow = setInterval(() => {
+    for (const abs of scanFiles(root)) if (!known.has(abs) && !pending.has(abs)) pending.set(abs, stamp(abs));
+  }, 700);
+  return () => {
+    clearInterval(fast);
+    clearInterval(slow);
+  };
+}
+
+/** 미리보기 화면을 / 에, 프로젝트 페이지를 /index.html 에 낸다. 둘은 iframe 의 window.__kf 로만 말한다. */
+export function studioPlugin(dir: string): Plugin {
+  const root = realRoot(dir);
+  return {
+    name: "kf-studio",
+    config() {
+      const { music } = load(root);
+      return {
+        server: {
+          ...(music ? { fs: { allow: [dirname(music)] } } : {}),
+          // chokidar 는 파일마다 fs.watch 를 걸어서 이름을 바꿔 덮어쓰는 저장(편집기·에이전트의 원자적 쓰기)
+          // 뒤로 그 파일을 놓치고, macOS FSEvents 는 이벤트를 0.8초까지 묶어 늦게 준다. 프로젝트 폴더는 폴링이 맡는다.
+          watch: { ignored: (p: string) => p === root || p.startsWith(root + sep) },
+        },
+      };
+    },
+    configureServer(server) {
+      // Vite 는 모듈 그래프에 없는 파일(fetch 로 읽는 json·그림)이 바뀌면 아무것도 안 한다.
+      // 미리보기에 따로 알려, Vite 가 iframe 을 안 고치면 미리보기가 고친다.
+      const clients = new Set<ServerResponse>();
+      const broadcast = (o: object) => {
+        const msg = `data: ${JSON.stringify(o)}\n\n`;
+        for (const c of clients) c.write(msg);
+      };
+      const stop = pollProject(root, (ev, abs) => {
+        server.watcher.emit(ev, abs);
+        broadcast({ ev, file: relative(root, abs).split(sep).join("/") });
+      });
+      server.httpServer?.once("close", stop);
+
+      // 장면 파일 문법 오류는 iframe 이 다시 뜨는 사이에 나서 Vite 오류 화면이 안 붙는다 — 오류를 직접 넘긴다
+      const hot = server.environments.client.hot;
+      const send = hot.send.bind(hot) as (...a: unknown[]) => void;
+      hot.send = ((...a: unknown[]) => {
+        const p = a[0] as { type?: string; err?: { message?: string; id?: string; frame?: string; loc?: { file?: string; line?: number } } };
+        if (p?.type === "error" && p.err) {
+          const where = p.err.loc?.file ? `${relative(root, p.err.loc.file)}:${p.err.loc.line ?? ""}` : (p.err.id ?? "");
+          broadcast({ ev: "error", message: p.err.message ?? "", where, frame: p.err.frame ?? "" });
+        }
+        send(...a);
+      }) as typeof hot.send;
+      server.middlewares.use((req, res, next) => {
+        const path = (req.url ?? "/").split("?")[0];
+        if (path === "/" || path === "/__kf/studio") {
+          res.setHeader("content-type", "text/html; charset=utf-8");
+          res.setHeader("cache-control", "no-store");
+          res.end(studioHtml(basename(root)));
+          return;
+        }
+        if (path === "/__kf/events") {
+          res.writeHead(200, { "content-type": "text/event-stream", "cache-control": "no-store", connection: "keep-alive" });
+          res.write(": kf\n\n");
+          clients.add(res);
+          req.on("close", () => clients.delete(res));
+          return;
+        }
+        if (path === "/__kf/studio.json") {
+          res.setHeader("content-type", "application/json; charset=utf-8");
+          res.setHeader("cache-control", "no-store");
+          res.end(JSON.stringify(studioConfig(root)));
+          return;
+        }
+        next();
+      });
+    },
+  };
+}