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 ne suit pas automatiquement les mutations profondes sur des objets arbitraires, donc les modifications de config après le premier rendu doivent être poussées explicitement. Chaque widget accepte un apiRef qui renvoie une handle ; appelez handle.update(partial) depuis un createEffect pour piloter la réactivité :

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() peut être appelé en toute sécurité à tout moment :

• Avant que le script ne soit chargé : le partiel est mis en cache et appliqué à l'initialisation.
• Pendant une initialisation asynchrone (reviews-summary, user-activity-feed) : le partiel est mis en file d'attente et appliqué lorsque le callback est résolu.
• Après l'initialisation : il transmet directement à la méthode .update() du widget actif.

API impérative du handle

interface WidgetHandle<Config> {
  getInstance: () => WidgetInstance | null;   // dernière instance active (ou null avant le montage)
  onInstance: (cb: (instance: WidgetInstance) => void) => void; // se déclenche une fois que l'instance est prête
  update: (partial: Partial<Config>) => void; // fusionne et pousse la configuration
}

Utilisez getInstance() pour des actions impératives qui ne sont pas couvertes par .update(), par ex. openProfile:

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

Chaque widget de fastcomments-react est disponible sous le même nom :

Widgets qui s'attachent à un élément existant

FastCommentsCollabChatWidget et FastCommentsImageChatWidget s'installent dans un élément fourni par l'appelant. Passez un accesseur targetRef qui renvoie l'élément une fois monté :

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

Régions

Passez region="eu" pour diriger le trafic du widget via le cluster de l'UE.

Une application de démonstration complète se trouve dans examples/example-showcase/. Elle reflète le showcase React et couvre chaque widget ainsi que les flux courants (mode sombre, pagination, SSO, callbacks).

cd examples/example-showcase
npm install
npm run dev

npm install
npm run build       # bibliothèque -> dist/
npm test            # test de fumée vitest
npm run build:demo  # démo -> demo-dist/