@slidev-react/client 0.2.5

package/src/app/App.tsx

@@ -0,0 +1,125 @@
+import { MDXProvider } from "@mdx-js/react";
+import compiledSlides from "@generated/slides";
+import { useMemo } from "react";
+import { SlidesNavigationProvider } from "./providers/SlidesNavigationProvider";
+import { AddonProvider, useSlideAddons } from "../addons/AddonProvider";
+import { PrintSlidesView } from "../features/presentation/PrintSlidesView";
+import { PresenterShell } from "../features/presentation/presenter/PresenterShell";
+import { buildSlidesUrl } from "@slidev-react/core/presentation/export/urls";
+import { type PresentationSession } from "../features/presentation/session";
+import type { PresentationSyncMode } from "../features/presentation/types";
+import { ThemeProvider, useSlideTheme } from "../theme/ThemeProvider";
+import type { ThemeMDXComponents } from "../theme/types";
+import { usePresentationBootstrap } from "./usePresentationBootstrap";
+
+function ThemeBoundApp({
+  exportMode,
+  exportWithClicks,
+  exportBaseName,
+  slidesDocument,
+  drawStorageKey,
+  presentationSession,
+  handleSyncModeChange,
+}: {
+  exportMode: "print" | null;
+  exportWithClicks: boolean;
+  exportBaseName: string;
+  slidesDocument: typeof compiledSlides;
+  drawStorageKey: string;
+  presentationSession: PresentationSession;
+  handleSyncModeChange: (mode: PresentationSyncMode) => void;
+}) {
+  const theme = useSlideTheme();
+  const addons = useSlideAddons();
+  const mdxComponents = useMemo<ThemeMDXComponents>(
+    () => ({
+      ...theme.mdxComponents,
+      ...addons.mdxComponents,
+    }),
+    [addons.mdxComponents, theme.mdxComponents],
+  );
+  const runtimeProviders = useMemo(
+    () =>
+      [theme.provider, ...addons.providers].filter(
+        (provider): provider is NonNullable<typeof provider> => Boolean(provider),
+      ),
+    [addons.providers, theme.provider],
+  );
+
+  const content =
+    exportMode === "print" ? (
+      <PrintSlidesView
+        slides={slidesDocument.slides}
+        slidesTitle={slidesDocument.meta.title}
+        slidesViewport={slidesDocument.meta.viewport}
+        slidesLayout={slidesDocument.meta.layout}
+        slidesBackground={slidesDocument.meta.background}
+        exportBaseName={exportBaseName}
+        withClicks={exportWithClicks}
+        onBack={() => {
+          window.location.assign(buildSlidesUrl(window.location.href));
+        }}
+      />
+    ) : (
+      <SlidesNavigationProvider total={slidesDocument.slides.length}>
+        <PresenterShell
+          slides={slidesDocument.slides}
+          slidesTitle={slidesDocument.meta.title}
+          slidesConfig={{
+            slidesViewport: slidesDocument.meta.viewport,
+            slidesLayout: slidesDocument.meta.layout,
+            slidesBackground: slidesDocument.meta.background,
+            slidesTransition: slidesDocument.meta.transition,
+          }}
+          slidesExportFilename={slidesDocument.meta.exportFilename}
+          slidesSessionSeed={slidesDocument.sourceHash}
+          drawStorageKey={drawStorageKey}
+          session={presentationSession}
+          onSyncModeChange={handleSyncModeChange}
+        />
+      </SlidesNavigationProvider>
+    );
+
+  return (
+    <MDXProvider components={mdxComponents}>
+      {runtimeProviders.reduceRight(
+        (children, Provider) => (
+          <Provider>{children}</Provider>
+        ),
+        content,
+      )}
+    </MDXProvider>
+  );
+}
+
+export default function App() {
+  const slidesDocument = compiledSlides;
+  const {
+    exportMode,
+    exportWithClicks,
+    exportBaseName,
+    drawStorageKey,
+    presentationSession,
+    handleSyncModeChange,
+  } = usePresentationBootstrap({
+    slidesDocument,
+  });
+
+  return (
+    <ThemeProvider
+      slidesViewport={slidesDocument.meta.viewport}
+    >
+      <AddonProvider addonIds={slidesDocument.meta.addons}>
+        <ThemeBoundApp
+          exportMode={exportMode}
+          exportWithClicks={exportWithClicks}
+          exportBaseName={exportBaseName}
+          slidesDocument={slidesDocument}
+          drawStorageKey={drawStorageKey}
+          presentationSession={presentationSession}
+          handleSyncModeChange={handleSyncModeChange}
+        />
+      </AddonProvider>
+    </ThemeProvider>
+  );
+}

package/src/app/README.md

@@ -0,0 +1,18 @@
+# `app/` Guide
+
+`app/` 负责应用装配，而不是承载具体产品能力。
+
+术语约定见：
+`../../../docs/slide-react-terminology.md`
+
+## What Belongs Here
+
+- 入口级组件装配，例如 `App.tsx`
+- 应用级 provider，例如页码导航、路由模式、全局 composition
+- 未来若有 `shell/`，应承接模式切换和页面级骨架
+
+## What Does Not Belong Here
+
+- reveal、draw、presentation sync 这类明确 feature 语义
+- 纯展示组件
+- slides parsing / compiling 逻辑

package/src/app/providers/SlidesNavigationProvider.tsx

