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 rastgele nesnelerde derin değişiklikleri otomatik olarak takip etmez, bu nedenle ilk render'dan sonra yapılandırma değişiklikleri açıkça gönderilmelidir. Her widget bir handle döndüren bir apiRef kabul eder; reaktiviteyi tetiklemek için bir createEffect içinde handle.update(partial) çağırın:

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() her zaman güvenle çağrılabilir:

• Script yüklenmeden önce: partial saklanır ve init sırasında uygulanır.
• Asenkron bir init sırasında (reviews-summary, user-activity-feed): partial kuyruğa alınır ve callback çözüldüğünde uygulanır.
• Init'ten sonra: canlı widget'ın .update() metoduna doğrudan iletilir.

İmperatif handle API

interface WidgetHandle<Config> {
  getInstance: () => WidgetInstance | null;   // en son canlı örnek (veya mount öncesi null)
  onInstance: (cb: (instance: WidgetInstance) => void) => void; // örnek hazır olduğunda bir kez tetiklenir
  update: (partial: Partial<Config>) => void; // yapılandırmayı birleştir ve gönder
}

.update() tarafından kapsanmayan imperatif işlemler için getInstance() kullanın, örn. openProfile:

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

Her fastcomments-react içindeki her widget aynı isimle kullanılabilir:

Mevcut bir öğeye eklenen widget'lar

FastCommentsCollabChatWidget ve FastCommentsImageChatWidget, çağıran tarafından sağlanan bir öğeye monte olur. Monte edildikten sonra öğeyi döndüren bir targetRef erişici sağlayın:

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

Bölgeler

Widget trafiğini AB kümesi üzerinden yönlendirmek için region="eu" verin.

Tam bir örnek uygulama examples/example-showcase/ dizininde yer alır. Bu, React örnek uygulamasını yansıtır ve her widget ile yaygın akışları (karanlık mod, sayfalandırma, SSO, callbacks) kapsar.

cd examples/example-showcase
npm install
npm run dev

npm install
npm run build       # kütüphane -> dist/
npm test            # vitest smoke testi
npm run build:demo  # gösterim -> demo-dist/