Додайте коментарі до вашого додатку SolidJS

Надайте вашому кодовому агенту контекст FastComments, який йому потрібен — віджети, конфігурація, Secure SSO, REST API та SDK:

npx skills add fastcomments/skills

Працює з Claude Code, Codex, Cursor, Copilot, Gemini та будь‑яким іншим агентом, який підтримує skills CLI.

npm install fastcomments-solidjs

import { FastCommentsCommentWidget } from 'fastcomments-solidjs';

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

Solid не відстежує автоматично глибокі мутації довільних об'єктів, тому зміни конфігурації після першого рендеру потрібно передавати явно. Кожен віджет приймає apiRef, який повертає дескриптор; викликайте handle.update(partial) з createEffect, щоб керувати реактивністю:

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;   // останній активний екземпляр (або null до монтування)
  onInstance: (cb: (instance: WidgetInstance) => void) => void; // спрацьовує один раз, коли екземпляр готовий
  update: (partial: Partial<Config>) => void; // об'єднати та надіслати конфігурацію
}

Використовуйте getInstance() для імперативних дій, які не покриваються .update(), наприклад 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", щоб направити трафік віджетів через кластер ЄС.

Повний демонстраційний додаток знаходиться в examples/example-showcase/. Він віддзеркалює демонстрацію React і охоплює кожен віджет, а також поширені сценарії (темна тема, пагінація, SSO, зворотні виклики).

cd examples/example-showcase
npm install
npm run dev

npm install
npm run build       # бібліотека -> dist/
npm test            # перевірка працездатності (smoke test) vitest
npm run build:demo  # демонстрація -> demo-dist/