npm - create-zudo-doc - Versions diffs - 0.2.11 → 0.2.12 - Mend

create-zudo-doc 0.2.11 → 0.2.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/scaffold.js +10 -7
package/package.json +1 -1
package/templates/base/src/components/sidebar-toggle.tsx +6 -4
package/templates/base/src/styles/global.css +4 -13
package/templates/features/sidebarToggle/files/src/components/desktop-sidebar-toggle.tsx +6 -86

package/dist/scaffold.js CHANGED Viewed

@@ -333,12 +333,16 @@ function generatePackageJson(choices) {
         // "@takazudo/zfb" (#972) — plus removal of the no-op linkValidation.allowExternal
         // knob (#925); both are non-breaking for a fresh scaffold. A fresh scaffold
         // sets no explicit codeHighlight.theme so the default still applies. No
-        // consumer-facing / CLI breaking change.
-        "@takazudo/zfb": "0.1.0-next.51",
-        "@takazudo/zfb-runtime": "0.1.0-next.51",
+        // consumer-facing / CLI breaking change. next.52 (current pin): adds the
+        // `ClientRouter({ preserveHtmlAttrs })` option (zfb#1104) — consumers can
+        // declare runtime `<html>` attribute names to preserve across SPA swaps so
+        // e.g. `data-sidebar-hidden` / `data-theme` survive (zudolab/zudo-doc#2200).
+        // Additive, non-breaking for a fresh scaffold.
+        "@takazudo/zfb": "0.1.0-next.52",
+        "@takazudo/zfb-runtime": "0.1.0-next.52",
         // zfb-adapter-cloudflare — required for any route with `prerender = false`.
         // Pinned in lockstep with @takazudo/zfb.
-        "@takazudo/zfb-adapter-cloudflare": "0.1.0-next.51",
+        "@takazudo/zfb-adapter-cloudflare": "0.1.0-next.52",
         // @takazudo/zudo-doc — published from this monorepo via
         // .github/workflows/publish-zudo-doc.yml. The pin here is bumped in
         // lockstep by scripts/release-create-zudo-doc.sh whenever zudo-doc's
@@ -350,7 +354,7 @@ function generatePackageJson(choices) {
         // ties this pin to packages/zudo-doc's version, so the lockstep release
         // bumps both together; do not cut a create-zudo-doc release until the
         // matching @takazudo/zudo-doc version (with content.css) is on npm.
-        "@takazudo/zudo-doc": "^0.2.11",
+        "@takazudo/zudo-doc": "^0.2.12",
         // zod — used by the generated zfb.config.ts. zfb-config-gen emits
         // `import { z } from "zod"` for the content-collection schema +
         // `z.toJSONSchema(...)` conversion. Without this dep, the consumer
@@ -373,7 +377,6 @@ function generatePackageJson(choices) {
         "preact-render-to-string": "^6.6.6",
         shiki: "^4.0.2",
         "@shikijs/transformers": "^4.0.0",
-        clsx: "^2.1.0",
         "gray-matter": "^4.0.0",
         mermaid: "^11.12.3",
         "remark-cjk-friendly": "^2.0.1",
@@ -405,7 +408,7 @@ function generatePackageJson(choices) {
         // @takazudo/zudo-doc/integrations/doc-history which in turn imports
         // @takazudo/zudo-doc-history-server/git-history. Without this dep the
         // plugin host fails at init with ERR_MODULE_NOT_FOUND — W8A (#1739).
-        deps["@takazudo/zudo-doc-history-server"] = "^0.2.11";
+        deps["@takazudo/zudo-doc-history-server"] = "^0.2.12";
         // W7A (#1736): doc-history-plugin.mjs spawns `tsx -e <inline-script>` to
         // run the v2 runtime in a TS-aware Node subprocess; without tsx the
         // plugin's preBuild step exits with ENOENT before zfb finishes config

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "create-zudo-doc",
-  "version": "0.2.11",
+  "version": "0.2.12",
   "description": "Create a new zudo-doc documentation site",
   "license": "MIT",
   "author": "Takeshi Takatsudo",

package/templates/base/src/components/sidebar-toggle.tsx CHANGED Viewed

@@ -6,7 +6,6 @@
 // packages/zudo-doc/src/theme-toggle/index.tsx. Type references via
 // the global React namespace still resolve via @types/react.
 import { useState, useEffect } from "preact/hooks";
-import clsx from "clsx";
 // After zudolab/zudo-doc#1335 (E2 task 2 half B) the host components
 // pull lifecycle event names from the v2 transitions module rather
 // than hard-coding `astro:*` literals.
@@ -18,6 +17,9 @@ import type { LocaleLink } from "@/types/locale";
 // pulled in by `./sidebar`'s runtime barrel.
 import type { SidebarRootMenuItem } from "@takazudo/zudo-doc/sidebar/types";
+const cx = (...classes: Array<string | false | null | undefined>) =>
+  classes.filter(Boolean).join(" ");
 // Mobile drawer hosts the SidebarTree directly (rather than receiving it as
 // JSX children) so the tree's data props ride across the SSR → hydrate
 // boundary inside the Island marker's `data-props` attribute. zfb's
@@ -90,7 +92,7 @@ export default function SidebarToggle({
         {/* X icon — visible only when open */}
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          className={clsx("h-icon-lg w-icon-lg", !open && "hidden")}
+          className={cx("h-icon-lg w-icon-lg", !open && "hidden")}
           aria-hidden="true"
           fill="none"
           viewBox="0 0 24 24"
@@ -106,7 +108,7 @@ export default function SidebarToggle({
         {/* Hamburger icon — visible only when closed */}
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          className={clsx("h-icon-lg w-icon-lg", open && "hidden")}
+          className={cx("h-icon-lg w-icon-lg", open && "hidden")}
           aria-hidden="true"
           fill="none"
           viewBox="0 0 24 24"
@@ -131,7 +133,7 @@ export default function SidebarToggle({
           backdrop (onClick below), so the header hamburger being dimmed under
           it is fine. */}
       <div
-        className={clsx("fixed inset-0 z-modal-backdrop bg-overlay/30 lg:hidden", !open && "hidden")}
+        className={cx("fixed inset-0 z-modal-backdrop bg-overlay/30 lg:hidden", !open && "hidden")}
         aria-hidden={!open}
         onClick={() => setOpen(false)}
       />

package/templates/base/src/styles/global.css CHANGED Viewed

@@ -717,19 +717,10 @@ pre[class^="syntect-"] .line .highlighted-word {
   }
 }
-/* Suppress sidebar geometry transitions during an SPA swap (#2198).
- * swapRootAttributes wipes data-sidebar-hidden mid-swap, so without this the
- * sidebar would animate open (attribute absent) and then animate shut again
- * when the toggle island restores the attribute on zfb:after-swap — a visible
- * flash + slide. The island sets data-sidebar-no-transition for the swap
- * window and removes it (double rAF) after restoring the hidden state, so the
- * wipe/restore apply instantly and a later user toggle still animates. */
-html[data-sidebar-no-transition] #desktop-sidebar,
-html[data-sidebar-no-transition] .zd-sidebar-content-wrapper,
-html[data-sidebar-no-transition] .zd-doc-content-band,
-html[data-sidebar-no-transition] .zd-desktop-sidebar-toggle {
-  transition: none !important;
-}
+/* The SPA-swap flash guard (`data-sidebar-no-transition`) was removed once
+ * doc-layout adopted <ClientRouter preserveHtmlAttrs={["data-sidebar-hidden",
+ * ...]} /> (zfb-runtime >= 0.1.0-next.52): the attribute now survives the swap
+ * before paint, so no sidebar geometry transition fires mid-swap. */
 /* ── Find-in-page highlight (W7A: unconditional — Tauri feature gates at runtime) ── */
 .find-match {

package/templates/features/sidebarToggle/files/src/components/desktop-sidebar-toggle.tsx CHANGED Viewed

@@ -1,7 +1,6 @@
 "use client";
 import { useState, useEffect, useRef } from 'preact/hooks';
-import { BEFORE_NAVIGATE_EVENT, AFTER_NAVIGATE_EVENT } from '@takazudo/zudo-doc/transitions';
 export const SIDEBAR_STORAGE_KEY = 'zudo-doc-sidebar-visible';
@@ -22,93 +21,13 @@ function setDataAttribute(isVisible: boolean) {
   }
 }
-// SPA-navigation guard for the desktop sidebar's hidden-state (#2198).
-//
-// zfb's Strategy-B client router wipes EVERY <html> attribute during the body
-// swap (swapRootAttributes re-adds only NON_OVERRIDABLE_ZFB_ATTRS plus the
-// incoming SSR document's attributes), so the persisted `data-sidebar-hidden`
-// runtime value is lost on every navigation, and the pre-paint inline script
-// does not re-run on SPA hops. Left alone, the freshly-rendered sidebar paints
-// visible and then animates shut when the value is restored — the flash + slide.
-//
-// These listeners MUST live at module scope, NOT in the island's useEffect:
-// zfb-runtime (>= 0.1.0-next.51) calls unmountIslands() BEFORE the swap and
-// before firing AFTER_NAVIGATE_EVENT, so a useEffect-registered listener is torn
-// down (effect cleanup) before the swap and never sees the after-swap event —
-// the restore would never run (#2198 verification). Registering once on
-// `document` at bundle load — the same lifecycle-independent pattern as
-// client-router-bootstrap.tsx — keeps the guard alive across island
-// unmount/remount. SSR-safe: no-ops when `document` is undefined.
-//
-// Strategy: on BEFORE_NAVIGATE_EVENT, record whether the sidebar was hidden and
-// set a transient `data-sidebar-no-transition` marker (global.css zeroes the
-// sidebar/wrapper/band/toggle transitions). The swap then wipes BOTH the marker
-// and data-sidebar-hidden. On AFTER_NAVIGATE_EVENT (swap done → the live <html>
-// is no longer wiped) RE-SET the marker, then re-add data-sidebar-hidden in the
-// same synchronous batch, so the hidden geometry snaps in with transitions
-// suppressed (no slide, no open frame). Remove the marker on a double rAF
-// afterward so a later user toggle still animates.
-let spaNavGuardRegistered = false;
-function registerSidebarSpaNavGuard() {
-  if (typeof document === 'undefined' || spaNavGuardRegistered) return;
-  spaNavGuardRegistered = true;
-  let wasHidden = false;
-  let swapToken = 0;
-  // Long enough to outlast the View-Transition swap pipeline on slow
-  // machines/CI; short enough that an aborted nav self-heals quickly. Only a
-  // safety net for a nav that never reaches `restore` (aborted/superseded).
-  const STUCK_MARKER_FALLBACK_MS = 1500;
-  const capture = () => {
-    wasHidden = document.documentElement.hasAttribute('data-sidebar-hidden');
-    document.documentElement.setAttribute('data-sidebar-no-transition', '');
-    const token = ++swapToken;
-    window.setTimeout(() => {
-      if (token === swapToken) {
-        document.documentElement.removeAttribute('data-sidebar-no-transition');
-      }
-    }, STUCK_MARKER_FALLBACK_MS);
-  };
-  const restore = () => {
-    // Marker first, then the attribute, in one synchronous batch — so the
-    // hidden geometry is restored with transitions off (the swap already wiped
-    // the capture-time marker, so re-setting it here on the post-swap <html> is
-    // what actually suppresses the animation).
-    document.documentElement.setAttribute('data-sidebar-no-transition', '');
-    if (wasHidden) {
-      document.documentElement.setAttribute('data-sidebar-hidden', '');
-    }
-    // Drop the marker only after the restored state is committed. A single rAF
-    // can coincide with the restore's style recalc and animate it, so defer one
-    // extra frame. The token bump no-ops capture's safety-net for this swap.
-    const token = ++swapToken;
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => {
-        if (token === swapToken) {
-          document.documentElement.removeAttribute('data-sidebar-no-transition');
-        }
-      });
-    });
-  };
-  document.addEventListener(BEFORE_NAVIGATE_EVENT, capture);
-  document.addEventListener(AFTER_NAVIGATE_EVENT, restore);
-}
-// Register at module load (browser-only via the guard) so the listeners exist
-// before the first navigation and survive island unmount/remount.
-registerSidebarSpaNavGuard();
 export default function DesktopSidebarToggle() {
   // Initial state must match server render (always `true`) to avoid a
   // hydration mismatch when the persisted preference is "hidden". The
   // doc-layout's pre-paint inline script applies `data-sidebar-hidden`
   // to <html> from localStorage *before* this island mounts, so the
   // visual state stays correct; we only need to sync this island's
-  // React state to the persisted preference after hydration. Same
-  // pattern as packages/zudo-doc/src/theme-toggle/index.tsx (commit 9aebd8e).
+  // React state to the persisted preference after hydration.
   const [visible, setVisible] = useState<boolean>(true);
   // Tracks whether the hydration sync (below) has run. The persistence
   // effect below skips the very first mount so we don't overwrite the
@@ -145,10 +64,11 @@ export default function DesktopSidebarToggle() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  // The SPA-navigation flash guard (data-sidebar-hidden preservation +
-  // transition suppression) is NOT registered here. It must outlive this
-  // island's mount/unmount, so it lives at module scope — see
-  // registerSidebarSpaNavGuard() above. (#2198)
+  // The SPA-navigation flash (a collapsed sidebar briefly painting open on
+  // every soft swap) is handled upstream: doc-layout mounts
+  // <ClientRouter preserveHtmlAttrs={["data-sidebar-hidden", ...]} /> so
+  // zfb-runtime (>= 0.1.0-next.52) re-applies the runtime attribute across the
+  // swap before paint. No host-side capture/restore guard is needed.
   return (
     <button