@hajimism/dek 0.1.0 → 0.2.1

package/src/runtime/annotate.ts

@@ -0,0 +1,15 @@
+/// <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";
+
+const dataEl = document.getElementById(PAGE_ID.data);
+if (dataEl?.textContent) {
+  createAnnotateView({
+    deck: readPageConfig(document.body).deck,
+    slides: JSON.parse(dataEl.textContent) as PresenterSlide[],
+  });
+}

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/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

@@ -75,10 +75,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();
         },