@moloodev/cli 0.0.0-stage → 0.2.2

package/src/dev-host-entry.tsx

@@ -0,0 +1,12 @@
+import { createRoot } from "react-dom/client";
+import { DevHostApp } from "./dev-host-app";
+import { createDevHostController } from "./dev-host-client";
+
+const config = typeof window === "undefined" ? undefined : window.__MOLOO_DEV_HOST__;
+if (config) {
+  document.documentElement.classList.add("dark");
+  const container = document.createElement("div");
+  container.id = "moloo-dev-host";
+  document.body.replaceChildren(container);
+  createRoot(container).render(<DevHostApp controller={createDevHostController(config)} />);
+}

package/src/dev-host.css

@@ -0,0 +1,19 @@
+@import "@moloodev/ui/fonts.css";
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+@import "@moloodev/ui/styles.css";
+@import "@moloodev/ui/typeset.css";
+@import "@moloodev/ui/moloo.css";
+
+@custom-variant dark (&:is(.dark *));
+
+html,
+body {
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+  font-family: var(--font-sans);
+  background: var(--background);
+  color: var(--foreground);
+}

package/src/dev-server.ts

@@ -0,0 +1,365 @@
+import { existsSync, watch, type FSWatcher } from "node:fs";
+import { createServer, type IncomingMessage, type Server, type ServerResponse } from "node:http";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import esbuild from "esbuild";
+import {
+  allowedFrameAncestor,
+  editorOriginHeaders,
+  type EditorOriginHeaderPolicy,
+} from "@moloodev/editor-sdk/origin-headers";
+import { buildEditorScript, readPackageEditorView, styleHeader } from "./editor-views";
+
+export type StartEditorDevServerOptions = {
+  readonly packageRoot: string;
+  readonly hostPort?: number;
+  readonly viewPort?: number;
+  readonly watch?: boolean;
+};
+
+export type EditorDevServer = {
+  readonly editorId: string;
+  readonly hostOrigin: string;
+  readonly viewOrigin: string;
+  readonly hostPort: number;
+  readonly viewPort: number;
+  rebuild(): Promise<{ build: number }>;
+  close(): Promise<void>;
+};
+
+let cachedHostScript: string | null = null;
+
+function packageSourceDir(specifier: string): string {
+  let dir = dirname(fileURLToPath(import.meta.resolve(specifier)));
+  while (!existsSync(join(dir, "package.json"))) {
+    const parent = dirname(dir);
+    if (parent === dir) throw new Error(`Cannot locate package root for ${specifier}`);
+    dir = parent;
+  }
+  return join(dir, "src");
+}
+
+async function buildHostClientScript(): Promise<string> {
+  if (cachedHostScript !== null) return cachedHostScript;
+  const here = dirname(fileURLToPath(import.meta.url));
+  const css = new Set<string>();
+  const built = await esbuild.build({
+    entryPoints: [join(here, "dev-host-entry.tsx")],
+    bundle: true,
+    format: "iife",
+    platform: "browser",
+    jsx: "automatic",
+    write: false,
+    logLevel: "error",
+    legalComments: "none",
+    define: { "process.env.NODE_ENV": '"development"' },
+    alias: { "lib0/logging": join(here, "yjs-log.ts") },
+    plugins: [
+      {
+        name: "collect-host-css",
+        setup(builder) {
+          builder.onLoad({ filter: /\.css$/ }, (args) => {
+            css.add(args.path);
+            return { contents: "", loader: "js" };
+          });
+        },
+      },
+    ],
+  });
+  const file = built.outputFiles?.[0];
+  if (!file) throw new Error("Failed to bundle dev-host-entry.tsx");
+  const header = await styleHeader(join(here, "dev-host.css"), [...css], [
+    here,
+    packageSourceDir("@moloodev/ui"),
+    packageSourceDir("@moloodev/editor-sdk/layout"),
+  ]);
+  cachedHostScript = header + file.text;
+  return cachedHostScript;
+}
+
+function viewDocumentCsp(network: readonly string[], ancestor: string | null): string {
+  const connect = ["'self'", ...network];
+  const frameAncestors = ancestor ? [ancestor] : ["'none'"];
+  const directives: readonly (readonly [string, readonly string[]])[] = [
+    ["default-src", ["'none'"]],
+    ["script-src", ["'self'"]],
+    ["style-src", ["'self'", "'unsafe-inline'"]],
+    ["img-src", ["'self'", "data:", "blob:"]],
+    ["font-src", ["'self'", "https://ui.moloo.dev"]],
+    ["connect-src", connect],
+    ["frame-ancestors", frameAncestors],
+    ["base-uri", ["'none'"]],
+    ["form-action", ["'none'"]],
+  ];
+  return directives.map(([name, sources]) => `${name} ${sources.join(" ")}`).join("; ");
+}
+
+function applyOriginPolicy(res: ServerResponse, policy: EditorOriginHeaderPolicy): void {
+  for (const dropped of policy.drop) {
+    res.removeHeader(dropped);
+  }
+  res.setHeader("content-security-policy", policy["content-security-policy"]);
+  res.setHeader("x-content-type-options", policy["x-content-type-options"]);
+}
+
+function singleQueryParam(url: URL, key: string): string | null {
+  const values = url.searchParams.getAll(key);
+  if (values.length !== 1) return null;
+  const value = values[0];
+  return value && value.length > 0 ? value : null;
+}
+
+function listenOnLoopback(server: Server, port: number): Promise<number> {
+  return new Promise((resolve, reject) => {
+    function onError(err: Error) {
+      server.close(() => reject(err));
+    }
+    server.once("error", onError);
+    server.listen(port, "127.0.0.1", () => {
+      server.removeListener("error", onError);
+      const addr = server.address();
+      if (!addr || typeof addr === "string") {
+        server.close(() => reject(new Error("Did not bind TCP port")));
+        return;
+      }
+      resolve(addr.port);
+    });
+  });
+}
+
+function closeServer(server: Server): Promise<void> {
+  return new Promise((resolve) => {
+    server.close(() => resolve());
+  });
+}
+
+export async function startEditorDevServer(
+  options: StartEditorDevServerOptions,
+): Promise<EditorDevServer> {
+  const initialView = readPackageEditorView(options.packageRoot);
+  const hostScript = await buildHostClientScript();
+  let currentView = initialView;
+  let currentEditorScript = await buildEditorScript(initialView);
+  let buildCount = 1;
+
+  const sseClients = new Set<ServerResponse>();
+  let watcher: FSWatcher | null = null;
+  let watchTimer: ReturnType<typeof setTimeout> | null = null;
+
+  let hostOrigin = "";
+  let viewOrigin = "";
+
+  const viewServer = createServer((req: IncomingMessage, res: ServerResponse) => {
+    const method = req.method ?? "GET";
+    const url = new URL(req.url ?? "/", viewOrigin || "http://127.0.0.1");
+    const refused = editorOriginHeaders({ parent: null, verifiedOrigins: [] });
+
+    if (method !== "GET" && method !== "HEAD") {
+      applyOriginPolicy(res, refused);
+      res.writeHead(405, {
+        "content-type": "text/plain; charset=utf-8",
+        "cache-control": "no-store",
+      });
+      res.end(method === "HEAD" ? undefined : "method not allowed");
+      return;
+    }
+
+    if (url.pathname === "/") {
+      const parent = singleQueryParam(url, "parent");
+      const verifiedOrigins = [hostOrigin, `http://localhost:${String(boundHostPort)}`];
+      const ancestor = allowedFrameAncestor(parent, verifiedOrigins);
+      const policy: EditorOriginHeaderPolicy = {
+        ...editorOriginHeaders({ parent, verifiedOrigins }),
+        "content-security-policy": viewDocumentCsp(currentView.network, ancestor),
+      };
+      applyOriginPolicy(res, policy);
+      const html = [
+        "<!doctype html>",
+        `<html data-editor-id="${currentView.id}">`,
+        "<head>",
+        '<meta charset="utf-8">',
+        `<title>${currentView.id}</title>`,
+        "</head>",
+        "<body>",
+        '<script src="/editor.js"></script>',
+        "</body>",
+        "</html>",
+      ].join("\n");
+      res.writeHead(200, {
+        "content-type": "text/html; charset=utf-8",
+        "cache-control": "no-store",
+      });
+      res.end(method === "HEAD" ? undefined : html);
+      return;
+    }
+
+    if (url.pathname === "/editor.js") {
+      applyOriginPolicy(res, refused);
+      res.writeHead(200, {
+        "content-type": "text/javascript; charset=utf-8",
+        "cache-control": "no-store",
+      });
+      res.end(method === "HEAD" ? undefined : currentEditorScript);
+      return;
+    }
+
+    applyOriginPolicy(res, refused);
+    res.writeHead(404, {
+      "content-type": "text/plain; charset=utf-8",
+      "cache-control": "no-store",
+    });
+    res.end(method === "HEAD" ? undefined : "not found");
+  });
+
+  const hostServer = createServer((req: IncomingMessage, res: ServerResponse) => {
+    const method = req.method ?? "GET";
+    const url = new URL(req.url ?? "/", hostOrigin || "http://127.0.0.1");
+
+    if (method !== "GET" && method !== "HEAD") {
+      res.writeHead(405, { "content-type": "text/plain; charset=utf-8" });
+      res.end("method not allowed");
+      return;
+    }
+
+    if (url.pathname === "/") {
+      const bootstrap = {
+        editorId: currentView.id,
+        hostOrigin,
+        viewOrigin,
+        manifest: currentView.manifest,
+      };
+      const html = [
+        "<!doctype html>",
+        '<html lang="ko" class="dark">',
+        "<head>",
+        '<meta charset="utf-8">',
+        `<title>${String(currentView.manifest.title ?? currentView.id)} — moloo dev</title>`,
+        "</head>",
+        "<body>",
+        `<script>window.__MOLOO_DEV_HOST__ = ${JSON.stringify(bootstrap).replace(/</g, "\\u003c")};</script>`,
+        '<script src="/host.js"></script>',
+        "</body>",
+        "</html>",
+      ].join("\n");
+      res.writeHead(200, {
+        "content-type": "text/html; charset=utf-8",
+        "cache-control": "no-store",
+      });
+      res.end(method === "HEAD" ? undefined : html);
+      return;
+    }
+
+    if (url.pathname === "/host.js") {
+      res.writeHead(200, {
+        "content-type": "text/javascript; charset=utf-8",
+        "cache-control": "no-store",
+      });
+      res.end(method === "HEAD" ? undefined : hostScript);
+      return;
+    }
+
+    if (url.pathname === "/manifest.json") {
+      res.writeHead(200, {
+        "content-type": "application/json; charset=utf-8",
+        "cache-control": "no-store",
+      });
+      res.end(method === "HEAD" ? undefined : JSON.stringify(currentView.manifest, null, 2));
+      return;
+    }
+
+    if (url.pathname === "/events") {
+      res.writeHead(200, {
+        "content-type": "text/event-stream; charset=utf-8",
+        "cache-control": "no-store",
+        connection: "keep-alive",
+      });
+      res.write(`event: connected\ndata: ${JSON.stringify({ build: buildCount })}\n\n`);
+      sseClients.add(res);
+      req.on("close", () => {
+        sseClients.delete(res);
+      });
+      return;
+    }
+
+    res.writeHead(404, { "content-type": "text/plain; charset=utf-8" });
+    res.end("not found");
+  });
+
+  const requestedHostPort = options.hostPort ?? 4300;
+  const boundHostPort = await listenOnLoopback(hostServer, requestedHostPort);
+  const requestedViewPort =
+    options.viewPort ?? (requestedHostPort === 0 ? 0 : boundHostPort + 1);
+  let boundViewPort: number;
+  try {
+    boundViewPort = await listenOnLoopback(viewServer, requestedViewPort);
+  } catch (err) {
+    if (options.viewPort === undefined) {
+      boundViewPort = await listenOnLoopback(viewServer, 0);
+    } else {
+      await closeServer(hostServer);
+      throw err;
+    }
+  }
+
+  hostOrigin = `http://127.0.0.1:${String(boundHostPort)}`;
+  viewOrigin = `http://127.0.0.1:${String(boundViewPort)}`;
+
+  function broadcastSse(event: string, payload: unknown): void {
+    const message = `event: ${event}\ndata: ${JSON.stringify(payload)}\n\n`;
+    for (const client of sseClients) {
+      client.write(message);
+    }
+  }
+
+  async function rebuild(): Promise<{ build: number }> {
+    try {
+      const nextView = readPackageEditorView(options.packageRoot);
+      const nextScript = await buildEditorScript(nextView);
+      currentView = nextView;
+      currentEditorScript = nextScript;
+      buildCount += 1;
+      broadcastSse("reload", { build: buildCount, editorId: currentView.id });
+      return { build: buildCount };
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      broadcastSse("build-error", { message });
+      throw err;
+    }
+  }
+
+  const srcDir = join(options.packageRoot, "src");
+  if (options.watch !== false && existsSync(srcDir)) {
+    watcher = watch(srcDir, { recursive: true }, (_event, filename) => {
+      if (filename && String(filename).includes(".view-css-")) return;
+      if (watchTimer !== null) clearTimeout(watchTimer);
+      watchTimer = setTimeout(() => {
+        watchTimer = null;
+        void rebuild().catch(() => {});
+      }, 60);
+    });
+  }
+
+  return {
+    editorId: currentView.id,
+    hostOrigin,
+    viewOrigin,
+    hostPort: boundHostPort,
+    viewPort: boundViewPort,
+    rebuild,
+    async close() {
+      if (watchTimer !== null) {
+        clearTimeout(watchTimer);
+        watchTimer = null;
+      }
+      if (watcher !== null) {
+        watcher.close();
+        watcher = null;
+      }
+      for (const client of sseClients) {
+        client.end();
+      }
+      sseClients.clear();
+      await Promise.all([closeServer(hostServer), closeServer(viewServer)]);
+    },
+  };
+}

