daily-soup-widget 0.2.2 → 0.3.0

package/README.md

@@ -51,7 +51,7 @@ export default function Page() {
 
 The component is SSR-safe: it emits a placeholder during render and hydrates the widget inside `useEffect`. No `window` access at module top-level.
 
-## Install — framework-agnostic ESM
+## Install — imperative API (NPM)
 
 ```ts
 import { mount } from 'daily-soup-widget';
@@ -61,6 +61,9 @@ const handle = mount(host, { lang: 'zh', theme: 'auto' });
 // later: handle.destroy();
 ```
 
+Same React peer requirement as the `<DailySoup>` component — install React + ReactDOM
+(>=18) alongside.
+
 ---
 
 ## Configuration
@@ -130,10 +133,10 @@ scripts/
   build-schedule.ts     content/*.md → dist/schedule-zh.json
   build-bundle.ts       esbuild UMD + ESM + CJS bundles
 src/
-  embed.ts              UMD entry (CDN, auto-mounts)
+  embed.ts              UMD entry (CDN, auto-mounts; React bundled in)
   index.ts              ESM entry (NPM)
-  component.tsx         React wrapper
-  widget.ts             framework-agnostic core (Shadow DOM, render, fetch)
+  component.tsx         React wrapper around mount()
+  widget.tsx            React widget core (Shadow DOM root, render, fetch)
   theme.ts              auto/light/dark resolution + system-theme listener
   i18n.ts               UI strings (zh)
   share.ts              copy / X / LINE share builders
@@ -165,6 +168,20 @@ npm run build              # full prod build (schedule + bundle + types + Next.j
 2. `npm run build:schedule` — extends the schedule, preserving past dates.
 3. Commit + PR. Merge triggers the GH Action to redeploy.
 
+### Releasing a new npm version
+
+1. Bump `version` in `package.json`, commit, merge to `main`.
+2. Tag and push: `git tag v0.2.3 && git push --tags`.
+3. `.github/workflows/publish.yml` runs `npm test` + `typecheck` + `build:lib` + `npm publish` against the `NPM_TOKEN` repo secret. No local `npm login` ever needed.
+
+The `NPM_TOKEN` must be a granular automation token scoped to read & write on `daily-soup-widget`.
+
+**Verifying the auth chain without a version bump:** trigger `gh workflow run publish.yml -R mshmwr/daily-soup-widget` against the current `main`. The workflow runs all pre-publish steps and then attempts `npm publish` on the already-published version, which the registry rejects with `E403 You cannot publish over the previously published versions: <version>`. Reaching that exact error confirms the `NPM_TOKEN` secret is present and has publish scope — only the uniqueness check rejected. Use this whenever you rotate the token or change the workflow, instead of minting a throwaway version. Note: `npm whoami` on a granular automation token returns 401 and is not a valid auth-chain test; use `npm publish --dry-run` (locally) or this `workflow_dispatch` trick (in CI) instead.
+
+### Auditing source URLs
+
+`npm run check:source-urls` HEADs every `sourceUrl` in `content/quotes/**` and flags pages whose body matches `資料已刪除|404 Not Found`. Run before each release; null any broken URLs in frontmatter (the widget renders source as plain text when `sourceUrl` is empty).
+
 ---
 
 ## Browser support

package/dist/embed.cjs.js

@@ -26,6 +26,11 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/widget.tsx
+var import_react = require("react");
+var import_client = require("react-dom/client");
+var import_react_dom = require("react-dom");
+
 // src/i18n.ts
 var STRINGS = {
   zh: {
@@ -194,81 +199,9 @@ function todayUtc8(now = /* @__PURE__ */ new Date()) {
   return `${yy}-${mm}-${dd}`;
 }
 
-// src/widget.ts
+// src/widget.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
 var DEFAULT_SCHEDULE_BASE = "https://daily-soup-widget.vercel.app";
