hono-decks 1.2.4 → 1.3.0

package/README.ja.md

@@ -294,7 +294,7 @@ export default defineConfig({
 });
 ```
 
-pluginはVite起動前にcompileし、deck rootと`hono-decks.config.ts`をVite watcherへ登録します。再compileに成功するとfull reloadを通知するため、手動更新は不要です。どちらの構成でも通常の`bun run dev`だけでauthoringできます。
+pluginはVite起動前にcompileし、deck rootと`hono-decks.config.ts`をVite watcherへ登録します。再compileに成功すると、安全にislandを維持できる場合はスライドの内容だけを更新し、現在のスライド・ステップとislandの状態を保ちます。islandのコード、props、Markdownのコンテキスト、構造などが変わり、安全に引き継げない場合は表示ページを再読み込みし、スライドとステップを復元します。どちらの構成でも通常の`bun run dev`だけでauthoringできます。
 
 ## Runtime configuration
 

package/README.md

@@ -295,7 +295,7 @@ export default defineConfig({
 });
 ~~~
 
-The plugin compiles before Vite starts and adds the deck root and <code>hono-decks.config.ts</code> to the Vite watcher. After a successful recompile, it requests a full browser reload. In both setups, the application's normal <code>dev</code> command is enough for authoring.
+The plugin compiles before Vite starts and adds the deck root and <code>hono-decks.config.ts</code> to the Vite watcher. After a successful recompile, open presentation pages update their deck content without reloading when it is safe to retain the existing islands. The current slide, step, and island state are preserved. If the update cannot safely retain islands (for example, their code, props, Markdown context, or structure changed), the presentation page reloads instead and restores the slide and step. In both setups, the application's normal <code>dev</code> command is enough for authoring.
 
 ## Runtime configuration
 

package/dist/advanced.js

@@ -804,19 +804,94 @@ function escapeHtml$7(value) {
 function renderLiveReloadScript(eventsPath, nonce) {
 	return `<script${documentNonceAttribute(nonce)}>
 (() => {
-  const eventsUrl = ${JSON.stringify(eventsPath)};
-  const events = new EventSource(eventsUrl);
-  events.addEventListener("deck:updated", () => location.reload());
+  const events = new EventSource(${JSON.stringify(eventsPath)});
+  let running = false;
+  let pending = false;
+  const selector = "[data-hono-decks-island],[data-hono-md-island]";
+  const clientSelector = "script[data-hono-decks-client-entry]";
+  const clientText = async (url) => {
+    if (!url) return "";
+    const response = await fetch(url, { cache: "no-store" });
+    if (!response.ok) throw new Error("Client entry fetch failed");
+    return response.text();
+  };
+  const domReady = document.readyState === "loading"
+    ? new Promise((resolve) => document.addEventListener("DOMContentLoaded", resolve, { once: true }))
+    : Promise.resolve();
+  let clientSnapshot = domReady.then(() => clientText(document.querySelector(clientSelector)?.src)).catch(() => null);
+
+  function signature(element) {
+    const attributes = element.hasAttribute("data-hono-md-island")
+      ? ["data-hono-md-island", "data-hono-md-hydrate", "data-hono-md-props"]
+      : ["data-hono-decks-island", "data-hono-decks-props"];
+    return JSON.stringify([attributes.map((name) => element.getAttribute(name)),
+      element.closest("[data-hono-md-context]")?.getAttribute("data-hono-md-context") ?? null]);
+  }
+
+  async function update() {
+    const response = await fetch(location.href, { cache: "no-store" });
+    if (!response.ok || !response.headers.get("content-type")?.includes("text/html")) throw new Error("Deck fetch failed");
+    const next = new DOMParser().parseFromString(await response.text(), "text/html");
+    const currentDeck = document.querySelector("[data-hono-decks-deck]");
+    const nextDeck = next.querySelector("[data-hono-decks-deck]");
+    const style = document.querySelector("[data-hono-decks-presentation-style]");
+    const nextStyle = next.querySelector("[data-hono-decks-presentation-style]");
+    const runtime = window.__honoDecksPresentationRuntime;
+    if (!currentDeck || !nextDeck || !style || !nextStyle || !runtime?.refresh) throw new Error("Invalid deck document");
+    const oldSlides = Array.from(currentDeck.querySelectorAll(".slide"));
+    const newSlides = Array.from(nextDeck.querySelectorAll(".slide"));
+    if (!newSlides.length) throw new Error("Empty deck");
+    // Scripts parsed from fetched HTML are inert; reload so their behavior is not lost.
+    if (currentDeck.querySelector("script") || nextDeck.querySelector("script")) throw new Error("Deck contains scripts");
+    const oldIslands = oldSlides.flatMap((slide) => Array.from(slide.querySelectorAll(selector)));
+    const nextScript = next.querySelector(clientSelector);
+    const nextClient = await clientText(nextScript?.getAttribute("src"));
+    const previousClient = await clientSnapshot;
+    if (previousClient === null) throw new Error("Initial client entry fetch failed");
+    // Changed client code cannot safely replace a running component while retaining its state.
+    if (oldIslands.length && previousClient !== nextClient) throw new Error("Client code changed");
+    const pairs = [];
+    if (oldIslands.length && oldSlides.length !== newSlides.length) throw new Error("Slide structure changed");
+    for (let i = 0; i < oldSlides.length && i < newSlides.length; i++) {
+      const before = Array.from(oldSlides[i].querySelectorAll(selector));
+      const after = Array.from(newSlides[i].querySelectorAll(selector));
+      if (before.length !== after.length) throw new Error("Island structure changed");
+      for (let j = 0; j < before.length; j++) {
+        if (signature(before[j]) !== signature(after[j])) throw new Error("Island properties changed");
+        // Deferred Markdown islands observe their original slide. Reload rather than strand the observer.
+        if (before[j].hasAttribute("data-hono-md-island") && !before[j].hasAttribute("data-hono-md-mounted"))
+          throw new Error("Island is pending hydration");
+        pairs.push([before[j], after[j]]);
+      }
+    }
+    if (!oldIslands.length && nextDeck.querySelector(selector)) throw new Error("New islands require initialization");
+    for (const [oldIsland, newIsland] of pairs) newIsland.replaceWith(oldIsland);
+    currentDeck.replaceChildren(...nextDeck.childNodes);
+    style.textContent = nextStyle.textContent;
+    document.title = next.title;
+    clientSnapshot = Promise.resolve(nextClient);
+    runtime.refresh();
+  }
+
+  async function onUpdate() {
+    if (running) { pending = true; return; }
+    running = true;
+    try {
+      do { pending = false; await update(); } while (pending);
+    } catch (error) { console.warn("[hono-decks] Live update failed; reloading", error); location.reload(); }
+    finally { running = false; }
+  }
+  events.addEventListener("deck:updated", onUpdate);
 })();
 <\/script>`;
 }
 function renderClientEntryScript(clientEntry, nonce) {
-	return `<script type="module" src="${escapeHtml$6(clientEntry)}"${documentNonceAttribute(nonce)}><\/script>`;
+	return `<script data-hono-decks-client-entry type="module" src="${escapeHtml$6(clientEntry)}"${documentNonceAttribute(nonce)}><\/script>`;
 }
 function renderPresentationScript(nonce) {
 	return `<script${documentNonceAttribute(nonce)}>
 (() => {
-  const slides = Array.from(document.querySelectorAll(".slide"));
+  let slides = Array.from(document.querySelectorAll(".slide"));
   const stage = document.querySelector("[data-hono-decks-stage]");
   const deck = document.querySelector("[data-hono-decks-deck]");
   const DESIGN_WIDTH = ${PRESENTATION_DESIGN_WIDTH};
@@ -1090,6 +1165,7 @@ function renderPresentationScript(nonce) {
     updateFires(nextStepIndex);
     publishState();
     requestAnimationFrame(() => {
+      if (token !== transitionToken) return;
       setSlideState(outgoing, "leaving", direction, transition, timing);
       setSlideState(incoming, "active", direction, transition, timing);
       waitForSlideTransition(outgoing, incoming, direction, token);
@@ -1196,13 +1272,38 @@ function renderPresentationScript(nonce) {
     await document.documentElement.requestFullscreen?.();
   }
 
-  slides.forEach((slide, slideIndex) => {
-    slide.addEventListener("click", () => {
-      if (!document.body.hasAttribute("data-overview-mode")) return;
-      document.body.removeAttribute("data-overview-mode");
-      show(slideIndex);
+  function bindSlideClicks() {
+    slides.forEach((slide, slideIndex) => {
+      slide.addEventListener("click", () => {
+        if (!document.body.hasAttribute("data-overview-mode")) return;
+        document.body.removeAttribute("data-overview-mode");
+        show(slideIndex);
+      });
     });
-  });
+  }
+
+  function refresh() {
+    transitionToken += 1;
+    isTransitioning = false;
+    pendingNavigation = null;
+    slides = Array.from(deck?.querySelectorAll(".slide") ?? []);
+    bindSlideClicks();
+    if (document.body.hasAttribute("data-overview-mode")) {
+      slides.forEach((slide) => { slide.hidden = false; slide.setAttribute("data-slide-state", "active"); });
+      setFiresVisible(Array.from(deck?.querySelectorAll("[data-hono-decks-fire]") ?? []), true);
+      index = Math.max(0, Math.min(slides.length - 1, index));
+      stepCount = fireCountForSlide(index);
+      stepIndex = Math.max(0, Math.min(stepCount, stepIndex));
+      publishState();
+    } else {
+      applyInstantSlideChange(index, stepIndex);
+    }
+    document.querySelectorAll(".speaker-notes").forEach((note) => {
+      note.hidden = !document.body.hasAttribute("data-presenter-mode");
+    });
+    fitDeck();
+  }
+  bindSlideClicks();
 
   document.addEventListener("keydown", (event) => {
     if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.altKey) return;
@@ -1225,7 +1326,7 @@ function renderPresentationScript(nonce) {
     handleCommand(message.action, message.index, message.stepIndex);
   });
 
-  window.__honoDecksPresentationRuntime = { command: handleCommand };
+  window.__honoDecksPresentationRuntime = { command: handleCommand, refresh };
 
   window.addEventListener("resize", fitDeck);
   if (typeof ResizeObserver !== "undefined" && stage instanceof HTMLElement) {
@@ -1261,7 +1362,7 @@ function renderCompiledDeckPage(input) {
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>${escapeHtml$5(presentationPageTitle(deck))}</title>
-  <style${nonceAttribute}>${basePresentationStyle()}${deck.themeStyle ?? ""}${input.style ?? ""}</style>
+  <style data-hono-decks-presentation-style${nonceAttribute}>${basePresentationStyle()}${deck.themeStyle ?? ""}${input.style ?? ""}</style>
   ${document.head}
 </head>
 <body${bodyAttrs.length ? ` ${bodyAttrs.join(" ")}` : ""}>
@@ -1292,7 +1393,7 @@ async function renderCompiledDeckPageAsync(input) {
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>${escapeHtml$5(presentationPageTitle(deck))}</title>
-  <style${nonceAttribute}>${basePresentationStyle()}${deck.themeStyle ?? ""}${input.style ?? ""}</style>
+  <style data-hono-decks-presentation-style${nonceAttribute}>${basePresentationStyle()}${deck.themeStyle ?? ""}${input.style ?? ""}</style>
   ${document.head}
 </head>
 <body${bodyAttrs.length ? ` ${bodyAttrs.join(" ")}` : ""}>

package/dist/node.js

@@ -3523,19 +3523,94 @@ function escapeHtml$8(value) {
 function renderLiveReloadScript(eventsPath, nonce) {
 	return `<script${documentNonceAttribute(nonce)}>
 (() => {
-  const eventsUrl = ${JSON.stringify(eventsPath)};
-  const events = new EventSource(eventsUrl);
-  events.addEventListener("deck:updated", () => location.reload());
+  const events = new EventSource(${JSON.stringify(eventsPath)});
+  let running = false;
+  let pending = false;
+  const selector = "[data-hono-decks-island],[data-hono-md-island]";
+  const clientSelector = "script[data-hono-decks-client-entry]";
+  const clientText = async (url) => {
+    if (!url) return "";
+    const response = await fetch(url, { cache: "no-store" });
+    if (!response.ok) throw new Error("Client entry fetch failed");
+    return response.text();
+  };
+  const domReady = document.readyState === "loading"
+    ? new Promise((resolve) => document.addEventListener("DOMContentLoaded", resolve, { once: true }))
+    : Promise.resolve();
+  let clientSnapshot = domReady.then(() => clientText(document.querySelector(clientSelector)?.src)).catch(() => null);
+
+  function signature(element) {
+    const attributes = element.hasAttribute("data-hono-md-island")
+      ? ["data-hono-md-island", "data-hono-md-hydrate", "data-hono-md-props"]
+      : ["data-hono-decks-island", "data-hono-decks-props"];
+    return JSON.stringify([attributes.map((name) => element.getAttribute(name)),
+      element.closest("[data-hono-md-context]")?.getAttribute("data-hono-md-context") ?? null]);
+  }
+
+  async function update() {
+    const response = await fetch(location.href, { cache: "no-store" });
+    if (!response.ok || !response.headers.get("content-type")?.includes("text/html")) throw new Error("Deck fetch failed");
+    const next = new DOMParser().parseFromString(await response.text(), "text/html");
+    const currentDeck = document.querySelector("[data-hono-decks-deck]");
+    const nextDeck = next.querySelector("[data-hono-decks-deck]");
+    const style = document.querySelector("[data-hono-decks-presentation-style]");
+    const nextStyle = next.querySelector("[data-hono-decks-presentation-style]");
+    const runtime = window.__honoDecksPresentationRuntime;
+    if (!currentDeck || !nextDeck || !style || !nextStyle || !runtime?.refresh) throw new Error("Invalid deck document");
+    const oldSlides = Array.from(currentDeck.querySelectorAll(".slide"));
+    const newSlides = Array.from(nextDeck.querySelectorAll(".slide"));
+    if (!newSlides.length) throw new Error("Empty deck");
+    // Scripts parsed from fetched HTML are inert; reload so their behavior is not lost.
+    if (currentDeck.querySelector("script") || nextDeck.querySelector("script")) throw new Error("Deck contains scripts");
+    const oldIslands = oldSlides.flatMap((slide) => Array.from(slide.querySelectorAll(selector)));
+    const nextScript = next.querySelector(clientSelector);
+    const nextClient = await clientText(nextScript?.getAttribute("src"));
+    const previousClient = await clientSnapshot;
+    if (previousClient === null) throw new Error("Initial client entry fetch failed");
+    // Changed client code cannot safely replace a running component while retaining its state.
+    if (oldIslands.length && previousClient !== nextClient) throw new Error("Client code changed");
+    const pairs = [];
+    if (oldIslands.length && oldSlides.length !== newSlides.length) throw new Error("Slide structure changed");
+    for (let i = 0; i < oldSlides.length && i < newSlides.length; i++) {
+      const before = Array.from(oldSlides[i].querySelectorAll(selector));
+      const after = Array.from(newSlides[i].querySelectorAll(selector));
+      if (before.length !== after.length) throw new Error("Island structure changed");
+      for (let j = 0; j < before.length; j++) {
+        if (signature(before[j]) !== signature(after[j])) throw new Error("Island properties changed");
+        // Deferred Markdown islands observe their original slide. Reload rather than strand the observer.
+        if (before[j].hasAttribute("data-hono-md-island") && !before[j].hasAttribute("data-hono-md-mounted"))
+          throw new Error("Island is pending hydration");
+        pairs.push([before[j], after[j]]);
+      }
+    }
+    if (!oldIslands.length && nextDeck.querySelector(selector)) throw new Error("New islands require initialization");
+    for (const [oldIsland, newIsland] of pairs) newIsland.replaceWith(oldIsland);
+    currentDeck.replaceChildren(...nextDeck.childNodes);
+    style.textContent = nextStyle.textContent;
+    document.title = next.title;
+    clientSnapshot = Promise.resolve(nextClient);
+    runtime.refresh();
+  }
+
+  async function onUpdate() {
+    if (running) { pending = true; return; }
+    running = true;
+    try {
+      do { pending = false; await update(); } while (pending);
+    } catch (error) { console.warn("[hono-decks] Live update failed; reloading", error); location.reload(); }
+    finally { running = false; }
+  }
+  events.addEventListener("deck:updated", onUpdate);
 })();
 <\/script>`;
 }
 function renderClientEntryScript(clientEntry, nonce) {
-	return `<script type="module" src="${escapeHtml$7(clientEntry)}"${documentNonceAttribute(nonce)}><\/script>`;
+	return `<script data-hono-decks-client-entry type="module" src="${escapeHtml$7(clientEntry)}"${documentNonceAttribute(nonce)}><\/script>`;
 }
 function renderPresentationScript(nonce) {
 	return `<script${documentNonceAttribute(nonce)}>
 (() => {
-  const slides = Array.from(document.querySelectorAll(".slide"));
+  let slides = Array.from(document.querySelectorAll(".slide"));
   const stage = document.querySelector("[data-hono-decks-stage]");
   const deck = document.querySelector("[data-hono-decks-deck]");
   const DESIGN_WIDTH = ${PRESENTATION_DESIGN_WIDTH};
@@ -3809,6 +3884,7 @@ function renderPresentationScript(nonce) {
     updateFires(nextStepIndex);
     publishState();
     requestAnimationFrame(() => {
+      if (token !== transitionToken) return;
       setSlideState(outgoing, "leaving", direction, transition, timing);
       setSlideState(incoming, "active", direction, transition, timing);
       waitForSlideTransition(outgoing, incoming, direction, token);
@@ -3915,13 +3991,38 @@ function renderPresentationScript(nonce) {
     await document.documentElement.requestFullscreen?.();
   }
 
-  slides.forEach((slide, slideIndex) => {
-    slide.addEventListener("click", () => {
-      if (!document.body.hasAttribute("data-overview-mode")) return;
-      document.body.removeAttribute("data-overview-mode");
-      show(slideIndex);
+  function bindSlideClicks() {
+    slides.forEach((slide, slideIndex) => {
+      slide.addEventListener("click", () => {
+        if (!document.body.hasAttribute("data-overview-mode")) return;
+        document.body.removeAttribute("data-overview-mode");
+        show(slideIndex);
+      });
     });
-  });
+  }
+
+  function refresh() {
+    transitionToken += 1;
+    isTransitioning = false;
+    pendingNavigation = null;
+    slides = Array.from(deck?.querySelectorAll(".slide") ?? []);
+    bindSlideClicks();
+    if (document.body.hasAttribute("data-overview-mode")) {
+      slides.forEach((slide) => { slide.hidden = false; slide.setAttribute("data-slide-state", "active"); });
+      setFiresVisible(Array.from(deck?.querySelectorAll("[data-hono-decks-fire]") ?? []), true);
+      index = Math.max(0, Math.min(slides.length - 1, index));
+      stepCount = fireCountForSlide(index);
+      stepIndex = Math.max(0, Math.min(stepCount, stepIndex));
+      publishState();
+    } else {
+      applyInstantSlideChange(index, stepIndex);
+    }
+    document.querySelectorAll(".speaker-notes").forEach((note) => {
+      note.hidden = !document.body.hasAttribute("data-presenter-mode");
+    });
+    fitDeck();
+  }
+  bindSlideClicks();
 
   document.addEventListener("keydown", (event) => {
     if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.altKey) return;
@@ -3944,7 +4045,7 @@ function renderPresentationScript(nonce) {
     handleCommand(message.action, message.index, message.stepIndex);
   });
 
-  window.__honoDecksPresentationRuntime = { command: handleCommand };
+  window.__honoDecksPresentationRuntime = { command: handleCommand, refresh };
 
   window.addEventListener("resize", fitDeck);
   if (typeof ResizeObserver !== "undefined" && stage instanceof HTMLElement) {
@@ -3980,7 +4081,7 @@ async function renderCompiledDeckPageAsync(input) {
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>${escapeHtml$6(presentationPageTitle(deck))}</title>
-  <style${nonceAttribute}>${basePresentationStyle()}${deck.themeStyle ?? ""}${input.style ?? ""}</style>
+  <style data-hono-decks-presentation-style${nonceAttribute}>${basePresentationStyle()}${deck.themeStyle ?? ""}${input.style ?? ""}</style>
   ${document.head}
 </head>
 <body${bodyAttrs.length ? ` ${bodyAttrs.join(" ")}` : ""}>

package/dist/vite.js

@@ -2307,6 +2307,8 @@ function honoDecks(options = {}) {
 	let mountChanged = false;
 	let modules = /* @__PURE__ */ new Map();
 	let routerModulePath = "";
+	const eventClients = /* @__PURE__ */ new Set();
+	let eventsPath = "/@hono-decks/events";
 	const syncWatchedPaths = async () => {
 		if (!server) return;
 		const next = /* @__PURE__ */ new Set([
@@ -2374,7 +2376,7 @@ function honoDecks(options = {}) {
 					environment.moduleGraph.invalidateAll();
 					if (environment.name !== "client") environment.hot.send({ type: "full-reload" });
 				}
-				server.ws.send({ type: "full-reload" });
+				for (const client of eventClients) client.write("event: deck:updated\ndata: {}\n\n");
 			}
 		} finally {
 			compiling = false;
@@ -2422,8 +2424,9 @@ export { createDecks };
 export const decks = createDecks(config);`;
 			if (!id.startsWith(MODULE_PREFIX)) return null;
 			const path = id.slice(MODULE_PREFIX.length);
-			const code = modules.get(path);
+			let code = modules.get(path);
 			if (code === void 0) return null;
+			if (path === routerModulePath && resolvedConfig?.command === "serve") code = code.replace("const generatedDecks = defineDecks({", `const generatedDecks = defineDecks({\n  liveReloadPath: () => ${JSON.stringify(eventsPath)},`);
 			return (await transform(code, {
 				loader: "ts",
 				format: "esm",
@@ -2436,16 +2439,30 @@ export const decks = createDecks(config);`;
 		},
 		async configResolved(config) {
 			resolvedConfig = config;
+			eventsPath = `${config.base?.startsWith("/") ? config.base.replace(/\/$/, "") : ""}/@hono-decks/events`;
 			projectRoot = config.resolve?.preserveSymlinks ? config.root : await realpath(config.root);
 			configPath = resolve(projectRoot, options.configFile ?? "hono-decks.config.ts");
 			await compile(true);
 		},
 		configureServer(devServer) {
 			server = devServer;
+			devServer.middlewares.use((req, res, next) => {
+				if (req.url?.split("?")[0] !== eventsPath || req.method !== "GET") return next();
+				res.writeHead(200, {
+					"Content-Type": "text/event-stream",
+					"Cache-Control": "no-cache, no-transform",
+					Connection: "keep-alive"
+				});
+				res.write(": connected\n\n");
+				eventClients.add(res);
+				res.on("close", () => eventClients.delete(res));
+			});
 			syncWatchedPaths();
 			devServer.watcher.on("all", onWatcherEvent);
 			const cleanup = () => {
 				if (timer) clearTimeout(timer);
+				for (const client of eventClients) client.end();
+				eventClients.clear();
 				devServer.watcher.off("all", onWatcherEvent);
 				server = void 0;
 				watchedPaths.clear();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hono-decks",
-  "version": "1.2.4",
+  "version": "1.3.0",
   "description": "Slide decks for Hono and Cloudflare Workers",
   "keywords": [
     "cloudflare-workers",