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 no realiza un seguimiento automático de mutaciones profundas en objetos arbitrarios, por lo que los cambios de configuración después del primer renderizado deben enviarse explícitamente. Every widget acepta un apiRef que devuelve un handle; llame a handle.update(partial) desde un createEffect para impulsar la reactividad:

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() es seguro de llamar en cualquier momento:

• 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 imperativa del handle

interface WidgetHandle<Config> {
  getInstance: () => WidgetInstance | null;   // última instancia en vivo (o null antes del montaje)
  onInstance: (cb: (instance: WidgetInstance) => void) => void; // se dispara una vez que la instancia está lista
  update: (partial: Partial<Config>) => void; // fusiona y empuja la configuración
}

Utilice getInstance() para acciones imperativas que no estén cubiertas por .update(), p. ej. openProfile:

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

Cada widget de fastcomments-react está disponible con el mismo nombre:

Widgets que se adjuntan a un elemento existente

FastCommentsCollabChatWidget y FastCommentsImageChatWidget se montan en un elemento proporcionado por el llamador. Pasa un accesor targetRef que devuelve el elemento una vez 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}
      />
    </>
  );
}

Regiones

Pasa region="eu" para enrutar el tráfico del widget a través del clúster de la UE.

Una aplicación de muestra completa se encuentra en examples/example-showcase/. Refleja la demostración de React y cubre cada widget además de flujos comunes (modo oscuro, paginación, SSO, callbacks).

cd examples/example-showcase
npm install
npm run dev

npm install
npm run build       # biblioteca -> dist/
npm test            # prueba de humo con vitest
npm run build:demo  # demostración -> demo-dist/