ReleaseNotesSheet.tsx

import {
  Device,
  Markdown,
  type MarkdownProps,
  NavigationStack,
  Path,
  type PresentationDetent,
  Script,
  ScrollView,
  useEffect,
  useState,
} from "scripting";

type MarkdownReleaseNotesSheetConfig = {
  markdownFile?: string;
  storageKey?: string;
  title?: string;
  theme?: MarkdownProps["theme"];
  detents?: PresentationDetent[];
};

const DEFAULT_CHANGELOG_FILE = "changelog.md";

function normalizeMarkdownContent(content: string) {
  return content.replace(/\r\n/g, "\n").trim();
}

function hashString(value: string) {
  let hash = 2166136261;
  for (let index = 0; index < value.length; index += 1) {
    hash ^= value.charCodeAt(index);
    hash = Math.imul(hash, 16777619);
  }
  return (hash >>> 0).toString(16);
}

function MarkdownReleaseNotesSheet(props: {
  content: string;
  title?: string;
  theme?: MarkdownProps["theme"];
  detents?: PresentationDetent[];
}) {
  const useGlassPresentation = Number.parseInt(Device.systemVersion, 10) >= 26;

  return (
    <NavigationStack presentationBackground={useGlassPresentation ? "clear" : undefined}>
      <ScrollView
        background="clear"
        scrollContentBackground="hidden"
        navigationTitle={props.title ?? "更新内容"}
        navigationBarTitleDisplayMode="inline"
        toolbarBackgroundVisibility="hidden"
        presentationDragIndicator="visible"
        presentationDetents={props.detents ?? ["medium", "large"]}
        presentationBackground={useGlassPresentation ? "clear" : undefined}
        padding={{ top: 24, leading: 18, bottom: 18, trailing: 18 }}
      >
        <Markdown
          content={props.content}
          theme={props.theme ?? "basic"}
          useDefaultHighlighterTheme
          scrollable={false}
          background="clear"
        />
      </ScrollView>
    </NavigationStack>
  );
}

export function useMarkdownReleaseNotesSheet(
  config: MarkdownReleaseNotesSheetConfig = {},
) {
  const markdownFile = config.markdownFile ?? DEFAULT_CHANGELOG_FILE;
  const storageKey = config.storageKey ??
    `release-notes:${markdownFile}:last-seen-hash`;
  const [releaseNotesContent, setReleaseNotesContent] = useState("");
  const [releaseNotesHash, setReleaseNotesHash] = useState("");
  const [showReleaseNotes, setShowReleaseNotes] = useState(false);

  useEffect(() => {
    async function loadReleaseNotes() {
      const filePath = Path.join(Script.directory, markdownFile);
      const exists = await FileManager.exists(filePath);
      if (!exists) return;

      const content = normalizeMarkdownContent(
        await FileManager.readAsString(filePath),
      );
      if (!content) return;

      const contentHash = hashString(content);
      const lastSeenHash = Storage.get<string>(storageKey);
      if (lastSeenHash === contentHash) return;

      setReleaseNotesContent(content);
      setReleaseNotesHash(contentHash);
      setShowReleaseNotes(true);
    }

    void loadReleaseNotes();
  }, []);

  function setReleaseNotesPresented(isPresented: boolean) {
    if (!isPresented && releaseNotesHash) {
      Storage.set(storageKey, releaseNotesHash);
    }
    setShowReleaseNotes(isPresented);
  }

  return {
    isPresented: showReleaseNotes,
    onChanged: setReleaseNotesPresented,
    content: (
      <MarkdownReleaseNotesSheet
        content={releaseNotesContent}
        title={config.title}
        theme={config.theme}
        detents={config.detents}
      />
    ),
  };
}