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 변경은 명시적으로 푸시해야 합니다. 모든 위젯은 핸들을 반환하는 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()는 언제든지 호출해도 안전합니다:

• Before the script has loaded: the partial is stashed and applied at init.
• During an async init (reviews-summary, user-activity-feed): the partial is queued and applied when the callback resolves.
• After init: it forwards straight to the live widget's .update() method.

명령형 핸들 API

interface WidgetHandle<Config> {
  getInstance: () => WidgetInstance | null;   // 최신 라이브 인스턴스(또는 마운트 전에는 null)
  onInstance: (cb: (instance: WidgetInstance) => void) => void; // 인스턴스가 준비되면 한 번 호출됨
  update: (partial: Partial<Config>) => void; // 구성 병합 및 푸시
}

.update()로 다루어지지 않는 명령형 동작에는 getInstance()를 사용하세요. 예: openProfile:

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

fastcomments-react의 모든 위젯은 동일한 이름으로 사용 가능합니다:

기존 요소에 첨부되는 위젯

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

리전

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/