@hajimism/dek 0.2.0 → 0.2.2

package/src/runtime/annotate.ts

@@ -0,0 +1,19 @@
+/// <reference lib="dom" />
+// Annotate mode's entry: compiled apart from the player and embedded only on the dev server's
+// pages for the speaker, so a built file carries none of it.
+
+import { PAGE_ID, readPageConfig } from "../core/page.ts";
+import type { PresenterSlide } from "../core/presenter-state.ts";
+import { createAnnotateView } from "./annotate-view.ts";
+import { deckUrl, liveTokenQuery } from "./routes.ts";
+
+const dataEl = document.getElementById(PAGE_ID.data);
+if (dataEl?.textContent) {
+  const page = readPageConfig(document.body);
+  createAnnotateView({
+    deck: page.deck,
+    slides: JSON.parse(dataEl.textContent) as PresenterSlide[],
+    url: `${deckUrl(location.pathname, { kind: "annotations" })}${liveTokenQuery(page.liveToken)}`,
+    fetch: (input, init) => fetch(input, init),
+  });
+}

package/src/runtime/browser.ts

@@ -1,7 +1,7 @@
 /// <reference lib="dom" />
 
 import { isLiveEvent } from "../core/live-protocol.ts";
-import { PAGE_ID, readPageConfig } from "../core/page.ts";
+import { ANNOTATIONS_CHANGED, PAGE_ID, readPageConfig } from "../core/page.ts";
 import { deckStops, moveTarget, positionsEqual } from "../core/position.ts";
 import type { PresenterSlide } from "../core/presenter-state.ts";
 import type { Position } from "../core/step.ts";
@@ -185,6 +185,10 @@ if (dataEl?.textContent) {
       }
       return;
     }
+    if (raw.type === "annotations") {
+      document.dispatchEvent(new Event(ANNOTATIONS_CHANGED));
+      return;
+    }
     const event = await hydrateLiveEvent(raw, location.pathname);
     if (!event) {
       location.reload();

package/src/runtime/live.ts

@@ -62,6 +62,7 @@ export function applyLiveEvent(event: HydratedLiveEvent, host: LiveHost): { relo
       host.setDiagnostics(formatLiveDiagnostics(event.diagnostics));
       return { reload: false };
     case "timeline":
+    case "annotations":
       return { reload: false };
   }
 }

package/src/runtime/player.ts

@@ -2,27 +2,35 @@ import { join } from "node:path";
 
 export { liveReloadScript } from "./live-reload.ts";
 
-let compiled: Promise<string> | undefined;
+let player: Promise<string> | undefined;
+let annotate: Promise<string> | undefined;
 
+/** The player every deck page runs. */
 export function playerScript(): Promise<string> {
-  compiled ??= compilePlayer();
-  return compiled;
+  player ??= compile("browser.ts", "player");
+  return player;
 }
 