package/src/editor-views.ts

@@ -0,0 +1,201 @@
+import { existsSync, mkdirSync, mkdtempSync, readdirSync, readFileSync, realpathSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { dirname, isAbsolute, join, relative, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import esbuild from "esbuild";
+import { build, type Rollup } from "vite";
+import tailwind from "@tailwindcss/vite";
+import { parseEditorId } from "@moloodev/editor-sdk/protocol";
+import { validateEditorManifest } from "@moloodev/editor-sdk/commands/editor-document";
+import { parseNetwork } from "@moloodev/platform/network";
+import { publishBundlePlugin } from "./publish-bundle";
+import { readEditorManifest } from "./read-editor-manifest";
+
+export type EditorView = {
+  id: string;
+  editor: string;
+  packageRoot: string;
+  network: readonly string[];
+};
+
+const defaultFallback = join(dirname(fileURLToPath(import.meta.url)), "view-page.ts");
+
+export function readPackageEditorView(packageRoot: string): EditorView & { manifest: Record<string, unknown> } {
+  const manifestPath = join(packageRoot, "src/manifest.ts");
+  if (!existsSync(manifestPath)) {
+    throw new Error(`Missing editor manifest at ${manifestPath}`);
+  }
+  const manifest = readEditorManifest(manifestPath);
+  validateEditorManifest(manifest);
+  if (typeof manifest.id !== "string") {
+    throw new Error(`Invalid editor manifest id in ${manifestPath}`);
+  }
+  const parsed = parseEditorId(manifest.id, true);
+  if (parsed === undefined) {
+    throw new Error(`Invalid editor id ${manifest.id}`);
+  }
+  const network = parseNetwork("network" in manifest ? manifest.network : undefined);
+  return { id: manifest.id, editor: parsed.editor, packageRoot, network, manifest };
+}
+
+export function findEditorViews(repo: string): EditorView[] {
+  const singleManifest = join(repo, "src/manifest.ts");
+  if (existsSync(singleManifest)) {
+    const view = readPackageEditorView(repo);
+    return [{ id: view.id, editor: view.editor, packageRoot: view.packageRoot, network: view.network }];
+  }
+  const dir = join(repo, "editors");
+  if (!existsSync(dir)) return [];
+  const found: EditorView[] = [];
+  for (const name of readdirSync(dir)) {
+    const packageRoot = join(dir, name);
+    const manifestPath = join(packageRoot, "src/manifest.ts");
+    if (!existsSync(manifestPath)) continue;
+    const manifest: unknown = readEditorManifest(manifestPath);
+    if (!isRecord(manifest) || typeof manifest.id !== "string") continue;
+    const parsed = parseEditorId(manifest.id, true);
+    if (parsed === undefined || parsed.publisher !== "moloo") continue;
+    const network = parseNetwork("network" in manifest ? manifest.network : undefined);
+    if (found.some((entry) => entry.id === manifest.id)) throw new Error(`Duplicate editor ${manifest.id}`);
+    found.push({ id: manifest.id, editor: parsed.editor, packageRoot, network });
+  }
+  return found.sort((left, right) => left.editor.localeCompare(right.editor));
+}
+
+export function resolveViewEntry(packageRoot: string, fallback: string = defaultFallback): string {
+  const manifest: unknown = JSON.parse(readFileSync(join(packageRoot, "package.json"), "utf8"));
+  if (!isRecord(manifest)) throw new Error("Invalid editor package.json");
+  const exports = manifest.exports;
+  if (exports === undefined || typeof exports === "string") return fallback;
+  if (!isRecord(exports)) throw new Error("Invalid editor exports");
+  const target = exports["./view"];
+  if (target === undefined) return fallback;
+  if (
+    typeof target !== "string" ||
+    !target.startsWith("./") ||
+    target.includes("\\") ||
+    target.split("/").includes("..") ||
+    isAbsolute(target)
+  ) {
+    throw new Error("Editor ./view must be a string path inside its package");
+  }
+  const root = realpathSync(packageRoot);
+  const entry = realpathSync(resolve(root, target));
+  const fromRoot = relative(root, entry);
+  if (fromRoot.startsWith("..") || isAbsolute(fromRoot)) throw new Error("Editor ./view escapes its package");
+  return entry;
+}
+
+export async function buildEditorView(entry: string, output: string, metafile: string, styles?: string): Promise<void> {
+  const css = new Set<string>();
+  const view = await esbuild.build({
+    entryPoints: [entry],
+    bundle: true,
+    format: "iife",
+    platform: "browser",
+    jsx: "automatic",
+    write: false,
+    metafile: true,
+    logLevel: "error",
+    legalComments: "none",
+    define: productionDefine(),
+    alias: { "lib0/logging": join(dirname(fileURLToPath(import.meta.url)), "yjs-log.ts") },
+    plugins: [
+      publishBundlePlugin(),
+      {
+        name: "collect-view-css",
+        setup(builder) {
+          builder.onLoad({ filter: /\.css$/ }, (args) => {
+            css.add(args.path);
+            return { contents: "", loader: "js" };
+          });
+        },
+      },
+    ],
+  });
+  const file = view.outputFiles?.[0];
+  if (file === undefined) throw new Error("editor.js bundle was not produced.");
+  if (view.metafile === undefined) throw new Error("editor.js metafile was not produced.");
+  mkdirSync(join(output, ".."), { recursive: true });
+  const header = styles === undefined ? "" : await styleHeader(styles, [...css]);
+  writeFileSync(output, header + file.text);
+  writeFileSync(metafile, JSON.stringify(view.metafile));
+}
+
+export async function buildEditorScript(editor: EditorView, fallback: string = defaultFallback): Promise<string> {
+  const directory = mkdtempSync(join(tmpdir(), "moloo-editor-"));
+  try {
+    const output = join(directory, "editor.js");
+    const packageStyles = join(editor.packageRoot, "src/styles.css");
+    const styles = existsSync(packageStyles) ? packageStyles : undefined;
+    await buildEditorView(
+      resolveViewEntry(editor.packageRoot, fallback),
+      output,
+      join(directory, "meta.json"),
+      styles,
+    );
+    return readFileSync(output, "utf8");
+  } finally {
+    rmSync(directory, { recursive: true, force: true });
+  }
+}
+
+export async function buildEditorPackage(
+  packageRoot: string,
+  outDir: string = join(packageRoot, "dist"),
+): Promise<{ id: string; scriptPath: string; manifestPath: string; metafilePath: string; script: string; manifest: Record<string, unknown> }> {
+  const view = readPackageEditorView(packageRoot);
+  mkdirSync(outDir, { recursive: true });
+  const scriptPath = join(outDir, "editor.js");
+  const manifestPath = join(outDir, "manifest.json");
+  const metafilePath = join(outDir, "meta.json");
+  const styles = join(packageRoot, "src/styles.css");
+  await buildEditorView(
+    resolveViewEntry(packageRoot, defaultFallback),
+    scriptPath,
+    metafilePath,
+    existsSync(styles) ? styles : undefined,
+  );
+  writeFileSync(manifestPath, JSON.stringify(view.manifest, null, 2) + "\n");
+  const script = readFileSync(scriptPath, "utf8");
+  return { id: view.id, scriptPath, manifestPath, metafilePath, script, manifest: view.manifest };
+}
+
+export async function styleHeader(styles: string, collected: string[], sources: readonly string[] = []): Promise<string> {
+  const directory = mkdtempSync(join(dirname(styles), ".view-css-"));
+  try {
+    const entry = join(directory, "input.css");
+    writeFileSync(
+      entry,
+      [
+        ...[styles, ...collected].map((file) => `@import ${JSON.stringify(file)};`),
+        ...sources.map((dir) => `@source ${JSON.stringify(dir)};`),
+      ].join("\n"),
+    );
+    const compiled = await build({
+      configFile: false,
+      root: directory,
+      plugins: [tailwind()],
+      logLevel: "error",
+      build: { write: false, cssMinify: false, rollupOptions: { input: entry } },
+    });
+    const results = Array.isArray(compiled) ? compiled : [compiled];
+    const text = results
+      .flatMap((result) => ("output" in result ? result.output : []))
+      .filter((asset): asset is Rollup.OutputAsset => asset.type === "asset" && asset.fileName.endsWith(".css"))
+      .map((asset) => (typeof asset.source === "string" ? asset.source : Buffer.from(asset.source).toString("utf8")))
+      .join("\n");
+    if (!text) throw new Error("view CSS was not produced.");
+    return `(() => { const style = document.createElement("style"); style.textContent = ${JSON.stringify(text)}; document.head.append(style); })();\n`;
+  } finally {
+    rmSync(directory, { recursive: true, force: true });
+  }
+}
+
+function productionDefine(): Record<string, string> {
+  return { "process.env.NODE_ENV": '"production"' };
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}

package/src/index.ts

@@ -0,0 +1,25 @@
+export {
+  buildEditorPackage,
+  buildEditorScript,
+  buildEditorView,
+  findEditorViews,
+  readPackageEditorView,
+  resolveViewEntry,
+  type EditorView,
+} from "./editor-views";
+export {
+  startEditorDevServer,
+  type EditorDevServer,
+  type StartEditorDevServerOptions,
+} from "./dev-server";
+export { publishBundlePlugin } from "./publish-bundle";
+export {
+  publishEditor,
+  publishEditorPackage,
+  publishEndpoint,
+  reservedEditorId,
+  uploadEndpoint,
+} from "./publish";
+export { readEditorManifest } from "./read-editor-manifest";
+export { rewriteThreeLoaders } from "./three-local-loaders";
+export { runCli } from "./cli";