@@ -0,0 +1,82 @@
+import { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
+import {
+  buildSlidesPath,
+  clampSlideIndex,
+  normalizePathname,
+  resolveSlidesLocationState,
+  type PresentationRouteMode,
+} from "../../features/presentation/location";
+
+interface SlidesContextValue {
+  currentIndex: number;
+  total: number;
+  next: () => void;
+  prev: () => void;
+  first: () => void;
+  last: () => void;
+  goTo: (index: number) => void;
+}
+
+const SlidesContext = createContext<SlidesContextValue | null>(null);
+
+export function SlidesNavigationProvider({
+  total,
+  children,
+}: {
+  total: number;
+  children: React.ReactNode;
+}) {
+  const initialLocation = resolveSlidesLocationState(window.location.pathname, total);
+  const [currentIndex, setCurrentIndex] = useState(initialLocation.index);
+  const routeModeRef = useRef<PresentationRouteMode | null>(initialLocation.mode);
+
+  useEffect(() => {
+    setCurrentIndex((index) => clampSlideIndex(index, total));
+  }, [total]);
+
+  useEffect(() => {
+    const syncFromLocation = () => {
+      const locationState = resolveSlidesLocationState(window.location.pathname, total);
+      routeModeRef.current = locationState.mode;
+      setCurrentIndex(locationState.index);
+    };
+
+    window.addEventListener("popstate", syncFromLocation);
+    return () => {
+      window.removeEventListener("popstate", syncFromLocation);
+    };
+  }, [total]);
+
+  useEffect(() => {
+    const routeMode =
+      routeModeRef.current ?? resolveSlidesLocationState(window.location.pathname, total).mode;
+
+    const nextPath = buildSlidesPath(routeMode, currentIndex);
+    const currentPath = normalizePathname(window.location.pathname);
+
+    if (currentPath !== nextPath || window.location.hash)
+      window.history.replaceState(null, "", nextPath);
+  }, [currentIndex]);
+
+  const value = useMemo<SlidesContextValue>(
+    () => ({
+      currentIndex,
+      total,
+      next: () => setCurrentIndex((index) => clampSlideIndex(index + 1, total)),
+      prev: () => setCurrentIndex((index) => clampSlideIndex(index - 1, total)),
+      first: () => setCurrentIndex(0),
+      last: () => setCurrentIndex(Math.max(total - 1, 0)),
+      goTo: (index: number) => setCurrentIndex(clampSlideIndex(index, total)),
+    }),
+    [currentIndex, total],
+  );
+
+  return <SlidesContext.Provider value={value}>{children}</SlidesContext.Provider>;
+}
+
+export function useSlidesState() {
+  const context = useContext(SlidesContext);
+  if (!context) throw new Error("useSlidesState must be used inside SlidesNavigationProvider");
+
+  return context;
+}

package/src/app/usePresentationBootstrap.ts

@@ -0,0 +1,85 @@
+import type compiledSlides from "@generated/slides";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { resolvePresentationFileNameBase } from "../features/presentation/recordingFilename";
+import {
+  createPrintExportSession,
+  resolvePresentationSession,
+  updateSyncModeInUrl,
+  type PresentationSession,
+} from "../features/presentation/session";
+import type { PresentationSyncMode } from "../features/presentation/types";
+import {
+  resolvePresentationExportMode,
+  resolvePrintExportWithClicks,
+} from "@slidev-react/core/presentation/export/urls";
+
+export function usePresentationBootstrap({
+  slidesDocument,
+}: {
+  slidesDocument: typeof compiledSlides;
+}) {
+  const exportMode = useMemo(
+    () => resolvePresentationExportMode(window.location.search),
+    [],
+  );
+  const exportWithClicks = useMemo(
+    () => resolvePrintExportWithClicks(window.location.search),
+    [],
+  );
+  const slidesHash = useMemo(() => slidesDocument.sourceHash, [slidesDocument.sourceHash]);
+  const drawStorageKey = useMemo(() => `slide-react:draw:${slidesHash}`, [slidesHash]);
+  const exportBaseName = useMemo(
+    () =>
+      resolvePresentationFileNameBase({
+        exportFilename: slidesDocument.meta.exportFilename,
+        slidesTitle: slidesDocument.meta.title,
+      }),
+    [slidesDocument.meta.exportFilename, slidesDocument.meta.title],
+  );
+  const sessionBase = useMemo<PresentationSession>(() => {
+    if (exportMode === "print") return createPrintExportSession();
+
+    return resolvePresentationSession(slidesHash);
+  }, [exportMode, slidesHash]);
+  const [syncMode, setSyncMode] = useState<PresentationSyncMode>(sessionBase.syncMode);
+  const presentationSession = useMemo<PresentationSession>(
+    () => ({
+      ...sessionBase,
+      syncMode,
+    }),
+    [sessionBase, syncMode],
+  );
+
+  useEffect(() => {
+    setSyncMode(sessionBase.syncMode);
+  }, [sessionBase.syncMode]);
+
+  useEffect(() => {
+    document.title =
+      exportMode === "print"
+        ? `${exportBaseName}.pdf`
+        : (slidesDocument.meta.title ?? "Slide React MVP");
+  }, [slidesDocument.meta.title, exportBaseName, exportMode]);
+
+  useEffect(() => {
+    const mode = exportMode === "print" ? "print" : "live";
+    document.documentElement.dataset.presentationMode = mode;
+    return () => {
+      delete document.documentElement.dataset.presentationMode;
+    };
+  }, [exportMode]);
+
+  const handleSyncModeChange = useCallback((mode: PresentationSyncMode) => {
+    setSyncMode(mode);
+    updateSyncModeInUrl(mode);
+  }, []);
+
+  return {
+    exportMode,
+    exportWithClicks,
+    exportBaseName,
+    drawStorageKey,
+    presentationSession,
+    handleSyncModeChange,
+  };
+}