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 не прати аутоматски дубоке мутације на произвољним објектима, па измене конфигурације након првог рендеровања морају бити послате експлицитно. Сваки видгет прихвата apiRef који враћа руку; позовите handle.update(partial) из createEffect да покренете реактивност:

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() је безбедно позивати у било ком тренутку:

• Пре него што се скрипта учита: the partial се ставља на чување и примењује при иницијализацији.
• Током асинхроне инициализације (reviews-summary, user-activity-feed): the partial се ставља у ред и примењује када callback буде решен.
• Након иницијализације: директно прослеђује методи .update() живог видгета.

Императивни handle API

interface WidgetHandle<Config> {
  getInstance: () => WidgetInstance | null;   // најновија активна инстанца (или null пре mount-а)
  onInstance: (cb: (instance: WidgetInstance) => void) => void; // покреће се једном када је инстанца спремна
  update: (partial: Partial<Config>) => void; // спаја и шаље конфигурацију
}

Користите getInstance() за императивне акције које нису покривене са .update(), нпр. openProfile:

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

Сваки видџет из fastcomments-react доступан је под истим именом:

Видџети који се прикачују на постојећи елемент

FastCommentsCollabChatWidget и FastCommentsImageChatWidget монтирају се у елемент који обезбеђује позивач. Проследите accessor targetRef који враћа елемент након што је монтиран:

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

Региони

Проследите region="eu" да усмерите саобраћај видџета кроз ЕУ кластер.

Пуна апликација за приказ налази се у examples/example-showcase/. Она прати React showcase и покрива сваки видџет плус уобичајене токове (тамни режим, страничење, SSO, повратни позиви).

cd examples/example-showcase
npm install
npm run dev

npm install
npm run build       # библиотека -> dist/
npm test            # vitest брзи тест
npm run build:demo  # демонстрација -> demo-dist/