Dodaj komentarze do swojej aplikacji SolidJS

Daj swojemu agentowi kodującemu kontekst FastComments, którego potrzebuje – widgety, konfiguracja, Secure SSO, REST API i SDK:

npx skills add fastcomments/skills

Działa z Claude Code, Codex, Cursor, Copilot, Gemini oraz każdym innym agentem obsługiwanym przez skills CLI.

npm install fastcomments-solidjs

import { FastCommentsCommentWidget } from 'fastcomments-solidjs';

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

Solid nie śledzi automatycznie głębokich mutacji na dowolnych obiektach, więc zmiany konfiguracji po pierwszym renderze muszą być przekazywane jawnie. Każdy widget przyjmuje apiRef, który zwraca uchwyt; wywołaj handle.update(partial) z poziomu createEffect, aby napędzać reaktywność:

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() można bezpiecznie wywołać w dowolnym momencie:

• Zanim skrypt się załaduje: partial jest przechowywany i stosowany przy inicjalizacji.
• Podczas asynchronicznej inicjalizacji (reviews-summary, user-activity-feed): partial jest kolejkowany i stosowany, gdy callback się zakończy.
• Po inicjalizacji: jest przekazywany bezpośrednio do metody .update() działającego widgetu.

Imperatywne API uchwytu

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
}

Użyj getInstance() dla akcji imperatywnych, które nie są objęte przez .update(), np. openProfile:

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

Każdy widget z fastcomments-react jest dostępny pod tą samą nazwą:

Widgety, które montują się w istniejącym elemencie

FastCommentsCollabChatWidget i FastCommentsImageChatWidget montują się w elemencie dostarczonym przez wywołującego. Przekaż funkcję targetRef, która zwraca element po zamontowaniu:

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

Regiony

Przekaż region="eu", aby kierować ruch widgetu przez klaster UE.

Pełna aplikacja pokazowa znajduje się w examples/example-showcase/. Odwzorowuje pokaz React i obejmuje każdy widżet oraz typowe przepływy (tryb ciemny, paginacja, SSO, wywołania zwrotne).

cd examples/example-showcase
npm install
npm run dev

npm install
npm run build       # biblioteka -> dist/
npm test            # vitest test dymny
npm run build:demo  # prezentacja -> demo-dist/