-async function compilePlayer(): Promise<string> {
+/** Annotate mode, which only the dev server's pages for the speaker run, after the player. */
+export function annotateScript(): Promise<string> {
+  annotate ??= compile("annotate.ts", "annotate mode");
+  return annotate;
+}
+
+async function compile(entry: string, what: string): Promise<string> {
   const result = await Bun.build({
-    entrypoints: [join(import.meta.dir, "browser.ts")],
+    entrypoints: [join(import.meta.dir, entry)],
     target: "browser",
     format: "iife",
     minify: true,
   });
   if (!result.success) {
     const details = result.logs.map((log) => String(log)).join("\n");
-    throw new Error(`failed to compile player\n${details}`);
+    throw new Error(`failed to compile ${what}\n${details}`);
   }
   const output = result.outputs[0];
   if (!output) {
-    throw new Error("failed to compile player: no output");
+    throw new Error(`failed to compile ${what}: no output`);
   }
   return output.text();
 }

package/src/runtime/routes.ts

@@ -20,6 +20,8 @@ export type DeckRoute =
   | { kind: "goto" }
   /** The beats the presenter marked to rewrite: listed, and one marked or unmarked. */
   | { kind: "marks" }
+  /** The notes annotate mode keeps on elements of the slides: listed, and one added or changed. */
+  | { kind: "annotations" }
   /** A file under the deck's `assets/`, decoded. */
   | { kind: "asset"; path: string };
 
@@ -34,6 +36,7 @@ const FIXED: Record<Fixed, string> = {
   current: "/current",
   goto: "/goto",
   marks: "/marks",
+  annotations: "/annotations",
 };
 
 /** The path of `route` below its deck's prefix. */

package/src/server/auth.ts

@@ -86,7 +86,7 @@ export type Exposure = "audience" | "presenter";
 
 /**
  * What each dev server route reveals. The script, its notes, the voice read from it, moving the
- * deck, and the marks left on its beats belong to the presenter. The server routes only by these names, so a new route does
+ * deck, the marks left on its beats, and the annotations on its slides belong to the presenter. The server routes only by these names, so a new route does
  * not compile until it is placed here.
  */
 export const ROUTE_EXPOSURE = {
@@ -101,6 +101,7 @@ export const ROUTE_EXPOSURE = {
   voice: "presenter",
   control: "presenter",
   marks: "presenter",
+  annotations: "presenter",
   missing: "audience",
 } as const satisfies Record<string, Exposure>;
 
@@ -117,6 +118,7 @@ export const EVENT_EXPOSURE: Record<LiveEventType, Exposure> = {
   "reload-script": "audience",
   diagnostics: "presenter",
   timeline: "presenter",
+  annotations: "presenter",
 };
 
 /** True when a request cleared for `seen` may read what `exposure` names. */

package/src/server/dev.ts

@@ -2,7 +2,7 @@ import { join } from "node:path";
 import { DekError } from "../core/error.ts";
 import type { PlaywrightRunner } from "../core/playwright.ts";
 import { locateDeck, type Project, resolveProject } from "../core/resolve.ts";
-import { liveReloadScript, playerScript } from "../runtime/player.ts";
+import { annotateScript, liveReloadScript, playerScript } from "../runtime/player.ts";
 import {
   clearance,
   mayRead,
@@ -71,6 +71,7 @@ export async function startDevServer(options: DevServerOptions): Promise<DevServ
   const embed = {
     playerScript: await playerScript(),
     liveReloadScript: liveReloadScript(),
+    annotateScript: await annotateScript(),
   };
 
   const pages = createDevPages({

package/src/server/pages.ts

@@ -13,7 +13,7 @@ export type DevPages = {
 
 /** The pages a dev server renders, each kept until `clear`. */
 export function createDevPages(options: {
-  embed: { playerScript: string; liveReloadScript: string };
+  embed: { playerScript: string; liveReloadScript: string; annotateScript: string };
   remote: boolean;
   /** Embedded on the presenter page, so its stream and moves are let through. */
   password: string | undefined;
@@ -44,6 +44,7 @@ export function createDevPages(options: {
                 mode,
                 includeNotes: mode === "presenter" || !remote,
                 liveReloadScript: embed.liveReloadScript,
+                annotateScript: embed.annotateScript,
                 ...(mode === "presenter" && password ? { liveToken: password } : {}),
               },
             }),

package/src/server/routes.ts

@@ -1,5 +1,7 @@
 import { existsSync } from "node:fs";
-import { join } from "node:path";
+import { join, relative } from "node:path";
+import type { AnnotationRow } from "../core/annotation-rows.ts";
+import { AnnotationOp, applyAnnotationOp, listAnnotations } from "../core/annotations.ts";
 import { fileInside, readTheme } from "../core/assets.ts";
 import { DekError, errorFields } from "../core/error.ts";
 import { escapeAttr, escapeHtml } from "../core/escape.ts";
@@ -75,10 +77,16 @@ export function routeRequest(req: Request, ctx: RouteContext): Routed {
           // A slide the script does not list has no place in the deck, so no page shows it.
           const sections = deck?.deck.sections ?? [];
           const index = sections.findIndex((section) => section.slug === route.slug);
-          const html = deck && index >= 0 && deckSlides(deck).written(route.slug);
-          return html
+          const slides = deck && index >= 0 ? deckSlides(deck) : undefined;
+          const html = slides?.written(route.slug);
+          const source = slides?.source(route.slug);
+          return html && source
             ? htmlResponse(
-                stampSlide(html, { slug: route.slug, place: slidePlace(sections, index) }),
+                stampSlide(html, {
+                  slug: route.slug,
+                  place: slidePlace(sections, index),
+                  source,
+                }),
               )
             : notFound();
         },
@@ -110,6 +118,16 @@ export function routeRequest(req: Request, ctx: RouteContext): Routed {
         respond: () =>
           deck ? marksResponse(req, ctx.project().root, deck) : jsonNotFound(deckName),
       };
+    case "annotations":
+      return {
+        route: "annotations",
+        respond: () =>
+          deck
+            ? annotationsResponse(req, ctx.project().root, deck, () =>
+                ctx.hub.emit({ type: "annotations", deck: deckName }),
+              )
+            : jsonNotFound(deckName),
+      };
     case "asset": {
       const asset = dir && safeDeckAsset(dir, route.path);
       return asset
@@ -211,6 +229,61 @@ async function marksResponse(req: Request, root: string, deck: ProjectDeck): Pro
   }
 }
 
+/**
+ * The deck's annotations: GET lists them as the files have them now, and a POST of an operation
+ * adds, edits, removes, clears, or puts back. Every change is told to the deck's other pages,
+ * so tabs and devices annotating one deck show the same notes. One that names nothing on the
+ * slide as it is now, sent from a page an edit left behind, is refused.
+ */
+async function annotationsResponse(
+  req: Request,
+  root: string,
+  deck: ProjectDeck,
+  changed: () => void,
+): Promise<Response> {
+  const rows = (annotations: AnnotationRow[]) =>
+    annotations.map((row) => ({
+      ...row,
+      targets: row.targets.map((target) => ({ ...target, path: relative(root, target.path) })),
+      changed: row.changed.map((path) => relative(root, path)),
+    }));
+  try {
+    if (req.method === "GET") {
+      return jsonResponse({ ok: true, annotations: rows(listAnnotations(root, deck)) });
+    }
+    if (req.method !== "POST") {
+      return new Response("Method not allowed", { status: 405 });
+    }
+    let body: unknown;
+    try {
+      body = await req.json();
+    } catch {
+      body = undefined;
+    }
+    const op = AnnotationOp.safeParse(body);
+    if (!op.success) {
+      return jsonResponse(
+        {
+          ok: false,
+          error: {
+            message:
+              'the request names no operation: send {"op": "add" | "edit" | "remove" | "clear" | "restore", …}',
+          },
+        },
+        400,
+      );
+    }
+    const done = applyAnnotationOp(root, deck, op.data);
+    changed();
+    return jsonResponse({ ok: true, ...done, annotations: rows(done.annotations) });
+  } catch (error) {
+    if (!(error instanceof DekError)) {
+      throw error;
+    }
+    return jsonResponse({ ok: false, error: errorFields(error) }, 409);
+  }
+}
+
 function jsonNotFound(deckName: string): Response {
   return jsonResponse({ ok: false, error: { message: `deck "${deckName}" not found` } }, 404);
 }