Добавьте комментарии в ваше приложение 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 монтируются в элемент, переданный вызывающим. Передайте accessor 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       # library -> dist/
npm test            # vitest smoke test
npm run build:demo  # showcase -> demo-dist/