-function escape(s) {
-  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
-}
-function attachRoot(host) {
-  if (typeof host.attachShadow === "function") {
-    if (host.shadowRoot) return host.shadowRoot;
-    return host.attachShadow({ mode: "open" });
-  }
-  console.warn("[daily-soup] attachShadow unsupported, falling back to light DOM");
-  return host;
-}
-function injectStyles(root) {
-  const style = document.createElement("style");
-  style.textContent = WIDGET_STYLES;
-  root.appendChild(style);
-}
-function buildSkeleton(theme) {
-  const card = document.createElement("div");
-  card.className = `ds-card ds-${theme} ds-skeleton`;
-  card.innerHTML = `
-    <div class="ds-quote">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
-    <div class="ds-meta"><span class="ds-author">&nbsp;</span><span class="ds-source">&nbsp;</span></div>
-  `;
-  return card;
-}
-function renderQuote(card, quote, lang, theme) {
-  const s = t(lang);
-  card.className = `ds-card ds-${theme}`;
-  const sourceLabel = quote.sourceUrl ? `<a href="${escape(quote.sourceUrl)}" target="_blank" rel="noopener noreferrer">${escape(quote.source)}</a>` : escape(quote.source);
-  const flag = quote.attribution === "popular-attribution" ? `<span class="ds-flag">${escape(s.attributedPopular)}</span>` : "";
-  card.innerHTML = `
-    <p class="ds-quote">${escape(quote.text)}</p>
-    <div class="ds-meta">
-      <span class="ds-author">\u2014 ${escape(quote.author)}${flag}</span>
-      ${quote.source ? `<span class="ds-source">${s.source}\uFF1A${sourceLabel}</span>` : ""}
-    </div>
-    <div class="ds-actions">
-      <div class="ds-share">
-        <button class="ds-btn" data-action="copy" type="button" aria-label="${escape(s.copy)}">
-          <span aria-hidden="true">\u29C9</span><span class="ds-share-label">${escape(s.copy)}</span>
-        </button>
-        <a class="ds-btn" data-action="x" href="${escape(buildXShareUrl({ text: quote.text, author: quote.author }))}" target="_blank" rel="noopener noreferrer" aria-label="${escape(s.shareX)}">
-          <span aria-hidden="true">\u{1D54F}</span><span class="ds-share-label">X</span>
-        </a>
-        <a class="ds-btn" data-action="line" href="${escape(buildLineShareUrl({ text: quote.text, author: quote.author }))}" target="_blank" rel="noopener noreferrer" aria-label="${escape(s.shareLine)}">
-          <span aria-hidden="true">L</span><span class="ds-share-label">LINE</span>
-        </a>
-      </div>
-      <span class="ds-powered"><a href="https://personal-site-mocha-chi.vercel.app" target="_blank" rel="noopener noreferrer">${s.poweredBy}</a></span>
-    </div>
-  `;
-  const copyBtn = card.querySelector('[data-action="copy"]');
-  if (copyBtn) {
-    copyBtn.addEventListener("click", async () => {
-      const ok = await copyToClipboard({ text: quote.text, author: quote.author });
-      if (ok) {
-        const label = copyBtn.querySelector(".ds-share-label");
-        const originalLabel = label?.textContent ?? "";
-        if (label) label.textContent = s.copied;
-        copyBtn.classList.add("ds-toast");
-        setTimeout(() => {
-          if (label) label.textContent = originalLabel;
-          copyBtn.classList.remove("ds-toast");
-        }, 2e3);
-      }
-    });
-  }
-}
-function renderError(card, lang, theme) {
-  card.className = `ds-card ds-${theme}`;
-  const s = t(lang);
-  card.innerHTML = `<p class="ds-error">${escape(s.loadFailed)}</p>`;
-}
 async function fetchSchedule(scheduleUrl, lang) {
   const base = scheduleUrl.replace(/\/$/, "");
   const url = `${base}/schedule-${lang}.json`;
@@ -281,8 +214,7 @@ async function fetchSchedule(scheduleUrl, lang) {
     return null;
   }
 }
