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 não rastreia automaticamente mutações profundas em objetos arbitrários, portanto as alterações de configuração após a primeira renderização devem ser aplicadas explicitamente. Every widget aceita um apiRef que retorna um handle; chame handle.update(partial) a partir de um createEffect para acionar a reatividade:

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() é seguro chamar a qualquer momento:

• Antes do script ser carregado: o partial é armazenado e aplicado na inicialização.
• Durante uma inicialização assíncrona (reviews-summary, user-activity-feed): o partial é enfileirado e aplicado quando o callback for resolvido.
• Após a inicialização: ele é encaminhado diretamente para o método .update() do widget ativo.

API imperativa do handle

interface WidgetHandle<Config> {
  getInstance: () => WidgetInstance | null;   // instância ao vivo mais recente (ou null antes do mount)
  onInstance: (cb: (instance: WidgetInstance) => void) => void; // acionado quando a instância estiver pronta
  update: (partial: Partial<Config>) => void; // mescla e envia a configuração
}

Use getInstance() para ações imperativas que não são cobertas por .update(), por exemplo, openProfile:

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

Cada widget do fastcomments-react está disponível com o mesmo nome:

Widgets que se anexam a um elemento existente

FastCommentsCollabChatWidget and FastCommentsImageChatWidget mount into a caller-supplied element. Passe um acessor targetRef que retorne o elemento depois que ele for montado:

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

Regiões

Passe region="eu" para rotear o tráfego do widget através do cluster da UE.

Um aplicativo de showcase completo está em examples/example-showcase/. Ele espelha o showcase em React e abrange todos os widgets, além de fluxos comuns (modo escuro, paginação, SSO, callbacks).

cd examples/example-showcase
npm install
npm run dev

npm install
npm run build       # biblioteca -> dist/
npm test            # teste rápido do vitest
npm run build:demo  # demonstração -> demo-dist/