Προσθήκη σχολίων στην εφαρμογή SolidJS σας

Δώστε στον πράκτορα κώδικά σας το πλαίσιο FastComments που χρειάζεται - widgets, ρυθμίσεις, Secure SSO, το REST API και τα SDKs:

npx skills add fastcomments/skills

Λειτουργεί με Claude Code, Codex, Cursor, Copilot, Gemini και κάθε άλλο πράκτορα που υποστηρίζει το skills CLI.

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 που συνδέονται με υπάρχον στοιχείο

Τα FastCommentsCollabChatWidget και FastCommentsImageChatWidget τοποθετούνται σε στοιχείο που παρέχει ο καλών. Περάστε μια συνάρτηση 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 μέσω του ευρωπαϊκού (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/