Voeg opmerkingen toe aan je SolidJS-app

Geef je code‑agent de FastComments‑context die hij nodig heeft - widgets, configuratie, Secure SSO, de REST‑API en de SDK’s:

npx skills add fastcomments/skills

Werkt met Claude Code, Codex, Cursor, Copilot, Gemini en elke andere agent die de skills CLI ondersteunt.

npm install fastcomments-solidjs

import { FastCommentsCommentWidget } from 'fastcomments-solidjs';

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

Solid houdt diepe mutaties op willekeurige objecten niet automatisch bij, dus configuratiewijzigingen na de eerste render moeten expliciet worden doorgegeven. Elke widget accepteert een apiRef die een handle teruggeeft; roep handle.update(partial) aan vanuit een createEffect om reactiviteit aan te sturen:

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() kan op elk moment veilig worden aangeroepen:

• Voordat het script is geladen: het gedeeltelijke object wordt tijdelijk opgeslagen en toegepast bij de initialisatie.
• Tijdens een asynchrone initialisatie (reviews-summary, user-activity-feed): het gedeeltelijke object wordt in de wachtrij geplaatst en toegepast zodra de callback is afgerond.
• Na de initialisatie: het wordt rechtstreeks doorgestuurd naar de .update()-methode van de live widget.

Imperatieve handle-API

interface WidgetHandle<Config> {
  getInstance: () => WidgetInstance | null;   // laatste live instantie (of null vóór het mounten)
  onInstance: (cb: (instance: WidgetInstance) => void) => void; // wordt eenmaal aangeroepen zodra de instantie gereed is
  update: (partial: Partial<Config>) => void; // configuratie samenvoegen en doorgeven
}

Gebruik getInstance() voor imperatieve acties die niet door .update() worden gedekt, bijv. openProfile:

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

Elk widget uit fastcomments-react is beschikbaar onder dezelfde naam:

Widgets die aan een bestaand element worden gekoppeld

FastCommentsCollabChatWidget en FastCommentsImageChatWidget worden gemount in een door de aanroeper aangeleverd element. Geef een targetRef-toegangsfunctie door die het element teruggeeft zodra het is gemonteerd:

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

Regio's

Geef region="eu" op om het widgetverkeer via het EU-cluster te routeren.

Een volledige showcase-app bevindt zich in examples/example-showcase/. Het weerspiegelt de React showcase en behandelt elke widget plus veelvoorkomende flows (donkere modus, paginering, SSO, callbacks).

cd examples/example-showcase
npm install
npm run dev

npm install
npm run build       # bibliotheek -> dist/
npm test            # vitest smoke-test
npm run build:demo  # showcase -> demo-dist/