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 δεν παρακολουθεί αυτόματα βαθιές μεταβολές σε αυθαίρετα αντικείμενα, οπότε οι αλλαγές στο config μετά το πρώτο render πρέπει να προωθούνται ρητά. Κάθε widget δέχεται ένα apiRef που επιστρέφει ένα handle· καλέστε 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() είναι ασφαλές να κληθεί οποιαδήποτε στιγμή:

• Πριν το script φορτωθεί: το partial αποθηκεύεται προσωρινά και εφαρμόζεται κατά το init.
• Κατά τη διάρκεια ενός ασύγχρονου init (reviews-summary, user-activity-feed): το partial τίθεται σε ουρά και εφαρμόζεται όταν η callback επιλυθεί.
• Μετά το init: προωθείται απευθείας στη μέθοδο .update() του ζωντανού widget.

Επιτακτικό API χειρολαβής

interface WidgetHandle<Config> {
  getInstance: () => WidgetInstance | null;   // πιο πρόσφατη ζωντανή instance (ή null πριν το mount)
  onInstance: (cb: (instance: WidgetInstance) => void) => void; // εκτελείται μόλις η instance είναι έτοιμη
  update: (partial: Partial<Config>) => void; // συγχώνευση και ώθηση config
}

Χρησιμοποιήστε getInstance() για επιτακτικές ενέργειες που δεν καλύπτονται από .update(), π.χ. openProfile:

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

Κάθε widget από το fastcomments-react είναι διαθέσιμο με το ίδιο όνομα:

Widgets που επισυνάπτονται σε υπάρχον στοιχείο

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" για να δρομολογήσετε την κίνηση του widget μέσω του cluster της ΕΕ.

Μια πλήρης εφαρμογή επίδειξης βρίσκεται στο examples/example-showcase/. Αντικατοπτρίζει την επίδειξη React και καλύπτει κάθε widget καθώς και συνηθισμένες ροές (dark mode, pagination, SSO, callbacks).

cd examples/example-showcase
npm install
npm run dev

npm install
npm run build       # βιβλιοθήκη -> dist/
npm test            # γρήγορος έλεγχος (smoke test) του vitest
npm run build:demo  # παρουσίαση -> demo-dist/