Agregar comentarios a tu aplicación SolidJS

Proporcione a su agente de codificación el contexto de FastComments que necesita: widgets, configuración, Secure SSO, la API REST y los SDK:

npx skills add fastcomments/skills

Funciona con Claude Code, Codex, Cursor, Copilot, Gemini y cualquier otro agente que soporte el skills CLI soporta.

npm install fastcomments-solidjs

import { FastCommentsCommentWidget } from 'fastcomments-solidjs';

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

Solid no rastrea automáticamente las mutaciones profundas en objetos arbitrarios, por lo que los cambios de configuración después del primer renderizado deben enviarse explícitamente. Cada widget acepta un apiRef que devuelve un handle; llama 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:

• Antes de que el script se haya cargado: el partial se guarda temporalmente y se aplica en la inicialización.
• Durante una inicialización asíncrona (reviews-summary, user-activity-feed): el partial se encola y se aplica cuando el callback se resuelve.
• Después de la inicialización: se reenvía directamente al método .update() del widget en vivo.

API del handle imperativo

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 cuando la instancia está lista
  update: (partial: Partial<Config>) => void; // fusiona y envía la configuración
}

Usa getInstance() para acciones imperativas que no están cubiertas por .update(), por ejemplo 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/