הוסף תגובות לאפליקציית SolidJS שלך

תן לסוכן הקידוד שלך את ההקשר של FastComments שהוא צריך – וידג׳טים, תצורה, 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 אינו עוקב אוטומטית אחר שינויים עמוקים באובייקטים שרירותיים, ולכן שינויי קונפיגורציה לאחר הרינדור הראשון חייבים להידחף באופן מפורש. כל ווידג'ט מקבל 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() בטוח לקריאה בכל עת:

• לפני שהסקריפט נטען: ה-partial נשמר בצד ומיושם בעת האתחול.
• במהלך אתחול אסינכרוני (reviews-summary, user-activity-feed): ה-partial נכנס לתור ומיושם כשה-callback מסתיים.
• לאחר האתחול: הוא מועבר ישירות למתודת .update() של הווידג'ט החי.

API של imperative handle

interface WidgetHandle<Config> {
  getInstance: () => WidgetInstance | null;   // המופע החי העדכני ביותר (או null לפני ה-mount)
  onInstance: (cb: (instance: WidgetInstance) => void) => void; // מופעל פעם אחת כשהמופע מוכן
  update: (partial: Partial<Config>) => void; // מיזוג ודחיפה של הקונפיגורציה
}

השתמשו ב-getInstance() עבור פעולות imperative שאינן מכוסות על ידי .update(), למשל openProfile:

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

כל ווידג'ט מ־fastcomments-react זמין תחת השמות הבאים:

ווידג'טים שמתחברים לאלמנט קיים

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" כדי לנתב את התנועה של הווידג'ט דרך אשכול ה‑EU.

אפליקציית תצוגה מלאה נמצאת בexamples/example-showcase/. היא משקפת את תצוגת React ומכסה את כל הווידג'טים וכן זרימות נפוצות (מצב כהה, עימוד, 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/