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 は任意のオブジェクト上の深いミューテーションを自動的に追跡しないため、 最初のレンダー後の設定変更は明示的にプッシュする必要があります。各ウィジェットは ハンドルを返す 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() はいつでも安全に呼び出せます:

• スクリプトがロードされる前: 部分的な設定は一時保存され、初期化時に適用されます。
• 非同期の初期化中（reviews-summary、user-activity-feed）: 部分的な設定はキューに入れられ、コールバックが解決されたときに適用されます。
• 初期化後: ライブウィジェットの .update() メソッドに直接転送されます。

命令的ハンドル API

interface WidgetHandle<Config> {
  getInstance: () => WidgetInstance | null;   // latest live instance (or null before mount)
  onInstance: (cb: (instance: WidgetInstance) => void) => void; // fires once instance is ready
  update: (partial: Partial<Config>) => void; // merge-and-push config
}

.update() でカバーされない命令的な操作（例: openProfile）には getInstance() を使用します:

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

fastcomments-react のすべてのウィジェットは同じ名前で利用できます：

Widgets that attach to an existing element

FastCommentsCollabChatWidget と FastCommentsImageChatWidget は、呼び出し元が提供する要素にマウントされます。マウント後にその要素を返す targetRef アクセサを渡してください：

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}
      />
    </>
  );
}

リージョン

ウィジェットのトラフィックをEUクラスター経由にするには region="eu" を渡します。

完全なショーケースアプリは examples/example-showcase/ にあります。これは React のショーケースを反映しており、すべての ウィジェットと一般的なフロー（dark mode、pagination、SSO、callbacks）を網羅しています。

cd examples/example-showcase
npm install
npm run dev

npm install
npm run build       # ライブラリ -> dist/
npm test            # vitest のスモークテスト
npm run build:demo  # ショーケース -> demo-dist/