Tilføj kommentarer til din SolidJS-app

Giv din kodeagent den FastComments‑kontekst, den har brug for – widgets, konfiguration, Secure SSO, REST‑API’en og SDK’erne:

npx skills add fastcomments/skills

Fungerer med Claude Code, Codex, Cursor, Copilot, Gemini og alle andre agenter, som skills CLI understøtter.

npm install fastcomments-solidjs

import { FastCommentsCommentWidget } from 'fastcomments-solidjs';

export default function App() {
  return <FastCommentsCommentWidget tenantId="demo" urlId="some-page-id" />;
}

Solid sporer ikke automatisk dybe mutationer på vilkårlige objekter, så konfigurationsændringer efter første render skal pushes eksplicit. Hver widget accepterer en apiRef, der returnerer et handle; kald handle.update(partial) fra en createEffect for at drive reaktivitet:

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() kan trygt kaldes når som helst:

• Før scriptet er indlæst: den partielle konfiguration gemmes og anvendes ved init.
• Under en asynkron init (reviews-summary, user-activity-feed): den partielle konfiguration sættes i kø og anvendes, når callback'en resolves.
• Efter init: den videresendes direkte til den live widgets .update()-metode.

Imperativt handle-API

interface WidgetHandle<Config> {
  getInstance: () => WidgetInstance | null;   // seneste live-instans (eller null før mount)
  onInstance: (cb: (instance: WidgetInstance) => void) => void; // udløses én gang, når instansen er klar
  update: (partial: Partial<Config>) => void; // merge-and-push konfiguration
}

Brug getInstance() til imperative handlinger, der ikke er dækket af .update(), f.eks. openProfile:

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

Hver widget fra fastcomments-react er tilgængelig under samme navn:

Widgets der tilknyttes et eksisterende element

FastCommentsCollabChatWidget og FastCommentsImageChatWidget monteres i et element leveret af kaldende kode. Pass en targetRef accessor som returnerer elementet, når det er monteret:

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

Regioner

Angiv region="eu" for at rute widget-trafik gennem EU-klyngen.

En komplet showcase-app ligger i examples/example-showcase/. Den spejler React-showcasen og dækker alle widgets samt almindelige flows (mørk tilstand, paginering, SSO, callbacks).

cd examples/example-showcase
npm install
npm run dev

npm install
npm run build       # bibliotek -> dist/
npm test            # vitest hurtigtest
npm run build:demo  # præsentation -> demo-dist/