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 δεν παρακολουθεί αυτόματα βαθιές μεταβολές σε αυθαίρετα αντικείμενα, οπότε οι αλλαγές στη διαμόρφωση μετά το πρώτο 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.
• Κατά τη διάρκεια ενός async init (reviews-summary, user-activity-feed): το partial τοποθετείται σε ουρά και εφαρμόζεται όταν το callback επιλυθεί.
• Μετά το init: προωθείται απευθείας στη μέθοδο .update() του live widget.

Επιτακτικό API του handle

interface WidgetHandle<Config> {
  getInstance: () => WidgetInstance | null;   // η πιο πρόσφατη ζωντανή παρουσία (ή 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 that attach to an existing element

FastCommentsCollabChatWidget and FastCommentsImageChatWidget mount into a caller-supplied element. Pass a targetRef accessor that returns the element once mounted:

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

Regions

Pass region="eu" to route widget traffic through the EU cluster.

Μια πλήρης εφαρμογή επίδειξης βρίσκεται στο examples/example-showcase/. Αντικατοπτρίζει την επίδειξη React και καλύπτει κάθε widget καθώς και κοινές ροές (σκοτεινή λειτουργία, σελιδοποίηση, 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/