-function pickQuote(schedule) {
-  const today = todayUtc8();
+function pickQuote(schedule, today) {
   const id = schedule.entries[today];
   if (id && schedule.quotes[id]) return schedule.quotes[id];
   const fallbackId = Object.keys(schedule.quotes).sort()[0];
@@ -292,101 +224,231 @@ function pickQuote(schedule) {
   }
   return null;
 }
-function applyThemeOverrides(card, config, maxWidth) {
-  const colors = getThemeColors(config);
+function buildInlineStyle(themeConfig, maxWidth) {
+  const style = {};
+  const colors = getThemeColors(themeConfig);
   if (colors) {
-    if (colors.bg) card.style.setProperty("--ds-bg", colors.bg);
-    if (colors.ink) card.style.setProperty("--ds-fg", colors.ink);
-    if (colors.muted) card.style.setProperty("--ds-muted", colors.muted);
-    if (colors.border) card.style.setProperty("--ds-border", colors.border);
-    if (colors.accent) card.style.setProperty("--ds-accent", colors.accent);
+    if (colors.bg) style["--ds-bg"] = colors.bg;
+    if (colors.ink) style["--ds-fg"] = colors.ink;
+    if (colors.muted) style["--ds-muted"] = colors.muted;
+    if (colors.border) style["--ds-border"] = colors.border;
+    if (colors.accent) style["--ds-accent"] = colors.accent;
   }
-  if (maxWidth) card.style.setProperty("--ds-max-width", maxWidth);
+  if (maxWidth) style["--ds-max-width"] = maxWidth;
+  return style;
+}
+function DailySoupWidget({ lang, themeConfig, scheduleUrl, maxWidth }) {
+  const [resolvedTheme, setResolvedTheme] = (0, import_react.useState)(() => resolveTheme(themeConfig));
+  const [schedule, setSchedule] = (0, import_react.useState)(null);
+  const [displayedDate, setDisplayedDate] = (0, import_react.useState)("");
+  const [quote, setQuote] = (0, import_react.useState)(null);
+  const [loadFailed, setLoadFailed] = (0, import_react.useState)(false);
+  const [copyToast, setCopyToast] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    if (themeConfig !== "auto") {
+      setResolvedTheme(resolveTheme(themeConfig));
+      return;
+    }
+    setResolvedTheme(resolveTheme(themeConfig));
+    return watchSystemTheme(setResolvedTheme);
+  }, [themeConfig]);
+  (0, import_react.useEffect)(() => {
+    let cancelled = false;
+    let retried = false;
+    const load = async () => {
+      const sch = await fetchSchedule(scheduleUrl, lang);
+      if (cancelled) return;
+      if (!sch) {
+        if (!retried) {
+          retried = true;
+          setTimeout(load, 2e3);
+          return;
+        }
+        setLoadFailed(true);
+        return;
+      }
+      const today = todayUtc8();
+      const q = pickQuote(sch, today);
+      if (!q) {
+        setLoadFailed(true);
+        return;
+      }
+      (0, import_react_dom.flushSync)(() => {
+        setSchedule(sch);
+        setDisplayedDate(today);
+        setQuote(q);
+      });
+    };
+    load();
+    return () => {
+      cancelled = true;
+    };
+  }, [lang, scheduleUrl]);
+  (0, import_react.useEffect)(() => {
+    if (!schedule || typeof document === "undefined") return;
+    const onVisibility = () => {
+      if (document.visibilityState !== "visible") return;
+      const today = todayUtc8();
+      if (today === displayedDate) return;
+      const q = pickQuote(schedule, today);
+      if (!q) return;
+      (0, import_react_dom.flushSync)(() => {
+        setDisplayedDate(today);
+        setQuote(q);
+      });
+    };
+    document.addEventListener("visibilitychange", onVisibility);
+    return () => document.removeEventListener("visibilitychange", onVisibility);
+  }, [schedule, displayedDate]);
+  const inlineStyle = buildInlineStyle(themeConfig, maxWidth);
+  const s = t(lang);
+  const handleCopy = (0, import_react.useCallback)(async () => {
+    if (!quote) return;
+    const ok = await copyToClipboard({ text: quote.text, author: quote.author });
+    if (ok) {
+      setCopyToast(true);
+      setTimeout(() => setCopyToast(false), 2e3);
+    }
+  }, [quote]);
+  if (loadFailed) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: WIDGET_STYLES }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `ds-card ds-${resolvedTheme}`, style: inlineStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "ds-error", children: s.loadFailed }) })
+    ] });
+  }
+  if (!quote) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: WIDGET_STYLES }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `ds-card ds-${resolvedTheme} ds-skeleton`, style: inlineStyle, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ds-quote", children: "\xA0".repeat(25) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ds-meta", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ds-author", children: "\xA0" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ds-source", children: "\xA0" })
+        ] })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: WIDGET_STYLES }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `ds-card ds-${resolvedTheme}`, style: inlineStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "ds-quote", children: quote.text }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ds-meta", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "ds-author", children: [
+          "\u2014 ",
+          quote.author,
+          quote.attribution === "popular-attribution" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ds-flag", children: s.attributedPopular })
+        ] }),
+        quote.source && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "ds-source", children: [
+          s.source,
+          "\uFF1A",
+          quote.sourceUrl ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: quote.sourceUrl, target: "_blank", rel: "noopener noreferrer", children: quote.source }) : quote.source
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ds-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ds-share", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "button",
+            {
+              className: `ds-btn${copyToast ? " ds-toast" : ""}`,
+              "data-action": "copy",
+              type: "button",
+              "aria-label": s.copy,
+              onClick: handleCopy,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", children: "\u29C9" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ds-share-label", children: copyToast ? s.copied : s.copy })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "a",
+            {
+              className: "ds-btn",
+              "data-action": "x",
+              href: buildXShareUrl({ text: quote.text, author: quote.author }),
+              target: "_blank",
+              rel: "noopener noreferrer",
+              "aria-label": s.shareX,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", children: "\u{1D54F}" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ds-share-label", children: "X" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "a",
+            {
+              className: "ds-btn",
+              "data-action": "line",
+              href: buildLineShareUrl({ text: quote.text, author: quote.author }),
+              target: "_blank",
+              rel: "noopener noreferrer",
+              "aria-label": s.shareLine,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", children: "L" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ds-share-label", children: "LINE" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ds-powered", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "a",
+          {
+            href: "https://personal-site-mocha-chi.vercel.app",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: s.poweredBy
+          }
+        ) })
+      ] })
+    ] })
+  ] });
+}
+function attachRoot(host) {
+  if (typeof host.attachShadow === "function") {
+    if (host.shadowRoot) return host.shadowRoot;
+    return host.attachShadow({ mode: "open" });
+  }
+  console.warn("[daily-soup] attachShadow unsupported, falling back to light DOM");
+  return host;
 }
 function mount(host, options = {}) {
   const lang = options.lang ?? "zh";
   const themeConfig = options.theme ?? "auto";
   const scheduleUrl = options.scheduleUrl === void 0 ? DEFAULT_SCHEDULE_BASE : options.scheduleUrl;
   const maxWidth = options.maxWidth;
-  let resolvedTheme = resolveTheme(themeConfig);
   const root = attachRoot(host);
   if (root === host) {
     host.textContent = "";
   } else {
-    while (root.firstChild) root.removeChild(root.firstChild);
-  }
-  injectStyles(root);
-  const card = buildSkeleton(resolvedTheme);
-  applyThemeOverrides(card, themeConfig, maxWidth);
-  root.appendChild(card);
-  const state = {
-    lang,
-    themeConfig,
-    scheduleUrl,
-    host,
-    root,
-    cardEl: card,
-    unwatchTheme: () => {
-    },
-    unwatchVisibility: () => {
-    },
-    schedule: null,
-    displayedDate: ""
-  };
-  if (themeConfig === "auto") {
-    state.unwatchTheme = watchSystemTheme((t2) => {
-      resolvedTheme = t2;
-      state.cardEl.classList.remove("ds-light", "ds-dark");
-      state.cardEl.classList.add(`ds-${t2}`);
-    });
-  }
-  let cancelled = false;
-  let retried = false;
-  const load = async () => {
-    const schedule = await fetchSchedule(scheduleUrl, lang);
-    if (cancelled) return;
-    if (!schedule) {
-      if (!retried) {
-        retried = true;
-        setTimeout(load, 2e3);
-        return;
-      }
-      renderError(state.cardEl, lang, resolvedTheme);
-      return;
-    }
-    state.schedule = schedule;
-    const quote = pickQuote(schedule);
-    if (!quote) {
-      renderError(state.cardEl, lang, resolvedTheme);
-      return;
-    }
-    state.displayedDate = todayUtc8();
-    renderQuote(state.cardEl, quote, lang, resolvedTheme);
-  };
-  load();
-  if (typeof document !== "undefined") {
-    const onVisibility = () => {
-      if (document.visibilityState !== "visible") return;
-      if (!state.schedule) return;
-      const today = todayUtc8();
-      if (today === state.displayedDate) return;
-      const quote = pickQuote(state.schedule);
-      if (!quote) return;
-      state.displayedDate = today;
-      renderQuote(state.cardEl, quote, lang, resolvedTheme);
-    };
-    document.addEventListener("visibilitychange", onVisibility);
-    state.unwatchVisibility = () => document.removeEventListener("visibilitychange", onVisibility);
+    const shadow = root;
+    while (shadow.firstChild) shadow.removeChild(shadow.firstChild);
   }
+  const container = document.createElement("div");
+  root.appendChild(container);
+  const reactRoot = (0, import_client.createRoot)(container);
+  (0, import_react_dom.flushSync)(() => {
+    reactRoot.render(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        DailySoupWidget,
+        {
+          lang,
+          themeConfig,
+          scheduleUrl,
+          maxWidth
+        }
+      )
+    );
+  });
   return {
     destroy() {
-      cancelled = true;
-      state.unwatchTheme();
-      state.unwatchVisibility();
+      reactRoot.unmount();
       if (root === host) {
         host.textContent = "";
       } else if (host.shadowRoot) {
-        while (host.shadowRoot.firstChild) host.shadowRoot.removeChild(host.shadowRoot.firstChild);
+        while (host.shadowRoot.firstChild) {
+          host.shadowRoot.removeChild(host.shadowRoot.firstChild);
+        }
       }
     }
   };
@@ -406,16 +468,16 @@ function mountAll(selector = "[data-daily-soup], #daily-soup") {
 }
 
 // src/component.tsx
-var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function DailySoup({ lang = "zh", theme = "auto", scheduleUrl, className, maxWidth }) {
-  const hostRef = (0, import_react.useRef)(null);
+  const hostRef = (0, import_react2.useRef)(null);
   const themeKey = typeof theme === "string" ? theme : JSON.stringify(theme);
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (!hostRef.current) return;
     const handle = mount(hostRef.current, { lang, theme, scheduleUrl, maxWidth });
     return () => handle.destroy();
   }, [lang, themeKey, scheduleUrl, maxWidth]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: hostRef, className, "data-daily-soup-host": "" });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref: hostRef, className, "data-daily-soup-host": "" });
 }
 //# sourceMappingURL=embed.cjs.js.map