Add Comments to Your SolidJS App

npm install fastcomments-solidjs

import { FastCommentsCommentWidget } from 'fastcomments-solidjs';

export default function App() {
  return <FastCommentsCommentWidget tenantId="demo" urlId="some-page-id" />;
}

Solid 不會自動追蹤任意物件的深層變更，因此在第一次渲染後的 config 變更必須被明確推送。每個 widget 都接受一個會回傳 handle 的 apiRef；在 createEffect 中呼叫 handle.update(partial) 以驅動反應性：

import { createEffect, createSignal } from 'solid-js';
import { FastCommentsCommentWidget, type FastCommentsCommentWidgetHandle } from 'fastcomments-solidjs';

export default function Paginated() {
  const [page, setPage] = createSignal(0);
  let handle: FastCommentsCommentWidgetHandle | undefined;
  createEffect(() => handle?.update({ urlId: `product-${page()}` }));

  return (
    <>
      <button onClick={() => setPage(page() + 1)}>next</button>
      <FastCommentsCommentWidget
        apiRef={(h) => (handle = h)}
        tenantId="demo"
        urlId={`product-${page()}`}
      />
    </>
  );
}

update() 在任何時候呼叫都是安全的：

• 在 script 載入之前：partial 會被暫存並在初始化時套用。
• 在非同步初始化期間 (reviews-summary, user-activity-feed)：partial 會排入佇列，並在 callback 解決時套用。
• 在初始化之後：它會直接轉發到 live widget 的 .update() 方法。

命令式 handle API

interface WidgetHandle<Config> {
  getInstance: () => WidgetInstance | null;   // 最新的運行中實例（或在掛載前為 null）
  onInstance: (cb: (instance: WidgetInstance) => void) => void; // 在實例就緒時觸發一次
  update: (partial: Partial<Config>) => void; // 合併並推送 config
}

對於 .update() 無法涵蓋的命令式操作，請使用 getInstance()，例如 openProfile:

const openProfile = () =>
  (handle?.getInstance() as { openProfile?: (o: { userId: string }) => void } | null)
    ?.openProfile?.({ userId: 'demo' });

來自 fastcomments-react 的每個元件都以相同的名稱提供：

附加到現有元素的元件

FastCommentsCollabChatWidget and FastCommentsImageChatWidget mount into a caller-supplied element. Pass a targetRef accessor that returns the element once mounted:

import { FastCommentsImageChatWidget } from 'fastcomments-solidjs';

export default function ImageChat() {
  let img: HTMLImageElement | undefined;
  return (
    <>
      <img ref={img} src="/screenshot.png" alt="" />
      <FastCommentsImageChatWidget
        tenantId="demo"
        urlId="my-image"
        targetRef={() => img}
      />
    </>
  );
}

區域

傳遞 region="eu" 以透過 EU 叢集引導元件流量。

完整的展示應用位於 examples/example-showcase/。 它鏡像 React 展示並涵蓋每一個 元件以及常見流程（深色模式、分頁、SSO、回呼）。

cd examples/example-showcase
npm install
npm run dev

npm install
npm run build       # 函式庫 -> dist/
npm test            # vitest 初步測試
npm run build:demo  # 展示 -> demo-dist/