अपने 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 अनियमित ऑब्जेक्ट्स पर गहरे mutations को स्वतः ट्रैक नहीं करता, इसलिए पहले render के बाद config में हुए बदलावों को स्पष्ट रूप से push करना होता है। हर widget एक apiRef स्वीकार करता है जो एक handle लौटाता है; reactivity चलाने के लिए createEffect से handle.update(partial) कॉल करें:

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 को stash कर लिया जाता है और init के समय apply किया जाता है।
• Async init के दौरान (reviews-summary, user-activity-feed): partial को queue किया जाता है और callback resolve होने पर apply किया जाता है।
• Init के बाद: यह सीधे live widget की .update() method पर forward हो जाता है।

Imperative handle API

interface WidgetHandle<Config> {
  getInstance: () => WidgetInstance | null;   // नवीनतम live instance (mount से पहले null)
  onInstance: (cb: (instance: WidgetInstance) => void) => void; // instance तैयार होने पर एक बार चलता है
  update: (partial: Partial<Config>) => void; // config को merge और push करें
}

उन imperative क्रियाओं के लिए getInstance() का उपयोग करें जो .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}
      />
    </>
  );
}

क्षेत्र (Regions)

विजेट के ट्रैफ़िक को EU क्लस्टर से रूट करने के लिए region="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/