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 prati automatski duboke mutacije nad proizvoljnim objektima, tako da promene u config-u nakon prvog rendera moraju biti eksplicitno gurnute. Svaki widget prihvata apiRef koji vraća handle; pozovite handle.update(partial) iz createEffect da biste pokrenuli reaktivnost:

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() je bezbedno pozivati u bilo kom trenutku:

• Pre nego što se skript učita: partial se čuva i primenjuje pri init.
• Tokom asinhrone init faze (reviews-summary, user-activity-feed): partial se stavi u red i primeni kada se callback reši.
• Posle init-a: prosleđuje se direktno metodi .update() živog widgeta.

Imperativni handle API

interface WidgetHandle<Config> {
  getInstance: () => WidgetInstance | null;   // najnovija aktivna instanca (ili null pre mount-a)
  onInstance: (cb: (instance: WidgetInstance) => void) => void; // poziva se jednom kada je instanca spremna
  update: (partial: Partial<Config>) => void; // spoji i pošalji konfiguraciju
}

Koristite getInstance() za imperativne akcije koje nisu obuhvaćene .update(), npr. openProfile:

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

Svaki widget iz fastcomments-react dostupan je pod istim imenom:

Widgeti koji se prikače na postojeći element

FastCommentsCollabChatWidget and FastCommentsImageChatWidget montiraju se u element koji pozivalac obezbedi. Prosledite accessor targetRef koji vraća element nakon što je montiran:

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

Regije

Prosledite region="eu" da usmerite saobraćaj widgeta kroz EU klaster.

Potpuna aplikacija za prikaz se nalazi u examples/example-showcase/. Ona odražava React showcase i pokriva svaki widget kao i uobičajene tokove (tamni režim, paginacija, SSO, callback-ovi).

cd examples/example-showcase
npm install
npm run dev

npm install
npm run build       # biblioteka -> dist/
npm test            # vitest osnovni test
npm run build:demo  # prikaz -> demo-dist/